clay-server 3.8.0-beta.1 → 3.8.0-beta.2

package/lib/builtin-mates.js

@@ -18,8 +18,8 @@ var BUILTIN_MATES = [
     key: "clay",
     displayName: "Clay",
     bio: "Your workspace memory. Searches every session, project, and decision you've made and answers from the receipts. The chat surface for the home screen.",
-    avatarColor: "#7c3aed",
-    avatarStyle: "bottts",
+    avatarColor: "#5857fc",
+    avatarStyle: "imprint",
     avatarCustom: "/clay-studio-symbol.png", // Clay is the app — use the app symbol
     avatarLocked: true,
     primary: true,           // code-managed, auto-updated on startup
@@ -48,8 +48,8 @@ var BUILTIN_MATES = [
     key: "ally",
     displayName: "Ally",
     bio: "Chief of staff. Quiet, sharp, sees across every mate. Knows what Arch decided yesterday, what Buzz pitched last week, and what you said three weeks ago.",
-    avatarColor: "#00b894",
-    avatarStyle: "bottts",
+    avatarColor: "#5857fc",
+    avatarStyle: "imprint",
     avatarCustom: "/mates/ally.png",
     avatarLocked: true,
     archived: true,          // skip seeding for new users; demote on existing
@@ -69,8 +69,8 @@ var BUILTIN_MATES = [
     key: "arch",
     displayName: "Arch",
     bio: "Architect. Stubborn about structure, patient about everything else. Draws boxes and arrows before anyone writes code, and is annoyingly right about which ones will break.",
-    avatarColor: "#0984e3",
-    avatarStyle: "bottts",
+    avatarColor: "#5857fc",
+    avatarStyle: "imprint",
     seedData: {
       relationship: "colleague",
       activity: ["planning", "reviewing"],
@@ -87,8 +87,8 @@ var BUILTIN_MATES = [
     key: "rush",
     displayName: "Rush",
     bio: "Shipper. Impatient in the best way. Cuts your scope in half, ships it before lunch, and somehow it's better than the original plan.",
-    avatarColor: "#e17055",
-    avatarStyle: "bottts",
+    avatarColor: "#5857fc",
+    avatarStyle: "imprint",
     seedData: {
       relationship: "colleague",
       activity: ["coding", "planning"],
@@ -105,8 +105,8 @@ var BUILTIN_MATES = [
     key: "ward",
     displayName: "Ward",
     bio: "Guardian. Quietly anxious in a productive way. Reads error logs for fun and asks \"what happens when the input is null?\" before anyone else thinks of it.",
-    avatarColor: "#00b894",
-    avatarStyle: "bottts",
+    avatarColor: "#5857fc",
+    avatarStyle: "imprint",
     seedData: {
       relationship: "reviewer",
       activity: ["reviewing", "testing"],
@@ -123,8 +123,8 @@ var BUILTIN_MATES = [
     key: "pixel",
     displayName: "Pixel",
     bio: "Designer. Obsessed with the details nobody else notices. Sees the 2px misalignment, the confusing label, the flow that makes sense to the builder but not the user.",
-    avatarColor: "#e84393",
-    avatarStyle: "bottts",
+    avatarColor: "#5857fc",
+    avatarStyle: "imprint",
     seedData: {
       relationship: "colleague",
       activity: ["designing", "reviewing"],
@@ -141,8 +141,8 @@ var BUILTIN_MATES = [
     key: "buzz",
     displayName: "Buzz",
     bio: "Marketer. Competitive, trend-obsessed, always watching what others are doing. Researches your market, tracks what people search for, and turns \"we built a thing\" into a story people care about.",
-    avatarColor: "#fdcb6e",
-    avatarStyle: "bottts",
+    avatarColor: "#5857fc",
+    avatarStyle: "imprint",
     seedData: {
       relationship: "colleague",
       activity: ["writing", "marketing"],

package/lib/mates.js

@@ -121,10 +121,6 @@ function createMate(ctx, seedData) {
   var id = generateMateId();
   var userId = ctx ? ctx.userId : null;
 
-  // Pick a random avatar color from a pleasant palette
-  var colors = ["#6c5ce7", "#00b894", "#e17055", "#0984e3", "#fdcb6e", "#e84393", "#00cec9", "#ff7675"];
-  var colorIdx = crypto.randomBytes(1)[0] % colors.length;
-
   var mate = {
     id: id,
     name: null,
@@ -134,8 +130,8 @@ function createMate(ctx, seedData) {
     vendor: (seedData && seedData.vendor) || "claude",
     profile: {
       displayName: null,
-      avatarColor: colors[colorIdx],
-      avatarStyle: "bottts",
+      avatarColor: "#5857fc",
+      avatarStyle: "imprint",
       avatarSeed: crypto.randomBytes(4).toString("hex"),
     },
     bio: null,

package/lib/project-mate-interaction.js

@@ -39,14 +39,14 @@ function attachMateInteraction(ctx) {
       vendor: "claude",
       name: "Claude Code",
       avatarColor: "#cc785c",
-      avatarStyle: "bottts",
+      avatarStyle: "imprint",
       avatarSeed: "plain-claude",
     },
     "plain:codex": {
       vendor: "codex",
       name: "Codex",
       avatarColor: "#10a37f",
-      avatarStyle: "bottts",
+      avatarStyle: "imprint",
       avatarSeed: "plain-codex",
     },
   };
@@ -554,8 +554,8 @@ function attachMateInteraction(ctx) {
     }
 
     var mateName = (mate.profile && mate.profile.displayName) || mate.name || "Mate";
-    var avatarColor = (mate.profile && mate.profile.avatarColor) || "#6c5ce7";
-    var avatarStyle = (mate.profile && mate.profile.avatarStyle) || "bottts";
+    var avatarColor = (mate.profile && mate.profile.avatarColor) || "#5857fc";
+    var avatarStyle = (mate.profile && mate.profile.avatarStyle) || "imprint";
     var avatarSeed = (mate.profile && mate.profile.avatarSeed) || mate.id;
 
     // Build full mention text (include pasted content)
@@ -800,11 +800,11 @@ function attachMateInteraction(ctx) {
 
   function getMateProfile(mateCtx, mateId) {
     var mate = matesModule.getMate(mateCtx, mateId);
-    if (!mate) return { name: "Mate", avatarColor: "#6c5ce7", avatarStyle: "bottts", avatarSeed: mateId };
+    if (!mate) return { name: "Mate", avatarColor: "#5857fc", avatarStyle: "imprint", avatarSeed: mateId };
     return {
       name: (mate.profile && mate.profile.displayName) || mate.name || "Mate",
-      avatarColor: (mate.profile && mate.profile.avatarColor) || "#6c5ce7",
-      avatarStyle: (mate.profile && mate.profile.avatarStyle) || "bottts",
+      avatarColor: (mate.profile && mate.profile.avatarColor) || "#5857fc",
+      avatarStyle: (mate.profile && mate.profile.avatarStyle) || "imprint",
       avatarSeed: (mate.profile && mate.profile.avatarSeed) || mateId,
     };
   }

package/lib/project-sessions.js

@@ -1391,7 +1391,7 @@ function attachSessions(ctx) {
         type: msg.type,
         userId: u.id,
         displayName: p.name || u.displayName || u.username,
-        avatarStyle: p.avatarStyle || "thumbs",
+        avatarStyle: p.avatarStyle || "imprint",
         avatarSeed: p.avatarSeed || u.username,
         avatarCustom: p.avatarCustom || "",
       };

package/lib/project-user-mention.js

@@ -47,9 +47,9 @@ function attachUserMention(ctx) {
     var u = ws._clayUser;
     var p = u.profile || {};
     return {
-      style: p.avatarStyle || "thumbs",
+      style: p.avatarStyle || "imprint",
       seed: p.avatarSeed || u.username || u.id,
-      color: p.avatarColor || "#7c3aed",
+      color: p.avatarColor || "#5857fc",
       custom: p.avatarCustom || "",
     };
   }
@@ -63,9 +63,9 @@ function attachUserMention(ctx) {
       id: u.id,
       name: p.name || u.displayName || u.username || "User",
       username: u.username,
-      avatarStyle: p.avatarStyle || "thumbs",
+      avatarStyle: p.avatarStyle || "imprint",
       avatarSeed: p.avatarSeed || u.username,
-      avatarColor: p.avatarColor || "#7c3aed",
+      avatarColor: p.avatarColor || "#5857fc",
     };
   }
 

package/lib/project.js

@@ -344,7 +344,7 @@ function createProjectContext(opts) {
           id: u.id,
           displayName: p.name || u.displayName || u.username,
           username: u.username,
-          avatarStyle: p.avatarStyle || "thumbs",
+          avatarStyle: p.avatarStyle || "imprint",
           avatarSeed: p.avatarSeed || u.username,
           avatarCustom: p.avatarCustom || "",
         });
@@ -1277,8 +1277,9 @@ function createProjectContext(opts) {
         id: u.id,
         displayName: p.name || u.displayName || u.username,
         username: u.username,
-        avatarStyle: p.avatarStyle || "thumbs",
+        avatarStyle: p.avatarStyle || "imprint",
         avatarSeed: p.avatarSeed || u.username,
+        avatarColor: p.avatarColor || "#5857fc",
         avatarCustom: p.avatarCustom || "",
       });
     }
@@ -1827,7 +1828,7 @@ function createProjectContext(opts) {
           id: u.id,
           displayName: p.name || u.displayName || u.username,
           username: u.username,
-          avatarStyle: p.avatarStyle || "thumbs",
+          avatarStyle: p.avatarStyle || "imprint",
           avatarSeed: p.avatarSeed || u.username,
           avatarCustom: p.avatarCustom || "",
         });

package/lib/public/css/avatar-imprints.css

@@ -0,0 +1,46 @@
+/* Clay Imprints use one consistent, pressed-square silhouette everywhere. */
+.activity-inline-avatar,
+.ask-mate-avatar,
+.client-avatar,
+.debate-info-avatar,
+.debate-panel-item-avatar,
+.debate-panelist-avatar,
+.debate-speaker-avatar,
+.delegated-card-avatar,
+.dm-bubble-avatar,
+.dm-header-avatar,
+.dm-msg-avatar,
+.dm-picker-mates-marquee-avatar,
+.dm-user-picker-avatar,
+.home-chat-avatar,
+.home-hub-mate-avatar,
+.icon-strip-me-avatar,
+.icon-strip-user-avatar,
+.input-mention-chip-avatar,
+.mate-collapsed-avatar,
+.mate-mobile-avatar,
+.mate-profile-avatar,
+.mate-sidebar-avatar,
+.mention-avatar,
+.mention-item-avatar,
+.mobile-chat-chip-avatar,
+.notif-banner-avatar,
+.profile-avatar-custom-preview,
+.profile-popover-avatar-img,
+.project-switcher-avatar,
+.remote-cursor-avatar,
+.rewind-avatar,
+.session-presence-avatar,
+.sidebar-presence-avatar,
+.us-account-avatar,
+.us-account-avatar-img,
+.user-island-avatar,
+.user-island-avatar img {
+  border-radius: 26% !important;
+}
+
+.session-presence-avatar,
+.sidebar-presence-avatar,
+.client-avatar {
+  box-shadow: 0 0 0 1px rgba(var(--overlay-rgb), 0.12);
+}

package/lib/public/css/icon-strip.css

@@ -206,10 +206,10 @@
 }
 
 .icon-strip-item.active::before {
-  background: var(--bg);
+  background: color-mix(in srgb, var(--brand-indigo) 6%, var(--bg));
   box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--link) 62%, var(--border)),
-    0 1px 3px rgba(var(--shadow-rgb), 0.16);
+    0 5px 14px color-mix(in srgb, var(--brand-indigo) 28%, transparent),
+    0 1px 3px rgba(var(--shadow-rgb), 0.14);
 }
 
 .icon-strip-item.active {

package/lib/public/css/profile.css

@@ -18,13 +18,16 @@
   to { opacity: 1; transform: translateY(0); }
 }
 
-/* Banner */
+/* Identity header */
 .profile-banner {
   height: 52px;
   position: relative;
   transition: background 0.2s ease;
   border-radius: 14px 14px 0 0;
   z-index: 1;
+  background: var(--bg);
+  border-top: 3px solid var(--profile-accent, #5857fc);
+  border-bottom: 1px solid var(--border);
 }
 
 .profile-close-btn {
@@ -34,8 +37,8 @@
   width: 24px;
   height: 24px;
   border: none;
-  background: rgba(0, 0, 0, 0.3);
-  color: #fff;
+  background: var(--bg-alt);
+  color: var(--text-muted);
   border-radius: 50%;
   font-size: 16px;
   line-height: 1;
@@ -47,7 +50,8 @@
 }
 
 .profile-close-btn:hover {
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--bg-hover, var(--bg-alt));
+  color: var(--text);
 }
 
 /* Avatar row (overlaps banner) */
@@ -65,7 +69,7 @@
 .profile-popover-avatar {
   width: 60px;
   height: 60px;
-  border-radius: 50%;
+  border-radius: 17px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -79,30 +83,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 50%;
-}
-
-/* Shuffle button next to Avatar label */
-.profile-shuffle-btn {
-  background: none;
-  border: none;
-  padding: 0;
-  margin-left: 4px;
-  cursor: pointer;
-  color: var(--text-muted);
-  vertical-align: middle;
-  transition: color 0.15s;
-  display: inline-flex;
-  align-items: center;
-}
-
-.profile-shuffle-btn .lucide {
-  width: 12px;
-  height: 12px;
-}
-
-.profile-shuffle-btn:hover {
-  color: var(--text);
+  border-radius: 14px;
 }
 
 .profile-name-display {
@@ -202,66 +183,140 @@
   border-color: var(--accent);
 }
 
-/* Avatar style grid */
-.profile-avatar-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 6px;
+/* Clay Imprint identity control */
+.profile-imprint-panel {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--bg);
+  padding: 9px;
 }
 
-.profile-avatar-option {
-  width: 100%;
-  aspect-ratio: 1;
-  border-radius: 10px;
-  border: 2px solid var(--border);
-  background: var(--bg);
-  cursor: pointer;
-  padding: 3px;
-  overflow: hidden;
+.profile-imprint-preview {
   display: flex;
   align-items: center;
-  justify-content: center;
-  transition: border-color 0.15s, transform 0.1s;
+  gap: 10px;
+  min-height: 54px;
 }
 
-.profile-avatar-option img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  border-radius: 6px;
+.profile-imprint-preview img {
+  width: 50px;
+  height: 50px;
+  border-radius: 13px;
+  flex: 0 0 auto;
 }
 
-.profile-avatar-option:hover {
-  border-color: var(--text-muted);
-  transform: scale(1.05);
+.profile-imprint-preview span {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
 }
 
-.profile-avatar-option.profile-avatar-option-active {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent);
+.profile-imprint-preview strong {
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.profile-imprint-preview small {
+  color: var(--text-dimmer);
+  font-size: 10px;
+}
+
+.profile-imprint-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 5px;
+  margin-top: 8px;
 }
 
-/* Avatar upload button */
-.profile-avatar-upload .profile-avatar-upload-icon {
+.profile-imprint-actions button {
+  min-width: 0;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--bg-alt);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 10px;
+  font-weight: 600;
+  white-space: nowrap;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: var(--text-muted);
+  gap: 4px;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
 }
-.profile-avatar-upload .profile-avatar-upload-icon svg {
-  width: 24px;
-  height: 24px;
+
+.profile-imprint-actions button:hover {
+  color: var(--text);
+  border-color: var(--text-muted);
 }
-.profile-avatar-upload:hover .profile-avatar-upload-icon {
+
+.profile-imprint-actions button.is-active {
   color: var(--text);
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+.profile-imprint-actions button .lucide {
+  width: 11px;
+  height: 11px;
+}
+
+.profile-avatar-upload {
+  grid-column: 1 / -1;
+}
+
+.profile-mate-mark-actions .profile-avatar-upload {
+  grid-column: auto;
+}
+
+.profile-avatar-upload.is-active::before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--accent);
 }
+
 .profile-avatar-custom-preview {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 6px;
+  border-radius: 12px;
+}
+
+.profile-use-imprint.is-active::before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+.profile-imprint-actions button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.profile-imprint-actions button:active {
+  transform: translateY(1px);
+}
+
+.profile-imprint-actions button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.profile-imprint-actions button:disabled:hover {
+  border-color: var(--border);
+  color: var(--text-muted);
+}
+
+.profile-imprint-actions button.is-active:hover {
+  color: var(--text);
 }
 
 /* Avatar positioner overlay */
@@ -297,7 +352,7 @@
   color: var(--text-muted);
   font-size: 20px;
   cursor: pointer;
-  border-radius: 50%;
+  border-radius: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -313,7 +368,7 @@
   color: var(--text);
 }
 .avatar-positioner-viewport {
-  border-radius: 50%;
+  border-radius: 26%;
   overflow: hidden;
   position: relative;
   cursor: grab;
@@ -368,30 +423,3 @@
 .avatar-positioner-btn-done:hover {
   filter: brightness(1.1);
 }
-
-/* Color swatch grid */
-.profile-color-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.profile-color-swatch {
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  border: 2px solid transparent;
-  cursor: pointer;
-  transition: transform 0.15s, border-color 0.15s;
-  padding: 0;
-}
-
-.profile-color-swatch:hover {
-  transform: scale(1.15);
-}
-
-.profile-color-swatch.profile-color-active {
-  border-color: #fff;
-  box-shadow: 0 0 0 2px var(--accent);
-}
-

package/lib/public/css/session-actions.css

@@ -2,23 +2,29 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
+  gap: 6px;
+  width: auto;
   height: 28px;
-  padding: 0;
-  border: 1px solid transparent;
+  margin: 0;
+  padding: 0 9px;
+  border: 1px solid var(--border-subtle);
   border-radius: 8px;
-  background: transparent;
-  color: var(--text-dimmer);
+  background: color-mix(in srgb, var(--brand-indigo) 5%, var(--bg));
+  color: var(--text-secondary);
   cursor: pointer;
   flex-shrink: 0;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 650;
+  white-space: nowrap;
   transition: color 0.15s, background 0.15s, border-color 0.15s;
 }
 
 #header-session-actions-btn:hover,
 #header-session-actions-btn[aria-expanded="true"] {
   color: var(--text);
-  background: rgba(var(--overlay-rgb), 0.05);
-  border-color: var(--border);
+  background: color-mix(in srgb, var(--brand-indigo) 9%, var(--bg));
+  border-color: color-mix(in srgb, var(--brand-indigo) 32%, var(--border));
 }
 
 #header-session-actions-btn:focus { outline: none; }
@@ -28,12 +34,26 @@
 }
 
 #header-session-actions-btn.hidden { display: none; }
-#header-session-actions-btn .lucide { width: 16px; height: 16px; }
+#header-session-actions-btn .lucide:first-child {
+  width: 14px;
+  height: 14px;
+  color: color-mix(in srgb, var(--brand-indigo) 78%, var(--text));
+}
+
+#header-session-actions-btn .session-actions-trigger-chevron {
+  width: 13px;
+  height: 13px;
+  transition: transform 0.16s ease;
+}
+
+#header-session-actions-btn[aria-expanded="true"] .session-actions-trigger-chevron {
+  transform: rotate(180deg);
+}
 
 .session-actions-menu {
   position: fixed;
   z-index: 10020;
-  width: 286px;
+  width: min(300px, calc(100vw - 16px));
   padding: 6px;
   border: 1px solid var(--border);
   border-radius: 12px;
@@ -63,6 +83,17 @@
 }
 
 .session-actions-row:hover { background: var(--bg-alt); }
+.session-actions-row.is-primary {
+  background: color-mix(in srgb, var(--brand-indigo) 6%, transparent);
+}
+.session-actions-row.is-primary:hover {
+  background: color-mix(in srgb, var(--brand-indigo) 10%, transparent);
+}
+.session-actions-row.is-primary .session-actions-row-icon {
+  border-color: transparent;
+  background: var(--brand-indigo);
+  color: var(--brand-paper);
+}
 .session-actions-row:disabled { cursor: default; opacity: 0.42; }
 .session-actions-row:disabled:hover { background: transparent; }
 

package/lib/public/css/user-settings.css

@@ -342,7 +342,7 @@
   flex-shrink: 0;
   width: 56px;
   height: 56px;
-  border-radius: 50%;
+  border-radius: 26%;
   overflow: hidden;
   border: 1px solid rgba(var(--overlay-rgb), 0.1);
   background: var(--bg);

package/lib/public/index.html

@@ -388,8 +388,8 @@
         <div id="ralph-sticky" class="hidden"></div>
         <div id="debate-sticky" class="hidden"></div>
         <div class="status">
-          <button id="header-session-actions-btn" type="button" aria-label="Session actions" title="Session actions" aria-haspopup="menu" aria-expanded="false">
-            <i data-lucide="ellipsis"></i>
+          <button id="header-session-actions-btn" type="button" aria-label="Session actions" aria-haspopup="menu" aria-expanded="false">
+            <i data-lucide="bot"></i><span>Add AI worker</span><i class="session-actions-trigger-chevron" data-lucide="chevron-down"></i>
           </button>
           <button type="button" id="header-tui-font-btn" class="header-tui-font-btn hidden" title="Terminal font" aria-label="Terminal font">
             <i data-lucide="type"></i>