clay-server 2.17.0-beta.7 → 2.17.0-beta.8

package/lib/project.js

@@ -246,6 +246,7 @@ function createProjectContext(opts) {
           username: u.username,
           avatarStyle: p.avatarStyle || "thumbs",
           avatarSeed: p.avatarSeed || u.username,
+          avatarCustom: p.avatarCustom || "",
         });
       }
       msg.users = userList;
@@ -2076,6 +2077,7 @@ function createProjectContext(opts) {
         displayName: p.name || u.displayName || u.username,
         avatarStyle: p.avatarStyle || "thumbs",
         avatarSeed: p.avatarSeed || u.username,
+        avatarCustom: p.avatarCustom || "",
       };
       if (msg.type === "cursor_move") {
         cursorMsg.turn = msg.turn;
@@ -3504,6 +3506,7 @@ function createProjectContext(opts) {
         username: u.username,
         avatarStyle: p.avatarStyle || "thumbs",
         avatarSeed: p.avatarSeed || u.username,
+        avatarCustom: p.avatarCustom || "",
       });
     }
     send({ type: "session_presence", presence: presence });
@@ -4124,6 +4127,7 @@ function createProjectContext(opts) {
           username: u.username,
           avatarStyle: p.avatarStyle || "thumbs",
           avatarSeed: p.avatarSeed || u.username,
+          avatarCustom: p.avatarCustom || "",
         });
       }
       status.onlineUsers = onlineUsers;

package/lib/public/app.js

@@ -1,3 +1,4 @@
+import { avatarUrl, userAvatarUrl, mateAvatarUrl } from './modules/avatar.js';
 import { showToast, copyToClipboard, escapeHtml } from './modules/utils.js';
 import { refreshIcons, iconHtml, randomThinkingVerb } from './modules/icons.js';
 import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks, closeMermaidModal, parseEmojis } from './modules/markdown.js';
@@ -651,20 +652,20 @@ import { initLongPress } from './modules/longpress.js';
       document.body.classList.add("mate-dm-active");
       // Build mate avatar URL for DM bubble injection
       var mp = targetUser.profile || {};
-      var mateAvatarUrl = "https://api.dicebear.com/9.x/" + (mp.avatarStyle || targetUser.avatarStyle || "bottts") + "/svg?seed=" + encodeURIComponent(mp.avatarSeed || targetUser.avatarSeed || targetUser.id) + "&size=36";
+      var mateAvUrlDm = mateAvatarUrl(targetUser, 36);
       var myUser = cachedAllUsers.find(function (u) { return u.id === myUserId; });
       if (!myUser) {
         try { var cached = JSON.parse(localStorage.getItem("clay_my_user") || "null"); if (cached) myUser = cached; } catch(e) {}
       }
-      var myAvatarUrl = "https://api.dicebear.com/9.x/" + ((myUser && myUser.avatarStyle) || "thumbs") + "/svg?seed=" + encodeURIComponent((myUser && (myUser.avatarSeed || myUser.username)) || myUserId) + "&size=36";
+      var myAvatarUrl = userAvatarUrl(myUser || { id: myUserId }, 36);
       var myDisplayName = (myUser && myUser.displayName) || "";
-      document.body.dataset.mateAvatarUrl = mateAvatarUrl;
+      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, username: myUser.username })); } catch(e) {}
+        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) {
@@ -677,7 +678,7 @@ import { initLongPress } from './modules/longpress.js';
         var mateMobileAvatar = document.getElementById("mate-mobile-avatar");
         var mateMobileName = document.getElementById("mate-mobile-name");
         var mateMobileStatus = document.getElementById("mate-mobile-status");
-        if (mateMobileAvatar) mateMobileAvatar.src = mateAvatarUrl;
+        if (mateMobileAvatar) mateMobileAvatar.src = mateAvUrlDm;
         if (mateMobileName) mateMobileName.textContent = (mp.displayName || targetUser.displayName || targetUser.name || "");
         if (mateMobileStatus) mateMobileStatus.textContent = "online";
         mateMobileTitle.classList.remove("hidden");
@@ -686,7 +687,7 @@ import { initLongPress } from './modules/longpress.js';
             id: targetUser.id,
             displayName: mp.displayName || targetUser.displayName || targetUser.name || "",
             description: mp.description || targetUser.description || "",
-            avatarUrl: mateAvatarUrl,
+            avatarUrl: mateAvUrlDm,
             color: mateColor
           });
       }
@@ -723,7 +724,7 @@ import { initLongPress } from './modules/longpress.js';
       } else {
         if (dmHeaderBar) dmHeaderBar.style.display = "";
         if (dmAvatar) {
-          dmAvatar.src = "https://api.dicebear.com/9.x/" + (targetUser.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(targetUser.avatarSeed || targetUser.username) + "&size=28";
+          dmAvatar.src = userAvatarUrl(targetUser, 28);
         }
         if (dmName) dmName.textContent = targetUser.displayName;
         if (dmHeaderBar && targetUser.avatarColor) {
@@ -1165,11 +1166,9 @@ import { initLongPress } from './modules/longpress.js';
       avatar.className = "dm-msg-avatar";
       if (isMe) {
         var myUser = cachedAllUsers.find(function (u) { return u.id === myUserId; });
-        var myStyle = myUser ? myUser.avatarStyle : "thumbs";
-        var mySeed = myUser ? (myUser.avatarSeed || myUser.username) : myUserId;
-        avatar.src = "https://api.dicebear.com/9.x/" + (myStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(mySeed) + "&size=36";
+        avatar.src = userAvatarUrl(myUser || { id: myUserId }, 36);
       } else if (dmTargetUser) {
-        avatar.src = "https://api.dicebear.com/9.x/" + (dmTargetUser.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(dmTargetUser.avatarSeed || dmTargetUser.username) + "&size=36";
+        avatar.src = userAvatarUrl(dmTargetUser, 36);
       }
       div.appendChild(avatar);
 
@@ -1224,7 +1223,7 @@ import { initLongPress } from './modules/longpress.js';
 
     var avatar = document.createElement("img");
     avatar.className = "dm-msg-avatar";
-    avatar.src = "https://api.dicebear.com/9.x/" + (dmTargetUser.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(dmTargetUser.avatarSeed || dmTargetUser.username) + "&size=36";
+    avatar.src = userAvatarUrl(dmTargetUser, 36);
     div.appendChild(avatar);
 
     var dots = document.createElement("div");
@@ -1272,10 +1271,10 @@ import { initLongPress } from './modules/longpress.js';
         avatarWrap.className = "home-hub-mate-avatar-wrap";
 
         var mp = mate.profile || {};
-        var avatarUrl = "https://api.dicebear.com/9.x/" + (mp.avatarStyle || mate.avatarStyle || "bottts") + "/svg?seed=" + encodeURIComponent(mp.avatarSeed || mate.avatarSeed || mate.id) + "&size=48";
+        var mateAvUrl = mateAvatarUrl(mate, 48);
         var avatar = document.createElement("img");
         avatar.className = "home-hub-mate-avatar";
-        avatar.src = avatarUrl;
+        avatar.src = mateAvUrl;
         avatar.alt = mp.displayName || mate.displayName || mate.name || "";
         avatarWrap.appendChild(avatar);
 
@@ -1407,7 +1406,7 @@ import { initLongPress } from './modules/longpress.js';
         var refreshedMyUser = cachedAllUsers.find(function (u) { return u.id === myUserId; });
         if (refreshedMyUser) {
           document.body.dataset.myDisplayName = refreshedMyUser.displayName || "";
-          document.body.dataset.myAvatarUrl = "https://api.dicebear.com/9.x/" + (refreshedMyUser.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(refreshedMyUser.avatarSeed || refreshedMyUser.username) + "&size=36";
+          document.body.dataset.myAvatarUrl = userAvatarUrl(refreshedMyUser, 36);
         }
       }
       // Render my avatar (always present, hidden behind user-island)
@@ -1417,7 +1416,7 @@ import { initLongPress } from './modules/longpress.js';
         if (myUser) {
           var meAvatar = document.createElement("img");
           meAvatar.className = "icon-strip-me-avatar";
-          meAvatar.src = "https://api.dicebear.com/9.x/" + (myUser.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(myUser.avatarSeed || myUser.username) + "&size=34";
+          meAvatar.src = userAvatarUrl(myUser, 34);
           meEl.appendChild(meAvatar);
         }
       }
@@ -1433,7 +1432,7 @@ import { initLongPress } from './modules/longpress.js';
         var cu = serverUsers[cui];
         var cuImg = document.createElement("img");
         cuImg.className = "client-avatar";
-        cuImg.src = "https://api.dicebear.com/9.x/" + (cu.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(cu.avatarSeed || cu.username) + "&size=24";
+        cuImg.src = userAvatarUrl(cu, 24);
         cuImg.alt = cu.displayName;
         cuImg.dataset.tip = cu.displayName + " (@" + cu.username + ")";
         if (cui > 0) cuImg.style.marginLeft = "-6px";
@@ -4618,7 +4617,7 @@ import { initLongPress } from './modules/longpress.js';
               updateMateSidebarProfile(msg.mate);
             }
             // Update DM header if currently chatting with this mate
-            if (dmMode && currentDmTarget === msg.mate.id) {
+            if (dmMode && dmTargetUser && dmTargetUser.id === msg.mate.id) {
               var updatedName = (msg.mate.profile && msg.mate.profile.displayName) || msg.mate.name;
               if (updatedName) {
                 var dmHeaderName = document.getElementById("dm-header-name");
@@ -6855,7 +6854,7 @@ import { initLongPress } from './modules/longpress.js';
     return userColorMap[userId];
   }
 
-  function createCursorElement(userId, displayName, color, avatarStyle, avatarSeed) {
+  function createCursorElement(userId, displayName, color, avatarStyle, avatarSeed, avatarCustom) {
     var wrapper = document.createElement("div");
     wrapper.className = "remote-cursor";
     wrapper.dataset.userId = userId;
@@ -6891,9 +6890,7 @@ import { initLongPress } from './modules/longpress.js';
     // Avatar
     var avatarImg = document.createElement("img");
     avatarImg.className = "remote-cursor-avatar";
-    var style = avatarStyle || "thumbs";
-    var seed = avatarSeed || userId;
-    avatarImg.src = "https://api.dicebear.com/9.x/" + style + "/svg?seed=" + encodeURIComponent(seed) + "&size=16";
+    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;";
     tag.appendChild(avatarImg);
 
@@ -7065,7 +7062,7 @@ import { initLongPress } from './modules/longpress.js';
     var entry = remoteCursors[userId];
     if (!entry) {
       var color = getCursorColor(userId);
-      var el = createCursorElement(userId, msg.displayName, color, msg.avatarStyle, msg.avatarSeed);
+      var el = createCursorElement(userId, msg.displayName, color, msg.avatarStyle, msg.avatarSeed, msg.avatarCustom);
       messagesEl.appendChild(el);
       var indicator = createOffscreenIndicator(userId, msg.displayName, color);
       messagesEl.appendChild(indicator);

package/lib/public/css/mates.css

@@ -1,3 +1,15 @@
+/* === Avatar anti-aliasing === */
+.mate-sidebar-avatar,
+.mate-collapsed-avatar,
+.dm-bubble-avatar,
+.dm-bubble-avatar-me,
+.home-hub-mate-avatar {
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: smooth;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
 /* === Mate Chat Title Bar === */
 
 .title-bar-content.mate-dm-active {
@@ -151,20 +163,7 @@
   font-size: 48px;
   line-height: 1;
 }
-.mate-intro-experimental {
-  display: inline-block;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: #f59e0b;
-  background: rgba(245, 158, 11, 0.12);
-  border: 1px solid rgba(245, 158, 11, 0.25);
-  border-radius: 10px;
-  padding: 2px 7px;
-  vertical-align: middle;
-  margin-right: 4px;
-}
+
 .mate-intro-title {
   font-size: 22px;
   font-weight: 700;

package/lib/public/css/profile.css

@@ -241,6 +241,134 @@
   box-shadow: 0 0 0 1px var(--accent);
 }
 
+/* Avatar upload button */
+.profile-avatar-upload .profile-avatar-upload-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--text-muted);
+}
+.profile-avatar-upload .profile-avatar-upload-icon svg {
+  width: 24px;
+  height: 24px;
+}
+.profile-avatar-upload:hover .profile-avatar-upload-icon {
+  color: var(--text);
+}
+.profile-avatar-custom-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 6px;
+}
+
+/* Avatar positioner overlay */
+.avatar-positioner-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  background: rgba(0,0,0,0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.avatar-positioner-container {
+  background: var(--bg-secondary, #1e1e2e);
+  border-radius: 16px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+  min-width: 260px;
+  position: relative;
+}
+.avatar-positioner-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 20px;
+  cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+.avatar-positioner-close:hover {
+  background: var(--bg-hover, rgba(255,255,255,0.1));
+  color: var(--text);
+}
+.avatar-positioner-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+}
+.avatar-positioner-viewport {
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+  cursor: grab;
+  border: 2px solid var(--border);
+  background: var(--bg);
+  touch-action: none;
+}
+.avatar-positioner-viewport:active {
+  cursor: grabbing;
+}
+.avatar-positioner-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  will-change: transform;
+}
+.avatar-positioner-slider-wrap {
+  width: 100%;
+  padding: 0 8px;
+}
+.avatar-positioner-slider {
+  width: 100%;
+  accent-color: var(--accent);
+}
+.avatar-positioner-buttons {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+.avatar-positioner-btn {
+  flex: 1;
+  padding: 8px 0;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+}
+.avatar-positioner-btn-cancel {
+  background: var(--bg);
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+}
+.avatar-positioner-btn-cancel:hover {
+  background: var(--bg-hover, var(--bg));
+}
+.avatar-positioner-btn-done {
+  background: var(--accent);
+  color: #fff;
+}
+.avatar-positioner-btn-done:hover {
+  filter: brightness(1.1);
+}
+
 /* Color swatch grid */
 .profile-color-grid {
   display: flex;

package/lib/public/index.html

@@ -1416,7 +1416,7 @@
             <div class="mate-intro-step"><span class="mate-intro-step-num">2</span> Have a short interview where your Mate gets to know you</div>
             <div class="mate-intro-step"><span class="mate-intro-step-num">3</span> Start talking</div>
           </div>
-          <p class="mate-intro-privacy">Mates run on Claude Code. No separate API keys or external services needed. Your conversations stay on your Clay server and are never stored elsewhere. <span class="mate-intro-experimental">Experimental</span></p>
+          <p class="mate-intro-privacy">Mates run on Claude Code. No separate API keys or external services needed. Your conversations stay on your Clay server and are never stored elsewhere.</p>
         </div>
       </div>
       <!-- Step 1: Relationship -->

package/lib/public/modules/avatar.js

@@ -0,0 +1,36 @@
+// Centralized avatar URL builder and style definitions
+// All DiceBear avatar URLs should be constructed through this module.
+
+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' },
+];
+
+// Build a DiceBear avatar URL from style, seed, and optional size.
+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);
+}
+
+// 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 seed = (user && (user.avatarSeed || user.username || user.id)) || 'anonymous';
+  return avatarUrl(style, seed, size);
+}
+
+// Build avatar URL for a mate object, preferring custom avatar if set.
+export function mateAvatarUrl(mate, size) {
+  if (!mate) return avatarUrl('bottts', '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);
+}

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

@@ -1,3 +1,4 @@
+import { avatarUrl, userAvatarUrl, mateAvatarUrl } from './avatar.js';
 import { escapeHtml } from './utils.js';
 import { refreshIcons } from './icons.js';
 import { openSearch as openSessionSearch } from './session-search.js';
@@ -274,9 +275,7 @@ function renderHome(filter) {
       items.push({ type: "user", data: user });
       var userName = escapeHtml(user.displayName || user.username);
       var userSub = user.username ? "@" + escapeHtml(user.username) : "";
-      var uAvatarStyle = user.avatarStyle || "thumbs";
-      var uAvatarSeed = user.avatarSeed || user.username || user.id;
-      var uAvatarUrl = "https://api.dicebear.com/9.x/" + uAvatarStyle + "/svg?seed=" + encodeURIComponent(uAvatarSeed) + "&size=28";
+      var uAvatarUrl = userAvatarUrl(user, 28);
       var uAvatarHtml = '<img src="' + uAvatarUrl + '" width="28" height="28" style="border-radius:50%;" alt="">';
       html += renderItem(flatIndex, uAvatarHtml, userName, userSub, null);
       flatIndex++;
@@ -298,10 +297,8 @@ function renderHome(filter) {
       var mp = mate.profile || {};
       items.push({ type: "mate", data: mate });
       var mateName = escapeHtml(mp.displayName || mate.name || "Mate");
-      var avatarStyle = mp.avatarStyle || "bottts";
-      var avatarSeed = mp.avatarSeed || mate.id;
-      var avatarUrl = "https://api.dicebear.com/9.x/" + avatarStyle + "/svg?seed=" + encodeURIComponent(avatarSeed) + "&size=28";
-      var avatarHtml = '<img src="' + avatarUrl + '" width="28" height="28" style="border-radius:50%;" alt="">';
+      var mateAvUrl = mateAvatarUrl(mate, 28);
+      var avatarHtml = '<img src="' + mateAvUrl + '" width="28" height="28" style="border-radius:50%;" alt="">';
       html += renderItem(flatIndex, avatarHtml, mateName, null, null);
       flatIndex++;
     }

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

@@ -1,3 +1,4 @@
+import { avatarUrl, mateAvatarUrl } from './avatar.js';
 import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { hideKnowledge } from './mate-knowledge.js';
@@ -134,19 +135,17 @@ export function showMateSidebar(mateId, mateData) {
   // Populate header
   var profile = mateData.profile || mateData || {};
   var displayName = profile.displayName || mateData.displayName || mateData.name || "Mate";
-  var avatarStyle = profile.avatarStyle || "bottts";
-  var avatarSeed = profile.avatarSeed || mateId;
 
   var mateColor = profile.avatarColor || mateData.avatarColor || "#7c3aed";
 
-  var avatarUrl = "https://api.dicebear.com/9.x/" + encodeURIComponent(avatarStyle) + "/svg?seed=" + encodeURIComponent(avatarSeed) + "&size=32";
-  if (avatarEl) avatarEl.src = avatarUrl;
+  var mateAvUrl = mateAvatarUrl(mateData, 32);
+  if (avatarEl) avatarEl.src = mateAvUrl;
   if (nameEl) nameEl.textContent = displayName;
 
   // Also populate collapsed header info
   var collapsedAvatar = document.getElementById("mate-collapsed-avatar");
   var collapsedName = document.getElementById("mate-collapsed-name");
-  if (collapsedAvatar) collapsedAvatar.src = avatarUrl;
+  if (collapsedAvatar) collapsedAvatar.src = mateAvUrl;
   if (collapsedName) collapsedName.textContent = displayName;
 
   // Apply mate color to sidebar
@@ -215,12 +214,10 @@ export function updateMateSidebarProfile(mateData) {
   if (!columnEl || !mateData) return;
   var profile = mateData.profile || mateData || {};
   var displayName = profile.displayName || mateData.displayName || mateData.name || "Mate";
-  var avatarStyle = profile.avatarStyle || "bottts";
-  var avatarSeed = profile.avatarSeed || (mateData.id || "mate");
   var mateColor = profile.avatarColor || mateData.avatarColor || "#7c3aed";
 
   if (avatarEl) {
-    avatarEl.src = "https://api.dicebear.com/9.x/" + encodeURIComponent(avatarStyle) + "/svg?seed=" + encodeURIComponent(avatarSeed) + "&size=32";
+    avatarEl.src = mateAvatarUrl(mateData, 32);
   }
   // Check if name changed for engrave effect
   var oldName = nameEl ? nameEl.textContent : "";