clay-server 2.16.0 → 2.17.0-beta.10

package/lib/public/modules/profile.js

@@ -4,9 +4,10 @@
 
 import { iconHtml, refreshIcons } from './icons.js';
 import { setSTTLang, getSTTLang } from './stt.js';
+import { avatarUrl, mateAvatarUrl, AVATAR_STYLES } from './avatar.js';
 
 var ctx;
-var profile = { name: '', lang: 'en-US', avatarStyle: 'thumbs', avatarSeed: '', avatarColor: '#7c3aed' };
+var profile = { name: '', lang: 'en-US', avatarStyle: 'thumbs', avatarSeed: '', avatarColor: '#7c3aed', avatarCustom: '' };
 var profileUsername = '';
 var popoverEl = null;
 var saveTimer = null;
@@ -22,16 +23,7 @@ var LANGUAGES = [
   { code: 'de-DE', name: 'German' },
 ];
 
-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: 'lorelei', name: 'Lorelei' },
-  { id: 'fun-emoji', name: 'Emoji' },
-  { id: 'icons', name: 'Icons' },
-];
+// AVATAR_STYLES imported from avatar.js
 
 var COLORS = [
   '#7c3aed', '#4f46e5', '#2563eb', '#0891b2',
@@ -41,11 +33,7 @@ var COLORS = [
   '#0369a1', '#15803d',
 ];
 
-// --- DiceBear URL builder ---
-function avatarUrl(style, seed, size) {
-  var s = encodeURIComponent(seed || 'anonymous');
-  return 'https://api.dicebear.com/9.x/' + style + '/svg?seed=' + s + '&size=' + (size || 64);
-}
+// avatarUrl imported from avatar.js
 
 function getAvatarSeed() {
   return profile.avatarSeed || 'anonymous';
@@ -80,10 +68,12 @@ function applyToIsland() {
 
   var displayName = profile.name || 'Awesome Clay User';
 
-  // Replace letter fallback with DiceBear img
+  // Replace letter fallback with avatar img
   var existingImg = avatarWrap.querySelector('img');
   var existingLetter = avatarWrap.querySelector('.user-island-avatar-letter');
-  var url = avatarUrl(profile.avatarStyle || 'thumbs', getAvatarSeed(), 32);
+  var url = profile.avatarCustom
+    ? profile.avatarCustom
+    : avatarUrl(profile.avatarStyle || 'thumbs', getAvatarSeed(), 32);
 
   if (existingImg) {
     existingImg.src = url;
@@ -109,6 +99,188 @@ function applyToIsland() {
   }
 }
 
+// --- Avatar position picker ---
+export function showAvatarPositioner(img, objectUrl, onDone) {
+  var outputSize = 256;
+  var viewSize = 220;
+
+  // State
+  var scale = 1;
+  var offsetX = 0;
+  var offsetY = 0;
+
+  // Fit image so shorter side fills the circle
+  var baseScale = Math.max(viewSize / img.width, viewSize / img.height);
+
+  function clampOffsets() {
+    var sw = img.width * baseScale * scale;
+    var sh = img.height * baseScale * scale;
+    var maxX = Math.max(0, (sw - viewSize) / 2);
+    var maxY = Math.max(0, (sh - viewSize) / 2);
+    if (offsetX > maxX) offsetX = maxX;
+    if (offsetX < -maxX) offsetX = -maxX;
+    if (offsetY > maxY) offsetY = maxY;
+    if (offsetY < -maxY) offsetY = -maxY;
+  }
+
+  function updatePreview() {
+    var s = baseScale * scale;
+    var tx = (viewSize - img.width * s) / 2 + offsetX;
+    var ty = (viewSize - img.height * s) / 2 + offsetY;
+    previewImg.style.width = (img.width * s) + 'px';
+    previewImg.style.height = (img.height * s) + 'px';
+    previewImg.style.transform = 'translate(' + tx + 'px, ' + ty + 'px)';
+  }
+
+  // Build overlay
+  var overlay = document.createElement('div');
+  overlay.className = 'avatar-positioner-overlay';
+
+  var container = document.createElement('div');
+  container.className = 'avatar-positioner-container';
+
+  var closeBtn = document.createElement('button');
+  closeBtn.className = 'avatar-positioner-close';
+  closeBtn.innerHTML = '&times;';
+  container.appendChild(closeBtn);
+
+  var title = document.createElement('div');
+  title.className = 'avatar-positioner-title';
+  title.textContent = 'Position your avatar';
+  container.appendChild(title);
+
+  var viewport = document.createElement('div');
+  viewport.className = 'avatar-positioner-viewport';
+  viewport.style.width = viewSize + 'px';
+  viewport.style.height = viewSize + 'px';
+
+  var previewImg = document.createElement('img');
+  previewImg.src = objectUrl;
+  previewImg.className = 'avatar-positioner-img';
+  previewImg.draggable = false;
+  viewport.appendChild(previewImg);
+  container.appendChild(viewport);
+
+  // Zoom slider
+  var sliderWrap = document.createElement('div');
+  sliderWrap.className = 'avatar-positioner-slider-wrap';
+  var slider = document.createElement('input');
+  slider.type = 'range';
+  slider.min = '1';
+  slider.max = '6';
+  slider.step = '0.05';
+  slider.value = '1';
+  slider.className = 'avatar-positioner-slider';
+  sliderWrap.appendChild(slider);
+  container.appendChild(sliderWrap);
+
+  // Buttons
+  var btnRow = document.createElement('div');
+  btnRow.className = 'avatar-positioner-buttons';
+  var cancelBtn = document.createElement('button');
+  cancelBtn.className = 'avatar-positioner-btn avatar-positioner-btn-cancel';
+  cancelBtn.textContent = 'Cancel';
+  var doneBtn = document.createElement('button');
+  doneBtn.className = 'avatar-positioner-btn avatar-positioner-btn-done';
+  doneBtn.textContent = 'Done';
+  btnRow.appendChild(cancelBtn);
+  btnRow.appendChild(doneBtn);
+  container.appendChild(btnRow);
+
+  overlay.appendChild(container);
+  document.body.appendChild(overlay);
+  updatePreview();
+
+  // Drag
+  var dragging = false;
+  var dragStartX = 0;
+  var dragStartY = 0;
+  var startOffsetX = 0;
+  var startOffsetY = 0;
+
+  viewport.addEventListener('mousedown', startDrag);
+  viewport.addEventListener('touchstart', startDrag, { passive: false });
+
+  function startDrag(e) {
+    e.preventDefault();
+    dragging = true;
+    var pt = e.touches ? e.touches[0] : e;
+    dragStartX = pt.clientX;
+    dragStartY = pt.clientY;
+    startOffsetX = offsetX;
+    startOffsetY = offsetY;
+    document.addEventListener('mousemove', onDrag);
+    document.addEventListener('mouseup', endDrag);
+    document.addEventListener('touchmove', onDrag, { passive: false });
+    document.addEventListener('touchend', endDrag);
+  }
+
+  function onDrag(e) {
+    if (!dragging) return;
+    e.preventDefault();
+    var pt = e.touches ? e.touches[0] : e;
+    offsetX = startOffsetX + (pt.clientX - dragStartX);
+    offsetY = startOffsetY + (pt.clientY - dragStartY);
+    clampOffsets();
+    updatePreview();
+  }
+
+  function endDrag() {
+    dragging = false;
+    document.removeEventListener('mousemove', onDrag);
+    document.removeEventListener('mouseup', endDrag);
+    document.removeEventListener('touchmove', onDrag);
+    document.removeEventListener('touchend', endDrag);
+  }
+
+  // Zoom
+  slider.addEventListener('input', function() {
+    scale = parseFloat(slider.value);
+    clampOffsets();
+    updatePreview();
+  });
+
+  // Scroll to zoom
+  viewport.addEventListener('wheel', function(e) {
+    e.preventDefault();
+    scale += e.deltaY < 0 ? 0.1 : -0.1;
+    if (scale < 1) scale = 1;
+    if (scale > 6) scale = 6;
+    slider.value = scale;
+    clampOffsets();
+    updatePreview();
+  }, { passive: false });
+
+  function cleanup(revoke) {
+    overlay.remove();
+    if (revoke) URL.revokeObjectURL(objectUrl);
+  }
+
+  closeBtn.addEventListener('click', function() { cleanup(true); });
+  cancelBtn.addEventListener('click', function() { cleanup(true); });
+
+  doneBtn.addEventListener('click', function() {
+    // Render cropped area to canvas
+    var canvas = document.createElement('canvas');
+    canvas.width = outputSize;
+    canvas.height = outputSize;
+    var c = canvas.getContext('2d');
+    var s = baseScale * scale;
+    var tx = (viewSize - img.width * s) / 2 + offsetX;
+    var ty = (viewSize - img.height * s) / 2 + offsetY;
+    // Map from viewSize coords to outputSize
+    var ratio = outputSize / viewSize;
+    c.drawImage(img,
+      0, 0, img.width, img.height,
+      tx * ratio, ty * ratio, img.width * s * ratio, img.height * s * ratio
+    );
+    canvas.toBlob(function(blob) {
+      cleanup(false);
+      if (blob) onDone(blob);
+    }, 'image/jpeg', 0.9);
+  });
+}
+
 // --- Popover ---
 function showPopover() {
   if (popoverEl) {
@@ -136,7 +308,7 @@ function showPopover() {
   // Avatar row (overlapping banner)
   html += '<div class="profile-avatar-row">';
   html += '<div class="profile-popover-avatar">';
-  html += '<img class="profile-popover-avatar-img" src="' + avatarUrl(currentStyle, seed, 80) + '" alt="avatar">';
+  html += '<img class="profile-popover-avatar-img" src="' + (profile.avatarCustom || avatarUrl(currentStyle, seed, 80)) + '" alt="avatar">';
   html += '</div>';
   html += '<div class="profile-name-display">' + escapeAttr(displayName || 'Awesome Clay User') + '</div>';
   html += '</div>';
@@ -166,9 +338,19 @@ function showPopover() {
   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 = (currentStyle === st.id) ? ' profile-avatar-option-active' : '';
+    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>';
@@ -223,9 +405,61 @@ function showPopover() {
     debouncedSave();
   });
 
+  // Avatar upload button
+  var uploadBtn = popoverEl.querySelector('.profile-avatar-upload');
+  var fileInput = popoverEl.querySelector('#profile-avatar-file');
+  if (uploadBtn && fileInput) {
+    uploadBtn.addEventListener('click', function() {
+      fileInput.click();
+    });
+    fileInput.addEventListener('change', function() {
+      var file = fileInput.files[0];
+      if (!file) return;
+
+      function uploadBlob(blob) {
+        blob.arrayBuffer().then(function(ab) {
+          var buf = new Uint8Array(ab);
+          fetch('/api/avatar', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/octet-stream' },
+            body: buf,
+          }).then(function(r) { return r.json(); }).then(function(data) {
+            if (data.ok) {
+              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">';
+              }
+              debouncedSave();
+            }
+          });
+        });
+      }
+
+      // Load image and open position picker
+      var img = new Image();
+      var objectUrl = URL.createObjectURL(file);
+      img.onload = function() {
+        showAvatarPositioner(img, objectUrl, function(croppedBlob) {
+          URL.revokeObjectURL(objectUrl);
+          uploadBlob(croppedBlob);
+        });
+      };
+      img.src = objectUrl;
+    });
+  }
+
   // 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();
@@ -234,6 +468,9 @@ function showPopover() {
         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();
     });
   });
@@ -283,7 +520,9 @@ function updatePopoverHeader() {
   if (!popoverEl) return;
   var img = popoverEl.querySelector('.profile-popover-avatar-img');
   var nd = popoverEl.querySelector('.profile-name-display');
-  if (img) img.src = avatarUrl(profile.avatarStyle || 'thumbs', getAvatarSeed(), 80);
+  if (img) img.src = profile.avatarCustom
+    ? profile.avatarCustom
+    : avatarUrl(profile.avatarStyle || 'thumbs', getAvatarSeed(), 80);
   if (nd) nd.textContent = profile.name || 'Awesome Clay User';
 }
 
@@ -351,6 +590,7 @@ export function initProfile(_ctx) {
     if (data.avatarColor) profile.avatarColor = data.avatarColor;
     if (data.avatarStyle) profile.avatarStyle = data.avatarStyle;
     if (data.avatarSeed) profile.avatarSeed = data.avatarSeed;
+    if (data.avatarCustom) profile.avatarCustom = data.avatarCustom;
     if (data.username) profileUsername = data.username;
 
     // Auto-generate seed if none exists
@@ -393,6 +633,7 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
   var mateColor = mp.avatarColor || '#7c3aed';
   var mateStyle = mp.avatarStyle || 'bottts';
   var mateSeed = mp.avatarSeed || mateData.id || 'mate';
+  var mateCustom = mp.avatarCustom || '';
   matePreviewSeed = mateSeed;
 
   matePopoverEl = document.createElement('div');
@@ -406,9 +647,10 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
   html += '</div>';
 
   // Avatar row
+  var mateAvatarSrc = mateCustom ? mateCustom : avatarUrl(mateStyle, mateSeed, 80);
   html += '<div class="profile-avatar-row">';
   html += '<div class="profile-popover-avatar">';
-  html += '<img class="profile-popover-avatar-img" src="' + avatarUrl(mateStyle, mateSeed, 80) + '" alt="avatar">';
+  html += '<img class="profile-popover-avatar-img" src="' + mateAvatarSrc + '" alt="avatar">';
   html += '</div>';
   html += '<div class="profile-name-display">' + escapeAttr(mateName || 'New Mate') + '</div>';
   html += '</div>';
@@ -426,9 +668,19 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
   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 = (mateStyle === st.id) ? ' profile-avatar-option-active' : '';
+    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>';
@@ -458,8 +710,25 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
     avatarStyle: mateStyle,
     avatarSeed: mateSeed,
     avatarColor: mateColor,
+    avatarCustom: mateCustom,
   };
 
+  function refreshChatAvatars() {
+    var newUrl = mateAvatarUrl({ profile: mateProfile, id: mateData.id }, 64);
+    // Update all mate avatars in the chat area
+    var bubbles = document.querySelectorAll('.dm-bubble-avatar-mate');
+    for (var i = 0; i < bubbles.length; i++) {
+      bubbles[i].src = newUrl;
+    }
+    // Update body dataset so new messages use the updated URL
+    if (document.body.dataset.mateAvatarUrl) {
+      document.body.dataset.mateAvatarUrl = newUrl;
+    }
+    // Update mate sidebar avatar
+    var sidebarAvatar = document.querySelector('.mate-sidebar-avatar');
+    if (sidebarAvatar) sidebarAvatar.src = newUrl;
+  }
+
   function debouncedMateUpdate() {
     if (mateSaveTimer) clearTimeout(mateSaveTimer);
     mateSaveTimer = setTimeout(function() {
@@ -470,8 +739,10 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
           avatarStyle: mateProfile.avatarStyle,
           avatarSeed: mateProfile.avatarSeed,
           avatarColor: mateProfile.avatarColor,
+          avatarCustom: mateProfile.avatarCustom,
         },
       });
+      refreshChatAvatars();
       mateSaveTimer = null;
     }, 400);
   }
@@ -480,7 +751,9 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
     if (!matePopoverEl) return;
     var img = matePopoverEl.querySelector('.profile-popover-avatar-img');
     var nd = matePopoverEl.querySelector('.profile-name-display');
-    if (img) img.src = avatarUrl(mateProfile.avatarStyle, mateProfile.avatarSeed, 80);
+    if (img) img.src = mateProfile.avatarCustom
+      ? mateProfile.avatarCustom
+      : avatarUrl(mateProfile.avatarStyle, mateProfile.avatarSeed, 80);
     if (nd) nd.textContent = mateProfile.displayName || 'New Mate';
   }
 
@@ -503,9 +776,60 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
   nameInput.addEventListener('keyup', function(e) { e.stopPropagation(); });
   nameInput.addEventListener('keypress', function(e) { e.stopPropagation(); });
 
+  // Avatar upload button
+  var mateUploadBtn = matePopoverEl.querySelector('.profile-avatar-upload');
+  var mateFileInput = matePopoverEl.querySelector('#mate-profile-avatar-file');
+  if (mateUploadBtn && mateFileInput) {
+    mateUploadBtn.addEventListener('click', function() {
+      mateFileInput.click();
+    });
+    mateFileInput.addEventListener('change', function() {
+      var file = mateFileInput.files[0];
+      if (!file) return;
+
+      function uploadMateBlob(blob) {
+        blob.arrayBuffer().then(function(ab) {
+          var buf = new Uint8Array(ab);
+          fetch('/api/mate-avatar/' + encodeURIComponent(mateData.id), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/octet-stream' },
+            body: buf,
+          }).then(function(r) { return r.json(); }).then(function(data) {
+            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">';
+              }
+              debouncedMateUpdate();
+            }
+          });
+        });
+      }
+
+      // Load image and open position picker
+      var img = new Image();
+      var objectUrl = URL.createObjectURL(file);
+      img.onload = function() {
+        showAvatarPositioner(img, objectUrl, function(croppedBlob) {
+          URL.revokeObjectURL(objectUrl);
+          uploadMateBlob(croppedBlob);
+        });
+      };
+      img.src = objectUrl;
+    });
+  }
+
   // Avatar style
   matePopoverEl.querySelectorAll('.profile-avatar-option[data-style]').forEach(function(btn) {
     btn.addEventListener('click', function() {
+      mateProfile.avatarCustom = '';
       mateProfile.avatarStyle = btn.dataset.style;
       mateProfile.avatarSeed = matePreviewSeed;
       updateMatePopoverHeader();
@@ -513,6 +837,9 @@ export function showMateProfilePopover(anchorEl, mateData, onUpdate) {
         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>';
       debouncedMateUpdate();
     });
   });

package/lib/public/modules/qrcode.js

@@ -12,16 +12,18 @@ function getShareUrl() {
 export function triggerShare() {
   var url = getShareUrl();
 
-  // Use Web Share API if available
-  if (navigator.share) {
+  // Use Web Share API on mobile only
+  var isMobile = window.innerWidth <= 768 || /Mobi|Android/i.test(navigator.userAgent);
+  if (isMobile && navigator.share) {
     navigator.share({ title: document.title || "Clay", url: url }).catch(function () {});
     return;
   }
 
-  // Fallback: show QR overlay
+  // Show QR overlay
   var qrOverlay = document.getElementById("qr-overlay");
   var qrCanvas = document.getElementById("qr-canvas");
   var qrUrl = document.getElementById("qr-url");
+  var qrShareBtn = document.getElementById("qr-share-btn");
 
   var qr = qrcode(0, "M");
   qr.addData(url);
@@ -29,6 +31,15 @@ export function triggerShare() {
   qrCanvas.innerHTML = qr.createSvgTag(5, 0);
   qrUrl.innerHTML = url + '<span class="qr-hint">click to copy</span>';
 
+  // Show browser share button if Web Share API is available
+  if (qrShareBtn) {
+    if (navigator.share) {
+      qrShareBtn.classList.remove("hidden");
+    } else {
+      qrShareBtn.classList.add("hidden");
+    }
+  }
+
   qrOverlay.classList.remove("hidden");
 }
 
@@ -58,6 +69,15 @@ export function initQrCode() {
     e.stopPropagation();
   });
 
+  // Browser share button
+  var qrShareBtn = document.getElementById("qr-share-btn");
+  if (qrShareBtn) {
+    qrShareBtn.addEventListener("click", function () {
+      var url = getShareUrl();
+      navigator.share({ title: document.title || "Clay", url: url }).catch(function () {});
+    });
+  }
+
   // ESC to close
   document.addEventListener("keydown", function (e) {
     if (e.key === "Escape" && !qrOverlay.classList.contains("hidden")) {

package/lib/public/modules/sidebar.js

@@ -1,3 +1,4 @@
+import { avatarUrl, userAvatarUrl, mateAvatarUrl } from './avatar.js';
 import { escapeHtml, copyToClipboard } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { openProjectSettings } from './project-settings.js';
@@ -572,9 +573,9 @@ export function updateSessionPresence(presence) {
   }
 }
 
-function presenceAvatarUrl(style, seed) {
-  var s = encodeURIComponent(seed || "anonymous");
-  return "https://api.dicebear.com/9.x/" + (style || "thumbs") + "/svg?seed=" + s + "&size=24";
+function presenceAvatarUrl(userOrStyle, seed) {
+  if (userOrStyle && typeof userOrStyle === "object") return userAvatarUrl(userOrStyle, 24);
+  return avatarUrl(userOrStyle || "thumbs", seed, 24);
 }
 
 function renderPresenceAvatars(el, sessionId) {
@@ -594,7 +595,7 @@ function renderPresenceAvatars(el, sessionId) {
     var u = users[i];
     var img = document.createElement("img");
     img.className = "session-presence-avatar";
-    img.src = presenceAvatarUrl(u.avatarStyle, u.avatarSeed);
+    img.src = presenceAvatarUrl(u);
     img.alt = u.displayName;
     img.dataset.tip = u.displayName + (u.username ? " (@" + u.username + ")" : "");
     if (i > 0) img.style.marginLeft = "-6px";
@@ -865,7 +866,7 @@ function renderSheetSessions(listEl) {
 
       var avatarEl = document.createElement("img");
       avatarEl.className = "mobile-chat-chip-avatar";
-      avatarEl.src = "https://api.dicebear.com/9.x/" + (mp.avatarStyle || "bottts") + "/svg?seed=" + encodeURIComponent(mp.avatarSeed || mate.id) + "&size=20";
+      avatarEl.src = mateAvatarUrl(mate, 20);
       avatarEl.alt = mp.displayName || mate.name || "";
       chip.appendChild(avatarEl);
 
@@ -1329,6 +1330,22 @@ function renderSheetSettings(listEl) {
   });
 
   listEl.appendChild(themeBtn);
+
+  // "Open as app" — only show if not already in PWA standalone mode
+  if (!document.documentElement.classList.contains("pwa-standalone")) {
+    var pwaBtn = document.createElement("button");
+    pwaBtn.className = "mobile-more-item";
+    pwaBtn.innerHTML = '<i data-lucide="smartphone"></i><span class="mobile-more-item-label">Open as app</span>';
+    pwaBtn.addEventListener("click", function () {
+      closeMobileSheet();
+      // Trigger the existing PWA install modal
+      var installPill = document.getElementById("pwa-install-pill");
+      if (installPill) {
+        setTimeout(function () { installPill.click(); }, 250);
+      }
+    });
+    listEl.appendChild(pwaBtn);
+  }
 }
 
 export function initSidebar(_ctx) {
@@ -2762,7 +2779,7 @@ export function renderSidebarPresence(onlineUsers) {
     var ou = onlineUsers[i];
     var img = document.createElement("img");
     img.className = "sidebar-presence-avatar";
-    img.src = presenceAvatarUrl(ou.avatarStyle, ou.avatarSeed);
+    img.src = presenceAvatarUrl(ou);
     img.alt = ou.displayName;
     img.dataset.tip = ou.displayName + " (@" + ou.username + ")";
     container.appendChild(img);
@@ -3337,7 +3354,7 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
 
       var avatar = document.createElement("img");
       avatar.className = "icon-strip-user-avatar";
-      avatar.src = "https://api.dicebear.com/9.x/" + (u.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(u.avatarSeed || u.username) + "&size=34";
+      avatar.src = userAvatarUrl(u, 34);
       avatar.alt = u.displayName;
       el.appendChild(avatar);
 
@@ -3405,7 +3422,7 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
 
       var avatar = document.createElement("img");
       avatar.className = "icon-strip-user-avatar";
-      avatar.src = "https://api.dicebear.com/9.x/" + (mp.avatarStyle || "bottts") + "/svg?seed=" + encodeURIComponent(mp.avatarSeed || mate.id) + "&size=34";
+      avatar.src = mateAvatarUrl(mate, 34);
       avatar.alt = mp.displayName || mate.name || "Mate";
       el.appendChild(avatar);
 
@@ -3530,7 +3547,7 @@ function toggleDmUserPicker(anchorEl) {
 
         var av = document.createElement("img");
         av.className = "dm-user-picker-avatar";
-        av.src = "https://api.dicebear.com/9.x/" + (u.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(u.avatarSeed || u.username) + "&size=28";
+        av.src = userAvatarUrl(u, 28);
         av.alt = u.displayName;
         item.appendChild(av);