clay-server 3.8.1 → 4.0.0-beta.10

package/lib/public/modules/avatar-imprint.js

@@ -4,8 +4,15 @@ var PAPER = "#f1efe8";
 var INK = "#1b1b1a";
 var LIGHT_BASE = "#e7e5de";
 var LIGHT_FIELD = "#333330";
-var REGISTRATION_INDIGO = "#5857fc";
-var BRAND_GREEN = "#07e5a3";
+var MUTED_INDIGO = "#72778f";
+var MATE_MARK_PALETTE = [
+  { background: "#6f7489", foreground: PAPER },
+  { background: "#78816c", foreground: PAPER },
+  { background: "#92756d", foreground: PAPER },
+  { background: "#6f8382", foreground: PAPER },
+  { background: "#887b91", foreground: PAPER },
+  { background: "#8a806a", foreground: PAPER },
+];
 
 function hashString(value) {
   var text = String(value || "anonymous");
@@ -71,7 +78,7 @@ export function imprintSvg(options) {
   var darkBase = random() > 0.52;
   var base = darkBase ? INK : LIGHT_BASE;
   var field = darkBase ? PAPER : LIGHT_FIELD;
-  var accent = REGISTRATION_INDIGO;
+  var accent = MUTED_INDIGO;
   var rotation = Math.floor(random() * 4) * 90;
   var bandWidth = between(random, 37, 56);
   var secondaryWidth = between(random, 14, 24);
@@ -114,11 +121,7 @@ export function mateMarkSvg(options) {
   var size = Math.max(12, Math.min(256, Number(settings.size) || 64));
   var identity = String(settings.seed || "M").trim();
   var initial = Array.from(identity || "M")[0].toUpperCase();
-  var palette = [
-    { background: REGISTRATION_INDIGO, foreground: PAPER },
-    { background: BRAND_GREEN, foreground: INK },
-    { background: PAPER, foreground: REGISTRATION_INDIGO },
-  ][initial.codePointAt(0) % 3];
+  var palette = MATE_MARK_PALETTE[initial.codePointAt(0) % MATE_MARK_PALETTE.length];
   var clipId = "mate-mark";
 
   return '<svg xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size +

package/lib/public/modules/background-tasks-ui.js

@@ -1,55 +1,178 @@
+// background-tasks-ui.js - Background task status line above the composer.
+//
+// Collapsed it reads as a quiet status line, not a button demanding attention:
+// a muted activity indicator, a count, and a chevron. Expanding lists each task
+// with its elapsed time and a Stop control.
+//
+// Elapsed time comes from `started_at` (epoch ms) which the server stamps in
+// lib/background-task-timing.js. The ticker only runs while the list is
+// expanded, so a collapsed bar costs nothing.
+
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { escapeHtml } from './utils.js';
+import { iconHtml, refreshIcons } from './icons.js';
 
 var expanded = false;
+var elapsedTimer = null;
+
+// Lucide icon per vendor-neutral task type (see normalizeBackgroundTasks in
+// yoke/adapters/claude.js for where these types are assigned).
+var TASK_TYPE_ICONS = { shell: "terminal", agent: "sparkles", other: "circle-dot" };
 
 export function initBackgroundTasksUi() {
-  store.subscribe(function(state, prev) {
+  store.subscribe(function (state, prev) {
     if (state.activeBackgroundTasks !== prev.activeBackgroundTasks) renderBackgroundTasks();
   });
   renderBackgroundTasks();
 }
 
+// "45s", "2m 14s", "1h 03m" - short enough to sit in a row without wrapping.
+export function formatElapsed(startedAt, now) {
+  if (typeof startedAt !== "number" || !isFinite(startedAt) || startedAt <= 0) return "";
+  var current = typeof now === "number" ? now : Date.now();
+  var totalSeconds = Math.floor((current - startedAt) / 1000);
+  if (totalSeconds < 0) totalSeconds = 0;
+  if (totalSeconds < 60) return totalSeconds + "s";
+  var minutes = Math.floor(totalSeconds / 60);
+  var seconds = totalSeconds % 60;
+  if (minutes < 60) return minutes + "m " + pad(seconds) + "s";
+  var hours = Math.floor(minutes / 60);
+  return hours + "h " + pad(minutes % 60) + "m";
+}
+
+function pad(value) {
+  return value < 10 ? "0" + value : String(value);
+}
+
+function stopElapsedTimer() {
+  if (!elapsedTimer) return;
+  clearInterval(elapsedTimer);
+  elapsedTimer = null;
+}
+
+// Ticks at most once a second and only touches the time cells, so expanding
+// the list never re-renders (and never steals focus from) the rows.
+function startElapsedTimer() {
+  stopElapsedTimer();
+  elapsedTimer = setInterval(updateElapsedCells, 1000);
+}
+
+function updateElapsedCells() {
+  var bar = document.getElementById('background-tasks-bar');
+  if (!bar || !expanded) {
+    stopElapsedTimer();
+    return;
+  }
+  var now = Date.now();
+  var cells = bar.querySelectorAll('.background-task-elapsed');
+  for (var i = 0; i < cells.length; i++) {
+    var startedAt = Number(cells[i].dataset.startedAt);
+    cells[i].textContent = formatElapsed(startedAt, now);
+  }
+}
+
+function activityDotsHtml() {
+  return '<span class="background-tasks-activity" aria-hidden="true"><i></i><i></i><i></i></span>';
+}
+
+// Ambient tasks are the CLI's own housekeeping. The SDK asks hosts to keep
+// them out of activity indicators; Clay still lists them so the user can see
+// what runs on their behalf. Absent means false (Codex has no ambient concept,
+// and older CLI builds report only user work).
+export function isAmbientTask(task) {
+  return !!(task && task.ambient === true);
+}
+
+export function splitTasks(tasks) {
+  var user = [];
+  var ambient = [];
+  var list = Array.isArray(tasks) ? tasks : [];
+  for (var i = 0; i < list.length; i++) {
+    if (!list[i]) continue;
+    if (isAmbientTask(list[i])) ambient.push(list[i]);
+    else user.push(list[i]);
+  }
+  return { user: user, ambient: ambient };
+}
+
+function taskRowHtml(task, now) {
+  var taskType = task.task_type || 'other';
+  var icon = TASK_TYPE_ICONS[taskType] || TASK_TYPE_ICONS.other;
+  var description = task.description || 'Background task';
+  var startedAt = typeof task.started_at === 'number' ? task.started_at : 0;
+  var elapsed = formatElapsed(startedAt, now);
+  return '<div class="background-task-row' + (isAmbientTask(task) ? ' ambient' : '') + '">' +
+    '<span class="background-task-icon" title="' + escapeHtml(taskType) + '">' + iconHtml(icon) + '</span>' +
+    '<span class="background-task-description" title="' + escapeHtml(description) + '">' +
+      escapeHtml(description) + '</span>' +
+    '<span class="background-task-meta">' +
+      '<span class="background-task-type">' + escapeHtml(taskType) + '</span>' +
+      '<span class="background-task-elapsed" data-started-at="' + startedAt + '">' + escapeHtml(elapsed) + '</span>' +
+    '</span>' +
+    '<button type="button" class="background-task-stop" data-task-id="' + escapeHtml(task.task_id || '') + '" ' +
+      'aria-label="Stop ' + escapeHtml(description) + '">Stop</button>' +
+    '</div>';
+}
+
 function renderBackgroundTasks() {
   var tasks = store.get('activeBackgroundTasks') || [];
+  var split = splitTasks(tasks);
   var existing = document.getElementById('background-tasks-bar');
-  if (tasks.length === 0) {
+  // Ambient-only means nothing the user asked for is running, so the composer
+  // stays quiet: no bar, no dots, no count.
+  if (split.user.length === 0) {
     if (existing) existing.remove();
     expanded = false;
+    stopElapsedTimer();
     return;
   }
   var inputArea = document.getElementById('input-area');
   if (!inputArea || !inputArea.parentNode) return;
+
   var bar = existing || document.createElement('div');
   bar.id = 'background-tasks-bar';
-  bar.className = 'background-tasks-bar';
-  var taskLabel = tasks.length === 1 ? 'background task' : 'background tasks';
-  var html = '<button type="button" class="background-tasks-toggle" aria-expanded="' + expanded + '">' +
-    '<span aria-hidden="true">⏳</span><span class="background-tasks-chip">' + tasks.length + '</span>' +
-    '<span>' + tasks.length + ' ' + taskLabel + '</span></button>';
+  bar.className = 'background-tasks-bar' + (expanded ? ' expanded' : '');
+
+  var taskLabel = split.user.length === 1 ? 'background task' : 'background tasks';
+  var summary = split.user.length + ' ' + taskLabel;
+  var html = '<button type="button" class="background-tasks-toggle" aria-expanded="' + expanded + '"' +
+    ' aria-controls="background-tasks-list" aria-label="' + summary + ', ' +
+    (expanded ? 'collapse' : 'expand') + ' details">' +
+    activityDotsHtml() +
+    '<span class="background-tasks-summary">' + summary + '</span>' +
+    '<span class="background-tasks-chevron" aria-hidden="true">' + iconHtml('chevron-right') + '</span>' +
+    '</button>';
+
   if (expanded) {
-    html += '<div class="background-tasks-list">';
-    for (var i = 0; i < tasks.length; i++) {
-      var task = tasks[i];
-      html += '<div class="background-task-row"><span class="background-task-description" title="' + escapeHtml(task.description || '') + '">' +
-        escapeHtml(task.description || 'Background task') + '</span><span class="background-task-type">' +
-        escapeHtml(task.task_type || 'other') + '</span><button type="button" class="background-task-stop" data-task-id="' +
-        escapeHtml(task.task_id || '') + '">Stop</button></div>';
+    var now = Date.now();
+    html += '<div class="background-tasks-list" id="background-tasks-list">';
+    for (var i = 0; i < split.user.length; i++) html += taskRowHtml(split.user[i], now);
+    // Housekeeping is shown, not hidden: the user can see what Clay runs on
+    // its own and stop a runaway one. Kept visually subordinate to real work.
+    if (split.ambient.length > 0) {
+      html += '<div class="background-tasks-section-label">Housekeeping</div>';
+      for (var a = 0; a < split.ambient.length; a++) html += taskRowHtml(split.ambient[a], now);
     }
     html += '</div>';
   }
   bar.innerHTML = html;
   if (!existing) inputArea.parentNode.insertBefore(bar, inputArea);
-  bar.querySelector('.background-tasks-toggle').addEventListener('click', function() {
+  refreshIcons();
+
+  bar.querySelector('.background-tasks-toggle').addEventListener('click', function () {
     expanded = !expanded;
     renderBackgroundTasks();
   });
+
   var stopButtons = bar.querySelectorAll('.background-task-stop');
   for (var j = 0; j < stopButtons.length; j++) {
-    stopButtons[j].addEventListener('click', function() {
+    stopButtons[j].addEventListener('click', function () {
       var ws = getWs();
       if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'stop_task', taskId: this.dataset.taskId }));
     });
   }
+
+  if (expanded) startElapsedTimer();
+  else stopElapsedTimer();
 }

package/lib/public/modules/chat-bubble-renderer.js

@@ -0,0 +1,152 @@
+// chat-bubble-renderer.js - Stateless project-style chat bubble rendering.
+
+import { copyToClipboard } from './utils.js';
+import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks, enhanceClaySessionLinks } from './markdown.js';
+
+var copyCleanups = new WeakMap();
+
+function appendIdentity(row, options, avatarClass) {
+  if (options.avatarUrl) {
+    var avatar = document.createElement("img");
+    avatar.className = "dm-bubble-avatar " + avatarClass;
+    avatar.src = options.avatarUrl;
+    avatar.alt = "";
+    row.appendChild(avatar);
+  }
+
+  var content = document.createElement("div");
+  content.className = "dm-bubble-content";
+  if (options.name || options.time) {
+    var header = document.createElement("div");
+    header.className = "dm-bubble-header";
+    if (options.name) {
+      var name = document.createElement("span");
+      name.className = "dm-bubble-name";
+      name.textContent = options.name;
+      header.appendChild(name);
+    }
+    if (options.time) {
+      var time = document.createElement("span");
+      time.className = "dm-bubble-time";
+      time.textContent = options.time;
+      header.appendChild(time);
+    }
+    content.appendChild(header);
+  }
+  row.appendChild(content);
+  return content;
+}
+
+export function createAssistantBubble(options) {
+  options = options || {};
+  var row = document.createElement("div");
+  row.className = "msg-assistant";
+  if (options.turn !== undefined && options.turn !== null) row.dataset.turn = options.turn;
+  var contentWrap = appendIdentity(row, options, "dm-bubble-avatar-mate");
+  var content = document.createElement("div");
+  content.className = "md-content";
+  content.dir = "auto";
+  contentWrap.appendChild(content);
+  return row;
+}
+
+export function createUserBubble(options) {
+  options = options || {};
+  var row = document.createElement("div");
+  row.className = "msg-user";
+  if (options.turn !== undefined && options.turn !== null) row.dataset.turn = options.turn;
+  var contentWrap = appendIdentity(row, options, "dm-bubble-avatar-me");
+  var bubble = document.createElement("div");
+  bubble.className = "bubble";
+  bubble.dir = "auto";
+  var text = document.createElement("span");
+  text.textContent = options.text || "";
+  bubble.appendChild(text);
+  contentWrap.appendChild(bubble);
+  return row;
+}
+
+function assistantContent(row) {
+  return row ? row.querySelector(".md-content") : null;
+}
+
+export function renderAssistantBubbleText(row, text, highlight) {
+  var content = assistantContent(row);
+  if (!content) return null;
+  content.innerHTML = renderMarkdown(text || "");
+  enhanceClaySessionLinks(content);
+  if (highlight) highlightCodeBlocks(content);
+  return content;
+}
+
+export function enhanceAssistantBubble(row, renderMermaid) {
+  var content = assistantContent(row);
+  if (!content) return;
+  enhanceClaySessionLinks(content);
+  highlightCodeBlocks(content);
+  if (renderMermaid) renderMermaidBlocks(content);
+}
+
+export function addAssistantCopyHandler(row, rawText) {
+  if (!row || !rawText || row.dataset.copyBound === "true") return;
+  row.dataset.copyBound = "true";
+  var primed = false;
+  var resetTimer = null;
+  var isTouchDevice = "ontouchstart" in window;
+  var hint = document.createElement("div");
+  hint.className = "msg-copy-hint";
+  hint.textContent = (isTouchDevice ? "Tap" : "Click") + " to grab this";
+  row.appendChild(hint);
+
+  function reset() {
+    primed = false;
+    row.classList.remove("copy-primed", "copy-done");
+    hint.textContent = (isTouchDevice ? "Tap" : "Click") + " to grab this";
+  }
+
+  row.addEventListener("click", function (event) {
+    if (event.target.closest("a, pre, code")) return;
+    var selection = window.getSelection();
+    if (selection && selection.toString().length > 0) return;
+    if (!primed) {
+      primed = true;
+      row.classList.add("copy-primed");
+      hint.textContent = isTouchDevice ? "Tap again to grab" : "Click again to grab";
+      clearTimeout(resetTimer);
+      resetTimer = setTimeout(reset, 3000);
+      return;
+    }
+    clearTimeout(resetTimer);
+    copyToClipboard(rawText).then(function () {
+      row.classList.remove("copy-primed");
+      row.classList.add("copy-done");
+      hint.textContent = "Grabbed!";
+      resetTimer = setTimeout(reset, 1500);
+    });
+  });
+
+  function handleOutsideClick(event) {
+    if (primed && !row.contains(event.target)) reset();
+  }
+  document.addEventListener("click", handleOutsideClick);
+  copyCleanups.set(row, function () {
+    clearTimeout(resetTimer);
+    document.removeEventListener("click", handleOutsideClick);
+    copyCleanups.delete(row);
+  });
+}
+
+export function finalizeAssistantBubble(row, rawText, enableCopy) {
+  renderAssistantBubbleText(row, rawText, false);
+  enhanceAssistantBubble(row, true);
+  if (enableCopy) addAssistantCopyHandler(row, rawText);
+}
+
+export function disposeChatBubbleTree(root) {
+  if (!root) return;
+  var rows = root.querySelectorAll('.msg-assistant[data-copy-bound="true"]');
+  for (var i = 0; i < rows.length; i++) {
+    var cleanup = copyCleanups.get(rows[i]);
+    if (cleanup) cleanup();
+  }
+}

package/lib/public/modules/chat-render-runtime.js

@@ -0,0 +1,198 @@
+// chat-render-runtime.js - Shared project transcript state and scrolling.
+
+import { store } from './store.js';
+import { getMessagesEl } from './dom-refs.js';
+
+export var VENDOR_AVATARS = {
+  claude: "/claude-code-avatar.png",
+  codex: "/codex-avatar.png",
+  antigravity: "/antigravity-avatar.png",
+  opencode: "/opencode-avatar.svg",
+  kimi: "/kimi-avatar.svg",
+  grok: "/grok-avatar.svg",
+  copilot: "/copilot-avatar.svg",
+  qwen: "/qwen-avatar.svg",
+  junie: "/junie-avatar.svg",
+  kiro: "/kiro-avatar.svg",
+};
+
+export var VENDOR_NAMES = {
+  claude: "Claude Code",
+  codex: "Codex",
+  antigravity: "Antigravity CLI",
+  opencode: "OpenCode",
+  kimi: "Kimi Code",
+  grok: "Grok Build",
+  copilot: "GitHub Copilot CLI",
+  qwen: "Qwen Code",
+  junie: "Junie CLI",
+  kiro: "Kiro CLI",
+};
+
+export var VENDOR_HOMEPAGES = {
+  claude: "https://claude.com/product/claude-code",
+  codex: "https://openai.com/codex/",
+  antigravity: "https://antigravity.google/product/antigravity-cli",
+  opencode: "https://opencode.ai/",
+  kimi: "https://www.kimi.com/code/",
+  grok: "https://docs.x.ai/build/overview",
+  copilot: "https://github.com/features/copilot/cli",
+  qwen: "https://qwenlm.github.io/qwen-code-docs/",
+  junie: "https://junie.jetbrains.com/",
+  kiro: "https://kiro.dev/",
+};
+
+var NEW_MSG_BTN_DEFAULT = "\u2193 Latest";
+var NEW_MSG_BTN_ACTIVITY = "\u2193 New activity";
+var turnCounter = 0;
+var prependAnchor = null;
+var activityEl = null;
+var isUserScrolledUp = false;
+var stickyBottom = false;
+var stickyBottomQuietTimer = null;
+var stickyBottomCeilingTimer = null;
+var stickyBottomQuietMs = 750;
+var stickyBottomCeilingMs = 8000;
+var stickyBottomResizeObs = null;
+var stickyBottomInputBound = false;
+
+export function getStickyBottom() { return stickyBottom; }
+
+function pinToBottomNow() {
+  var messagesEl = getMessagesEl();
+  if (!messagesEl) return;
+  messagesEl.scrollTop = messagesEl.scrollHeight;
+}
+
+function ensureStickyInfrastructure() {
+  var messagesEl = getMessagesEl();
+  if (!messagesEl) return;
+  if (!stickyBottomResizeObs && typeof ResizeObserver !== "undefined") {
+    stickyBottomResizeObs = new ResizeObserver(function () {
+      if (!stickyBottom) return;
+      pinToBottomNow();
+      if (stickyBottomQuietTimer) clearTimeout(stickyBottomQuietTimer);
+      stickyBottomQuietTimer = setTimeout(disarmStickyBottom, stickyBottomQuietMs);
+    });
+    stickyBottomResizeObs.observe(messagesEl);
+    var kids = messagesEl.children;
+    for (var i = 0; i < kids.length; i++) stickyBottomResizeObs.observe(kids[i]);
+  }
+  if (!stickyBottomInputBound) {
+    stickyBottomInputBound = true;
+    var disarmOnUserScroll = function () { disarmStickyBottom(); };
+    messagesEl.addEventListener("wheel", disarmOnUserScroll, { passive: true });
+    messagesEl.addEventListener("touchmove", disarmOnUserScroll, { passive: true });
+    document.addEventListener("keydown", function (event) {
+      if (!stickyBottom) return;
+      if (event.key === "PageUp" || event.key === "Home" || event.key === "ArrowUp") disarmStickyBottom();
+    });
+  }
+}
+
+export function armStickyBottom(durationMs) {
+  if (prependAnchor) return;
+  ensureStickyInfrastructure();
+  stickyBottom = true;
+  isUserScrolledUp = false;
+  var newMsgBtn = document.getElementById("new-msg-btn");
+  if (newMsgBtn) {
+    newMsgBtn.classList.add("hidden");
+    newMsgBtn.textContent = NEW_MSG_BTN_DEFAULT;
+  }
+  pinToBottomNow();
+  if (stickyBottomResizeObs) {
+    var messagesEl = getMessagesEl();
+    if (messagesEl) {
+      var kids = messagesEl.children;
+      for (var i = 0; i < kids.length; i++) {
+        try { stickyBottomResizeObs.observe(kids[i]); } catch (e) {}
+      }
+    }
+  }
+  stickyBottomQuietMs = durationMs || 750;
+  if (stickyBottomQuietTimer) clearTimeout(stickyBottomQuietTimer);
+  stickyBottomQuietTimer = setTimeout(disarmStickyBottom, stickyBottomQuietMs);
+  if (stickyBottomCeilingTimer) clearTimeout(stickyBottomCeilingTimer);
+  stickyBottomCeilingTimer = setTimeout(disarmStickyBottom, stickyBottomCeilingMs);
+}
+
+export function disarmStickyBottom() {
+  stickyBottom = false;
+  if (stickyBottomQuietTimer) { clearTimeout(stickyBottomQuietTimer); stickyBottomQuietTimer = null; }
+  if (stickyBottomCeilingTimer) { clearTimeout(stickyBottomCeilingTimer); stickyBottomCeilingTimer = null; }
+}
+
+export function initRendering() {
+  store.subscribe(function (state, prev) {
+    if (state.currentVendor !== prev.currentVendor) {
+      var inputEl = document.getElementById("input");
+      if (inputEl) inputEl.placeholder = "Message " + (VENDOR_NAMES[state.currentVendor] || VENDOR_NAMES.claude) + "...";
+    }
+  });
+}
+
+export function getTurnCounter() { return turnCounter; }
+export function setTurnCounter(value) { turnCounter = value; }
+export function getPrependAnchor() { return prependAnchor; }
+export function setPrependAnchor(value) { prependAnchor = value; }
+export function getActivityEl() { return activityEl; }
+export function setActivityEl(value) { activityEl = value; }
+export function getIsUserScrolledUp() { return isUserScrolledUp; }
+export function setIsUserScrolledUp(value) { isUserScrolledUp = value; }
+
+export function addToMessages(element) {
+  var messagesEl = getMessagesEl();
+  if (prependAnchor) messagesEl.insertBefore(element, prependAnchor);
+  else messagesEl.appendChild(element);
+  var scheduled = document.getElementById("scheduled-msg-bubble");
+  if (scheduled && element !== scheduled && scheduled.parentNode === messagesEl) messagesEl.appendChild(scheduled);
+}
+
+export function scrollToBottom() {
+  if (prependAnchor) return;
+  var messagesEl = getMessagesEl();
+  if (!messagesEl) return;
+  var distFromBottom = messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight;
+  if (distFromBottom > 150 || isUserScrolledUp) {
+    if (distFromBottom > 150) isUserScrolledUp = true;
+    var newMsgBtn = document.getElementById("new-msg-btn");
+    if (newMsgBtn) {
+      newMsgBtn.textContent = NEW_MSG_BTN_ACTIVITY;
+      newMsgBtn.classList.remove("hidden");
+    }
+    return;
+  }
+  requestAnimationFrame(function () {
+    var dist = messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight;
+    if (dist > 150) {
+      isUserScrolledUp = true;
+      return;
+    }
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+  });
+}
+
+export function forceScrollToBottom() {
+  if (prependAnchor) return;
+  armStickyBottom(750);
+}
+
+export function getMsgTime() {
+  var timestamp = store.get('currentMsgTs');
+  var date = timestamp ? new Date(timestamp) : new Date();
+  var time = String(date.getHours()).padStart(2, "0") + ":" + String(date.getMinutes()).padStart(2, "0");
+  var now = new Date();
+  if (date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate()) return time;
+  return (date.getMonth() + 1) + "/" + date.getDate() + " " + time;
+}
+
+export function shouldGroupMessage(senderClass) {
+  var state = store.snap();
+  if (state.replayingHistory && !state.currentMsgTs) return false;
+  var prev = getMessagesEl().lastElementChild;
+  if (!prev || !prev.classList.contains(senderClass)) return false;
+  var prevTime = prev.querySelector(".dm-bubble-time");
+  if (!prevTime) return false;
+  return prevTime.textContent === getMsgTime();
+}