clay-server 2.31.0 → 2.32.0-beta.2

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

@@ -2,8 +2,10 @@
 // Extracted from app.js (PR-34)
 
 import { refreshIcons } from './icons.js';
-
-var _ctx = null;
+import { store } from './store.js';
+import { getSendBtn, getStatusDot } from './dom-refs.js';
+import { onThemeChange } from './theme.js';
+import { getActivityEl, setActivityEl, addToMessages, scrollToBottom } from './app-rendering.js';
 
 // --- Module-owned state ---
 var faviconLink, faviconOrigHref, faviconCanvas, faviconCtx, faviconImg, faviconImgReady;
@@ -14,9 +16,7 @@ var ioTimer = null;
 var sessionIoTimers = {};
 var crossProjectBlinkTimer = null;
 
-export function initFavicon(ctx) {
-  _ctx = ctx;
-
+export function initFavicon() {
   faviconLink = document.querySelector('link[rel="icon"]');
   faviconCanvas = document.createElement("canvas");
   faviconCanvas.width = 32;
@@ -29,11 +29,11 @@ export function initFavicon(ctx) {
   (function () {
     faviconImg = new Image();
     faviconImg.onload = function () { faviconImgReady = true; };
-    faviconImg.src = _ctx.basePath + "favicon-banded.png";
+    faviconImg.src = (store.get('basePath') || "") + "favicon-banded.png";
   })();
 
   // Reset cached favicon href on theme change
-  _ctx.onThemeChange(function () { faviconOrigHref = null; });
+  onThemeChange(function () { faviconOrigHref = null; });
 }
 
 export function updateFavicon(bgColor) {
@@ -84,21 +84,22 @@ export function drawFaviconAnimFrame() {
 }
 
 export function setSendBtnMode(mode) {
+  var sendBtn = getSendBtn();
   if (mode === "stop") {
-    _ctx.sendBtn.disabled = false;
-    _ctx.sendBtn.classList.add("stop");
-    _ctx.sendBtn.innerHTML = '<i data-lucide="square"></i>';
+    sendBtn.disabled = false;
+    sendBtn.classList.add("stop");
+    sendBtn.innerHTML = '<i data-lucide="square"></i>';
   } else {
-    _ctx.sendBtn.disabled = false;
-    _ctx.sendBtn.classList.remove("stop");
-    _ctx.sendBtn.innerHTML = '<i data-lucide="arrow-up"></i>';
+    sendBtn.disabled = false;
+    sendBtn.classList.remove("stop");
+    sendBtn.innerHTML = '<i data-lucide="arrow-up"></i>';
   }
   refreshIcons();
 }
 
 export function blinkIO() {
-  if (!_ctx.connected) return;
-  var dot = _ctx.getStatusDot();
+  if (!store.get('connected')) return;
+  var dot = getStatusDot();
   if (dot) dot.classList.add("io");
   // Also blink the active session's processing dot in sidebar (project or mate)
   var sessionDot = document.querySelector(".session-item.active .session-processing") ||
@@ -114,17 +115,18 @@ export function blinkIO() {
   }
   // Mobile chat chip dot + mobile session dot
   var mobileChipDot = null;
-  if (_ctx.dmMode && _ctx.dmTargetUser && _ctx.dmTargetUser.isMate) {
-    mobileChipDot = document.querySelector('.mobile-chat-chip[data-mate-id="' + _ctx.dmTargetUser.id + '"] .mobile-chat-chip-dot');
+  var _s = store.snap();
+  if (_s.dmMode && _s.dmTargetUser && _s.dmTargetUser.isMate) {
+    mobileChipDot = document.querySelector('.mobile-chat-chip[data-mate-id="' + _s.dmTargetUser.id + '"] .mobile-chat-chip-dot');
   } else {
-    mobileChipDot = document.querySelector('.mobile-chat-chip[data-slug="' + _ctx.currentSlug + '"] .mobile-chat-chip-dot');
+    mobileChipDot = document.querySelector('.mobile-chat-chip[data-slug="' + _s.currentSlug + '"] .mobile-chat-chip-dot');
   }
   if (mobileChipDot) mobileChipDot.classList.add("io");
   var mobileSessionDot = document.querySelector('.mobile-session-item.active .mobile-session-dot');
   if (mobileSessionDot) mobileSessionDot.classList.add("io");
   clearTimeout(ioTimer);
   ioTimer = setTimeout(function () {
-    var d = _ctx.getStatusDot();
+    var d = getStatusDot();
     if (d) d.classList.remove("io");
     var sd = document.querySelector(".session-item.active .session-processing.io") ||
              document.querySelector(".mate-session-item.active .session-processing.io");
@@ -194,19 +196,19 @@ export function stopUrgentBlink() {
 
 export function setActivity(text) {
   if (text) {
-    if (!_ctx.getActivityEl()) {
+    if (!getActivityEl()) {
       var _actEl = document.createElement("div");
       _actEl.className = "activity-inline";
       _actEl.innerHTML =
         '<div class="mate-thinking-dots"><span></span><span></span><span></span></div>';
-      _ctx.setActivityEl(_actEl);
-      _ctx.addToMessages(_actEl);
+      setActivityEl(_actEl);
+      addToMessages(_actEl);
     }
-    _ctx.scrollToBottom();
+    scrollToBottom();
   } else {
-    if (_ctx.getActivityEl()) {
-      _ctx.getActivityEl().remove();
-      _ctx.setActivityEl(null);
+    if (getActivityEl()) {
+      getActivityEl().remove();
+      setActivityEl(null);
     }
   }
 }

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

@@ -3,41 +3,49 @@
 
 import { refreshIcons, iconHtml } from './icons.js';
 import { escapeHtml, copyToClipboard } from './utils.js';
-
-var _ctx = null;
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { getMessagesEl } from './dom-refs.js';
+import { getActivityEl, setActivityEl, getTurnCounter, setTurnCounter, getPrependAnchor, setPrependAnchor, finalizeAssistantBlock } from './app-rendering.js';
+import { processMessage } from './app-messages.js';
+import { saveToolState, resetToolState, restoreToolState } from './tools.js';
+import { getSessionUsage, setSessionUsage, getContextData, setContextData, updateContextPanel, updateUsagePanel } from './app-panels.js';
+import { onHistoryPrepended as onSessionSearchHistoryPrepended } from './session-search.js';
 
 // --- Module-owned state ---
 var sessionInfoPopover = null;
 var historySentinelObserver = null;
 
-export function initHeader(ctx) {
-  _ctx = ctx;
+export function initHeader() {
+  var headerRenameBtn = document.getElementById("header-rename-btn");
+  var headerTitleEl = document.getElementById("header-title");
+  var headerInfoBtn = document.getElementById("header-info-btn");
 
   // --- Header session rename ---
-  if (_ctx.headerRenameBtn) {
-    _ctx.headerRenameBtn.addEventListener("click", function () {
-      if (!_ctx.activeSessionId) return;
-      var currentText = _ctx.headerTitleEl.textContent;
+  if (headerRenameBtn) {
+    headerRenameBtn.addEventListener("click", function () {
+      if (!store.get('activeSessionId')) return;
+      var currentText = headerTitleEl.textContent;
       var input = document.createElement("input");
       input.type = "text";
       input.className = "header-rename-input";
       input.value = currentText;
-      _ctx.headerTitleEl.style.display = "none";
-      _ctx.headerRenameBtn.style.display = "none";
-      _ctx.headerTitleEl.parentNode.insertBefore(input, _ctx.headerTitleEl.nextSibling);
+      headerTitleEl.style.display = "none";
+      headerRenameBtn.style.display = "none";
+      headerTitleEl.parentNode.insertBefore(input, headerTitleEl.nextSibling);
       input.focus();
       input.select();
 
       function commit() {
         var newTitle = input.value.trim();
-        var ws = _ctx.getWs();
+        var ws = getWs();
         if (newTitle && newTitle !== currentText && ws && ws.readyState === 1) {
-          ws.send(JSON.stringify({ type: "rename_session", id: _ctx.activeSessionId, title: newTitle }));
-          _ctx.headerTitleEl.textContent = newTitle;
+          ws.send(JSON.stringify({ type: "rename_session", id: store.get('activeSessionId'), title: newTitle }));
+          headerTitleEl.textContent = newTitle;
         }
         input.remove();
-        _ctx.headerTitleEl.style.display = "";
-        _ctx.headerRenameBtn.style.display = "";
+        headerTitleEl.style.display = "";
+        headerRenameBtn.style.display = "";
       }
 
       input.addEventListener("keydown", function (e) {
@@ -45,8 +53,8 @@ export function initHeader(ctx) {
         if (e.key === "Escape") {
           e.preventDefault();
           input.remove();
-          _ctx.headerTitleEl.style.display = "";
-          _ctx.headerRenameBtn.style.display = "";
+          headerTitleEl.style.display = "";
+          headerRenameBtn.style.display = "";
         }
       });
       input.addEventListener("blur", commit);
@@ -54,8 +62,8 @@ export function initHeader(ctx) {
   }
 
   // --- Session info popover ---
-  if (_ctx.headerInfoBtn) {
-    _ctx.headerInfoBtn.addEventListener("click", function (e) {
+  if (headerInfoBtn) {
+    headerInfoBtn.addEventListener("click", function (e) {
       e.stopPropagation();
       if (sessionInfoPopover) { closeSessionInfoPopover(); return; }
 
@@ -81,15 +89,16 @@ export function initHeader(ctx) {
         pop.appendChild(row);
       }
 
-      if (_ctx.cliSessionId) addRow("Session ID", _ctx.cliSessionId);
-      if (_ctx.activeSessionId) addRow("Local ID", _ctx.activeSessionId);
-      if (_ctx.cliSessionId) addRow("Resume", "claude --resume " + _ctx.cliSessionId);
+      var s = store.snap();
+      if (s.cliSessionId) addRow("Session ID", s.cliSessionId);
+      if (s.activeSessionId) addRow("Local ID", s.activeSessionId);
+      if (s.cliSessionId) addRow("Resume", "claude --resume " + s.cliSessionId);
 
       document.body.appendChild(pop);
       sessionInfoPopover = pop;
       refreshIcons();
 
-      var btnRect = _ctx.headerInfoBtn.getBoundingClientRect();
+      var btnRect = headerInfoBtn.getBoundingClientRect();
       pop.style.top = (btnRect.bottom + 6) + "px";
       pop.style.left = btnRect.left + "px";
       var popRect = pop.getBoundingClientRect();
@@ -114,8 +123,9 @@ export function closeSessionInfoPopover() {
 }
 
 export function updateHistorySentinel() {
-  var existing = _ctx.messagesEl.querySelector(".history-sentinel");
-  if (_ctx.historyFrom > 0) {
+  var messagesEl = getMessagesEl();
+  var existing = messagesEl.querySelector(".history-sentinel");
+  if (store.get('historyFrom') > 0) {
     if (!existing) {
       var sentinel = document.createElement("div");
       sentinel.className = "history-sentinel";
@@ -123,15 +133,15 @@ export function updateHistorySentinel() {
       sentinel.querySelector(".load-more-btn").addEventListener("click", function () {
         requestMoreHistory();
       });
-      _ctx.messagesEl.insertBefore(sentinel, _ctx.messagesEl.firstChild);
+      messagesEl.insertBefore(sentinel, messagesEl.firstChild);
 
       // Auto-load when sentinel scrolls into view
       if (historySentinelObserver) historySentinelObserver.disconnect();
       historySentinelObserver = new IntersectionObserver(function (entries) {
-        if (entries[0].isIntersecting && !_ctx.loadingMore && _ctx.historyFrom > 0) {
+        if (entries[0].isIntersecting && !store.get('loadingMore') && store.get('historyFrom') > 0) {
           requestMoreHistory();
         }
-      }, { root: _ctx.messagesEl, rootMargin: "200px 0px 0px 0px" });
+      }, { root: messagesEl, rootMargin: "200px 0px 0px 0px" });
       historySentinelObserver.observe(sentinel);
     }
   } else {
@@ -141,89 +151,90 @@ export function updateHistorySentinel() {
 }
 
 export function requestMoreHistory() {
-  var ws = _ctx.getWs();
-  if (_ctx.loadingMore || _ctx.historyFrom <= 0 || !ws || !_ctx.connected) return;
-  _ctx.loadingMore = true;
-  var btn = _ctx.messagesEl.querySelector(".load-more-btn");
+  var ws = getWs();
+  var s = store.snap();
+  if (s.loadingMore || s.historyFrom <= 0 || !ws || !s.connected) return;
+  store.set({ loadingMore: true });
+  var messagesEl = getMessagesEl();
+  var btn = messagesEl.querySelector(".load-more-btn");
   if (btn) btn.classList.add("loading");
-  ws.send(JSON.stringify({ type: "load_more_history", before: _ctx.historyFrom }));
+  ws.send(JSON.stringify({ type: "load_more_history", before: s.historyFrom }));
 }
 
 export function prependOlderHistory(items, meta) {
+  var messagesEl = getMessagesEl();
+
   // Save current rendering state
-  var savedMsgEl = _ctx.getCurrentMsgEl();
-  var savedActivity = _ctx.getActivityEl();
-  var savedFullText = _ctx.getCurrentFullText();
-  var savedTurnCounter = _ctx.getTurnCounter();
-  var savedToolsState = _ctx.saveToolState();
+  var savedMsgEl = store.get('currentMsgEl');
+  var savedActivity = getActivityEl();
+  var savedFullText = store.get('currentFullText');
+  var savedTurnCounter = getTurnCounter();
+  var savedToolsState = saveToolState();
   // Save context & usage so old result messages don't overwrite current values
-  var savedContext = JSON.parse(JSON.stringify(_ctx.getContextData()));
-  var savedUsage = JSON.parse(JSON.stringify(_ctx.getSessionUsage()));
+  var savedContext = JSON.parse(JSON.stringify(getContextData()));
+  var savedUsage = JSON.parse(JSON.stringify(getSessionUsage()));
 
   // Reset to initial values for clean rendering
-  _ctx.setCurrentMsgEl(null);
-  _ctx.setActivityEl(null);
-  _ctx.setCurrentFullText("");
-  _ctx.setTurnCounter(0);
-  _ctx.resetToolState();
+  store.set({ currentMsgEl: null, currentFullText: "" });
+  setActivityEl(null);
+  setTurnCounter(0);
+  resetToolState();
 
   // Set prepend anchor to insert before existing content
   // Skip the sentinel itself when setting anchor
-  var firstReal = _ctx.messagesEl.querySelector(".history-sentinel");
-  _ctx.setPrependAnchor(firstReal ? firstReal.nextSibling : _ctx.messagesEl.firstChild);
+  var firstReal = messagesEl.querySelector(".history-sentinel");
+  setPrependAnchor(firstReal ? firstReal.nextSibling : messagesEl.firstChild);
 
   // Remember the first existing content element and its position
-  var anchorEl = _ctx.getPrependAnchor();
+  var anchorEl = getPrependAnchor();
   var anchorOffset = anchorEl ? anchorEl.getBoundingClientRect().top : 0;
 
   // Process each item through the rendering pipeline
   for (var i = 0; i < items.length; i++) {
-    _ctx.processMessage(items[i]);
+    processMessage(items[i]);
   }
 
   // Finalize any open assistant block from the batch
-  _ctx.finalizeAssistantBlock();
+  finalizeAssistantBlock();
 
   // Clear prepend mode
-  _ctx.setPrependAnchor(null);
+  setPrependAnchor(null);
 
   // Restore saved state
-  _ctx.setCurrentMsgEl(savedMsgEl);
-  _ctx.setActivityEl(savedActivity);
-  _ctx.setCurrentFullText(savedFullText);
-  _ctx.setTurnCounter(savedTurnCounter);
-  _ctx.restoreToolState(savedToolsState);
+  store.set({ currentMsgEl: savedMsgEl, currentFullText: savedFullText });
+  setActivityEl(savedActivity);
+  setTurnCounter(savedTurnCounter);
+  restoreToolState(savedToolsState);
   // Restore context & usage (old result messages must not overwrite current values)
-  _ctx.setContextData(savedContext);
-  _ctx.setSessionUsage(savedUsage);
-  _ctx.updateContextPanel();
-  _ctx.updateUsagePanel();
+  setContextData(savedContext);
+  setSessionUsage(savedUsage);
+  updateContextPanel();
+  updateUsagePanel();
 
   // Fix scroll: restore anchor element to same visual position
   if (anchorEl) {
     var newTop = anchorEl.getBoundingClientRect().top;
-    _ctx.messagesEl.scrollTop += (newTop - anchorOffset);
+    messagesEl.scrollTop += (newTop - anchorOffset);
   }
 
   // Update state
-  _ctx.historyFrom = meta.from;
-  _ctx.loadingMore = false;
+  store.set({ historyFrom: meta.from, loadingMore: false });
 
   // Renumber data-turn attributes in DOM order
-  var turnEls = _ctx.messagesEl.querySelectorAll("[data-turn]");
+  var turnEls = messagesEl.querySelectorAll("[data-turn]");
   for (var t = 0; t < turnEls.length; t++) {
     turnEls[t].dataset.turn = t + 1;
   }
-  _ctx.setTurnCounter(turnEls.length);
+  setTurnCounter(turnEls.length);
 
   // Update sentinel
   if (meta.hasMore) {
-    var btn = _ctx.messagesEl.querySelector(".load-more-btn");
+    var btn = messagesEl.querySelector(".load-more-btn");
     if (btn) btn.classList.remove("loading");
   } else {
     updateHistorySentinel();
   }
 
   // Notify in-session search that history was prepended (for pending scroll targets)
-  _ctx.onSessionSearchHistoryPrepended();
+  onSessionSearchHistoryPrepended();
 }