clay-server 3.8.1 → 4.0.0-beta.2

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

@@ -7,7 +7,6 @@ import { iconHtml, refreshIcons } from './icons.js';
 import { parseEmojis } from './markdown.js';
 import { getCurrentTheme, getChatLayout, setChatLayout } from './theme.js';
 import { openCommandPalette } from './command-palette.js';
-import { getMateSessions } from './mate-sidebar.js';
 import { openProjectSettings } from './project-settings.js';
 import {
   getCachedSessions,
@@ -33,8 +32,8 @@ 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 { openHomeChat } from './home-mate-chat.js';
 import { openTerminal } from './terminal.js';
 import { requestKnowledgeList } from './mate-knowledge.js';
 import { loadRootDirectory } from './filebrowser.js';
@@ -319,9 +318,9 @@ function renderSheetSessions(listEl) {
     if (type === "project") {
       renderMobileSessionsInto(sessionListEl);
     } else if (type === "mate") {
-      // Mate DM: open the DM and show mate actions
-      openDm(mateId);
-      renderMateMobileActions(sessionListEl);
+      closeMobileSheet();
+      showHomeHub();
+      openHomeChat(mateId);
     }
 
     refreshIcons();
@@ -370,12 +369,8 @@ function renderSheetSessions(listEl) {
   // Track that chat sheet is open
   mobileChatSheetOpen = true;
 
-  // --- Initial render: show mate actions if DM active, otherwise project sessions ---
-  if (getCurrentDmUserId()) {
-    renderSessionsForContext("mate", null, getCurrentDmUserId());
-  } else {
-    renderSessionsForContext("project", getCachedCurrentSlug(), null);
-  }
+  // Mate chips navigate away immediately, so the sheet always renders project sessions.
+  renderSessionsForContext("project", getCachedCurrentSlug(), null);
 }
 
 // Helper: create a mobile session item element
@@ -659,54 +654,6 @@ function createMobileLoopGroup(loopId, children, groupKey) {
   return wrapper;
 }
 
-function renderMateMobileActions(container) {
-  var newSessionBtn = document.createElement("button");
-  newSessionBtn.className = "mobile-session-new";
-  newSessionBtn.innerHTML = '<i data-lucide="plus" style="width:16px;height:16px"></i> New session';
-  newSessionBtn.addEventListener("click", function () {
-    if (getWs() && store.get('connected')) {
-      getWs().send(JSON.stringify({ type: "new_session" }));
-    }
-    closeMobileSheet();
-  });
-  container.appendChild(newSessionBtn);
-
-  var debateBtn = document.createElement("button");
-  debateBtn.className = "mobile-session-new";
-  debateBtn.innerHTML = '<i data-lucide="mic" style="width:16px;height:16px"></i> New debate';
-  debateBtn.addEventListener("click", function () {
-    closeMobileSheet();
-    var targetBtn = document.getElementById("mate-debate-btn");
-    if (targetBtn) setTimeout(function () { targetBtn.click(); }, 250);
-  });
-  container.appendChild(debateBtn);
-
-  // Render mate session list
-  var mateSessions = getMateSessions();
-  if (mateSessions.length > 0) {
-    var sorted = mateSessions.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];
-      var group = getDateGroup(s.lastActivity || 0);
-      if (group !== currentGroup) {
-        currentGroup = group;
-        var header = document.createElement("div");
-        header.className = "mobile-sheet-group";
-        header.textContent = group;
-        container.appendChild(header);
-      }
-      var mateItem = createMobileSessionItem(s);
-      container.appendChild(mateItem);
-    }
-  }
-
-  refreshIcons();
-}
-
 // Helper: render sorted sessions into a container with date groups (with loop session grouping)
 function renderMobileSessionsInto(container) {
   // Mirrors the desktop sidebar's split button: one "New session" action on
@@ -902,11 +849,7 @@ export function refreshMobileChatSheet() {
 
   // Re-render sessions for current context
   sessionListEl.innerHTML = "";
-  if (getCurrentDmUserId()) {
-    renderMateMobileActions(sessionListEl);
-  } else {
-    renderMobileSessionsInto(sessionListEl);
-  }
+  renderMobileSessionsInto(sessionListEl);
 
   refreshIcons();
 }

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

@@ -0,0 +1,37 @@
+// Compact online-user presence renderer for the project sidebar.
+
+import { userAvatarUrl } from './avatar.js';
+
+var lastSidebarPresenceIds = [];
+
+export function renderSidebarPresence(onlineUsers) {
+  var container = document.getElementById("sidebar-presence");
+  if (!container) return;
+  if (!onlineUsers || onlineUsers.length < 2) {
+    if (lastSidebarPresenceIds.length > 0) {
+      lastSidebarPresenceIds = [];
+      container.innerHTML = "";
+    }
+    return;
+  }
+  var newIds = onlineUsers.map(function (user) { return user.id; }).sort();
+  if (newIds.length === lastSidebarPresenceIds.length && newIds.every(function (id, index) { return id === lastSidebarPresenceIds[index]; })) return;
+  lastSidebarPresenceIds = newIds;
+  container.innerHTML = "";
+  var maxShow = 4;
+  for (var i = 0; i < Math.min(onlineUsers.length, maxShow); i++) {
+    var user = onlineUsers[i];
+    var image = document.createElement("img");
+    image.className = "sidebar-presence-avatar";
+    image.src = userAvatarUrl(user, 24);
+    image.alt = user.displayName;
+    image.dataset.tip = user.displayName + " (@" + user.username + ")";
+    container.appendChild(image);
+  }
+  if (onlineUsers.length > maxShow) {
+    var more = document.createElement("span");
+    more.className = "sidebar-presence-more";
+    more.textContent = "+" + (onlineUsers.length - maxShow);
+    container.appendChild(more);
+  }
+}

package/lib/public/modules/split-pair-ui.js

@@ -5,8 +5,8 @@ import { buildAgentVendorSelect, fillAgentModels, buildAgentEffortSelect, fillAg
 import { showToast } from './utils.js';
 
 var pairDialog = null;
-// Set when the dialog was opened via "Add Worker" on an existing session:
-// that session becomes the Driver and the dialog only configures the Worker.
+// Set when the dialog was opened via "Add Split Worker" on an existing session:
+// that session becomes the Driver and the dialog only configures the Split Worker.
 var pendingDriver = null;
 
 function closePairDialog() {
@@ -35,7 +35,7 @@ function roleColumn(role, description, vendorSelect, modelSelect, effortSelect,
   col.className = "pair-modal-role";
   var heading = document.createElement("div");
   heading.className = "pair-modal-role-heading";
-  heading.innerHTML = '<span class="pair-role-dot pair-role-' + role.toLowerCase() + '"></span><div><strong>' + role + '</strong><span>' + description + '</span></div>';
+  heading.innerHTML = '<span class="pair-role-dot pair-role-' + role.toLowerCase().replace(/ /g, "-") + '"></span><div><strong>' + role + '</strong><span>' + description + '</span></div>';
   col.appendChild(heading);
   var vendorField = fieldLabel("Vendor", vendorSelect);
   col.appendChild(vendorField.fragment);
@@ -82,13 +82,13 @@ export function showPairDialog(options) {
 
   var title = document.createElement("div");
   title.className = "wt-modal-title";
-  title.textContent = driverInfo ? "Add Worker" : "Pair session";
+  title.textContent = driverInfo ? "Add Split Worker" : "Pair session";
   modal.appendChild(title);
   var desc = document.createElement("div");
   desc.className = "pair-modal-desc";
   desc.textContent = driverInfo
-    ? "This session becomes the Driver; a new Worker opens beside it."
-    : "One Driver plans and directs a visible Worker session.";
+    ? "This session becomes the Driver; a new Split Worker opens beside it."
+    : "One Driver plans and directs a visible Split Worker session.";
   modal.appendChild(desc);
 
   var driverVendor = buildAgentVendorSelect(installed, installed.indexOf("claude") !== -1 ? "claude" : installed[0]);
@@ -137,7 +137,7 @@ export function showPairDialog(options) {
   } else {
     roles.appendChild(roleColumn("Driver", "Plans, delegates, and integrates", driverVendor, driverModel, driverEffort, options));
   }
-  roles.appendChild(roleColumn("Worker", "Executes delegated tasks", workerVendor, workerModel, workerEffort, options));
+  roles.appendChild(roleColumn("Split Worker", "Executes delegated tasks", workerVendor, workerModel, workerEffort, options));
   modal.appendChild(roles);
 
   var actions = document.createElement("div");
@@ -149,7 +149,7 @@ export function showPairDialog(options) {
   var createBtn = document.createElement("button");
   createBtn.type = "button";
   createBtn.className = "wt-modal-btn primary";
-  createBtn.textContent = driverInfo ? "Add Worker" : "Create pair";
+  createBtn.textContent = driverInfo ? "Add Split Worker" : "Create pair";
   actions.appendChild(cancelBtn);
   actions.appendChild(createBtn);
   modal.appendChild(actions);
@@ -218,7 +218,7 @@ export function handleSplitDelegation(msg) {
   if (msg.active) states[msg.groupId] = msg;
   else delete states[msg.groupId];
   store.set({ splitDelegations: states });
-  // Inside the worker's own pane, mirror the delegation into the composer
+  // Inside the Split Worker's own pane, mirror the delegation into the composer
   // notice (the delegated user_message shows it too; this covers the end).
   if (store.get('paneMode') && msg.to === store.get('activeSessionId')) {
     if (msg.active) showWorkerDelegationNotice(null);
@@ -252,7 +252,7 @@ export function syncPairChrome(host, split) {
         setBtn.type = "button";
         setBtn.className = "split-pair-set-driver";
         setBtn.textContent = "Set Driver";
-        setBtn.title = "Make this session the Driver; the other pane becomes its Worker";
+        setBtn.title = "Make this session the Driver; the other pane becomes its Split Worker";
         setBtn.addEventListener("click", function () { sendSetPair(group.id, paneSessionId); });
         var titleEl = header.querySelector(".split-pane-title");
         var accessEl = header.querySelector(".split-pane-full-access");
@@ -264,11 +264,11 @@ export function syncPairChrome(host, split) {
   for (var pi = 0; pi < split.panes.length && pi < headers.length; pi++) {
     (function (sessionId, header) {
       var isDriver = sessionId === group.pair.driverId;
-      var role = isDriver ? "Driver" : "Worker";
+      var role = isDriver ? "Driver" : "Split Worker";
       var badge = document.createElement("span");
-      badge.className = "split-pair-role split-pair-role-" + role.toLowerCase();
+      badge.className = "split-pair-role split-pair-role-" + role.toLowerCase().replace(/ /g, "-");
       badge.textContent = role;
-      badge.title = isDriver ? "Driver controls this Worker" : "Worker controlled by the Driver";
+      badge.title = isDriver ? "Driver controls this Split Worker" : "Split Worker controlled by the Driver";
       var title = header.querySelector(".split-pane-title");
       var access = header.querySelector(".split-pane-full-access");
       header.insertBefore(badge, access ? access.nextSibling : (title ? title.nextSibling : null));

package/lib/public/modules/split-view.js

@@ -11,6 +11,7 @@ import { groupedSessionIds, findSplitGroup } from './split-group-helpers.js';
 import { showConfirm } from './app-misc.js';
 import { syncPairChrome } from './split-pair-ui.js';
 import { presentMarkdownEdit } from './filebrowser.js';
+import { autoStartLoginIfNeeded } from './vendor-login.js';
 
 var host = null;
 var nativeApp = null;
@@ -276,6 +277,12 @@ function handlePaneMessage(event) {
     if (present) presentMarkdownEdit(present);
     return;
   }
+  // Both panes can report auth_required for their own sessions. The shell runs
+  // one login flow for the project; repeat events are no-ops there.
+  if (msg.type === "clay-pane-auth-required") {
+    if (msg.message) autoStartLoginIfNeeded(msg.message);
+    return;
+  }
   if (msg.type !== "clay-pane-context") return;
   var frames = host.querySelectorAll(".split-pane-frame");
   for (var i = 0; i < frames.length; i++) {

package/lib/public/modules/sticky-notes.js

@@ -11,7 +11,7 @@ var textTimers = {};
 var colorPickerEl = null;
 var formatToolbarEl = null;
 
-var NOTE_COLORS = ["yellow", "blue", "green", "pink", "orange", "purple"];
+var NOTE_COLORS = ["purple", "green", "yellow", "blue", "pink", "orange"];
 
 
 function getContainerBounds() {
@@ -98,7 +98,8 @@ export function createNote() {
     type: "note_create",
     x: 60 + offset,
     y: 60 + offset,
-    color: "yellow",
+    color: "purple",
+    opacity: 0.64,
   });
 }
 
@@ -154,7 +155,7 @@ function renderNote(data) {
   el.style.width = data.w + "px";
   el.style.height = data.h + "px";
   el.style.zIndex = 100 + (data.zIndex || 0);
-  el.dataset.color = data.color || "yellow";
+  el.dataset.color = data.color || "purple";
 
   if (data.minimized) el.classList.add("minimized");
   if (data.hidden) el.classList.add("hidden");
@@ -217,7 +218,7 @@ function renderNote(data) {
   opacitySlider.type = "range";
   opacitySlider.min = "20";
   opacitySlider.max = "100";
-  opacitySlider.value = String(Math.round((data.opacity || 1) * 100));
+  opacitySlider.value = String(Math.round((typeof data.opacity === "number" ? data.opacity : 0.64) * 100));
   opacitySlider.className = "sticky-note-opacity-slider";
   opacitySlider.title = "Opacity";
   opacityWrap.appendChild(opacitySlider);
@@ -813,7 +814,7 @@ export function handleNoteUpdated(msg) {
   entry.el.style.width = msg.note.w + "px";
   entry.el.style.height = msg.note.h + "px";
   entry.el.style.zIndex = 100 + (msg.note.zIndex || 0);
-  entry.el.dataset.color = msg.note.color || "yellow";
+  entry.el.dataset.color = msg.note.color || "purple";
 
   // Update text only if not actively editing (check rendered or textarea focus)
   var textarea = entry.el.querySelector(".sticky-note-text");
@@ -926,7 +927,7 @@ function renderArchiveCards() {
     (function (noteData) {
       var card = document.createElement("div");
       card.className = "notes-archive-card" + (noteData.data.hidden ? " archived" : "");
-      card.dataset.color = noteData.data.color || "yellow";
+      card.dataset.color = noteData.data.color || "purple";
 
       // Header with title + delete
       var header = document.createElement("div");

package/lib/public/modules/tool-input-composition.js

@@ -0,0 +1,48 @@
+// Composition-safe action binding for declarative Capsule text controls.
+
+var inputStates = new WeakMap();
+
+export function isToolTextInputComposing(input) {
+  var state = inputStates.get(input);
+  return !!state && state.composing;
+}
+
+export function bindToolTextInput(input, commit, options) {
+  options = options || {};
+  var state = { composing: false, trailingValue: null };
+  inputStates.set(input, state);
+
+  function isAlive() {
+    return typeof options.isAlive !== "function" || options.isAlive(input);
+  }
+
+  input.addEventListener("compositionstart", function () {
+    state.composing = true;
+    state.trailingValue = null;
+  });
+
+  input.addEventListener("beforeinput", function (event) {
+    if (state.trailingValue === null && event && (event.isComposing || event.inputType === "insertCompositionText")) {
+      state.composing = true;
+    }
+  });
+
+  input.addEventListener("compositionend", function () {
+    state.composing = false;
+    state.trailingValue = input.value;
+    if (!isAlive()) return;
+    commit(input.value);
+    if (typeof options.onCompositionEnd === "function") options.onCompositionEnd(input);
+  });
+
+  input.addEventListener("input", function (event) {
+    if (state.composing || (event && event.isComposing)) return;
+    if (state.trailingValue !== null && input.value === state.trailingValue) {
+      state.trailingValue = null;
+      return;
+    }
+    state.trailingValue = null;
+    if (!isAlive()) return;
+    commit(input.value);
+  });
+}

package/lib/public/modules/tool-llm-status.js

@@ -0,0 +1,167 @@
+// Compact provider/model status for LLM-enabled Capsule surfaces.
+
+import { getWs } from './ws-ref.js';
+
+var surfaces = [];
+var requestCounter = 0;
+var activeRequests = Object.create(null);
+var states = Object.create(null);
+var subscribers = [];
+
+export var TOOL_LLM_ALIASES = Object.freeze(["fast", "standard", "deep"]);
+
+function safeAlias(alias) {
+  return alias === "fast" || alias === "deep" ? alias : "standard";
+}
+
+function isAlias(alias) {
+  return alias === "fast" || alias === "standard" || alias === "deep";
+}
+
+export function initialToolLlmAlias(manifest) {
+  return manifest && isAlias(manifest.modelAlias) ? manifest.modelAlias : null;
+}
+
+export function toolLlmDisplayValue(modelState) {
+  var ready = modelState && modelState.status === "ready" && modelState.vendorName && modelState.modelName;
+  return ready ? modelState.vendorName + " · " + modelState.modelName : "No model configured";
+}
+
+export function toolLlmShouldRetry(modelState) {
+  return !!modelState && modelState.status === "error";
+}
+
+function currentSurfaces() {
+  surfaces = surfaces.filter(function (surface) { return !!surface.root; });
+  return surfaces;
+}
+
+function notifyAlias(alias) {
+  var current = subscribers.slice();
+  for (var i = 0; i < current.length; i++) current[i](alias, getToolLlmConfiguration(alias));
+}
+
+export function getToolLlmConfiguration(alias) {
+  alias = safeAlias(alias);
+  return Object.assign({ status: "loading", vendorName: "", modelName: "", error: "" }, states[alias] || {});
+}
+
+export function subscribeToolLlmConfigurations(listener) {
+  subscribers.push(listener);
+  return function () {
+    var index = subscribers.indexOf(listener);
+    if (index !== -1) subscribers.splice(index, 1);
+  };
+}
+
+function renderSurface(surface) {
+  if (!surface.alias) {
+    surface.value.textContent = "Selected when Capsule runs";
+    surface.value.title = "The concrete model is selected when this Capsule requests an LLM capability.";
+    surface.error.classList.add("hidden");
+    surface.retry.classList.add("hidden");
+    return;
+  }
+  var state = states[surface.alias] || { status: "loading", vendorName: "", modelName: "", error: "" };
+  var ready = state.status === "ready" && state.vendorName && state.modelName;
+  surface.value.textContent = toolLlmDisplayValue(state);
+  surface.value.title = ready ? "Capsule " + surface.alias + " model: " + state.vendorName + " · " + state.modelName : "No configured Capsule model";
+  surface.error.textContent = state.error || "";
+  surface.error.classList.toggle("hidden", !state.error);
+  surface.retry.classList.toggle("hidden", !toolLlmShouldRetry(state));
+  surface.retry.disabled = false;
+  surface.retry.textContent = "Retry";
+}
+
+function renderAlias(alias) {
+  var current = currentSurfaces();
+  for (var i = 0; i < current.length; i++) {
+    if (current[i].alias === alias) renderSurface(current[i]);
+  }
+}
+
+export function requestToolLlmConfiguration(alias) {
+  alias = safeAlias(alias);
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) {
+    activeRequests[alias] = null;
+    states[alias] = { status: "error", vendorName: "", modelName: "", error: "Connect to Clay to check the Capsule model." };
+    renderAlias(alias);
+    notifyAlias(alias);
+    return;
+  }
+  requestCounter++;
+  activeRequests[alias] = "tool-llm-config-" + requestCounter;
+  states[alias] = { status: "loading", vendorName: "", modelName: "", error: "" };
+  renderAlias(alias);
+  notifyAlias(alias);
+  ws.send(JSON.stringify({ type: "tool_llm_config_get", requestId: activeRequests[alias], alias: alias }));
+}
+
+export function requestAllToolLlmConfigurations() {
+  for (var i = 0; i < TOOL_LLM_ALIASES.length; i++) requestToolLlmConfiguration(TOOL_LLM_ALIASES[i]);
+}
+
+export function handleToolLlmConfigState(msg) {
+  if (!isAlias(msg.alias)) return;
+  var alias = msg.alias;
+  if (msg.requestId && msg.requestId !== activeRequests[alias]) return;
+  activeRequests[alias] = null;
+  states[alias] = {
+    status: msg.status === "ready" ? "ready" : "error",
+    vendorName: msg.vendorName || msg.vendor || "",
+    modelName: msg.modelName || msg.model || "",
+    error: msg.error || "",
+  };
+  renderAlias(alias);
+  notifyAlias(alias);
+}
+
+export function createToolLlmStatus(alias) {
+  alias = isAlias(alias) ? alias : null;
+  var root = document.createElement("section");
+  root.className = "tool-llm-status";
+  root.setAttribute("aria-label", "Capsule model status");
+  var identity = document.createElement("div");
+  identity.className = "tool-llm-identity";
+  var label = document.createElement("span");
+  label.className = "tool-llm-label";
+  label.textContent = "Model";
+  var value = document.createElement("span");
+  value.className = "tool-llm-value";
+  value.setAttribute("aria-live", "polite");
+  identity.appendChild(label);
+  identity.appendChild(value);
+  var actions = document.createElement("div");
+  actions.className = "tool-llm-actions";
+  var retry = document.createElement("button");
+  retry.type = "button";
+  retry.className = "tool-llm-action hidden";
+  retry.addEventListener("click", function () {
+    if (surface.alias) requestToolLlmConfiguration(surface.alias);
+  });
+  var error = document.createElement("p");
+  error.className = "tool-llm-error hidden";
+  actions.appendChild(retry);
+  root.appendChild(identity);
+  root.appendChild(actions);
+  root.appendChild(error);
+  var surface = { root: root, alias: alias, value: value, retry: retry, error: error };
+  surfaces.push(surface);
+  renderSurface(surface);
+  if (alias) requestToolLlmConfiguration(alias);
+  return {
+    element: root,
+    setAlias: function (nextAlias) {
+      if (!isAlias(nextAlias)) return;
+      surface.alias = nextAlias;
+      renderSurface(surface);
+      requestToolLlmConfiguration(nextAlias);
+    },
+    dispose: function () {
+      surface.root = null;
+      var index = surfaces.indexOf(surface);
+      if (index !== -1) surfaces.splice(index, 1);
+    },
+  };
+}