clay-server 2.16.0 → 2.17.0-beta.10

package/lib/certs/fullchain.pem

@@ -0,0 +1,47 @@
+-----BEGIN CERTIFICATE-----
+MIIDgjCCAwigAwIBAgISBmtBLGUclrEfhwU9evzgyDCQMAoGCCqGSM49BAMDMDIx
+CzAJBgNVBAYTAlVTMRYwFAYDVQQKEw1MZXQncyBFbmNyeXB0MQswCQYDVQQDEwJF
+ODAeFw0yNjAzMjMwOTQ0MDJaFw0yNjA2MjEwOTQ0MDFaMBoxGDAWBgNVBAMMDyou
+ZC5jbGF5LnN0dWRpbzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABEhAD1htqRg8
+n7evflBZ1X7UaCeqBGcvG/MNtlAKd1VVfVGFuanyUjksV9++R1EuKLhEPM3loL/3
+Gz8+XEewGw6jggIUMIICEDAOBgNVHQ8BAf8EBAMCB4AwEwYDVR0lBAwwCgYIKwYB
+BQUHAwEwDAYDVR0TAQH/BAIwADAdBgNVHQ4EFgQU8Anzwuqwtujb+h3o/CnbJu5Z
++W8wHwYDVR0jBBgwFoAUjw0TovYuftFQbDMYOF1ZjiNykcowMgYIKwYBBQUHAQEE
+JjAkMCIGCCsGAQUFBzAChhZodHRwOi8vZTguaS5sZW5jci5vcmcvMBoGA1UdEQQT
+MBGCDyouZC5jbGF5LnN0dWRpbzATBgNVHSAEDDAKMAgGBmeBDAECATAtBgNVHR8E
+JjAkMCKgIKAehhxodHRwOi8vZTguYy5sZW5jci5vcmcvMTcuY3JsMIIBBQYKKwYB
+BAHWeQIEAgSB9gSB8wDxAHcAFoMtq/CpJQ8P8DqlRf/Iv8gj0IdL9gQpJ/jnHzMT
+9foAAAGdGkoIlgAABAMASDBGAiEAhJFJwEIag1Bzt0WtYgMzLdJn/k+Is2RukdDo
+G5sXpyMCIQCQOX9nOoaVIXxF1KXiavbAY5QIyJRuvK7Fn6WeL58YQQB2AMs49xWJ
+fIShRF9bwd37yW7ymlnNRwppBYWwyxTDFFjnAAABnRpKCJgAAAQDAEcwRQIhAI98
+cmflulGQJMfD10jbstVwodGpzl5licg6FTxcYachAiBZV1cZnPfasTzcteXyjCuz
+c1wayYAtch+0soAWvBKZRzAKBggqhkjOPQQDAwNoADBlAjAwJO4ti4AJJTtMxYsr
+Jf5052oDrD2POtoiPksruQVVacsq0T/9VYVX+X2vElCrxFwCMQDcSToBRWGpv/G3
+JBpbEAB1qhk1Z9lYPQKH6gRvtp35XJWY0PucGRWgQUrXuZcxGlA=
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIEVjCCAj6gAwIBAgIQY5WTY8JOcIJxWRi/w9ftVjANBgkqhkiG9w0BAQsFADBP
+MQswCQYDVQQGEwJVUzEpMCcGA1UEChMgSW50ZXJuZXQgU2VjdXJpdHkgUmVzZWFy
+Y2ggR3JvdXAxFTATBgNVBAMTDElTUkcgUm9vdCBYMTAeFw0yNDAzMTMwMDAwMDBa
+Fw0yNzAzMTIyMzU5NTlaMDIxCzAJBgNVBAYTAlVTMRYwFAYDVQQKEw1MZXQncyBF
+bmNyeXB0MQswCQYDVQQDEwJFODB2MBAGByqGSM49AgEGBSuBBAAiA2IABNFl8l7c
+S7QMApzSsvru6WyrOq44ofTUOTIzxULUzDMMNMchIJBwXOhiLxxxs0LXeb5GDcHb
+R6EToMffgSZjO9SNHfY9gjMy9vQr5/WWOrQTZxh7az6NSNnq3u2ubT6HTKOB+DCB
+9TAOBgNVHQ8BAf8EBAMCAYYwHQYDVR0lBBYwFAYIKwYBBQUHAwIGCCsGAQUFBwMB
+MBIGA1UdEwEB/wQIMAYBAf8CAQAwHQYDVR0OBBYEFI8NE6L2Ln7RUGwzGDhdWY4j
+cpHKMB8GA1UdIwQYMBaAFHm0WeZ7tuXkAXOACIjIGlj26ZtuMDIGCCsGAQUFBwEB
+BCYwJDAiBggrBgEFBQcwAoYWaHR0cDovL3gxLmkubGVuY3Iub3JnLzATBgNVHSAE
+DDAKMAgGBmeBDAECATAnBgNVHR8EIDAeMBygGqAYhhZodHRwOi8veDEuYy5sZW5j
+ci5vcmcvMA0GCSqGSIb3DQEBCwUAA4ICAQBnE0hGINKsCYWi0Xx1ygxD5qihEjZ0
+RI3tTZz1wuATH3ZwYPIp97kWEayanD1j0cDhIYzy4CkDo2jB8D5t0a6zZWzlr98d
+AQFNh8uKJkIHdLShy+nUyeZxc5bNeMp1Lu0gSzE4McqfmNMvIpeiwWSYO9w82Ob8
+otvXcO2JUYi3svHIWRm3+707DUbL51XMcY2iZdlCq4Wa9nbuk3WTU4gr6LY8MzVA
+aDQG2+4U3eJ6qUF10bBnR1uuVyDYs9RhrwucRVnfuDj29CMLTsplM5f5wSV5hUpm
+Uwp/vV7M4w4aGunt74koX71n4EdagCsL/Yk5+mAQU0+tue0JOfAV/R6t1k+Xk9s2
+HMQFeoxppfzAVC04FdG9M+AC2JWxmFSt6BCuh3CEey3fE52Qrj9YM75rtvIjsm/1
+Hl+u//Wqxnu1ZQ4jpa+VpuZiGOlWrqSP9eogdOhCGisnyewWJwRQOqK16wiGyZeR
+xs/Bekw65vwSIaVkBruPiTfMOo0Zh4gVa8/qJgMbJbyrwwG97z/PRgmLKCDl8z3d
+tA0Z7qq7fta0Gl24uyuB05dqI5J1LvAzKuWdIjT1tP8qCoxSE/xpix8hX2dt3h+/
+jujUgFPFZ0EVZ0xSyBNRF3MboGZnYXFUxpNjTWPKpagDHJQmqrAcDmWJnMsFY3jS
+u1igv3OefnWjSQ==
+-----END CERTIFICATE-----

package/lib/certs/privkey.pem

@@ -0,0 +1,5 @@
+-----BEGIN PRIVATE KEY-----
+MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgtwBpQgcr1N5kEPEv
+Rz5JCBMpDQHD8U44HlzB9bLvQAihRANCAARIQA9YbakYPJ+3r35QWdV+1GgnqgRn
+LxvzDbZQCndVVX1Rhbmp8lI5LFffvkdRLii4RDzN5aC/9xs/PlxHsBsO
+-----END PRIVATE KEY-----

package/lib/daemon.js

@@ -60,10 +60,26 @@ if (config.osUsers) {
 // --- TLS ---
 var tlsOptions = null;
 if (config.tls) {
+  // 1. Check builtin cert (shipped with package)
+  var builtinKeyPath = path.join(__dirname, "certs", "privkey.pem");
+  var builtinCertPath = path.join(__dirname, "certs", "fullchain.pem");
+
+  // 2. User cert (mkcert, etc.)
   var os = require("os");
   var certDir = path.join(process.env.CLAY_HOME || process.env.CLAUDE_RELAY_HOME || path.join(os.homedir(), ".clay"), "certs");
-  var keyPath = path.join(certDir, "key.pem");
-  var certPath = path.join(certDir, "cert.pem");
+  var userKeyPath = path.join(certDir, "key.pem");
+  var userCertPath = path.join(certDir, "cert.pem");
+
+  var keyPath, certPath;
+  if (config.builtinCert !== false && fs.existsSync(builtinKeyPath) && fs.existsSync(builtinCertPath)) {
+    keyPath = builtinKeyPath;
+    certPath = builtinCertPath;
+    config.builtinCert = true;
+  } else {
+    keyPath = userKeyPath;
+    certPath = userCertPath;
+  }
+
   try {
     tlsOptions = {
       key: fs.readFileSync(keyPath),
@@ -78,7 +94,7 @@ var caRoot = null;
 try {
   var { execSync } = require("child_process");
   caRoot = path.join(
-    execSync("mkcert -CAROOT", { encoding: "utf8" }).trim(),
+    execSync("mkcert -CAROOT", { encoding: "utf8", stdio: "pipe" }).trim(),
     "rootCA.pem"
   );
   if (!fs.existsSync(caRoot)) caRoot = null;
@@ -119,6 +135,7 @@ var listenHost = config.host || "0.0.0.0";
 var relay = createServer({
   tlsOptions: tlsOptions,
   caPath: caRoot,
+  builtinCert: config.builtinCert || false,
   pinHash: config.pinHash || null,
   port: config.port,
   debug: config.debug || false,

package/lib/pages.js

@@ -48,56 +48,58 @@ function setupPageHtml(httpsUrl, httpUrl, hasCert, lanMode) {
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 <title>Setup - Clay</title>
 <style>
+:root{--s-bg:#282a36;--s-text:#f8f8f2;--s-accent:#ffb86c;--s-muted:#6272a4;--s-border:#44475a;--s-dimmer:#6272a4;--s-success:#50fa7b;--s-accent-15:rgba(255,184,108,0.15);--s-success-10:rgba(80,250,123,0.1);--s-success-15:rgba(80,250,123,0.15);--s-accent-06:rgba(255,184,108,0.06);--s-muted-06:rgba(98,114,164,0.06);--s-muted-15:rgba(98,114,164,0.15)}
+@media(prefers-color-scheme:light){:root{--s-bg:#FAFAFA;--s-text:#5C6166;--s-accent:#FA8D3E;--s-muted:#A0A6AC;--s-border:#D2D4D8;--s-dimmer:#8A9199;--s-success:#6CBF49;--s-accent-15:rgba(250,141,62,0.15);--s-success-10:rgba(108,191,73,0.1);--s-success-15:rgba(108,191,73,0.15);--s-accent-06:rgba(250,141,62,0.06);--s-muted-06:rgba(160,166,172,0.06);--s-muted-15:rgba(160,166,172,0.15)}}
 *{margin:0;padding:0;box-sizing:border-box}
-body{background:#2F2E2B;color:#E8E5DE;font-family:system-ui,-apple-system,sans-serif;min-height:100dvh;display:flex;justify-content:center;padding:env(safe-area-inset-top,0) 20px 40px}
+body{background:var(--s-bg);color:var(--s-text);font-family:system-ui,-apple-system,sans-serif;min-height:100dvh;display:flex;justify-content:center;padding:env(safe-area-inset-top,0) 20px 40px}
 .c{max-width:480px;width:100%;padding-top:40px}
-h1{color:#DA7756;font-size:22px;margin:0 0 4px;text-align:center}
-.subtitle{text-align:center;color:#908B81;font-size:13px;margin-bottom:28px}
+h1{color:var(--s-accent);font-size:22px;margin:0 0 4px;text-align:center}
+.subtitle{text-align:center;color:var(--s-muted);font-size:13px;margin-bottom:28px}
 
 /* Steps indicator */
 .steps-bar{display:flex;gap:6px;margin-bottom:32px}
-.steps-bar .pip{flex:1;height:3px;border-radius:2px;background:#3E3C37;transition:background 0.3s}
-.steps-bar .pip.done{background:#57AB5A}
-.steps-bar .pip.active{background:#DA7756}
+.steps-bar .pip{flex:1;height:3px;border-radius:2px;background:var(--s-border);transition:background 0.3s}
+.steps-bar .pip.done{background:var(--s-success)}
+.steps-bar .pip.active{background:var(--s-accent)}
 
 /* Step card */
 .step-card{display:none;animation:fadeIn 0.25s ease}
 .step-card.active{display:block}
 @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
 
-.step-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#DA7756;font-weight:600;margin-bottom:8px}
+.step-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--s-accent);font-weight:600;margin-bottom:8px}
 .step-title{font-size:18px;font-weight:600;margin-bottom:6px}
-.step-desc{font-size:14px;line-height:1.6;color:#908B81;margin-bottom:20px}
+.step-desc{font-size:14px;line-height:1.6;color:var(--s-muted);margin-bottom:20px}
 
 .instruction{display:flex;gap:12px;margin-bottom:16px}
-.inst-num{width:24px;height:24px;border-radius:50%;background:rgba(218,119,86,0.15);color:#DA7756;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;margin-top:1px}
+.inst-num{width:24px;height:24px;border-radius:50%;background:var(--s-accent-15);color:var(--s-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;margin-top:1px}
 .inst-text{font-size:14px;line-height:1.6}
-.inst-text .note{font-size:12px;color:#6D6860;margin-top:4px}
+.inst-text .note{font-size:12px;color:var(--s-dimmer);margin-top:4px}
 
-.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#DA7756;color:#fff;text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:600;font-size:14px;margin:4px 0;border:none;cursor:pointer;font-family:inherit;transition:opacity 0.15s}
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--s-accent);color:#fff;text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:600;font-size:14px;margin:4px 0;border:none;cursor:pointer;font-family:inherit;transition:opacity 0.15s}
 .btn:hover{opacity:0.9}
-.btn.outline{background:transparent;border:1.5px solid #3E3C37;color:#E8E5DE}
-.btn.outline:hover{border-color:#6D6860}
-.btn.success{background:#57AB5A}
+.btn.outline{background:transparent;border:1.5px solid var(--s-border);color:var(--s-text)}
+.btn.outline:hover{border-color:var(--s-dimmer)}
+.btn.success{background:var(--s-success)}
 .btn:disabled{opacity:0.4;cursor:default}
 
 .btn-row{display:flex;gap:8px;margin-top:20px}
 .btn-row .btn{flex:1}
 
 .check-status{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:10px;font-size:13px;margin:16px 0}
-.check-status.ok{background:rgba(87,171,90,0.1);color:#57AB5A;border:1px solid rgba(87,171,90,0.15)}
-.check-status.warn{background:rgba(218,119,86,0.06);border:1px solid rgba(218,119,86,0.15);color:#DA7756}
-.check-status.pending{background:rgba(144,139,129,0.06);border:1px solid rgba(144,139,129,0.15);color:#908B81}
+.check-status.ok{background:var(--s-success-10);color:var(--s-success);border:1px solid var(--s-success-15)}
+.check-status.warn{background:var(--s-accent-06);border:1px solid var(--s-accent-15);color:var(--s-accent)}
+.check-status.pending{background:var(--s-muted-06);border:1px solid var(--s-muted-15);color:var(--s-muted)}
 
 .platform-ios,.platform-android,.platform-desktop{display:none}
 
 .done-card{text-align:center;padding:40px 0}
 .done-icon{font-size:48px;margin-bottom:16px}
 .done-title{font-size:20px;font-weight:600;margin-bottom:8px}
-.done-desc{font-size:14px;color:#908B81;margin-bottom:24px}
+.done-desc{font-size:14px;color:var(--s-muted);margin-bottom:24px}
 
-.skip-link{display:block;text-align:center;color:#6D6860;font-size:13px;text-decoration:none;margin-top:12px;cursor:pointer;border:none;background:none;font-family:inherit}
-.skip-link:hover{color:#908B81}
+.skip-link{display:block;text-align:center;color:var(--s-dimmer);font-size:13px;text-decoration:none;margin-top:12px;cursor:pointer;border:none;background:none;font-family:inherit}
+.skip-link:hover{color:var(--s-muted)}
 </style></head><body>
 <div class="c">
 <h1>Clay</h1>

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;
@@ -1646,11 +1647,11 @@ function createProjectContext(opts) {
           var switchTarget = sm.sessions.get(msg.id);
           if (!usersModule.canAccessSession(ws._clayUser.id, switchTarget, { visibility: "public" })) return;
           ws._clayActiveSession = msg.id;
-          sm.switchSession(msg.id, ws);
+          sm.switchSession(msg.id, ws, hydrateImageRefs);
           broadcastPresence();
         } else {
           ws._clayActiveSession = msg.id;
-          sm.switchSession(msg.id, ws);
+          sm.switchSession(msg.id, ws, hydrateImageRefs);
         }
       }
       return;
@@ -2005,7 +2006,7 @@ function createProjectContext(opts) {
           onProcessingChanged();
 
           sm.saveSessionFile(session);
-          sm.switchSession(session.localId, ws);
+          sm.switchSession(session.localId, ws, hydrateImageRefs);
           sm.sendAndRecord(session, { type: "rewind_complete", mode: mode });
           sm.broadcastSessionList();
         } catch (err) {
@@ -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;
@@ -3162,7 +3164,7 @@ function createProjectContext(opts) {
           judgeCraftSession.ralphCraftingMode = true;
           judgeCraftSession.loop = { active: true, iteration: 0, role: "crafting", loopId: newLoopId, name: craftName, source: recordSource, startedAt: loopState.startedAt };
           sm.saveSessionFile(judgeCraftSession);
-          sm.switchSession(judgeCraftSession.localId);
+          sm.switchSession(judgeCraftSession.localId, null, hydrateImageRefs);
           loopState.craftingSessionId = judgeCraftSession.localId;
 
           loopRegistry.updateRecord(newLoopId, { craftingSessionId: judgeCraftSession.localId });
@@ -3206,7 +3208,7 @@ function createProjectContext(opts) {
       craftingSession.ralphCraftingMode = true;
       craftingSession.loop = { active: true, iteration: 0, role: "crafting", loopId: newLoopId, name: craftName, source: recordSource, startedAt: loopState.startedAt };
       sm.saveSessionFile(craftingSession);
-      sm.switchSession(craftingSession.localId);
+      sm.switchSession(craftingSession.localId, null, hydrateImageRefs);
       loopState.craftingSessionId = craftingSession.localId;
 
       // Store crafting session ID in the registry record
@@ -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';
@@ -7,7 +8,7 @@ import { initMateKnowledge, requestKnowledgeList, renderKnowledgeList, handleKno
 import { initRewind, setRewindMode, showRewindModal, clearPendingRewindUuid, addRewindButton } from './modules/rewind.js';
 import { initNotifications, showDoneNotification, playDoneSound, isNotifAlertEnabled, isNotifSoundEnabled } from './modules/notifications.js';
 import { initInput, clearPendingImages, handleInputSync, autoResize, builtinCommands, sendMessage } from './modules/input.js';
-import { initQrCode } from './modules/qrcode.js';
+import { initQrCode, triggerShare } from './modules/qrcode.js';
 import { initFileBrowser, loadRootDirectory, refreshTree, handleFsList, handleFsRead, handleDirChanged, refreshIfOpen, handleFileChanged, handleFileHistory, handleGitDiff, handleFileAt, getPendingNavigate, closeFileViewer, resetFileBrowser } from './modules/filebrowser.js';
 import { initTerminal, openTerminal, closeTerminal, resetTerminals, handleTermList, handleTermCreated, handleTermOutput, handleTermExited, handleTermClosed, sendTerminalCommand } from './modules/terminal.js';
 import { initStickyNotes, handleNotesList, handleNoteCreated, handleNoteUpdated, handleNoteDeleted, openArchive, closeArchive, isArchiveOpen, hideNotes, showNotes, isNotesVisible } from './modules/sticky-notes.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");
@@ -5169,6 +5168,8 @@ import { initLongPress } from './modules/longpress.js';
 
   // --- QR code ---
   initQrCode();
+  var sharePill = document.getElementById("share-pill");
+  if (sharePill) sharePill.addEventListener("click", triggerShare);
 
   // --- File browser ---
   initFileBrowser({
@@ -5192,6 +5193,21 @@ import { initLongPress } from './modules/longpress.js';
   // --- Playbook Engine ---
   initPlaybook();
 
+  // Auto-open playbook from URL param (e.g. ?playbook=push-notifications)
+  (function () {
+    var params = new URLSearchParams(window.location.search);
+    var pbId = params.get("playbook");
+    if (pbId) {
+      // Small delay to ensure DOM and playbook registry are ready
+      setTimeout(function () { openPlaybook(pbId); }, 300);
+      // Clean up URL
+      params.delete("playbook");
+      var clean = params.toString();
+      var newUrl = window.location.pathname + (clean ? "?" + clean : "") + window.location.hash;
+      window.history.replaceState(null, "", newUrl);
+    }
+  })();
+
   // --- In-session search (Cmd+F / Ctrl+F) ---
   initSessionSearch({
     messagesEl: messagesEl,
@@ -6751,7 +6767,13 @@ import { initLongPress } from './modules/longpress.js';
     modal.querySelector(".pwa-modal-backdrop").addEventListener("click", closeModal);
 
     confirmBtn.addEventListener("click", function () {
-      // Redirect to setup page
+      // Builtin cert (*.d.clay.studio): open PWA setup guide
+      if (location.hostname.endsWith(".d.clay.studio")) {
+        closeModal();
+        location.href = "/pwa";
+        return;
+      }
+      // mkcert / other: redirect to onboarding setup page
       var port = parseInt(location.port, 10);
       var setupUrl;
       if (!port) {
@@ -6834,7 +6856,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;
@@ -6870,9 +6892,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);
 
@@ -7044,7 +7064,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/command-palette.css

@@ -320,7 +320,7 @@
     right: 0;
     transform: none;
     width: 100%;
-    max-height: 85vh;
+    max-height: 85dvh;
     border-radius: 16px 16px 0 0;
     border: none;
     border-top: 1px solid var(--border-subtle);

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/menus.css

@@ -244,6 +244,25 @@
   margin-top: 2px;
   font-weight: 400;
 }
+.qr-share-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: #fff;
+  color: #333;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.qr-share-btn:hover { background: #f5f5f5; }
+.qr-share-btn .lucide { width: 14px; height: 14px; }
+.qr-share-btn.hidden { display: none; }
 
 /* --- Notification menu --- */
 #notif-menu-wrap {

package/lib/public/css/overlays.css

@@ -44,35 +44,61 @@ button.top-bar-pill.pill-success:hover { background: color-mix(in srgb, var(--su
 button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
 
 /* PWA install button — left side of top bar, icon only */
-.top-bar-install-btn {
+.top-bar-left-pills {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   position: absolute;
   left: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
+  top: 0;
+  bottom: 0;
+}
+.top-bar-install-btn {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  border-radius: 6px;
+  gap: 4px;
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
   color: var(--accent);
+  border: none;
+  border-radius: 10px;
+  padding: 2px 10px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
   cursor: pointer;
-  padding: 3px;
-  transition: color 0.15s, background 0.15s;
+  white-space: nowrap;
+  line-height: 1;
+  transition: background 0.15s;
 }
-.top-bar-install-btn .lucide { width: 14px; height: 14px; }
-.top-bar-install-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
+.top-bar-install-btn .lucide { width: 12px; height: 12px; }
+.top-bar-install-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
 .top-bar-install-btn.hidden { display: none; }
 .pwa-standalone .top-bar-install-btn { display: none !important; }
 
+/* Share button — desktop only, same style as install pill */
+.top-bar-share-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  color: var(--accent);
+  border: none;
+  border-radius: 10px;
+  padding: 2px 10px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  line-height: 1;
+  transition: background 0.15s;
+}
+.top-bar-share-btn .lucide { width: 12px; height: 12px; }
+.top-bar-share-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
 @media (max-width: 768px) {
-  .top-bar-install-btn {
-    top: auto;
-    bottom: 0;
-    height: 32px;
-    transform: none;
-  }
+  .top-bar-share-btn { display: none; }
 }
+.pwa-standalone .top-bar-share-btn { display: none !important; }
 
 /* PWA install modal */
 .pwa-modal {