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

package/lib/public/modules/admin.js

@@ -1,954 +1,24 @@
-// admin.js — Admin management for multi-user mode (renders into server settings sections)
-import { iconHtml, refreshIcons } from './icons.js';
-import { showToast, copyToClipboard, escapeHtml } from './utils.js';
-
-function showConfirmDialog(message, actionLabel, onConfirm) {
-  var modal = document.createElement("div");
-  modal.className = "admin-modal-overlay";
-  var html = '<div class="admin-modal" role="dialog" aria-modal="true" aria-label="Confirm action">' +
-    '<div class="admin-modal-body" style="padding:20px 16px 16px">' +
-    '<p class="admin-modal-desc" style="margin:0;font-size:14px;color:var(--text)">' + escapeHtml(message) + '</p>' +
-    '</div>' +
-    '<div class="admin-modal-footer">' +
-    '<button class="admin-modal-save admin-modal-confirm-danger">' + escapeHtml(actionLabel) + '</button>' +
-    '<button class="admin-modal-cancel">Cancel</button>' +
-    '</div></div>';
-  modal.innerHTML = html;
-  document.body.appendChild(modal);
-  refreshIcons(modal);
-  modal.querySelector(".admin-modal-cancel").addEventListener("click", function () { modal.remove(); });
-  modal.addEventListener("click", function (e) { if (e.target === modal) modal.remove(); });
-  modal.querySelector(".admin-modal-confirm-danger").addEventListener("click", function () {
-    modal.remove();
-    onConfirm();
-  });
-}
-
-function showConfirmResetPin(name, onConfirm) {
-  var modal = document.createElement("div");
-  modal.className = "admin-modal-overlay";
-  var html = '<div class="admin-modal">' +
-    '<div class="admin-modal-body" style="padding:20px 16px 16px">' +
-    '<p class="admin-modal-desc" style="margin:0;font-size:14px;color:var(--text)">Reset PIN for <strong>' + escapeHtml(name) + '</strong>? A new temporary PIN will be generated and they will need to change it on next login.</p>' +
-    '</div>' +
-    '<div class="admin-modal-footer">' +
-    '<button class="admin-modal-save">Reset PIN</button>' +
-    '<button class="admin-modal-cancel">Cancel</button>' +
-    '</div></div>';
-  modal.innerHTML = html;
-  document.body.appendChild(modal);
-  modal.querySelector(".admin-modal-cancel").addEventListener("click", function () { modal.remove(); });
-  modal.addEventListener("click", function (e) { if (e.target === modal) modal.remove(); });
-  modal.querySelector(".admin-modal-save").addEventListener("click", function () {
-    modal.remove();
-    onConfirm();
-  });
-}
-
-var ctx = null;
-var cachedUsers = [];
-var cachedInvites = [];
-var cachedProjects = [];
-var meInfo = null;
-
-// --- API helpers ---
-function apiGet(url) {
-  return fetch(url).then(function (r) { return r.json(); });
-}
-
-function apiPost(url, body) {
-  return fetch(url, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(body || {}),
-  }).then(function (r) { return r.json(); });
-}
-
-function apiPut(url, body) {
-  return fetch(url, {
-    method: "PUT",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(body),
-  }).then(function (r) { return r.json(); });
-}
-
-function apiDelete(url) {
-  return fetch(url, { method: "DELETE" }).then(function (r) { return r.json(); });
-}
-
-// --- Init ---
-export function initAdmin(appCtx) {
-  ctx = appCtx;
-}
-
-// Check if user is admin and multi-user mode is active
+import { store } from './store.js';
+import { apiGet } from './admin-settings-ui.js';
+import { loadUsersTab } from './admin-settings-users.js';
+import { loadInvitesTab } from './admin-settings-invitations.js';
+import { loadSmtpTab } from './admin-settings-email.js';
+import { loadProjectsTab } from './admin-settings-projects.js';
+
+export function initAdmin() {}
 export function checkAdminAccess() {
-  return apiGet("/api/me").then(function (data) {
-    meInfo = data;
-    return data.multiUser && data.user && data.user.role === "admin";
+  return apiGet('/api/me').then(function (data) {
+    store.set({ adminMe: data });
+    return !!(data.multiUser && data.user && data.user.role === 'admin');
   }).catch(function () { return false; });
 }
-
-// --- Load admin section into a given body element ---
 export function loadAdminSection(section, body) {
-  body.innerHTML = '<div class="admin-loading">Loading...</div>';
-  if (section === "admin-users") {
-    loadUsersTab(body);
-  } else if (section === "admin-invites") {
-    loadInvitesTab(body);
-  } else if (section === "admin-projects") {
-    loadProjectsTab(body);
-  } else if (section === "admin-smtp") {
-    loadSmtpTab(body);
-  }
-}
-
-// --- Users ---
-function loadUsersTab(body) {
-  apiGet("/api/admin/users").then(function (data) {
-    cachedUsers = data.users || [];
-    renderUsersTab(body);
-  }).catch(function () {
-    body.innerHTML = '<div class="admin-error">Failed to load users</div>';
-  });
-}
-
-function renderUsersTab(body) {
-  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;
-    var created = new Date(u.createdAt).toLocaleDateString();
-    html += '<div class="admin-user-item">';
-    html += '<div class="admin-user-info">';
-    html += '<div class="admin-user-name">';
-    html += '<strong>' + escapeHtml(u.displayName || u.username) + '</strong>';
-    if (u.role === "admin") html += ' <span class="admin-badge">admin</span>';
-    if (isMe) html += ' <span class="admin-you-badge">you</span>';
-    html += '</div>';
-    html += '<div class="admin-user-meta">' + escapeHtml(u.username) + ' · joined ' + created + '</div>';
-    html += '</div>';
-    if (!isMe) {
-      html += '<div style="display:flex;align-items:center;gap:2px">';
-      if (u.role !== "admin") {
-        html += '<button class="admin-remove-btn admin-perms-btn" data-user-id="' + u.id + '" title="Permissions">' + iconHtml("shield") + '</button>';
-      }
-      html += '<button class="admin-remove-btn admin-reset-pin-btn" data-user-id="' + u.id + '" title="Reset PIN">' + iconHtml("key-round") + '</button>';
-      if (u.role !== "admin") {
-        html += '<button class="admin-remove-btn" data-user-id="' + u.id + '" title="Remove user">' + iconHtml("trash-2") + '</button>';
-      }
-      html += '</div>';
-    }
-    html += '</div>';
-  }
-  html += '</div>';
-
-  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 reset PIN buttons
-  var resetBtns = body.querySelectorAll(".admin-reset-pin-btn");
-  for (var j = 0; j < resetBtns.length; j++) {
-    resetBtns[j].addEventListener("click", function (e) {
-      e.stopPropagation();
-      var userId = this.dataset.userId;
-      var user = cachedUsers.find(function (u) { return u.id === userId; });
-      var name = user ? (user.displayName || user.username) : "this user";
-      showConfirmResetPin(name, function () {
-        apiPost("/api/admin/users/" + userId + "/reset-pin").then(function (data) {
-          if (data.ok) {
-            showTempPinModal({ username: user.username, displayName: user.displayName || user.username }, data.tempPin);
-          } else {
-            showToast(data.error || "Failed to reset PIN");
-          }
-        }).catch(function () {
-          showToast("Failed to reset PIN");
-        });
-      });
-    });
-  }
-
-  // Bind permissions buttons
-  var permsBtns = body.querySelectorAll(".admin-perms-btn");
-  for (var p = 0; p < permsBtns.length; p++) {
-    permsBtns[p].addEventListener("click", function (e) {
-      e.stopPropagation();
-      var userId = this.dataset.userId;
-      var user = cachedUsers.find(function (u) { return u.id === userId; });
-      if (user) showPermissionsModal(user, body);
-    });
-  }
-
-  // Bind remove buttons
-  var removeBtns = body.querySelectorAll(".admin-remove-btn:not(.admin-reset-pin-btn):not(.admin-perms-btn)");
-  for (var k = 0; k < removeBtns.length; k++) {
-    removeBtns[k].addEventListener("click", function () {
-      var userId = this.dataset.userId;
-      var user = cachedUsers.find(function (u) { return u.id === userId; });
-      var name = user ? (user.displayName || user.username) : "this user";
-      showConfirmDialog("Remove " + name + "? This cannot be undone.", "Remove user", function () {
-        removeUser(userId, body);
-      });
-    });
-  }
-}
-
-var PERM_LABELS = [
-  { key: "terminal", label: "Terminal", desc: "Access the web terminal" },
-  { key: "fileBrowser", label: "File Browser", desc: "Browse and manage files" },
-  { key: "createProject", label: "Create Projects", desc: "Create or clone new projects" },
-  { key: "deleteProject", label: "Delete Projects", desc: "Remove projects" },
-  { key: "skills", label: "Skills", desc: "View and install skills" },
-  { key: "sessionDelete", label: "Delete Sessions", desc: "Delete chat sessions" },
-  { key: "scheduledTasks", label: "Scheduled Tasks", desc: "Create and manage scheduled tasks" },
-  { key: "projectSettings", label: "Project Settings", desc: "Access project settings" },
-];
-
-var DEFAULT_PERMISSIONS = {
-  terminal: false,
-  fileBrowser: false,
-  createProject: true,
-  deleteProject: false,
-  skills: true,
-  sessionDelete: false,
-  scheduledTasks: false,
-  projectSettings: false,
-};
-
-function showPermissionsModal(user, body) {
-  var perms = {};
-  var keys = PERM_LABELS.map(function (p) { return p.key; });
-  for (var i = 0; i < keys.length; i++) {
-    var k = keys[i];
-    perms[k] = (user.permissions && user.permissions[k] !== undefined) ? user.permissions[k] : DEFAULT_PERMISSIONS[k];
-  }
-
-  var modal = document.createElement("div");
-  modal.className = "admin-modal-overlay";
-  var html = '<div class="admin-modal">' +
-    '<div class="admin-modal-header">' +
-    '<h3>Permissions: ' + escapeHtml(user.displayName || user.username) + '</h3>' +
-    '<button class="admin-modal-close">&times;</button>' +
-    '</div>' +
-    '<div class="admin-modal-body">' +
-    '<div class="admin-perms-list">';
-
-  for (var j = 0; j < PERM_LABELS.length; j++) {
-    var p = PERM_LABELS[j];
-    var checked = perms[p.key] ? " checked" : "";
-    html += '<label class="admin-perm-row">' +
-      '<div class="admin-perm-info">' +
-      '<span class="admin-perm-label">' + p.label + '</span>' +
-      '<span class="admin-perm-desc">' + p.desc + '</span>' +
-      '</div>' +
-      '<input type="checkbox" class="admin-perm-toggle" data-perm="' + p.key + '"' + checked + '>' +
-      '</label>';
-  }
-
-  html += '</div></div>' +
-    '<div class="admin-modal-footer">' +
-    '<button class="admin-modal-save" id="admin-perms-save">Save</button>' +
-    '<button class="admin-modal-cancel">Cancel</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-perms-save").addEventListener("click", function () {
-    var toggles = modal.querySelectorAll(".admin-perm-toggle");
-    var newPerms = {};
-    for (var t = 0; t < toggles.length; t++) {
-      newPerms[toggles[t].dataset.perm] = toggles[t].checked;
-    }
-    apiPut("/api/admin/users/" + user.id + "/permissions", { permissions: newPerms }).then(function (data) {
-      if (data.ok) {
-        showToast("Permissions updated");
-        modal.remove();
-        // Update cached user
-        for (var c = 0; c < cachedUsers.length; c++) {
-          if (cachedUsers[c].id === user.id) {
-            cachedUsers[c].permissions = data.permissions;
-            break;
-          }
-        }
-      } else {
-        showToast(data.error || "Failed to update permissions");
-      }
-    }).catch(function () {
-      showToast("Failed to update permissions");
-    });
-  });
-}
-
-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) {
-      showToast("User removed");
-      loadUsersTab(body);
-    } else {
-      showToast(data.error || "Failed to remove user");
-    }
-  }).catch(function () {
-    showToast("Failed to remove user");
-  });
-}
-
-// --- Invites ---
-function loadInvitesTab(body) {
-  apiGet("/api/admin/invites").then(function (data) {
-    cachedInvites = (data.invites || []).filter(function (inv) {
-      return !inv.used && inv.expiresAt > Date.now();
-    });
-    renderInvitesTab(body);
-  }).catch(function () {
-    body.innerHTML = '<div class="admin-error">Failed to load invites</div>';
-  });
-}
-
-function renderInvitesTab(body) {
-  var smtpEnabled = meInfo && meInfo.smtpEnabled;
-  var html = '<div class="admin-section-header">' +
-    '<div class="admin-header-btns">';
-  if (smtpEnabled) {
-    html += '<button class="admin-action-btn" id="admin-email-invite">' + iconHtml("mail") + ' Email Invite</button>';
-  }
-  html += '<button class="admin-action-btn admin-action-btn-secondary" id="admin-create-invite">' + iconHtml("plus") + ' Generate Link</button>' +
-    '</div></div>';
-
-  if (cachedInvites.length === 0) {
-    html += '<div class="admin-empty">No active invites. Generate one to add a new user.</div>';
-  } else {
-    html += '<div class="admin-invite-list">';
-    for (var i = 0; i < cachedInvites.length; i++) {
-      var inv = cachedInvites[i];
-      var expiresIn = Math.max(0, Math.ceil((inv.expiresAt - Date.now()) / (60 * 60 * 1000)));
-      html += '<div class="admin-invite-item">';
-      html += '<div class="admin-invite-info">';
-      html += '<code class="admin-invite-code">' + escapeHtml(inv.code.substring(0, 8)) + '...</code>';
-      if (inv.email) html += '<span class="admin-invite-email">' + escapeHtml(inv.email) + '</span>';
-      html += '<span class="admin-invite-expiry">expires in ' + expiresIn + 'h</span>';
-      html += '</div>';
-      html += '<div class="admin-invite-actions">';
-      html += '<button class="admin-copy-link-btn" data-code="' + escapeHtml(inv.code) + '" title="Copy link">' + iconHtml("copy") + '</button>';
-      html += '<button class="admin-revoke-btn" data-code="' + escapeHtml(inv.code) + '" title="Revoke">' + iconHtml("x") + '</button>';
-      html += '</div>';
-      html += '</div>';
-    }
-    html += '</div>';
-  }
-
-  body.innerHTML = html;
-  refreshIcons(body);
-
-  // Generate invite link
-  var createBtn = body.querySelector("#admin-create-invite");
-  if (createBtn) {
-    createBtn.addEventListener("click", function () {
-      createInvite(body);
-    });
-  }
-
-  // Email invite
-  var emailBtn = body.querySelector("#admin-email-invite");
-  if (emailBtn) {
-    emailBtn.addEventListener("click", function () {
-      showEmailInvitePrompt(body);
-    });
-  }
-
-  // Copy link buttons
-  var copyBtns = body.querySelectorAll(".admin-copy-link-btn");
-  for (var j = 0; j < copyBtns.length; j++) {
-    copyBtns[j].addEventListener("click", function () {
-      var code = this.dataset.code;
-      var url = location.origin + "/invite/" + code;
-      copyToClipboard(url).then(function () {
-        showToast("Invite link copied");
-      });
-    });
-  }
-
-  // Revoke buttons
-  var revokeBtns = body.querySelectorAll(".admin-revoke-btn");
-  for (var k = 0; k < revokeBtns.length; k++) {
-    revokeBtns[k].addEventListener("click", function () {
-      var code = this.dataset.code;
-      var btn = this;
-      showConfirmDialog("Revoke this invite? The link will no longer work.", "Revoke", function () {
-        btn.disabled = true;
-        fetch("/api/admin/invites/" + encodeURIComponent(code), { method: "DELETE" })
-          .then(function (r) { return r.json(); })
-          .then(function (d) {
-            if (d.ok) {
-              showToast("Invite revoked");
-              loadInvitesTab(body);
-            } else {
-              showToast(d.error || "Failed to revoke");
-              btn.disabled = false;
-            }
-          })
-          .catch(function () {
-            showToast("Failed to revoke invite");
-            btn.disabled = false;
-          });
-      });
-    });
-  }
-}
-
-function createInvite(body) {
-  apiPost("/api/admin/invites").then(function (data) {
-    if (data.ok && data.url) {
-      copyToClipboard(data.url).then(function () {
-        showToast("Invite link created and copied!");
-      }).catch(function () {
-        showToast("Invite created: " + data.url);
-      });
-      loadInvitesTab(body);
-    } else {
-      showToast(data.error || "Failed to create invite");
-    }
-  }).catch(function () {
-    showToast("Failed to create invite");
-  });
-}
-
-function showEmailInvitePrompt(body) {
-  var modal = document.createElement("div");
-  modal.className = "admin-modal-overlay";
-  var html = '<div class="admin-modal">' +
-    '<div class="admin-modal-header">' +
-    '<h3>Send Email Invite</h3>' +
-    '<button class="admin-modal-close">' + iconHtml("x") + '</button>' +
-    '</div>' +
-    '<div class="admin-modal-body">' +
-    '<p class="admin-modal-desc">Enter the email address to send an invitation to:</p>' +
-    '<input type="email" class="admin-smtp-input" id="admin-invite-email" placeholder="user@example.com" autocomplete="off">' +
-    '<div class="admin-smtp-error" id="admin-invite-error"></div>' +
-    '</div>' +
-    '<div class="admin-modal-footer">' +
-    '<button class="admin-modal-save" id="admin-invite-send">Send Invite</button>' +
-    '<button class="admin-modal-cancel">Cancel</button>' +
-    '</div></div>';
-  modal.innerHTML = html;
-  document.body.appendChild(modal);
-  refreshIcons(modal);
-
-  var emailInput = modal.querySelector("#admin-invite-email");
-  var sendBtn = modal.querySelector("#admin-invite-send");
-  var errorEl = modal.querySelector("#admin-invite-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(); });
-
-  emailInput.focus();
-  emailInput.addEventListener("keydown", function (e) {
-    if (e.key === "Enter") sendBtn.click();
-  });
-
-  sendBtn.addEventListener("click", function () {
-    var email = emailInput.value.trim();
-    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      errorEl.textContent = "Enter a valid email address";
-      return;
-    }
-    sendBtn.disabled = true;
-    sendBtn.textContent = "Sending...";
-    errorEl.textContent = "";
-    apiPost("/api/admin/invites/email", { email: email }).then(function (data) {
-      if (data.ok) {
-        showToast("Invite sent to " + email);
-        modal.remove();
-        loadInvitesTab(body);
-      } else {
-        errorEl.textContent = data.error || "Failed to send invite";
-        sendBtn.disabled = false;
-        sendBtn.textContent = "Send Invite";
-      }
-    }).catch(function () {
-      errorEl.textContent = "Failed to send invite";
-      sendBtn.disabled = false;
-      sendBtn.textContent = "Send Invite";
-    });
-  });
-}
-
-// --- SMTP Configuration ---
-function loadSmtpTab(body) {
-  apiGet("/api/admin/smtp").then(function (data) {
-    renderSmtpTab(body, data.smtp);
-  }).catch(function () {
-    body.innerHTML = '<div class="admin-error">Failed to load SMTP settings</div>';
-  });
-}
-
-function renderSmtpTab(body, cfg) {
-  var hasConfig = !!(cfg && cfg.host);
-  var html = '<div class="admin-smtp-form">';
-
-  var emailEnabled = !!(cfg && cfg.emailLoginEnabled);
-  if (hasConfig) {
-    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. Users log in with a PIN instead of email codes.</div>';
-  }
-
-  html += '<div class="admin-smtp-fields">';
-  html += '<div class="admin-smtp-row">' +
-    '<label>SMTP Host</label>' +
-    '<input type="text" id="smtp-host" class="admin-smtp-input" placeholder="smtp.gmail.com" value="' + escapeHtml((cfg && cfg.host) || "") + '">' +
-    '</div>';
-  html += '<div class="admin-smtp-row-half">' +
-    '<div class="admin-smtp-row">' +
-    '<label>Port</label>' +
-    '<input type="number" id="smtp-port" class="admin-smtp-input" placeholder="587" value="' + ((cfg && cfg.port) || 587) + '">' +
-    '</div>' +
-    '<div class="admin-smtp-row">' +
-    '<label>Secure (TLS)</label>' +
-    '<label class="admin-smtp-toggle"><input type="checkbox" id="smtp-secure"' + (cfg && cfg.secure ? " checked" : "") + '><span>Use TLS/SSL</span></label>' +
-    '</div></div>';
-  html += '<div class="admin-smtp-row">' +
-    '<label>Username</label>' +
-    '<input type="text" id="smtp-user" class="admin-smtp-input" placeholder="you@gmail.com" value="' + escapeHtml((cfg && cfg.user) || "") + '" autocomplete="off">' +
-    '</div>';
-  html += '<div class="admin-smtp-row">' +
-    '<label>Password</label>' +
-    '<input type="password" id="smtp-pass" class="admin-smtp-input" placeholder="App password" value="' + escapeHtml((cfg && cfg.pass) || "") + '" autocomplete="off">' +
-    '</div>';
-  html += '<div class="admin-smtp-row">' +
-    '<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 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>';
-  html += '<button class="admin-action-btn admin-action-btn-secondary" id="smtp-test">' + iconHtml("send") + ' Test Connection</button>';
-  if (hasConfig) {
-    html += '<button class="admin-action-btn admin-action-btn-danger" id="smtp-remove">' + iconHtml("trash-2") + ' Remove</button>';
-  }
-  html += '</div>';
-  html += '<div class="admin-smtp-error" id="smtp-error"></div>';
-  html += '<div class="admin-smtp-hint">For Gmail, use an <a href="https://support.google.com/accounts/answer/185833" target="_blank" rel="noopener">App Password</a>. Port 587 with TLS off uses STARTTLS. Port 465 with TLS on uses direct SSL.</div>';
-  html += '</div>';
-
-  body.innerHTML = html;
-  refreshIcons(body);
-
-  var errorEl = body.querySelector("#smtp-error");
-
-  function getFormData() {
-    return {
-      host: body.querySelector("#smtp-host").value.trim(),
-      port: parseInt(body.querySelector("#smtp-port").value, 10) || 587,
-      secure: body.querySelector("#smtp-secure").checked,
-      user: body.querySelector("#smtp-user").value.trim(),
-      pass: body.querySelector("#smtp-pass").value,
-      from: body.querySelector("#smtp-from").value.trim(),
-      emailLoginEnabled: body.querySelector("#smtp-email-login").checked,
-    };
-  }
-
-  // Save
-  body.querySelector("#smtp-save").addEventListener("click", function () {
-    var formData = getFormData();
-    if (!formData.host || !formData.user || !formData.pass || !formData.from) {
-      errorEl.textContent = "All fields are required";
-      errorEl.className = "admin-smtp-error admin-smtp-error-visible";
-      return;
-    }
-    var btn = this;
-    btn.disabled = true;
-    errorEl.textContent = "";
-    errorEl.className = "admin-smtp-error";
-    apiPost("/api/admin/smtp", formData).then(function (data) {
-      if (data.ok) {
-        showToast("SMTP settings saved");
-        loadSmtpTab(body);
-      } else {
-        errorEl.textContent = data.error || "Failed to save";
-        errorEl.className = "admin-smtp-error admin-smtp-error-visible";
-        btn.disabled = false;
-      }
-    }).catch(function () {
-      errorEl.textContent = "Failed to save settings";
-      errorEl.className = "admin-smtp-error admin-smtp-error-visible";
-      btn.disabled = false;
-    });
-  });
-
-  // Test
-  body.querySelector("#smtp-test").addEventListener("click", function () {
-    var formData = getFormData();
-    if (!formData.host || !formData.user || !formData.pass || !formData.from) {
-      errorEl.textContent = "Fill in all fields first";
-      errorEl.className = "admin-smtp-error admin-smtp-error-visible";
-      return;
-    }
-    var btn = this;
-    btn.disabled = true;
-    errorEl.textContent = "";
-    errorEl.className = "admin-smtp-error";
-    apiPost("/api/admin/smtp/test", formData).then(function (data) {
-      if (data.ok) {
-        showToast(data.message || "Test email sent!");
-        errorEl.textContent = "";
-        errorEl.className = "admin-smtp-error";
-      } else {
-        errorEl.textContent = data.error || "Test failed";
-        errorEl.className = "admin-smtp-error admin-smtp-error-visible";
-      }
-      btn.disabled = false;
-    }).catch(function () {
-      errorEl.textContent = "Connection failed";
-      errorEl.className = "admin-smtp-error admin-smtp-error-visible";
-      btn.disabled = false;
-    });
-  });
-
-  // Remove
-  var removeBtn = body.querySelector("#smtp-remove");
-  if (removeBtn) {
-    removeBtn.addEventListener("click", function () {
-      showConfirmDialog("Remove SMTP configuration? Users will need to use PIN login.", "Remove SMTP", function () {
-        apiPost("/api/admin/smtp", { host: "", user: "", pass: "", from: "" }).then(function () {
-          showToast("SMTP configuration removed");
-          loadSmtpTab(body);
-        });
-      });
-    });
-  }
-}
-
-// --- Projects ---
-function loadProjectsTab(body) {
-  var projectList = (ctx && ctx.projectList) || [];
-  // Exclude worktree and mate projects (mates are always private to their owner)
-  projectList = projectList.filter(function (p) { return !p.isWorktree && !p.isMate; });
-  cachedProjects = projectList;
-
-  if (projectList.length === 0) {
-    body.innerHTML = '<div class="admin-empty">No projects registered.</div>';
-    return;
-  }
-
-  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, projectOwnerId: p.projectOwnerId || null, visibility: access.visibility || "public", allowedUsers: access.allowedUsers || [] };
-    }).catch(function () {
-      return { slug: p.slug, title: p.title || p.project || p.slug, projectOwnerId: p.projectOwnerId || null, visibility: "public", allowedUsers: [] };
-    });
-  });
-
-  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, allUsers) {
-  var html = '<div class="admin-project-list">';
-  for (var i = 0; i < projectAccessList.length; i++) {
-    var p = projectAccessList[i];
-    var visClass = p.visibility === "private" ? "admin-vis-private" : "admin-vis-public";
-    html += '<div class="admin-project-item" data-slug="' + escapeHtml(p.slug) + '">';
-    html += '<div class="admin-project-info">';
-    html += '<div class="admin-project-name">' + escapeHtml(p.title) + '</div>';
-    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>';
-    html += '</select>';
-    if (p.visibility === "private") {
-      html += '<button class="admin-manage-users-btn" data-slug="' + escapeHtml(p.slug) + '">' + iconHtml("users") + '</button>';
-    }
-    html += '</div>';
-    html += '</div>';
-  }
-  html += '</div>';
-
-  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++) {
-    visSelects[j].addEventListener("change", function () {
-      var slug = this.dataset.slug;
-      var visibility = this.value;
-      setProjectVisibility(slug, visibility, body);
-    });
-  }
-
-  // Bind manage users buttons
-  var manageUserBtns = body.querySelectorAll(".admin-manage-users-btn");
-  for (var k = 0; k < manageUserBtns.length; k++) {
-    manageUserBtns[k].addEventListener("click", function () {
-      var slug = this.dataset.slug;
-      showProjectUsersModal(slug, body);
-    });
-  }
-}
-
-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) {
-      showToast("Visibility updated");
-      loadProjectsTab(body);
-    } else {
-      showToast(data.error || "Failed to update visibility");
-    }
-  }).catch(function () {
-    showToast("Failed to update visibility");
-  });
-}
-
-function showProjectUsersModal(slug, parentBody) {
-  Promise.all([
-    apiGet("/api/admin/users"),
-    apiGet("/api/admin/projects/" + slug + "/access"),
-  ]).then(function (results) {
-    var allUsers = results[0].users || [];
-    var access = results[1];
-    var allowed = access.allowedUsers || [];
-
-    var modal = document.createElement("div");
-    modal.className = "admin-modal-overlay";
-
-    var html = '<div class="admin-modal">';
-    html += '<div class="admin-modal-header">';
-    html += '<h3>Manage Access: ' + escapeHtml(slug) + '</h3>';
-    html += '<button class="admin-modal-close">' + iconHtml("x") + '</button>';
-    html += '</div>';
-    html += '<div class="admin-modal-body">';
-    html += '<p class="admin-modal-desc">Select users who can access this private project:</p>';
-
-    for (var i = 0; i < allUsers.length; i++) {
-      var u = allUsers[i];
-      if (u.role === "admin") continue;
-      var checked = allowed.indexOf(u.id) >= 0 ? " checked" : "";
-      html += '<label class="admin-user-check">';
-      html += '<input type="checkbox" value="' + u.id + '"' + checked + '>';
-      html += '<span>' + escapeHtml(u.displayName || u.username) + ' <small>' + escapeHtml(u.username) + '</small></span>';
-      html += '</label>';
-    }
-
-    html += '</div>';
-    html += '<div class="admin-modal-footer">';
-    html += '<button class="admin-modal-save">Save</button>';
-    html += '<button class="admin-modal-cancel">Cancel</button>';
-    html += '</div>';
-    html += '</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-modal-save").addEventListener("click", function () {
-      var checkboxes = modal.querySelectorAll('input[type="checkbox"]');
-      var selectedUsers = [];
-      for (var ci = 0; ci < checkboxes.length; ci++) {
-        if (checkboxes[ci].checked) selectedUsers.push(checkboxes[ci].value);
-      }
-      apiPut("/api/admin/projects/" + slug + "/users", { allowedUsers: selectedUsers }).then(function (data) {
-        if (data.ok) {
-          showToast("Project access updated");
-          modal.remove();
-          loadProjectsTab(parentBody);
-        } else {
-          showToast(data.error || "Failed to update access");
-        }
-      }).catch(function () {
-        showToast("Failed to update access");
-      });
-    });
-  }).catch(function () {
-    showToast("Failed to load project access info");
-  });
+  body.textContent = 'Loading…';
+  if (section === 'admin-users') {
+    var invitations = document.getElementById('admin-invites-body');
+    invitations.textContent = 'Loading…';
+    loadInvitesTab(invitations);
+  }
+  var loaders = { 'admin-users': loadUsersTab, 'admin-invites': loadInvitesTab, 'admin-smtp': loadSmtpTab, 'admin-projects': loadProjectsTab };
+  if (loaders[section]) loaders[section](body);
 }