clay-server 3.7.0 → 3.8.0-beta.2

package/lib/public/modules/mention.js

@@ -112,7 +112,7 @@ function buildMentionCandidates() {
         kind: "mate",
         id: m.id,
         name: (m.profile && m.profile.displayName) || m.name || "Mate",
-        color: (m.profile && m.profile.avatarColor) || "#6c5ce7",
+        color: (m.profile && m.profile.avatarColor) || "#5857fc",
         avatarSrc: mateAvatarUrl(m, 24),
         vendor: m.vendor || "claude",
         bio: m.bio || (m.profile && m.profile.bio) || "",
@@ -134,9 +134,8 @@ function buildMentionCandidates() {
       kind: "user",
       id: u.id,
       name: u.displayName || u.username || "User",
-      color: u.avatarColor || "#7c3aed",
-      // Build dicebear url from style+seed; matches userAvatarUrl shape.
-      avatarSrc: "https://api.dicebear.com/7.x/" + (u.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(u.avatarSeed || u.username || u.id),
+      color: u.avatarColor || "#5857fc",
+      avatarSrc: userAvatarUrl(u, 24),
       vendor: null,
       bio: u.username ? "@" + u.username : "",
       primary: false,
@@ -424,7 +423,7 @@ export function stickyReapplyMention() {
   var kind = selectedMateKind;
   var id = selectedMateId;
   var name = selectedMateName;
-  var color = selectedMateColor || "#6c5ce7";
+  var color = selectedMateColor || "#5857fc";
   var avatarSrc = selectedMateAvatar || "";
   // Reset index but keep selection
   mentionAtIdx = -1;
@@ -516,7 +515,7 @@ export function handleMentionStart(msg) {
     header.className = "dm-bubble-header";
     var nameSpan = document.createElement("span");
     nameSpan.className = "dm-bubble-name";
-    nameSpan.style.color = msg.avatarColor || "#6c5ce7";
+    nameSpan.style.color = msg.avatarColor || "#5857fc";
     nameSpan.textContent = msg.mateName || "Mate";
     header.appendChild(nameSpan);
 
@@ -556,7 +555,7 @@ export function handleMentionStart(msg) {
     // Project chat: mention block style
     currentMentionEl = document.createElement("div");
     currentMentionEl.className = "msg-mention";
-    currentMentionEl.style.setProperty("--mention-color", msg.avatarColor || "#6c5ce7");
+    currentMentionEl.style.setProperty("--mention-color", msg.avatarColor || "#5857fc");
 
     var header = document.createElement("div");
     header.className = "mention-header";
@@ -754,15 +753,13 @@ function isDmLayout() {
 
 function getMyAvatarSrc() {
   if (document.body.dataset.myAvatarUrl) return document.body.dataset.myAvatarUrl;
-  var myUser = null;
-  try { myUser = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch (e) {}
+  var myUser = (store.get('cachedAllUsers') || []).find(function (u) { return u.id === store.get('myUserId'); });
   return userAvatarUrl(myUser || {}, 36);
 }
 
 function getMyDisplayName() {
   if (document.body.dataset.myDisplayName) return document.body.dataset.myDisplayName;
-  var myUser = null;
-  try { myUser = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch (e) {}
+  var myUser = (store.get('cachedAllUsers') || []).find(function (u) { return u.id === store.get('myUserId'); });
   return (myUser && (myUser.displayName || myUser.username)) || "Me";
 }
 
@@ -772,14 +769,27 @@ function timeStr() {
 }
 
 function buildMentionAvatarUrl(meta) {
-  return "https://api.dicebear.com/7.x/" + (meta.avatarStyle || "bottts") + "/svg?seed=" + encodeURIComponent(meta.avatarSeed || meta.mateId);
+  return mateAvatarUrl({
+    id: meta.mateId,
+    profile: {
+      avatarStyle: meta.avatarStyle || "imprint",
+      avatarSeed: meta.avatarSeed || meta.mateId,
+      avatarColor: meta.avatarColor || "#5857fc",
+      avatarCustom: meta.avatarCustom || "",
+    },
+  }, 36);
 }
 
 function buildUserAvatarUrlFromEntry(entry, who) {
   // who = "from" | "target"
-  var style = entry[who + "AvatarStyle"] || "thumbs";
   var seed = entry[who + "AvatarSeed"] || entry[who === "from" ? "fromName" : "targetName"] || entry[who === "from" ? "from" : "targetUserId"];
-  return "https://api.dicebear.com/7.x/" + style + "/svg?seed=" + encodeURIComponent(seed || "user");
+  return userAvatarUrl({
+    id: entry[who === "from" ? "from" : "targetUserId"],
+    avatarStyle: entry[who + "AvatarStyle"] || "imprint",
+    avatarSeed: seed || "user",
+    avatarColor: entry[who + "AvatarColor"] || "#5857fc",
+    avatarCustom: entry[who + "AvatarCustom"] || "",
+  }, 36);
 }
 
 // Render a user-to-user @mention bubble (live receive AND history replay).
@@ -1021,7 +1031,7 @@ export function renderMentionResponse(entry) {
     header.className = "dm-bubble-header";
     var nameSpan = document.createElement("span");
     nameSpan.className = "dm-bubble-name";
-    nameSpan.style.color = entry.avatarColor || "#6c5ce7";
+    nameSpan.style.color = entry.avatarColor || "#5857fc";
     nameSpan.textContent = entry.mateName || "Mate";
     header.appendChild(nameSpan);
 
@@ -1050,7 +1060,7 @@ export function renderMentionResponse(entry) {
     // Project chat: use mention block style
     var el = document.createElement("div");
     el.className = "msg-mention";
-    el.style.setProperty("--mention-color", entry.avatarColor || "#6c5ce7");
+    el.style.setProperty("--mention-color", entry.avatarColor || "#5857fc");
 
     var mheader = document.createElement("div");
     mheader.className = "mention-header";

package/lib/public/modules/profile.js

@@ -1,31 +1,18 @@
-// User profile module — Discord-style popover for name, language, avatar
+// User profile module — profile popovers for people and Mates
 // Stores profile server-side in ~/.clay/profile.json
-// Avatar generated via DiceBear API (deterministic SVG from seed)
+// Generated identities use deterministic Clay Imprints.
 
 import { iconHtml, refreshIcons } from './icons.js';
 import { setSTTLang } from './stt.js';
-import { avatarUrl, mateAvatarUrl, AVATAR_STYLES } from './avatar.js';
+import { avatarUrl, mateAvatarUrl, mateMarkUrl } from './avatar.js';
 import { store } from './store.js';
 import { applyTerminalFont } from './terminal-prefs.js';
 
 var ctx;
-var profile = { name: '', lang: 'en-US', avatarStyle: 'thumbs', avatarSeed: '', avatarColor: '#7c3aed', avatarCustom: '' };
+var profile = { name: '', lang: 'en-US', avatarStyle: 'imprint', avatarSeed: '', avatarColor: '#5857fc', avatarCustom: '' };
 var profileUsername = '';
 var popoverEl = null;
 var saveTimer = null;
-var previewSeed = '';
-
-// AVATAR_STYLES imported from avatar.js
-
-var COLORS = [
-  '#7c3aed', '#4f46e5', '#2563eb', '#0891b2',
-  '#059669', '#65a30d', '#d97706', '#dc2626',
-  '#db2777', '#6366f1', '#0d9488', '#ea580c',
-  '#475569', '#1e293b', '#be123c', '#a21caf',
-  '#0369a1', '#15803d',
-];
-
-// avatarUrl imported from avatar.js
 
 function getAvatarSeed() {
   return profile.avatarSeed || 'anonymous';
@@ -68,7 +55,7 @@ export function applyToIsland() {
   var existingLetter = avatarWrap.querySelector('.user-island-avatar-letter');
   var url = profile.avatarCustom
     ? profile.avatarCustom
-    : avatarUrl(profile.avatarStyle || 'thumbs', getAvatarSeed(), 32);
+    : avatarUrl(profile.avatarStyle || 'imprint', getAvatarSeed(), 32);
 
   if (existingImg) {
     existingImg.src = url;
@@ -81,6 +68,12 @@ export function applyToIsland() {
   }
 
   nameEl.textContent = displayName;
+  document.body.dataset.myAvatarUrl = url;
+  document.body.dataset.myDisplayName = displayName;
+  var messageAvatars = document.querySelectorAll('.dm-bubble-avatar-me, .icon-strip-me-avatar');
+  for (var avatarIndex = 0; avatarIndex < messageAvatars.length; avatarIndex++) {
+    messageAvatars[avatarIndex].src = url;
+  }
 
   // Show CTA if user hasn't personalized their name
   var ctaEl = document.querySelector('.user-island-cta');
@@ -104,7 +97,7 @@ export function showAvatarPositioner(img, objectUrl, onDone) {
   var offsetX = 0;
   var offsetY = 0;
 
-  // Fit image so shorter side fills the circle
+  // Fit image so the shorter side fills the imprint frame.
   var baseScale = Math.max(viewSize / img.width, viewSize / img.height);
 
   function clampOffsets() {
@@ -287,22 +280,20 @@ function showPopover() {
   popoverEl.className = 'profile-popover';
 
   var displayName = profile.name || '';
-  var currentColor = profile.avatarColor || '#7c3aed';
-  var currentStyle = profile.avatarStyle || 'thumbs';
+  var currentStyle = profile.avatarStyle || 'imprint';
   var seed = getAvatarSeed();
-  previewSeed = seed;
 
   var html = '';
 
   // Banner + close
-  html += '<div class="profile-banner" style="background:' + currentColor + '">';
+  html += '<div class="profile-banner">';
   html += '<button class="profile-close-btn">&times;</button>';
   html += '</div>';
 
   // Avatar row (overlapping banner)
   html += '<div class="profile-avatar-row">';
   html += '<div class="profile-popover-avatar">';
-  html += '<img class="profile-popover-avatar-img" src="' + (profile.avatarCustom || avatarUrl(currentStyle, seed, 80)) + '" alt="avatar">';
+  html += '<img class="profile-popover-avatar-img" src="' + (profile.avatarCustom || avatarUrl(currentStyle, seed, 80)) + '" alt="' + escapeAttr(displayName || 'Clay user') + '">';
   html += '</div>';
   html += '<div class="profile-name-display">' + escapeAttr(displayName || 'Awesome Clay User') + '</div>';
   html += '</div>';
@@ -316,40 +307,18 @@ function showPopover() {
   html += '<input type="text" class="profile-field-input" id="profile-name-input" value="' + escapeAttr(displayName) + '" placeholder="Enter your name..." maxlength="50" spellcheck="false" autocomplete="off">';
   html += '</div>';
 
-  // Avatar picker
+  // Clay Imprint or custom photo
   html += '<div class="profile-field">';
-  html += '<label class="profile-field-label">Avatar <button class="profile-shuffle-btn" title="Shuffle">' + iconHtml('shuffle') + '</button></label>';
-  html += '<div class="profile-avatar-grid">';
-  // Upload button as first cell
-  var uploadActive = profile.avatarCustom ? ' profile-avatar-option-active' : '';
-  html += '<button class="profile-avatar-option profile-avatar-upload' + uploadActive + '" title="Upload photo">';
-  if (profile.avatarCustom) {
-    html += '<img src="' + profile.avatarCustom + '" alt="Custom" class="profile-avatar-custom-preview">';
-  } else {
-    html += '<span class="profile-avatar-upload-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>';
-  }
-  html += '</button>';
-  html += '<input type="file" id="profile-avatar-file" accept="image/*" style="display:none">';
-  for (var j = 0; j < AVATAR_STYLES.length; j++) {
-    var st = AVATAR_STYLES[j];
-    var activeS = (!profile.avatarCustom && currentStyle === st.id) ? ' profile-avatar-option-active' : '';
-    html += '<button class="profile-avatar-option' + activeS + '" data-style="' + st.id + '" title="' + st.name + '">';
-    html += '<img src="' + avatarUrl(st.id, seed, 40) + '" alt="' + st.name + '">';
-    html += '</button>';
-  }
+  html += '<label class="profile-field-label">Identity</label>';
+  html += '<div class="profile-imprint-panel">';
+  html += '<div class="profile-imprint-preview"><img src="' + avatarUrl(currentStyle, seed, 72) + '" alt="Generated Clay Imprint"><span><strong>Clay Imprint</strong><small>Unique to this identity</small></span></div>';
+  html += '<div class="profile-imprint-actions">';
+  html += '<button class="profile-use-imprint' + (!profile.avatarCustom ? ' is-active' : '') + '" type="button">Use imprint</button>';
+  html += '<button class="profile-regenerate-imprint" type="button" title="Generate another imprint">' + iconHtml('shuffle') + ' New imprint</button>';
+  html += '<button class="profile-avatar-upload' + (profile.avatarCustom ? ' is-active' : '') + '" type="button">Upload photo</button>';
   html += '</div>';
   html += '</div>';
-
-  // Color
-  html += '<div class="profile-field">';
-  html += '<label class="profile-field-label">Color</label>';
-  html += '<div class="profile-color-grid">';
-  for (var k = 0; k < COLORS.length; k++) {
-    var c = COLORS[k];
-    var activeC = (currentColor === c) ? ' profile-color-active' : '';
-    html += '<button class="profile-color-swatch' + activeC + '" data-color="' + c + '" style="background:' + c + '"></button>';
-  }
-  html += '</div>';
+  html += '<input type="file" id="profile-avatar-file" accept="image/*" style="display:none">';
   html += '</div>';
 
   html += '</div>'; // close body
@@ -403,15 +372,11 @@ function showPopover() {
               profile.avatarCustom = data.avatar;
               applyToIsland();
               updatePopoverHeader();
-              if (popoverEl) {
-                popoverEl.querySelectorAll('.profile-avatar-option').forEach(function(b) {
-                  b.classList.remove('profile-avatar-option-active');
-                });
-              }
               if (uploadBtn) {
-                uploadBtn.classList.add('profile-avatar-option-active');
-                uploadBtn.innerHTML = '<img src="' + data.avatar + '" alt="Custom" class="profile-avatar-custom-preview">';
+                uploadBtn.classList.add('is-active');
               }
+              var imprintButton = popoverEl && popoverEl.querySelector('.profile-use-imprint');
+              if (imprintButton) imprintButton.classList.remove('is-active');
               debouncedSave();
             }
           });
@@ -431,45 +396,25 @@ function showPopover() {
     });
   }
 
-  // Avatar style — clicking confirms both the style and the current previewSeed
-  popoverEl.querySelectorAll('.profile-avatar-option[data-style]').forEach(function(btn) {
-    btn.addEventListener('click', function() {
-      profile.avatarCustom = '';
-      profile.avatarStyle = btn.dataset.style;
-      profile.avatarSeed = previewSeed;
-      applyToIsland();
-      updatePopoverHeader();
-      popoverEl.querySelectorAll('.profile-avatar-option').forEach(function(b) {
-        b.classList.remove('profile-avatar-option-active');
-      });
-      btn.classList.add('profile-avatar-option-active');
-      // Reset upload button to + icon
-      var upBtn = popoverEl.querySelector('.profile-avatar-upload');
-      if (upBtn) upBtn.innerHTML = '<span class="profile-avatar-upload-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>';
-      debouncedSave();
-    });
-  });
-
-  // Shuffle button — only changes preview candidates, not the actual profile
-  popoverEl.querySelector('.profile-shuffle-btn').addEventListener('click', function(e) {
-    e.stopPropagation();
-    previewSeed = Math.random().toString(36).substring(2, 10);
-    refreshAvatarPreviews();
+  popoverEl.querySelector('.profile-use-imprint').addEventListener('click', function() {
+    profile.avatarCustom = '';
+    applyToIsland();
+    updatePopoverHeader();
+    popoverEl.querySelector('.profile-use-imprint').classList.add('is-active');
+    popoverEl.querySelector('.profile-avatar-upload').classList.remove('is-active');
+    debouncedSave();
   });
 
-  // Color swatches
-  popoverEl.querySelectorAll('.profile-color-swatch').forEach(function(btn) {
-    btn.addEventListener('click', function() {
-      profile.avatarColor = btn.dataset.color;
-      applyToIsland();
-      var bannerEl = popoverEl.querySelector('.profile-banner');
-      if (bannerEl) bannerEl.style.background = profile.avatarColor;
-      popoverEl.querySelectorAll('.profile-color-swatch').forEach(function(b) {
-        b.classList.remove('profile-color-active');
-      });
-      btn.classList.add('profile-color-active');
-      debouncedSave();
-    });
+  popoverEl.querySelector('.profile-regenerate-imprint').addEventListener('click', function() {
+    profile.avatarCustom = '';
+    profile.avatarStyle = 'imprint';
+    profile.avatarSeed = Math.random().toString(36).substring(2, 10);
+    applyToIsland();
+    updatePopoverHeader();
+    refreshImprintPreview(popoverEl, profile.avatarStyle, profile.avatarSeed);
+    popoverEl.querySelector('.profile-use-imprint').classList.add('is-active');
+    popoverEl.querySelector('.profile-avatar-upload').classList.remove('is-active');
+    debouncedSave();
   });
 
   // Prevent clicks inside popover from closing it
@@ -497,17 +442,15 @@ function updatePopoverHeader() {
   var nd = popoverEl.querySelector('.profile-name-display');
   if (img) img.src = profile.avatarCustom
     ? profile.avatarCustom
-    : avatarUrl(profile.avatarStyle || 'thumbs', getAvatarSeed(), 80);
+    : avatarUrl(profile.avatarStyle || 'imprint', getAvatarSeed(), 80);
   if (nd) nd.textContent = profile.name || 'Awesome Clay User';
 }
 
 
-function refreshAvatarPreviews() {
-  if (!popoverEl) return;
-  popoverEl.querySelectorAll('.profile-avatar-option[data-style] img').forEach(function(img) {
-    var style = img.closest('.profile-avatar-option').dataset.style;
-    img.src = avatarUrl(style, previewSeed, 40);
-  });
+function refreshImprintPreview(root, style, seed) {
+  if (!root) return;
+  var img = root.querySelector('.profile-imprint-preview img');
+  if (img) img.src = avatarUrl(style || 'imprint', seed || 'anonymous', 72);
 }
 
 function closeOnOutside(e) {
@@ -610,7 +553,6 @@ export function getProfileLang() {
 // --- Mate profile popover (reuses same UI minus language) ---
 var matePopoverEl = null;
 var mateSaveTimer = null;
-var matePreviewSeed = '';
 
 export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
   if (matePopoverEl) {
@@ -620,11 +562,10 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
 
   var mp = mateData.profile || {};
   var mateName = mp.displayName || mateData.name || '';
-  var mateColor = mp.avatarColor || '#7c3aed';
-  var mateStyle = mp.avatarStyle || 'bottts';
+  var mateColor = mp.avatarColor || '#5857fc';
+  var mateStyle = mp.avatarStyle || 'imprint';
   var mateSeed = mp.avatarSeed || mateData.id || 'mate';
   var mateCustom = mp.avatarCustom || '';
-  matePreviewSeed = mateSeed;
 
   matePopoverEl = document.createElement('div');
   matePopoverEl.className = 'profile-popover mate-profile-popover';
@@ -632,15 +573,15 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
   var html = '';
 
   // Banner + close
-  html += '<div class="profile-banner" style="background:' + mateColor + '">';
+  html += '<div class="profile-banner">';
   html += '<button class="profile-close-btn">&times;</button>';
   html += '</div>';
 
   // Avatar row
-  var mateAvatarSrc = mateCustom ? mateCustom : avatarUrl(mateStyle, mateSeed, 80);
+  var mateAvatarSrc = mateCustom ? mateCustom : mateMarkUrl(mateName || 'Mate', 80);
   html += '<div class="profile-avatar-row">';
   html += '<div class="profile-popover-avatar">';
-  html += '<img class="profile-popover-avatar-img" src="' + mateAvatarSrc + '" alt="avatar">';
+  html += '<img class="profile-popover-avatar-img" src="' + mateAvatarSrc + '" alt="' + escapeAttr(mateName || 'Clay Mate') + '">';
   html += '</div>';
   html += '<div class="profile-name-display">' + escapeAttr(mateName || 'New Mate') + '</div>';
   html += '</div>';
@@ -658,40 +599,17 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
   var mateAvatarLocked = mp.avatarLocked || false;
   if (!mateAvatarLocked) {
   html += '<div class="profile-field">';
-  html += '<label class="profile-field-label">Avatar <button class="profile-shuffle-btn" title="Shuffle">' + iconHtml('shuffle') + '</button></label>';
-  html += '<div class="profile-avatar-grid">';
-  // Upload button as first cell
-  var mateUploadActive = mateCustom ? ' profile-avatar-option-active' : '';
-  html += '<button class="profile-avatar-option profile-avatar-upload' + mateUploadActive + '" title="Upload photo">';
-  if (mateCustom) {
-    html += '<img src="' + mateCustom + '" alt="Custom" class="profile-avatar-custom-preview">';
-  } else {
-    html += '<span class="profile-avatar-upload-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>';
-  }
-  html += '</button>';
-  html += '<input type="file" id="mate-profile-avatar-file" accept="image/*" style="display:none">';
-  for (var j = 0; j < AVATAR_STYLES.length; j++) {
-    var st = AVATAR_STYLES[j];
-    var activeS = (!mateCustom && mateStyle === st.id) ? ' profile-avatar-option-active' : '';
-    html += '<button class="profile-avatar-option' + activeS + '" data-style="' + st.id + '" title="' + st.name + '">';
-    html += '<img src="' + avatarUrl(st.id, mateSeed, 40) + '" alt="' + st.name + '">';
-    html += '</button>';
-  }
-  html += '</div>';
+  html += '<label class="profile-field-label">Identity</label>';
+  html += '<div class="profile-imprint-panel">';
+  html += '<div class="profile-imprint-preview"><img src="' + mateMarkUrl(mateName || 'Mate', 72) + '" alt="Clay Mate initial"><span><strong>Mate initial</strong><small>Based on display name</small></span></div>';
+  html += '<div class="profile-imprint-actions profile-mate-mark-actions">';
+  html += '<button class="profile-use-imprint' + (!mateCustom ? ' is-active' : '') + '" type="button">Use initial</button>';
+  html += '<button class="profile-avatar-upload' + (mateCustom ? ' is-active' : '') + '" type="button">Upload image</button>';
   html += '</div>';
-  }
-
-  // Color
-  html += '<div class="profile-field">';
-  html += '<label class="profile-field-label">Color</label>';
-  html += '<div class="profile-color-grid">';
-  for (var k = 0; k < COLORS.length; k++) {
-    var c = COLORS[k];
-    var activeC = (mateColor === c) ? ' profile-color-active' : '';
-    html += '<button class="profile-color-swatch' + activeC + '" data-color="' + c + '" style="background:' + c + '"></button>';
-  }
   html += '</div>';
+  html += '<input type="file" id="mate-profile-avatar-file" accept="image/*" style="display:none">';
   html += '</div>';
+  }
 
   html += '</div>'; // close body
 
@@ -746,7 +664,9 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
     var nd = matePopoverEl.querySelector('.profile-name-display');
     if (img) img.src = mateProfile.avatarCustom
       ? mateProfile.avatarCustom
-      : avatarUrl(mateProfile.avatarStyle, mateProfile.avatarSeed, 80);
+      : mateMarkUrl(mateProfile.displayName || 'Mate', 80);
+    var preview = matePopoverEl.querySelector('.profile-imprint-preview img');
+    if (preview) preview.src = mateMarkUrl(mateProfile.displayName || 'Mate', 72);
     if (nd) nd.textContent = mateProfile.displayName || 'New Mate';
   }
 
@@ -791,15 +711,11 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
             if (data.ok) {
               mateProfile.avatarCustom = data.avatar;
               updateMatePopoverHeader();
-              if (matePopoverEl) {
-                matePopoverEl.querySelectorAll('.profile-avatar-option').forEach(function(b) {
-                  b.classList.remove('profile-avatar-option-active');
-                });
-              }
               if (mateUploadBtn) {
-                mateUploadBtn.classList.add('profile-avatar-option-active');
-                mateUploadBtn.innerHTML = '<img src="' + data.avatar + '" alt="Custom" class="profile-avatar-custom-preview">';
+                mateUploadBtn.classList.add('is-active');
               }
+              var imprintButton = matePopoverEl && matePopoverEl.querySelector('.profile-use-imprint');
+              if (imprintButton) imprintButton.classList.remove('is-active');
               debouncedMateUpdate();
             }
           });
@@ -819,48 +735,15 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
     });
   }
 
-  // Avatar style
-  matePopoverEl.querySelectorAll('.profile-avatar-option[data-style]').forEach(function(btn) {
-    btn.addEventListener('click', function() {
+  if (!mateAvatarLocked) {
+    matePopoverEl.querySelector('.profile-use-imprint').addEventListener('click', function() {
       mateProfile.avatarCustom = '';
-      mateProfile.avatarStyle = btn.dataset.style;
-      mateProfile.avatarSeed = matePreviewSeed;
       updateMatePopoverHeader();
-      matePopoverEl.querySelectorAll('.profile-avatar-option').forEach(function(b) {
-        b.classList.remove('profile-avatar-option-active');
-      });
-      btn.classList.add('profile-avatar-option-active');
-      // Reset upload button to + icon
-      var upBtn = matePopoverEl.querySelector('.profile-avatar-upload');
-      if (upBtn) upBtn.innerHTML = '<span class="profile-avatar-upload-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>';
+      matePopoverEl.querySelector('.profile-use-imprint').classList.add('is-active');
+      matePopoverEl.querySelector('.profile-avatar-upload').classList.remove('is-active');
       debouncedMateUpdate();
     });
-  });
-
-  // Shuffle
-  matePopoverEl.querySelector('.profile-shuffle-btn').addEventListener('click', function(e) {
-    e.stopPropagation();
-    matePreviewSeed = Math.random().toString(36).substring(2, 10);
-    if (!matePopoverEl) return;
-    matePopoverEl.querySelectorAll('.profile-avatar-option[data-style] img').forEach(function(img) {
-      var style = img.closest('.profile-avatar-option').dataset.style;
-      img.src = avatarUrl(style, matePreviewSeed, 40);
-    });
-  });
-
-  // Color swatches
-  matePopoverEl.querySelectorAll('.profile-color-swatch').forEach(function(btn) {
-    btn.addEventListener('click', function() {
-      mateProfile.avatarColor = btn.dataset.color;
-      var bannerEl = matePopoverEl.querySelector('.profile-banner');
-      if (bannerEl) bannerEl.style.background = mateProfile.avatarColor;
-      matePopoverEl.querySelectorAll('.profile-color-swatch').forEach(function(b) {
-        b.classList.remove('profile-color-active');
-      });
-      btn.classList.add('profile-color-active');
-      debouncedMateUpdate();
-    });
-  });
+  }
 
   matePopoverEl.addEventListener('click', function(e) { e.stopPropagation(); });
 

package/lib/public/modules/session-actions.js

@@ -29,13 +29,14 @@ function positionMenu() {
   var rect = button.getBoundingClientRect();
   var width = menu.offsetWidth;
   menu.style.top = Math.round(rect.bottom + 6) + "px";
-  menu.style.left = Math.max(8, Math.round(rect.right - width)) + "px";
+  menu.style.left = Math.max(8, Math.min(window.innerWidth - width - 8, Math.round(rect.right - width))) + "px";
 }
 
 function actionRow(icon, label, description) {
   var row = document.createElement("button");
   row.type = "button";
   row.className = "session-actions-row";
+  row.setAttribute("role", "menuitem");
   row.innerHTML = iconHtml(icon, "session-actions-row-icon") +
     '<span class="session-actions-row-copy"><strong></strong><span></span></span>' +
     iconHtml("chevron-right", "session-actions-row-chevron");
@@ -217,7 +218,8 @@ function showHandoffDialog(options) {
 function showMainMenu() {
   closeMenu();
   var el = menuShell("Session actions");
-  var addWorker = actionRow("bot", "Add AI Worker", "Open a second agent beside this session.");
+  var addWorker = actionRow("bot", "Add AI worker", "Open a second agent beside this session.");
+  addWorker.classList.add("is-primary");
   addWorker.addEventListener("click", function () {
     var sessionId = store.get('activeSessionId');
     if (!sessionId) return;
@@ -228,7 +230,7 @@ function showMainMenu() {
       vendor: store.get('currentVendor') || "claude",
     });
   });
-  var handoff = actionRow("forward", "Continue in another agent", "Carry this conversation into a new session.");
+  var handoff = actionRow("send", "Send context to another agent", "Start a new session with this conversation's context.");
   var unavailable = !store.get('sessionHasHistory') || store.get('sessionIsProcessing');
   handoff.disabled = unavailable;
   handoff.title = unavailable ? "Available after the current turn is complete" : "";

package/lib/public/modules/sidebar-mates.js

@@ -262,7 +262,7 @@ export function renderSidebarPresence(onlineUsers) {
 // Presence avatar URL helper
 function presenceAvatarUrl(userOrStyle) {
   if (userOrStyle && typeof userOrStyle === "object") return userAvatarUrl(userOrStyle, 24);
-  return userAvatarUrl({ avatarStyle: userOrStyle || "thumbs" }, 24);
+  return userAvatarUrl({ avatarStyle: userOrStyle || "imprint" }, 24);
 }
 
 // renderUserStrip: call with no args to read from store (subscriber pattern),
@@ -424,7 +424,7 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
       avatar.className = "icon-strip-user-avatar" + (mate.primary ? " icon-strip-primary-mate" : "");
       avatar.src = mateAvatarUrl(mate, 34);
       avatar.alt = mp.displayName || mate.name || "Mate";
-      var mateColor = (mp.avatarColor) || mate.avatarColor || "#7c3aed";
+      var mateColor = (mp.avatarColor) || mate.avatarColor || "#5857fc";
       avatar.style.background = mateColor + "30";
       el.appendChild(avatar);
 
@@ -679,7 +679,7 @@ function toggleDmUserPicker(anchorEl) {
           bItem.style.opacity = "0.7";
           var bAv = document.createElement("img");
           bAv.className = "dm-user-picker-avatar";
-          bAv.src = mateAvatarUrl({ avatarCustom: b.avatarCustom, avatarStyle: b.avatarStyle || "bottts", avatarSeed: b.displayName, id: b.key }, 28);
+          bAv.src = mateAvatarUrl({ avatarCustom: b.avatarCustom, avatarStyle: b.avatarStyle || "imprint", avatarSeed: b.displayName, id: b.key, avatarColor: b.avatarColor }, 28);
           bAv.alt = b.displayName;
           bItem.appendChild(bAv);
           var bNameWrap = document.createElement("div");
@@ -866,7 +866,8 @@ function toggleDmUserPicker(anchorEl) {
         } else {
           avEl.src = mateAvatarUrl({
             avatarCustom: src.avatarCustom,
-            avatarStyle: src.avatarStyle || "bottts",
+            avatarStyle: src.avatarStyle || "imprint",
+            avatarColor: src.avatarColor,
             avatarSeed: src.displayName,
             id: src.key,
           }, 32);

package/lib/public/modules/sidebar-sessions.js

@@ -1543,7 +1543,7 @@ export function updateSessionPresence(presence) {
 
 function presenceAvatarUrl(userOrStyle, seed) {
   if (userOrStyle && typeof userOrStyle === "object") return userAvatarUrl(userOrStyle, 24);
-  return avatarUrl(userOrStyle || "thumbs", seed, 24);
+  return avatarUrl(userOrStyle || "imprint", seed, 24);
 }
 
 function renderPresenceAvatars(el, sessionId) {

package/lib/public/style.css

@@ -8,7 +8,7 @@
 @import url("css/overlays.css?v=20260827-brand3");
 @import url("css/menus.css");
 @import url("css/messages.css?v=20260828-delegated-muted1");
-@import url("css/generated-images.css?v=20260829c");
+@import url("css/generated-images.css?v=20260829-save-details1");
 @import url("css/rewind.css");
 @import url("css/input.css?v=20260828-composer-depth1");
 @import url("css/filebrowser.css?v=20260829-terminal-canvas1");
@@ -38,3 +38,4 @@
 @import url("css/notifications-center.css");
 @import url("css/tui-attention.css?v=20260829-terminal-canvas1");
 @import url("css/pwa-mobile.css?v=20260824f");
+@import url("css/avatar-imprints.css?v=20260829-imprints1");

package/lib/server-auth.js

@@ -414,8 +414,8 @@ function attachAuth(ctx) {
             adminProfile = {
               name: data.displayName || data.username,
               lang: existingProfile.lang || "en-US",
-              avatarColor: existingProfile.avatarColor || "#7c3aed",
-              avatarStyle: existingProfile.avatarStyle || "thumbs",
+              avatarColor: existingProfile.avatarColor || "#5857fc",
+              avatarStyle: existingProfile.avatarStyle || "imprint",
               avatarSeed: existingProfile.avatarSeed || crypto.randomBytes(4).toString("hex"),
             };
           } catch (e) {}