clay-server 2.23.1 → 2.24.0-beta.1

package/lib/public/app.js

@@ -77,6 +77,9 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   var cachedMatesList = [];       // Cached list of mates for user strip
   var cachedAvailableBuiltins = []; // Deleted built-in mates available for re-add
 
+  // Claude Code avatar (mascot image served from public root)
+  var CLAUDE_CODE_AVATAR = "/claude-code-avatar.png";
+
   // --- Mate project switching ---
   var mateProjectSlug = null;
   var savedMainSlug = null; // main project slug saved during mate DM
@@ -562,14 +565,62 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     if (!ws || ws.readyState !== 1) return;
     // Check mate skill updates before opening mate DM
     if (typeof targetUserId === "string" && targetUserId.indexOf("mate_") === 0) {
-      requireClayMateInterview(function () {
-        ws.send(JSON.stringify({ type: "dm_open", targetUserId: targetUserId }));
+      showMateOnboarding(function () {
+        requireClayMateInterview(function () {
+          ws.send(JSON.stringify({ type: "dm_open", targetUserId: targetUserId }));
+        });
       });
       return;
     }
     ws.send(JSON.stringify({ type: "dm_open", targetUserId: targetUserId }));
   }
 
+  var MATE_ONBOARDING_KEY = "clay-mate-onboarding-shown";
+
+  function showMateOnboarding(callback) {
+    try {
+      if (localStorage.getItem(MATE_ONBOARDING_KEY)) { callback(); return; }
+    } catch (e) {}
+
+    var overlay = document.createElement("div");
+    overlay.className = "mate-onboarding-overlay";
+    overlay.innerHTML =
+      '<div class="mate-onboarding-card">' +
+        '<h2 class="mate-onboarding-title">Meet your Mates</h2>' +
+        '<p class="mate-onboarding-desc">' +
+          'Mates are AI teammates powered by your Claude Code.<br>Each one has a distinct role, builds its own knowledge, and gets sharper over time.' +
+        '</p>' +
+        '<ul class="mate-onboarding-features">' +
+          '<li><span class="mate-onboarding-bullet">\uD83C\uDFAD</span><div><strong>Specialized personas</strong><br><span class="mate-onboarding-sub">Architect, reviewer, researcher, chief of staff, and more</span></div></li>' +
+          '<li><span class="mate-onboarding-bullet">\uD83D\uDD04</span><div><strong>Persistent memory</strong><br><span class="mate-onboarding-sub">Every conversation makes them smarter about you and your work</span></div></li>' +
+          '<li><span class="mate-onboarding-bullet">\uD83D\uDCAC</span><div><strong>Shared context across the team</strong><br><span class="mate-onboarding-sub">What one mate learns, the others can reference</span></div></li>' +
+          '<li><span class="mate-onboarding-bullet">\uD83D\uDCDA</span><div><strong>Self-growing knowledge base</strong><br><span class="mate-onboarding-sub">They accumulate notes, decisions, and observations on their own</span></div></li>' +
+        '</ul>' +
+        '<button class="mate-onboarding-btn">Let\u2019s go</button>' +
+      '</div>';
+
+    document.body.appendChild(overlay);
+
+    // Animate in
+    requestAnimationFrame(function () {
+      overlay.classList.add("visible");
+    });
+
+    function dismissOnboarding() {
+      try { localStorage.setItem(MATE_ONBOARDING_KEY, "1"); } catch (e) {}
+      fetch("/api/user/mate-onboarded", { method: "POST" }).catch(function () {});
+      overlay.classList.remove("visible");
+      setTimeout(function () { overlay.remove(); callback(); }, 200);
+    }
+
+    overlay.querySelector(".mate-onboarding-btn").addEventListener("click", dismissOnboarding);
+
+    // Click outside to dismiss
+    overlay.addEventListener("click", function (e) {
+      if (e.target === overlay) dismissOnboarding();
+    });
+  }
+
   function enterDmMode(key, targetUser, messages) {
     console.log("[DEBUG enterDmMode] key=" + key, "isMate=" + (targetUser && targetUser.isMate), "messages=" + (messages ? messages.length : 0));
     // Clean up previous DM/mate state before entering new one
@@ -1289,12 +1340,13 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
       if (msg.dmFavorites) cachedDmFavorites = msg.dmFavorites;
       if (msg.dmConversations) cachedDmConversations = msg.dmConversations;
       renderUserStrip(msg.allUsers, cachedOnlineIds, myUserId, cachedDmFavorites, cachedDmConversations, dmUnread, dmRemovedUsers, cachedMatesList);
-      // Update my info in body.dataset if in mate DM (fixes stale data after refresh)
-      if (document.body.classList.contains("mate-dm-active")) {
+      // Update my info in body.dataset if in mate DM or wide view (fixes stale data after refresh)
+      if (document.body.classList.contains("mate-dm-active") || document.body.classList.contains("wide-view")) {
         var refreshedMyUser = cachedAllUsers.find(function (u) { return u.id === myUserId; });
         if (refreshedMyUser) {
-          document.body.dataset.myDisplayName = refreshedMyUser.displayName || "";
+          document.body.dataset.myDisplayName = refreshedMyUser.displayName || refreshedMyUser.username || "";
           document.body.dataset.myAvatarUrl = userAvatarUrl(refreshedMyUser, 36);
+          try { localStorage.setItem("clay_my_user", JSON.stringify({ displayName: refreshedMyUser.displayName, username: refreshedMyUser.username, avatarStyle: refreshedMyUser.avatarStyle, avatarSeed: refreshedMyUser.avatarSeed, avatarCustom: refreshedMyUser.avatarCustom })); } catch(e) {}
         }
       }
       // Render my avatar (always present, hidden behind user-island)
@@ -1444,6 +1496,10 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   $("paste-modal").querySelector(".paste-modal-close").addEventListener("click", function() {
     $("paste-modal").classList.add("hidden");
   });
+  $("paste-modal").querySelector(".paste-modal-copy").addEventListener("click", function() {
+    var body = $("paste-modal-body");
+    if (body) copyToClipboard(body.textContent, "Copied to clipboard");
+  });
   $("mermaid-modal").querySelector(".confirm-backdrop").addEventListener("click", closeMermaidModal);
   $("mermaid-modal").querySelector(".mermaid-modal-btn[title='Close']").addEventListener("click", closeMermaidModal);
   $("image-modal").querySelector(".confirm-backdrop").addEventListener("click", closeImageModal);
@@ -2868,38 +2924,38 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     }
 
 
-    // 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);
+    // Always render avatar + header structure (CSS controls visibility)
+    var _myU = cachedAllUsers.find(function (u) { return u.id === myUserId; });
+    if (!_myU) {
+      try { _myU = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch(e) {}
+    }
 
-      var contentWrap = document.createElement("div");
-      contentWrap.className = "dm-bubble-content";
+    var avi = document.createElement("img");
+    avi.className = "dm-bubble-avatar dm-bubble-avatar-me";
+    avi.src = document.body.dataset.myAvatarUrl || userAvatarUrl(_myU || { id: myUserId }, 36);
+    div.appendChild(avi);
 
-      var header = document.createElement("div");
-      header.className = "dm-bubble-header";
-      var myDisplayName = document.body.dataset.myDisplayName || "";
-      if (!myDisplayName) {
-        var myU = cachedAllUsers.find(function (u) { return u.id === myUserId; });
-        myDisplayName = (myU && myU.displayName) || "Me";
-      }
-      var nameSpan = document.createElement("span");
-      nameSpan.className = "dm-bubble-name";
-      nameSpan.textContent = myDisplayName;
-      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);
-    }
+    var contentWrap = document.createElement("div");
+    contentWrap.className = "dm-bubble-content";
+
+    var header = document.createElement("div");
+    header.className = "dm-bubble-header";
+    var myDisplayName = document.body.dataset.myDisplayName || "";
+    if (!myDisplayName) {
+      myDisplayName = (_myU && (_myU.displayName || _myU.username)) || "Me";
+    }
+    var nameSpan = document.createElement("span");
+    nameSpan.className = "dm-bubble-name";
+    nameSpan.textContent = myDisplayName;
+    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);
 
     // Action bar below bubble (icons visible on hover)
     var actions = document.createElement("div");
@@ -2933,40 +2989,34 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
       currentMsgEl = document.createElement("div");
       currentMsgEl.className = "msg-assistant";
       currentMsgEl.dataset.turn = turnCounter;
-      // 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);
-      }
+      // Always render avatar + header structure (CSS controls visibility)
+      var _isDm2 = 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 = _isDm2 ? document.body.dataset.mateAvatarUrl : CLAUDE_CODE_AVATAR;
+      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 = _isDm2 ? ((dmTargetUser && dmTargetUser.displayName) || "Mate") : "Claude Code";
+      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);
       addToMessages(currentMsgEl);
       currentFullText = "";
     }

package/lib/public/css/debate.css

@@ -149,7 +149,6 @@
   z-index: 50;
   padding: 6px 16px;
   background: color-mix(in srgb, var(--bg) 92%, transparent);
-  backdrop-filter: blur(8px);
   border-bottom: 1px solid var(--border);
 }
 #debate-info-float.hidden { display: none; }
@@ -577,6 +576,41 @@
   background: color-mix(in srgb, var(--accent) 10%, transparent);
 }
 
+/* --- Title bar PDF button (matches find-in-session-btn / terminal-toggle-btn pattern) --- */
+#debate-pdf-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: var(--text-dimmer);
+  cursor: pointer;
+  padding: 4px;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+
+#debate-pdf-btn .lucide { width: 15px; height: 15px; }
+#debate-pdf-btn:hover { color: var(--text-secondary); background: rgba(var(--overlay-rgb),0.04); border-color: var(--border); }
+#debate-pdf-btn:disabled { opacity: 0.5; cursor: default; }
+
+/* --- Ended banner PDF button --- */
+.debate-ended-pdf-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.debate-ended-pdf-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.debate-ended-pdf-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 /* --- Error --- */
 .debate-error {
   padding: 8px 20px;

package/lib/public/css/filebrowser.css

@@ -57,7 +57,8 @@
   display: none;
 }
 
-#file-panel-refresh.spinning { animation: spin-once 0.5s ease; }
+#file-panel-refresh.spinning,
+#file-viewer-refresh.spinning { animation: spin-once 0.5s ease; }
 @keyframes spin-once { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 
 /* --- File tree --- */

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

@@ -1392,6 +1392,29 @@ select.wt-modal-input {
 
 /* --- Per-project presence avatars --- */
 /* --- Mobile: hide icon strip --- */
+/* --- Skeleton loading placeholders --- */
+@keyframes skeleton-shimmer {
+  0% { opacity: 0.15; }
+  50% { opacity: 0.25; }
+  100% { opacity: 0.15; }
+}
+.skeleton-icon-strip-item {
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: var(--text-muted, #888);
+  margin: 5px auto;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+.skeleton-icon-strip-user {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--text-muted, #888);
+  margin: 4px auto;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
 @media (max-width: 768px) {
   #icon-strip {
     display: none;

package/lib/public/css/input.css

@@ -120,6 +120,13 @@
   color: var(--text);
 }
 
+.paste-modal-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.paste-modal-copy,
 .paste-modal-close {
   display: flex;
   align-items: center;
@@ -133,6 +140,7 @@
   transition: color 0.15s, background 0.15s;
 }
 
+.paste-modal-copy:hover,
 .paste-modal-close:hover { color: var(--text); background: rgba(var(--overlay-rgb), 0.06); }
 
 .paste-modal-body {
@@ -364,6 +372,64 @@
 #attach-image-btn:hover,
 #schedule-btn:hover { background: rgba(var(--overlay-rgb), 0.06); color: var(--text); }
 
+#ask-mate-btn {
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  background:
+    linear-gradient(var(--bg, #282a36), var(--bg, #282a36)) padding-box,
+    linear-gradient(135deg, #4ecdc4 0%, #4ecdc4 25%, #556bf7, #a855f7, #f857a6, #ff6b6b) border-box;
+  color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-family: 'Nunito', sans-serif;
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.2px;
+  transition: transform 0.1s, box-shadow 0.3s, border-color 0.3s;
+  touch-action: manipulation;
+  position: relative;
+  overflow: hidden;
+  z-index: 0;
+}
+#ask-mate-btn::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, #4ecdc4 0%, #4ecdc4 32%, #556bf7 34%, #556bf7 50%, #a855f7 52%, #a855f7 68%, #f857a6 70%, #f857a6 84%, #ff6b6b 86%, #ff6b6b 100%);
+  border-radius: inherit;
+  opacity: 0;
+  transform: scale(0.3);
+  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  z-index: -1;
+}
+.ask-mate-label {
+  white-space: nowrap;
+  background: linear-gradient(135deg, #4ecdc4 0%, #4ecdc4 25%, #556bf7, #a855f7, #f857a6, #ff6b6b);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  transition: opacity 0.2s;
+}
+#ask-mate-btn:hover::before {
+  opacity: 1;
+  transform: scale(1);
+}
+#ask-mate-btn:hover {
+  border-color: transparent;
+  background: transparent;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 12px rgba(148, 130, 247, 0.4);
+}
+#ask-mate-btn:hover .ask-mate-label {
+  background: none;
+  -webkit-text-fill-color: #fff;
+}
+#ask-mate-btn:active { transform: translateY(-1px) scale(0.95); }
+
 #send-btn {
   flex-shrink: 0;
   width: 36px;

package/lib/public/css/loop.css

@@ -239,8 +239,6 @@
   position: absolute;
   inset: 0;
   background: rgba(var(--shadow-rgb, 0,0,0), 0.5);
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
 }
 .ralph-wizard-card {
   position: relative;

package/lib/public/css/mates.css

@@ -63,8 +63,6 @@
   position: absolute;
   inset: 0;
   background: rgba(var(--shadow-rgb, 0,0,0), 0.5);
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
 }
 .mate-wizard-card {
   position: relative;
@@ -860,6 +858,103 @@ body.mate-dm-active #layout.sidebar-collapsed .mate-collapsed-info {
   background: #c0392b;
 }
 
+/* --- Mate onboarding modal --- */
+.mate-onboarding-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0);
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease;
+}
+.mate-onboarding-overlay.visible {
+  background: rgba(0,0,0,0.45);
+}
+.mate-onboarding-card {
+  background: var(--bg-primary, #fff);
+  border: 1px solid var(--border-subtle);
+  border-radius: 16px;
+  padding: 32px 36px;
+  max-width: 400px;
+  width: 90%;
+  box-shadow: 0 12px 48px rgba(0,0,0,0.2);
+  text-align: center;
+  transform: translateY(20px) scale(0.96);
+  opacity: 0;
+  transition: transform 0.25s ease, opacity 0.25s ease;
+}
+.mate-onboarding-overlay.visible .mate-onboarding-card {
+  transform: translateY(0) scale(1);
+  opacity: 1;
+}
+.mate-onboarding-icon {
+  font-size: 40px;
+  margin-bottom: 8px;
+}
+.mate-onboarding-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text);
+  margin: 0 0 10px;
+}
+.mate-onboarding-desc {
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin: 0 0 18px;
+}
+.mate-onboarding-features {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 24px;
+  text-align: left;
+}
+.mate-onboarding-features li {
+  font-size: 13px;
+  color: var(--text);
+  padding: 8px 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  line-height: 1.4;
+}
+.mate-onboarding-sub {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+.mate-onboarding-bullet {
+  font-size: 16px;
+  flex-shrink: 0;
+  width: 24px;
+  text-align: center;
+}
+.mate-onboarding-note {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-align: center;
+  margin: 0 0 16px;
+}
+.mate-onboarding-btn {
+  width: 100%;
+  padding: 10px 0;
+  border: none;
+  border-radius: 10px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, transform 0.1s;
+}
+.mate-onboarding-btn:hover {
+  filter: brightness(1.08);
+}
+.mate-onboarding-btn:active {
+  transform: scale(0.98);
+}
+
 .mate-sidebar-avatar {
   width: 28px;
   height: 28px;
@@ -2143,20 +2238,32 @@ body.mate-dm-active .notes-archive-header button:hover {
   object-fit: cover;
   margin-top: 2px;
 }
-body.mate-dm-active .dm-bubble-avatar {
+body.mate-dm-active .dm-bubble-avatar,
+body.wide-view .dm-bubble-avatar {
   display: block;
 }
 
 /* --- DM bubble header (name + time) --- */
+/* Content wrapper: full width by default so child % sizing works,
+   becomes flex child in DM/wide modes */
 .dm-bubble-content {
-  flex: 1;
-  min-width: 0;
+  width: 100%;
 }
 .dm-bubble-header {
-  display: flex;
+  display: none;
   align-items: baseline;
   gap: 8px;
 }
+body.mate-dm-active .dm-bubble-header,
+body.wide-view .dm-bubble-header {
+  display: flex;
+}
+body.mate-dm-active .dm-bubble-content,
+body.wide-view .dm-bubble-content {
+  width: auto;
+  flex: 1;
+  min-width: 0;
+}
 .dm-bubble-name {
   font-weight: 700;
   font-size: 15px;

package/lib/public/css/mention.css

@@ -43,11 +43,36 @@
   flex-shrink: 0;
 }
 
+.mention-item-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
 .mention-item-name {
   font-size: 14px;
   font-weight: 600;
   color: var(--text);
-  flex: 1;
+}
+.mention-item-bio {
+  font-size: 12px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mention-item-badge {
+  display: inline-block;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.5px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--accent-12, rgba(255,184,108,0.12));
+  color: var(--accent, #ffb86c);
+  vertical-align: middle;
+  margin-left: 5px;
 }
 
 .mention-item-dot {