clay-server 2.16.0 → 2.17.0-beta.10

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/css/title-bar.css

@@ -15,10 +15,6 @@
 
 /* --- Update banner --- */
 .top-bar-update {
-  position: absolute;
-  left: 10px;
-  top: 0;
-  bottom: 0;
   display: flex;
   align-items: center;
 }

package/lib/public/index.html

@@ -29,15 +29,18 @@
 <div id="layout">
   <!-- === Top Bar (full width, forms reverse-ㄱ with icon strip) === -->
   <div id="top-bar">
-    <button id="pwa-install-pill" class="top-bar-install-btn hidden" title="Install app"><i data-lucide="download"></i></button>
-    <button id="cmd-palette-btn" class="cmd-palette-searchbar" title="Command palette"><i data-lucide="search"></i><span class="cmd-palette-searchbar-text">Search sessions, projects, and commands</span><kbd class="cmd-palette-searchbar-kbd"></kbd></button>
-    <div id="update-pill-wrap" class="top-bar-update hidden">
-      <button id="update-pill" class="top-bar-update-btn"><i data-lucide="arrow-up-circle"></i> <span id="update-version"></span> is available. Update now</button>
+    <div class="top-bar-left-pills">
+      <button id="pwa-install-pill" class="top-bar-install-btn hidden" title="Open as app"><i data-lucide="download"></i> Open as app</button>
+      <button id="share-pill" class="top-bar-share-btn" title="Share"><i data-lucide="qr-code"></i> Share</button>
+      <div id="update-pill-wrap" class="top-bar-update hidden">
+        <button id="update-pill" class="top-bar-update-btn"><i data-lucide="arrow-up-circle"></i> <span id="update-version"></span> is available. Update now</button>
       <div id="update-popover" class="top-bar-popover">
         <div class="popover-row"><button id="update-now" class="popover-action popover-action-primary"><i data-lucide="download"></i> Update now</button></div>
         <div class="popover-row"><div class="popover-label">Or run manually:</div><div class="popover-cmd"><code id="update-manual-cmd">npx clay-server@latest</code><button class="popover-copy" title="Copy"><i data-lucide="copy"></i></button></div></div>
       </div>
     </div>
+    </div>
+    <button id="cmd-palette-btn" class="cmd-palette-searchbar" title="Command palette"><i data-lucide="search"></i><span class="cmd-palette-searchbar-text">Search sessions, projects, and commands</span><kbd class="cmd-palette-searchbar-kbd"></kbd></button>
     <div class="top-bar-actions">
       <!-- Pill badges -->
       <div id="skip-perms-pill" class="top-bar-pill pill-error hidden"><i data-lucide="shield-off"></i> <span>Skip perms</span></div>
@@ -721,6 +724,7 @@
   <div id="qr-overlay-inner">
     <div id="qr-canvas"></div>
     <div id="qr-url"></div>
+    <button id="qr-share-btn" class="qr-share-btn hidden"><i data-lucide="share-2"></i> Share</button>
   </div>
 </div>
 
@@ -1414,7 +1418,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 : "";