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

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

@@ -72,8 +72,8 @@ function createCursorElement(userId, displayName, color, avatarStyle, avatarSeed
   // Avatar
   var avatarImg = document.createElement("img");
   avatarImg.className = "remote-cursor-avatar";
-  avatarImg.src = avatarCustom ? avatarCustom : avatarUrl(avatarStyle || "thumbs", avatarSeed || userId, 16);
-  avatarImg.style.cssText = "width:14px;height:14px;border-radius:50%;background:#fff;flex-shrink:0;";
+  avatarImg.src = avatarCustom ? avatarCustom : avatarUrl(avatarStyle || "imprint", avatarSeed || userId, 16);
+  avatarImg.style.cssText = "width:14px;height:14px;border-radius:4px;background:#fff;flex-shrink:0;";
   tag.appendChild(avatarImg);
 
   // Name label

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

@@ -215,7 +215,7 @@ export function enterDmMode(key, targetUser, messages) {
     var termBtn = document.getElementById("terminal-toggle-btn");
     if (termBtn) termBtn.style.display = "none";
     // Apply mate color to chat title bar and panels
-    var mateColor = (targetUser.profile && targetUser.profile.avatarColor) || targetUser.avatarColor || "#7c3aed";
+    var mateColor = (targetUser.profile && targetUser.profile.avatarColor) || targetUser.avatarColor || "#5857fc";
     document.body.style.setProperty("--mate-color", mateColor);
     document.body.style.setProperty("--mate-color-tint", mateColor + "0a");
     document.body.classList.add("mate-dm-active");
@@ -223,19 +223,12 @@ export function enterDmMode(key, targetUser, messages) {
     var mp = targetUser.profile || {};
     var mateAvUrlDm = mateAvatarUrl(targetUser, 36);
     var myUser = store.get('cachedAllUsers').find(function (u) { return u.id === store.get('myUserId'); });
-    if (!myUser) {
-      try { var cached = JSON.parse(localStorage.getItem("clay_my_user") || "null"); if (cached) myUser = cached; } catch(e) {}
-    }
     var myAvatarUrl = userAvatarUrl(myUser || { id: store.get('myUserId') }, 36);
     var myDisplayName = (myUser && myUser.displayName) || "";
     document.body.dataset.mateAvatarUrl = mateAvUrlDm;
     document.body.dataset.mateName = mp.displayName || targetUser.displayName || targetUser.name || "";
     document.body.dataset.myAvatarUrl = myAvatarUrl;
     document.body.dataset.myDisplayName = myDisplayName;
-    // Cache my info for restore after hard refresh
-    if (myUser) {
-      try { localStorage.setItem("clay_my_user", JSON.stringify({ displayName: myUser.displayName, avatarStyle: myUser.avatarStyle, avatarSeed: myUser.avatarSeed, avatarCustom: myUser.avatarCustom, username: myUser.username })); } catch(e) {}
-    }
     var titleBarContent = document.querySelector(".title-bar-content");
     if (titleBarContent) {
       titleBarContent.style.background = mateColor;

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

@@ -95,7 +95,7 @@ export function processMessage(msg) {
         if (headerTitleEl) headerTitleEl.textContent = _mdn;
         var _tbpn = document.getElementById("title-bar-project-name");
         if (_tbpn) _tbpn.textContent = _mdn;
-        var _mc2 = (store.get('dmTargetUser').profile && store.get('dmTargetUser').profile.avatarColor) || store.get('dmTargetUser').avatarColor || "#7c3aed";
+        var _mc2 = (store.get('dmTargetUser').profile && store.get('dmTargetUser').profile.avatarColor) || store.get('dmTargetUser').avatarColor || "#5857fc";
         var _tbc2 = document.querySelector(".title-bar-content");
         if (_tbc2) { _tbc2.style.background = _mc2; _tbc2.classList.add("mate-dm-active"); }
         document.body.classList.add("mate-dm-active");
@@ -299,7 +299,7 @@ export function processMessage(msg) {
           var tbProjectName = document.getElementById("title-bar-project-name");
           if (tbProjectName) tbProjectName.textContent = _mateDN;
           // Re-apply mate title bar styling (may be lost during project switch)
-          var _mc = (store.get('dmTargetUser').profile && store.get('dmTargetUser').profile.avatarColor) || store.get('dmTargetUser').avatarColor || "#7c3aed";
+          var _mc = (store.get('dmTargetUser').profile && store.get('dmTargetUser').profile.avatarColor) || store.get('dmTargetUser').avatarColor || "#5857fc";
           var _tbc = document.querySelector(".title-bar-content");
           if (_tbc) { _tbc.style.background = _mc; _tbc.classList.add("mate-dm-active"); }
           document.body.classList.add("mate-dm-active");

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

@@ -257,12 +257,13 @@ export function updateProjectList(msg) {
     if (msg.dmConversations) store.set({ cachedDmConversations: msg.dmConversations });
     // renderUserStrip is handled by the store subscriber
     var st2 = store.snap();
-    if (document.body.classList.contains("mate-dm-active") || document.body.classList.contains("wide-view")) {
-      var refreshedMyUser = st2.cachedAllUsers.find(function (u) { return u.id === st2.myUserId; });
-      if (refreshedMyUser) {
-        document.body.dataset.myDisplayName = refreshedMyUser.displayName || refreshedMyUser.username || "";
-        document.body.dataset.myAvatarUrl = userAvatarUrl(refreshedMyUser, 36);
-        try { localStorage.setItem("clay_my_user", JSON.stringify({ displayName: refreshedMyUser.displayName, username: refreshedMyUser.username, avatarStyle: refreshedMyUser.avatarStyle, avatarSeed: refreshedMyUser.avatarSeed, avatarCustom: refreshedMyUser.avatarCustom })); } catch(e) {}
+    var refreshedMyUser = st2.cachedAllUsers.find(function (u) { return u.id === st2.myUserId; });
+    if (refreshedMyUser) {
+      document.body.dataset.myDisplayName = refreshedMyUser.displayName || refreshedMyUser.username || "";
+      document.body.dataset.myAvatarUrl = userAvatarUrl(refreshedMyUser, 36);
+      var myMessageAvatars = document.querySelectorAll('.dm-bubble-avatar-me');
+      for (var avatarIndex = 0; avatarIndex < myMessageAvatars.length; avatarIndex++) {
+        myMessageAvatars[avatarIndex].src = document.body.dataset.myAvatarUrl;
       }
     }
     // Render my avatar (always present, hidden behind user-island)

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

@@ -311,7 +311,6 @@ export function addScheduledMessageBubble(text, resetsAt) {
   if (isChannel) {
     // Channel mode: avatar + header with scheduled badge + message
     var _me = store.get('cachedAllUsers').find(function (u) { return u.id === store.get('myUserId'); });
-    if (!_me) { try { _me = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch(e) {} }
     var _myName = document.body.dataset.myDisplayName || (_me && (_me.displayName || _me.username)) || "Me";
 
     var avi = document.createElement("img");

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

@@ -552,9 +552,6 @@ export function addUserMessage(text, images, pastes, fromUserId, fromUserName, d
     _displayName = fromUserName || (_targetUser && (_targetUser.displayName || _targetUser.username)) || "User";
   } else {
     _targetUser = cachedAllUsers.find(function (u) { return u.id === myUserId; });
-    if (!_targetUser) {
-      try { _targetUser = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch(e) {}
-    }
     _displayName = document.body.dataset.myDisplayName || "";
     if (!_displayName) {
       _displayName = (_targetUser && (_targetUser.displayName || _targetUser.username)) || "Me";

package/lib/public/modules/avatar-imprint.js

@@ -0,0 +1,134 @@
+// Clay Imprints: deterministic SVG identities derived from a stable seed.
+
+var PAPER = "#f1efe8";
+var INK = "#1b1b1a";
+var LIGHT_BASE = "#e7e5de";
+var LIGHT_FIELD = "#333330";
+var REGISTRATION_INDIGO = "#5857fc";
+var BRAND_GREEN = "#07e5a3";
+
+function hashString(value) {
+  var text = String(value || "anonymous");
+  var hash = 2166136261;
+  for (var index = 0; index < text.length; index++) {
+    hash ^= text.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+
+function makeRandom(seed) {
+  var state = seed >>> 0;
+  return function nextRandom() {
+    state += 0x6d2b79f5;
+    var value = state;
+    value = Math.imul(value ^ (value >>> 15), value | 1);
+    value ^= value + Math.imul(value ^ (value >>> 7), value | 61);
+    return ((value ^ (value >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function between(random, min, max) {
+  return min + random() * (max - min);
+}
+
+function number(value) {
+  return Math.round(value * 100) / 100;
+}
+
+function xmlText(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function legacyIdentity(style, seed) {
+  var sourceStyle = String(style || "imprint").toLowerCase();
+  var sourceSeed = String(seed || "anonymous");
+  if (sourceStyle === "imprint") return sourceSeed;
+  return "legacy:" + sourceStyle + ":" + sourceSeed;
+}
+
+function curvePath(y, bow, endOffset) {
+  return "M -28 " + number(y) +
+    " C 17 " + number(y + bow) +
+    ", 71 " + number(y - bow) +
+    ", 124 " + number(y + endOffset);
+}
+
+function cutPath(random) {
+  var start = between(random, 37, 52);
+  var first = between(random, 14, 84);
+  var second = between(random, 12, 86);
+  var end = between(random, 40, 64);
+  return "M -22 " + number(start) + " C 21 " + number(first) + ", 73 " + number(second) + ", 118 " + number(end);
+}
+
+export function imprintSvg(options) {
+  var settings = options || {};
+  var size = Math.max(12, Math.min(256, Number(settings.size) || 64));
+  var identity = legacyIdentity(settings.style, settings.seed);
+  var hash = hashString(identity);
+  var random = makeRandom(hash);
+  var darkBase = random() > 0.52;
+  var base = darkBase ? INK : LIGHT_BASE;
+  var field = darkBase ? PAPER : LIGHT_FIELD;
+  var accent = REGISTRATION_INDIGO;
+  var rotation = Math.floor(random() * 4) * 90;
+  var bandWidth = between(random, 37, 56);
+  var secondaryWidth = between(random, 14, 24);
+  var cutWidth = between(random, 15, 25);
+  var firstY = between(random, 24, 42);
+  var secondY = between(random, 58, 78);
+  var firstBow = between(random, -34, 34);
+  var secondBow = between(random, -32, 32);
+  var firstPath = curvePath(firstY, firstBow, 6);
+  var secondPath = curvePath(secondY, -secondBow, -5);
+  var contours = "";
+
+  if (size >= 40) {
+    for (var contour = -1; contour <= 1; contour++) {
+      var offset = contour * 5.2;
+      contours += '<path d="' + curvePath(firstY + offset, firstBow, 0) + '" fill="none" stroke="' +
+        (darkBase ? PAPER : INK) + '" stroke-opacity="0.2" stroke-width="0.8"/>';
+    }
+  }
+
+  var clipId = "imprint-" + hash.toString(16);
+  return '<svg xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size +
+    '" viewBox="0 0 96 96"><defs><clipPath id="' + clipId +
+    '"><rect width="96" height="96" rx="24"/></clipPath></defs><g clip-path="url(#' + clipId +
+    ')"><rect width="96" height="96" fill="' + base + '"/><g transform="rotate(' + rotation +
+    ' 48 48)"><path d="' + firstPath + '" fill="none" stroke="' + field + '" stroke-width="' +
+    number(bandWidth) + '" stroke-linecap="square"/><path d="' + secondPath + '" fill="none" stroke="' +
+    accent + '" stroke-width="' + number(secondaryWidth) + '" stroke-linecap="square"/><path d="' +
+    cutPath(random) + '" fill="none" stroke="' + base + '" stroke-width="' + number(cutWidth) +
+    '" stroke-linecap="square"/>' + contours + '</g></g><rect x="0.5" y="0.5" width="95" height="95" rx="23.5" fill="none" stroke="' +
+    (darkBase ? "#000000" : INK) + '" stroke-opacity="0.16"/></svg>';
+}
+
+export function imprintDataUrl(options) {
+  return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(imprintSvg(options));
+}
+
+export function mateMarkSvg(options) {
+  var settings = options || {};
+  var size = Math.max(12, Math.min(256, Number(settings.size) || 64));
+  var identity = String(settings.seed || "M").trim();
+  var initial = Array.from(identity || "M")[0].toUpperCase();
+  var palette = [
+    { background: REGISTRATION_INDIGO, foreground: PAPER },
+    { background: BRAND_GREEN, foreground: INK },
+    { background: PAPER, foreground: REGISTRATION_INDIGO },
+  ][initial.codePointAt(0) % 3];
+  var clipId = "mate-mark";
+
+  return '<svg xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size +
+    '" viewBox="0 0 96 96"><defs><clipPath id="' + clipId +
+    '"><rect width="96" height="96" rx="24"/></clipPath></defs><g clip-path="url(#' + clipId +
+    ')"><rect width="96" height="96" fill="' + palette.background + '"/><text x="48" y="50" fill="' + palette.foreground +
+    '" font-family="Arial, Helvetica, sans-serif" font-size="43" font-weight="600" text-anchor="middle" dominant-baseline="middle">' +
+    xmlText(initial) + '</text></g><rect x="0.5" y="0.5" width="95" height="95" rx="23.5" fill="none" stroke="#000000" stroke-opacity="0.18"/></svg>';
+}
+
+export function mateMarkDataUrl(options) {
+  return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(mateMarkSvg(options));
+}

package/lib/public/modules/avatar.js

@@ -1,36 +1,42 @@
-// Centralized avatar URL builder and style definitions
-// All DiceBear avatar URLs should be constructed through this module.
+// Centralized Clay Imprint URL builder for people and Mates.
+import { imprintDataUrl, mateMarkDataUrl } from './avatar-imprint.js';
 
-export var 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' },
-];
+var imprintCache = new Map();
+var mateMarkCache = new Map();
 
-// Build a DiceBear avatar URL from style, seed, and optional size.
+// Legacy style remains part of the identity hash so existing selections map
+// deterministically into the new Clay Imprint system.
 export function avatarUrl(style, seed, size) {
-  var s = encodeURIComponent(seed || 'anonymous');
-  return 'https://api.dicebear.com/9.x/' + (style || 'thumbs') + '/svg?seed=' + s + '&size=' + (size || 64);
+  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;
 }
 
 // Build avatar URL for a user object, preferring custom avatar if set.
 export function userAvatarUrl(user, size) {
   if (user && user.avatarCustom) return user.avatarCustom;
-  var style = (user && user.avatarStyle) || 'thumbs';
+  var style = (user && user.avatarStyle) || 'imprint';
   var seed = (user && (user.avatarSeed || user.username || user.id)) || 'anonymous';
   return avatarUrl(style, seed, size);
 }
 
+export function mateMarkUrl(seed, size) {
+  var cacheKey = [seed || 'mate', size || 64].join('|');
+  if (mateMarkCache.has(cacheKey)) return mateMarkCache.get(cacheKey);
+  var url = mateMarkDataUrl({ seed: seed || 'mate', size: size || 64 });
+  if (mateMarkCache.size >= 256) mateMarkCache.delete(mateMarkCache.keys().next().value);
+  mateMarkCache.set(cacheKey, url);
+  return url;
+}
+
 // Build avatar URL for a mate object, preferring custom avatar if set.
 export function mateAvatarUrl(mate, size) {
-  if (!mate) return avatarUrl('bottts', 'mate', size);
+  if (!mate) return mateMarkUrl('mate', size);
   var p = mate.profile || mate;
   if (p.avatarCustom || mate.avatarCustom) return p.avatarCustom || mate.avatarCustom;
-  var style = p.avatarStyle || mate.avatarStyle || 'bottts';
-  var seed = p.avatarSeed || mate.avatarSeed || mate.id || 'mate';
-  return avatarUrl(style, seed, size);
+  var identity = p.displayName || mate.name || mate.displayName || 'Mate';
+  return mateMarkUrl(identity, size);
 }

package/lib/public/modules/debate.js

@@ -53,7 +53,15 @@ export function resetDebateState() {
 }
 
 function buildAvatarUrl(meta) {
-  return "https://api.dicebear.com/7.x/" + (meta.avatarStyle || "bottts") + "/svg?seed=" + encodeURIComponent(meta.avatarSeed || meta.mateId || "mate");
+  return mateAvatarUrl({
+    id: meta.mateId,
+    profile: {
+      avatarStyle: meta.avatarStyle || "imprint",
+      avatarSeed: meta.avatarSeed || meta.mateId || "mate",
+      avatarColor: meta.avatarColor || "#5857fc",
+      avatarCustom: meta.avatarCustom || "",
+    },
+  }, 32);
 }
 
 // --- Float info panel ---
@@ -943,12 +951,9 @@ function createPanelItem(mate) {
   cb.type = "checkbox";
   item.appendChild(cb);
 
-  var avatarSrc = "https://api.dicebear.com/7.x/" +
-    ((mate.profile && mate.profile.avatarStyle) || "bottts") +
-    "/svg?seed=" + encodeURIComponent((mate.profile && mate.profile.avatarSeed) || mate.id);
   var avi = document.createElement("img");
   avi.className = "debate-panel-item-avatar";
-  avi.src = avatarSrc;
+  avi.src = mateAvatarUrl(mate, 32);
   item.appendChild(avi);
 
   var info = document.createElement("div");

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

@@ -139,7 +139,7 @@ export function showMateSidebar(mateId, mateData) {
   var profile = mateData.profile || mateData || {};
   var displayName = profile.displayName || mateData.displayName || mateData.name || "Mate";
 
-  var mateColor = profile.avatarColor || mateData.avatarColor || "#7c3aed";
+  var mateColor = profile.avatarColor || mateData.avatarColor || "#5857fc";
 
   var mateAvUrl = mateAvatarUrl(mateData, 32);
   if (avatarEl) avatarEl.src = mateAvUrl;
@@ -267,7 +267,7 @@ export function updateMateSidebarProfile(mateData) {
   if (!columnEl || !mateData) return;
   var profile = mateData.profile || mateData || {};
   var displayName = profile.displayName || mateData.displayName || mateData.name || "Mate";
-  var mateColor = profile.avatarColor || mateData.avatarColor || "#7c3aed";
+  var mateColor = profile.avatarColor || mateData.avatarColor || "#5857fc";
 
   if (avatarEl) {
     avatarEl.src = mateAvatarUrl(mateData, 32);

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";