clay-server 5.1.0-beta.1 → 5.1.0-beta.2

package/lib/public/modules/session-title-marquee.js

@@ -0,0 +1,51 @@
+function resetMarquee(state) {
+  if (state.frame) cancelAnimationFrame(state.frame);
+  state.frame = null;
+  state.row.classList.remove("session-title-marquee");
+  state.title.style.removeProperty("--session-marquee-distance");
+  state.title.style.removeProperty("--session-marquee-duration");
+}
+
+function measureMarquee(state) {
+  state.frame = null;
+  if (!state.active || !state.row.isConnected) return;
+  var titleRect = state.title.getBoundingClientRect();
+  var actionRect = state.actions ? state.actions.getBoundingClientRect() : null;
+  var rowRect = state.row.getBoundingClientRect();
+  var right = actionRect && actionRect.width ? actionRect.left - 5 : rowRect.right - 8;
+  var available = Math.max(0, right - titleRect.left);
+  var overflow = state.title.scrollWidth - available;
+  if (overflow <= 4) return;
+  state.title.style.setProperty("--session-marquee-distance", (-overflow) + "px");
+  state.title.style.setProperty("--session-marquee-duration", Math.max(5, overflow / 22) + "s");
+  state.row.classList.add("session-title-marquee");
+}
+
+function activate(state) {
+  state.active = true;
+  resetMarquee(state);
+  state.active = true;
+  state.frame = requestAnimationFrame(function () { measureMarquee(state); });
+}
+
+export function bindSessionTitleMarquee(row, title, actions) {
+  if (!row || !title) return;
+  var state = { row: row, title: title, actions: actions, active: false, frame: null };
+  function leave() { state.active = false; resetMarquee(state); }
+  function enter() { activate(state); }
+  row.addEventListener("mouseenter", enter);
+  row.addEventListener("focusin", enter);
+  row.addEventListener("mouseleave", leave);
+  row.addEventListener("focusout", function (event) {
+    if (!row.contains(event.relatedTarget)) leave();
+  });
+  window.addEventListener("resize", leave);
+  var observer = typeof MutationObserver === "undefined" ? null : new MutationObserver(function () {
+    if (!row.isConnected) {
+      leave();
+      observer.disconnect();
+      window.removeEventListener("resize", leave);
+    }
+  });
+  if (observer && document.body) observer.observe(document.body, { childList: true, subtree: true });
+}

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

@@ -10,6 +10,9 @@ import { closeProjectCtxMenu } from './sidebar-projects.js';
 import { spawnDustParticles } from './sidebar.js';
 import { openDm } from './app-dm.js';
 import { showMateManagementMenu, closeMateManagementMenu } from './mate-management.js';
+import { showIconTooltip, hideIconTooltip } from './icon-strip-tooltip.js';
+
+export { showIconTooltip, showIconTooltipHtml, hideIconTooltip, bindIconTooltip } from './icon-strip-tooltip.js';
 
 function sendWs(msg) {
   var ws = getWs();
@@ -59,9 +62,6 @@ function notifyMentionListeners() {
 }
 var _lastUserStripJson = "";
 
-// --- Icon strip tooltip ---
-var iconStripTooltip = null;
-
 // --- DM user context menu ---
 var userCtxMenu = null;
 
@@ -81,53 +81,6 @@ export function initSidebarMates() {
   });
 }
 
-export function showIconTooltip(el, text) {
-  hideIconTooltip();
-  var tip = document.createElement("div");
-  tip.className = "icon-strip-tooltip";
-  tip.textContent = text;
-  document.body.appendChild(tip);
-  iconStripTooltip = tip;
-
-  requestAnimationFrame(function () {
-    var rect = el.getBoundingClientRect();
-    tip.style.top = (rect.top + rect.height / 2 - tip.offsetHeight / 2) + "px";
-    tip.classList.add("visible");
-  });
-}
-
-export function showIconTooltipHtml(el, html, options) {
-  hideIconTooltip();
-  options = options || {};
-  var tip = document.createElement("div");
-  tip.className = "icon-strip-tooltip" + (options.className ? " " + options.className : "");
-  tip.style.whiteSpace = "normal";
-  tip.style.maxWidth = "260px";
-  tip.innerHTML = html;
-  document.body.appendChild(tip);
-  iconStripTooltip = tip;
-
-  requestAnimationFrame(function () {
-    var rect = el.getBoundingClientRect();
-    if (options.placement === "bottom") {
-      var left = rect.left + rect.width / 2 - tip.offsetWidth / 2;
-      left = Math.max(12, Math.min(left, window.innerWidth - tip.offsetWidth - 12));
-      tip.style.left = left + "px";
-      tip.style.top = (rect.bottom + 8) + "px";
-    } else {
-      tip.style.top = (rect.top + rect.height / 2 - tip.offsetHeight / 2) + "px";
-    }
-    tip.classList.add("visible");
-  });
-}
-
-export function hideIconTooltip() {
-  if (iconStripTooltip) {
-    iconStripTooltip.remove();
-    iconStripTooltip = null;
-  }
-}
-
 export function closeUserCtxMenu() {
   if (userCtxMenu) {
     userCtxMenu.remove();

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

@@ -1,3 +1,4 @@
+import { openMateWorkspace, isMateWorkspace } from './project-mate-navigation.js';
 import { appendGithubWork } from './session-github.js';
 // sidebar-mobile.js - Mobile sheet overlays, tab bar, and mobile-specific rendering
 // Extracted from sidebar.js (PR-38)
@@ -10,7 +11,6 @@ import { getCurrentTheme, getChatLayout, setChatLayout } from './theme.js';
 import { openCommandPalette } from './command-palette.js';
 import { openProjectSettings } from './project-settings.js';
 import { getCachedSessions, openSessionContextMenu } from './sidebar-sessions.js';
-import { VENDOR_AVATARS } from './app-rendering.js';
 import { renderSessionPresence } from './session-presence-ui.js';
 import {
   canOrganizeSession, computeLayout, createStarButton, renderFavoritesSection, renderOrdinarySections
@@ -26,9 +26,7 @@ import {
 import {
   getCurrentDmUserId,
   getCachedMates,
-  getCachedDmFavorites,
-  getCachedDmUnread,
-  getCachedDmRemovedUsers
+  getCachedDmUnread
 } from './sidebar-mates.js';
 
 import { store } from './store.js';
@@ -36,8 +34,6 @@ import { getWs } from './ws-ref.js';
 import { dismissOverlayPanels, closeSidebar } from './sidebar.js';
 import { openWorkerWithDriver } from './split-view.js';
 import { switchProject, getCachedProjects } from './app-projects.js';
-import { showHomeHub } from './app-home-hub.js';
-import { openHomeChat } from './home-mate-chat.js';
 import { openTerminal } from './terminal.js';
 import { requestKnowledgeList } from './mate-knowledge.js';
 import { loadRootDirectory, reopenFileViewer } from './filebrowser.js';
@@ -46,6 +42,9 @@ import {
   renderMobileDriverHierarchy,
   renderMobileOrphanHierarchy
 } from './sidebar-session-hierarchy.js';
+import { ordinarySessionListSessions } from './session-list-visibility.js';
+import { formatSessionActivity } from './session-activity-tooltip.js';
+import { bindSessionTitleMarquee } from './session-title-marquee.js';
 import { summarizeSidebarItems } from './sidebar-session-counts.js';
 import { cancelSessionInlineRename, closeSessionContextMenu } from './session-context-menu.js';
 
@@ -258,13 +257,10 @@ function renderSheetSessions(listEl) {
     })(getCachedProjectList()[ci]);
   }
 
-  var favoriteChipMates = getCachedMates().filter(function (m) {
-    if (getCachedDmRemovedUsers()[m.id]) return false;
-    if (getCachedDmFavorites().indexOf(m.id) !== -1) return true;
-    if (getCachedDmUnread()[m.id] && getCachedDmUnread()[m.id] > 0) return true;
-    return false;
+  var visibleChipMates = getCachedMates().filter(function (m) {
+    return m && !m.archived;
   });
-  var sortedChipMates = favoriteChipMates.sort(function (a, b) {
+  var sortedChipMates = visibleChipMates.sort(function (a, b) {
     var aBuiltin = a.builtinKey ? 1 : 0;
     var bBuiltin = b.builtinKey ? 1 : 0;
     if (aBuiltin !== bBuiltin) return bBuiltin - aBuiltin;
@@ -275,7 +271,7 @@ function renderSheetSessions(listEl) {
       var mp = mate.profile || {};
       var chip = document.createElement("button");
       chip.className = "mobile-chat-chip";
-      if (getCurrentDmUserId() === mate.id) chip.classList.add("active");
+      if (getCurrentDmUserId() === mate.id || getCachedCurrentSlug() === "mate-" + mate.id) chip.classList.add("active");
       chip.dataset.type = "mate";
       chip.dataset.mateId = mate.id;
 
@@ -331,8 +327,7 @@ function renderSheetSessions(listEl) {
       renderMobileSessionsInto(sessionListEl);
     } else if (type === "mate") {
       closeMobileSheet();
-      showHomeHub();
-      openHomeChat(mateId);
+      openMateWorkspace(mateId);
     }
 
     refreshIcons();
@@ -388,24 +383,28 @@ function renderSheetSessions(listEl) {
 // Helper: create a mobile session item element
 function createMobileSessionItem(s, options) {
   var itemOptions = options || {};
+  var displaySession = s;
+  if (itemOptions.promotedActive || itemOptions.promotedProcessing || itemOptions.promotedUnread !== undefined) {
+    displaySession = Object.assign({}, s, {
+      active: !!(s.active || itemOptions.promotedActive),
+      isProcessing: !!(s.isProcessing || itemOptions.promotedProcessing),
+      unread: (s.unread || 0) + (itemOptions.promotedUnread || 0),
+    });
+  }
   var el = document.createElement("div");
-  el.className = "mobile-session-item" + (s.active ? " active" : "");
+  el.className = "mobile-session-item" + (displaySession.active ? " active" : "");
   el.dataset.sessionId = String(s.id);
   if (itemOptions.worker) el.classList.add("mobile-worker-item");
 
-  // Vendor badge (legacy sessions without a vendor are Claude)
-  var mVendor = s.vendor || "claude";
-  var vendorIcon = document.createElement("img");
-  vendorIcon.className = "mobile-session-vendor-icon";
-  vendorIcon.src = VENDOR_AVATARS[mVendor] || VENDOR_AVATARS.claude;
-  vendorIcon.alt = "";
-  el.appendChild(vendorIcon);
+  var titleLine = document.createElement("span");
+  titleLine.className = "mobile-session-title-line";
+  el.appendChild(titleLine);
 
   // Processing dot (left side, before title)
-  if (s.isProcessing) {
+  if (displaySession.isProcessing) {
     var dot = document.createElement("span");
     dot.className = "mobile-session-processing";
-    el.appendChild(dot);
+    titleLine.appendChild(dot);
   }
 
   var titleSpan = document.createElement("span");
@@ -415,9 +414,12 @@ function createMobileSessionItem(s, options) {
     if (event.key === "Enter" || event.key === " ") { event.preventDefault(); el.click(); }
   });
   titleSpan.className = "mobile-session-title";
+  titleSpan.setAttribute("aria-label", s.title || "New Session");
+  var activityTitle = formatSessionActivity(s.lastActivity);
+  if (activityTitle) titleSpan.title = activityTitle;
   titleSpan.appendChild(document.createTextNode(s.title || "New Session"));
-  el.appendChild(titleSpan);
-  appendGithubWork(el, s, titleSpan);
+  titleLine.appendChild(titleSpan);
+  appendGithubWork(el, s, titleLine);
   renderSessionPresence(el, String(s.id));
 
   if (itemOptions.worker) {
@@ -428,16 +430,18 @@ function createMobileSessionItem(s, options) {
   }
 
   // Unread badge (right side)
-  if (s.unread > 0 && !s.active) {
+  if (displaySession.unread > 0 && !displaySession.active) {
     var badge = document.createElement("span");
     badge.className = "mobile-session-unread";
-    badge.textContent = s.unread > 99 ? "99+" : String(s.unread);
+    badge.textContent = displaySession.unread > 99 ? "99+" : String(displaySession.unread);
     el.appendChild(badge);
   }
 
-  if (!itemOptions.worker && canOrganizeSession(s)) {
-    el.appendChild(createStarButton(s, "mobile-session-star"));
-  }
+  var mobileActions = document.createElement("span");
+  mobileActions.className = "mobile-session-actions";
+  if (!itemOptions.worker && canOrganizeSession(s)) mobileActions.appendChild(createStarButton(s, "mobile-session-star"));
+  el.appendChild(mobileActions);
+  bindSessionTitleMarquee(el, titleSpan, mobileActions);
 
   el.addEventListener("contextmenu", function (event) {
     event.preventDefault();
@@ -460,6 +464,7 @@ function createMobileSessionItem(s, options) {
   return el;
 }
 
+
 // Helper: create a mobile loop child element (individual session inside a group)
 function createMobileLoopChild(s) {
   var el = document.createElement("button");
@@ -698,7 +703,7 @@ function createMobileLoopGroup(loopId, children, groupKey) {
 // Helper: render sorted sessions into a container with date groups (with loop session grouping)
 export function renderMobileSessionsInto(container) {
   // Partition: loop sessions vs normal sessions (same logic as desktop renderSessionList)
-  var sessions = getCachedSessions();
+  var sessions = ordinarySessionListSessions(getCachedSessions());
   var hierarchy = prepareSidebarHierarchy(sessions);
   var hierarchyByDriver = hierarchy.byDriver;
   var loopGroups = {};
@@ -706,7 +711,7 @@ export function renderMobileSessionsInto(container) {
   for (var i = 0; i < sessions.length; i++) {
     var s = sessions[i];
     if (s.sessionRole === "worker") continue;
-    if (s.loop && s.loop.loopId && s.loop.role === "crafting" && s.loop.source !== "ralph" && s.loop.source !== "debate") {
+    if (s.loop && s.loop.loopId && s.loop.role === "crafting" && s.loop.source !== "ralph") {
       continue;
     } else if (s.loop && s.loop.loopId) {
       var startedAt = s.loop.startedAt || 0;
@@ -726,11 +731,6 @@ export function renderMobileSessionsInto(container) {
     if (driverRoot) items.push({ type: "driver-hierarchy", data: driverRoot.driver, root: driverRoot, lastActivity: driverRoot.lastActivity });
     else items.push({ type: "session", data: normalSessions[j], lastActivity: normalSessions[j].lastActivity || 0 });
   }
-  if (hierarchy.orphans.length) {
-    var orphanActivity = 0;
-    for (var oi = 0; oi < hierarchy.orphans.length; oi++) orphanActivity = Math.max(orphanActivity, hierarchy.orphans[oi].lastActivity || 0);
-    items.push({ type: "orphan-workers", workers: hierarchy.orphans, lastActivity: orphanActivity });
-  }
   var groupKeys = Object.keys(loopGroups);
   for (var k = 0; k < groupKeys.length; k++) {
     var gk = groupKeys[k];
@@ -753,8 +753,8 @@ export function renderMobileSessionsInto(container) {
     sessions: getCachedSessions(),
     renderItem: function (it) {
       if (it.type === "loop") return createMobileLoopGroup(it.loopId, it.children, it.groupKey);
-      if (it.type === "driver-hierarchy") return renderMobileDriverHierarchy(it.root, createMobileSessionItem, refreshMobileChatSheet, matchIds);
-      if (it.type === "orphan-workers") return renderMobileOrphanHierarchy(it.workers, createMobileSessionItem, refreshMobileChatSheet, matchIds);
+      if (it.type === "driver-hierarchy") return renderMobileDriverHierarchy(it.root, createMobileSessionItem, refreshMobileChatSheet);
+      if (it.type === "orphan-workers") return document.createElement("div");
       return createMobileSessionItem(it.data);
     },
   };
@@ -787,7 +787,7 @@ export function refreshMobileChatSheet() {
     var isDmActive = !!getCurrentDmUserId();
     if (chip.dataset.type === "project" && chip.dataset.slug === getCachedCurrentSlug() && !isDmActive) {
       chip.classList.add("active");
-    } else if (chip.dataset.type === "mate" && chip.dataset.mateId === getCurrentDmUserId()) {
+    } else if (chip.dataset.type === "mate" && (chip.dataset.mateId === getCurrentDmUserId() || getCachedCurrentSlug() === "mate-" + chip.dataset.mateId)) {
       chip.classList.add("active");
     }
 
@@ -959,14 +959,17 @@ function renderSearchResults(container, query) {
   }
 }
 
-function renderSheetTools(listEl) {
+export function renderSheetTools(listEl) {
   var isMateDm = document.body.classList.contains("mate-dm-active");
+  var isMateWorkspaceActive = isMateWorkspace(store.snap());
+  var isMateDmSurface = isMateDm && !isMateWorkspaceActive;
 
-  var items = isMateDm ? [
+  var items = isMateDmSurface ? [
     { icon: "brain", label: "Memory", action: "mate-memory" },
     { icon: "book-open", label: "Knowledge", action: "mate-knowledge" },
     { icon: "sticky-note", label: "Sticky Notes", action: "mate-sticky" },
-    { icon: "puzzle", label: "MCP / Skills", action: "mate-skills" }
+    { icon: "puzzle", label: "MCP / Skills", action: "mate-skills" },
+    { icon: "messages-square", label: "Debates", action: "debates" }
   ] : [
     { icon: "folder-tree", label: "Files", action: "files" },
     { icon: "square-terminal", label: "Terminal", action: "terminal" },
@@ -974,6 +977,15 @@ function renderSheetTools(listEl) {
     { icon: "notebook-tabs", label: "Logs", action: "project-logs" }
   ];
 
+  if (isMateWorkspaceActive) {
+    items = items.filter(function (item) { return item.action !== "files" && item.action !== "terminal" && item.action !== "issues" && item.action !== "project-logs"; });
+    items.unshift({ icon: "book-open", label: "Knowledge", action: "knowledge-workbench" });
+    items.push({ icon: "messages-square", label: "Debates", action: "debates" });
+  }
+
+  if (isMateWorkspaceActive && document.body.classList.contains('clay-workspace-active')) {
+    items.unshift({ icon: 'user-round', label: 'Me', action: 'me' });
+  }
   for (var i = 0; i < items.length; i++) {
     (function (item) {
       var btn = document.createElement("button");
@@ -990,6 +1002,12 @@ function renderSheetTools(listEl) {
           targetId = "issues-btn";
         } else if (item.action === "project-logs") {
           targetId = "project-logs-btn";
+        } else if (item.action === "me") {
+          targetId = "you-button";
+        } else if (item.action === "knowledge-workbench") {
+          targetId = "knowledge-workbench-btn";
+        } else if (item.action === "debates") {
+          targetId = isMateWorkspaceActive ? "mate-project-debates-btn" : (isMateDmSurface ? "mate-debates-btn" : null);
         } else if (item.action === "mate-knowledge") {
           setTimeout(function () { openMobileSheet("mate-knowledge"); }, 250);
           return;
@@ -1207,7 +1225,6 @@ export function initSidebarMobile() {
   // --- Mobile tab bar ---
   var mobileTabBar = document.getElementById("mobile-tab-bar");
   var mobileTabs = mobileTabBar ? mobileTabBar.querySelectorAll(".mobile-tab") : [];
-  var mobileHomeBtn = document.getElementById("mobile-home-btn");
 
   function setMobileTabActive(tabName) {
     for (var i = 0; i < mobileTabs.length; i++) {
@@ -1217,13 +1234,6 @@ export function initSidebarMobile() {
         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++) {
@@ -1248,11 +1258,4 @@ export function initSidebarMobile() {
     })(mobileTabs[t]);
   }
 
-  if (mobileHomeBtn) {
-    mobileHomeBtn.addEventListener("click", function () {
-      closeSidebar();
-      setMobileTabActive("home");
-      showHomeHub();
-    });
-  }
 }