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

package/lib/public/modules/tool-palette-order.js

@@ -33,13 +33,14 @@ var MATE_TOOLS = [
   { id: "mate-memory-btn",       icon: "brain",          label: "Memory",          countId: "mate-memory-count" },
   { id: "mate-knowledge-btn",    icon: "book-open",      label: "Knowledge",       countId: "mate-knowledge-count" },
   { id: "mate-sticky-notes-btn", icon: "sticky-note",    label: "Sticky Notes" },
-  { id: "mate-debate-btn",       icon: "mic",            label: "Debate" },
+  { id: "mate-debates-btn",      icon: "messages-square", label: "Debates" },
   { id: "mate-mcp-btn",          icon: "cable",          label: "MCP / Skills",     countId: "mate-mcp-sidebar-count" },
 ];
 
 export var PALETTES = {
   session: {
     tools: SESSION_TOOLS,
+    fixedTools: [{ id: "you-button", icon: "user-round", label: "Me", countId: "me-unread-badge", fixed: true, scope: "clay" }],
     activeContainerId: "session-actions",
     hiddenSectionId: "session-actions-hidden",
   },
@@ -57,13 +58,13 @@ export var PALETTES = {
 //
 // Skills now shares the MCP / Skills entry; explicit MCP placement wins.
 var LEGACY_SESSION_TOOL_IDS = { "skills-btn": "mcp-btn" };
-var LEGACY_MATE_TOOL_IDS = { "mate-skills-btn": "mate-mcp-btn" };
+var LEGACY_MATE_TOOL_IDS = { "mate-skills-btn": "mate-mcp-btn", "mate-debate-btn": "mate-debates-btn" };
 
 // Tools withdrawn from the session palette with no replacement. Git moved to
 // the always-visible repository placard below the tool strip, so it no longer
 // consumes an icon slot. A saved preference naming it is dropped rather than
 // left to linger in stored order forever.
-var RETIRED_SESSION_TOOL_IDS = ["git-sidebar-btn", "loop-tool-btn"];
+var RETIRED_SESSION_TOOL_IDS = ["git-sidebar-btn", "loop-tool-btn", "debates-btn"];
 
 function indexOfId(list, id) {
   for (var i = 0; i < list.length; i++) {

package/lib/public/modules/tool-palette.js

@@ -37,6 +37,8 @@ function buildPalette(name) {
   var active = document.getElementById(palette.activeContainerId);
   if (!active) return;
 
+  (palette.fixedTools || []).forEach(function (tool) { active.appendChild(buildToolButton(tool, name)); });
+
   // Create buttons with stable IDs and append in registry order (default).
   for (var i = 0; i < palette.tools.length; i++) {
     active.appendChild(buildToolButton(palette.tools[i], name));
@@ -73,8 +75,11 @@ function buildToolButton(tool, paletteName) {
   btn.setAttribute('aria-label', tool.label);
   btn.dataset.toolId = tool.id;
   btn.dataset.palette = paletteName;
-  // Draggable at all times so users can reorder in place.
+  // Ordinary tools can be reordered; fixed tools retain their first slots.
   btn.draggable = true;
+  if (tool.fixed) { btn.draggable = false; btn.dataset.fixed = 'true'; }
+  if (tool.scope) btn.dataset.scope = tool.scope;
+  if (tool.id === 'you-button') { btn.classList.add('you-button'); btn.setAttribute('aria-pressed', 'false'); }
 
   var icon = document.createElement('i');
   icon.setAttribute('data-lucide', tool.icon);
@@ -89,10 +94,12 @@ function buildToolButton(tool, paletteName) {
     var count = document.createElement('span');
     count.id = tool.countId;
     count.className = 'sidebar-badge hidden';
+    if (tool.id === 'you-button') { count.className = 'sidebar-badge me-unread-badge'; count.hidden = true; }
     btn.appendChild(count);
   }
 
   btn.addEventListener('dragstart', function (e) {
+    if (tool.fixed) { e.preventDefault(); return; }
     var container = btn.parentNode;
     if (!container || container.id !== PALETTES[paletteName].activeContainerId) {
       e.preventDefault();
@@ -122,6 +129,7 @@ function getDragAfterElement(container, x, y) {
   var closest = null;
   var closestDist = Number.POSITIVE_INFINITY;
   for (var i = 0; i < tiles.length; i++) {
+    if (tiles[i].dataset.fixed === 'true') continue;
     var rect = tiles[i].getBoundingClientRect();
     // Pointer is "before" the tile if it's left of the tile's horizontal
     // midpoint on the same row (or on a higher row).
@@ -164,7 +172,7 @@ function applyPreferences(name, prefs) {
   function place(id) {
     if (placed[id]) return;
     var btn = document.getElementById(id);
-    if (!btn) return;
+    if (!btn || btn.dataset.fixed === 'true') return;
     active.appendChild(btn);
     placed[id] = true;
   }
@@ -201,7 +209,9 @@ function savePreferences(name) {
 
   var order = [];
   var activeTiles = active.querySelectorAll('[data-tool-id]');
-  for (var i = 0; i < activeTiles.length; i++) order.push(activeTiles[i].dataset.toolId);
+  for (var i = 0; i < activeTiles.length; i++) {
+    if (activeTiles[i].dataset.fixed !== 'true') order.push(activeTiles[i].dataset.toolId);
+  }
 
   // Every tool is visible, so the explicit order is the whole preference.
   fetch('/api/user/tool-palettes', {

package/lib/public/modules/tools.js

@@ -11,6 +11,7 @@ import { VENDOR_NAMES } from './app-rendering.js';
 import { startThinkingSegment, appendThinkingText, stopThinkingSegment, resetThinkingTurn, clearThinkingState, saveThinkingState, restoreThinkingState, updateThinkingTokenEstimate } from './thinking-lifecycle.js';
 import { buildElicitationCard, markElicitationCard, showElicitationError } from './elicitation-form.js';
 import { findAskUserCard, getAskUserRequestKey, hasAskUserRequest, rememberAskUserRequest, markAskUserRequestAnswered, saveAskUserState, restoreAskUserState, resetAskUserState } from './ask-user-state.js';
+import { getProjectAssistantPlaceholder, resolveProjectAssistantIdentity, applyProjectAssistantIdentity } from './project-chat-identity.js';
 
 var ctx;
 
@@ -142,11 +143,11 @@ function updateToolGroupHeader(group) {
     refreshIcons();
   }
 
-  // Show group header only when 2+ visible tools (or always in mate DM)
+  // Show group header only when 2+ visible tools (or always in a Mate conversation)
   var header = group.el.querySelector(".tool-group-header");
   var isMate = group.el.classList.contains("mate-tool-group");
   if (isMate) {
-    // Mate DM: hide entire group when no tools, show collapsed when tools exist
+    // Mate conversation: hide entire group when no tools, show collapsed when tools exist
     if (group.toolCount === 0) {
       group.el.style.display = "none";
     } else {
@@ -248,12 +249,13 @@ export function renderAskUserQuestion(toolId, input) {
   container.dataset.askUserRequestKey = requestKey;
   rememberAskUserRequest(toolId);
 
-  // Mate DM: wrap in avatar + content layout (same as msg-assistant)
+  // Mate conversation: wrap in avatar + content layout (same as msg-assistant)
   var mateContentWrap = null;
-  if (ctx.isMateDm && ctx.isMateDm()) {
+  if (resolveProjectAssistantIdentity().kind === 'mate') {
     container.classList.add("mate-ask-user");
-    var mateName = ctx.getMateName();
-    var mateAvatar = ctx.getMateAvatarUrl();
+    var identity = resolveProjectAssistantIdentity();
+    var mateName = identity.name;
+    var mateAvatar = identity.avatarUrl;
 
     var avi = document.createElement("img");
     avi.className = "dm-bubble-avatar";
@@ -393,7 +395,7 @@ export function renderAskUserQuestion(toolId, input) {
   actions.appendChild(skipBtn);
   container.appendChild(actions);
 
-  // Mate DM: move all content into the bubble content wrapper
+  // Mate conversation: move all content into the bubble content wrapper
   if (mateContentWrap) {
     var children = [];
     for (var ci = 0; ci < container.childNodes.length; ci++) {
@@ -420,12 +422,7 @@ export function disableMainInput() {
 
 export function enableMainInput() {
   ctx.inputEl.disabled = false;
-  if (document.body.classList.contains("mate-dm-active") && document.body.dataset.mateName) {
-    ctx.inputEl.placeholder = "Message " + document.body.dataset.mateName + "...";
-  } else {
-    var _v = store.get('currentVendor') || "claude";
-    ctx.inputEl.placeholder = "Message " + (VENDOR_NAMES[_v] || VENDOR_NAMES.claude) + "...";
-  }
+  ctx.inputEl.placeholder = getProjectAssistantPlaceholder(store.snap(), store.get('currentVendor'));
 }
 
 function submitAskUserAnswer(container, toolId, questions, answers, multiSelections) {
@@ -557,8 +554,8 @@ export function renderPermissionRequest(requestId, toolName, toolInput, decision
     return;
   }
 
-  // Channel layout or Mate DM: conversational "Can I ...?" style
-  if ((ctx.isMateDm && ctx.isMateDm()) || getChatLayout() === "channel") {
+  // Channel layout or Mate conversation: conversational "Can I ...?" style
+  if (resolveProjectAssistantIdentity().kind === "mate" || getChatLayout() === "channel") {
     renderConversationalPermission(requestId, toolName, toolInput, mateId, vendor);
     applyPermissionHints(pendingPermissions[requestId], hints);
     return;
@@ -824,10 +821,11 @@ function matePermissionInfo(toolName, toolInput) {
 }
 
 function resolvePermissionIdentity(mateId, vendor) {
-  // Mate DM: use DM target mate info
-  if (ctx.isMateDm && ctx.isMateDm()) {
-    var name = ctx.getMateName();
-    var avatar = ctx.getMateAvatarUrl();
+  // Use the Mate bound to this session, including legacy DM targets.
+  if (resolveProjectAssistantIdentity().kind === 'mate') {
+    var identity = resolveProjectAssistantIdentity();
+    var name = identity.name;
+    var avatar = identity.avatarUrl;
     // Override if specific mateId provided (e.g. @mention)
     if (mateId && ctx.getMateById) {
       var mentionMate = ctx.getMateById(mateId);
@@ -1577,7 +1575,7 @@ function updateTodoSticky() {
 export function startThinking() {
   ctx.finalizeAssistantBlock();
   var el = startThinkingSegment();
-  if (!ctx.isMateDm()) {
+  if (resolveProjectAssistantIdentity().kind !== 'mate') {
     ctx.setActivity("thinking");
   }
   return el;
@@ -1605,7 +1603,8 @@ export function createToolItem(id, name) {
     toolGroupCounter++;
     var groupEl = document.createElement("div");
     groupEl.className = "tool-group";
-    var isMateToolGroup = ctx.isMateDm();
+    var identity = resolveProjectAssistantIdentity();
+    var isMateToolGroup = identity.kind === 'mate';
     if (isMateToolGroup) groupEl.classList.add("mate-tool-group");
     groupEl.dataset.groupId = "g" + toolGroupCounter;
 
@@ -1619,7 +1618,7 @@ export function createToolItem(id, name) {
       '<div class="tool-group-items"></div>';
 
     if (isMateToolGroup) {
-      var mateAvatar = ctx.getMateAvatarUrl();
+      var mateAvatar = identity.avatarUrl;
       groupEl.innerHTML =
         '<img class="dm-bubble-avatar dm-bubble-avatar-mate" src="' + escapeHtml(mateAvatar) + '" alt="">' +
         '<div class="dm-bubble-content">' + toolGroupInner + '</div>';
@@ -1627,6 +1626,7 @@ export function createToolItem(id, name) {
       groupEl.innerHTML = toolGroupInner;
     }
 
+    applyProjectAssistantIdentity(groupEl, identity);
     groupEl.querySelector(".tool-group-header").addEventListener("click", function () {
       groupEl.classList.toggle("collapsed");
       if (currentToolGroup) currentToolGroup.userToggled = true;

package/lib/public/modules/user-settings-account.js

@@ -0,0 +1,318 @@
+import { refreshIcons } from './icons.js';
+import { confirmSettingsAction as showConfirmDialog } from './server-settings-state.js';
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { showToast } from './utils.js';
+import { getChatLayout, setChatLayout } from './theme.js';
+import { applyTerminalFont } from './terminal-prefs.js';
+import { userAvatarUrl } from './avatar.js';
+import { syncCapsulePreference } from './capsule-preference.js';
+import { getEmailAccountListCache } from './context-sources.js';
+function applyProjectMateDmsClass(enabled) { document.body.classList.toggle('project-mate-dms-disabled', !enabled); }
+export function showPinForm() {
+  var pinForm = document.getElementById('us-pin-form');
+  if (!pinForm) return;
+  if(!pinForm.classList.contains('hidden'))return;
+  pinForm.classList.remove('hidden');
+  var pinCurrentRow = document.getElementById('us-pin-current-row');
+  var pinInput = document.getElementById('us-pin-input');
+  var pinConfirmInput = document.getElementById('us-pin-confirm-input');
+  var pinCurrentInput = document.getElementById('us-pin-current-input');
+  var pinSave = document.getElementById('us-pin-save');
+  var pinMsg = document.getElementById('us-pin-msg');
+  var pinFormTitle = document.getElementById('us-pin-form-title');
+  if (pinFormTitle) {
+    pinFormTitle.textContent = store.get('userPinEnabled') ? 'Change PIN' : 'Set PIN';
+  }
+  if (pinCurrentRow) {
+    pinCurrentRow.classList.toggle('hidden', !store.get('userPinEnabled'));
+  }
+  if (pinInput) {
+    pinInput.value = '';
+  }
+  if (pinConfirmInput) pinConfirmInput.value = '';
+  if (pinCurrentInput) pinCurrentInput.value = '';
+  if (pinSave) pinSave.disabled = true;
+  if (pinSave) pinSave.textContent = 'Save';
+  if (pinMsg) {
+    pinMsg.textContent = '';
+    pinMsg.className = 'settings-hint settings-pin-error hidden';
+  }
+  if (store.get('userPinEnabled') && pinCurrentInput) {
+    pinCurrentInput.focus();
+  } else if (pinInput) {
+    pinInput.focus();
+  }
+}
+
+export function hidePinForm(force) {
+  var fields = document.querySelectorAll('#us-pin-form input');
+  if (!force && Array.from(fields).some(function (input) {return !!input.value;})) {
+    showConfirmDialog('Discard the unsaved PIN change?', 'Discard', function () {hidePinForm(true);});return;
+  }
+  var pinForm = document.getElementById('us-pin-form');
+  if (!pinForm) return;
+  pinForm.classList.add('hidden');
+  var pinCurrentRow = document.getElementById('us-pin-current-row');
+  var pinInput = document.getElementById('us-pin-input');
+  var pinConfirmInput = document.getElementById('us-pin-confirm-input');
+  var pinCurrentInput = document.getElementById('us-pin-current-input');
+  var pinSave = document.getElementById('us-pin-save');
+  var pinMsg = document.getElementById('us-pin-msg');
+  if (pinCurrentRow) {
+    pinCurrentRow.classList.remove('hidden');
+  }
+  if (pinInput) pinInput.value = '';
+  if (pinConfirmInput) pinConfirmInput.value = '';
+  if (pinCurrentInput) pinCurrentInput.value = '';
+  if (pinSave) pinSave.disabled = true;
+  if (pinSave) pinSave.textContent = 'Save';
+  if (pinMsg) {
+    pinMsg.textContent = '';
+    pinMsg.className = 'settings-hint settings-pin-error hidden';
+  }
+}
+
+// --- Account population ---
+
+export function populateAccount() {
+  fetch('/api/profile').then(function (r) {
+    if (!r.ok) return null;
+    return r.json();
+  }).then(function (data) {
+    if (!data) return;
+    var displayName = data.name || data.displayName || data.username || 'Clay User';
+    var avatarImg = document.getElementById('us-account-avatar-img');
+    var avatarFallback = document.getElementById('us-account-avatar-fallback');
+    var accountName = document.getElementById('us-account-name');
+    var accountSubline = document.getElementById('us-account-subline');
+    var langSelect = document.getElementById('us-lang-select');
+    var pinSetBtnEl = document.getElementById('us-pin-set-btn');
+    var pinFormTitle = document.getElementById('us-pin-form-title');
+    if (accountName) {
+      accountName.textContent = displayName;
+    }
+    if (accountSubline) {
+      var parts = [];
+      if (data.username) parts.push('@' + data.username);
+      if (data.role) parts.push(data.role.charAt(0).toUpperCase() + data.role.slice(1));
+      accountSubline.textContent = parts.length ? parts.join(' · ') : 'Local profile';
+    }
+    store.set({userPinEnabled:!!data.pinEnabled});
+    if (pinSetBtnEl) {
+      pinSetBtnEl.textContent = store.get('userPinEnabled') ? 'Change PIN' : 'Set PIN';
+    }
+    if (pinFormTitle) {
+      pinFormTitle.textContent = store.get('userPinEnabled') ? 'Change PIN' : 'Set PIN';
+    }
+    if (langSelect) {
+      langSelect.value = store.get('speechLang') || 'en-US';
+      langSelect.dispatchEvent(new Event('settings-sync'));
+    }
+    if (avatarImg && avatarFallback) {
+      var avatarUrl = getCurrentUserAvatarSrc(data);
+      avatarImg.alt = displayName;
+      avatarImg.classList.remove('hidden');
+      avatarFallback.classList.remove('hidden');
+      avatarFallback.textContent = avatarInitials(displayName);
+      avatarImg.onload = function () {
+        avatarFallback.classList.add('hidden');
+      };
+      avatarImg.onerror = function () {
+        avatarFallback.classList.remove('hidden');
+      };
+      avatarImg.src = avatarUrl;
+      if (avatarImg.complete && avatarImg.naturalWidth > 0) {
+        avatarFallback.classList.add('hidden');
+      }
+    }
+    // Hide account section in single-user mode (no username)
+    var accountNav = document.getElementById('user-settings').querySelector('[data-section="us-account"]');
+    if (accountNav) accountNav.style.display = '';
+    if (pinSetBtnEl) pinSetBtnEl.disabled = !data.username;
+    document.getElementById('us-claude-allow-save').disabled=!data.username;
+    if(!data.username)document.getElementById('us-claude-allow-status').textContent='Personal command rules require a signed-in account.';
+    // Terminal font: seed in-memory prefs from server. Header-mounted
+    // controls (header-tui-font.js) listen to applyTerminalFont and
+    // sync their UI - we don't touch any DOM here.
+    if (data.terminalFont && typeof data.terminalFont === "object") {
+      applyTerminalFont(data.terminalFont.family, data.terminalFont.size);
+    }
+    // Auto-continue toggle
+    var acToggle = document.getElementById('us-auto-continue');
+    if (acToggle) acToggle.checked = !!data.autoContinueOnRateLimit;
+    // Theme picker self-syncs active selection via theme.js's applyTheme
+    // change callbacks (updatePickerActive). Nothing to do here.
+    // Layout switcher: sync from server response
+    // Sync mate onboarding state from server
+    if (data.mateOnboardingShown) {
+      store.set({mateOnboardingShown:true});
+    }
+    // Keep project Mate DM shortcuts available for legacy profiles too.
+    var matesOn = true;
+    var matesToggle = document.getElementById('us-mates-enabled');
+    if (matesToggle) matesToggle.checked = matesOn;
+    store.set({ projectMateDmsEnabled: matesOn });
+    applyProjectMateDmsClass(matesOn);
+    syncCapsulePreference(data.capsulesEnabled === true);
+    if (data.chatLayout) {
+      setChatLayout(data.chatLayout); // update local cache + CSS
+    }
+    var lSwitcher = document.getElementById('us-layout-switcher');
+    if (lSwitcher) {
+      var currentLayout = getChatLayout();
+      var lBtns = lSwitcher.querySelectorAll('.layout-option');
+      for (var li = 0; li < lBtns.length; li++) {
+        lBtns[li].classList.toggle('selected', lBtns[li].dataset.layout === currentLayout);
+      }
+    }
+    store.set({userSettingsProfile:data});
+  }).catch(function () {showToast('Could not load your settings. Close and reopen to retry.');});
+}
+
+function avatarInitials(value) {
+  var text = (value || '').trim();
+  if (!text) return '?';
+  var parts = text.split(/\s+/);
+  var first = parts[0].charAt(0);
+  var second = parts.length > 1 ? parts[1].charAt(0) : parts[0].charAt(1);
+  var out = first + (second || '');
+  return out.toUpperCase();
+}
+
+function getCurrentUserAvatarSrc(data) {
+  var islandAvatar = document.querySelector('.user-island-avatar img');
+  if (islandAvatar && islandAvatar.src) return islandAvatar.src;
+  if (data && data.avatarCustom) return data.avatarCustom;
+  return userAvatarUrl(data, 96);
+}
+
+export function savePin(pin) {
+  var pinInput = document.getElementById('us-pin-input');
+  var pinConfirmInput = document.getElementById('us-pin-confirm-input');
+  var pinCurrentInput = document.getElementById('us-pin-current-input');
+  var pinSave = document.getElementById('us-pin-save');
+  var pinMsg = document.getElementById('us-pin-msg');
+  var currentPin = pinCurrentInput ? pinCurrentInput.value.trim() : '';
+  var confirmPin = pinConfirmInput ? pinConfirmInput.value.trim() : '';
+  var newPin = pinInput ? pinInput.value.trim() : '';
+
+  if (!/^\d{6}$/.test(newPin)) {
+    if (pinMsg) {
+      pinMsg.textContent = 'PIN must be exactly 6 digits.';
+      pinMsg.className = 'settings-hint settings-pin-error us-pin-msg-err';
+      pinMsg.classList.remove('hidden');
+    }
+    return;
+  }
+  if (confirmPin !== newPin) {
+    if (pinMsg) {
+      pinMsg.textContent = 'PINs do not match.';
+      pinMsg.className = 'settings-hint settings-pin-error us-pin-msg-err';
+      pinMsg.classList.remove('hidden');
+    }
+    return;
+  }
+  if (store.get('userPinEnabled') && !/^\d{6}$/.test(currentPin)) {
+    if (pinMsg) {
+      pinMsg.textContent = 'Current PIN is required.';
+      pinMsg.className = 'settings-hint settings-pin-error us-pin-msg-err';
+      pinMsg.classList.remove('hidden');
+    }
+    return;
+  }
+
+  pinSave.disabled = true;
+  pinSave.textContent = 'Saving\u2026';
+
+  fetch('/api/user/pin', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ currentPin: currentPin, newPin: newPin }),
+  }).then(function (r) { return r.json(); }).then(function (data) {
+    if (data.ok) {
+      showToast('PIN changed');
+      hidePinForm(true);
+      store.set({userPinEnabled:true});
+    } else {
+      pinSave.disabled = false;
+      pinSave.textContent = 'Save';
+      if (pinMsg) {
+        pinMsg.textContent = data.error || 'Could not change your PIN. Please try again.';
+        pinMsg.className = 'settings-hint settings-pin-error us-pin-msg-err';
+        pinMsg.classList.remove('hidden');
+      }
+    }
+  }).catch(function () {
+    pinSave.disabled = false;
+    pinSave.textContent = 'Save';
+    if (pinMsg) {
+      pinMsg.textContent = 'Connection lost. Check your network and try again.';
+      pinMsg.className = 'settings-hint settings-pin-error us-pin-msg-err';
+      pinMsg.classList.remove('hidden');
+    }
+  });
+}
+
+// --- Email settings ---
+
+export function renderEmailSettings() {
+  var listEl = document.getElementById('us-email-list');
+  if (!listEl) return;
+  listEl.innerHTML = '';
+
+  var accounts = getEmailAccountListCache();
+  if (!accounts || accounts.length === 0) {
+    return;
+  }
+
+  for (var i = 0; i < accounts.length; i++) {
+    var acc = accounts[i];
+    var row = document.createElement('div');
+    row.className = 'us-integration-email-row';
+    row.innerHTML =
+      '<div class="us-voice-row-controls"><div class="us-integration-brand">' + providerIcon(acc.provider) + '</div>' +
+      '<div class="us-voice-provider-copy"><strong>' + escHtml(acc.email) + '</strong><small>Email · ' + escHtml(({gmail:'Gmail',outlook:'Outlook Mail',yahoo:'Yahoo Mail',custom:'Custom email'})[acc.provider] || 'Custom email') + (acc.label ? ' · ' + escHtml(acc.label) : '') + '</small></div>' +
+      '<span class="us-integration-state">Account saved</span><button type="button" class="settings-btn-sm" aria-expanded="false">Manage</button></div>' +
+      '<div class="us-email-manage" hidden><p class="settings-hint">This personal mailbox can be used to read, search and send email. Disconnecting keeps your mail at the provider.</p><button type="button" class="settings-btn-sm" data-account-id="' + escHtml(acc.id) + '">Disconnect</button></div>';
+    var manageBtn = row.querySelector('[aria-expanded]');
+    manageBtn.setAttribute('aria-label', 'Manage ' + acc.email);
+    manageBtn.addEventListener('click', function () {
+      var panel = this.closest('.us-integration-email-row').querySelector('.us-email-manage');
+      panel.hidden = !panel.hidden; this.setAttribute('aria-expanded', String(!panel.hidden));
+    });
+    var removeBtn = row.querySelector('[data-account-id]');
+    removeBtn.addEventListener('click', function () {
+      var accountId = this.getAttribute('data-account-id');
+      showConfirmDialog('Disconnect this personal mailbox from Clay? Existing mail at the provider is kept.', 'Disconnect', function () {
+        var ws=getWs();
+        if(ws && ws.readyState===1)ws.send(JSON.stringify({type:'email_account_remove',accountId:accountId}));
+        else showToast('Disconnected from Clay. Reconnect and retry.');
+      });
+    });
+
+    listEl.appendChild(row);
+  }
+  refreshIcons();
+}
+
+
+var PROVIDER_ICON_PATHS = {
+  gmail: '/icons/email/gmail.svg',
+  outlook: '/icons/email/outlook.svg',
+  yahoo: '/icons/email/yahoo.svg',
+};
+
+function providerIcon(provider) {
+  var src = PROVIDER_ICON_PATHS[provider];
+  if (src) {
+    return '<img src="' + src + '" class="us-email-provider-icon" alt="' + provider + '">';
+  }
+  return '<i data-lucide="mail" class="us-email-provider-icon-fallback"></i>';
+}
+
+function escHtml(str) {
+  var d = document.createElement('div');
+  d.textContent = str;
+  return d.innerHTML;
+}

package/lib/public/modules/user-settings-appearance.js

@@ -0,0 +1,55 @@
+import { store } from './store.js';
+import { initPersonalThemes } from './user-settings-themes.js';
+import { TERMINAL_FONT_OPTIONS, getTerminalFontFamily, getTerminalFontSize, saveTerminalFont, onTerminalFontChange } from './terminal-prefs.js';
+import { enhanceSettingsSelects } from './settings-select.js';
+
+export function initPersonalAppearance() {
+  var theme = document.getElementById('us-theme-picker').closest('.settings-card');
+  initPersonalThemes(theme);
+
+  var layout = document.getElementById('us-layout-switcher');
+  layout.closest('.settings-card').classList.add('us-layout-group');
+  layout.setAttribute('role', 'group'); layout.setAttribute('aria-label', 'Conversation layout');
+  layout.querySelectorAll('button').forEach(function (button) {
+    var bubble = button.dataset.layout === 'bubble';
+    button.querySelector('.layout-option-desc').textContent = bubble ? 'Centered messages in separate bubbles.' : 'Full-width conversation with avatars.';
+    var preview = document.createElement('span'); preview.className = 'us-layout-preview us-layout-preview-' + button.dataset.layout; preview.setAttribute('aria-hidden', 'true');
+    preview.innerHTML = '<i></i><i></i><i></i>'; button.prepend(preview);
+  });
+  layout.querySelectorAll('button').forEach(function (button) { button.setAttribute('aria-pressed', button.classList.contains('selected')); });
+  addTerminalTypography(theme.closest('.us-section'));
+  enhanceSettingsSelects(theme);
+}
+
+function addTerminalTypography(section) {
+  var content = document.createElement('section'); content.className = 'us-typography settings-card';
+  content.innerHTML = '<h3>Terminal typography</h3><p class="settings-hint">Used by existing and new terminals. Also available from the terminal toolbar.</p><div class="us-font-controls"><div><label class="settings-label" for="us-terminal-family">Font</label><select id="us-terminal-family" class="settings-select"></select></div><div><label class="settings-label" for="us-terminal-size">Size</label><div class="us-font-size"><input id="us-terminal-size" class="us-text-input" type="number" min="9" max="32" step="1" aria-label="Terminal font size"><span>px</span></div></div></div><div class="us-font-preview" aria-hidden="true">Aa Bb 0123 · ~/projects/clay</div><p class="settings-status" role="status" id="us-terminal-status"></p><button type="button" class="settings-btn-sm" id="us-terminal-retry" hidden>Retry save</button>';
+  section.appendChild(content);
+  var family = content.querySelector('select'); var size = content.querySelector('input');
+  var preview = content.querySelector('.us-font-preview'); var status = content.querySelector('[role=status]'); var retry = content.querySelector('#us-terminal-retry');
+  TERMINAL_FONT_OPTIONS.forEach(function (font) {
+    var option = document.createElement('option'); option.value = font.family; option.textContent = font.label; family.appendChild(option);
+  });
+  function sync() {
+    if (store.get('userTerminalDirty')) return;
+    var value = getTerminalFontFamily();
+    if (!Array.from(family.options).some(function (option) { return option.value === value; })) {
+      var option = document.createElement('option'); option.value = value; option.textContent = 'Custom font'; family.appendChild(option);
+    }
+    family.value = value; size.value = getTerminalFontSize();
+    preview.style.fontFamily = value; preview.style.fontSize = size.value + 'px';
+    family.dispatchEvent(new Event('settings-sync'));
+  }
+  async function save() {
+    var value = Number(size.value); store.set({ userTerminalDirty: true });
+    if (!Number.isInteger(value) || value < 9 || value > 32) { status.textContent = 'Choose a whole size from 9 to 32.'; status.dataset.state = 'error'; return; }
+    family.disabled = true; size.disabled = true; retry.hidden = true; status.textContent = 'Saving…'; status.dataset.state = '';
+    try {
+      await saveTerminalFont(family.value, value); store.set({ userTerminalDirty: false }); sync(); status.textContent = 'Saved.';
+    } catch (error) { status.textContent = error.message; status.dataset.state = 'error'; retry.hidden = false; }
+    finally { family.disabled = false; size.disabled = false; family.dispatchEvent(new Event('settings-sync')); }
+  }
+  family.onchange = save; size.onchange = save; retry.onclick = save;
+  size.oninput = function () { store.set({ userTerminalDirty: true }); };
+  onTerminalFontChange(sync); sync(); enhanceSettingsSelects(content);
+}

package/lib/public/modules/user-settings-editors.js

@@ -0,0 +1,24 @@
+import { store } from './store.js';
+import { confirmSettingsAction as showConfirmDialog } from './server-settings-state.js';
+
+function wrapEditor(content, title, summary) {
+  var group=document.createElement('section');group.className='us-config-group';
+  content.before(group);
+  var heading=document.createElement('div');heading.className='us-editor-heading';
+  var label=document.createElement('h3');label.textContent=title;
+  var edit=document.createElement('button');edit.type='button';edit.className='settings-btn-sm';edit.textContent='Edit';
+  var state=document.createElement('p');state.className='us-editor-summary';state.textContent=summary();
+  heading.append(label,edit);group.append(heading,state);
+  var help=content.querySelector('.settings-hint');var copy=null;if(help && title!=='Personal allow rules'){copy=help.cloneNode(true);group.appendChild(copy);}
+  group.appendChild(content);content.hidden=true;
+  store.subscribe(function(next,previous){if(next.userSettingsProfile!==previous.userSettingsProfile)state.textContent=summary();});
+  var done=document.createElement('button');done.type='button';done.className='settings-btn-sm';done.textContent='Done';content.appendChild(done);
+  edit.onclick=function(){if(copy)copy.hidden=true;content.hidden=false;state.hidden=true;edit.hidden=true;var first=content.querySelector('button,input,textarea,select');if(first)first.focus();};
+  done.onclick=function(){if(copy)copy.hidden=false;content.hidden=true;state.hidden=false;edit.hidden=false;state.textContent=summary();edit.focus();};
+  return {group:group,state:state,edit:edit,done:done,content:content};
+}
+export function initPersonalEditors() {
+  var allow=document.getElementById('us-claude-allow-list');var permission=wrapEditor(allow.closest('.settings-card'),'Personal allow rules',function(){var count=(store.get('userAllowSaved') || []).length;return count+' personal rules. Managed defaults apply separately.';});
+  permission.done.textContent='Cancel';permission.done.onclick=function(){function cancel(){allow.value=(store.get('userAllowSaved') || []).join('\n');store.set({userAllowDirty:false});permission.content.hidden=true;permission.state.hidden=false;permission.edit.hidden=false;permission.edit.focus();}if(store.get('userAllowDirty'))showConfirmDialog('Discard unsaved command rules?', 'Discard',cancel);else cancel();};
+  store.subscribe(function(state,previous){if(state.userAllowSaved!==previous.userAllowSaved){permission.state.textContent=(state.userAllowSaved || []).length+' personal rules. Managed defaults apply separately.';if(previous.userAllowDirty && !state.userAllowDirty){permission.content.hidden=true;permission.state.hidden=false;permission.edit.hidden=false;permission.edit.focus();}}});
+}