clay-server 2.13.0-beta.7 → 2.13.0-beta.9

package/lib/public/app.js

@@ -634,6 +634,13 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
       var mateColor = (targetUser.profile && targetUser.profile.avatarColor) || targetUser.avatarColor || "#7c3aed";
       document.body.style.setProperty("--mate-color", mateColor);
       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 myUser = cachedAllUsers.find(function (u) { return u.id === myUserId; });
+      var myAvatarUrl = "https://api.dicebear.com/9.x/" + ((myUser && myUser.avatarStyle) || "thumbs") + "/svg?seed=" + encodeURIComponent((myUser && (myUser.avatarSeed || myUser.username)) || myUserId) + "&size=36";
+      document.body.dataset.mateAvatarUrl = mateAvatarUrl;
+      document.body.dataset.myAvatarUrl = myAvatarUrl;
       var titleBarContent = document.querySelector(".title-bar-content");
       if (titleBarContent) {
         titleBarContent.style.background = mateColor;
@@ -720,6 +727,11 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
     // Reset chat title bar and mate color
     document.body.style.removeProperty("--mate-color");
     document.body.classList.remove("mate-dm-active");
+    delete document.body.dataset.mateAvatarUrl;
+    delete document.body.dataset.myAvatarUrl;
+    // Remove injected DM bubble avatars
+    var bubbleAvatars = messagesEl.querySelectorAll(".dm-bubble-avatar");
+    for (var ba = 0; ba < bubbleAvatars.length; ba++) bubbleAvatars[ba].remove();
     var titleBarContent = document.querySelector(".title-bar-content");
     if (titleBarContent) {
       titleBarContent.style.background = "";
@@ -2547,7 +2559,34 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
     }
 
 
-    div.appendChild(bubble);
+    // Mate DM: wrap avatar + header + bubble in DM-like layout
+    if (document.body.classList.contains("mate-dm-active") && document.body.dataset.myAvatarUrl) {
+      var avi = document.createElement("img");
+      avi.className = "dm-bubble-avatar dm-bubble-avatar-me";
+      avi.src = document.body.dataset.myAvatarUrl;
+      div.appendChild(avi);
+
+      var contentWrap = document.createElement("div");
+      contentWrap.className = "dm-bubble-content";
+
+      var header = document.createElement("div");
+      header.className = "dm-bubble-header";
+      var myU = cachedAllUsers.find(function (u) { return u.id === myUserId; });
+      var nameSpan = document.createElement("span");
+      nameSpan.className = "dm-bubble-name";
+      nameSpan.textContent = myU ? myU.displayName : "Me";
+      header.appendChild(nameSpan);
+      var timeSpan = document.createElement("span");
+      timeSpan.className = "dm-bubble-time";
+      var nowH = new Date();
+      timeSpan.textContent = String(nowH.getHours()).padStart(2, "0") + ":" + String(nowH.getMinutes()).padStart(2, "0");
+      header.appendChild(timeSpan);
+      contentWrap.appendChild(header);
+      contentWrap.appendChild(bubble);
+      div.appendChild(contentWrap);
+    } else {
+      div.appendChild(bubble);
+    }
 
     // Action bar below bubble (icons visible on hover)
     var actions = document.createElement("div");
@@ -2581,7 +2620,40 @@ import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } fro
       currentMsgEl = document.createElement("div");
       currentMsgEl.className = "msg-assistant";
       currentMsgEl.dataset.turn = turnCounter;
-      currentMsgEl.innerHTML = '<div class="md-content" dir="auto"></div>';
+      // Inject mate avatar + header for DM bubble style
+      if (document.body.classList.contains("mate-dm-active") && document.body.dataset.mateAvatarUrl) {
+        var avi = document.createElement("img");
+        avi.className = "dm-bubble-avatar dm-bubble-avatar-mate";
+        avi.src = document.body.dataset.mateAvatarUrl;
+        currentMsgEl.appendChild(avi);
+
+        var contentWrap = document.createElement("div");
+        contentWrap.className = "dm-bubble-content";
+
+        var header = document.createElement("div");
+        header.className = "dm-bubble-header";
+        var nameSpan = document.createElement("span");
+        nameSpan.className = "dm-bubble-name";
+        nameSpan.textContent = (dmTargetUser && dmTargetUser.displayName) || "Mate";
+        header.appendChild(nameSpan);
+        var timeSpan = document.createElement("span");
+        timeSpan.className = "dm-bubble-time";
+        var nowA = new Date();
+        timeSpan.textContent = String(nowA.getHours()).padStart(2, "0") + ":" + String(nowA.getMinutes()).padStart(2, "0");
+        header.appendChild(timeSpan);
+        contentWrap.appendChild(header);
+
+        var mdDiv = document.createElement("div");
+        mdDiv.className = "md-content";
+        mdDiv.dir = "auto";
+        contentWrap.appendChild(mdDiv);
+        currentMsgEl.appendChild(contentWrap);
+      } else {
+        var mdDiv = document.createElement("div");
+        mdDiv.className = "md-content";
+        mdDiv.dir = "auto";
+        currentMsgEl.appendChild(mdDiv);
+      }
       addToMessages(currentMsgEl);
       currentFullText = "";
     }

package/lib/public/css/mates.css

@@ -151,6 +151,20 @@
   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;
@@ -1216,3 +1230,110 @@ body.mate-dm-active .notes-archive-header button:hover {
   color: #fff;
   background: rgba(255, 255, 255, 0.15);
 }
+
+/* ==========================================================================
+   Mate DM: Chat bubble style (messenger feel)
+   ========================================================================== */
+
+/* --- Avatar (injected by JS into .msg-user / .msg-assistant) --- */
+.dm-bubble-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  flex-shrink: 0;
+  display: none;
+  object-fit: cover;
+  margin-top: 2px;
+}
+body.mate-dm-active .dm-bubble-avatar {
+  display: block;
+}
+
+/* --- DM bubble header (name + time) --- */
+.dm-bubble-content {
+  flex: 1;
+  min-width: 0;
+}
+.dm-bubble-header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.dm-bubble-name {
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--text);
+}
+.dm-bubble-time {
+  font-size: 12px;
+  color: var(--text-dimmer);
+}
+
+/* --- Shared: Slack-style flat layout for both user & assistant --- */
+body.mate-dm-active .msg-user,
+body.mate-dm-active .msg-assistant {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  max-width: 100%;
+  padding: 4px 16px;
+  margin: 0;
+  border-radius: 0;
+}
+body.mate-dm-active .msg-user:hover,
+body.mate-dm-active .msg-assistant:hover {
+  background: var(--bg-alt);
+}
+
+/* --- User messages --- */
+body.mate-dm-active .msg-user {
+  justify-content: flex-start; /* left-aligned like DM */
+}
+body.mate-dm-active .msg-user .dm-bubble-avatar-me {
+  order: -1; /* avatar first (left) */
+}
+body.mate-dm-active .msg-user .bubble {
+  background: none;
+  border-radius: 0;
+  padding: 0;
+  max-width: 100%;
+  font-size: 15px;
+  line-height: 1.46;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+body.mate-dm-active .msg-user .msg-actions {
+  display: none;
+}
+
+/* --- Assistant messages --- */
+body.mate-dm-active .msg-assistant .dm-bubble-content {
+  flex: 1;
+  min-width: 0;
+}
+body.mate-dm-active .msg-assistant .md-content {
+  background: none;
+  border-radius: 0;
+  padding: 0;
+}
+
+/* Hide turn meta in mate DM */
+body.mate-dm-active .turn-meta {
+  display: none;
+}
+
+/* --- Interstitial elements: indent to align with message content (16px pad + 36px avatar + 8px gap = 60px) --- */
+body.mate-dm-active .thinking-item,
+body.mate-dm-active .tool-item,
+body.mate-dm-active .tool-group,
+body.mate-dm-active .plan-card,
+body.mate-dm-active .permission-container,
+body.mate-dm-active .ask-user-container,
+body.mate-dm-active .subagent-log,
+body.mate-dm-active .conflict-msg,
+body.mate-dm-active .context-overflow-msg,
+body.mate-dm-active .sys-msg,
+body.mate-dm-active .activity-inline {
+  padding-left: 60px;
+}

package/lib/public/index.html

@@ -1320,7 +1320,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.</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. <span class="mate-intro-experimental">Experimental</span></p>
         </div>
       </div>
       <!-- Step 1: Relationship -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.13.0-beta.7",
+  "version": "2.13.0-beta.9",
   "description": "Web UI for Claude Code. Any device. Push notifications.",
   "bin": {
     "clay-server": "./bin/cli.js",