clay-server 2.23.1 → 2.24.0-beta.1

package/lib/public/modules/mention.js

@@ -1,4 +1,4 @@
-import { mateAvatarUrl } from './avatar.js';
+import { mateAvatarUrl, userAvatarUrl } from './avatar.js';
 import { renderMarkdown, highlightCodeBlocks } from './markdown.js';
 import { escapeHtml, copyToClipboard } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
@@ -12,6 +12,8 @@ var mentionFiltered = [];        // filtered mate list
 var mentionActiveIdx = -1;       // highlighted item in dropdown
 var selectedMateId = null;       // selected mate for pending send
 var selectedMateName = null;     // display name of selected mate
+var selectedMateColor = null;    // avatar color for sticky re-apply
+var selectedMateAvatar = null;   // avatar src for sticky re-apply
 
 // Streaming state
 var currentMentionEl = null;     // current mention response DOM element
@@ -78,10 +80,16 @@ export function showMentionMenu(query) {
   menuEl.innerHTML = mentionFiltered.map(function (m, i) {
     var name = (m.profile && m.profile.displayName) || m.name || "Mate";
     var color = (m.profile && m.profile.avatarColor) || "#6c5ce7";
+    var bio = m.bio || (m.profile && m.profile.bio) || "";
     var avatarSrc = mateAvatarUrl(m, 24);
     return '<div class="mention-item' + (i === 0 ? ' active' : '') + '" data-idx="' + i + '">' +
       '<img class="mention-item-avatar" src="' + escapeHtml(avatarSrc) + '" width="24" height="24" />' +
-      '<span class="mention-item-name">' + escapeHtml(name) + '</span>' +
+      '<div class="mention-item-info">' +
+        '<span class="mention-item-name">' + escapeHtml(name) +
+          (m.primary ? ' <span class="mention-item-badge">SYSTEM</span>' : '') +
+        '</span>' +
+        (bio ? '<span class="mention-item-bio">' + escapeHtml(bio) + '</span>' : '') +
+      '</div>' +
       '<span class="mention-item-dot" style="background:' + escapeHtml(color) + '"></span>' +
       '</div>';
   }).join("");
@@ -148,6 +156,8 @@ function selectMentionItem(idx) {
 
   selectedMateId = mate.id;
   selectedMateName = name;
+  selectedMateColor = color;
+  selectedMateAvatar = avatarSrc;
 
   // Remove the @query text from the textarea, keep remaining text
   if (ctx.inputEl && mentionAtIdx >= 0) {
@@ -198,6 +208,8 @@ export function removeMentionChip() {
   removeInputMentionChip();
   selectedMateId = null;
   selectedMateName = null;
+  selectedMateColor = null;
+  selectedMateAvatar = null;
   if (ctx.inputEl) ctx.inputEl.focus();
 }
 
@@ -229,10 +241,30 @@ export function parseMentionFromInput(text) {
 export function clearMentionState() {
   selectedMateId = null;
   selectedMateName = null;
+  selectedMateColor = null;
+  selectedMateAvatar = null;
   mentionAtIdx = -1;
   removeInputMentionChip();
 }
 
+// Re-apply the same mate mention after sending (sticky mention).
+// Keeps the chip visible so the next message also goes to the same mate.
+export function stickyReapplyMention() {
+  if (!selectedMateId || !selectedMateName) return;
+  var id = selectedMateId;
+  var name = selectedMateName;
+  var color = selectedMateColor || "#6c5ce7";
+  var avatarSrc = selectedMateAvatar || "";
+  // Reset index but keep mate selection
+  mentionAtIdx = -1;
+  removeInputMentionChip();
+  selectedMateId = id;
+  selectedMateName = name;
+  selectedMateColor = color;
+  selectedMateAvatar = avatarSrc;
+  showInputMentionChip(name, color, avatarSrc);
+}
+
 export function sendMention(mateId, text, pastes, images) {
   if (!ctx.ws || !ctx.connected) return;
   var payload = { type: "mention", mateId: mateId, text: text };
@@ -274,8 +306,8 @@ export function handleMentionStart(msg) {
 
   var avatarSrc = buildMentionAvatarUrl(msg);
 
-  if (isMateDm()) {
-    // Mate DM: render as DM-style assistant message
+  if (isDmLayout()) {
+    // DM-style: render as DM-style assistant message (Mate DM or Wide view)
     currentMentionEl = document.createElement("div");
     currentMentionEl.className = "msg-assistant msg-mention-dm";
 
@@ -519,6 +551,28 @@ function isMateDm() {
   return document.body.classList.contains("mate-dm-active");
 }
 
+function isWideView() {
+  return document.body.classList.contains("wide-view");
+}
+
+function isDmLayout() {
+  return isMateDm() || isWideView();
+}
+
+function getMyAvatarSrc() {
+  if (document.body.dataset.myAvatarUrl) return document.body.dataset.myAvatarUrl;
+  var myUser = null;
+  try { myUser = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch (e) {}
+  return userAvatarUrl(myUser || {}, 36);
+}
+
+function getMyDisplayName() {
+  if (document.body.dataset.myDisplayName) return document.body.dataset.myDisplayName;
+  var myUser = null;
+  try { myUser = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch (e) {}
+  return (myUser && (myUser.displayName || myUser.username)) || "Me";
+}
+
 function timeStr() {
   var now = new Date();
   return String(now.getHours()).padStart(2, "0") + ":" + String(now.getMinutes()).padStart(2, "0");
@@ -590,32 +644,28 @@ export function renderMentionUser(entry) {
   textEl.innerHTML = '<span class="mention-chip">@' + escapeHtml(entry.mateName || "Mate") + '</span> ' + escapeHtml(entry.text || "");
   bubble.appendChild(textEl);
 
-  // In Mate DM: use DM-style layout with avatar + name header
-  if (isMateDm() && document.body.dataset.myAvatarUrl) {
-    var avi = document.createElement("img");
-    avi.className = "dm-bubble-avatar dm-bubble-avatar-me";
-    avi.src = document.body.dataset.myAvatarUrl;
-    div.appendChild(avi);
-
-    var contentWrap = document.createElement("div");
-    contentWrap.className = "dm-bubble-content";
-
-    var header = document.createElement("div");
-    header.className = "dm-bubble-header";
-    var nameSpan = document.createElement("span");
-    nameSpan.className = "dm-bubble-name";
-    nameSpan.textContent = document.body.dataset.myDisplayName || "Me";
-    header.appendChild(nameSpan);
-    var ts = document.createElement("span");
-    ts.className = "dm-bubble-time";
-    ts.textContent = timeStr();
-    header.appendChild(ts);
-    contentWrap.appendChild(header);
-    contentWrap.appendChild(bubble);
-    div.appendChild(contentWrap);
-  } else {
-    div.appendChild(bubble);
-  }
+  // Always render avatar + header structure (CSS controls visibility)
+  var avi = document.createElement("img");
+  avi.className = "dm-bubble-avatar dm-bubble-avatar-me";
+  avi.src = getMyAvatarSrc();
+  div.appendChild(avi);
+
+  var contentWrap = document.createElement("div");
+  contentWrap.className = "dm-bubble-content";
+
+  var header = document.createElement("div");
+  header.className = "dm-bubble-header";
+  var nameSpan = document.createElement("span");
+  nameSpan.className = "dm-bubble-name";
+  nameSpan.textContent = getMyDisplayName();
+  header.appendChild(nameSpan);
+  var ts = document.createElement("span");
+  ts.className = "dm-bubble-time";
+  ts.textContent = timeStr();
+  header.appendChild(ts);
+  contentWrap.appendChild(header);
+  contentWrap.appendChild(bubble);
+  div.appendChild(contentWrap);
 
   // Action bar below bubble (same as regular user messages)
   var actions = document.createElement("div");
@@ -647,8 +697,8 @@ export function renderMentionUser(entry) {
 export function renderMentionResponse(entry) {
   var avatarSrc = buildMentionAvatarUrl(entry);
 
-  // In Mate DM: render as DM-style message (like assistant messages)
-  if (isMateDm()) {
+  // DM-style message layout (Mate DM or Wide view)
+  if (isDmLayout()) {
     var el = document.createElement("div");
     el.className = "msg-assistant msg-mention-dm";
 

package/lib/public/modules/notifications.js

@@ -72,6 +72,10 @@ export function initNotifications(_ctx) {
   if (window.visualViewport) {
     var layout = $("layout");
     var mobileTabBar = document.getElementById("mobile-tab-bar");
+    // Capture initial viewport height before any keyboard interaction.
+    // In iOS PWA standalone mode, window.innerHeight shrinks when the
+    // keyboard opens, so we need a stable baseline for comparison.
+    var stableViewportHeight = window.innerHeight;
     function onViewportChange() {
       var vv = window.visualViewport;
       // Shrink layout to visual viewport height so input area sits above keyboard
@@ -80,7 +84,7 @@ export function initNotifications(_ctx) {
       layout.style.top = vv.offsetTop + "px";
       document.documentElement.scrollTop = 0;
       // Toggle class so CSS can remove the tab-bar bottom padding while keyboard is up
-      var keyboardOpen = vv.height < window.innerHeight - 100;
+      var keyboardOpen = vv.height < stableViewportHeight - 100;
       document.body.classList.toggle("keyboard-open", keyboardOpen);
       if (!keyboardOpen) ctx.scrollToBottom();
       // Hide tab bar when software keyboard is open

package/lib/public/modules/session-search.js

@@ -157,11 +157,11 @@ function performSearch(query) {
 
 function highlightLoadedMessages() {
   var messagesEl = ctx.messagesEl;
-  var msgEls = messagesEl.querySelectorAll(".msg-user, .msg-assistant");
+  var msgEls = messagesEl.querySelectorAll(".msg-user, .msg-assistant, .debate-turn, .debate-user-comment");
   var queryLower = currentQuery.toLowerCase();
 
   for (var i = 0; i < msgEls.length; i++) {
-    var contentEl = msgEls[i].querySelector(".bubble") || msgEls[i].querySelector(".md-content");
+    var contentEl = msgEls[i].querySelector(".bubble") || msgEls[i].querySelector(".md-content") || msgEls[i].querySelector(".debate-comment-text");
     if (!contentEl) continue;
     highlightInElement(contentEl, queryLower);
   }
@@ -328,12 +328,12 @@ function scrollToSearchHit(historyIndex, snippet, query) {
 function findAndScrollToMatch(snippet, query) {
   var messagesEl = ctx.messagesEl;
   var q = query.toLowerCase();
-  var allMsgs = messagesEl.querySelectorAll(".msg-user, .msg-assistant");
+  var allMsgs = messagesEl.querySelectorAll(".msg-user, .msg-assistant, .debate-turn, .debate-user-comment");
   var cleanSnippet = snippet.replace(/^\u2026/, "").replace(/\u2026$/, "");
 
   for (var i = 0; i < allMsgs.length; i++) {
     var msgEl = allMsgs[i];
-    var textEl = msgEl.querySelector(".bubble") || msgEl.querySelector(".md-content");
+    var textEl = msgEl.querySelector(".bubble") || msgEl.querySelector(".md-content") || msgEl.querySelector(".debate-comment-text");
     if (!textEl) continue;
     var text = textEl.textContent || "";
     if (text.indexOf(cleanSnippet) !== -1) {
@@ -347,7 +347,7 @@ function findAndScrollToMatch(snippet, query) {
   // Fallback: any element containing the query
   for (var j = 0; j < allMsgs.length; j++) {
     var el = allMsgs[j];
-    var tEl = el.querySelector(".bubble") || el.querySelector(".md-content");
+    var tEl = el.querySelector(".bubble") || el.querySelector(".md-content") || el.querySelector(".debate-comment-text");
     if (!tEl) continue;
     if ((tEl.textContent || "").toLowerCase().indexOf(q) !== -1) {
       el.scrollIntoView({ behavior: "smooth", block: "center" });

package/lib/public/modules/sidebar.js

@@ -2879,26 +2879,8 @@ function showIconCtxMenu(anchorEl, slug, name) {
       showWorktreeModal(slug, name || slug);
     });
     menu.appendChild(wtItem);
-
-    if (!ctx.permissions || ctx.permissions.deleteProject !== false) {
-      // --- Separator ---
-      var sep = document.createElement("div");
-      sep.className = "project-ctx-separator";
-      menu.appendChild(sep);
-
-      // --- Remove Project ---
-      var removeItem = document.createElement("button");
-      removeItem.className = "project-ctx-item project-ctx-delete";
-      removeItem.innerHTML = iconHtml("trash-2") + " <span>Remove Project</span>";
-      removeItem.addEventListener("click", function (e) {
-        e.stopPropagation();
-        closeProjectCtxMenu();
-        if (ctx.ws && ctx.connected) {
-          ctx.ws.send(JSON.stringify({ type: "remove_project_check", slug: slug, name: name || slug }));
-        }
-      });
-      menu.appendChild(removeItem);
-    }
+    // Remove Project intentionally omitted from right-click.
+    // Destructive actions only live in the chevron menu.
   }
 
   document.body.appendChild(menu);
@@ -2928,6 +2910,17 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
   var menu = document.createElement("div");
   menu.className = "project-ctx-menu";
 
+  // --- Set Icon ---
+  var iconItem = document.createElement("button");
+  iconItem.className = "project-ctx-item";
+  iconItem.innerHTML = iconHtml("smile") + " <span>Set Icon</span>";
+  iconItem.addEventListener("click", function (e) {
+    e.stopPropagation();
+    closeProjectCtxMenu();
+    showEmojiPicker(slug, anchorEl);
+  });
+  menu.appendChild(iconItem);
+
   // --- Project Settings ---
   if (!ctx.permissions || ctx.permissions.projectSettings !== false) {
     var settingsItem = document.createElement("button");
@@ -2941,6 +2934,11 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
     menu.appendChild(settingsItem);
   }
 
+  // --- Separator: collaboration ---
+  var sep1 = document.createElement("div");
+  sep1.className = "project-ctx-separator";
+  menu.appendChild(sep1);
+
   // --- Share ---
   var shareItem = document.createElement("button");
   shareItem.className = "project-ctx-item";
@@ -2969,20 +2967,35 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
     }
   }
 
+  // --- Separator: development ---
+  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);
+
   if (!ctx.permissions || ctx.permissions.deleteProject !== false) {
-    // --- Separator ---
-    var sep = document.createElement("div");
-    sep.className = "project-ctx-separator";
-    menu.appendChild(sep);
+    // --- Separator: danger zone ---
+    var sep3 = document.createElement("div");
+    sep3.className = "project-ctx-separator";
+    menu.appendChild(sep3);
 
-    // --- Delete ---
+    // --- Remove Project ---
     var deleteItem = document.createElement("button");
     deleteItem.className = "project-ctx-item project-ctx-delete";
     deleteItem.innerHTML = iconHtml("trash-2") + " <span>Remove Project</span>";
     deleteItem.addEventListener("click", function (e) {
       e.stopPropagation();
       closeProjectCtxMenu();
-      // Check for tasks/schedules first before removing
       if (ctx.ws && ctx.connected) {
         ctx.ws.send(JSON.stringify({ type: "remove_project_check", slug: slug, name: name }));
       }

package/lib/public/modules/theme.js

@@ -266,6 +266,7 @@ var changeCallbacks = [];
 var STORAGE_KEY = "clay-theme";
 var MODE_KEY = "clay-mode";        // "light" | "dark" | null (system)
 var SKIN_KEY = "clay-skin";        // theme id within current variant pair
+var WIDE_KEY = "clay-wide-view";   // cached from server, "bubble" | "channel"
 
 // --- Helpers ---
 
@@ -485,6 +486,32 @@ function themeIdForMode(mode) {
   }
 }
 
+// --- Wide view ---
+
+export function isWideView() {
+  try {
+    var v = localStorage.getItem(WIDE_KEY);
+    return v === null ? true : v !== "bubble"; // default: Channel (wide)
+  } catch (e) { return true; }
+}
+
+export function getChatLayout() {
+  try {
+    var v = localStorage.getItem(WIDE_KEY);
+    return v === "bubble" ? "bubble" : "channel";
+  } catch (e) { return "channel"; }
+}
+
+export function setChatLayout(layout) {
+  var val = (layout === "bubble") ? "bubble" : "channel";
+  try { localStorage.setItem(WIDE_KEY, val); } catch (e) {}
+  document.body.classList.toggle("wide-view", val === "channel");
+}
+
+export function setWideView(enabled) {
+  setChatLayout(enabled ? "channel" : "bubble");
+}
+
 // Toggle between light and dark
 export function toggleDarkMode() {
   var current = getEffectiveMode();
@@ -671,6 +698,9 @@ export function initTheme() {
     currentThemeId = mode === "light" ? "ayu-light" : "dracula";
   }
 
+  // Apply wide view state from localStorage
+  document.body.classList.toggle("wide-view", isWideView());
+
   // Load all themes from server, then apply properly
   loadThemes();
 

package/lib/public/modules/user-settings.js

@@ -3,7 +3,7 @@
 
 import { refreshIcons } from './icons.js';
 import { showToast } from './utils.js';
-import { toggleDarkMode, getCurrentTheme } from './theme.js';
+import { toggleDarkMode, getCurrentTheme, getChatLayout, setChatLayout } from './theme.js';
 
 var ctx = null;
 var settingsEl = null;
@@ -93,12 +93,42 @@ export function initUserSettings(appCtx) {
     });
   }
 
-  // Theme toggle (light/dark)
-  var themeToggle = document.getElementById('us-theme-toggle');
-  if (themeToggle) {
-    themeToggle.addEventListener('change', function () {
-      toggleDarkMode();
-    });
+  // Theme switcher (Light / Dark)
+  var themeSwitcher = document.getElementById('us-theme-switcher');
+  if (themeSwitcher) {
+    var themeBtns = themeSwitcher.querySelectorAll('.layout-option');
+    for (var ti = 0; ti < themeBtns.length; ti++) {
+      themeBtns[ti].addEventListener('click', function () {
+        var mode = this.dataset.theme;
+        var current = getCurrentTheme();
+        var currentMode = (current && current.variant) || 'dark';
+        if (mode !== currentMode) toggleDarkMode();
+        for (var tj = 0; tj < themeBtns.length; tj++) {
+          themeBtns[tj].classList.toggle('selected', themeBtns[tj].dataset.theme === mode);
+        }
+      });
+    }
+  }
+
+  // Layout switcher (Bubble / Channel)
+  var layoutSwitcher = document.getElementById('us-layout-switcher');
+  if (layoutSwitcher) {
+    var layoutBtns = layoutSwitcher.querySelectorAll('.layout-option');
+    for (var li = 0; li < layoutBtns.length; li++) {
+      layoutBtns[li].addEventListener('click', function () {
+        var layout = this.dataset.layout;
+        setChatLayout(layout);
+        for (var lj = 0; lj < layoutBtns.length; lj++) {
+          layoutBtns[lj].classList.toggle('selected', layoutBtns[lj].dataset.layout === layout);
+        }
+        // Save to server
+        fetch('/api/user/chat-layout', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ layout: layout }),
+        }).catch(function () {});
+      });
+    }
   }
 
   // Logout button
@@ -166,11 +196,30 @@ function populateAccount() {
     // Auto-continue toggle
     var acToggle = document.getElementById('us-auto-continue');
     if (acToggle) acToggle.checked = !!data.autoContinueOnRateLimit;
-    // Theme toggle
-    var thToggle = document.getElementById('us-theme-toggle');
-    if (thToggle) {
-      var theme = getCurrentTheme();
-      thToggle.checked = theme && theme.variant === 'light';
+    // Theme switcher
+    var tSwitcher = document.getElementById('us-theme-switcher');
+    if (tSwitcher) {
+      var currentMode = (getCurrentTheme() && getCurrentTheme().variant) || 'dark';
+      var tBtns = tSwitcher.querySelectorAll('.layout-option');
+      for (var ti = 0; ti < tBtns.length; ti++) {
+        tBtns[ti].classList.toggle('selected', tBtns[ti].dataset.theme === currentMode);
+      }
+    }
+    // Layout switcher: sync from server response
+    // Sync mate onboarding state from server
+    if (data.mateOnboardingShown) {
+      try { localStorage.setItem("clay-mate-onboarding-shown", "1"); } catch (e) {}
+    }
+    if (data.chatLayout) {
+      setChatLayout(data.chatLayout); // update local cache + CSS
+    }
+    var lSwitcher = document.getElementById('us-layout-switcher');
+    if (lSwitcher) {
+      var currentLayout = getChatLayout();
+      var lBtns = lSwitcher.querySelectorAll('.layout-option');
+      for (var li = 0; li < lBtns.length; li++) {
+        lBtns[li].classList.toggle('selected', lBtns[li].dataset.layout === currentLayout);
+      }
     }
   }).catch(function () {});
 }