clay-server 2.31.0 → 2.32.0-beta.1

package/lib/public/modules/app-dm.js

@@ -1,15 +1,53 @@
 // app-dm.js - DM mode, mate project switching, mate onboarding
 // Extracted from app.js (PR-24)
 
-var _ctx = null;
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { getMessagesEl, getInputEl } from './dom-refs.js';
+import { userAvatarUrl, mateAvatarUrl } from './avatar.js';
+import { connect } from './app-connection.js';
+import { resetClientState, renderProjectList, getCachedProjects } from './app-projects.js';
+import { scrollToBottom } from './app-rendering.js';
+import { autoResize } from './input.js';
+import { showDebateSticky } from './app-debate-ui.js';
+import { updateDmBadge, setCurrentDmUser, closeDmUserPicker } from './sidebar-mates.js';
+import { hideHomeHub } from './app-home-hub.js';
+import { hideNotes } from './sticky-notes.js';
+import { showMateSidebar, hideMateSidebar } from './mate-sidebar.js';
+import { hideKnowledge } from './mate-knowledge.js';
+import { hideMemory } from './mate-memory.js';
+import { closeFileViewer } from './filebrowser.js';
+import { closeTerminal } from './terminal.js';
+import { openMobileSheet, setMobileSheetMateData } from './sidebar-mobile.js';
+import { getProfileLang } from './profile.js';
+import { isSchedulerOpen, closeScheduler } from './scheduler.js';
+import { requireClayMateInterview } from './app-skills-install.js';
+import { syncResizeHandles } from './sidebar.js';
 
 var MATE_ONBOARDING_KEY = "clay-mate-onboarding-shown";
 var CLAUDE_CODE_AVATAR = "/claude-code-avatar.png";
 var bgMateIoTimers = {};
 var dmTypingTimer = null;
 
-export function initDm(ctx) {
-  _ctx = ctx;
+export function initDm() {
+  // --- Reactive UI sync for dmMode ---
+  store.subscribe(function (state, prev) {
+    if (state.dmMode !== prev.dmMode) {
+      var isMate = state.dmTargetUser && state.dmTargetUser.isMate;
+      var mainCol = document.getElementById("main-column");
+      var sidebarCol = document.getElementById("sidebar-column");
+      var resizeHandle = document.getElementById("sidebar-resize-handle");
+      if (state.dmMode) {
+        if (!isMate && mainCol) mainCol.classList.add("dm-mode");
+        if (sidebarCol) sidebarCol.classList.add("dm-mode");
+        if (resizeHandle) resizeHandle.classList.add("dm-mode");
+      } else {
+        if (mainCol) mainCol.classList.remove("dm-mode");
+        if (sidebarCol) sidebarCol.classList.remove("dm-mode");
+        if (resizeHandle) resizeHandle.classList.remove("dm-mode");
+      }
+    }
+  });
 
   // --- Mobile mate title bar click handlers ---
   var mobileBack = document.getElementById("mate-mobile-back");
@@ -24,30 +62,32 @@ export function initDm(ctx) {
   if (mobileMore) {
     mobileMore.addEventListener("click", function (e) {
       e.stopPropagation();
-      _ctx.openMobileSheet("mate-profile");
+      openMobileSheet("mate-profile");
     });
   }
   if (mobileTitle) {
     mobileTitle.addEventListener("click", function () {
-      _ctx.openMobileSheet("mate-profile");
+      openMobileSheet("mate-profile");
     });
   }
 }
 
 export function openDm(targetUserId) {
-  if (!_ctx.ws || _ctx.ws.readyState !== 1) return;
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) return;
   // Persist DM state for refresh recovery
   try { localStorage.setItem("clay-active-dm", targetUserId); } catch (e) {}
   // Check mate skill updates before opening mate DM
   if (typeof targetUserId === "string" && targetUserId.indexOf("mate_") === 0) {
     showMateOnboarding(function () {
-      _ctx.requireClayMateInterview(function () {
-        _ctx.ws.send(JSON.stringify({ type: "dm_open", targetUserId: targetUserId }));
+      requireClayMateInterview(function () {
+        var ws2 = getWs();
+        if (ws2) ws2.send(JSON.stringify({ type: "dm_open", targetUserId: targetUserId }));
       });
     });
     return;
   }
-  _ctx.ws.send(JSON.stringify({ type: "dm_open", targetUserId: targetUserId }));
+  ws.send(JSON.stringify({ type: "dm_open", targetUserId: targetUserId }));
 }
 
 function showMateOnboarding(callback) {
@@ -96,11 +136,12 @@ function showMateOnboarding(callback) {
 
 export function enterDmMode(key, targetUser, messages) {
   console.log("[DEBUG enterDmMode] key=" + key, "isMate=" + (targetUser && targetUser.isMate), "messages=" + (messages ? messages.length : 0));
+  var s = store.snap();
   // Clean up previous DM/mate state before entering new one
-  if (_ctx.dmMode) {
-    _ctx.hideMateSidebar();
-    _ctx.hideKnowledge();
-    _ctx.hideMemory();
+  if (s.dmMode) {
+    hideMateSidebar();
+    hideKnowledge();
+    hideMemory();
     // Reset dm-header-bar
     var prevHeader = document.getElementById("dm-header-bar");
     if (prevHeader) {
@@ -109,13 +150,7 @@ export function enterDmMode(key, targetUser, messages) {
       var prevTag = prevHeader.querySelector(".dm-header-mate-tag");
       if (prevTag) prevTag.remove();
     }
-    // Remove dm-mode classes
-    var prevMain = document.getElementById("main-column");
-    if (prevMain) prevMain.classList.remove("dm-mode");
-    var prevSidebar = document.getElementById("sidebar-column");
-    if (prevSidebar) prevSidebar.classList.remove("dm-mode");
-    var prevResize = document.getElementById("sidebar-resize-handle");
-    if (prevResize) prevResize.classList.remove("dm-mode");
+    // dm-mode CSS classes stay managed by the store subscriber.
     // Reset chat title bar
     var prevTitleBar = document.querySelector(".title-bar-content");
     if (prevTitleBar) {
@@ -124,9 +159,7 @@ export function enterDmMode(key, targetUser, messages) {
     }
   }
 
-  _ctx.dmMode = true;
-  _ctx.dmKey = key;
-  _ctx.dmTargetUser = targetUser;
+  store.set({ dmMode: true, dmKey: key, dmTargetUser: targetUser });
 
   // Notify server of active mate DM (server-side presence tracking)
   // IMPORTANT: set_mate_dm must go to the MAIN project, not a mate project WS.
@@ -135,52 +168,48 @@ export function enterDmMode(key, targetUser, messages) {
   // The server will also receive it via the mate project's onDmMessage handler,
   // but the presence should only be stored on the main project slug.
   if (targetUser && targetUser.isMate) {
+    var ws = getWs();
     // Send to the current WS only if it's the main project (not another mate)
-    if (!_ctx.mateProjectSlug && _ctx.ws && _ctx.ws.readyState === 1) {
-      try { _ctx.ws.send(JSON.stringify({ type: "set_mate_dm", mateId: targetUser.id })); } catch(e) {}
+    if (!store.get('mateProjectSlug') && ws && ws.readyState === 1) {
+      try { ws.send(JSON.stringify({ type: "set_mate_dm", mateId: targetUser.id })); } catch(e) {}
     }
   }
 
   // Clear unread for this user
   if (targetUser) {
-    _ctx.dmUnread[targetUser.id] = 0;
-    _ctx.updateDmBadge(targetUser.id, 0);
+    store.get('dmUnread')[targetUser.id] = 0;
+    updateDmBadge(targetUser.id, 0);
   }
 
   // Update icon strip active state
-  _ctx.setCurrentDmUser(targetUser ? targetUser.id : null);
+  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 (_ctx.cachedProjects && _ctx.cachedProjects.length > 0) {
-    _ctx.renderProjectList();
+  var cp = getCachedProjects();
+  if (cp && cp.length > 0) {
+    renderProjectList();
   }
 
   // Hide home hub if visible
-  _ctx.hideHomeHub();
+  hideHomeHub();
 
   // Hide sticky notes if visible
-  _ctx.hideNotes();
+  hideNotes();
 
   var isMate = targetUser && targetUser.isMate;
 
-  // Hide project UI + sidebar, show DM UI
-  var mainCol = document.getElementById("main-column");
-  if (mainCol && !isMate) 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");
+  // dm-mode CSS classes are handled by the store subscriber above.
   // Sync resize handles after DM sidebar appears
-  setTimeout(function () { if (_ctx.syncResizeHandles) _ctx.syncResizeHandles(); }, 50);
+  setTimeout(function () { syncResizeHandles(); }, 50);
   if (isMate && targetUser.projectSlug) {
     // Mate DM: switch to mate's project (same as project switching)
-    _ctx.showMateSidebar(targetUser.id, targetUser);
+    showMateSidebar(targetUser.id, targetUser);
     // Close file viewer and terminal panel BEFORE switching WS (needs old WS still open)
-    try { _ctx.closeFileViewer(); } catch(e) {}
-    _ctx.closeTerminal();
+    try { closeFileViewer(); } catch(e) {}
+    closeTerminal();
     // Apply mate color to chat title bar and panels
     var mateColor = (targetUser.profile && targetUser.profile.avatarColor) || targetUser.avatarColor || "#7c3aed";
     document.body.style.setProperty("--mate-color", mateColor);
@@ -188,12 +217,12 @@ export function enterDmMode(key, targetUser, messages) {
     document.body.classList.add("mate-dm-active");
     // Build mate avatar URL for DM bubble injection
     var mp = targetUser.profile || {};
-    var mateAvUrlDm = _ctx.mateAvatarUrl(targetUser, 36);
-    var myUser = _ctx.cachedAllUsers.find(function (u) { return u.id === _ctx.myUserId; });
+    var mateAvUrlDm = mateAvatarUrl(targetUser, 36);
+    var myUser = store.get('cachedAllUsers').find(function (u) { return u.id === store.get('myUserId'); });
     if (!myUser) {
       try { var cached = JSON.parse(localStorage.getItem("clay_my_user") || "null"); if (cached) myUser = cached; } catch(e) {}
     }
-    var myAvatarUrl = _ctx.userAvatarUrl(myUser || { id: _ctx.myUserId }, 36);
+    var myAvatarUrl = userAvatarUrl(myUser || { id: store.get('myUserId') }, 36);
     var myDisplayName = (myUser && myUser.displayName) || "";
     document.body.dataset.mateAvatarUrl = mateAvUrlDm;
     document.body.dataset.mateName = mp.displayName || targetUser.displayName || targetUser.name || "";
@@ -219,7 +248,7 @@ export function enterDmMode(key, targetUser, messages) {
       if (mateMobileStatus) mateMobileStatus.textContent = "online";
       mateMobileTitle.classList.remove("hidden");
       // Store mate data for profile sheet
-      _ctx.setMobileSheetMateData({
+      setMobileSheetMateData({
           id: targetUser.id,
           displayName: mp.displayName || targetUser.displayName || targetUser.name || "",
           description: mp.description || targetUser.description || "",
@@ -238,20 +267,22 @@ export function enterDmMode(key, targetUser, messages) {
   if (userIsland && !isMate) userIsland.classList.add("dm-hidden");
 
   // Render DM messages
-  _ctx.dmMessageCache = messages ? messages.slice() : [];
-  _ctx.messagesEl.innerHTML = "";
+  store.set({ dmMessageCache: messages ? messages.slice() : [] });
+  var messagesEl = getMessagesEl();
+  messagesEl.innerHTML = "";
   if (messages && messages.length > 0) {
     for (var i = 0; i < messages.length; i++) {
       appendDmMessage(messages[i]);
     }
   }
-  _ctx.scrollToBottom();
+  scrollToBottom();
 
   // Focus input
-  if (_ctx.inputEl) {
+  var inputEl = getInputEl();
+  if (inputEl) {
     var targetName = targetUser ? ((targetUser.profile && targetUser.profile.displayName) || targetUser.displayName || targetUser.name || "") : "";
-    _ctx.inputEl.placeholder = "Message " + targetName;
-    _ctx.inputEl.focus();
+    inputEl.placeholder = "Message " + targetName;
+    inputEl.focus();
   }
 
   // Populate DM header bar with user avatar, name, and personal color
@@ -265,7 +296,7 @@ export function enterDmMode(key, targetUser, messages) {
     } else {
       if (dmHeaderBar) dmHeaderBar.style.display = "";
       if (dmAvatar) {
-        dmAvatar.src = _ctx.userAvatarUrl(targetUser, 28);
+        dmAvatar.src = userAvatarUrl(targetUser, 28);
       }
       if (dmName) dmName.textContent = targetUser.displayName;
       if (dmHeaderBar && targetUser.avatarColor) {
@@ -279,26 +310,19 @@ export function enterDmMode(key, targetUser, messages) {
 }
 
 export function exitDmMode(skipProjectSwitch) {
-  if (!_ctx.dmMode) return;
-  var wasMate = _ctx.dmTargetUser && _ctx.dmTargetUser.isMate;
-  _ctx.dmMode = false;
-  _ctx.dmKey = null;
-  _ctx.dmTargetUser = null;
+  if (!store.get('dmMode')) return;
+  var wasMate = store.get('dmTargetUser') && store.get('dmTargetUser').isMate;
+  store.set({ dmMode: false, dmKey: null, dmTargetUser: null });
   try { localStorage.removeItem("clay-active-dm"); } catch (e) {}
-  _ctx.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");
+  setCurrentDmUser(null);
+
+  // dm-mode CSS classes are handled by the store subscriber.
   // Re-sync resize handle positions after DM width changes (defer to let layout settle)
-  setTimeout(function () { if (_ctx.syncResizeHandles) _ctx.syncResizeHandles(); }, 100);
-  _ctx.hideMateSidebar();
-  _ctx.hideKnowledge();
-  _ctx.hideMemory();
-  if (_ctx.isSchedulerOpen()) _ctx.closeScheduler();
+  setTimeout(function () { syncResizeHandles(); }, 100);
+  hideMateSidebar();
+  hideKnowledge();
+  hideMemory();
+  if (isSchedulerOpen()) closeScheduler();
   // Reset DM header
   var dmHeaderBar = document.getElementById("dm-header-bar");
   if (dmHeaderBar) {
@@ -315,7 +339,8 @@ export function exitDmMode(skipProjectSwitch) {
   delete document.body.dataset.mateName;
   delete document.body.dataset.myAvatarUrl;
   // Remove injected DM bubble avatars
-  var bubbleAvatars = _ctx.messagesEl.querySelectorAll(".dm-bubble-avatar");
+  var messagesEl = getMessagesEl();
+  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) {
@@ -330,38 +355,40 @@ export function exitDmMode(skipProjectSwitch) {
   var userIsland = document.getElementById("user-island");
   if (userIsland) userIsland.classList.remove("dm-hidden");
 
-  if (_ctx.inputEl) _ctx.inputEl.placeholder = "";
+  var inputEl = getInputEl();
+  if (inputEl) inputEl.placeholder = "";
 
   // Switch back to main project (same as project switching)
   if (wasMate && !skipProjectSwitch) {
     disconnectMateProject();
   } else if (wasMate && skipProjectSwitch) {
     // Just clean up mate state, caller will handle project switch
-    _ctx.returningFromMateDm = true;
-    _ctx.mateProjectSlug = null;
-    _ctx.savedMainSlug = null;
-    _ctx.showDebateSticky("hide", null);
+    store.set({ returningFromMateDm: true, mateProjectSlug: null, savedMainSlug: null });
+    showDebateSticky("hide", null);
     var debateFloat = document.getElementById("debate-info-float");
     if (debateFloat) { debateFloat.classList.add("hidden"); debateFloat.innerHTML = ""; }
   } else {
     // Human DM: just re-request state from main project
-    if (_ctx.ws && _ctx.ws.readyState === 1) {
-      _ctx.ws.send(JSON.stringify({ type: "switch_session", id: _ctx.activeSessionId }));
-      _ctx.ws.send(JSON.stringify({ type: "note_list_request" }));
+    var ws = getWs();
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: "switch_session", id: store.get('activeSessionId') }));
+      ws.send(JSON.stringify({ type: "note_list_request" }));
     }
   }
-  _ctx.renderProjectList();
+  renderProjectList();
 }
 
 export function handleMateCreatedInApp(mate, msg) {
   if (!mate) return;
-  _ctx.cachedMatesList.push(mate);
-  if (msg && msg.availableBuiltins) _ctx.cachedAvailableBuiltins = msg.availableBuiltins;
-  if (msg && msg.dmFavorites) _ctx.cachedDmFavorites = msg.dmFavorites;
-  _ctx.renderUserStrip(_ctx.cachedAllUsers, _ctx.cachedOnlineIds, _ctx.myUserId, _ctx.cachedDmFavorites, _ctx.cachedDmConversations, _ctx.dmUnread, _ctx.dmRemovedUsers, _ctx.cachedMatesList);
+  var newMates = store.get('cachedMatesList').concat([mate]);
+  var updates = { cachedMatesList: newMates };
+  if (msg && msg.availableBuiltins) updates.cachedAvailableBuiltins = msg.availableBuiltins;
+  if (msg && msg.dmFavorites) updates.cachedDmFavorites = msg.dmFavorites;
+  store.set(updates);
+  // renderUserStrip is handled by the store subscriber
   // Built-in mates handle their own onboarding via CLAUDE.md, skip auto-interview
   if (!mate.builtinKey) {
-    _ctx.pendingMateInterview = mate;
+    store.set({ pendingMateInterview: mate });
   }
   openDm(mate.id);
 }
@@ -402,18 +429,20 @@ export function renderAvailableBuiltins(builtins) {
       addBtn.title = "Re-add " + b.displayName;
       addBtn.addEventListener("click", function (e) {
         e.stopPropagation();
-        if (_ctx.ws && _ctx.ws.readyState === 1) {
-          _ctx.ws.send(JSON.stringify({ type: "mate_readd_builtin", builtinKey: b.key }));
+        var ws = getWs();
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "mate_readd_builtin", builtinKey: b.key }));
         }
-        _ctx.closeDmUserPicker();
+        closeDmUserPicker();
       });
       item.appendChild(addBtn);
 
       item.addEventListener("click", function () {
-        if (_ctx.ws && _ctx.ws.readyState === 1) {
-          _ctx.ws.send(JSON.stringify({ type: "mate_readd_builtin", builtinKey: b.key }));
+        var ws = getWs();
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "mate_readd_builtin", builtinKey: b.key }));
         }
-        _ctx.closeDmUserPicker();
+        closeDmUserPicker();
       });
 
       matesList.appendChild(item);
@@ -424,7 +453,7 @@ export function renderAvailableBuiltins(builtins) {
 export function buildMateInterviewPrompt(mate) {
   var sd = mate.seedData || {};
   var parts = [];
-  var spokenLang = _ctx.getProfileLang() || "en-US";
+  var spokenLang = getProfileLang() || "en-US";
   parts.push("Spoken Language: " + spokenLang);
   if (sd.relationship) parts.push("Relationship: " + sd.relationship);
   if (sd.activity && sd.activity.length > 0) parts.push("Activities: " + sd.activity.join(", "));
@@ -449,8 +478,8 @@ export function buildMateInterviewPrompt(mate) {
 }
 
 export function updateMateIconStatus(msg) {
-  if (!_ctx.mateProjectSlug) return;
-  var slug = _ctx.mateProjectSlug;
+  if (!store.get('mateProjectSlug')) return;
+  var slug = store.get('mateProjectSlug');
   if (msg.type === "content" || msg.type === "tool" || msg.type === "tool_use" || msg.type === "thinking") {
     var ioDot = document.querySelector('.icon-strip-mate[data-mate-slug="' + slug + '"] .icon-strip-status');
     if (ioDot) {
@@ -474,42 +503,47 @@ export function updateMateIconStatus(msg) {
 }
 
 export function connectMateProject(slug) {
-  _ctx.mateProjectSlug = slug;
+  var s = store.snap();
+  store.set({ mateProjectSlug: slug });
   // Only save the main slug on the FIRST mate switch (preserve original main project)
-  if (!_ctx.savedMainSlug) _ctx.savedMainSlug = _ctx.currentSlug;
-  _ctx.currentSlug = slug;
-  _ctx.wsPath = "/p/" + slug + "/ws";
-  _ctx.resetClientState();
-  _ctx.connect();
+  if (!s.savedMainSlug) store.set({ savedMainSlug: s.currentSlug });
+  store.set({ currentSlug: slug, wsPath: "/p/" + slug + "/ws" });
+  resetClientState();
+  connect();
 }
 
 export function disconnectMateProject() {
-  _ctx.mateProjectSlug = null;
+  store.set({ mateProjectSlug: null });
   // Hide debate sticky when leaving mate DM
-  _ctx.showDebateSticky("hide", null);
+  showDebateSticky("hide", null);
   // Hide debate info float
   var debateFloat = document.getElementById("debate-info-float");
   if (debateFloat) { debateFloat.classList.add("hidden"); debateFloat.innerHTML = ""; }
   // Switch back to main project
-  if (_ctx.savedMainSlug) {
-    _ctx.returningFromMateDm = true;
-    _ctx.currentSlug = _ctx.savedMainSlug;
-    _ctx.basePath = "/p/" + _ctx.savedMainSlug + "/";
-    _ctx.wsPath = "/p/" + _ctx.savedMainSlug + "/ws";
-    _ctx.savedMainSlug = null;
-    _ctx.resetClientState();
-    _ctx.connect();
+  var savedMainSlug = store.get('savedMainSlug');
+  if (savedMainSlug) {
+    store.set({
+      returningFromMateDm: true,
+      currentSlug: savedMainSlug,
+      basePath: "/p/" + savedMainSlug + "/",
+      wsPath: "/p/" + savedMainSlug + "/ws",
+      savedMainSlug: null
+    });
+    resetClientState();
+    connect();
   }
 }
 
 export function appendDmMessage(msg) {
-  if (_ctx.dmMode) _ctx.dmMessageCache.push(msg);
-  var isMe = msg.from === _ctx.myUserId;
+  var s = store.snap();
+  if (s.dmMode) s.dmMessageCache.push(msg);
+  var isMe = msg.from === s.myUserId;
   var d = new Date(msg.ts);
   var timeStr = d.getHours().toString().padStart(2, "0") + ":" + d.getMinutes().toString().padStart(2, "0");
 
+  var messagesEl = getMessagesEl();
   // Check if we can compact (same sender as previous, within 5 min)
-  var prev = _ctx.messagesEl.lastElementChild;
+  var prev = messagesEl.lastElementChild;
   var compact = false;
   if (prev && prev.dataset.from === msg.from) {
     var prevTs = parseInt(prev.dataset.ts || "0", 10);
@@ -537,10 +571,10 @@ export function appendDmMessage(msg) {
     var avatar = document.createElement("img");
     avatar.className = "dm-msg-avatar";
     if (isMe) {
-      var myUser = _ctx.cachedAllUsers.find(function (u) { return u.id === _ctx.myUserId; });
-      avatar.src = _ctx.userAvatarUrl(myUser || { id: _ctx.myUserId }, 36);
-    } else if (_ctx.dmTargetUser) {
-      avatar.src = _ctx.userAvatarUrl(_ctx.dmTargetUser, 36);
+      var myUser = s.cachedAllUsers.find(function (u) { return u.id === s.myUserId; });
+      avatar.src = userAvatarUrl(myUser || { id: s.myUserId }, 36);
+    } else if (s.dmTargetUser) {
+      avatar.src = userAvatarUrl(s.dmTargetUser, 36);
     }
     div.appendChild(avatar);
 
@@ -553,10 +587,10 @@ export function appendDmMessage(msg) {
     var name = document.createElement("span");
     name.className = "dm-msg-name";
     if (isMe) {
-      var mu = _ctx.cachedAllUsers.find(function (u) { return u.id === _ctx.myUserId; });
+      var mu = s.cachedAllUsers.find(function (u) { return u.id === s.myUserId; });
       name.textContent = mu ? mu.displayName : "Me";
     } else {
-      name.textContent = _ctx.dmTargetUser ? _ctx.dmTargetUser.displayName : "User";
+      name.textContent = s.dmTargetUser ? s.dmTargetUser.displayName : "User";
     }
     header.appendChild(name);
 
@@ -575,7 +609,7 @@ export function appendDmMessage(msg) {
     div.appendChild(content);
   }
 
-  _ctx.messagesEl.appendChild(div);
+  messagesEl.appendChild(div);
 }
 
 export function showDmTypingIndicator(typing) {
@@ -585,7 +619,8 @@ export function showDmTypingIndicator(typing) {
     return;
   }
   if (existing) return; // already showing
-  if (!_ctx.dmTargetUser) return;
+  var dmTargetUser = store.get('dmTargetUser');
+  if (!dmTargetUser) return;
 
   var div = document.createElement("div");
   div.id = "dm-typing-indicator";
@@ -593,7 +628,7 @@ export function showDmTypingIndicator(typing) {
 
   var avatar = document.createElement("img");
   avatar.className = "dm-msg-avatar";
-  avatar.src = _ctx.userAvatarUrl(_ctx.dmTargetUser, 36);
+  avatar.src = userAvatarUrl(dmTargetUser, 36);
   div.appendChild(avatar);
 
   var dots = document.createElement("div");
@@ -601,8 +636,9 @@ export function showDmTypingIndicator(typing) {
   dots.innerHTML = "<span></span><span></span><span></span>";
   div.appendChild(dots);
 
-  _ctx.messagesEl.appendChild(div);
-  _ctx.scrollToBottom();
+  var messagesEl = getMessagesEl();
+  messagesEl.appendChild(div);
+  scrollToBottom();
 
   // Auto-hide after 5s in case stop signal is missed
   clearTimeout(dmTypingTimer);
@@ -612,11 +648,14 @@ export function showDmTypingIndicator(typing) {
 }
 
 export function handleDmSend() {
-  if (!_ctx.dmMode || !_ctx.dmKey || !_ctx.inputEl) return false;
-  var text = _ctx.inputEl.value.trim();
+  var s = store.snap();
+  var inputEl = getInputEl();
+  if (!s.dmMode || !s.dmKey || !inputEl) return false;
+  var text = inputEl.value.trim();
   if (!text) return false;
-  _ctx.ws.send(JSON.stringify({ type: "dm_send", dmKey: _ctx.dmKey, text: text }));
-  _ctx.inputEl.value = "";
-  _ctx.autoResize();
+  var ws = getWs();
+  ws.send(JSON.stringify({ type: "dm_send", dmKey: s.dmKey, text: text }));
+  inputEl.value = "";
+  autoResize();
   return true;
 }