clay-server 2.15.2 → 2.16.0-beta.1

package/lib/public/modules/sidebar.js

@@ -3,10 +3,12 @@ import { iconHtml, refreshIcons } from './icons.js';
 import { openProjectSettings } from './project-settings.js';
 import { triggerShare } from './qrcode.js';
 import { parseEmojis } from './markdown.js';
+import { getCurrentTheme } from './theme.js';
 import { showMateProfilePopover } from './profile.js';
 import { closeArchive } from './sticky-notes.js';
 import { closeScheduler } from './scheduler.js';
 import { openSearch as openSessionSearch } from './session-search.js';
+import { openCommandPalette } from './command-palette.js';
 
 var ctx;
 
@@ -20,6 +22,7 @@ var expandedLoopGroups = new Set();
 // --- Cached project data for mobile sheet ---
 var cachedProjectList = [];
 var cachedCurrentSlug = null;
+var mobileChatSheetOpen = false; // track if chat sheet is showing
 
 function dismissOverlayPanels() {
   closeArchive();
@@ -483,6 +486,9 @@ function renderSessionItem(s) {
 export function renderSessionList(sessions) {
   if (sessions) cachedSessions = sessions;
 
+  // If mobile chat sheet is open, refresh its session list
+  refreshMobileChatSheet();
+
   ctx.sessionListEl.innerHTML = "";
 
   // Partition: loop sessions vs normal sessions
@@ -644,9 +650,15 @@ export function closeSidebar() {
   ctx.sidebarOverlay.classList.remove("visible");
 }
 
-// --- Mobile sheet (fullscreen overlay for Projects / Sessions) ---
+// --- Mobile sheet (fullscreen overlay for Projects / Sessions / Mate Profile) ---
+
+var mobileSheetMateData = null;
+
+export function setMobileSheetMateData(data) {
+  mobileSheetMateData = data;
+}
 
-function openMobileSheet(type) {
+export function openMobileSheet(type) {
   var sheet = document.getElementById("mobile-sheet");
   if (!sheet) return;
 
@@ -660,15 +672,21 @@ function openMobileSheet(type) {
     var prevPanel = document.getElementById("sidebar-panel-files");
     if (prevFileTree && prevPanel) prevPanel.appendChild(prevFileTree);
   }
+  // Return knowledge files to mate sidebar before clearing
+  if (sheet.classList.contains("sheet-knowledge")) {
+    var prevKnowledge = document.getElementById("mate-knowledge-files");
+    var prevKnowledgePanel = document.getElementById("mate-sidebar-knowledge");
+    if (prevKnowledge && prevKnowledgePanel) prevKnowledgePanel.appendChild(prevKnowledge);
+  }
 
   listEl.innerHTML = "";
-  sheet.classList.remove("sheet-files");
+  sheet.classList.remove("sheet-files", "sheet-knowledge");
 
   if (type === "projects") {
     titleEl.textContent = "Projects";
     renderSheetProjects(listEl);
   } else if (type === "sessions") {
-    titleEl.textContent = "Sessions";
+    titleEl.textContent = "Chat";
     renderSheetSessions(listEl);
   } else if (type === "files") {
     titleEl.textContent = "Files";
@@ -679,6 +697,28 @@ function openMobileSheet(type) {
       fileTree.classList.remove("hidden");
     }
     if (ctx.onFilesTabOpen) ctx.onFilesTabOpen();
+  } else if (type === "mate-knowledge") {
+    titleEl.textContent = "Knowledge";
+    sheet.classList.add("sheet-knowledge");
+    var knowledgeFiles = document.getElementById("mate-knowledge-files");
+    if (knowledgeFiles) {
+      listEl.appendChild(knowledgeFiles);
+      knowledgeFiles.classList.remove("hidden");
+    }
+    // Request knowledge list if not loaded
+    if (ctx.requestKnowledgeList) ctx.requestKnowledgeList();
+  } else if (type === "mate-profile") {
+    titleEl.textContent = "";
+    renderSheetMateProfile(listEl);
+  } else if (type === "search") {
+    titleEl.textContent = "Search";
+    renderSheetSearch(listEl);
+  } else if (type === "tools") {
+    titleEl.textContent = "Tools";
+    renderSheetTools(listEl);
+  } else if (type === "settings") {
+    titleEl.textContent = "Settings";
+    renderSheetSettings(listEl);
   }
 
   sheet.classList.remove("hidden", "closing");
@@ -689,6 +729,8 @@ function closeMobileSheet() {
   var sheet = document.getElementById("mobile-sheet");
   if (!sheet || sheet.classList.contains("hidden")) return;
 
+  mobileChatSheetOpen = false;
+
   // Return file tree to sidebar if it was moved
   if (sheet.classList.contains("sheet-files")) {
     var fileTree = document.getElementById("file-tree");
@@ -697,6 +739,14 @@ function closeMobileSheet() {
       sidebarFilesPanel.appendChild(fileTree);
     }
   }
+  // Return knowledge files to mate sidebar if moved
+  if (sheet.classList.contains("sheet-knowledge")) {
+    var knowledgeFiles = document.getElementById("mate-knowledge-files");
+    var knowledgePanel = document.getElementById("mate-sidebar-knowledge");
+    if (knowledgeFiles && knowledgePanel) {
+      knowledgePanel.appendChild(knowledgeFiles);
+    }
+  }
 
   sheet.classList.add("closing");
   setTimeout(function () {
@@ -713,7 +763,12 @@ function renderSheetProjects(listEl) {
 
       var abbrev = document.createElement("span");
       abbrev.className = "mobile-project-abbrev";
-      abbrev.textContent = getProjectAbbrev(p.name);
+      if (p.icon) {
+        abbrev.textContent = p.icon;
+        parseEmojis(abbrev);
+      } else {
+        abbrev.textContent = getProjectAbbrev(p.name);
+      }
       el.appendChild(abbrev);
 
       var name = document.createElement("span");
@@ -745,7 +800,208 @@ function renderSheetProjects(listEl) {
 }
 
 function renderSheetSessions(listEl) {
-  // New session button at top
+  // --- Context filter bar (horizontal scroll) ---
+  var filterBar = document.createElement("div");
+  filterBar.className = "mobile-chat-filter-bar";
+
+  // Current project chip (always first, pre-selected)
+  var currentProject = null;
+  for (var pi = 0; pi < cachedProjectList.length; pi++) {
+    if (cachedProjectList[pi].slug === cachedCurrentSlug) {
+      currentProject = cachedProjectList[pi];
+      break;
+    }
+  }
+
+  // Build chips: projects first, then mates
+  var chips = [];
+
+  for (var ci = 0; ci < cachedProjectList.length; ci++) {
+    (function (p) {
+      var chip = document.createElement("button");
+      chip.className = "mobile-chat-chip";
+      if (p.slug === cachedCurrentSlug) chip.classList.add("active");
+      chip.dataset.type = "project";
+      chip.dataset.slug = p.slug;
+
+      var abbrev = document.createElement("span");
+      abbrev.className = "mobile-chat-chip-icon";
+      if (p.icon) {
+        abbrev.textContent = p.icon;
+        parseEmojis(abbrev);
+      } else {
+        abbrev.textContent = getProjectAbbrev(p.name);
+      }
+      chip.appendChild(abbrev);
+
+      var label = document.createElement("span");
+      label.textContent = p.name;
+      chip.appendChild(label);
+
+      // Processing dot: same class as icon strip
+      var statusDot = document.createElement("span");
+      statusDot.className = "icon-strip-status";
+      if (p.isProcessing) statusDot.classList.add("processing");
+      chip.appendChild(statusDot);
+
+      if (p.unread > 0 && p.slug !== cachedCurrentSlug) {
+        var badge = document.createElement("span");
+        badge.className = "mobile-chat-chip-badge";
+        badge.textContent = p.unread > 99 ? "99+" : String(p.unread);
+        chip.appendChild(badge);
+      }
+
+      chips.push(chip);
+    })(cachedProjectList[ci]);
+  }
+
+  for (var mi = 0; mi < cachedMates.length; mi++) {
+    (function (mate) {
+      var mp = mate.profile || {};
+      var chip = document.createElement("button");
+      chip.className = "mobile-chat-chip";
+      chip.dataset.type = "mate";
+      chip.dataset.mateId = mate.id;
+
+      var avatarEl = document.createElement("img");
+      avatarEl.className = "mobile-chat-chip-avatar";
+      avatarEl.src = "https://api.dicebear.com/9.x/" + (mp.avatarStyle || "bottts") + "/svg?seed=" + encodeURIComponent(mp.avatarSeed || mate.id) + "&size=20";
+      avatarEl.alt = mp.displayName || mate.name || "";
+      chip.appendChild(avatarEl);
+
+      var label = document.createElement("span");
+      label.textContent = mp.displayName || mate.name || "Mate";
+      chip.appendChild(label);
+
+      // Processing dot: same class as icon strip, same data source
+      var mateSlug = "mate-" + mate.id;
+      var mateProj = null;
+      var allProjects = (ctx && ctx.projectList) || [];
+      for (var pi = 0; pi < allProjects.length; pi++) {
+        if (allProjects[pi].slug === mateSlug) { mateProj = allProjects[pi]; break; }
+      }
+      var statusDot = document.createElement("span");
+      statusDot.className = "icon-strip-status";
+      if (mateProj && mateProj.isProcessing) statusDot.classList.add("processing");
+      chip.appendChild(statusDot);
+
+      var unreadCount = cachedDmUnread[mate.id] || 0;
+      if (unreadCount > 0) {
+        var badge = document.createElement("span");
+        badge.className = "mobile-chat-chip-badge";
+        badge.textContent = unreadCount > 99 ? "99+" : String(unreadCount);
+        chip.appendChild(badge);
+      }
+
+      chips.push(chip);
+    })(cachedMates[mi]);
+  }
+
+  for (var i = 0; i < chips.length; i++) {
+    filterBar.appendChild(chips[i]);
+  }
+  listEl.appendChild(filterBar);
+
+  // --- Session list container ---
+  var sessionListEl = document.createElement("div");
+  sessionListEl.className = "mobile-chat-session-list";
+  listEl.appendChild(sessionListEl);
+
+  // --- Render sessions for a context ---
+  function renderSessionsForContext(type, slug, mateId) {
+    sessionListEl.innerHTML = "";
+
+    if (type === "project") {
+      renderMobileSessionsInto(sessionListEl);
+    } else if (type === "mate") {
+      // Mate DM: just open the DM
+      if (ctx.openDm) ctx.openDm(mateId);
+      closeMobileSheet();
+      return;
+    }
+
+    refreshIcons();
+  }
+
+  // --- Chip click handlers ---
+  for (var j = 0; j < chips.length; j++) {
+    (function (chip) {
+      chip.addEventListener("click", function () {
+        // Deactivate all chips
+        for (var k = 0; k < chips.length; k++) {
+          chips[k].classList.remove("active");
+        }
+        chip.classList.add("active");
+
+        var type = chip.dataset.type;
+        if (type === "project") {
+          var slug = chip.dataset.slug;
+          if (slug !== cachedCurrentSlug) {
+            // Switch project, show loading, keep sheet open
+            sessionListEl.innerHTML = "";
+            var loading = document.createElement("div");
+            loading.className = "mobile-chat-context-note";
+            loading.textContent = "Loading sessions...";
+            sessionListEl.appendChild(loading);
+            if (ctx.switchProject) ctx.switchProject(slug);
+            // renderSessionList will be called by WS, which calls refreshMobileChatSheet
+          } else {
+            renderSessionsForContext("project", slug, null);
+          }
+        } else if (type === "mate") {
+          renderSessionsForContext("mate", null, chip.dataset.mateId);
+        }
+      });
+    })(chips[j]);
+  }
+
+  // Track that chat sheet is open
+  mobileChatSheetOpen = true;
+
+  // --- Initial render: current project sessions ---
+  renderSessionsForContext("project", cachedCurrentSlug, null);
+}
+
+// Helper: create a mobile session item element
+function createMobileSessionItem(s) {
+  var el = document.createElement("button");
+  el.className = "mobile-session-item" + (s.active ? " active" : "");
+
+  // Processing dot (left side, before title)
+  if (s.isProcessing) {
+    var dot = document.createElement("span");
+    dot.className = "mobile-session-processing";
+    el.appendChild(dot);
+  }
+
+  var titleSpan = document.createElement("span");
+  titleSpan.className = "mobile-session-title";
+  titleSpan.textContent = s.title || "New Session";
+  el.appendChild(titleSpan);
+
+  // Unread badge (right side)
+  if (s.unread > 0 && !s.active) {
+    var badge = document.createElement("span");
+    badge.className = "mobile-session-unread";
+    badge.textContent = s.unread > 99 ? "99+" : String(s.unread);
+    el.appendChild(badge);
+  }
+
+  (function (id) {
+    el.addEventListener("click", function () {
+      if (ctx.ws && ctx.connected) {
+        ctx.ws.send(JSON.stringify({ type: "switch_session", id: id }));
+      }
+      dismissOverlayPanels();
+      closeMobileSheet();
+    });
+  })(s.id);
+
+  return el;
+}
+
+// Helper: render sorted sessions into a container with date groups
+function renderMobileSessionsInto(container) {
   var newBtn = document.createElement("button");
   newBtn.className = "mobile-session-new";
   newBtn.innerHTML = '<i data-lucide="plus" style="width:16px;height:16px"></i> New session';
@@ -755,30 +1011,186 @@ function renderSheetSessions(listEl) {
     }
     closeMobileSheet();
   });
-  listEl.appendChild(newBtn);
+  container.appendChild(newBtn);
 
   var sorted = cachedSessions.slice().sort(function (a, b) {
     return (b.lastActivity || 0) - (a.lastActivity || 0);
   });
 
   var currentGroup = "";
-  for (var i = 0; i < sorted.length; i++) {
-    var s = sorted[i];
+  for (var si = 0; si < sorted.length; si++) {
+    var s = sorted[si];
     var group = getDateGroup(s.lastActivity || 0);
     if (group !== currentGroup) {
       currentGroup = group;
       var header = document.createElement("div");
       header.className = "mobile-sheet-group";
       header.textContent = group;
-      listEl.appendChild(header);
+      container.appendChild(header);
+    }
+    container.appendChild(createMobileSessionItem(s));
+  }
+}
+
+// Refresh mobile chat sheet when session data updates (called from renderSessionList)
+function refreshMobileChatSheet() {
+  if (!mobileChatSheetOpen) return;
+  var sheet = document.getElementById("mobile-sheet");
+  if (!sheet || sheet.classList.contains("hidden")) {
+    mobileChatSheetOpen = false;
+    return;
+  }
+  var sessionListEl = sheet.querySelector(".mobile-chat-session-list");
+  if (!sessionListEl) return;
+
+  // Update chips: active state and processing dots
+  var chips = sheet.querySelectorAll(".mobile-chat-chip");
+  for (var i = 0; i < chips.length; i++) {
+    var chip = chips[i];
+    chip.classList.remove("active");
+
+    // Update active state
+    if (chip.dataset.type === "project" && chip.dataset.slug === cachedCurrentSlug) {
+      chip.classList.add("active");
+    }
+
+    // Update processing dot: same class as icon strip
+    var statusDot = chip.querySelector(".icon-strip-status");
+    if (statusDot) {
+      var isProcessing = false;
+      var allProjects = (ctx && ctx.projectList) || [];
+      var lookupSlug = chip.dataset.type === "mate" ? ("mate-" + chip.dataset.mateId) : chip.dataset.slug;
+      for (var pi = 0; pi < allProjects.length; pi++) {
+        if (allProjects[pi].slug === lookupSlug && allProjects[pi].isProcessing) {
+          isProcessing = true;
+          break;
+        }
+      }
+      statusDot.classList.toggle("processing", isProcessing);
     }
+  }
+
+  // Re-render sessions for current project
+  sessionListEl.innerHTML = "";
+  renderMobileSessionsInto(sessionListEl);
+
+  refreshIcons();
+}
+
+function renderSheetMateProfile(listEl) {
+  if (!mobileSheetMateData) return;
+  var data = mobileSheetMateData;
+
+  // Profile header
+  var header = document.createElement("div");
+  header.className = "mate-profile-header";
+
+  var avatar = document.createElement("img");
+  avatar.className = "mate-profile-avatar";
+  avatar.src = data.avatarUrl || "";
+  avatar.alt = data.displayName || "";
+  header.appendChild(avatar);
+
+  var info = document.createElement("div");
+  info.className = "mate-profile-info";
+  var nameEl = document.createElement("div");
+  nameEl.className = "mate-profile-name";
+  nameEl.textContent = data.displayName || "";
+  info.appendChild(nameEl);
+  if (data.description) {
+    var descEl = document.createElement("div");
+    descEl.className = "mate-profile-desc";
+    descEl.textContent = data.description;
+    info.appendChild(descEl);
+  }
+  header.appendChild(info);
+  listEl.appendChild(header);
+
+  // Action buttons
+  var actions = [
+    { icon: "book-open", label: "Knowledge", btnId: "mate-knowledge-btn", countId: "mate-knowledge-count" },
+    { icon: "sticky-note", label: "Sticky Notes", btnId: "sticky-notes-toggle-btn", countId: "sticky-notes-sidebar-count" },
+    { icon: "puzzle", label: "Skills", btnId: "mate-skills-btn" },
+    { icon: "calendar", label: "Scheduled Tasks", btnId: "mate-scheduler-btn" }
+  ];
+
+  for (var i = 0; i < actions.length; i++) {
+    (function (action) {
+      var btn = document.createElement("button");
+      btn.className = "mate-profile-action";
+      var countHtml = "";
+      if (action.countId) {
+        var countEl = document.getElementById(action.countId);
+        if (countEl && !countEl.classList.contains("hidden") && countEl.textContent) {
+          countHtml = '<span class="mate-profile-action-count">' + escapeHtml(countEl.textContent) + '</span>';
+        }
+      }
+      btn.innerHTML = '<i data-lucide="' + action.icon + '"></i><span>' + action.label + '</span>' + countHtml;
+      btn.addEventListener("click", function () {
+        closeMobileSheet();
+        var targetBtn = document.getElementById(action.btnId);
+        if (targetBtn) {
+          setTimeout(function () { targetBtn.click(); }, 250);
+        }
+      });
+      listEl.appendChild(btn);
+    })(actions[i]);
+  }
+}
+
+function renderSheetSearch(listEl) {
+  // Search input at top
+  var wrap = document.createElement("div");
+  wrap.className = "mobile-search-input-wrap";
+  var input = document.createElement("input");
+  input.className = "mobile-search-input";
+  input.type = "text";
+  input.placeholder = "Search sessions, messages...";
+  input.autocomplete = "off";
+  input.spellcheck = false;
+  wrap.appendChild(input);
+  listEl.appendChild(wrap);
+
+  // Results container
+  var resultsEl = document.createElement("div");
+  resultsEl.style.padding = "0 8px";
+  listEl.appendChild(resultsEl);
+
+  // Auto-focus
+  setTimeout(function () { input.focus(); }, 300);
+
+  // Show all sessions initially
+  renderSearchResults(resultsEl, "");
+
+  input.addEventListener("input", function () {
+    var q = input.value.trim().toLowerCase();
+    renderSearchResults(resultsEl, q);
+  });
+  input.addEventListener("keydown", function (e) { e.stopPropagation(); });
+  input.addEventListener("keyup", function (e) { e.stopPropagation(); });
+  input.addEventListener("keypress", function (e) { e.stopPropagation(); });
+}
+
+function renderSearchResults(container, query) {
+  container.innerHTML = "";
+  var sorted = cachedSessions.slice().sort(function (a, b) {
+    return (b.lastActivity || 0) - (a.lastActivity || 0);
+  });
+
+  var found = 0;
+  for (var i = 0; i < sorted.length; i++) {
+    var s = sorted[i];
+    var title = s.title || "New Session";
+    if (query && title.toLowerCase().indexOf(query) === -1) continue;
+    found++;
 
     var el = document.createElement("button");
-    el.className = "mobile-session-item" + (s.active ? " active" : "");
+    el.className = "mobile-session-item";
+    if (s.active) el.classList.add("active");
 
     var titleSpan = document.createElement("span");
     titleSpan.className = "mobile-session-title";
-    titleSpan.textContent = s.title || "New Session";
+    titleSpan.textContent = title;
     el.appendChild(titleSpan);
 
     if (s.isProcessing) {
@@ -797,10 +1209,128 @@ function renderSheetSessions(listEl) {
       });
     })(s.id);
 
-    listEl.appendChild(el);
+    container.appendChild(el);
+  }
+
+  if (found === 0 && query) {
+    var empty = document.createElement("div");
+    empty.className = "mobile-alert-empty";
+    empty.textContent = 'No results for "' + query + '"';
+    container.appendChild(empty);
   }
 }
 
+function renderSheetTools(listEl) {
+  var isMateDm = document.body.classList.contains("mate-dm-active");
+
+  var items = isMateDm ? [
+    { icon: "book-open", label: "Knowledge", action: "mate-knowledge" },
+    { icon: "calendar-clock", label: "Scheduled Tasks", action: "mate-scheduler" }
+  ] : [
+    { icon: "folder-tree", label: "Files", action: "files" },
+    { icon: "square-terminal", label: "Terminal", action: "terminal" },
+    { icon: "calendar-clock", label: "Scheduled Tasks", action: "scheduler" }
+  ];
+
+  for (var i = 0; i < items.length; i++) {
+    (function (item) {
+      var btn = document.createElement("button");
+      btn.className = "mobile-more-item";
+      btn.innerHTML = '<i data-lucide="' + item.icon + '"></i><span class="mobile-more-item-label">' + item.label + '</span>';
+      btn.addEventListener("click", function () {
+        closeMobileSheet();
+        var targetId = null;
+        if (item.action === "files") {
+          setTimeout(function () { openMobileSheet("files"); }, 250);
+        } else if (item.action === "terminal") {
+          if (ctx.openTerminal) ctx.openTerminal();
+        } else if (item.action === "scheduler") {
+          targetId = "scheduler-btn";
+        } else if (item.action === "mate-knowledge") {
+          setTimeout(function () { openMobileSheet("mate-knowledge"); }, 250);
+          return;
+        } else if (item.action === "mate-sticky") {
+          targetId = "sticky-notes-toggle-btn";
+        } else if (item.action === "mate-skills") {
+          targetId = "mate-skills-btn";
+        } else if (item.action === "mate-scheduler") {
+          targetId = "mate-scheduler-btn";
+        }
+        if (targetId) {
+          var targetBtn = document.getElementById(targetId);
+          if (targetBtn) setTimeout(function () { targetBtn.click(); }, 250);
+        }
+      });
+      listEl.appendChild(btn);
+    })(items[i]);
+  }
+}
+
+function renderSheetSettings(listEl) {
+  var items = [
+    { icon: "folder-cog", label: "Project Settings", action: "project-settings" },
+    { icon: "settings", label: "Server Settings", action: "server-settings" }
+  ];
+
+  for (var i = 0; i < items.length; i++) {
+    (function (item) {
+      var btn = document.createElement("button");
+      btn.className = "mobile-more-item";
+      btn.innerHTML = '<i data-lucide="' + item.icon + '"></i><span class="mobile-more-item-label">' + item.label + '</span>';
+      btn.addEventListener("click", function () {
+        closeMobileSheet();
+        if (item.action === "project-settings") {
+          setTimeout(function () {
+            // Find current project data
+            var proj = null;
+            for (var pi = 0; pi < cachedAllProjects.length; pi++) {
+              if (cachedAllProjects[pi].slug === cachedCurrentSlug) {
+                proj = cachedAllProjects[pi];
+                break;
+              }
+            }
+            // For mate projects, use mate display name instead of slug
+            if (proj && proj.isMate && cachedMates.length > 0) {
+              var mateId = cachedCurrentSlug.replace("mate-", "");
+              for (var mi = 0; mi < cachedMates.length; mi++) {
+                var mp = cachedMates[mi].profile || {};
+                if (cachedMates[mi].id === mateId) {
+                  proj = Object.assign({}, proj, { name: mp.displayName || cachedMates[mi].name || proj.name });
+                  break;
+                }
+              }
+            }
+            openProjectSettings(cachedCurrentSlug, proj);
+          }, 250);
+        } else if (item.action === "server-settings") {
+          var settingsBtn = document.getElementById("server-settings-btn");
+          if (settingsBtn) setTimeout(function () { settingsBtn.click(); }, 250);
+        }
+      });
+      listEl.appendChild(btn);
+    })(items[i]);
+  }
+
+  // Dark/Light switch button
+  var isDark = getCurrentTheme().variant === "dark";
+  var themeBtn = document.createElement("button");
+  themeBtn.className = "mobile-more-item";
+  themeBtn.innerHTML = '<i data-lucide="' + (isDark ? "sun" : "moon") + '"></i><span class="mobile-more-item-label">Switch to ' + (isDark ? "Light" : "Dark") + '</span>';
+
+  themeBtn.addEventListener("click", function () {
+    var themeToggle = document.getElementById("theme-toggle-check");
+    if (themeToggle) themeToggle.click();
+    // Update button text after a tick (theme applies async)
+    setTimeout(function () {
+      var nowDark = getCurrentTheme().variant === "dark";
+      themeBtn.innerHTML = '<i data-lucide="' + (nowDark ? "sun" : "moon") + '"></i><span class="mobile-more-item-label">Switch to ' + (nowDark ? "Light" : "Dark") + '</span>';
+      refreshIcons();
+    }, 50);
+  });
+
+  listEl.appendChild(themeBtn);
+}
+
 export function initSidebar(_ctx) {
   ctx = _ctx;
 
@@ -822,6 +1352,8 @@ export function initSidebar(_ctx) {
 
   if (ctx.sidebarToggleBtn) ctx.sidebarToggleBtn.addEventListener("click", toggleSidebarCollapse);
   if (ctx.sidebarExpandBtn) ctx.sidebarExpandBtn.addEventListener("click", toggleSidebarCollapse);
+  var mateSidebarToggle = document.getElementById("mate-sidebar-toggle-btn");
+  if (mateSidebarToggle) mateSidebarToggle.addEventListener("click", toggleSidebarCollapse);
 
   // Restore collapsed state from localStorage
   try {
@@ -980,6 +1512,83 @@ export function initSidebar(_ctx) {
     var sheetCloseBtn = mobileSheet.querySelector(".mobile-sheet-close");
     if (sheetBackdrop) sheetBackdrop.addEventListener("click", closeMobileSheet);
     if (sheetCloseBtn) sheetCloseBtn.addEventListener("click", closeMobileSheet);
+
+    // --- Drag to dismiss sheet ---
+    var sheetHandle = mobileSheet.querySelector(".mobile-sheet-handle");
+    var sheetContent = mobileSheet.querySelector(".mobile-sheet-content");
+    if (sheetHandle && sheetContent) {
+      var dragStartY = 0;
+      var dragging = false;
+
+      sheetHandle.addEventListener("touchstart", function (e) {
+        dragStartY = e.touches[0].clientY;
+        dragging = true;
+        sheetContent.style.transition = "none";
+      }, { passive: true });
+
+      mobileSheet.addEventListener("touchmove", function (e) {
+        if (!dragging) return;
+        var deltaY = e.touches[0].clientY - dragStartY;
+        if (deltaY < 0) deltaY = 0;
+        sheetContent.style.transform = "translateY(" + deltaY + "px)";
+        if (sheetBackdrop) {
+          var opacity = Math.max(0, 1 - deltaY / (sheetContent.offsetHeight * 0.5));
+          sheetBackdrop.style.opacity = opacity;
+        }
+      }, { passive: true });
+
+      mobileSheet.addEventListener("touchend", function () {
+        if (!dragging) return;
+        dragging = false;
+        var currentY = parseFloat(sheetContent.style.transform.replace(/[^0-9.-]/g, "")) || 0;
+        var threshold = sheetContent.offsetHeight * 0.3;
+
+        if (currentY > threshold) {
+          sheetContent.style.transition = "transform 0.22s ease-in";
+          sheetContent.style.transform = "translateY(100%)";
+          if (sheetBackdrop) {
+            sheetBackdrop.style.transition = "opacity 0.22s ease-in";
+            sheetBackdrop.style.opacity = "0";
+          }
+          setTimeout(function () {
+            sheetContent.style.transition = "";
+            sheetContent.style.transform = "";
+            if (sheetBackdrop) {
+              sheetBackdrop.style.transition = "";
+              sheetBackdrop.style.opacity = "";
+            }
+            // Close without animation since we already animated
+            var sheet = document.getElementById("mobile-sheet");
+            if (sheet) {
+              if (sheet.classList.contains("sheet-files")) {
+                var fileTree = document.getElementById("file-tree");
+                var sidebarFilesPanel = document.getElementById("sidebar-panel-files");
+                if (fileTree && sidebarFilesPanel) {
+                  sidebarFilesPanel.appendChild(fileTree);
+                }
+              }
+              sheet.classList.add("hidden");
+              sheet.classList.remove("closing", "sheet-files");
+            }
+          }, 230);
+        } else {
+          sheetContent.style.transition = "transform 0.2s ease-out";
+          sheetContent.style.transform = "translateY(0)";
+          if (sheetBackdrop) {
+            sheetBackdrop.style.transition = "opacity 0.2s ease-out";
+            sheetBackdrop.style.opacity = "";
+          }
+          setTimeout(function () {
+            sheetContent.style.transition = "";
+            sheetContent.style.transform = "";
+            if (sheetBackdrop) {
+              sheetBackdrop.style.transition = "";
+              sheetBackdrop.style.opacity = "";
+            }
+          }, 200);
+        }
+      }, { passive: true });
+    }
   }
 
   // --- Mobile tab bar ---
@@ -995,6 +1604,13 @@ export function initSidebar(_ctx) {
         mobileTabs[i].classList.remove("active");
       }
     }
+    if (mobileHomeBtn) {
+      if (tabName === "home") {
+        mobileHomeBtn.classList.add("active");
+      } else {
+        mobileHomeBtn.classList.remove("active");
+      }
+    }
   }
 
   for (var t = 0; t < mobileTabs.length; t++) {
@@ -1002,22 +1618,18 @@ export function initSidebar(_ctx) {
       tab.addEventListener("click", function () {
         var name = tab.dataset.tab;
 
-        if (name === "terminal") {
-          closeSidebar();
-          setMobileTabActive("");
-          if (ctx.openTerminal) ctx.openTerminal();
-          return;
-        }
-
-        if (name === "projects") {
-          openMobileSheet("projects");
-          setMobileTabActive("projects");
-        } else if (name === "sessions") {
+        if (name === "chat") {
           openMobileSheet("sessions");
-          setMobileTabActive("sessions");
-        } else if (name === "files") {
-          openMobileSheet("files");
-          setMobileTabActive("files");
+          setMobileTabActive("chat");
+        } else if (name === "search") {
+          openCommandPalette();
+          setMobileTabActive("search");
+        } else if (name === "tools") {
+          openMobileSheet("tools");
+          setMobileTabActive("tools");
+        } else if (name === "settings") {
+          openMobileSheet("settings");
+          setMobileTabActive("settings");
         }
       });
     })(mobileTabs[t]);
@@ -1026,7 +1638,7 @@ export function initSidebar(_ctx) {
   if (mobileHomeBtn) {
     mobileHomeBtn.addEventListener("click", function () {
       closeSidebar();
-      setMobileTabActive("");
+      setMobileTabActive("home");
       if (ctx.showHomeHub) ctx.showHomeHub();
     });
   }
@@ -2634,7 +3246,12 @@ function createMobileProjectItem(p, currentSlug, isWorktree) {
 
   var abbrev = document.createElement("span");
   abbrev.className = "mobile-project-abbrev";
-  abbrev.textContent = getProjectAbbrev(p.name);
+  if (p.icon) {
+    abbrev.textContent = p.icon;
+    parseEmojis(abbrev);
+  } else {
+    abbrev.textContent = getProjectAbbrev(p.name);
+  }
   el.appendChild(abbrev);
 
   var name = document.createElement("span");
@@ -2753,14 +3370,34 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
     })(others[i]);
   }
 
+  // Build mate project status lookup from project list
+  var mateProjectStatus = {};
+  if (ctx && ctx.projectList) {
+    var allProjects = ctx.projectList;
+    for (var pi = 0; pi < allProjects.length; pi++) {
+      if (allProjects[pi].isMate) {
+        mateProjectStatus[allProjects[pi].slug] = allProjects[pi];
+      }
+    }
+  }
+
   // Render mates
   for (var mi = 0; mi < cachedMates.length; mi++) {
     (function (mate) {
       var mp = mate.profile || {};
+      var mateSlug = "mate-" + mate.id;
+      var mateProj = mateProjectStatus[mateSlug] || {};
+      var isActive = mate.id === currentDmUserId;
       var el = document.createElement("div");
       el.className = "icon-strip-user icon-strip-mate";
       el.dataset.userId = mate.id;
-      if (mate.id === currentDmUserId) el.classList.add("active");
+      el.dataset.mateSlug = mateSlug;
+      if (isActive) el.classList.add("active");
+
+      // Pending permission shake
+      if (mateProj.pendingPermissions > 0 && !isActive) {
+        el.classList.add("has-pending-perm");
+      }
 
       var pill = document.createElement("span");
       pill.className = "icon-strip-pill";
@@ -2772,6 +3409,12 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
       avatar.alt = mp.displayName || mate.name || "Mate";
       el.appendChild(avatar);
 
+      // Processing status dot (IO blink)
+      var statusDot = document.createElement("span");
+      statusDot.className = "icon-strip-status";
+      if (mateProj.isProcessing) statusDot.classList.add("processing");
+      el.appendChild(statusDot);
+
       // Mate badge (bot icon)
       var mateBadge = document.createElement("span");
       mateBadge.className = "icon-strip-user-mate-badge";
@@ -2783,6 +3426,13 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
       badge.dataset.userId = mate.id;
       el.appendChild(badge);
 
+      // Restore unread badge if cached
+      var unreadCount = cachedDmUnread[mate.id] || 0;
+      if (unreadCount > 0 && !isActive) {
+        badge.textContent = unreadCount > 99 ? "99+" : String(unreadCount);
+        badge.classList.add("has-unread");
+      }
+
       // Tooltip
       var displayName = mp.displayName || mate.name || "New Mate";
       el.addEventListener("mouseenter", function () { showIconTooltip(el, displayName); });