clay-server 2.10.0 → 2.11.0-beta.1

package/lib/dm.js

@@ -0,0 +1,135 @@
+var fs = require("fs");
+var path = require("path");
+var config = require("./config");
+
+var DM_DIR = path.join(config.CONFIG_DIR, "dm");
+
+// Ensure dm directory exists
+function ensureDmDir() {
+  fs.mkdirSync(DM_DIR, { recursive: true });
+  config.chmodSafe(DM_DIR, 0o700);
+}
+
+// Generate deterministic DM key from two user IDs (sorted, order-independent)
+function dmKey(userId1, userId2) {
+  return [userId1, userId2].sort().join(":");
+}
+
+// File path for a DM conversation
+function dmFilePath(key) {
+  // Replace : with _ for safe filename
+  return path.join(DM_DIR, key.replace(/:/g, "_") + ".jsonl");
+}
+
+// Load DM history from JSONL file
+function loadHistory(key) {
+  var filePath = dmFilePath(key);
+  if (!fs.existsSync(filePath)) return [];
+  try {
+    var content = fs.readFileSync(filePath, "utf8").trim();
+    if (!content) return [];
+    var lines = content.split("\n");
+    var messages = [];
+    for (var i = 0; i < lines.length; i++) {
+      if (!lines[i].trim()) continue;
+      try {
+        messages.push(JSON.parse(lines[i]));
+      } catch (e) {
+        // skip malformed lines
+      }
+    }
+    return messages;
+  } catch (e) {
+    return [];
+  }
+}
+
+// Append a message to DM JSONL file
+function appendMessage(key, message) {
+  ensureDmDir();
+  var filePath = dmFilePath(key);
+  var line = JSON.stringify(message) + "\n";
+  fs.appendFileSync(filePath, line);
+}
+
+// Open a DM conversation (find or create)
+function openDm(userId1, userId2) {
+  var key = dmKey(userId1, userId2);
+  var history = loadHistory(key);
+  return { dmKey: key, messages: history };
+}
+
+// Send a DM message
+function sendMessage(key, fromUserId, text) {
+  var message = {
+    type: "dm_message",
+    ts: Date.now(),
+    from: fromUserId,
+    text: text,
+  };
+  appendMessage(key, message);
+  return message;
+}
+
+// Get list of all DM conversations for a user
+// Returns: [{ dmKey, otherUserId, lastMessage, lastTs }]
+function getDmList(userId) {
+  ensureDmDir();
+  var files;
+  try {
+    files = fs.readdirSync(DM_DIR).filter(function (f) {
+      return f.endsWith(".jsonl");
+    });
+  } catch (e) {
+    return [];
+  }
+
+  var dms = [];
+  for (var i = 0; i < files.length; i++) {
+    // Reconstruct dmKey from filename (replace _ back to :)
+    var key = files[i].replace(".jsonl", "").replace(/_/g, ":");
+    var parts = key.split(":");
+    if (parts.length !== 2) continue;
+
+    // Check if this user is a participant
+    var idx = parts.indexOf(userId);
+    if (idx === -1) continue;
+
+    var otherUserId = parts[idx === 0 ? 1 : 0];
+
+    // Get last message
+    var messages = loadHistory(key);
+    var lastMessage = messages.length > 0 ? messages[messages.length - 1] : null;
+
+    dms.push({
+      dmKey: key,
+      otherUserId: otherUserId,
+      lastMessage: lastMessage ? lastMessage.text : null,
+      lastTs: lastMessage ? lastMessage.ts : 0,
+      messageCount: messages.length,
+    });
+  }
+
+  // Sort by most recent activity
+  dms.sort(function (a, b) {
+    return b.lastTs - a.lastTs;
+  });
+
+  return dms;
+}
+
+// Extension point: check if a user is a mate (AI persona)
+// Returns false for now - will be implemented when Mates feature is added
+function isMate(userId) {
+  return false;
+}
+
+module.exports = {
+  dmKey: dmKey,
+  openDm: openDm,
+  sendMessage: sendMessage,
+  getDmList: getDmList,
+  loadHistory: loadHistory,
+  isMate: isMate,
+  DM_DIR: DM_DIR,
+};

package/lib/project.js

@@ -1137,6 +1137,14 @@ function createProjectContext(opts) {
   }
 
   function handleMessage(ws, msg) {
+    // --- DM messages (delegated to server-level handler) ---
+    if (msg.type === "dm_open" || msg.type === "dm_send" || msg.type === "dm_list" || msg.type === "dm_typing") {
+      if (typeof opts.onDmMessage === "function") {
+        opts.onDmMessage(ws, msg);
+      }
+      return;
+    }
+
     if (msg.type === "push_subscribe") {
       if (pushModule && msg.subscription) pushModule.addSubscription(msg.subscription, msg.replaceEndpoint);
       return;

package/lib/public/app.js

@@ -1,7 +1,7 @@
 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';
-import { initSidebar, renderSessionList, handleSearchResults, updateSessionPresence, updatePageTitle, getActiveSearchQuery, buildSearchTimeline, removeSearchTimeline, populateCliSessionList, renderIconStrip, renderSidebarPresence, initIconStrip, getEmojiCategories } from './modules/sidebar.js';
+import { initSidebar, renderSessionList, handleSearchResults, updateSessionPresence, updatePageTitle, getActiveSearchQuery, buildSearchTimeline, removeSearchTimeline, populateCliSessionList, renderIconStrip, renderSidebarPresence, initIconStrip, getEmojiCategories, renderUserStrip, setCurrentDmUser, updateDmBadge } from './modules/sidebar.js';
 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';
@@ -49,6 +49,13 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
   var imagePreviewBar = $("image-preview-bar");
   var connectOverlay = $("connect-overlay");
 
+  // --- DM Mode ---
+  var dmMode = false;
+  var dmKey = null;
+  var dmTargetUser = null;
+  var dmUnread = {}; // { otherUserId: count }
+  var cachedAllUsers = [];
+
   // --- Home Hub ---
   var homeHub = $("home-hub");
   var homeHubVisible = false;
@@ -524,9 +531,232 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     }
   }
 
+  // --- DM Mode Functions ---
+  function openDm(targetUserId) {
+    if (!ws || ws.readyState !== 1) return;
+    ws.send(JSON.stringify({ type: "dm_open", targetUserId: targetUserId }));
+  }
+
+  function enterDmMode(key, targetUser, messages) {
+    dmMode = true;
+    dmKey = key;
+    dmTargetUser = targetUser;
+
+    // Clear unread for this user
+    if (targetUser) {
+      dmUnread[targetUser.id] = 0;
+      updateDmBadge(targetUser.id, 0);
+    }
+
+    // Update icon strip active state
+    setCurrentDmUser(targetUser ? targetUser.id : null);
+    var activeProj = document.querySelector("#icon-strip-projects .icon-strip-item.active");
+    if (activeProj) activeProj.classList.remove("active");
+    var homeIcon = document.querySelector(".icon-strip-home");
+    if (homeIcon) homeIcon.classList.remove("active");
+    // Re-render user strip to show active state
+    if (cachedProjects && cachedProjects.length > 0) {
+      renderProjectList();
+    }
+
+    // Hide home hub if visible
+    hideHomeHub();
+
+    // Hide project UI + sidebar, show DM UI
+    var mainCol = document.getElementById("main-column");
+    if (mainCol) mainCol.classList.add("dm-mode");
+    var sidebarCol = document.getElementById("sidebar-column");
+    if (sidebarCol) sidebarCol.classList.add("dm-mode");
+    var resizeHandle = document.getElementById("sidebar-resize-handle");
+    if (resizeHandle) resizeHandle.classList.add("dm-mode");
+
+    // Hide user-island (my avatar behind it becomes visible)
+    var userIsland = document.getElementById("user-island");
+    if (userIsland) userIsland.classList.add("dm-hidden");
+
+    // Render DM messages
+    messagesEl.innerHTML = "";
+    if (messages && messages.length > 0) {
+      for (var i = 0; i < messages.length; i++) {
+        appendDmMessage(messages[i]);
+      }
+    }
+    scrollToBottom();
+
+    // Focus input
+    if (inputEl) {
+      inputEl.placeholder = "Message " + (targetUser ? targetUser.displayName : "");
+      inputEl.focus();
+    }
+
+    // Populate DM header bar with user avatar, name, and personal color
+    if (targetUser) {
+      var dmHeaderBar = document.getElementById("dm-header-bar");
+      var dmAvatar = document.getElementById("dm-header-avatar");
+      var dmName = document.getElementById("dm-header-name");
+      if (dmAvatar) {
+        dmAvatar.src = "https://api.dicebear.com/9.x/" + (targetUser.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(targetUser.avatarSeed || targetUser.username) + "&size=28";
+      }
+      if (dmName) dmName.textContent = targetUser.displayName;
+      if (dmHeaderBar && targetUser.avatarColor) {
+        dmHeaderBar.style.background = targetUser.avatarColor;
+      }
+    }
+  }
+
+  function exitDmMode() {
+    if (!dmMode) return;
+    dmMode = false;
+    dmKey = null;
+    dmTargetUser = null;
+    setCurrentDmUser(null);
+
+    var mainCol = document.getElementById("main-column");
+    if (mainCol) mainCol.classList.remove("dm-mode");
+    var sidebarCol = document.getElementById("sidebar-column");
+    if (sidebarCol) sidebarCol.classList.remove("dm-mode");
+    var resizeHandle = document.getElementById("sidebar-resize-handle");
+    if (resizeHandle) resizeHandle.classList.remove("dm-mode");
+
+    // Reset DM header
+    var dmHeaderBar = document.getElementById("dm-header-bar");
+    if (dmHeaderBar) dmHeaderBar.style.background = "";
+
+    // Restore user-island (covers my avatar again)
+    var userIsland = document.getElementById("user-island");
+    if (userIsland) userIsland.classList.remove("dm-hidden");
+
+    // Restore project UI
+    if (inputEl) inputEl.placeholder = "";
+    renderProjectList();
+  }
+
+  function appendDmMessage(msg) {
+    var isMe = msg.from === myUserId;
+    var d = new Date(msg.ts);
+    var timeStr = d.getHours().toString().padStart(2, "0") + ":" + d.getMinutes().toString().padStart(2, "0");
+
+    // Check if we can compact (same sender as previous, within 5 min)
+    var prev = messagesEl.lastElementChild;
+    var compact = false;
+    if (prev && prev.dataset.from === msg.from) {
+      var prevTs = parseInt(prev.dataset.ts || "0", 10);
+      if (msg.ts - prevTs < 300000) compact = true;
+    }
+
+    var div = document.createElement("div");
+    div.className = "dm-msg" + (compact ? " dm-msg-compact" : "");
+    div.dataset.from = msg.from;
+    div.dataset.ts = msg.ts;
+
+    if (compact) {
+      // Compact: just hover-time + text, no avatar/name
+      var hoverTime = document.createElement("span");
+      hoverTime.className = "dm-msg-hover-time";
+      hoverTime.textContent = timeStr;
+      div.appendChild(hoverTime);
+
+      var body = document.createElement("div");
+      body.className = "dm-msg-body";
+      body.textContent = msg.text;
+      div.appendChild(body);
+    } else {
+      // Full: avatar + header(name, time) + text
+      var avatar = document.createElement("img");
+      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";
+      } else if (dmTargetUser) {
+        avatar.src = "https://api.dicebear.com/9.x/" + (dmTargetUser.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(dmTargetUser.avatarSeed || dmTargetUser.username) + "&size=36";
+      }
+      div.appendChild(avatar);
+
+      var content = document.createElement("div");
+      content.className = "dm-msg-content";
+
+      var header = document.createElement("div");
+      header.className = "dm-msg-header";
+
+      var name = document.createElement("span");
+      name.className = "dm-msg-name";
+      if (isMe) {
+        var mu = cachedAllUsers.find(function (u) { return u.id === myUserId; });
+        name.textContent = mu ? mu.displayName : "Me";
+      } else {
+        name.textContent = dmTargetUser ? dmTargetUser.displayName : "User";
+      }
+      header.appendChild(name);
+
+      var time = document.createElement("span");
+      time.className = "dm-msg-time";
+      time.textContent = timeStr;
+      header.appendChild(time);
+
+      content.appendChild(header);
+
+      var body = document.createElement("div");
+      body.className = "dm-msg-body";
+      body.textContent = msg.text;
+      content.appendChild(body);
+
+      div.appendChild(content);
+    }
+
+    messagesEl.appendChild(div);
+  }
+
+  var dmTypingTimer = null;
+
+  function showDmTypingIndicator(typing) {
+    var existing = document.getElementById("dm-typing-indicator");
+    if (!typing) {
+      if (existing) existing.remove();
+      return;
+    }
+    if (existing) return; // already showing
+    if (!dmTargetUser) return;
+
+    var div = document.createElement("div");
+    div.id = "dm-typing-indicator";
+    div.className = "dm-msg dm-typing-indicator";
+
+    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";
+    div.appendChild(avatar);
+
+    var dots = document.createElement("div");
+    dots.className = "dm-typing-dots";
+    dots.innerHTML = "<span></span><span></span><span></span>";
+    div.appendChild(dots);
+
+    messagesEl.appendChild(div);
+    scrollToBottom();
+
+    // Auto-hide after 5s in case stop signal is missed
+    clearTimeout(dmTypingTimer);
+    dmTypingTimer = setTimeout(function () {
+      showDmTypingIndicator(false);
+    }, 5000);
+  }
+
+  function handleDmSend() {
+    if (!dmMode || !dmKey || !inputEl) return false;
+    var text = inputEl.value.trim();
+    if (!text) return false;
+    ws.send(JSON.stringify({ type: "dm_send", dmKey: dmKey, text: text }));
+    inputEl.value = "";
+    autoResize();
+    return true;
+  }
+
   var hubCloseBtn = document.getElementById("home-hub-close");
 
   function showHomeHub() {
+    if (dmMode) exitDmMode();
     homeHubVisible = true;
     homeHub.classList.remove("hidden");
     // Show close button only if there's a project to return to
@@ -611,6 +841,23 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     if (msg.serverUsers) {
       renderTopbarPresence(msg.serverUsers);
     }
+    // Update user strip (DM targets) in icon strip
+    if (msg.allUsers) {
+      cachedAllUsers = msg.allUsers;
+      var onlineIds = (msg.serverUsers || []).map(function (u) { return u.id; });
+      renderUserStrip(msg.allUsers, onlineIds, myUserId);
+      // Render my avatar (always present, hidden behind user-island)
+      var meEl = document.getElementById("icon-strip-me");
+      if (meEl && !meEl.hasChildNodes()) {
+        var myUser = cachedAllUsers.find(function (u) { return u.id === myUserId; });
+        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";
+          meEl.appendChild(meAvatar);
+        }
+      }
+    }
   }
 
   function renderTopbarPresence(serverUsers) {
@@ -972,6 +1219,7 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     getUpcomingSchedules: getUpcomingSchedules,
     get multiUser() { return isMultiUserMode; },
     get myUserId() { return myUserId; },
+    openDm: function (userId) { openDm(userId); },
   };
   initSidebar(sidebarCtx);
   initIconStrip(sidebarCtx);
@@ -2358,6 +2606,7 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
   // --- Project switching (no full reload) ---
   function switchProject(slug) {
     if (!slug) return;
+    if (dmMode) exitDmMode();
     if (homeHubVisible) {
       hideHomeHub();
       if (slug === currentSlug) return;
@@ -2724,7 +2973,7 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
           break;
 
         case "input_sync":
-          handleInputSync(msg.text);
+          if (!dmMode) handleInputSync(msg.text);
           break;
 
         case "session_list":
@@ -3184,6 +3433,36 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
           updateProjectList(msg);
           break;
 
+        // --- DM ---
+        case "dm_history":
+          enterDmMode(msg.dmKey, msg.targetUser, msg.messages);
+          break;
+
+        case "dm_message":
+          if (dmMode && msg.dmKey === dmKey) {
+            showDmTypingIndicator(false); // hide typing when message arrives
+            appendDmMessage(msg.message);
+            scrollToBottom();
+          } else if (msg.message) {
+            // DM notification when not in that DM
+            var fromId = msg.message.from;
+            if (fromId && fromId !== myUserId) {
+              dmUnread[fromId] = (dmUnread[fromId] || 0) + 1;
+              updateDmBadge(fromId, dmUnread[fromId]);
+            }
+          }
+          break;
+
+        case "dm_typing":
+          if (dmMode && msg.dmKey === dmKey) {
+            showDmTypingIndicator(msg.typing);
+          }
+          break;
+
+        case "dm_list":
+          // Could be used for DM list view later
+          break;
+
         case "daemon_config":
           updateDaemonConfig(msg.config);
           break;
@@ -3488,6 +3767,9 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     showImageModal: showImageModal,
     hideSuggestionChips: hideSuggestionChips,
     setSendBtnMode: setSendBtnMode,
+    isDmMode: function () { return dmMode; },
+    getDmKey: function () { return dmKey; },
+    handleDmSend: function () { handleDmSend(); },
   });
 
   // --- STT module (voice input via Web Speech API) ---

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

@@ -3,13 +3,14 @@
    ========================================================================== */
 
 #icon-strip {
+  position: relative;
   width: 72px;
   flex-shrink: 0;
   background: var(--sidebar-bg);
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 0 58px;
+  padding: 0 0 80px;
   overflow: hidden;
   z-index: 2;
 }
@@ -114,6 +115,7 @@
 /* --- Scrollable project list area --- */
 .icon-strip-projects {
   width: 100%;
+  min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
   display: flex;
@@ -605,6 +607,165 @@
   height: 22px;
 }
 
+/* --- User avatars (circle, above my-avatar at bottom) --- */
+.icon-strip-users {
+  position: absolute;
+  bottom: 74px; /* above user-island (58px + 8px bottom + 8px gap) */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 56px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  padding: 6px 0;
+  background: var(--bg-alt);
+  border-radius: 8px;
+}
+
+.icon-strip-users.hidden {
+  display: none;
+}
+
+/* "Invite" mini button at bottom of user strip */
+.icon-strip-invite {
+  position: relative;
+  width: 40px;
+  height: 32px;
+  border-radius: 10px;
+  background: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  color: var(--text-dimmer);
+  transition: color 0.2s, background 0.2s;
+}
+
+.icon-strip-invite:hover {
+  color: var(--accent);
+  background: rgba(var(--overlay-rgb), 0.08);
+}
+
+.icon-strip-invite .lucide {
+  width: 16px;
+  height: 16px;
+}
+
+.icon-strip-user {
+  position: relative;
+  width: 42px;
+  height: 42px;
+  border-radius: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.icon-strip-user-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  object-fit: cover;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  opacity: 0.7;
+}
+
+.icon-strip-user:hover .icon-strip-user-avatar {
+  opacity: 1;
+  transform: scale(1.08);
+}
+
+.icon-strip-user.active .icon-strip-user-avatar {
+  opacity: 1;
+  box-shadow: 0 0 0 2px var(--accent);
+}
+
+/* Online status dot (bottom-right on avatar, like project blink dot) */
+.icon-strip-user-online {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--text-dimmer);
+  border: 2px solid var(--sidebar-bg);
+  opacity: 1;
+  transition: opacity 0.2s, background 0.3s;
+}
+
+.icon-strip-user.online .icon-strip-user-online {
+  background: var(--success);
+}
+
+/* DM unread badge */
+.icon-strip-user-badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background: #e74c3c;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  line-height: 18px;
+  text-align: center;
+  box-shadow: 0 0 0 2px var(--bg);
+  z-index: 2;
+}
+
+.icon-strip-user-badge.has-unread {
+  display: flex;
+}
+
+/* Pill for user icons */
+.icon-strip-user:hover .icon-strip-pill {
+  opacity: 1;
+  height: 20px;
+}
+
+.icon-strip-user.active .icon-strip-pill {
+  opacity: 1;
+  height: 32px;
+}
+
+/* DM mode: keep same position (user-island gone but layout stays) */
+
+/* --- My avatar at bottom of icon strip (always present, behind user-island) --- */
+/* Positioned to align exactly with user-island avatar (left:8px + padding:6px + 18px center = 32px from left edge of layout-body) */
+/* icon-strip is 72px wide, so 32px from left = left offset within icon-strip */
+.icon-strip-me {
+  position: absolute;
+  bottom: 19px; /* vertically center with user-island (bottom:8px + height:58px/2 - 16px) */
+  left: 32px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  z-index: 1; /* below user-island z-index: 15 */
+}
+
+.icon-strip-me-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
 /* --- Per-project presence avatars --- */
 /* --- Mobile: hide icon strip --- */
 @media (max-width: 768px) {

package/lib/public/css/messages.css

@@ -1465,3 +1465,177 @@ pre.mermaid-error {
 
 /* Rate limit inline cards removed — now header-only with popover (see title-bar.css) */
 
+/* ==========================================================================
+   DM Messages (P2P chat)
+   ========================================================================== */
+
+/* --- Slack-style DM messages --- */
+
+.dm-msg {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 4px 16px;
+}
+
+.dm-msg:hover {
+  background: var(--bg-alt);
+}
+
+.dm-msg-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.dm-msg-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.dm-msg-header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.dm-msg-name {
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--text);
+}
+
+.dm-msg-time {
+  font-size: 12px;
+  color: var(--text-dimmer);
+}
+
+.dm-msg-body {
+  font-size: 15px;
+  line-height: 1.46;
+  color: var(--text);
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+/* Compact: same sender within 5 min */
+.dm-msg-compact {
+  padding: 1px 16px 1px 60px; /* 16 + 36 avatar + 8 gap = 60 */
+  position: relative;
+}
+
+.dm-msg-compact:hover .dm-msg-hover-time {
+  opacity: 1;
+}
+
+.dm-msg-hover-time {
+  position: absolute;
+  left: 16px;
+  width: 36px;
+  text-align: center;
+  font-size: 11px;
+  color: var(--text-dimmer);
+  opacity: 0;
+  transition: opacity 0.1s;
+  line-height: 1.46;
+}
+
+/* Typing indicator */
+.dm-typing-indicator {
+  align-items: center;
+  gap: 8px;
+  padding: 4px 16px;
+}
+
+.dm-typing-indicator .dm-msg-avatar {
+  opacity: 0.7;
+}
+
+.dm-typing-dots {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  background: var(--bg-alt);
+  border-radius: 12px;
+}
+
+.dm-typing-dots span {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--text-dimmer);
+  animation: dm-typing-bounce 1.4s infinite ease-in-out both;
+}
+
+.dm-typing-dots span:nth-child(1) { animation-delay: 0s; }
+.dm-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
+.dm-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes dm-typing-bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* DM mode: hide project-specific UI elements */
+#main-column.dm-mode .msg-group,
+#main-column.dm-mode #suggestion-chips,
+#main-column.dm-mode .tool-group {
+  display: none;
+}
+
+/* DM mode: simplify input bar (no voice, no model config, no context, no slash menu) */
+#main-column.dm-mode #stt-btn,
+#main-column.dm-mode #config-chip-wrap,
+#main-column.dm-mode #context-mini,
+#main-column.dm-mode #slash-menu {
+  display: none !important;
+}
+
+/* DM mode: hide sidebar column and resize handle */
+#sidebar-column.dm-mode {
+  display: none !important;
+}
+
+#sidebar-resize-handle.dm-mode {
+  display: none !important;
+}
+
+/* DM header bar: replaces normal title-bar-content */
+.dm-header-bar {
+  display: none;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px;
+  height: 48px;
+  flex-shrink: 0;
+}
+
+#main-column.dm-mode .title-bar-content {
+  display: none;
+}
+
+#main-column.dm-mode .dm-header-bar {
+  display: flex;
+}
+
+.dm-header-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.dm-header-name {
+  font-size: 15px;
+  font-weight: 700;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+

package/lib/public/css/sidebar.css

@@ -848,6 +848,10 @@
   border-radius: 10px;
 }
 
+#user-island.dm-hidden {
+  display: none;
+}
+
 #user-island::before {
   content: "";
   position: absolute;

package/lib/public/index.html

@@ -68,6 +68,8 @@
     <div class="icon-strip-separator"></div>
     <div class="icon-strip-projects" id="icon-strip-projects"></div>
     <button class="icon-strip-add" id="icon-strip-add" title="Add project"><i data-lucide="plus"></i></button>
+    <div class="icon-strip-users hidden" id="icon-strip-users"></div>
+    <div class="icon-strip-me" id="icon-strip-me"></div>
   </div>
 
   <!-- === Main Area (sidebar + resize-handle + main-column) === -->
@@ -191,6 +193,10 @@
     <div id="sidebar-resize-handle"></div>
     <div id="sidebar-overlay"></div>
     <div id="main-column">
+      <div class="dm-header-bar" id="dm-header-bar">
+        <img id="dm-header-avatar" class="dm-header-avatar" alt="">
+        <span id="dm-header-name" class="dm-header-name"></span>
+      </div>
       <div class="title-bar-content">
         <div id="header-left">
           <button id="sidebar-expand-btn" title="Open sidebar"><i data-lucide="panel-left-open"></i></button>

package/lib/public/modules/input.js

@@ -23,6 +23,11 @@ export var builtinCommands = [
 
 // --- Send ---
 export function sendMessage() {
+  // DM mode intercept: if in DM mode, route to DM handler instead
+  if (ctx.isDmMode && ctx.isDmMode() && ctx.handleDmSend) {
+    ctx.handleDmSend();
+    return;
+  }
   var text = ctx.inputEl.value.trim();
   var images = pendingImages.slice();
   if (!text && images.length === 0 && pendingPastes.length === 0 && pendingFiles.length === 0) return;
@@ -443,9 +448,15 @@ function updateSlashHighlight() {
 // --- Input sync across devices ---
 function sendInputSync() {
   if (isRemoteInput) return;
-  if (ctx.ws && ctx.connected) {
-    ctx.ws.send(JSON.stringify({ type: "input_sync", text: ctx.inputEl.value }));
+  if (!ctx.ws || !ctx.connected) return;
+  // In DM mode, send typing indicator instead of input_sync
+  if (ctx.isDmMode && ctx.isDmMode()) {
+    var hasText = ctx.inputEl.value.length > 0;
+    var dk = ctx.getDmKey ? ctx.getDmKey() : null;
+    if (dk) ctx.ws.send(JSON.stringify({ type: "dm_typing", dmKey: dk, typing: hasText }));
+    return;
   }
+  ctx.ws.send(JSON.stringify({ type: "input_sync", text: ctx.inputEl.value }));
 }
 
 export function handleInputSync(text) {

package/lib/public/modules/sidebar.js

@@ -2087,7 +2087,8 @@ export function renderIconStrip(projects, currentSlug) {
   for (var i = 0; i < projects.length; i++) {
     var p = projects[i];
     var el = document.createElement("a");
-    el.className = "icon-strip-item" + (p.slug === currentSlug ? " active" : "");
+    var isActive = p.slug === currentSlug && !currentDmUserId;
+    el.className = "icon-strip-item" + (isActive ? " active" : "");
     el.href = "/p/" + p.slug + "/";
     el.dataset.slug = p.slug;
 
@@ -2144,7 +2145,7 @@ export function renderIconStrip(projects, currentSlug) {
   // Update home icon active state
   var homeIcon = document.querySelector(".icon-strip-home");
   if (homeIcon) {
-    if (!currentSlug || projects.length === 0) {
+    if ((!currentSlug || projects.length === 0) && !currentDmUserId) {
       homeIcon.classList.add("active");
     } else {
       homeIcon.classList.remove("active");
@@ -2193,11 +2194,112 @@ function renderProjectList(projects, currentSlug) {
 
 export function getEmojiCategories() { return EMOJI_CATEGORIES; }
 
+// --- User strip (DM targets) ---
+var cachedAllUsers = [];
+var cachedOnlineUserIds = [];
+var currentDmUserId = null;
+
+export function renderUserStrip(allUsers, onlineUserIds, myUserId) {
+  cachedAllUsers = allUsers || [];
+  cachedOnlineUserIds = onlineUserIds || [];
+  var container = document.getElementById("icon-strip-users");
+  if (!container) return;
+
+  // Filter out self, only show other users
+  var others = cachedAllUsers.filter(function (u) { return u.id !== myUserId; });
+
+  // Hide section if no other users (single-user mode or alone)
+  if (others.length === 0) {
+    container.innerHTML = "";
+    container.classList.add("hidden");
+    return;
+  }
+
+  container.classList.remove("hidden");
+  container.innerHTML = "";
+
+  for (var i = 0; i < others.length; i++) {
+    (function (u) {
+      var el = document.createElement("div");
+      el.className = "icon-strip-user";
+      el.dataset.userId = u.id;
+      if (u.id === currentDmUserId) el.classList.add("active");
+      if (onlineUserIds.indexOf(u.id) !== -1) el.classList.add("online");
+
+      var pill = document.createElement("span");
+      pill.className = "icon-strip-pill";
+      el.appendChild(pill);
+
+      var avatar = document.createElement("img");
+      avatar.className = "icon-strip-user-avatar";
+      avatar.src = "https://api.dicebear.com/9.x/" + (u.avatarStyle || "thumbs") + "/svg?seed=" + encodeURIComponent(u.avatarSeed || u.username) + "&size=34";
+      avatar.alt = u.displayName;
+      el.appendChild(avatar);
+
+      var onlineDot = document.createElement("span");
+      onlineDot.className = "icon-strip-user-online";
+      el.appendChild(onlineDot);
+
+      var badge = document.createElement("span");
+      badge.className = "icon-strip-user-badge";
+      badge.dataset.userId = u.id;
+      el.appendChild(badge);
+
+      // Tooltip
+      el.addEventListener("mouseenter", function () { showIconTooltip(el, u.displayName); });
+      el.addEventListener("mouseleave", hideIconTooltip);
+
+      // Click: open DM
+      el.addEventListener("click", function () {
+        if (ctx.openDm) ctx.openDm(u.id);
+      });
+
+      container.appendChild(el);
+    })(others[i]);
+  }
+
+  // Invite button at bottom of user strip
+  var inviteBtn = document.createElement("button");
+  inviteBtn.className = "icon-strip-invite";
+  inviteBtn.innerHTML = iconHtml("user-plus");
+  inviteBtn.addEventListener("click", function () { triggerShare(); });
+  inviteBtn.addEventListener("mouseenter", function () { showIconTooltip(inviteBtn, "Invite"); });
+  inviteBtn.addEventListener("mouseleave", hideIconTooltip);
+  container.appendChild(inviteBtn);
+  refreshIcons();
+}
+
+export function setCurrentDmUser(userId) {
+  currentDmUserId = userId;
+  // Update active state on user icons immediately
+  var container = document.getElementById("icon-strip-users");
+  if (!container) return;
+  var items = container.querySelectorAll(".icon-strip-user");
+  for (var i = 0; i < items.length; i++) {
+    if (items[i].dataset.userId === userId) {
+      items[i].classList.add("active");
+    } else {
+      items[i].classList.remove("active");
+    }
+  }
+}
+
+export function updateDmBadge(userId, count) {
+  var badge = document.querySelector('.icon-strip-user-badge[data-user-id="' + userId + '"]');
+  if (!badge) return;
+  if (count > 0) {
+    badge.textContent = count > 99 ? "99+" : String(count);
+    badge.classList.add("has-unread");
+  } else {
+    badge.textContent = "";
+    badge.classList.remove("has-unread");
+  }
+}
+
 export function initIconStrip(_ctx) {
   var addBtn = document.getElementById("icon-strip-add");
   if (addBtn) {
     addBtn.addEventListener("click", function () {
-      // Reuse existing add-project modal
       var modal = _ctx.$("add-project-modal");
       if (modal) modal.classList.remove("hidden");
     });

package/lib/server.js

@@ -7,6 +7,7 @@ var { pinPageHtml, setupPageHtml, adminSetupPageHtml, multiUserLoginPageHtml, sm
 var smtp = require("./smtp");
 var { createProjectContext } = require("./project");
 var users = require("./users");
+var dm = require("./dm");
 
 var { CONFIG_DIR } = require("./config");
 
@@ -1894,12 +1895,100 @@ function createServer(opts) {
       onSetPin: onSetPin,
       onSetKeepAwake: onSetKeepAwake,
       onShutdown: onShutdown,
+      onDmMessage: handleDmMessage,
     });
     projects.set(slug, ctx);
     ctx.warmup();
     return true;
   }
 
+  // --- DM message handler (server-level, cross-project) ---
+  function handleDmMessage(ws, msg) {
+    if (!users.isMultiUser() || !ws._clayUser) return;
+    var userId = ws._clayUser.id;
+
+    if (msg.type === "dm_list") {
+      var dmList = dm.getDmList(userId);
+      // Enrich with user info
+      for (var i = 0; i < dmList.length; i++) {
+        var otherUser = users.findUserById(dmList[i].otherUserId);
+        if (otherUser) {
+          var p = otherUser.profile || {};
+          dmList[i].otherUser = {
+            id: otherUser.id,
+            displayName: p.name || otherUser.displayName || otherUser.username,
+            username: otherUser.username,
+            avatarStyle: p.avatarStyle || "thumbs",
+            avatarSeed: p.avatarSeed || otherUser.username,
+            avatarColor: p.avatarColor || "#7c3aed",
+          };
+        }
+      }
+      ws.send(JSON.stringify({ type: "dm_list", dms: dmList }));
+      return;
+    }
+
+    if (msg.type === "dm_open") {
+      if (!msg.targetUserId) return;
+      var result = dm.openDm(userId, msg.targetUserId);
+      var targetUser = users.findUserById(msg.targetUserId);
+      var tp = targetUser ? (targetUser.profile || {}) : {};
+      ws.send(JSON.stringify({
+        type: "dm_history",
+        dmKey: result.dmKey,
+        messages: result.messages,
+        targetUser: targetUser ? {
+          id: targetUser.id,
+          displayName: tp.name || targetUser.displayName || targetUser.username,
+          username: targetUser.username,
+          avatarStyle: tp.avatarStyle || "thumbs",
+          avatarSeed: tp.avatarSeed || targetUser.username,
+          avatarColor: tp.avatarColor || "#7c3aed",
+        } : null,
+      }));
+      return;
+    }
+
+    if (msg.type === "dm_typing") {
+      // Relay typing indicator to DM partner
+      var dmKey = msg.dmKey;
+      if (!dmKey) return;
+      var parts = dmKey.split(":");
+      if (parts.indexOf(userId) === -1) return;
+      var targetId = parts[0] === userId ? parts[1] : parts[0];
+      projects.forEach(function (ctx) {
+        ctx.forEachClient(function (otherWs) {
+          if (otherWs === ws) return;
+          if (!otherWs._clayUser || otherWs._clayUser.id !== targetId) return;
+          if (otherWs.readyState !== 1) return;
+          otherWs.send(JSON.stringify({ type: "dm_typing", dmKey: dmKey, userId: userId, typing: !!msg.typing }));
+        });
+      });
+      return;
+    }
+
+    if (msg.type === "dm_send") {
+      if (!msg.dmKey || !msg.text) return;
+      // Verify sender is a participant
+      var parts = msg.dmKey.split(":");
+      if (parts.indexOf(userId) === -1) return;
+      var message = dm.sendMessage(msg.dmKey, userId, msg.text);
+      // Send confirmation to sender
+      ws.send(JSON.stringify({ type: "dm_message", dmKey: msg.dmKey, message: message }));
+      // Broadcast to target user's connections across all projects
+      var targetId = parts[0] === userId ? parts[1] : parts[0];
+      projects.forEach(function (ctx) {
+        ctx.forEachClient(function (otherWs) {
+          if (otherWs === ws) return;
+          if (!otherWs._clayUser || otherWs._clayUser.id !== targetId) return;
+          if (otherWs.readyState !== 1) return;
+          otherWs.send(JSON.stringify({ type: "dm_message", dmKey: msg.dmKey, message: message }));
+        });
+      });
+      return;
+    }
+  }
+
   function removeProject(slug) {
     var ctx = projects.get(slug);
     if (!ctx) return false;
@@ -1989,6 +2078,18 @@ function createServer(opts) {
         return;
       }
       var serverUsers = getServerUsers();
+      var allUsers = users.getAllUsers().map(function (u) {
+        var p = u.profile || {};
+        return {
+          id: u.id,
+          displayName: p.name || u.displayName || u.username,
+          username: u.username,
+          role: u.role,
+          avatarStyle: p.avatarStyle || "thumbs",
+          avatarSeed: p.avatarSeed || u.username,
+          avatarColor: p.avatarColor || "#7c3aed",
+        };
+      });
       // Build per-user filtered lists, send individually
       var sentUsers = {};
       projects.forEach(function (ctx) {
@@ -2014,6 +2115,7 @@ function createServer(opts) {
             projects: filteredProjects,
             projectCount: projects.size,
             serverUsers: serverUsers,
+            allUsers: allUsers,
           });
           sentUsers[key] = msgStr;
           ws.send(msgStr);

package/lib/users.js

@@ -223,6 +223,12 @@ function getAllUsers() {
   });
 }
 
+function getOtherUsers(excludeUserId) {
+  return getAllUsers().filter(function (u) {
+    return u.id !== excludeUserId;
+  });
+}
+
 function removeUser(userId) {
   var data = loadUsers();
   var before = data.users.length;
@@ -456,4 +462,5 @@ module.exports = {
   canAccessProject: canAccessProject,
   getAccessibleProjects: getAccessibleProjects,
   canAccessSession: canAccessSession,
+  getOtherUsers: getOtherUsers,
 };

package/package.json

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