clay-server 5.1.0-beta.2 → 5.1.0

package/lib/public/modules/account-island.js

@@ -1,7 +1,7 @@
 import { store } from './store.js';
 import { mountDefaultAi, unmountDefaultAi } from './default-ai.js';
 import { openUserSettings } from './user-settings.js';
-import { getProfile, updateProfileName, regenerateProfileAvatar, showAvatarPositioner, uploadAvatarBlob } from './profile.js';
+import { getProfile, saveProfileUpdates, regenerateProfileAvatar, showAvatarPositioner, uploadAvatarBlob } from './profile.js';
 import { requestCursorSharingState, setCursorSharing } from './app-cursors.js';
 import { registerTooltip } from './tooltip.js';
 
@@ -69,7 +69,8 @@ function startNameEdit() {
   input.type = 'text';
   input.maxLength = 50;
   input.autocomplete = 'name';
-  input.value = getProfile().name || '';
+  input.value = store.get('accountNameDraft') === undefined ? getProfile().name || '' : store.get('accountNameDraft');
+  input.addEventListener('input',function(){store.set({accountNameDraft:input.value});});
   section.innerHTML = '';
   section.appendChild(input);
   var hint = document.createElement('small');
@@ -78,11 +79,11 @@ function startNameEdit() {
   input.addEventListener('keydown', function(event) {
     if (event.key === 'Enter') {
       event.preventDefault();
-      updateProfileName(input.value);
-      renderNameResting(true);
+      input.disabled=true;hint.textContent='Saving…';
+      saveProfileUpdates({name:input.value.trim()}).then(function(){store.set({accountNameDraft:undefined});renderNameResting(true);}).catch(function(error){input.disabled=false;hint.textContent=error.message;input.focus();});
     } else if (event.key === 'Escape') {
       event.preventDefault();
-      renderNameResting(true);
+      store.set({accountNameDraft:undefined});renderNameResting(true);
     }
     event.stopPropagation();
   });
@@ -180,7 +181,7 @@ function updateCursorAction() {
   registerTooltip(button, tooltipText);
 }
 
-function onSettings(event) { event.stopPropagation(); close(false); openUserSettings(); }
+function onSettings(event) { event.stopPropagation(); close(true); openUserSettings(); }
 function onCursorAction(event) {
   event.stopPropagation();
   if (event.currentTarget.disabled) return;
@@ -215,7 +216,8 @@ export function initAccountIsland() {
   updateCursorAction();
   trigger.setAttribute('aria-label', 'Open account menu for ' + accountName());
   store.subscribe(function(state, previous) {
-    if (state.myUserId !== previous.myUserId || state.connected === false) close(false);
+    if(state.myUserId !== previous.myUserId && state.accountNameDraft!==undefined)store.set({accountNameDraft:undefined});
+    if (state.myUserId !== previous.myUserId || state.connected === false && previous.connected !== false) close(false);
     updateCursorAction();
     if (popover) position();
   });

package/lib/public/modules/admin-settings-email.js

@@ -0,0 +1,197 @@
+import { store } from './store.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { showToast, copyToClipboard, escapeHtml } from './utils.js';
+import { apiGet, apiPost, apiPut, apiDelete, showConfirmDialog, showConfirmResetPin, prepareAdminModal } from './admin-settings-ui.js';
+import { setSettingsDraft, clearSettingsDraft } from './server-settings-state.js';
+// --- SMTP Configuration ---
+export function loadSmtpTab(body) {
+  apiGet("/api/admin/smtp").then(function (data) {
+    if (!(store.get('serverSettingsDrafts') || {}).smtp) renderSmtpOverview(body, data.smtp);
+  }).catch(function () {
+    body.innerHTML = '<div class="admin-error">Failed to load SMTP settings</div>';
+  });
+}
+
+function renderSmtpOverview(body, cfg, focus) {
+  var configured = !!(cfg && cfg.host);
+  clearSettingsDraft('smtp');
+  body.oninput = null;
+  body.onchange = null;
+  var html = '<div class="settings-section-heading"><h3>Configuration</h3><button type="button" class="settings-btn-sm" id="smtp-edit">Edit</button></div>';
+  html += '<p class="settings-hint">' + (configured ? 'SMTP configured. New email deliveries use the saved configuration.' : 'SMTP is not configured. Users sign in with a PIN. Choose Edit to set up email delivery.') + '</p>';
+  if (configured) {
+    var fields = [
+      ['SMTP host', cfg.host], ['Port', String(cfg.port || 587)],
+      ['Connection', cfg.secure ? 'Direct TLS/SSL' : 'STARTTLS'],
+      ['Username', cfg.user || '—'], ['Password', cfg.pass ? 'Configured · hidden' : 'Not configured'],
+      ['From address', cfg.from || '—'], ['Email login', cfg.emailLoginEnabled ? 'Enabled' : 'Disabled']
+    ];
+    html += '<dl class="settings-summary">';
+    fields.forEach(function (field) {
+      html += '<div class="settings-field-row"><dt class="settings-label">' + escapeHtml(field[0]) + '</dt><dd class="settings-value">' + escapeHtml(field[1]) + '</dd></div>';
+    });
+    html += '</dl><p class="settings-hint">Configuration is saved; delivery is not verified here. Edit to change settings or send a test email.</p>';
+  }
+  body.innerHTML = html;
+  var edit = body.querySelector('#smtp-edit');
+  edit.onclick = function () { renderSmtpTab(body, cfg); body.querySelector('#smtp-host').focus(); };
+  if (focus) edit.focus();
+}
+
+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. New email deliveries use the saved configuration.</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 for="smtp-host">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 for="smtp-port">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 for="smtp-secure">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 for="smtp-user">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 for="smtp-pass">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 for="smtp-from">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 for="smtp-email-login">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 type="button" class="admin-action-btn admin-action-btn-secondary" id="smtp-cancel">Cancel</button>';
+  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") + ' Send test email</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;
+  clearSettingsDraft('smtp');
+  body.oninput = function () { setSettingsDraft('smtp', true); };
+  body.onchange = function () { setSettingsDraft('smtp', true); };
+  refreshIcons(body);
+
+  var errorEl = body.querySelector("#smtp-error");
+  body.querySelector('#smtp-cancel').onclick = function () {
+    if (body.querySelector('#smtp-save').disabled) return;
+    function cancel() { renderSmtpOverview(body, cfg, true); }
+    if ((store.get('serverSettingsDrafts') || {}).smtp) showConfirmDialog('Discard your unsaved email delivery changes?', 'Discard changes', cancel);
+    else cancel();
+  };
+
+  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;
+    body.querySelectorAll("input").forEach(function (input) { input.disabled = true; });
+    errorEl.textContent = "";
+    errorEl.className = "admin-smtp-error";
+    apiPost("/api/admin/smtp", formData).then(function (data) {
+      if (data.ok) {
+        clearSettingsDraft("smtp");
+        showToast("SMTP settings saved. New email deliveries use this configuration.");
+        renderSmtpOverview(body, Object.assign({}, formData, { pass: '••••••••' }), true);
+      } else {
+        errorEl.textContent = data.error || "Failed to save";
+        errorEl.className = "admin-smtp-error admin-smtp-error-visible";
+        btn.disabled = false;
+        body.querySelectorAll("input").forEach(function (input) { input.disabled = input.id === "smtp-email-login" && !hasConfig; });
+      }
+    }).catch(function () {
+      errorEl.textContent = "Failed to save settings";
+      errorEl.className = "admin-smtp-error admin-smtp-error-visible";
+      btn.disabled = false;
+      body.querySelectorAll("input").forEach(function (input) { input.disabled = input.id === "smtp-email-login" && !hasConfig; });
+    });
+  });
+
+  // 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 (data) {
+          if (!data.ok) throw new Error(data.error || "Could not remove SMTP configuration");
+          showToast("SMTP configuration removed");
+          renderSmtpOverview(body, null, true);
+        }).catch(function (error) { errorEl.textContent = error.message; errorEl.className = "admin-smtp-error admin-smtp-error-visible"; });
+      });
+    });
+  }
+}

package/lib/public/modules/admin-settings-invitations.js

@@ -0,0 +1,183 @@
+import { store } from './store.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { showToast, copyToClipboard, escapeHtml } from './utils.js';
+import { apiGet, apiPost, apiPut, apiDelete, showConfirmDialog, showConfirmResetPin, prepareAdminModal } from './admin-settings-ui.js';
+// --- Invites ---
+export function loadInvitesTab(body) {
+  apiGet("/api/admin/invites").then(function (data) {
+    store.set({ adminInvites: (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 = store.get('adminMe') && store.get('adminMe').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 (store.get('adminInvites').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 < store.get('adminInvites').length; i++) {
+      var inv = store.get('adminInvites')[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);
+  prepareAdminModal(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";
+    });
+  });
+}

package/lib/public/modules/admin-settings-projects.js

@@ -0,0 +1,198 @@
+import { store } from './store.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { showToast, copyToClipboard, escapeHtml } from './utils.js';
+import { apiGet, apiPost, apiPut, apiDelete, showConfirmDialog, showConfirmResetPin, prepareAdminModal } from './admin-settings-ui.js';
+// --- Projects ---
+export function loadProjectsTab(body) {
+  var projectList = store.get('projectsHubList') || [];
+  // Exclude worktree and mate projects (mates are always private to their owner)
+  projectList = projectList.filter(function (p) { return !p.isWorktree && !p.isMate; });
+
+
+  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 || [] };
+    });
+  });
+
+  Promise.all([
+    Promise.all(accessPromises),
+    apiGet("/api/admin/users"),
+  ]).then(function (results) {
+    renderProjectsTab(body, results[0], results[1].users || []);
+  }).catch(function (error) { body.textContent = error.message || "Project access unavailable. Reopen Settings to retry."; });
+}
+
+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 aria-label="Project owner" 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 aria-label="Project visibility" 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 aria-label="Manage allowed users" 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].dataset.savedValue = ownerSelects[oi].value;
+    ownerSelects[oi].addEventListener("change", function () {
+      var slug = this.dataset.slug;
+      var userId = this.value;
+      this.value = this.dataset.savedValue; this.dispatchEvent(new Event("settings-sync"));
+      showConfirmDialog("Transfer project ownership? New processes will use the selected owner’s identity where OS-user mode is enabled.", "Transfer ownership", function () { setProjectOwner(slug, userId, body); });
+    });
+  }
+
+  // Bind visibility selects
+  var visSelects = body.querySelectorAll(".admin-vis-select");
+  for (var j = 0; j < visSelects.length; j++) {
+    visSelects[j].dataset.savedValue = visSelects[j].value;
+    visSelects[j].addEventListener("change", function () {
+      var slug = this.dataset.slug;
+      var visibility = this.value;
+      this.value = this.dataset.savedValue; this.dispatchEvent(new Event("settings-sync"));
+      showConfirmDialog("Change project visibility to " + visibility + "? This changes who can access this project.", "Change visibility", function () { 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);
+  prepareAdminModal(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");
+  });
+}