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

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

@@ -0,0 +1,232 @@
+import { store } from './store.js';
+import { mountDefaultAi, unmountDefaultAi } from './default-ai.js';
+import { openUserSettings } from './user-settings.js';
+import { getProfile, saveProfileUpdates, regenerateProfileAvatar, showAvatarPositioner, uploadAvatarBlob } from './profile.js';
+import { requestCursorSharingState, setCursorSharing } from './app-cursors.js';
+import { registerTooltip } from './tooltip.js';
+
+var popover = null;
+var trigger = null;
+var lastFocus = null;
+
+function accountName() { return document.body.dataset.myDisplayName || 'Clay user'; }
+
+function close(returnFocus) {
+  if (!popover) return;
+  var aiSection = popover.querySelector('#account-ai-section');
+  if (aiSection) unmountDefaultAi(aiSection);
+  popover.remove();
+  popover = null;
+  trigger.setAttribute('aria-expanded', 'false');
+  trigger.setAttribute('aria-label', 'Open account menu for ' + accountName());
+  document.removeEventListener('pointerdown', onOutside);
+  document.removeEventListener('focusin', onFocusOutside);
+  document.removeEventListener('keydown', onKeydown);
+  window.removeEventListener('resize', position);
+  store.set({ defaultAiInlineEditing: false });
+  if (returnFocus && lastFocus && document.contains(lastFocus)) lastFocus.focus({ preventScroll: true });
+  lastFocus = null;
+}
+
+function isAvatarPositionerTarget(target) { return target && target.closest && target.closest('.avatar-positioner-overlay'); }
+function onOutside(event) { if (!popover || popover.contains(event.target) || trigger.contains(event.target) || isAvatarPositionerTarget(event.target)) return; close(false); }
+function onFocusOutside(event) { if (!popover || popover.contains(event.target) || trigger.contains(event.target) || isAvatarPositionerTarget(event.target)) return; close(false); }
+function onKeydown(event) {
+  if (event.key !== 'Escape') return;
+  if (isAvatarPositionerTarget(event.target) || document.querySelector('.avatar-positioner-overlay')) return;
+  event.preventDefault();
+  event.stopPropagation();
+  close(true);
+}
+
+function position() {
+  if (!popover || !trigger) return;
+  var rect = trigger.getBoundingClientRect();
+  var width = Math.min(280, window.innerWidth - 24);
+  var left = Math.max(12, Math.min(window.innerWidth - width - 12, rect.left));
+  popover.style.width = width + 'px';
+  popover.style.left = left + 'px';
+  popover.style.top = Math.max(12, rect.top - popover.offsetHeight - 8) + 'px';
+}
+
+function renderNameResting(restoreFocus) {
+  var section = popover && popover.querySelector('.account-identity-copy');
+  if (!section) return;
+  section.innerHTML = '<button type="button" id="account-name-edit" class="account-name-display"><span></span><i data-lucide="pencil" aria-hidden="true"></i></button><small>Personal account</small>';
+  section.querySelector('span').textContent = accountName();
+  section.querySelector('#account-name-edit').addEventListener('click', startNameEdit);
+  if (window.lucide) window.lucide.createIcons({ nodes: [section] });
+  if (restoreFocus) section.querySelector('#account-name-edit').focus();
+}
+
+function startNameEdit() {
+  var section = popover && popover.querySelector('.account-identity-copy');
+  if (!section) return;
+  var input = document.createElement('input');
+  input.id = 'account-profile-name';
+  input.setAttribute('aria-label', 'Display name');
+  input.className = 'account-name-input';
+  input.type = 'text';
+  input.maxLength = 50;
+  input.autocomplete = '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');
+  hint.textContent = 'Enter to save · Escape to cancel';
+  section.appendChild(hint);
+  input.addEventListener('keydown', function(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      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();
+      store.set({accountNameDraft:undefined});renderNameResting(true);
+    }
+    event.stopPropagation();
+  });
+  input.focus();
+  input.select();
+}
+
+function toggleAvatarEditor() {
+  var editor = popover && popover.querySelector('#account-avatar-editor');
+  if (!editor) return;
+  editor.hidden = !editor.hidden;
+  if (!editor.hidden) editor.querySelector('#account-avatar-upload').focus();
+  position();
+}
+
+function bindAvatarEditor() {
+  var avatar = popover.querySelector('#account-avatar-edit');
+  var editor = popover.querySelector('#account-avatar-editor');
+  var upload = editor.querySelector('#account-avatar-upload');
+  var file = editor.querySelector('#account-avatar-file');
+  var generate = editor.querySelector('#account-avatar-generate');
+  avatar.addEventListener('click', function(event) { event.stopPropagation(); toggleAvatarEditor(); });
+  editor.addEventListener('click', function(event) { event.stopPropagation(); });
+  upload.addEventListener('click', function() { file.click(); });
+  file.addEventListener('change', function() {
+    var selected = file.files && file.files[0];
+    if (!selected) return;
+    var image = new Image();
+    var objectUrl = URL.createObjectURL(selected);
+    image.onload = function() {
+      showAvatarPositioner(image, objectUrl, function(blob) {
+        URL.revokeObjectURL(objectUrl);
+        uploadAvatarBlob(blob).then(function() { editor.hidden = true; }).catch(function() { editor.dataset.error = 'true'; });
+      });
+    };
+    image.src = objectUrl;
+  });
+  generate.addEventListener('click', function() { regenerateProfileAvatar(); editor.hidden = true; });
+}
+
+function render() {
+  popover = document.createElement('div');
+  popover.id = 'account-popover';
+  popover.className = 'account-popover';
+  popover.setAttribute('role', 'dialog');
+  popover.setAttribute('aria-label', 'Account');
+  var profile = getProfile();
+  var identity = document.createElement('div');
+  identity.className = 'account-menu-identity';
+  identity.innerHTML = '<button type="button" id="account-avatar-edit" class="account-avatar-edit" aria-label="Edit avatar"><img src="' + (document.body.dataset.myAvatarUrl || '') + '" alt=""></button><div class="account-identity-copy"></div><button type="button" class="account-settings-button" aria-label="User Settings" title="User Settings"><i data-lucide="settings" aria-hidden="true"></i></button>';
+  identity.querySelector('#account-avatar-edit img').alt = profile.name || 'Clay user';
+  var editor = document.createElement('div');
+  editor.id = 'account-avatar-editor';
+  editor.className = 'account-avatar-editor';
+  editor.hidden = true;
+  editor.innerHTML = '<button type="button" id="account-avatar-upload">Upload photo</button><button type="button" id="account-avatar-generate">Generate avatar</button><input id="account-avatar-file" type="file" accept="image/*">';
+  popover.appendChild(identity);
+  popover.appendChild(editor);
+  var aiSection = document.createElement('section');
+  aiSection.id = 'account-ai-section';
+  aiSection.className = 'account-inline-section account-ai-section';
+  aiSection.setAttribute('aria-label', 'Default AI');
+  popover.appendChild(aiSection);
+  mountDefaultAi(aiSection);
+  identity.querySelector('.account-settings-button').addEventListener('click', onSettings);
+  document.body.appendChild(popover);
+  renderNameResting();
+  bindAvatarEditor();
+  updateCursorAction();
+  if (window.lucide) window.lucide.createIcons({ nodes: [popover] });
+  position();
+}
+
+function updateCursorAction() {
+  var button = document.getElementById('cursor-share-toggle');
+  if (!button) return;
+  var hydrated = store.get('cursorSharingHydrated') === true;
+  var enabled = hydrated && store.get('cursorSharingEnabled') === true;
+  var pending = store.get('cursorSharingPending') !== null && store.get('cursorSharingPending') !== undefined;
+  var connected = store.get('connected') !== false;
+  var error = store.get('cursorSharingError');
+  var canRetry = !!error && !hydrated && connected;
+  var showOff = hydrated && !enabled && !pending && !error && connected;
+  button.hidden = store.get('isMultiUserMode') !== true;
+  button.removeAttribute('role');
+  button.removeAttribute('aria-checked');
+  button.setAttribute('aria-pressed', enabled ? 'true' : 'false');
+  button.classList.toggle('on', enabled);
+  button.classList.toggle('off', showOff);
+  button.classList.toggle('pending', pending);
+  button.disabled = pending || !connected || (!hydrated && !canRetry);
+  var stateLabel = pending ? 'waiting' : !connected ? 'offline' : error ? (canRetry ? 'error; activate to retry' : 'error') : !hydrated ? 'unavailable' : enabled ? 'on' : 'off';
+  button.setAttribute('aria-label', 'Cursor sharing ' + stateLabel);
+  var tooltipText = pending ? 'Cursor sharing is waiting for confirmation.' : !connected ? 'Cursor sharing is offline.' : error ? (canRetry ? 'Cursor sharing is unavailable. Click to retry.' : 'Cursor sharing is unavailable.') : !hydrated ? 'Cursor sharing is unavailable.' : enabled ? 'Your cursor is visible to others. Click to stop sharing.' : 'Cursor sharing is off. Click to share your cursor.';
+  registerTooltip(button, tooltipText);
+}
+
+function onSettings(event) { event.stopPropagation(); close(true); openUserSettings(); }
+function onCursorAction(event) {
+  event.stopPropagation();
+  if (event.currentTarget.disabled) return;
+  if (store.get('cursorSharingError') && store.get('cursorSharingHydrated') !== true) {
+    requestCursorSharingState();
+    return;
+  }
+  setCursorSharing(!(store.get('cursorSharingEnabled') === true));
+}
+function focusAi() { var control = popover && popover.querySelector('#account-ai-section select'); if (control) control.focus({ preventScroll: true }); }
+function onOpenDefaultAi() { if (!popover) open(); store.set({ defaultAiInlineEditing: true }); focusAi(); }
+
+function open() {
+  if (popover) { close(true); return; }
+  lastFocus = document.activeElement;
+  render();
+  trigger.setAttribute('aria-expanded', 'true');
+  trigger.setAttribute('aria-label', 'Close account menu for ' + accountName());
+  document.addEventListener('pointerdown', onOutside);
+  document.addEventListener('focusin', onFocusOutside);
+  document.addEventListener('keydown', onKeydown);
+  window.addEventListener('resize', position);
+}
+
+export function initAccountIsland() {
+  trigger = document.getElementById('user-account-trigger');
+  if (!trigger) return;
+  trigger.addEventListener('click', open);
+  document.addEventListener('clay:open-account-default-ai', onOpenDefaultAi);
+  var cursorToggle = document.getElementById('cursor-share-toggle');
+  if (cursorToggle) cursorToggle.addEventListener('click', onCursorAction);
+  updateCursorAction();
+  trigger.setAttribute('aria-label', 'Open account menu for ' + accountName());
+  store.subscribe(function(state, previous) {
+    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();
+  });
+  document.addEventListener('clay:profile-updated', function() {
+    if (!popover) return;
+    var identityName = popover.querySelector('.account-name-display span');
+    if (identityName) identityName.textContent = accountName();
+    var avatar = popover.querySelector('#account-avatar-edit img');
+    if (avatar) avatar.src = document.body.dataset.myAvatarUrl || avatar.src;
+  });
+  window.addEventListener('resize', 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";
+    });
+  });
+}