clay-server 2.27.0-beta.9 → 2.27.0

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

@@ -0,0 +1,212 @@
+// app-favicon.js - Favicon, IO blink, urgent blink, status/activity UI
+// Extracted from app.js (PR-34)
+
+import { refreshIcons } from './icons.js';
+
+var _ctx = null;
+
+// --- Module-owned state ---
+var faviconLink, faviconOrigHref, faviconCanvas, faviconCtx, faviconImg, faviconImgReady;
+var BAND_COLORS = [[0,235,160],[0,200,220],[30,100,255],[88,50,255],[200,60,180],[255,90,50]];
+var faviconAnimTimer = null, faviconAnimFrame = 0;
+var urgentBlinkTimer = null, urgentTitleTimer = null, savedTitle = null;
+var ioTimer = null;
+var sessionIoTimers = {};
+var crossProjectBlinkTimer = null;
+
+export function initFavicon(ctx) {
+  _ctx = ctx;
+
+  faviconLink = document.querySelector('link[rel="icon"]');
+  faviconCanvas = document.createElement("canvas");
+  faviconCanvas.width = 32;
+  faviconCanvas.height = 32;
+  faviconCtx = faviconCanvas.getContext("2d");
+  faviconImg = null;
+  faviconImgReady = false;
+
+  // Load the banded favicon image for masking
+  (function () {
+    faviconImg = new Image();
+    faviconImg.onload = function () { faviconImgReady = true; };
+    faviconImg.src = _ctx.basePath + "favicon-banded.png";
+  })();
+
+  // Reset cached favicon href on theme change
+  _ctx.onThemeChange(function () { faviconOrigHref = null; });
+}
+
+export function updateFavicon(bgColor) {
+  if (!faviconLink) return;
+  if (!bgColor) {
+    if (faviconOrigHref) { faviconLink.href = faviconOrigHref; faviconOrigHref = null; }
+    return;
+  }
+  if (!faviconOrigHref) faviconOrigHref = faviconLink.href;
+  // Simple solid-color favicon for non-animated states
+  faviconCtx.clearRect(0, 0, 32, 32);
+  faviconCtx.fillStyle = bgColor;
+  faviconCtx.beginPath();
+  faviconCtx.arc(16, 16, 14, 0, Math.PI * 2);
+  faviconCtx.fill();
+  faviconCtx.fillStyle = "#fff";
+  faviconCtx.font = "bold 22px Nunito, sans-serif";
+  faviconCtx.textAlign = "center";
+  faviconCtx.textBaseline = "middle";
+  faviconCtx.fillText("C", 16, 17);
+  faviconLink.href = faviconCanvas.toDataURL("image/png");
+}
+
+export function drawFaviconAnimFrame() {
+  if (!faviconImgReady) return;
+  var S = 32;
+  var bands = BAND_COLORS.length;
+  var totalFrames = bands * 2;
+  var offset = faviconAnimFrame % totalFrames;
+
+  // Draw flowing color bands as background
+  faviconCtx.clearRect(0, 0, S, S);
+  var bandH = Math.ceil(S / bands);
+  for (var i = 0; i < bands + totalFrames; i++) {
+    var ci = ((i + offset) % bands + bands) % bands;
+    var c = BAND_COLORS[ci];
+    faviconCtx.fillStyle = "rgb(" + c[0] + "," + c[1] + "," + c[2] + ")";
+    faviconCtx.fillRect(0, (i - offset) * bandH, S, bandH);
+  }
+
+  // Use the banded C image as a mask -- draw it on top with destination-in
+  faviconCtx.globalCompositeOperation = "destination-in";
+  faviconCtx.drawImage(faviconImg, 0, 0, S, S);
+  faviconCtx.globalCompositeOperation = "source-over";
+
+  faviconLink.href = faviconCanvas.toDataURL("image/png");
+  faviconAnimFrame++;
+}
+
+export function setSendBtnMode(mode) {
+  if (mode === "stop") {
+    _ctx.sendBtn.disabled = false;
+    _ctx.sendBtn.classList.add("stop");
+    _ctx.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>';
+  }
+  refreshIcons();
+}
+
+export function blinkIO() {
+  if (!_ctx.connected) return;
+  var dot = _ctx.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") ||
+                   document.querySelector(".mate-session-item.active .session-processing");
+  if (sessionDot) sessionDot.classList.add("io");
+  // If active project is a worktree, also blink the parent project dot
+  var activeWt = document.querySelector("#icon-strip-projects .icon-strip-wt-item.active");
+  var parentDot = null;
+  if (activeWt) {
+    var group = activeWt.closest(".icon-strip-group");
+    if (group) parentDot = group.querySelector(".folder-header .icon-strip-status");
+    if (parentDot) parentDot.classList.add("io");
+  }
+  // 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');
+  } else {
+    mobileChipDot = document.querySelector('.mobile-chat-chip[data-slug="' + _ctx.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();
+    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");
+    if (sd) sd.classList.remove("io");
+    if (parentDot) parentDot.classList.remove("io");
+    if (mobileChipDot) mobileChipDot.classList.remove("io");
+    if (mobileSessionDot) mobileSessionDot.classList.remove("io");
+  }, 80);
+}
+
+export function blinkSessionDot(sessionId) {
+  var el = document.querySelector('.session-item[data-session-id="' + sessionId + '"] .session-processing');
+  if (!el) return;
+  el.classList.add("io");
+  clearTimeout(sessionIoTimers[sessionId]);
+  sessionIoTimers[sessionId] = setTimeout(function () {
+    el.classList.remove("io");
+    delete sessionIoTimers[sessionId];
+  }, 80);
+}
+
+export function updateCrossProjectBlink() {
+  if (crossProjectBlinkTimer) { clearTimeout(crossProjectBlinkTimer); crossProjectBlinkTimer = null; }
+  function doBlink() {
+    var dots = document.querySelectorAll("#icon-strip-projects .icon-strip-item:not(.active) .icon-strip-status.processing, #icon-strip-projects .icon-strip-wt-item:not(.active) .icon-strip-status.processing, #icon-strip-users .icon-strip-mate:not(.active) .icon-strip-status.processing");
+    // Also blink mobile chat chip dots (same icon-strip-status class inside chips)
+    var mobileDots = document.querySelectorAll(".mobile-chat-chip .icon-strip-status.processing");
+    var allDots = [];
+    for (var i = 0; i < dots.length; i++) allDots.push(dots[i]);
+    for (var m = 0; m < mobileDots.length; m++) allDots.push(mobileDots[m]);
+    if (allDots.length === 0) { crossProjectBlinkTimer = null; return; }
+    for (var i2 = 0; i2 < allDots.length; i2++) { allDots[i2].classList.add("io"); }
+    setTimeout(function () {
+      for (var j = 0; j < allDots.length; j++) { allDots[j].classList.remove("io"); }
+      crossProjectBlinkTimer = setTimeout(doBlink, 150 + Math.random() * 350);
+    }, 80);
+  }
+  crossProjectBlinkTimer = setTimeout(doBlink, 50);
+}
+
+export function startUrgentBlink() {
+  if (urgentBlinkTimer) return;
+  savedTitle = document.title;
+  if (!faviconOrigHref && faviconLink) faviconOrigHref = faviconLink.href;
+  faviconAnimFrame = 0;
+  // Color flow animation at ~12fps
+  urgentBlinkTimer = setInterval(drawFaviconAnimFrame, 83);
+  // Title blink separately
+  var titleTick = 0;
+  urgentTitleTimer = setInterval(function () {
+    document.title = titleTick % 2 === 0 ? "\u26A0 Input needed" : savedTitle;
+    titleTick++;
+  }, 500);
+}
+
+export function stopUrgentBlink() {
+  if (!urgentBlinkTimer) return;
+  clearInterval(urgentBlinkTimer);
+  clearInterval(urgentTitleTimer);
+  urgentBlinkTimer = null;
+  urgentTitleTimer = null;
+  faviconAnimFrame = 0;
+  updateFavicon(null);
+  if (savedTitle) document.title = savedTitle;
+  savedTitle = null;
+}
+
+export function setActivity(text) {
+  if (text) {
+    if (!_ctx.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);
+    }
+    _ctx.scrollToBottom();
+  } else {
+    if (_ctx.getActivityEl()) {
+      _ctx.getActivityEl().remove();
+      _ctx.setActivityEl(null);
+    }
+  }
+}

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

@@ -0,0 +1,229 @@
+// app-header.js - Session rename, session info popover, progressive history loading
+// Extracted from app.js (PR-34)
+
+import { refreshIcons, iconHtml } from './icons.js';
+import { escapeHtml, copyToClipboard } from './utils.js';
+
+var _ctx = null;
+
+// --- Module-owned state ---
+var sessionInfoPopover = null;
+var historySentinelObserver = null;
+
+export function initHeader(ctx) {
+  _ctx = ctx;
+
+  // --- Header session rename ---
+  if (_ctx.headerRenameBtn) {
+    _ctx.headerRenameBtn.addEventListener("click", function () {
+      if (!_ctx.activeSessionId) return;
+      var currentText = _ctx.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);
+      input.focus();
+      input.select();
+
+      function commit() {
+        var newTitle = input.value.trim();
+        var ws = _ctx.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;
+        }
+        input.remove();
+        _ctx.headerTitleEl.style.display = "";
+        _ctx.headerRenameBtn.style.display = "";
+      }
+
+      input.addEventListener("keydown", function (e) {
+        if (e.key === "Enter") { e.preventDefault(); commit(); }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          input.remove();
+          _ctx.headerTitleEl.style.display = "";
+          _ctx.headerRenameBtn.style.display = "";
+        }
+      });
+      input.addEventListener("blur", commit);
+    });
+  }
+
+  // --- Session info popover ---
+  if (_ctx.headerInfoBtn) {
+    _ctx.headerInfoBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      if (sessionInfoPopover) { closeSessionInfoPopover(); return; }
+
+      var pop = document.createElement("div");
+      pop.className = "session-info-popover";
+
+      function addRow(label, value) {
+        var val = value == null ? "-" : String(value);
+        var row = document.createElement("div");
+        row.className = "info-row";
+        row.innerHTML =
+          '<span class="info-label">' + label + '</span>' +
+          '<span class="info-value">' + escapeHtml(val) + '</span>' +
+          '<button class="info-copy-btn" title="Copy">' + iconHtml("copy") + '</button>';
+        var btn = row.querySelector(".info-copy-btn");
+        btn.addEventListener("click", function () {
+          copyToClipboard(value || "").then(function () {
+            btn.innerHTML = iconHtml("check");
+            refreshIcons();
+            setTimeout(function () { btn.innerHTML = iconHtml("copy"); refreshIcons(); }, 1200);
+          });
+        });
+        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);
+
+      document.body.appendChild(pop);
+      sessionInfoPopover = pop;
+      refreshIcons();
+
+      var btnRect = _ctx.headerInfoBtn.getBoundingClientRect();
+      pop.style.top = (btnRect.bottom + 6) + "px";
+      pop.style.left = btnRect.left + "px";
+      var popRect = pop.getBoundingClientRect();
+      if (popRect.right > window.innerWidth - 8) {
+        pop.style.left = (window.innerWidth - popRect.width - 8) + "px";
+      }
+    });
+
+    document.addEventListener("click", function (e) {
+      if (sessionInfoPopover && !sessionInfoPopover.contains(e.target) && !e.target.closest("#header-info-btn")) {
+        closeSessionInfoPopover();
+      }
+    });
+  }
+}
+
+export function closeSessionInfoPopover() {
+  if (sessionInfoPopover) {
+    sessionInfoPopover.remove();
+    sessionInfoPopover = null;
+  }
+}
+
+export function updateHistorySentinel() {
+  var existing = _ctx.messagesEl.querySelector(".history-sentinel");
+  if (_ctx.historyFrom > 0) {
+    if (!existing) {
+      var sentinel = document.createElement("div");
+      sentinel.className = "history-sentinel";
+      sentinel.innerHTML = '<button class="load-more-btn">Load earlier messages</button>';
+      sentinel.querySelector(".load-more-btn").addEventListener("click", function () {
+        requestMoreHistory();
+      });
+      _ctx.messagesEl.insertBefore(sentinel, _ctx.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) {
+          requestMoreHistory();
+        }
+      }, { root: _ctx.messagesEl, rootMargin: "200px 0px 0px 0px" });
+      historySentinelObserver.observe(sentinel);
+    }
+  } else {
+    if (existing) existing.remove();
+    if (historySentinelObserver) { historySentinelObserver.disconnect(); historySentinelObserver = null; }
+  }
+}
+
+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");
+  if (btn) btn.classList.add("loading");
+  ws.send(JSON.stringify({ type: "load_more_history", before: _ctx.historyFrom }));
+}
+
+export function prependOlderHistory(items, meta) {
+  // Save current rendering state
+  var savedMsgEl = _ctx.getCurrentMsgEl();
+  var savedActivity = _ctx.getActivityEl();
+  var savedFullText = _ctx.getCurrentFullText();
+  var savedTurnCounter = _ctx.getTurnCounter();
+  var savedToolsState = _ctx.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()));
+
+  // Reset to initial values for clean rendering
+  _ctx.setCurrentMsgEl(null);
+  _ctx.setActivityEl(null);
+  _ctx.setCurrentFullText("");
+  _ctx.setTurnCounter(0);
+  _ctx.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);
+
+  // Remember the first existing content element and its position
+  var anchorEl = _ctx.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]);
+  }
+
+  // Finalize any open assistant block from the batch
+  _ctx.finalizeAssistantBlock();
+
+  // Clear prepend mode
+  _ctx.setPrependAnchor(null);
+
+  // Restore saved state
+  _ctx.setCurrentMsgEl(savedMsgEl);
+  _ctx.setActivityEl(savedActivity);
+  _ctx.setCurrentFullText(savedFullText);
+  _ctx.setTurnCounter(savedTurnCounter);
+  _ctx.restoreToolState(savedToolsState);
+  // Restore context & usage (old result messages must not overwrite current values)
+  _ctx.setContextData(savedContext);
+  _ctx.setSessionUsage(savedUsage);
+  _ctx.updateContextPanel();
+  _ctx.updateUsagePanel();
+
+  // Fix scroll: restore anchor element to same visual position
+  if (anchorEl) {
+    var newTop = anchorEl.getBoundingClientRect().top;
+    _ctx.messagesEl.scrollTop += (newTop - anchorOffset);
+  }
+
+  // Update state
+  _ctx.historyFrom = meta.from;
+  _ctx.loadingMore = false;
+
+  // Renumber data-turn attributes in DOM order
+  var turnEls = _ctx.messagesEl.querySelectorAll("[data-turn]");
+  for (var t = 0; t < turnEls.length; t++) {
+    turnEls[t].dataset.turn = t + 1;
+  }
+  _ctx.setTurnCounter(turnEls.length);
+
+  // Update sentinel
+  if (meta.hasMore) {
+    var btn = _ctx.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();
+}