clay-server 2.10.0 → 2.11.0-beta.10

package/lib/public/modules/admin.js

@@ -93,7 +93,11 @@ function loadUsersTab(body) {
 }
 
 function renderUsersTab(body) {
-  var html = '<div class="admin-user-list">';
+  var html = '<div class="admin-section-header">' +
+    '<div class="admin-header-btns">' +
+    '<button class="admin-action-btn" id="admin-add-user">' + iconHtml("user-plus") + ' Add User</button>' +
+    '</div></div>';
+  html += '<div class="admin-user-list">';
   for (var i = 0; i < cachedUsers.length; i++) {
     var u = cachedUsers[i];
     var isMe = meInfo && meInfo.user && meInfo.user.id === u.id;
@@ -117,6 +121,14 @@ function renderUsersTab(body) {
   body.innerHTML = html;
   refreshIcons(body);
 
+  // Bind add user button
+  var addUserBtn = body.querySelector("#admin-add-user");
+  if (addUserBtn) {
+    addUserBtn.addEventListener("click", function () {
+      showAddUserModal(body);
+    });
+  }
+
   // Bind remove buttons
   var removeBtns = body.querySelectorAll(".admin-remove-btn");
   for (var j = 0; j < removeBtns.length; j++) {
@@ -131,6 +143,124 @@ function renderUsersTab(body) {
   }
 }
 
+function showAddUserModal(body) {
+  var modal = document.createElement("div");
+  modal.className = "admin-modal-overlay";
+  var html = '<div class="admin-modal">' +
+    '<div class="admin-modal-header">' +
+    '<h3>Add User</h3>' +
+    '<button class="admin-modal-close">' + iconHtml("x") + '</button>' +
+    '</div>' +
+    '<div class="admin-modal-body">' +
+    '<p class="admin-modal-desc">Create a new user account. A temporary 6-digit PIN will be generated automatically. The user must change it on first login.</p>' +
+    '<div class="admin-smtp-row"><label>Username</label>' +
+    '<input type="text" class="admin-smtp-input" id="admin-new-username" placeholder="username" autocomplete="off" maxlength="100"></div>' +
+    '<div class="admin-smtp-row"><label>Display Name</label>' +
+    '<input type="text" class="admin-smtp-input" id="admin-new-displayname" placeholder="Display Name (optional)" autocomplete="off" maxlength="30"></div>' +
+    '<div class="admin-smtp-row"><label>Email</label>' +
+    '<input type="email" class="admin-smtp-input" id="admin-new-email" placeholder="user@example.com (optional)" autocomplete="off"></div>' +
+    '<div class="admin-smtp-row"><label>Role</label>' +
+    '<select class="admin-smtp-input" id="admin-new-role"><option value="user">User</option><option value="admin">Admin</option></select></div>' +
+    '<div class="admin-smtp-error" id="admin-new-user-error"></div>' +
+    '</div>' +
+    '<div class="admin-modal-footer">' +
+    '<button class="admin-modal-save" id="admin-new-user-create">Create User</button>' +
+    '<button class="admin-modal-cancel">Cancel</button>' +
+    '</div></div>';
+  modal.innerHTML = html;
+  document.body.appendChild(modal);
+  refreshIcons(modal);
+
+  var usernameInput = modal.querySelector("#admin-new-username");
+  var displayNameInput = modal.querySelector("#admin-new-displayname");
+  var emailInput = modal.querySelector("#admin-new-email");
+  var roleSelect = modal.querySelector("#admin-new-role");
+  var createBtn = modal.querySelector("#admin-new-user-create");
+  var errorEl = modal.querySelector("#admin-new-user-error");
+
+  modal.querySelector(".admin-modal-close").addEventListener("click", function () { modal.remove(); });
+  modal.querySelector(".admin-modal-cancel").addEventListener("click", function () { modal.remove(); });
+  modal.addEventListener("click", function (e) { if (e.target === modal) modal.remove(); });
+
+  usernameInput.focus();
+  usernameInput.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") createBtn.click();
+  });
+
+  createBtn.addEventListener("click", function () {
+    var username = usernameInput.value.trim();
+    if (!username) {
+      errorEl.textContent = "Username is required";
+      errorEl.className = "admin-smtp-error admin-smtp-error-visible";
+      return;
+    }
+    createBtn.disabled = true;
+    createBtn.textContent = "Creating...";
+    errorEl.textContent = "";
+    errorEl.className = "admin-smtp-error";
+    apiPost("/api/admin/users", {
+      username: username,
+      displayName: displayNameInput.value.trim() || username,
+      email: emailInput.value.trim() || null,
+      role: roleSelect.value,
+    }).then(function (data) {
+      if (data.ok) {
+        modal.remove();
+        showTempPinModal(data.user, data.tempPin);
+        loadUsersTab(body);
+      } else {
+        errorEl.textContent = data.error || "Failed to create user";
+        errorEl.className = "admin-smtp-error admin-smtp-error-visible";
+        createBtn.disabled = false;
+        createBtn.textContent = "Create User";
+      }
+    }).catch(function () {
+      errorEl.textContent = "Failed to create user";
+      errorEl.className = "admin-smtp-error admin-smtp-error-visible";
+      createBtn.disabled = false;
+      createBtn.textContent = "Create User";
+    });
+  });
+}
+
+function showTempPinModal(user, tempPin) {
+  var modal = document.createElement("div");
+  modal.className = "admin-modal-overlay";
+  var html = '<div class="admin-modal">' +
+    '<div class="admin-modal-header">' +
+    '<h3>User Created</h3>' +
+    '<button class="admin-modal-close">' + iconHtml("x") + '</button>' +
+    '</div>' +
+    '<div class="admin-modal-body">' +
+    '<p class="admin-modal-desc">Account for <strong>' + escapeHtml(user.displayName || user.username) + '</strong> has been created. Share these credentials with the user:</p>' +
+    '<div class="admin-temp-pin-box">' +
+    '<div class="admin-temp-pin-row"><span class="admin-temp-pin-label">Username</span><code class="admin-temp-pin-value">' + escapeHtml(user.username) + '</code></div>' +
+    '<div class="admin-temp-pin-row"><span class="admin-temp-pin-label">Temporary PIN</span><code class="admin-temp-pin-value admin-temp-pin-highlight">' + escapeHtml(tempPin) + '</code></div>' +
+    '</div>' +
+    '<p class="admin-modal-desc" style="margin-top:12px;color:var(--text-secondary);font-size:12px;">This PIN is one-time use. The user will be prompted to set a new PIN on first login.</p>' +
+    '</div>' +
+    '<div class="admin-modal-footer">' +
+    '<button class="admin-modal-save" id="admin-copy-credentials">Copy Credentials</button>' +
+    '<button class="admin-modal-cancel">Close</button>' +
+    '</div></div>';
+  modal.innerHTML = html;
+  document.body.appendChild(modal);
+  refreshIcons(modal);
+
+  modal.querySelector(".admin-modal-close").addEventListener("click", function () { modal.remove(); });
+  modal.querySelector(".admin-modal-cancel").addEventListener("click", function () { modal.remove(); });
+  modal.addEventListener("click", function (e) { if (e.target === modal) modal.remove(); });
+
+  modal.querySelector("#admin-copy-credentials").addEventListener("click", function () {
+    var text = "Username: " + user.username + "\nTemporary PIN: " + tempPin;
+    copyToClipboard(text).then(function () {
+      showToast("Credentials copied to clipboard");
+    }).catch(function () {
+      showToast("Username: " + user.username + " / PIN: " + tempPin);
+    });
+  });
+}
+
 function removeUser(userId, body) {
   apiDelete("/api/admin/users/" + userId).then(function (data) {
     if (data.ok) {
@@ -340,9 +470,9 @@ function renderSmtpTab(body, cfg) {
 
   var emailEnabled = !!(cfg && cfg.emailLoginEnabled);
   if (hasConfig) {
-    html += '<div class="admin-smtp-status admin-smtp-status-ok">' + iconHtml("check-circle") + ' SMTP configured</div>';
+    html += '<div class="admin-smtp-status admin-smtp-status-ok">' + iconHtml("check-circle") + ' SMTP configured. Invite links and one-time login codes are sent via email.</div>';
   } else {
-    html += '<div class="admin-smtp-status admin-smtp-status-off">' + iconHtml("mail-x") + ' SMTP not configured — using PIN-based login</div>';
+    html += '<div class="admin-smtp-status admin-smtp-status-off">' + iconHtml("mail-x") + ' SMTP not configured. Users log in with a PIN instead of email codes.</div>';
   }
 
   html += '<div class="admin-smtp-fields">';
@@ -371,13 +501,12 @@ function renderSmtpTab(body, cfg) {
     '<label>From Address</label>' +
     '<input type="text" id="smtp-from" class="admin-smtp-input" placeholder="Clay <noreply@example.com>" value="' + escapeHtml((cfg && cfg.from) || "") + '">' +
     '</div>';
-  html += '</div>';
-
-  html += '<div class="admin-smtp-row" style="margin-top:16px;padding-top:16px;border-top:1px solid var(--border-color,#e5e7eb)">' +
+  html += '<div class="admin-smtp-row admin-smtp-row-otp">' +
     '<label>Email Login (OTP)</label>' +
     '<label class="admin-smtp-toggle"><input type="checkbox" id="smtp-email-login"' + (emailEnabled ? " checked" : "") + (hasConfig ? "" : " disabled") + '>' +
     '<span>' + (hasConfig ? "Require email for user registration and enable OTP login" : "Configure SMTP first to enable") + '</span></label>' +
     '</div>';
+  html += '</div>';
 
   html += '<div class="admin-smtp-actions">';
   html += '<button class="admin-action-btn" id="smtp-save">' + iconHtml("save") + ' Save</button>';
@@ -488,20 +617,23 @@ function loadProjectsTab(body) {
     return;
   }
 
-  var promises = projectList.map(function (p) {
+  var accessPromises = projectList.map(function (p) {
     return apiGet("/api/admin/projects/" + p.slug + "/access").then(function (access) {
-      return { slug: p.slug, title: p.title || p.project || p.slug, visibility: access.visibility || "public", allowedUsers: access.allowedUsers || [] };
+      return { slug: p.slug, title: p.title || p.project || p.slug, projectOwnerId: p.projectOwnerId || null, visibility: access.visibility || "public", allowedUsers: access.allowedUsers || [] };
     }).catch(function () {
-      return { slug: p.slug, title: p.title || p.project || p.slug, visibility: "public", allowedUsers: [] };
+      return { slug: p.slug, title: p.title || p.project || p.slug, projectOwnerId: p.projectOwnerId || null, visibility: "public", allowedUsers: [] };
     });
   });
 
-  Promise.all(promises).then(function (projectAccessList) {
-    renderProjectsTab(body, projectAccessList);
+  Promise.all([
+    Promise.all(accessPromises),
+    apiGet("/api/admin/users").catch(function () { return { users: [] }; }),
+  ]).then(function (results) {
+    renderProjectsTab(body, results[0], results[1].users || []);
   });
 }
 
-function renderProjectsTab(body, projectAccessList) {
+function renderProjectsTab(body, projectAccessList, allUsers) {
   var html = '<div class="admin-project-list">';
   for (var i = 0; i < projectAccessList.length; i++) {
     var p = projectAccessList[i];
@@ -512,6 +644,18 @@ function renderProjectsTab(body, projectAccessList) {
     html += '<div class="admin-project-slug">' + escapeHtml(p.slug) + '</div>';
     html += '</div>';
     html += '<div class="admin-project-controls">';
+    // Owner select
+    html += '<select class="admin-owner-select" data-slug="' + escapeHtml(p.slug) + '">';
+    html += '<option value=""' + (!p.projectOwnerId ? ' selected' : '') + '>No owner</option>';
+    for (var u = 0; u < allUsers.length; u++) {
+      var user = allUsers[u];
+      var sel = p.projectOwnerId === user.id ? ' selected' : '';
+      var label = escapeHtml(user.displayName || user.username);
+      if (user.linuxUser) label += ' (' + escapeHtml(user.linuxUser) + ')';
+      html += '<option value="' + escapeHtml(user.id) + '"' + sel + '>' + label + '</option>';
+    }
+    html += '</select>';
+    // Visibility select
     html += '<select class="admin-vis-select ' + visClass + '" data-slug="' + escapeHtml(p.slug) + '">';
     html += '<option value="public"' + (p.visibility === "public" ? " selected" : "") + '>Public</option>';
     html += '<option value="private"' + (p.visibility === "private" ? " selected" : "") + '>Private</option>';
@@ -527,6 +671,16 @@ function renderProjectsTab(body, projectAccessList) {
   body.innerHTML = html;
   refreshIcons(body);
 
+  // Bind owner selects
+  var ownerSelects = body.querySelectorAll(".admin-owner-select");
+  for (var oi = 0; oi < ownerSelects.length; oi++) {
+    ownerSelects[oi].addEventListener("change", function () {
+      var slug = this.dataset.slug;
+      var userId = this.value;
+      setProjectOwner(slug, userId, body);
+    });
+  }
+
   // Bind visibility selects
   var visSelects = body.querySelectorAll(".admin-vis-select");
   for (var j = 0; j < visSelects.length; j++) {
@@ -547,6 +701,19 @@ function renderProjectsTab(body, projectAccessList) {
   }
 }
 
+function setProjectOwner(slug, userId, body) {
+  apiPut("/api/admin/projects/" + slug + "/owner", { userId: userId || null }).then(function (data) {
+    if (data.ok) {
+      showToast("Project owner updated");
+      loadProjectsTab(body);
+    } else {
+      showToast(data.error || "Failed to update owner", "error");
+    }
+  }).catch(function () {
+    showToast("Failed to update owner", "error");
+  });
+}
+
 function setProjectVisibility(slug, visibility, body) {
   apiPut("/api/admin/projects/" + slug + "/visibility", { visibility: visibility }).then(function (data) {
     if (data.ok) {

package/lib/public/modules/input.js

@@ -23,6 +23,11 @@ export var builtinCommands = [
 
 // --- Send ---
 export function sendMessage() {
+  // DM mode intercept: if in DM mode, route to DM handler instead
+  if (ctx.isDmMode && ctx.isDmMode() && ctx.handleDmSend) {
+    ctx.handleDmSend();
+    return;
+  }
   var text = ctx.inputEl.value.trim();
   var images = pendingImages.slice();
   if (!text && images.length === 0 && pendingPastes.length === 0 && pendingFiles.length === 0) return;
@@ -443,9 +448,15 @@ function updateSlashHighlight() {
 // --- Input sync across devices ---
 function sendInputSync() {
   if (isRemoteInput) return;
-  if (ctx.ws && ctx.connected) {
-    ctx.ws.send(JSON.stringify({ type: "input_sync", text: ctx.inputEl.value }));
+  if (!ctx.ws || !ctx.connected) return;
+  // In DM mode, send typing indicator instead of input_sync
+  if (ctx.isDmMode && ctx.isDmMode()) {
+    var hasText = ctx.inputEl.value.length > 0;
+    var dk = ctx.getDmKey ? ctx.getDmKey() : null;
+    if (dk) ctx.ws.send(JSON.stringify({ type: "dm_typing", dmKey: dk, typing: hasText }));
+    return;
   }
+  ctx.ws.send(JSON.stringify({ type: "input_sync", text: ctx.inputEl.value }));
 }
 
 export function handleInputSync(text) {

package/lib/public/modules/notifications.js

@@ -92,7 +92,9 @@ export function initNotifications(_ctx) {
     if (copyBtn) {
       copyBtn.addEventListener("click", function (e) {
         e.stopPropagation();
-        copyToClipboard("npx clay-server@latest").then(function () {
+        var cmdEl = document.getElementById("update-manual-cmd");
+        var cmdText = cmdEl ? cmdEl.textContent : "npx clay-server@latest";
+        copyToClipboard(cmdText).then(function () {
           copyBtn.classList.add("copied");
           copyBtn.innerHTML = iconHtml("check");
           refreshIcons();