clay-server 3.8.0-beta.1 → 3.8.0-beta.2

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

@@ -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) {}

package/lib/server-dm.js

@@ -28,9 +28,9 @@ function attachDm(ctx) {
             id: otherUser.id,
             displayName: p.name || otherUser.displayName || otherUser.username,
             username: otherUser.username,
-            avatarStyle: p.avatarStyle || "thumbs",
+            avatarStyle: p.avatarStyle || "imprint",
             avatarSeed: p.avatarSeed || otherUser.username,
-            avatarColor: p.avatarColor || "#7c3aed",
+            avatarColor: p.avatarColor || "#5857fc",
             avatarCustom: p.avatarCustom || "",
           };
         }
@@ -69,9 +69,9 @@ function attachDm(ctx) {
             id: mate.id,
             displayName: mp.displayName || mate.name || "New Mate",
             username: mate.id,
-            avatarStyle: mp.avatarStyle || "bottts",
+            avatarStyle: mp.avatarStyle || "imprint",
             avatarSeed: mp.avatarSeed || mate.id,
-            avatarColor: mp.avatarColor || "#6c5ce7",
+            avatarColor: mp.avatarColor || "#5857fc",
             avatarCustom: mp.avatarCustom || "",
             isMate: true,
             primary: !!mate.primary,
@@ -94,9 +94,9 @@ function attachDm(ctx) {
           id: targetUser.id,
           displayName: tp.name || targetUser.displayName || targetUser.username,
           username: targetUser.username,
-          avatarStyle: tp.avatarStyle || "thumbs",
+          avatarStyle: tp.avatarStyle || "imprint",
           avatarSeed: tp.avatarSeed || targetUser.username,
-          avatarColor: tp.avatarColor || "#7c3aed",
+          avatarColor: tp.avatarColor || "#5857fc",
           avatarCustom: tp.avatarCustom || "",
         } : null,
       }));
@@ -191,9 +191,9 @@ function attachDm(ctx) {
           displayName: p.name || u.displayName || u.username,
           username: u.username,
           role: u.role,
-          avatarStyle: p.avatarStyle || "thumbs",
+          avatarStyle: p.avatarStyle || "imprint",
           avatarSeed: p.avatarSeed || u.username,
-          avatarColor: p.avatarColor || "#7c3aed",
+          avatarColor: p.avatarColor || "#5857fc",
           avatarCustom: p.avatarCustom || "",
         };
       });

package/lib/server-mates.js

@@ -152,7 +152,7 @@ function attachMates(ctx) {
             displayName: bDef2.displayName,
             bio: bDef2.bio,
             avatarCustom: bDef2.avatarCustom || "",
-            avatarStyle: bDef2.avatarStyle || "bottts",
+            avatarStyle: bDef2.avatarStyle || "imprint",
             avatarColor: bDef2.avatarColor || "",
           });
         }
@@ -186,7 +186,7 @@ function attachMates(ctx) {
               displayName: bDef3.displayName,
               bio: bDef3.bio,
               avatarCustom: bDef3.avatarCustom || "",
-              avatarStyle: bDef3.avatarStyle || "bottts",
+              avatarStyle: bDef3.avatarStyle || "imprint",
               avatarColor: bDef3.avatarColor || "",
             });
           }
@@ -227,7 +227,7 @@ function attachMates(ctx) {
         for (var abkR = 0; abkR < missingKeysR.length; abkR++) {
           var bDefR = builtinDefsR.getBuiltinByKey(missingKeysR[abkR]);
           if (bDefR) {
-            availableBuiltinsR.push({ key: bDefR.key, displayName: bDefR.displayName, bio: bDefR.bio, avatarCustom: bDefR.avatarCustom || "", avatarStyle: bDefR.avatarStyle || "bottts", avatarColor: bDefR.avatarColor || "" });
+            availableBuiltinsR.push({ key: bDefR.key, displayName: bDefR.displayName, bio: bDefR.bio, avatarCustom: bDefR.avatarCustom || "", avatarStyle: bDefR.avatarStyle || "imprint", avatarColor: bDefR.avatarColor || "" });
           }
         }
         ws.send(JSON.stringify({ type: "mate_created", mate: newMate, projectSlug: readdSlug, availableBuiltins: availableBuiltinsR, dmFavorites: updatedFavsR }));

package/lib/server-settings.js

@@ -21,7 +21,7 @@ function attachSettings(ctx) {
           res.end('{"error":"unauthorized"}');
           return true;
         }
-        var profile = mu.profile || { name: "", lang: "en-US", avatarColor: "#7c3aed", avatarStyle: "thumbs", avatarSeed: "", avatarCustom: "" };
+        var profile = mu.profile || { name: "", lang: "en-US", avatarColor: "#5857fc", avatarStyle: "imprint", avatarSeed: "", avatarCustom: "" };
         profile.username = mu.username;
         profile.userId = mu.id;
         profile.role = mu.role;
@@ -35,7 +35,7 @@ function attachSettings(ctx) {
         res.end(JSON.stringify(profile));
         return true;
       }
-      var profile = { name: "", lang: "en-US", avatarColor: "#7c3aed", avatarStyle: "thumbs", avatarSeed: "", avatarCustom: "" };
+      var profile = { name: "", lang: "en-US", avatarColor: "#5857fc", avatarStyle: "imprint", avatarSeed: "", avatarCustom: "" };
       try {
         var raw = fs.readFileSync(profilePath, "utf8");
         var saved = JSON.parse(raw);