claude-relay 2.1.2 → 2.2.0

package/lib/public/modules/notifications.js

@@ -137,6 +137,7 @@ export function initNotifications(_ctx) {
     var footerBtn = $("sidebar-footer-btn");
     var footerMenu = $("sidebar-footer-menu");
     var footerUpdateCheck = $("footer-update-check");
+    var footerUsage = $("footer-usage");
     if (!footerBtn || !footerMenu) return;
 
     footerBtn.addEventListener("click", function (e) {
@@ -150,6 +151,14 @@ export function initNotifications(_ctx) {
       }
     });
 
+    if (footerUsage && ctx.toggleUsagePanel) {
+      footerUsage.addEventListener("click", function (e) {
+        e.stopPropagation();
+        footerMenu.classList.add("hidden");
+        ctx.toggleUsagePanel();
+      });
+    }
+
     function setUpdateIcon(name, spin) {
       var el = footerUpdateCheck.querySelector(".lucide, [data-lucide]");
       if (!el) return;
@@ -233,7 +242,16 @@ export function initNotifications(_ctx) {
       tooltipEl.textContent = target.dataset.tip;
       var rect = target.getBoundingClientRect();
       tooltipEl.style.top = (rect.bottom + 8) + "px";
-      tooltipEl.style.left = (rect.left + rect.width / 2) + "px";
+      tooltipEl.style.left = "";
+      tooltipEl.style.right = "";
+      tooltipEl.style.transform = "";
+      var centerX = rect.left + rect.width / 2;
+      if (centerX + 60 > window.innerWidth) {
+        tooltipEl.style.right = "8px";
+      } else {
+        tooltipEl.style.left = centerX + "px";
+        tooltipEl.style.transform = "translateX(-50%)";
+      }
       tooltipEl.classList.add("visible");
       clearTimeout(tooltipTimer);
       tooltipTimer = setTimeout(function () {

package/lib/public/modules/qrcode.js

@@ -11,7 +11,13 @@ export function initQrCode() {
     e.stopPropagation();
     var url = window.location.href;
 
-    // generate QR
+    // Use Web Share API if available
+    if (navigator.share) {
+      navigator.share({ title: document.title || "Claude Relay", url: url }).catch(function () {});
+      return;
+    }
+
+    // Fallback: show QR overlay
     var qr = qrcode(0, "M");
     qr.addData(url);
     qr.make();

package/lib/public/modules/sidebar.js

@@ -3,6 +3,12 @@ import { iconHtml, refreshIcons } from './icons.js';
 
 var ctx;
 
+// --- Session search ---
+var searchQuery = "";
+var searchMatchIds = null; // null = no search, Set of matched session IDs
+var searchDebounce = null;
+var cachedSessions = [];
+
 // --- Session context menu ---
 var sessionCtxMenu = null;
 var sessionCtxSessionId = null;
@@ -129,9 +135,23 @@ function getDateGroup(ts) {
   return "Older";
 }
 
+function highlightMatch(text, query) {
+  if (!query) return escapeHtml(text);
+  var lower = text.toLowerCase();
+  var qLower = query.toLowerCase();
+  var idx = lower.indexOf(qLower);
+  if (idx === -1) return escapeHtml(text);
+  var before = text.substring(0, idx);
+  var match = text.substring(idx, idx + query.length);
+  var after = text.substring(idx + query.length);
+  return escapeHtml(before) + '<mark class="session-highlight">' + escapeHtml(match) + '</mark>' + escapeHtml(after);
+}
+
 function renderSessionItem(s) {
   var el = document.createElement("div");
-  el.className = "session-item" + (s.active ? " active" : "");
+  var isMatch = searchMatchIds !== null && searchMatchIds.has(s.id);
+  var dimmed = searchMatchIds !== null && !isMatch;
+  el.className = "session-item" + (s.active ? " active" : "") + (isMatch ? " search-match" : "") + (dimmed ? " search-dimmed" : "");
   el.dataset.sessionId = s.id;
 
   var textSpan = document.createElement("span");
@@ -140,7 +160,7 @@ function renderSessionItem(s) {
   if (s.isProcessing) {
     textHtml += '<span class="session-processing"></span>';
   }
-  textHtml += escapeHtml(s.title || "New Session");
+  textHtml += highlightMatch(s.title || "New Session", searchQuery);
   textSpan.innerHTML = textHtml;
   el.appendChild(textSpan);
 
@@ -169,10 +189,12 @@ function renderSessionItem(s) {
 }
 
 export function renderSessionList(sessions) {
+  if (sessions) cachedSessions = sessions;
+
   ctx.sessionListEl.innerHTML = "";
 
   // Sort by lastActivity descending (most recent first)
-  var sorted = sessions.slice().sort(function (a, b) {
+  var sorted = cachedSessions.slice().sort(function (a, b) {
     return (b.lastActivity || 0) - (a.lastActivity || 0);
   });
 
@@ -193,6 +215,27 @@ export function renderSessionList(sessions) {
   updatePageTitle();
 }
 
+export function handleSearchResults(msg) {
+  if (msg.query !== searchQuery) return; // stale response
+  var ids = new Set();
+  for (var i = 0; i < msg.results.length; i++) {
+    ids.add(msg.results[i].id);
+  }
+  searchMatchIds = ids;
+  renderSessionList(null);
+
+  // Build timeline for current session if it matches
+  var activeEl = ctx.sessionListEl.querySelector(".session-item.active");
+  if (activeEl) {
+    var activeId = parseInt(activeEl.dataset.sessionId, 10);
+    if (ids.has(activeId)) {
+      buildSearchTimeline(searchQuery);
+    } else {
+      removeSearchTimeline();
+    }
+  }
+}
+
 export function updatePageTitle() {
   var sessionTitle = "";
   var activeItem = ctx.sessionListEl.querySelector(".session-item.active .session-item-text");
@@ -251,6 +294,61 @@ export function initSidebar(_ctx) {
     }
   });
 
+  // --- Session search ---
+  var searchBtn = ctx.$("search-session-btn");
+  var searchBox = ctx.$("session-search");
+  var searchInput = ctx.$("session-search-input");
+
+  function openSearch() {
+    searchBox.classList.remove("hidden");
+    searchBtn.classList.add("active");
+    searchInput.value = "";
+    searchQuery = "";
+    setTimeout(function () { searchInput.focus(); }, 50);
+  }
+
+  function closeSearch() {
+    searchBox.classList.add("hidden");
+    searchBtn.classList.remove("active");
+    searchInput.value = "";
+    searchQuery = "";
+    searchMatchIds = null;
+    if (searchDebounce) { clearTimeout(searchDebounce); searchDebounce = null; }
+    removeSearchTimeline();
+    renderSessionList(null);
+  }
+
+  searchBtn.addEventListener("click", function () {
+    if (searchBox.classList.contains("hidden")) {
+      openSearch();
+    } else {
+      closeSearch();
+    }
+  });
+
+  searchInput.addEventListener("input", function () {
+    searchQuery = searchInput.value.trim();
+    if (searchDebounce) clearTimeout(searchDebounce);
+    if (!searchQuery) {
+      searchMatchIds = null;
+      removeSearchTimeline();
+      renderSessionList(null);
+      return;
+    }
+    searchDebounce = setTimeout(function () {
+      if (ctx.ws && ctx.connected) {
+        ctx.ws.send(JSON.stringify({ type: "search_sessions", query: searchQuery }));
+      }
+    }, 200);
+  });
+
+  searchInput.addEventListener("keydown", function (e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeSearch();
+    }
+  });
+
   // --- Resume session modal ---
   var resumeModal = ctx.$("resume-modal");
   var resumeInput = ctx.$("resume-session-input");
@@ -318,3 +416,135 @@ export function initSidebar(_ctx) {
     filePanelBack.addEventListener("click", showSessionsPanel);
   }
 }
+
+// --- Search hit timeline (right-side markers) ---
+var searchTimelineScrollHandler = null;
+var activeSearchQuery = ""; // query active in the timeline
+
+export function getActiveSearchQuery() {
+  return searchQuery;
+}
+
+export function buildSearchTimeline(query) {
+  removeSearchTimeline();
+  if (!query) return;
+  activeSearchQuery = query;
+
+  var q = query.toLowerCase();
+  var messagesEl = ctx.messagesEl;
+
+  // Collect all message elements that contain the query
+  var allMsgs = messagesEl.querySelectorAll(".msg-user, .msg-assistant");
+  var hits = [];
+  for (var i = 0; i < allMsgs.length; i++) {
+    var msgEl = allMsgs[i];
+    var textEl = msgEl.querySelector(".bubble") || msgEl.querySelector(".md-content");
+    if (!textEl) continue;
+    var text = textEl.textContent || "";
+    if (text.toLowerCase().indexOf(q) === -1) continue;
+
+    // Extract a snippet around the match
+    var idx = text.toLowerCase().indexOf(q);
+    var start = Math.max(0, idx - 10);
+    var end = Math.min(text.length, idx + query.length + 10);
+    var snippet = (start > 0 ? "\u2026" : "") + text.substring(start, end) + (end < text.length ? "\u2026" : "");
+    hits.push({ el: msgEl, snippet: snippet });
+  }
+
+  if (hits.length === 0) return;
+
+  var timeline = document.createElement("div");
+  timeline.className = "search-timeline";
+  timeline.id = "search-timeline";
+
+  var track = document.createElement("div");
+  track.className = "rewind-timeline-track";
+
+  var viewport = document.createElement("div");
+  viewport.className = "rewind-timeline-viewport";
+  track.appendChild(viewport);
+
+  for (var i = 0; i < hits.length; i++) {
+    var hit = hits[i];
+    var pct = hits.length === 1 ? 50 : 6 + (i / (hits.length - 1)) * 88;
+
+    var snippetText = hit.snippet;
+    if (snippetText.length > 24) snippetText = snippetText.substring(0, 24) + "\u2026";
+
+    var marker = document.createElement("div");
+    marker.className = "rewind-timeline-marker search-hit-marker";
+    marker.innerHTML = iconHtml("search") + '<span class="marker-text">' + escapeHtml(snippetText) + '</span>';
+    marker.style.top = pct + "%";
+    marker.dataset.offsetTop = hit.el.offsetTop;
+
+    (function(targetEl, markerEl) {
+      markerEl.addEventListener("click", function() {
+        targetEl.scrollIntoView({ behavior: "smooth", block: "center" });
+        targetEl.classList.remove("search-blink");
+        void targetEl.offsetWidth; // force reflow
+        targetEl.classList.add("search-blink");
+      });
+    })(hit.el, marker);
+
+    track.appendChild(marker);
+  }
+
+  timeline.appendChild(track);
+
+  // Position to align with messages area
+  var appEl = ctx.$("app");
+  var headerEl = ctx.$("header");
+  var inputAreaEl = ctx.$("input-area");
+  var appRect = appEl.getBoundingClientRect();
+  var headerRect = headerEl.getBoundingClientRect();
+  var inputRect = inputAreaEl.getBoundingClientRect();
+
+  timeline.style.top = (headerRect.bottom - appRect.top + 4) + "px";
+  timeline.style.bottom = (appRect.bottom - inputRect.top + 4) + "px";
+
+  appEl.appendChild(timeline);
+  refreshIcons();
+
+  searchTimelineScrollHandler = function() { updateSearchTimelineViewport(track, viewport); };
+  messagesEl.addEventListener("scroll", searchTimelineScrollHandler);
+  updateSearchTimelineViewport(track, viewport);
+}
+
+function updateSearchTimelineViewport(track, viewport) {
+  if (!track) return;
+  var messagesEl = ctx.messagesEl;
+  var scrollH = messagesEl.scrollHeight;
+  var viewH = messagesEl.clientHeight;
+  if (scrollH <= viewH) {
+    viewport.style.top = "0";
+    viewport.style.height = "100%";
+  } else {
+    var viewTop = messagesEl.scrollTop / scrollH;
+    var viewBot = (messagesEl.scrollTop + viewH) / scrollH;
+    viewport.style.top = (viewTop * 100) + "%";
+    viewport.style.height = ((viewBot - viewTop) * 100) + "%";
+  }
+
+  var markers = track.querySelectorAll(".search-hit-marker");
+  var vTop = messagesEl.scrollTop;
+  var vBot = vTop + viewH;
+
+  for (var i = 0; i < markers.length; i++) {
+    var msgTop = parseInt(markers[i].dataset.offsetTop, 10);
+    if (msgTop >= vTop && msgTop <= vBot) {
+      markers[i].classList.add("in-view");
+    } else {
+      markers[i].classList.remove("in-view");
+    }
+  }
+}
+
+export function removeSearchTimeline() {
+  var existing = document.getElementById("search-timeline");
+  if (existing) existing.remove();
+  if (searchTimelineScrollHandler && ctx.messagesEl) {
+    ctx.messagesEl.removeEventListener("scroll", searchTimelineScrollHandler);
+    searchTimelineScrollHandler = null;
+  }
+  activeSearchQuery = "";
+}