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

package/lib/public/modules/app-projects.js

@@ -17,7 +17,6 @@ import { updateCrossProjectBlink, stopUrgentBlink, setActivity } from './app-fav
 import { spawnDustParticles } from './sidebar.js';
 import { isSearchOpen, closeSearch } from './session-search.js';
 import { exitDmMode } from './app-dm.js';
-import { isHomeHubVisible, hideHomeHub, showHomeHub } from './app-home-hub.js';
 import { resetFileBrowser } from './filebrowser.js';
 import { closeNotesBrowser } from './sticky-notes-browser.js';
 import { hideMemory } from './mate-memory.js';
@@ -40,6 +39,7 @@ import { chooseProjectAfterRemoval } from './project-removal-target.js';
 import { isProjectActivated, isProjectActivationPending, isProjectContextConnected, projectWsPath } from './project-activation.js';
 import { rememberHomePrimarySurface } from './home-surface.js';
 import { clearProjectSplitState } from './split-session-boundary.js';
+import { isMateHeaderWorkspace, renderOrdinaryProjectHeader } from './project-header-identity.js';
 
 // --- Module-owned state ---
 var cachedProjects = [];
@@ -273,17 +273,6 @@ export function updateProjectList(msg) {
         myMessageAvatars[avatarIndex].src = document.body.dataset.myAvatarUrl;
       }
     }
-    // Render my avatar (always present, hidden behind user-island)
-    var meEl = document.getElementById("icon-strip-me");
-    if (meEl && !meEl.hasChildNodes()) {
-      var myUser = st2.cachedAllUsers.find(function (u) { return u.id === st2.myUserId; });
-      if (myUser) {
-        var meAvatar = document.createElement("img");
-        meAvatar.className = "icon-strip-me-avatar";
-        meAvatar.src = userAvatarUrl(myUser, 34);
-        meEl.appendChild(meAvatar);
-      }
-    }
   }
 }
 
@@ -338,29 +327,8 @@ export function renderProjectList() {
   var iconStripActiveSlug = (st.mateProjectSlug && st.savedMainSlug) ? st.savedMainSlug : st.currentSlug;
   renderIconStrip(iconStripProjects, iconStripActiveSlug);
   // Update title bar project name and icon if it changed
-  if (!st.mateProjectSlug) {
-    for (var pi = 0; pi < cachedProjects.length; pi++) {
-      if (cachedProjects[pi].slug === st.currentSlug) {
-        var updatedName = cachedProjects[pi].title || cachedProjects[pi].project;
-        var tbName = document.getElementById("title-bar-project-name");
-        if (tbName && updatedName) tbName.textContent = updatedName;
-        var tbIcon = document.getElementById("title-bar-project-icon");
-        if (tbIcon) {
-          var pIcon = cachedProjects[pi].icon || null;
-          if (pIcon) {
-            tbIcon.textContent = pIcon;
-            parseEmojis(tbIcon);
-            tbIcon.classList.add("has-icon");
-            try { localStorage.setItem("clay-project-icon-" + (st.currentSlug || "default"), pIcon); } catch (e) {}
-          } else {
-            tbIcon.textContent = "";
-            tbIcon.classList.remove("has-icon");
-            try { localStorage.removeItem("clay-project-icon-" + (st.currentSlug || "default")); } catch (e) {}
-          }
-        }
-        break;
-      }
-    }
+  if (!st.mateProjectSlug && !isMateHeaderWorkspace(st)) {
+    renderOrdinaryProjectHeader(Object.assign({}, st, { projectsHubList: cachedProjects }));
   }
   // Re-apply current socket status to the active icon's dot
   var dot = getStatusDot();
@@ -425,14 +393,13 @@ export function switchProject(slug) {
   var st = store.snap();
   var ws = getWs();
   var targetWsPath = projectWsPath(slug);
-  var homeVisible = isHomeHubVisible() || store.get('projectsHubVisible');
+  var homeVisible = store.get('projectsHubVisible');
   var alreadyInProject = isProjectActivated(st, slug, ws);
   var wasDm = st.dmMode;
   var wasMate = st.dmMode && st.dmTargetUser && st.dmTargetUser.isMate;
   if (st.dmMode) exitDmMode(wasMate);
   if (homeVisible && alreadyInProject) {
     rememberHomePrimarySurface("project", slug);
-    hideHomeHub();
     hideProjectsHub();
     completeProjectsOnboarding();
     if (document.documentElement.classList.contains("pwa-standalone")) {
@@ -496,7 +463,7 @@ export function confirmCurrentProjectSessionActivation() {
 export function finishProjectSessionActivation() {
   var confirmed = confirmCurrentProjectSessionActivation();
   if (!confirmed) return false;
-  if (!store.get('pendingHomeProjectSlug')) return !isHomeHubVisible() && !store.get('projectsHubVisible');
+  if (!store.get('pendingHomeProjectSlug')) return !store.get('projectsHubVisible');
   return completePendingProjectActivation();
 }
 

package/lib/public/modules/app-rate-limit.js

@@ -83,6 +83,22 @@ function setActiveRateLimitState(next) {
   rateLimitResetState = next;
 }
 
+function extraUsageDescription(msg) {
+  if (msg.vendor && msg.vendor !== "claude") return "";
+  var reason = msg.overageDisabledReason;
+  if (reason === "out_of_credits") return "Extra usage has no credits remaining";
+  if (reason === "fetch_error") return "Extra usage availability could not be checked";
+  if (reason && reason !== "unknown") return "Extra usage is unavailable for this account";
+  if (msg.overageStatus === "rejected") {
+    var reset = formatResetTime(msg.overageResetsAt);
+    return "Extra usage limit reached" + (reset ? "; resets in " + reset : "");
+  }
+  if (msg.isUsingOverage) return "Extra usage is currently being used";
+  if (msg.overageEnabled === false) return "Extra usage is turned off";
+  if (msg.overageEnabled === true) return "Extra usage is enabled";
+  return "";
+}
+
 function rateLimitTypeLabel(type) {
   if (!type) return "Usage";
   var labels = {
@@ -90,7 +106,8 @@ function rateLimitTypeLabel(type) {
     "seven_day": "7-day",
     "seven_day_opus": "7-day Opus",
     "seven_day_sonnet": "7-day Sonnet",
-    "overage": "Overage",
+    "overage": "Extra usage",
+    "seven_day_overage_included": "7-day included extra usage",
   };
   return labels[type] || type;
 }
@@ -163,6 +180,12 @@ function showRateLimitPopover(text, isRejected) {
   pop.className = "rate-limit-popover" + (isRejected ? " rejected" : "");
   pop.textContent = text;
   rateLimitIndicatorEl.appendChild(pop);
+  if (typeof pop.getBoundingClientRect === "function") {
+    var bounds = pop.getBoundingClientRect();
+    var viewportWidth = document.documentElement.clientWidth;
+    var shift = bounds.left < 16 ? 16 - bounds.left : Math.min(0, viewportWidth - 16 - bounds.right);
+    pop.style.marginLeft = shift + "px";
+  }
 
   // Auto-dismiss after 5s
   var fadeTimer = setTimeout(function () {
@@ -182,9 +205,7 @@ function clearRateLimitIndicator() {
 
 function formatResetTime(resetsAt) {
   if (!resetsAt) return "";
-  var d = new Date(resetsAt);
-  var now = new Date();
-  var diff = resetsAt - now.getTime();
+  var diff = resetsAt - Date.now();
   if (diff <= 0) return "";
   var hrs = Math.floor(diff / 3600000);
   var mins = Math.floor((diff % 3600000) / 60000);
@@ -200,10 +221,31 @@ function rateLimitTypeShortLabel(type) {
   return type || "";
 }
 
+function quotaWindowLabel(entry) {
+  var mins = entry.windowDurationMins;
+  if (!Number.isFinite(mins) || mins <= 0) return "Usage";
+  if (mins % 1440 === 0) return (mins / 1440) + "d";
+  if (mins % 60 === 0) return (mins / 60) + "h";
+  return mins + "m";
+}
+
+function applyQuotaSnapshot(msg) {
+  var next = Object.assign({}, getActiveRateLimitState());
+  Object.keys(next).forEach(function (key) {
+    // Retire the old inferred Codex windows as soon as real metadata arrives.
+    if (!next[key].source || next[key].limitId === msg.limitId) delete next[key];
+  });
+  msg.quotaWindows.forEach(function (window) {
+    if (window.resetsAt && window.resetsAt <= Date.now()) return;
+    var key = JSON.stringify([msg.limitId, window.key]);
+    next[key] = Object.assign({}, window, { source: "account_snapshot", limitId: msg.limitId });
+  });
+  setActiveRateLimitState(next);
+}
+
 function tickRateLimitUsage() {
   if (!rateLimitUsageEl) return;
-  var parts = [];
-  var types = ["five_hour", "seven_day", "seven_day_opus", "seven_day_sonnet"];
+  var types = Object.keys(rateLimitResetState);
   var nextState = Object.assign({}, rateLimitResetState);
   var changed = false;
   for (var i = 0; i < types.length; i++) {
@@ -211,13 +253,8 @@ function tickRateLimitUsage() {
     if (!entry || !entry.resetsAt) continue;
     var timeStr = formatResetTime(entry.resetsAt);
     if (!timeStr) { delete nextState[types[i]]; changed = true; continue; }
-    parts.push(rateLimitTypeShortLabel(types[i]) + " resets " + timeStr);
   }
   if (changed) setActiveRateLimitState(nextState);
-  if (parts.length === 0) {
-    renderRateLimitUsage();
-    return;
-  }
   renderRateLimitUsage();
 }
 
@@ -247,9 +284,19 @@ function renderRateLimitUsage() {
   rateLimitUsageEl.style.display = "";
 
   var parts = [];
-  var types = ["five_hour", "seven_day", "seven_day_opus", "seven_day_sonnet"];
+  var types = Object.keys(rateLimitResetState);
+  var hasWarning = false;
   for (var i = 0; i < types.length; i++) {
     var entry = rateLimitResetState[types[i]];
+    if (entry && entry.source === "account_snapshot") {
+      if (entry.resetsAt && entry.resetsAt <= Date.now()) continue;
+      var quotaText = quotaWindowLabel(entry);
+      if (Number.isFinite(entry.usedPercent)) quotaText += " " + Math.round(entry.usedPercent) + "% used";
+      if (entry.resetsAt) quotaText += " · resets " + formatResetTime(entry.resetsAt);
+      if (entry.usedPercent >= 80) hasWarning = true;
+      parts.push(quotaText);
+      continue;
+    }
     if (!entry || !entry.resetsAt) continue;
     var timeStr = formatResetTime(entry.resetsAt);
     if (!timeStr) continue;
@@ -257,6 +304,7 @@ function renderRateLimitUsage() {
   }
 
   var label = parts.length > 0 ? parts.join(" · ") : "Check usage";
+  rateLimitUsageEl.className = "top-bar-pill usage-check-link " + (hasWarning ? "pill-warning" : "pill-dim");
   var meta = getVendorUsageMeta(activeVendor);
   if (meta) {
     rateLimitUsageEl.href = meta.href;
@@ -301,6 +349,8 @@ export function initRateLimit() {
 
 export function handleRateLimitEvent(msg) {
   if (!rateLimitEventAppliesToPane(msg, store.snap())) return;
+  // Old Codex history contains quota snapshots misrecorded as rejections.
+  if (msg.vendor === "codex" && !msg.source) return;
   if (msg.resetsAt && msg.resetsAt <= Date.now()) {
     var expiredState = Object.assign({}, getActiveRateLimitState());
     if (msg.rateLimitType) delete expiredState[msg.rateLimitType];
@@ -351,11 +401,19 @@ export function handleRateLimitEvent(msg) {
     updateRateLimitIndicator(msg);
   }
 
+  var extraUsage = extraUsageDescription(msg);
+  if (extraUsage) popoverText += ". " + extraUsage;
   showRateLimitPopover(popoverText, isRejected);
 }
 
 export function updateRateLimitUsage(msg) {
   if (!rateLimitEventAppliesToPane(msg, store.snap())) return;
+  if (msg.vendor === "codex" && msg.source === "account_snapshot" && Array.isArray(msg.quotaWindows)) {
+    applyQuotaSnapshot(msg);
+    renderRateLimitUsage();
+    return;
+  }
+  if (msg.vendor === "codex" && !msg.source) return;
   var activeVendor = store.get('currentVendor') || "claude";
   if (!vendorTracksRateLimits(activeVendor)) {
     renderRateLimitUsage();

package/lib/public/modules/app-rendering.js

@@ -8,7 +8,8 @@ import { refreshIcons } from './icons.js';
 import { closeToolGroup } from './tools.js';
 import { sendMessage, hasSendableContent } from './input.js';
 import { getChatLayout } from './theme.js';
-import { addToMessages, scrollToBottom, forceScrollToBottom, getMsgTime, shouldGroupMessage, getTurnCounter, getActivityEl, VENDOR_AVATARS, VENDOR_NAMES } from './chat-render-runtime.js';
+import { addToMessages, scrollToBottom, forceScrollToBottom, getMsgTime, shouldGroupMessage, getTurnCounter, getActivityEl } from './chat-render-runtime.js';
+import { resolveProjectAssistantIdentity, applyProjectAssistantIdentity } from './project-chat-identity.js';
 export { VENDOR_ORDER, EXPERIMENTAL_VENDORS, isExperimentalVendor } from './vendor-priority.js';
 export { initRendering, addToMessages, scrollToBottom, forceScrollToBottom, getMsgTime, shouldGroupMessage, getTurnCounter, setTurnCounter, getPrependAnchor, setPrependAnchor, getActivityEl, setActivityEl, getIsUserScrolledUp, setIsUserScrolledUp, getStickyBottom, armStickyBottom, disarmStickyBottom, VENDOR_AVATARS, VENDOR_NAMES, VENDOR_HOMEPAGES } from './chat-render-runtime.js';
 export { addUserMessage, addSystemMessage, addConflictMessage, addContextOverflowMessage } from './app-message-cards.js';
@@ -22,15 +23,15 @@ var streamDrainTimer = null;
 export function ensureAssistantBlock() {
   var _el = store.get('currentMsgEl');
   if (!_el) {
-    var _isDm2 = document.body.classList.contains("mate-dm-active") && document.body.dataset.mateAvatarUrl;
     var vendor = store.get('currentVendor') || "claude";
-    var dmTarget = store.get('dmTargetUser');
+    var identity = resolveProjectAssistantIdentity(store.snap(), vendor);
     _el = createAssistantBubble({
       turn: getTurnCounter(),
-      avatarUrl: _isDm2 ? document.body.dataset.mateAvatarUrl : (VENDOR_AVATARS[vendor] || VENDOR_AVATARS.claude),
-      name: _isDm2 ? ((dmTarget && dmTarget.displayName) || "Mate") : (VENDOR_NAMES[vendor] || VENDOR_NAMES.claude),
+      avatarUrl: identity.avatarUrl,
+      name: identity.name,
       time: getMsgTime(),
     });
+    applyProjectAssistantIdentity(_el, identity);
     if (shouldGroupMessage("msg-assistant")) _el.classList.add("grouped");
     addToMessages(_el);
     store.set({ currentMsgEl: _el, currentFullText: "" });
@@ -119,20 +120,17 @@ export function showClaudePreThinking() {
   if (getChatLayout() !== "channel") return;
   removeMatePreThinking();
   var vendor = store.get('currentVendor') || "claude";
-  var vendorAvatar = VENDOR_AVATARS[vendor] || VENDOR_AVATARS.claude;
-  var vendorName = VENDOR_NAMES[vendor] || VENDOR_NAMES.claude;
-  doShowMatePreThinking(vendorName, vendorAvatar);
+  var identity = resolveProjectAssistantIdentity(store.snap(), vendor);
+  doShowMatePreThinking(identity.name, identity.avatarUrl, identity);
 }
 
 export function showMatePreThinking() {
   removeMatePreThinking();
-  var dmTarget = store.get('dmTargetUser');
-  var mateName = dmTarget ? (dmTarget.displayName || "Mate") : "Mate";
-  var mateAvatar = document.body.dataset.mateAvatarUrl || "";
-  doShowMatePreThinking(mateName, mateAvatar);
+  var identity = resolveProjectAssistantIdentity(store.snap(), store.get('currentVendor'));
+  doShowMatePreThinking(identity.name, identity.avatarUrl, identity);
 }
 
-function doShowMatePreThinking(mateName, mateAvatar) {
+function doShowMatePreThinking(mateName, mateAvatar, identity) {
   var _el = document.createElement("div");
   _el.className = "thinking-item mate-thinking mate-pre-thinking";
   _el.innerHTML =
@@ -141,6 +139,7 @@ function doShowMatePreThinking(mateName, mateAvatar) {
     '<div class="dm-bubble-header"><span class="dm-bubble-name">' + escapeHtml(mateName) + '</span></div>' +
     '<div class="mate-thinking-dots"><span></span><span></span><span></span></div>' +
     '</div>';
+  applyProjectAssistantIdentity(_el, identity);
   store.set({ matePreThinkingEl: _el });
   var activity = getActivityEl();
   if (activity && activity.parentNode) {

package/lib/public/modules/avatar.js

@@ -1,18 +1,35 @@
 // Centralized local avatar URL builder for people and Mates.
 import { imprintDataUrl, mateMarkDataUrl } from './avatar-imprint.js';
 
-var imprintCache = new Map();
 var mateMarkCache = new Map();
 
-// Legacy style remains part of the identity hash so existing selections map
-// deterministically into the local pixel identity system.
+// Historical DiceBear 9.x choices, now generated by Clay's local server.
+export var MATE_AVATAR_STYLES = [
+  { id: 'thumbs', name: 'Thumbs' },
+  { id: 'bottts', name: 'Bots' },
+  { id: 'pixel-art', name: 'Pixel' },
+  { id: 'adventurer', name: 'Adventurer' },
+  { id: 'micah', name: 'Micah' },
+  { id: 'fun-emoji', name: 'Emoji' },
+  { id: 'icons', name: 'Icons' },
+];
+
 export function avatarUrl(style, seed, size) {
-  var cacheKey = [style || 'imprint', seed || 'anonymous', size || 64].join('|');
-  if (imprintCache.has(cacheKey)) return imprintCache.get(cacheKey);
-  var url = imprintDataUrl({ style: style || 'imprint', seed: seed || 'anonymous', size: size || 64 });
-  if (imprintCache.size >= 512) imprintCache.delete(imprintCache.keys().next().value);
-  imprintCache.set(cacheKey, url);
-  return url;
+  // Legacy user styles remain part of the seed identity, never the artwork.
+  return imprintDataUrl({ style: style || 'imprint', seed: seed || 'anonymous', size: size || 64 });
+}
+
+export function mateStyleAvatarUrl(style, seed, size) {
+  var normalizedStyle = style || 'imprint';
+  var normalizedSeed = seed || 'anonymous';
+  var normalizedSize = size || 64;
+  var isHistorical = MATE_AVATAR_STYLES.some(function (entry) { return entry.id === normalizedStyle; });
+  if (isHistorical) {
+    return '/api/generated-avatar?style=' + encodeURIComponent(normalizedStyle)
+      + '&seed=' + encodeURIComponent(normalizedSeed)
+      + '&size=' + encodeURIComponent(normalizedSize);
+  }
+  return imprintDataUrl({ style: normalizedStyle, seed: normalizedSeed, size: normalizedSize });
 }
 
 // Use the same bounded account identity for fresh fallbacks across every surface.
@@ -46,5 +63,9 @@ export function mateAvatarUrl(mate, size) {
   var p = mate.profile || mate;
   if (p.avatarCustom || mate.avatarCustom) return p.avatarCustom || mate.avatarCustom;
   var identity = p.displayName || mate.name || mate.displayName || 'Mate';
+  var style = p.avatarStyle || mate.avatarStyle || 'imprint';
+  if (style !== 'imprint' && style !== 'initial') {
+    return mateStyleAvatarUrl(style, p.avatarSeed || mate.avatarSeed || mate.id || identity, size);
+  }
   return mateMarkUrl(identity, size);
 }

package/lib/public/modules/chat-render-runtime.js

@@ -2,6 +2,7 @@
 
 import { store } from './store.js';
 import { getMessagesEl } from './dom-refs.js';
+import { getProjectAssistantPlaceholder } from './project-chat-identity.js';
 
 export var VENDOR_AVATARS = {
   claude: "/claude-code-avatar.png",
@@ -124,11 +125,22 @@ export function disarmStickyBottom() {
 }
 
 export function initRendering() {
+  var lastAssistantPlaceholder = '';
+  function updateInputPlaceholder(state) {
+    var inputEl = document.getElementById("input");
+    if (!inputEl) return;
+    var nextPlaceholder = getProjectAssistantPlaceholder(state, state.currentVendor);
+    var ownsPlaceholder = !lastAssistantPlaceholder || inputEl.placeholder === lastAssistantPlaceholder;
+    lastAssistantPlaceholder = nextPlaceholder;
+    if (inputEl.disabled || document.getElementById("input-mention-chip") || !ownsPlaceholder) return;
+    inputEl.placeholder = nextPlaceholder;
+  }
+  updateInputPlaceholder(store.snap());
   store.subscribe(function (state, prev) {
-    if (state.currentVendor !== prev.currentVendor) {
-      var inputEl = document.getElementById("input");
-      if (inputEl) inputEl.placeholder = "Message " + (VENDOR_NAMES[state.currentVendor] || VENDOR_NAMES.claude) + "...";
-    }
+    if (state.currentVendor !== prev.currentVendor || state.activeSessionMateId !== prev.activeSessionMateId ||
+        state.activeSessionMateName !== prev.activeSessionMateName || state.activeProjectMateId !== prev.activeProjectMateId ||
+        state.activeProjectMateName !== prev.activeProjectMateName || state.cachedMatesList !== prev.cachedMatesList ||
+        state.dmMode !== prev.dmMode || state.dmTargetUser !== prev.dmTargetUser) updateInputPlaceholder(state);
   });
 }
 

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

@@ -2,8 +2,6 @@ import { mateAvatarUrl } from './avatar.js';
 import { escapeHtml } from './utils.js';
 import { refreshIcons } from './icons.js';
 import { openSearch as openSessionSearch } from './session-search.js';
-import { showHomeHub, minimizeHomeHub } from './app-home-hub.js';
-import { openHomeConversation } from './home-mate-chat.js';
 import { startSearchClayChat, attachSearchClayChat, detachSearchClayChat, getSearchClayChatSummary } from './search-clay-chat.js';
 import { getWs } from './ws-ref.js';
 import { openProjectLog } from './project-logs.js';
@@ -110,13 +108,7 @@ export function handleClaySessionTarget(msg) {
     navigateToLog(msg.target);
     return true;
   }
-  if (msg.target.isMate && msg.target.mateId && msg.target.homeSessionId) {
-    showHomeHub();
-    openHomeConversation(msg.target.mateId, msg.target.homeSessionId);
-  } else {
-    minimizeHomeHub();
-    navigateToSession({ projectSlug: msg.target.projectSlug, sessionId: msg.target.sessionId }, null);
-  }
+  navigateToSession({ projectSlug: msg.target.projectSlug, sessionId: msg.target.sessionId }, null);
   return true;
 }
 
@@ -166,7 +158,6 @@ export function handlePaletteSessionSwitch() {
 
 function navigateToLog(target) {
   closeCommandPalette();
-  minimizeHomeHub();
   if (ctx.currentSlug && ctx.currentSlug() === target.projectSlug) {
     openProjectLog(target.ref);
   } else {
@@ -363,11 +354,7 @@ function resumeClayChat() {
 function activateItem(entry) {
   if (entry.type === "resume-clay") { resumeClayChat(); return; }
   if (entry.type === "ask-clay") { beginClayChat(entry.query); return; }
-  if (entry.type === "mate-session") {
-    closeCommandPalette();
-    showHomeHub();
-    openHomeConversation(entry.data.mateId, entry.data.sessionId);
-  } else if (entry.type === "session") navigateToSession(entry.data, entry.query);
+  if (entry.type === "mate-session" || entry.type === "session") navigateToSession(entry.data, entry.query);
 }
 
 function navigateToSession(item, query) {

package/lib/public/modules/context-sources.js

@@ -1,3 +1,5 @@
+import { showToast } from './utils.js';
+import { preparePersonalConnectionDialog } from './personal-settings-dialog.js';
 // Context Sources — attach terminal output, browser tabs, and email accounts as context for Claude
 
 var ctx = null;
@@ -433,25 +435,32 @@ export function getEmailAccountListCache() {
   return emailAccountList;
 }
 
-export function showEmailSetupModal() {
+export function showEmailSetupModal(provider, host) {
+  var providerNames = { gmail: "Gmail", outlook: "Outlook Mail", yahoo: "Yahoo Mail", custom: "Custom email" };
+  if (!Object.hasOwn(providerNames, provider)) provider = null;
   // Remove any existing modal
   var existing = document.getElementById("email-setup-modal");
-  if (existing) existing.remove();
+  if (existing) {existing.querySelector("input:not([type=hidden]),button").focus();return;}
 
   var overlay = document.createElement("div");
   overlay.id = "email-setup-modal";
-  overlay.className = "email-setup-overlay";
-
-  var providerOptions = '<option value="gmail">Gmail</option><option value="outlook">Outlook</option><option value="yahoo">Yahoo</option><option value="custom">Custom</option>';
-
+  overlay.className = host ? "email-setup-inline" : "email-setup-overlay";
+
+  if (!provider) {
+    var picker = document.createElement('div'); picker.className = 'email-setup-dialog';
+    picker.innerHTML = '<h3>Choose an email provider</h3><div class="us-integration-tiles"></div><button id="email-setup-cancel" type="button" class="email-setup-btn">Cancel</button>';
+    Object.keys(providerNames).forEach(function (id) {
+      var button = document.createElement('button'); button.type = 'button'; button.className = 'email-setup-btn'; button.textContent = providerNames[id];
+      button.onclick = function () { closePicker(); showEmailSetupModal(id, host); };
+      picker.querySelector('.us-integration-tiles').appendChild(button);
+    });
+    overlay.appendChild(picker); (host || document.body).appendChild(overlay); var closePicker = preparePersonalConnectionDialog(overlay, !!host); return;
+  }
   var modal = document.createElement("div");
   modal.className = "email-setup-dialog";
   modal.innerHTML =
-    '<h3 class="email-setup-title">Add Email Account</h3>' +
-    '<div class="email-setup-field">' +
-      '<label class="email-setup-label">Provider</label>' +
-      '<select id="email-setup-provider" class="email-setup-input">' + providerOptions + '</select>' +
-    '</div>' +
+    '<h3 class="email-setup-title">Add ' + providerNames[provider] + ' account</h3>' +
+    '<input type="hidden" id="email-setup-provider" value="' + provider + '">' +
     '<div class="email-setup-field">' +
       '<label class="email-setup-label">Email Address</label>' +
       '<input id="email-setup-address" type="email" placeholder="you@example.com" class="email-setup-input" />' +
@@ -488,11 +497,12 @@ export function showEmailSetupModal() {
     '</div>';
 
   overlay.appendChild(modal);
-  document.body.appendChild(overlay);
+  (host || document.body).appendChild(overlay);
+  preparePersonalConnectionDialog(overlay, !!host);
 
   // Event: close on overlay click
   overlay.addEventListener("click", function (e) {
-    if (e.target === overlay) overlay.remove();
+    if (!host && e.target === overlay) overlay.remove();
   });
 
   // Event: cancel button
@@ -547,9 +557,7 @@ export function showEmailSetupModal() {
     }
   }
 
-  providerSelect.addEventListener("change", function () {
-    applyProviderMeta(providerSelect.value);
-  });
+  applyProviderMeta(provider);
 
   // Reset test state
   _emailTestPassed = false;
@@ -564,7 +572,7 @@ export function showEmailSetupModal() {
   }
   document.getElementById("email-setup-address").addEventListener("input", onInputChange);
   document.getElementById("email-setup-password").addEventListener("input", onInputChange);
-  providerSelect.addEventListener("change", onInputChange);
+
 
   function runTest() {
     var statusEl = document.getElementById("email-setup-status");
@@ -701,7 +709,8 @@ export function handleEmailAddResult(msg) {
 
 // Handle email_account_remove_result from server
 export function handleEmailRemoveResult(msg) {
-  // Account removed; list will be refreshed via email_accounts_list message
+  showToast(msg.ok ? 'Personal mailbox disconnected.' : msg.error || 'Could not disconnect mailbox. Retry from Email settings.');
+  // The acknowledged list arrives separately through email_accounts_list.
 }
 
 function getSourceLabel(id) {

package/lib/public/modules/cursor-sharing-preference.js

@@ -15,18 +15,18 @@ export function handleCursorSharingMessage(msg) {
   }
   if (msg.ready !== true || msg.accountAvailable === false || typeof msg.cursorSharing !== "boolean") {
     if (store.get("cursorSharingHydrated") && store.get("cursorSharingEnabled")) clearPresence();
-    store.set({ cursorSharingEnabled: false, cursorSharingHydrated: false, cursorSharingAccountId: null });
+    store.set({ cursorSharingEnabled: false, cursorSharingHydrated: false, cursorSharingAccountId: null, cursorSharingPending: null, cursorSharingError: msg.error || "unavailable" });
     showToast(msg.error || "Cursor sharing is unavailable.", "warn");
     return true;
   }
   var knownUserId = store.get("myUserId");
   if (knownUserId && msg.accountId && knownUserId !== msg.accountId) {
     if (store.get("cursorSharingHydrated") && store.get("cursorSharingEnabled")) clearPresence();
-    store.set({ cursorSharingEnabled: false, cursorSharingHydrated: false, cursorSharingAccountId: null });
+    store.set({ cursorSharingEnabled: false, cursorSharingHydrated: false, cursorSharingAccountId: null, cursorSharingPending: null, cursorSharingError: "account-changed" });
     return true;
   }
   var wasEnabled = store.get("cursorSharingHydrated") && store.get("cursorSharingEnabled");
-  store.set({ cursorSharingEnabled: msg.cursorSharing, cursorSharingHydrated: true, cursorSharingAccountId: msg.accountId || null });
+  store.set({ cursorSharingEnabled: msg.cursorSharing, cursorSharingHydrated: true, cursorSharingAccountId: msg.accountId || null, cursorSharingPending: null, cursorSharingError: null });
   if (wasEnabled && !msg.cursorSharing) {
     var ws = getWs();
     if (ws && ws.readyState === 1) {