clay-server 2.31.0 → 2.32.0-beta.2

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

@@ -2,8 +2,31 @@
 // Extracted from app.js (PR-28)
 
 import { store } from './store.js';
-
-var _ctx = null;
+import { getWs } from './ws-ref.js';
+import { getMessagesEl, getInputEl, getSendBtn } from './dom-refs.js';
+import { escapeHtml, copyToClipboard } from './utils.js';
+import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks } from './markdown.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { openTerminal } from './terminal.js';
+import { userAvatarUrl } from './avatar.js';
+import { closeToolGroup } from './tools.js';
+import { showImageModal, showPasteModal } from './app-misc.js';
+import { sendMessage } from './input.js';
+import { getChatLayout } from './theme.js';
+import { getScheduledMsgEl } from './app-rate-limit.js';
+
+export var VENDOR_AVATARS = {
+  claude: "/claude-code-avatar.png",
+  codex: "/codex-avatar.png",
+  gemini: "/claude-code-avatar.png",
+};
+export var VENDOR_NAMES = {
+  claude: "Claude Code",
+  codex: "Codex",
+  gemini: "Gemini",
+};
+var NEW_MSG_BTN_DEFAULT = "\u2193 Latest";
+var NEW_MSG_BTN_ACTIVITY = "\u2193 New activity";
 
 // --- Module-owned state (not in store) ---
 var turnCounter = 0;
@@ -16,8 +39,16 @@ var streamDrainTimer = null;
 var isUserScrolledUp = false;
 var scrollThreshold = 150;
 
-export function initRendering(ctx) {
-  _ctx = ctx;
+export function initRendering() {
+  // Update input placeholder when vendor changes
+  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) + "...";
+      }
+    }
+  });
 }
 
 // --- State accessors (module-local, not in store) ---
@@ -33,10 +64,10 @@ export function setIsUserScrolledUp(v) { isUserScrolledUp = v; }
 // --- Rendering functions ---
 
 export function addToMessages(el) {
-  var messagesEl = _ctx.messagesEl;
+  var messagesEl = getMessagesEl();
   if (prependAnchor) messagesEl.insertBefore(el, prependAnchor);
   else messagesEl.appendChild(el);
-  var _sme = _ctx.getScheduledMsgEl();
+  var _sme = getScheduledMsgEl();
   if (_sme && el !== _sme && _sme.parentNode === messagesEl) {
     messagesEl.appendChild(_sme);
   }
@@ -44,12 +75,13 @@ export function addToMessages(el) {
 
 export function scrollToBottom() {
   if (prependAnchor) return;
+  var newMsgBtn = document.getElementById("new-msg-btn");
   if (isUserScrolledUp) {
-    _ctx.newMsgBtn.textContent = _ctx.newMsgBtnActivity;
-    _ctx.newMsgBtn.classList.remove("hidden");
+    newMsgBtn.textContent = NEW_MSG_BTN_ACTIVITY;
+    newMsgBtn.classList.remove("hidden");
     return;
   }
-  var messagesEl = _ctx.messagesEl;
+  var messagesEl = getMessagesEl();
   requestAnimationFrame(function () {
     messagesEl.scrollTop = messagesEl.scrollHeight;
   });
@@ -58,16 +90,17 @@ export function scrollToBottom() {
 export function forceScrollToBottom() {
   if (prependAnchor) return;
   isUserScrolledUp = false;
-  _ctx.newMsgBtn.classList.add("hidden");
-  _ctx.newMsgBtn.textContent = _ctx.newMsgBtnDefault;
-  var messagesEl = _ctx.messagesEl;
+  var newMsgBtn = document.getElementById("new-msg-btn");
+  newMsgBtn.classList.add("hidden");
+  newMsgBtn.textContent = NEW_MSG_BTN_DEFAULT;
+  var messagesEl = getMessagesEl();
   requestAnimationFrame(function () {
     messagesEl.scrollTop = messagesEl.scrollHeight;
   });
 }
 
 export function getMsgTime() {
-  var _ts = store.getState().currentMsgTs;
+  var _ts = store.get('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();
@@ -78,9 +111,9 @@ export function getMsgTime() {
 }
 
 export function shouldGroupMessage(senderClass) {
-  var _s = store.getState();
+  var _s = store.snap();
   if (_s.replayingHistory && !_s.currentMsgTs) return false;
-  var prev = _ctx.messagesEl.lastElementChild;
+  var prev = getMessagesEl().lastElementChild;
   if (!prev || !prev.classList.contains(senderClass)) return false;
   var prevTime = prev.querySelector(".dm-bubble-time");
   if (!prevTime) return false;
@@ -88,7 +121,7 @@ export function shouldGroupMessage(senderClass) {
 }
 
 export function ensureAssistantBlock() {
-  var _el = store.getState().currentMsgEl;
+  var _el = store.get('currentMsgEl');
   if (!_el) {
     _el = document.createElement("div");
     _el.className = "msg-assistant";
@@ -98,9 +131,10 @@ export function ensureAssistantBlock() {
     if (grouped) _el.classList.add("grouped");
 
     var _isDm2 = document.body.classList.contains("mate-dm-active") && document.body.dataset.mateAvatarUrl;
+    var vendor = store.get('currentVendor') || "claude";
     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;
+    avi.src = _isDm2 ? document.body.dataset.mateAvatarUrl : (VENDOR_AVATARS[vendor] || VENDOR_AVATARS.claude);
     _el.appendChild(avi);
 
     var contentWrap = document.createElement("div");
@@ -110,7 +144,8 @@ export function ensureAssistantBlock() {
     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";
+    var dmTarget = store.get('dmTargetUser');
+    nameSpan.textContent = _isDm2 ? ((dmTarget && dmTarget.displayName) || "Mate") : (VENDOR_NAMES[vendor] || VENDOR_NAMES.claude);
     header.appendChild(nameSpan);
     var timeSpan = document.createElement("span");
     timeSpan.className = "dm-bubble-time";
@@ -124,7 +159,7 @@ export function ensureAssistantBlock() {
     contentWrap.appendChild(mdDiv);
     _el.appendChild(contentWrap);
     addToMessages(_el);
-    store.setState({ currentMsgEl: _el, currentFullText: "" });
+    store.set({ currentMsgEl: _el, currentFullText: "" });
   }
   return _el;
 }
@@ -159,7 +194,7 @@ export function addCopyHandler(msgEl, rawText) {
       resetTimer = setTimeout(reset, 3000);
     } else {
       clearTimeout(resetTimer);
-      _ctx.copyToClipboard(rawText).then(function () {
+      copyToClipboard(rawText).then(function () {
         msgEl.classList.remove("copy-primed");
         msgEl.classList.add("copy-done");
         hint.textContent = "Grabbed!";
@@ -183,7 +218,7 @@ export function appendDelta(text) {
 
 function drainStreamTick() {
   streamDrainTimer = null;
-  var _s = store.getState();
+  var _s = store.snap();
   if (!_s.currentMsgEl || streamBuffer.length === 0) return;
 
   var n;
@@ -197,14 +232,14 @@ function drainStreamTick() {
   var chunk = streamBuffer.slice(0, n);
   streamBuffer = streamBuffer.slice(n);
   var newText = _s.currentFullText + chunk;
-  store.setState({ currentFullText: newText });
+  store.set({ currentFullText: newText });
 
   var contentEl = _s.currentMsgEl.querySelector(".md-content");
-  contentEl.innerHTML = _ctx.renderMarkdown(newText);
+  contentEl.innerHTML = renderMarkdown(newText);
 
   if (highlightTimer) clearTimeout(highlightTimer);
   highlightTimer = setTimeout(function () {
-    _ctx.highlightCodeBlocks(contentEl);
+    highlightCodeBlocks(contentEl);
   }, 150);
 
   scrollToBottom();
@@ -217,39 +252,40 @@ function drainStreamTick() {
 export function flushStreamBuffer() {
   if (streamDrainTimer) { cancelAnimationFrame(streamDrainTimer); streamDrainTimer = null; }
   if (streamBuffer.length > 0) {
-    store.setState({ currentFullText: store.getState().currentFullText + streamBuffer });
+    store.set({ currentFullText: store.get('currentFullText') + streamBuffer });
     streamBuffer = "";
   }
-  var _s = store.getState();
+  var _s = store.snap();
   if (_s.currentMsgEl) {
     var contentEl = _s.currentMsgEl.querySelector(".md-content");
     if (contentEl) {
-      contentEl.innerHTML = _ctx.renderMarkdown(_s.currentFullText);
-      _ctx.highlightCodeBlocks(contentEl);
+      contentEl.innerHTML = renderMarkdown(_s.currentFullText);
+      highlightCodeBlocks(contentEl);
     }
   }
 }
 
 export function finalizeAssistantBlock() {
   flushStreamBuffer();
-  var _s = store.getState();
+  var _s = store.snap();
   if (_s.currentMsgEl) {
     var contentEl = _s.currentMsgEl.querySelector(".md-content");
     if (contentEl) {
-      _ctx.highlightCodeBlocks(contentEl);
-      _ctx.renderMermaidBlocks(contentEl);
+      highlightCodeBlocks(contentEl);
+      renderMermaidBlocks(contentEl);
     }
     if (_s.currentFullText) {
       addCopyHandler(_s.currentMsgEl, _s.currentFullText);
     }
-    _ctx.closeToolGroup();
+    closeToolGroup();
   }
-  store.setState({ currentMsgEl: null, currentFullText: "" });
+  store.set({ 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 myUserId = store.get('myUserId');
+  var isOtherUser = fromUserId && fromUserId !== myUserId;
   var div = document.createElement("div");
   div.className = "msg-user" + (isOtherUser ? " msg-user-other" : "");
   div.dataset.turn = ++turnCounter;
@@ -270,7 +306,7 @@ export function addUserMessage(text, images, pastes, fromUserId, fromUserName) {
       }
       img.loading = "lazy";
       img.className = "bubble-img";
-      img.addEventListener("click", function () { _ctx.showImageModal(this.src); });
+      img.addEventListener("click", function () { showImageModal(this.src); });
       img.addEventListener("error", function () {
         var placeholder = document.createElement("div");
         placeholder.className = "bubble-img-expired";
@@ -291,10 +327,10 @@ export function addUserMessage(text, images, pastes, fromUserId, fromUserName) {
         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.innerHTML = '<span class="bubble-paste-preview">' + escapeHtml(preview) + '</span><span class="bubble-paste-label">PASTED</span>';
         chip.addEventListener("click", function (e) {
           e.stopPropagation();
-          _ctx.showPasteModal(pasteText);
+          showPasteModal(pasteText);
         });
         pasteRow.appendChild(chip);
       })(pastes[p]);
@@ -309,13 +345,14 @@ export function addUserMessage(text, images, pastes, fromUserId, fromUserName) {
   }
 
 
+  var cachedAllUsers = store.get('cachedAllUsers');
   var _targetUser;
   var _displayName;
   if (isOtherUser) {
-    _targetUser = _ctx.cachedAllUsers.find(function (u) { return u.id === fromUserId; });
+    _targetUser = 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; });
+    _targetUser = cachedAllUsers.find(function (u) { return u.id === myUserId; });
     if (!_targetUser) {
       try { _targetUser = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch(e) {}
     }
@@ -328,8 +365,8 @@ export function addUserMessage(text, images, pastes, fromUserId, fromUserName) {
   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));
+    ? userAvatarUrl(_targetUser || { id: fromUserId }, 36)
+    : (document.body.dataset.myAvatarUrl || userAvatarUrl(_targetUser || { id: myUserId }, 36));
   div.appendChild(avi);
 
   var contentWrap = document.createElement("div");
@@ -353,22 +390,22 @@ export function addUserMessage(text, images, pastes, fromUserId, fromUserName) {
   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>';
+    '<button class="msg-action-btn msg-action-copy" type="button" title="Copy">' + iconHtml("copy") + '</button>' +
+    '<button class="msg-action-btn msg-action-fork" type="button" title="Fork">' + iconHtml("git-branch") + '</button>' +
+    (((store.get('vendorCapabilities') || {}).rewind !== false) ? '<button class="msg-action-btn msg-action-rewind msg-user-rewind-btn" type="button" title="Rewind">' + iconHtml("rotate-ccw") + '</button>' : '') +
+    '<button class="msg-action-btn msg-action-hidden msg-action-edit" type="button" title="Edit">' + 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);
+    copyToClipboard(text || "");
+    self.innerHTML = iconHtml("check");
+    refreshIcons();
+    setTimeout(function () { self.innerHTML = iconHtml("copy"); refreshIcons(); }, 1200);
   });
 
   addToMessages(div);
-  _ctx.refreshIcons();
+  refreshIcons();
   forceScrollToBottom();
 }
 
@@ -416,7 +453,7 @@ export function addConflictMessage(msg) {
     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 }));
+      getWs().send(JSON.stringify({ type: "kill_process", pid: pid }));
       this.disabled = true;
       this.textContent = "Killing...";
     });
@@ -446,7 +483,7 @@ export function addContextOverflowMessage(msg) {
   btn.className = "context-overflow-btn";
   btn.textContent = "New Conversation";
   btn.addEventListener("click", function() {
-    _ctx.getWs().send(JSON.stringify({ type: "new_session" }));
+    getWs().send(JSON.stringify({ type: "new_session" }));
   });
   div.appendChild(btn);
 
@@ -458,9 +495,13 @@ export function addAuthRequiredMessage(msg) {
   var div = document.createElement("div");
   div.className = "auth-required-msg";
 
+  var vendor = msg.vendor || "claude";
+  var loginCmd = msg.loginCommand || (vendor === "codex" ? "codex --login" : "claude login");
+  var vendorName = msg.text || "Claude Code is not logged in.";
+
   var header = document.createElement("div");
   header.className = "auth-required-header";
-  header.textContent = msg.text || "Claude Code is not logged in.";
+  header.textContent = vendorName;
   div.appendChild(header);
 
   var hint = document.createElement("div");
@@ -476,7 +517,11 @@ export function addAuthRequiredMessage(msg) {
 
     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.";
+    if (vendor === "codex") {
+      guide.textContent = "Run the login command in the terminal and follow the instructions to authenticate.";
+    } else {
+      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");
@@ -484,13 +529,14 @@ export function addAuthRequiredMessage(msg) {
     sessionHint.textContent = "After logging in, start a new session to continue.";
     div.appendChild(sessionHint);
 
+    var termCommand = loginCmd + "\n";
     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();
+      store.set({ pendingTermCommand: termCommand });
+      getWs().send(JSON.stringify({ type: "term_create", cols: 80, rows: 24 }));
+      openTerminal();
     });
     div.appendChild(loginBtn);
 
@@ -500,34 +546,39 @@ export function addAuthRequiredMessage(msg) {
     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();
+    if (!store.get('replayingHistory')) {
+      store.set({ pendingTermCommand: termCommand });
+      getWs().send(JSON.stringify({ type: "term_create", cols: 80, rows: 24 }));
+      openTerminal();
     }
   } else {
-    hint.textContent = "Please ask an administrator to log in to Claude Code.";
+    var adminVendorName = vendor.charAt(0).toUpperCase() + vendor.slice(1);
+    hint.textContent = "Please ask an administrator to log in to " + adminVendorName + ".";
     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;
+    var inputEl = getInputEl();
+    inputEl.disabled = true;
+    inputEl.placeholder = "Login required. Start a new session after logging in.";
+    getSendBtn().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);
+  if (getChatLayout() !== "channel") return;
+  var vendor = store.get('currentVendor') || "claude";
+  var vendorAvatar = VENDOR_AVATARS[vendor] || VENDOR_AVATARS.claude;
+  var vendorName = VENDOR_NAMES[vendor] || VENDOR_NAMES.claude;
+  doShowMatePreThinking(vendorName, vendorAvatar);
 }
 
 export function showMatePreThinking() {
   removeMatePreThinking();
-  var mateName = _ctx.getDmTargetUser() ? (_ctx.getDmTargetUser().displayName || "Mate") : "Mate";
+  var dmTarget = store.get('dmTargetUser');
+  var mateName = dmTarget ? (dmTarget.displayName || "Mate") : "Mate";
   var mateAvatar = document.body.dataset.mateAvatarUrl || "";
   doShowMatePreThinking(mateName, mateAvatar);
 }
@@ -536,18 +587,18 @@ 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">' +
+    '<img class="dm-bubble-avatar dm-bubble-avatar-mate" src="' + 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="dm-bubble-header"><span class="dm-bubble-name">' + escapeHtml(mateName) + '</span></div>' +
     '<div class="mate-thinking-dots"><span></span><span></span><span></span></div>' +
     '</div>';
-  store.setState({ matePreThinkingEl: _el });
+  store.set({ matePreThinkingEl: _el });
   if (activityEl && activityEl.parentNode) {
     activityEl.parentNode.insertBefore(_el, activityEl);
   } else {
     addToMessages(_el);
   }
-  _ctx.refreshIcons();
+  refreshIcons();
   scrollToBottom();
 }
 
@@ -556,42 +607,39 @@ export function removeMatePreThinking() {
     clearTimeout(matePreThinkingTimer);
     matePreThinkingTimer = null;
   }
-  var _el = store.getState().matePreThinkingEl;
+  var _el = store.get('matePreThinkingEl');
   if (_el) {
     _el.remove();
-    store.setState({ matePreThinkingEl: null });
+    store.set({ matePreThinkingEl: null });
   }
 }
 
-// --- Prompt suggestion chips ---
+// --- Ghost suggestion (prompt recommendation as ghost text) ---
+
+var _ghostSuggestionText = "";
+
+export function getGhostSuggestion() {
+  return _ghostSuggestionText;
+}
 
 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();
-    }
-  });
+  if (!suggestion || store.get('processing')) return;
+  var inputEl = getInputEl();
+  // Only show ghost text if input is empty
+  if (inputEl && inputEl.value.trim()) return;
+  _ghostSuggestionText = suggestion;
+  var ghostEl = document.getElementById("ghost-suggestion");
+  if (!ghostEl) return;
+  ghostEl.innerHTML = escapeHtml(suggestion) +
+    ' <span class="ghost-hint"><kbd>Enter</kbd> to send</span>';
+  ghostEl.classList.remove("hidden");
 }
 
 export function hideSuggestionChips() {
-  _ctx.suggestionChipsEl.innerHTML = "";
-  _ctx.suggestionChipsEl.classList.add("hidden");
-  _ctx.messagesEl.style.paddingBottom = "";
+  _ghostSuggestionText = "";
+  var ghostEl = document.getElementById("ghost-suggestion");
+  if (ghostEl) {
+    ghostEl.innerHTML = "";
+    ghostEl.classList.add("hidden");
+  }
 }

package/lib/public/modules/app-skills-install.js

@@ -54,7 +54,7 @@ export function initSkillInstall() {
     for (var j = 0; j < pendingSkillInstalls.length; j++) {
       var s = pendingSkillInstalls[j];
       if (s.installed) continue;
-      fetch(store.getState().basePath + "api/install-skill", {
+      fetch(store.get('basePath') + "api/install-skill", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ url: s.url, skill: s.name, scope: s.scope || "global" }),
@@ -151,9 +151,9 @@ export function handleSkillInstallWs(msg) {
     if (pendingSkillInstalls[i].name === msg.skill) {
       if (msg.success) {
         pendingSkillInstalls[i].installed = true;
-        var _kis = Object.assign({}, store.getState().knownInstalledSkills);
+        var _kis = Object.assign({}, store.get('knownInstalledSkills'));
         _kis[msg.skill] = true;
-        store.setState({ knownInstalledSkills: _kis });
+        store.set({ knownInstalledSkills: _kis });
       } else {
         skillInstalling = false;
         skillInstallOk.disabled = false;
@@ -189,7 +189,7 @@ export function handleSkillInstallWs(msg) {
 }
 
 export function requireSkills(opts, cb) {
-  fetch(store.getState().basePath + "api/check-skill-updates", {
+  fetch(store.get('basePath') + "api/check-skill-updates", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ skills: opts.skills }),

package/lib/public/modules/context-sources.js

@@ -181,51 +181,22 @@ function removeSource(sourceId) {
 }
 
 function renderChips() {
-  var container = document.getElementById("context-sources-chips");
-  container.innerHTML = "";
-
-  for (var id of activeSourceIds) {
-    var chip = document.createElement("div");
-    chip.className = "context-chip";
-
-    var label = getSourceLabel(id);
-    var iconName = getSourceIcon(id);
-
-    var labelEl = document.createElement("span");
-    labelEl.className = "context-chip-label";
-    labelEl.innerHTML =
-      '<i data-lucide="' + iconName + '"></i>' +
-      '<span>' + escapeHtml(label) + '</span>';
-    chip.appendChild(labelEl);
-
-    var removeBtn = document.createElement("button");
-    removeBtn.type = "button";
-    removeBtn.className = "context-chip-remove";
-    removeBtn.title = "Remove";
-    removeBtn.innerHTML = '<i data-lucide="minus"></i>';
-    removeBtn.setAttribute("data-source-id", id);
-    removeBtn.addEventListener("click", function(e) {
-      e.stopPropagation();
-      removeSource(this.getAttribute("data-source-id"));
-      if (typeof lucide !== "undefined") lucide.createIcons();
-    });
-
-    chip.appendChild(removeBtn);
-    container.appendChild(chip);
-  }
-
-  // Update add button label
+  // Update add button — show badge count when sources are active
   var addBtn = document.getElementById("context-sources-add");
-  var labelSpan = addBtn.querySelector("span");
+  var labelSpan = addBtn.querySelector(".ctx-label");
+  var existingBadge = addBtn.querySelector(".ctx-badge");
   if (activeSourceIds.size > 0) {
-    labelSpan.textContent = "";
-    labelSpan.style.display = "none";
+    if (labelSpan) labelSpan.style.display = "none";
+    if (!existingBadge) {
+      existingBadge = document.createElement("span");
+      existingBadge.className = "ctx-badge";
+      addBtn.appendChild(existingBadge);
+    }
+    existingBadge.textContent = activeSourceIds.size;
   } else {
-    labelSpan.textContent = "Context Sources";
-    labelSpan.style.display = "";
+    if (labelSpan) { labelSpan.style.display = ""; }
+    if (existingBadge) existingBadge.remove();
   }
-
-  if (typeof lucide !== "undefined") lucide.createIcons();
 }
 
 function renderPicker() {

package/lib/public/modules/dom-refs.js

@@ -0,0 +1,21 @@
+// dom-refs.js - Shared DOM element references
+// Lazy-cached getElementById lookups for elements used across multiple modules.
+// Same pattern as ws-ref.js: infrastructure singleton, not state.
+
+var _cache = {};
+
+function ref(id) {
+  if (!_cache[id]) _cache[id] = document.getElementById(id);
+  return _cache[id];
+}
+
+export function getMessagesEl() { return ref("messages"); }
+export function getInputEl() { return ref("input"); }
+export function getSendBtn() { return ref("send-btn"); }
+export function getSessionListEl() { return ref("session-list"); }
+
+export function getStatusDot() {
+  return document.querySelector("#icon-strip-projects .icon-strip-item.active .icon-strip-status") ||
+         document.querySelector("#icon-strip-projects .icon-strip-wt-item.active .icon-strip-status") ||
+         document.querySelector("#icon-strip-users .icon-strip-mate.active .icon-strip-status");
+}