clay-server 2.31.0 → 2.32.0-beta.1

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

@@ -5,8 +5,18 @@ import { userAvatarUrl, mateAvatarUrl } from './avatar.js';
 import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { showMateProfilePopover } from './profile.js';
-
-var _ctx = null;
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { closeProjectCtxMenu } from './sidebar-projects.js';
+import { spawnDustParticles } from './sidebar.js';
+import { openDm } from './app-dm.js';
+import { openMateWizard } from './mate-wizard.js';
+import { getCachedProjects } from './app-projects.js';
+
+function sendWs(msg) {
+  var ws = getWs();
+  if (ws && ws.readyState === 1) ws.send(JSON.stringify(msg));
+}
 
 // --- User strip state ---
 var cachedAllUsers = [];
@@ -27,8 +37,20 @@ var iconStripTooltip = null;
 // --- DM user context menu ---
 var userCtxMenu = null;
 
-export function initSidebarMates(ctx) {
-  _ctx = ctx;
+export function initSidebarMates() {
+  // --- Reactive UI sync for user strip ---
+  store.subscribe(function (state, prev) {
+    if (state.cachedAllUsers !== prev.cachedAllUsers ||
+        state.cachedOnlineIds !== prev.cachedOnlineIds ||
+        state.cachedDmFavorites !== prev.cachedDmFavorites ||
+        state.cachedDmConversations !== prev.cachedDmConversations ||
+        state.dmUnread !== prev.dmUnread ||
+        state.dmRemovedUsers !== prev.dmRemovedUsers ||
+        state.cachedMatesList !== prev.cachedMatesList ||
+        state.myUserId !== prev.myUserId) {
+      renderUserStrip();
+    }
+  });
 }
 
 export function showIconTooltip(el, text) {
@@ -80,7 +102,7 @@ export function closeUserCtxMenu() {
 
 function showUserCtxMenu(anchorEl, user) {
   closeUserCtxMenu();
-  if (_ctx.closeProjectCtxMenu) _ctx.closeProjectCtxMenu();
+  if (closeProjectCtxMenu) closeProjectCtxMenu();
 
   var menu = document.createElement("div");
   menu.className = "project-ctx-menu";
@@ -92,16 +114,14 @@ function showUserCtxMenu(anchorEl, user) {
     e.stopPropagation();
     // Spawn dust particles at the user icon position
     var iconRect = anchorEl.getBoundingClientRect();
-    if (_ctx.spawnDustParticles) _ctx.spawnDustParticles(iconRect.left + iconRect.width / 2, iconRect.top + iconRect.height / 2);
+    if (spawnDustParticles) spawnDustParticles(iconRect.left + iconRect.width / 2, iconRect.top + iconRect.height / 2);
     closeUserCtxMenu();
     // Immediately mark as removed so strip re-render hides the icon,
     // even if the user was only visible via cachedDmConversations (not favorites)
     cachedDmRemovedUsers[user.id] = true;
-    if (_ctx.onDmRemoveUser) _ctx.onDmRemoveUser(user.id);
-    renderUserStrip(cachedAllUsers, cachedOnlineUserIds, cachedMyUserId, cachedDmFavorites, cachedDmConversations, cachedDmUnread, cachedDmRemovedUsers, cachedMates);
-    if (_ctx.sendWs) {
-      _ctx.sendWs({ type: "dm_remove_favorite", targetUserId: user.id });
-    }
+    var dr = Object.assign({}, store.get('dmRemovedUsers')); dr[user.id] = true; store.set({ dmRemovedUsers: dr });
+    // renderUserStrip is handled by the store subscriber
+    sendWs({ type: "dm_remove_favorite", targetUserId: user.id });
   });
   menu.appendChild(removeItem);
 
@@ -140,7 +160,7 @@ function showMateCtxMenu(anchorEl, mate) {
   if (mate.primary) return;
 
   closeUserCtxMenu();
-  if (_ctx.closeProjectCtxMenu) _ctx.closeProjectCtxMenu();
+  if (closeProjectCtxMenu) closeProjectCtxMenu();
 
   var menu = document.createElement("div");
   menu.className = "project-ctx-menu";
@@ -153,9 +173,7 @@ function showMateCtxMenu(anchorEl, mate) {
     e.stopPropagation();
     closeUserCtxMenu();
     showMateProfilePopover(anchorEl, mate, function (updates) {
-      if (_ctx.sendWs) {
-        _ctx.sendWs({ type: "mate_update", mateId: mate.id, updates: updates });
-      }
+      sendWs({ type: "mate_update", mateId: mate.id, updates: updates });
     });
   });
   menu.appendChild(editItem);
@@ -168,10 +186,8 @@ function showMateCtxMenu(anchorEl, mate) {
     closeUserCtxMenu();
     // Spawn dust particles at the mate icon position
     var iconRect = anchorEl.getBoundingClientRect();
-    if (_ctx.spawnDustParticles) _ctx.spawnDustParticles(iconRect.left + iconRect.width / 2, iconRect.top + iconRect.height / 2);
-    if (_ctx.sendWs) {
-      _ctx.sendWs({ type: "dm_remove_favorite", targetUserId: mate.id });
-    }
+    if (spawnDustParticles) spawnDustParticles(iconRect.left + iconRect.width / 2, iconRect.top + iconRect.height / 2);
+    sendWs({ type: "dm_remove_favorite", targetUserId: mate.id });
   });
   menu.appendChild(removeItem);
 
@@ -238,7 +254,20 @@ function presenceAvatarUrl(userOrStyle) {
   return userAvatarUrl({ avatarStyle: userOrStyle || "thumbs" }, 24);
 }
 
+// renderUserStrip: call with no args to read from store (subscriber pattern),
+// or with all 8 args for legacy compatibility.
 export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites, dmConversations, dmUnread, dmRemovedUsers, matesList) {
+  if (arguments.length === 0) {
+    var s = store.snap();
+    allUsers = s.cachedAllUsers;
+    onlineUserIds = s.cachedOnlineIds;
+    myUserId = s.myUserId;
+    dmFavorites = s.cachedDmFavorites;
+    dmConversations = s.cachedDmConversations;
+    dmUnread = s.dmUnread;
+    dmRemovedUsers = s.dmRemovedUsers;
+    matesList = s.cachedMatesList;
+  }
   // Skip full DOM rebuild if input data hasn't changed
   var fingerprint = JSON.stringify([allUsers, onlineUserIds, dmFavorites, dmConversations, dmUnread, dmRemovedUsers, matesList]);
   if (fingerprint === _lastUserStripJson) return;
@@ -311,7 +340,7 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
 
       // Click: open DM
       el.addEventListener("click", function () {
-        if (_ctx.openDm) _ctx.openDm(u.id);
+        if (openDm) openDm(u.id);
       });
 
       // Right-click: show context menu
@@ -327,8 +356,9 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
 
   // Build mate project status lookup from project list
   var mateProjectStatus = {};
-  if (_ctx && _ctx.projectList) {
-    var allProjects = _ctx.projectList;
+  var _projList = getCachedProjects() || [];
+  if (_projList.length) {
+    var allProjects = _projList;
     for (var pi = 0; pi < allProjects.length; pi++) {
       if (allProjects[pi].isMate) {
         mateProjectStatus[allProjects[pi].slug] = allProjects[pi];
@@ -380,7 +410,7 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
       avatar.style.background = mateColor + "30";
       el.appendChild(avatar);
 
-      // Processing status dot (IO blink)
+      // Processing status dot (IO blink) - top-left
       var statusDot = document.createElement("span");
       statusDot.className = "icon-strip-status";
       if (mateProj.isProcessing) statusDot.classList.add("processing");
@@ -406,6 +436,8 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
 
       // Tooltip
       var displayName = mp.displayName || mate.name || "New Mate";
+      var mateVendor = mate.vendor || "claude";
+      var vendorLabels = { claude: "Claude Code", codex: "OpenAI Codex" };
       el.addEventListener("mouseenter", function () {
         var html = '<div style="font-weight:600">' + escapeHtml(displayName);
         if (mate.primary) {
@@ -415,13 +447,15 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
         if (mate.bio) {
           html += '<div style="font-weight:400;font-size:12px;color:var(--text-secondary);margin-top:2px">' + escapeHtml(mate.bio) + '</div>';
         }
+        var vendorLabel = vendorLabels[mateVendor] || mateVendor;
+        html += '<div style="font-size:11px;color:var(--text-dimmer);margin-top:3px">Powered by ' + escapeHtml(vendorLabel) + '</div>';
         showIconTooltipHtml(el, html);
       });
       el.addEventListener("mouseleave", hideIconTooltip);
 
       // Click: open DM with mate
       el.addEventListener("click", function () {
-        if (_ctx.openDm) _ctx.openDm(mate.id);
+        if (openDm) openDm(mate.id);
       });
 
       // Right-click: context menu for mate
@@ -520,9 +554,7 @@ function toggleDmUserPicker(anchorEl) {
         item.appendChild(name);
 
         item.addEventListener("click", function () {
-          if (_ctx.sendWs) {
-            _ctx.sendWs({ type: "dm_add_favorite", targetUserId: u.id });
-          }
+          sendWs({ type: "dm_add_favorite", targetUserId: u.id });
           closeDmUserPicker();
         });
 
@@ -570,7 +602,7 @@ function toggleDmUserPicker(anchorEl) {
       });
     }
     // Build unified list: installed builtins, deleted builtins, user-created
-    var availBuiltins = (_ctx.availableBuiltins && _ctx.availableBuiltins()) || [];
+    var availBuiltins = store.get('cachedAvailableBuiltins') || [];
     var entries = [];
     // 1. Installed builtin mates
     for (var si = 0; si < allMates.length; si++) {
@@ -619,12 +651,12 @@ function toggleDmUserPicker(anchorEl) {
           bAddBtn.title = "Re-add " + b.displayName;
           bAddBtn.addEventListener("click", function (e) {
             e.stopPropagation();
-            if (_ctx.sendWs) _ctx.sendWs({ type: "mate_readd_builtin", builtinKey: b.key });
+            sendWs({ type: "mate_readd_builtin", builtinKey: b.key });
             closeDmUserPicker();
           });
           bItem.appendChild(bAddBtn);
           bItem.addEventListener("click", function () {
-            if (_ctx.sendWs) _ctx.sendWs({ type: "mate_readd_builtin", builtinKey: b.key });
+            sendWs({ type: "mate_readd_builtin", builtinKey: b.key });
             closeDmUserPicker();
           });
           matesListEl.appendChild(bItem);
@@ -675,7 +707,7 @@ function toggleDmUserPicker(anchorEl) {
             yesBtn.textContent = m.builtinKey ? "Remove" : "Delete";
             yesBtn.addEventListener("click", function (e2) {
               e2.stopPropagation();
-              if (_ctx.sendWs) _ctx.sendWs({ type: "mate_delete", mateId: m.id });
+              sendWs({ type: "mate_delete", mateId: m.id });
               closeDmUserPicker();
             });
             item.appendChild(yesBtn);
@@ -693,8 +725,8 @@ function toggleDmUserPicker(anchorEl) {
           });
           item.appendChild(delBtn);
           item.addEventListener("click", function () {
-            if (_ctx.openDm) _ctx.openDm(m.id);
-            if (!isFav && _ctx.sendWs) _ctx.sendWs({ type: "dm_add_favorite", targetUserId: m.id });
+            if (openDm) openDm(m.id);
+            if (!isFav) sendWs({ type: "dm_add_favorite", targetUserId: m.id });
             closeDmUserPicker();
           });
           matesListEl.appendChild(item);
@@ -720,7 +752,7 @@ function toggleDmUserPicker(anchorEl) {
   createMateEl.innerHTML = iconHtml("bot") + " <span>" + createMateLabel + "</span>";
   createMateEl.addEventListener("click", function () {
     closeDmUserPicker();
-    if (_ctx.openMateWizard) _ctx.openMateWizard();
+    if (openMateWizard) openMateWizard();
   });
   picker.appendChild(createMateEl);
 

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

@@ -26,7 +26,15 @@ import {
   getCachedDmRemovedUsers
 } from './sidebar-mates.js';
 
-var _ctx = null;
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { dismissOverlayPanels, closeSidebar } from './sidebar.js';
+import { switchProject, getCachedProjects } from './app-projects.js';
+import { openDm } from './app-dm.js';
+import { showHomeHub } from './app-home-hub.js';
+import { openTerminal } from './terminal.js';
+import { requestKnowledgeList } from './mate-knowledge.js';
+import { loadRootDirectory } from './filebrowser.js';
 
 // --- Mobile state ---
 var mobileChatSheetOpen = false;
@@ -76,7 +84,7 @@ export function openMobileSheet(type) {
       listEl.appendChild(fileTree);
       fileTree.classList.remove("hidden");
     }
-    if (_ctx.onFilesTabOpen) _ctx.onFilesTabOpen();
+    loadRootDirectory();
   } else if (type === "mate-knowledge") {
     titleEl.textContent = "Knowledge";
     sheet.classList.add("sheet-knowledge");
@@ -86,7 +94,7 @@ export function openMobileSheet(type) {
       knowledgeFiles.classList.remove("hidden");
     }
     // Request knowledge list if not loaded
-    if (_ctx.requestKnowledgeList) _ctx.requestKnowledgeList();
+    requestKnowledgeList();
   } else if (type === "mate-profile") {
     titleEl.textContent = "";
     renderSheetMateProfile(listEl);
@@ -170,7 +178,7 @@ function renderSheetProjects(listEl) {
       }
 
       el.addEventListener("click", function () {
-        if (_ctx.switchProject) _ctx.switchProject(p.slug);
+        if (switchProject) switchProject(p.slug);
         closeMobileSheet();
       });
 
@@ -270,7 +278,7 @@ function renderSheetSessions(listEl) {
       // Processing dot: same class as icon strip, same data source
       var mateSlug = "mate-" + mate.id;
       var mateProj = null;
-      var allProjects = (_ctx && _ctx.projectList) || [];
+      var allProjects = getCachedProjects() || [];
       for (var pi = 0; pi < allProjects.length; pi++) {
         if (allProjects[pi].slug === mateSlug) { mateProj = allProjects[pi]; break; }
       }
@@ -309,7 +317,7 @@ function renderSheetSessions(listEl) {
       renderMobileSessionsInto(sessionListEl);
     } else if (type === "mate") {
       // Mate DM: open the DM and show mate actions
-      if (_ctx.openDm) _ctx.openDm(mateId);
+      openDm(mateId);
       renderMateMobileActions(sessionListEl);
     }
 
@@ -339,7 +347,7 @@ function renderSheetSessions(listEl) {
               loading.textContent = "Loading sessions...";
               sessionListEl.appendChild(loading);
             }
-            if (_ctx.switchProject) _ctx.switchProject(slug);
+            if (switchProject) switchProject(slug);
             if (!isDmNow || slug !== getCachedCurrentSlug()) {
               // renderSessionList will be called by WS, which calls refreshMobileChatSheet
             } else {
@@ -394,10 +402,10 @@ function createMobileSessionItem(s) {
 
   (function (id) {
     el.addEventListener("click", function () {
-      if (_ctx.ws && _ctx.connected) {
-        _ctx.ws.send(JSON.stringify({ type: "switch_session", id: id }));
+      if (getWs() && store.get('connected')) {
+        getWs().send(JSON.stringify({ type: "switch_session", id: id }));
       }
-      if (_ctx.dismissOverlayPanels) _ctx.dismissOverlayPanels();
+      if (dismissOverlayPanels) dismissOverlayPanels();
       closeMobileSheet();
     });
   })(s.id);
@@ -432,10 +440,10 @@ function createMobileLoopChild(s) {
 
   (function (id) {
     el.addEventListener("click", function () {
-      if (_ctx.ws && _ctx.connected) {
-        _ctx.ws.send(JSON.stringify({ type: "switch_session", id: id }));
+      if (getWs() && store.get('connected')) {
+        getWs().send(JSON.stringify({ type: "switch_session", id: id }));
       }
-      if (_ctx.dismissOverlayPanels) _ctx.dismissOverlayPanels();
+      if (dismissOverlayPanels) dismissOverlayPanels();
       closeMobileSheet();
     });
   })(s.id);
@@ -645,8 +653,8 @@ function renderMateMobileActions(container) {
   newSessionBtn.className = "mobile-session-new";
   newSessionBtn.innerHTML = '<i data-lucide="plus" style="width:16px;height:16px"></i> New session';
   newSessionBtn.addEventListener("click", function () {
-    if (_ctx.ws && _ctx.connected) {
-      _ctx.ws.send(JSON.stringify({ type: "new_session" }));
+    if (getWs() && store.get('connected')) {
+      getWs().send(JSON.stringify({ type: "new_session" }));
     }
     closeMobileSheet();
   });
@@ -694,8 +702,8 @@ function renderMobileSessionsInto(container) {
   newBtn.className = "mobile-session-new";
   newBtn.innerHTML = '<i data-lucide="plus" style="width:16px;height:16px"></i> New session';
   newBtn.addEventListener("click", function () {
-    if (_ctx.ws && _ctx.connected) {
-      _ctx.ws.send(JSON.stringify({ type: "new_session" }));
+    if (getWs() && store.get('connected')) {
+      getWs().send(JSON.stringify({ type: "new_session" }));
     }
     closeMobileSheet();
   });
@@ -801,7 +809,7 @@ export function refreshMobileChatSheet() {
     var statusDot = chip.querySelector(".icon-strip-status");
     if (statusDot) {
       var isProcessing = false;
-      var allProjects = (_ctx && _ctx.projectList) || [];
+      var allProjects = getCachedProjects() || [];
       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) {
@@ -948,10 +956,10 @@ function renderSearchResults(container, query) {
 
     (function (id) {
       el.addEventListener("click", function () {
-        if (_ctx.ws && _ctx.connected) {
-          _ctx.ws.send(JSON.stringify({ type: "switch_session", id: id }));
+        if (getWs() && store.get('connected')) {
+          getWs().send(JSON.stringify({ type: "switch_session", id: id }));
         }
-        if (_ctx.dismissOverlayPanels) _ctx.dismissOverlayPanels();
+        if (dismissOverlayPanels) dismissOverlayPanels();
         closeMobileSheet();
       });
     })(s.id);
@@ -993,7 +1001,7 @@ function renderSheetTools(listEl) {
         if (item.action === "files") {
           setTimeout(function () { openMobileSheet("files"); }, 250);
         } else if (item.action === "terminal") {
-          if (_ctx.openTerminal) _ctx.openTerminal();
+          openTerminal();
         } else if (item.action === "scheduler") {
           targetId = "scheduler-btn";
         } else if (item.action === "mate-knowledge") {
@@ -1055,7 +1063,7 @@ function renderSheetSettings(listEl) {
                 }
               }
             }
-            if (proj && _ctx.ownerLocked) proj = Object.assign({}, proj, { ownerLocked: true });
+            if (proj && store.get('ownerLocked')) proj = Object.assign({}, proj, { ownerLocked: true });
             openProjectSettings(getCachedCurrentSlug(), proj);
           }, 250);
         } else if (item.action === "server-settings") {
@@ -1124,11 +1132,7 @@ function renderSheetSettings(listEl) {
   }
 }
 
-export function initSidebarMobile(ctx) {
-  _ctx = ctx;
-
-  // Put refreshMobileChatSheet on ctx for external callers
-  ctx.refreshMobileChatSheet = refreshMobileChatSheet;
+export function initSidebarMobile() {
 
   // --- Mobile sheet close handlers ---
   var mobileSheet = document.getElementById("mobile-sheet");
@@ -1262,9 +1266,9 @@ export function initSidebarMobile(ctx) {
 
   if (mobileHomeBtn) {
     mobileHomeBtn.addEventListener("click", function () {
-      if (_ctx.closeSidebar) _ctx.closeSidebar();
+      closeSidebar();
       setMobileTabActive("home");
-      if (_ctx.showHomeHub) _ctx.showHomeHub();
+      showHomeHub();
     });
   }
 }