clay-server 2.27.0-beta.8 → 2.27.0

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

@@ -0,0 +1,597 @@
+// app-rendering.js - Message rendering, streaming, scroll management, system messages
+// Extracted from app.js (PR-28)
+
+import { store } from './store.js';
+
+var _ctx = null;
+
+// --- Module-owned state (not in store) ---
+var turnCounter = 0;
+var prependAnchor = null;
+var activityEl = null;
+var matePreThinkingTimer = null;
+var highlightTimer = null;
+var streamBuffer = "";
+var streamDrainTimer = null;
+var isUserScrolledUp = false;
+var scrollThreshold = 150;
+
+export function initRendering(ctx) {
+  _ctx = ctx;
+}
+
+// --- State accessors (module-local, not in store) ---
+export function getTurnCounter() { return turnCounter; }
+export function setTurnCounter(v) { turnCounter = v; }
+export function getPrependAnchor() { return prependAnchor; }
+export function setPrependAnchor(v) { prependAnchor = v; }
+export function getActivityEl() { return activityEl; }
+export function setActivityEl(v) { activityEl = v; }
+export function getIsUserScrolledUp() { return isUserScrolledUp; }
+export function setIsUserScrolledUp(v) { isUserScrolledUp = v; }
+
+// --- Rendering functions ---
+
+export function addToMessages(el) {
+  var messagesEl = _ctx.messagesEl;
+  if (prependAnchor) messagesEl.insertBefore(el, prependAnchor);
+  else messagesEl.appendChild(el);
+  var _sme = _ctx.getScheduledMsgEl();
+  if (_sme && el !== _sme && _sme.parentNode === messagesEl) {
+    messagesEl.appendChild(_sme);
+  }
+}
+
+export function scrollToBottom() {
+  if (prependAnchor) return;
+  if (isUserScrolledUp) {
+    _ctx.newMsgBtn.textContent = _ctx.newMsgBtnActivity;
+    _ctx.newMsgBtn.classList.remove("hidden");
+    return;
+  }
+  var messagesEl = _ctx.messagesEl;
+  requestAnimationFrame(function () {
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+  });
+}
+
+export function forceScrollToBottom() {
+  if (prependAnchor) return;
+  isUserScrolledUp = false;
+  _ctx.newMsgBtn.classList.add("hidden");
+  _ctx.newMsgBtn.textContent = _ctx.newMsgBtnDefault;
+  var messagesEl = _ctx.messagesEl;
+  requestAnimationFrame(function () {
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+  });
+}
+
+export function getMsgTime() {
+  var _ts = store.getState().currentMsgTs;
+  var d = _ts ? new Date(_ts) : new Date();
+  var time = String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
+  var now = new Date();
+  if (d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth() && d.getDate() === now.getDate()) {
+    return time;
+  }
+  return (d.getMonth() + 1) + "/" + d.getDate() + " " + time;
+}
+
+export function shouldGroupMessage(senderClass) {
+  var _s = store.getState();
+  if (_s.replayingHistory && !_s.currentMsgTs) return false;
+  var prev = _ctx.messagesEl.lastElementChild;
+  if (!prev || !prev.classList.contains(senderClass)) return false;
+  var prevTime = prev.querySelector(".dm-bubble-time");
+  if (!prevTime) return false;
+  return prevTime.textContent === getMsgTime();
+}
+
+export function ensureAssistantBlock() {
+  var _el = store.getState().currentMsgEl;
+  if (!_el) {
+    _el = document.createElement("div");
+    _el.className = "msg-assistant";
+    _el.dataset.turn = turnCounter;
+
+    var grouped = shouldGroupMessage("msg-assistant");
+    if (grouped) _el.classList.add("grouped");
+
+    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 : _ctx.CLAUDE_CODE_AVATAR;
+    _el.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 ? ((_ctx.getDmTargetUser() && _ctx.getDmTargetUser().displayName) || "Mate") : "Claude Code";
+    header.appendChild(nameSpan);
+    var timeSpan = document.createElement("span");
+    timeSpan.className = "dm-bubble-time";
+    timeSpan.textContent = getMsgTime();
+    header.appendChild(timeSpan);
+    contentWrap.appendChild(header);
+
+    var mdDiv = document.createElement("div");
+    mdDiv.className = "md-content";
+    mdDiv.dir = "auto";
+    contentWrap.appendChild(mdDiv);
+    _el.appendChild(contentWrap);
+    addToMessages(_el);
+    store.setState({ currentMsgEl: _el, currentFullText: "" });
+  }
+  return _el;
+}
+
+export function addCopyHandler(msgEl, rawText) {
+  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";
+  msgEl.appendChild(hint);
+
+  function reset() {
+    primed = false;
+    msgEl.classList.remove("copy-primed", "copy-done");
+    hint.textContent = (isTouchDevice ? "Tap" : "Click") + " to grab this";
+  }
+
+  msgEl.addEventListener("click", function (e) {
+    if (e.target.closest("a, pre, code")) return;
+    var sel = window.getSelection();
+    if (sel && sel.toString().length > 0) return;
+
+    if (!primed) {
+      primed = true;
+      msgEl.classList.add("copy-primed");
+      hint.textContent = isTouchDevice ? "Tap again to grab" : "Click again to grab";
+      clearTimeout(resetTimer);
+      resetTimer = setTimeout(reset, 3000);
+    } else {
+      clearTimeout(resetTimer);
+      _ctx.copyToClipboard(rawText).then(function () {
+        msgEl.classList.remove("copy-primed");
+        msgEl.classList.add("copy-done");
+        hint.textContent = "Grabbed!";
+        resetTimer = setTimeout(reset, 1500);
+      });
+    }
+  });
+
+  document.addEventListener("click", function (e) {
+    if (primed && !msgEl.contains(e.target)) reset();
+  });
+}
+
+export function appendDelta(text) {
+  ensureAssistantBlock();
+  streamBuffer += text;
+  if (!streamDrainTimer) {
+    streamDrainTimer = requestAnimationFrame(drainStreamTick);
+  }
+}
+
+function drainStreamTick() {
+  streamDrainTimer = null;
+  var _s = store.getState();
+  if (!_s.currentMsgEl || streamBuffer.length === 0) return;
+
+  var n;
+  var len = streamBuffer.length;
+  if (len > 200) { n = Math.ceil(len / 4); }
+  else if (len > 80) { n = 8; }
+  else if (len > 30) { n = 5; }
+  else if (len > 10) { n = 2; }
+  else { n = 1; }
+
+  var chunk = streamBuffer.slice(0, n);
+  streamBuffer = streamBuffer.slice(n);
+  var newText = _s.currentFullText + chunk;
+  store.setState({ currentFullText: newText });
+
+  var contentEl = _s.currentMsgEl.querySelector(".md-content");
+  contentEl.innerHTML = _ctx.renderMarkdown(newText);
+
+  if (highlightTimer) clearTimeout(highlightTimer);
+  highlightTimer = setTimeout(function () {
+    _ctx.highlightCodeBlocks(contentEl);
+  }, 150);
+
+  scrollToBottom();
+
+  if (streamBuffer.length > 0) {
+    streamDrainTimer = requestAnimationFrame(drainStreamTick);
+  }
+}
+
+export function flushStreamBuffer() {
+  if (streamDrainTimer) { cancelAnimationFrame(streamDrainTimer); streamDrainTimer = null; }
+  if (streamBuffer.length > 0) {
+    store.setState({ currentFullText: store.getState().currentFullText + streamBuffer });
+    streamBuffer = "";
+  }
+  var _s = store.getState();
+  if (_s.currentMsgEl) {
+    var contentEl = _s.currentMsgEl.querySelector(".md-content");
+    if (contentEl) {
+      contentEl.innerHTML = _ctx.renderMarkdown(_s.currentFullText);
+      _ctx.highlightCodeBlocks(contentEl);
+    }
+  }
+}
+
+export function finalizeAssistantBlock() {
+  flushStreamBuffer();
+  var _s = store.getState();
+  if (_s.currentMsgEl) {
+    var contentEl = _s.currentMsgEl.querySelector(".md-content");
+    if (contentEl) {
+      _ctx.highlightCodeBlocks(contentEl);
+      _ctx.renderMermaidBlocks(contentEl);
+    }
+    if (_s.currentFullText) {
+      addCopyHandler(_s.currentMsgEl, _s.currentFullText);
+    }
+    _ctx.closeToolGroup();
+  }
+  store.setState({ currentMsgEl: null, currentFullText: "" });
+}
+
+export function addUserMessage(text, images, pastes, fromUserId, fromUserName) {
+  if (!text && (!images || images.length === 0) && (!pastes || pastes.length === 0)) return;
+  var isOtherUser = fromUserId && fromUserId !== _ctx.myUserId;
+  var div = document.createElement("div");
+  div.className = "msg-user" + (isOtherUser ? " msg-user-other" : "");
+  div.dataset.turn = ++turnCounter;
+  if (shouldGroupMessage("msg-user")) div.classList.add("grouped");
+  var bubble = document.createElement("div");
+  bubble.className = "bubble";
+  bubble.dir = "auto";
+
+  if (images && images.length > 0) {
+    var imgRow = document.createElement("div");
+    imgRow.className = "bubble-images";
+    for (var i = 0; i < images.length; i++) {
+      var img = document.createElement("img");
+      if (images[i].url) {
+        img.src = images[i].url;
+      } else if (images[i].data) {
+        img.src = "data:" + images[i].mediaType + ";base64," + images[i].data;
+      }
+      img.loading = "lazy";
+      img.className = "bubble-img";
+      img.addEventListener("click", function () { _ctx.showImageModal(this.src); });
+      img.addEventListener("error", function () {
+        var placeholder = document.createElement("div");
+        placeholder.className = "bubble-img-expired";
+        placeholder.textContent = "Image deleted";
+        this.parentNode.replaceChild(placeholder, this);
+      });
+      imgRow.appendChild(img);
+    }
+    bubble.appendChild(imgRow);
+  }
+
+  if (pastes && pastes.length > 0) {
+    var pasteRow = document.createElement("div");
+    pasteRow.className = "bubble-pastes";
+    for (var p = 0; p < pastes.length; p++) {
+      (function (pasteText) {
+        var chip = document.createElement("div");
+        chip.className = "bubble-paste";
+        var preview = pasteText.substring(0, 60).replace(/\n/g, " ");
+        if (pasteText.length > 60) preview += "...";
+        chip.innerHTML = '<span class="bubble-paste-preview">' + _ctx.escapeHtml(preview) + '</span><span class="bubble-paste-label">PASTED</span>';
+        chip.addEventListener("click", function (e) {
+          e.stopPropagation();
+          _ctx.showPasteModal(pasteText);
+        });
+        pasteRow.appendChild(chip);
+      })(pastes[p]);
+    }
+    bubble.appendChild(pasteRow);
+  }
+
+  if (text) {
+    var textEl = document.createElement("span");
+    textEl.textContent = text;
+    bubble.appendChild(textEl);
+  }
+
+
+  var _targetUser;
+  var _displayName;
+  if (isOtherUser) {
+    _targetUser = _ctx.cachedAllUsers.find(function (u) { return u.id === fromUserId; });
+    _displayName = fromUserName || (_targetUser && (_targetUser.displayName || _targetUser.username)) || "User";
+  } else {
+    _targetUser = _ctx.cachedAllUsers.find(function (u) { return u.id === _ctx.myUserId; });
+    if (!_targetUser) {
+      try { _targetUser = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch(e) {}
+    }
+    _displayName = document.body.dataset.myDisplayName || "";
+    if (!_displayName) {
+      _displayName = (_targetUser && (_targetUser.displayName || _targetUser.username)) || "Me";
+    }
+  }
+
+  var avi = document.createElement("img");
+  avi.className = "dm-bubble-avatar" + (isOtherUser ? " dm-bubble-avatar-other" : " dm-bubble-avatar-me");
+  avi.src = isOtherUser
+    ? _ctx.userAvatarUrl(_targetUser || { id: fromUserId }, 36)
+    : (document.body.dataset.myAvatarUrl || _ctx.userAvatarUrl(_targetUser || { id: _ctx.myUserId }, 36));
+  div.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 = _displayName;
+  header.appendChild(nameSpan);
+  var timeSpan = document.createElement("span");
+  timeSpan.className = "dm-bubble-time";
+  timeSpan.textContent = getMsgTime();
+  header.appendChild(timeSpan);
+  contentWrap.appendChild(header);
+  contentWrap.appendChild(bubble);
+  div.appendChild(contentWrap);
+
+  var actions = document.createElement("div");
+  actions.className = "msg-actions";
+  actions.innerHTML =
+    '<span class="msg-action-time">' + getMsgTime() + '</span>' +
+    '<button class="msg-action-btn msg-action-copy" type="button" title="Copy">' + _ctx.iconHtml("copy") + '</button>' +
+    '<button class="msg-action-btn msg-action-fork" type="button" title="Fork">' + _ctx.iconHtml("git-branch") + '</button>' +
+    '<button class="msg-action-btn msg-action-rewind msg-user-rewind-btn" type="button" title="Rewind">' + _ctx.iconHtml("rotate-ccw") + '</button>' +
+    '<button class="msg-action-btn msg-action-hidden msg-action-edit" type="button" title="Edit">' + _ctx.iconHtml("pencil") + '</button>';
+  div.appendChild(actions);
+
+  actions.querySelector(".msg-action-copy").addEventListener("click", function () {
+    var self = this;
+    _ctx.copyToClipboard(text || "");
+    self.innerHTML = _ctx.iconHtml("check");
+    _ctx.refreshIcons();
+    setTimeout(function () { self.innerHTML = _ctx.iconHtml("copy"); _ctx.refreshIcons(); }, 1200);
+  });
+
+  addToMessages(div);
+  _ctx.refreshIcons();
+  forceScrollToBottom();
+}
+
+export function addSystemMessage(text, isError) {
+  var div = document.createElement("div");
+  div.className = "sys-msg" + (isError ? " error" : "");
+  div.innerHTML = '<span class="sys-text"></span>';
+  div.querySelector(".sys-text").textContent = text;
+  addToMessages(div);
+  scrollToBottom();
+}
+
+export function addConflictMessage(msg) {
+  var div = document.createElement("div");
+  div.className = "conflict-msg";
+  var header = document.createElement("div");
+  header.className = "conflict-header";
+  header.textContent = msg.text || "Another Claude Code process is already running.";
+  div.appendChild(header);
+
+  var hint = document.createElement("div");
+  hint.className = "conflict-hint";
+  hint.textContent = "Kill the conflicting process to continue, or use the existing Claude Code session.";
+  div.appendChild(hint);
+
+  for (var i = 0; i < msg.processes.length; i++) {
+    var p = msg.processes[i];
+    var row = document.createElement("div");
+    row.className = "conflict-process";
+
+    var info = document.createElement("span");
+    info.className = "conflict-pid";
+    info.textContent = "PID " + p.pid;
+    row.appendChild(info);
+
+    var cmd = document.createElement("code");
+    cmd.className = "conflict-cmd";
+    cmd.textContent = p.command.length > 80 ? p.command.substring(0, 80) + "..." : p.command;
+    cmd.title = p.command;
+    row.appendChild(cmd);
+
+    var killBtn = document.createElement("button");
+    killBtn.className = "conflict-kill-btn";
+    killBtn.textContent = "Kill Process";
+    killBtn.setAttribute("data-pid", p.pid);
+    killBtn.addEventListener("click", function() {
+      var pid = parseInt(this.getAttribute("data-pid"), 10);
+      _ctx.getWs().send(JSON.stringify({ type: "kill_process", pid: pid }));
+      this.disabled = true;
+      this.textContent = "Killing...";
+    });
+    row.appendChild(killBtn);
+    div.appendChild(row);
+  }
+
+  addToMessages(div);
+  scrollToBottom();
+}
+
+export function addContextOverflowMessage(msg) {
+  var div = document.createElement("div");
+  div.className = "context-overflow-msg";
+
+  var header = document.createElement("div");
+  header.className = "context-overflow-header";
+  header.textContent = msg.text || "Conversation too long to continue.";
+  div.appendChild(header);
+
+  var hint = document.createElement("div");
+  hint.className = "context-overflow-hint";
+  hint.textContent = "The conversation has exceeded the model's context limit. Please start a new conversation to continue.";
+  div.appendChild(hint);
+
+  var btn = document.createElement("button");
+  btn.className = "context-overflow-btn";
+  btn.textContent = "New Conversation";
+  btn.addEventListener("click", function() {
+    _ctx.getWs().send(JSON.stringify({ type: "new_session" }));
+  });
+  div.appendChild(btn);
+
+  addToMessages(div);
+  scrollToBottom();
+}
+
+export function addAuthRequiredMessage(msg) {
+  var div = document.createElement("div");
+  div.className = "auth-required-msg";
+
+  var header = document.createElement("div");
+  header.className = "auth-required-header";
+  header.textContent = msg.text || "Claude Code is not logged in.";
+  div.appendChild(header);
+
+  var hint = document.createElement("div");
+  hint.className = "auth-required-hint";
+
+  if (msg.canAutoLogin) {
+    if (msg.linuxUser) {
+      hint.textContent = "Opening a terminal as " + msg.linuxUser + " to log in...";
+    } else {
+      hint.textContent = "Opening a terminal to log in...";
+    }
+    div.appendChild(hint);
+
+    var guide = document.createElement("div");
+    guide.className = "auth-required-guide";
+    guide.textContent = "When a login URL appears in the terminal, click it to open in your browser. Do not press 'c' as it will try to open the browser on the server.";
+    div.appendChild(guide);
+
+    var sessionHint = document.createElement("div");
+    sessionHint.className = "auth-required-guide";
+    sessionHint.textContent = "After logging in, start a new session to continue.";
+    div.appendChild(sessionHint);
+
+    var loginBtn = document.createElement("button");
+    loginBtn.className = "auth-required-btn";
+    loginBtn.textContent = "Open terminal & log in";
+    loginBtn.addEventListener("click", function () {
+      _ctx.setPendingTermCommand("claude\n");
+      _ctx.getWs().send(JSON.stringify({ type: "term_create", cols: 80, rows: 24 }));
+      _ctx.openTerminal();
+    });
+    div.appendChild(loginBtn);
+
+    addToMessages(div);
+    scrollToBottom();
+
+    var inputArea = document.getElementById("input-area");
+    if (inputArea) inputArea.classList.add("hidden");
+
+    if (!store.getState().replayingHistory) {
+      _ctx.setPendingTermCommand("claude\n");
+      _ctx.getWs().send(JSON.stringify({ type: "term_create", cols: 80, rows: 24 }));
+      _ctx.openTerminal();
+    }
+  } else {
+    hint.textContent = "Please ask an administrator to log in to Claude Code.";
+    div.appendChild(hint);
+    addToMessages(div);
+    scrollToBottom();
+
+    _ctx.inputEl.disabled = true;
+    _ctx.inputEl.placeholder = "Login required. Start a new session after logging in.";
+    _ctx.sendBtn.disabled = true;
+  }
+}
+
+// --- Pre-thinking (instant dots before server responds) ---
+
+export function showClaudePreThinking() {
+  if (_ctx.getChatLayout() !== "channel") return;
+  var claudeAvatar = _ctx.CLAUDE_CODE_AVATAR;
+  doShowMatePreThinking("Claude Code", claudeAvatar);
+}
+
+export function showMatePreThinking() {
+  removeMatePreThinking();
+  var mateName = _ctx.getDmTargetUser() ? (_ctx.getDmTargetUser().displayName || "Mate") : "Mate";
+  var mateAvatar = document.body.dataset.mateAvatarUrl || "";
+  doShowMatePreThinking(mateName, mateAvatar);
+}
+
+function doShowMatePreThinking(mateName, mateAvatar) {
+  var _el = document.createElement("div");
+  _el.className = "thinking-item mate-thinking mate-pre-thinking";
+  _el.innerHTML =
+    '<img class="dm-bubble-avatar dm-bubble-avatar-mate" src="' + _ctx.escapeHtml(mateAvatar) + '" alt="" style="display:block">' +
+    '<div class="dm-bubble-content">' +
+    '<div class="dm-bubble-header"><span class="dm-bubble-name">' + _ctx.escapeHtml(mateName) + '</span></div>' +
+    '<div class="mate-thinking-dots"><span></span><span></span><span></span></div>' +
+    '</div>';
+  store.setState({ matePreThinkingEl: _el });
+  if (activityEl && activityEl.parentNode) {
+    activityEl.parentNode.insertBefore(_el, activityEl);
+  } else {
+    addToMessages(_el);
+  }
+  _ctx.refreshIcons();
+  scrollToBottom();
+}
+
+export function removeMatePreThinking() {
+  if (matePreThinkingTimer) {
+    clearTimeout(matePreThinkingTimer);
+    matePreThinkingTimer = null;
+  }
+  var _el = store.getState().matePreThinkingEl;
+  if (_el) {
+    _el.remove();
+    store.setState({ matePreThinkingEl: null });
+  }
+}
+
+// --- Prompt suggestion chips ---
+
+export function showSuggestionChips(suggestion) {
+  if (!suggestion || _ctx.getProcessing()) return;
+  _ctx.suggestionChipsEl.innerHTML = "";
+  var chip = document.createElement("button");
+  chip.className = "suggestion-chip";
+  chip.innerHTML = _ctx.iconHtml("sparkles") +
+    '<span class="suggestion-chip-text">' + _ctx.escapeHtml(suggestion) + '</span>';
+  chip.addEventListener("click", function () {
+    _ctx.inputEl.value = suggestion;
+    hideSuggestionChips();
+    _ctx.sendMessage();
+  });
+  _ctx.suggestionChipsEl.appendChild(chip);
+  _ctx.suggestionChipsEl.classList.remove("hidden");
+  _ctx.refreshIcons();
+  var messagesEl = _ctx.messagesEl;
+  requestAnimationFrame(function () {
+    var chipHeight = _ctx.suggestionChipsEl.offsetHeight || 0;
+    if (chipHeight > 0) {
+      messagesEl.style.paddingBottom = chipHeight + "px";
+      scrollToBottom();
+    }
+  });
+}
+
+export function hideSuggestionChips() {
+  _ctx.suggestionChipsEl.innerHTML = "";
+  _ctx.suggestionChipsEl.classList.add("hidden");
+  _ctx.messagesEl.style.paddingBottom = "";
+}