claude-relay 2.1.3 → 2.2.0

package/lib/public/app.js

@@ -1,14 +1,14 @@
 import { copyToClipboard, escapeHtml } from './modules/utils.js';
 import { refreshIcons, iconHtml, randomThinkingVerb } from './modules/icons.js';
 import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks, closeMermaidModal } from './modules/markdown.js';
-import { initSidebar, renderSessionList, updatePageTitle } from './modules/sidebar.js';
+import { initSidebar, renderSessionList, handleSearchResults, updatePageTitle, getActiveSearchQuery, buildSearchTimeline, removeSearchTimeline } from './modules/sidebar.js';
 import { initRewind, setRewindMode, showRewindModal, clearPendingRewindUuid } from './modules/rewind.js';
 import { initNotifications, showDoneNotification, playDoneSound, isNotifAlertEnabled, isNotifSoundEnabled } from './modules/notifications.js';
-import { initInput, clearPendingImages, handleInputSync } from './modules/input.js';
+import { initInput, clearPendingImages, handleInputSync, autoResize } from './modules/input.js';
 import { initQrCode } from './modules/qrcode.js';
-import { initFileBrowser, loadRootDirectory, handleFsList, handleFsRead, refreshIfOpen } from './modules/filebrowser.js';
-import { initTerminal, openTerminal, handleTermOutput, handleTermExited, closeTerminal } from './modules/terminal.js';
-import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUserQuestion, renderPermissionRequest, markPermissionResolved, markPermissionCancelled, renderPlanBanner, renderPlanCard, handleTodoWrite, handleTaskCreate, handleTaskUpdate, startThinking, appendThinking, stopThinking, createToolItem, updateToolExecuting, updateToolResult, markAllToolsDone, addTurnMeta, enableMainInput, getTools, getPlanContent, setPlanContent, isPlanFilePath, getTodoTools } from './modules/tools.js';
+import { initFileBrowser, loadRootDirectory, handleFsList, handleFsRead, refreshIfOpen, handleFileChanged, closeFileViewer } from './modules/filebrowser.js';
+import { initTerminal, openTerminal, closeTerminal, resetTerminals, handleTermList, handleTermCreated, handleTermOutput, handleTermExited, handleTermClosed } from './modules/terminal.js';
+import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUserQuestion, markAskUserAnswered, renderPermissionRequest, markPermissionResolved, markPermissionCancelled, renderPlanBanner, renderPlanCard, handleTodoWrite, handleTaskCreate, handleTaskUpdate, startThinking, appendThinking, stopThinking, createToolItem, updateToolExecuting, updateToolResult, markAllToolsDone, addTurnMeta, enableMainInput, getTools, getPlanContent, setPlanContent, isPlanFilePath, getTodoTools } from './modules/tools.js';
 
 // --- Base path for multi-project routing ---
   var slugMatch = location.pathname.match(/^\/p\/([a-z0-9_-]+)/);
@@ -172,6 +172,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
   // tools, currentThinking -> modules/tools.js
   var highlightTimer = null;
   var activeSessionId = null;
+  var sessionDrafts = {};
   var slashCommands = [];
   // slashActiveIdx, slashFiltered, pendingImages, pendingPastes -> modules/input.js
   // pendingPermissions -> modules/tools.js
@@ -189,6 +190,10 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
   var loadingMore = false;
   var historySentinelObserver = null;
 
+  // --- Scroll lock ---
+  var isUserScrolledUp = false;
+  var scrollThreshold = 150;
+
   // builtinCommands -> modules/input.js
 
   // --- Confirm modal ---
@@ -247,6 +252,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     get ws() { return ws; },
     get connected() { return connected; },
     get projectName() { return projectName; },
+    messagesEl: messagesEl,
     sessionListEl: sessionListEl,
     sidebar: sidebar,
     sidebarOverlay: sidebarOverlay,
@@ -496,6 +502,8 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
       connectOverlay.classList.add("hidden");
       stopVerbCycle();
       updateFavicon("#57AB5A");
+      if (usageFab) usageFab.classList.remove("hidden");
+      if (usageHeaderBtn) usageHeaderBtn.classList.remove("hidden");
     } else if (status === "processing") {
       statusDot.classList.add("processing");
       processing = true;
@@ -533,13 +541,307 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     }
   }
 
+  // --- Model selector ---
+  var modelMenuWrap = $("model-menu-wrap");
+  var modelBtn = $("model-btn");
+  var modelLabel = $("model-label");
+  var modelMenu = $("model-menu");
+
+  function modelDisplayName(value, models) {
+    if (!value) return "";
+    // Look up displayName from models list
+    if (models) {
+      for (var i = 0; i < models.length; i++) {
+        if (models[i].value === value && models[i].displayName) return models[i].displayName;
+      }
+    }
+    return value;
+  }
+
+  var currentModels = [];
+
+  function updateModelSelector(current, models) {
+    if (!modelMenuWrap || !modelBtn || !modelMenu) return;
+    currentModels = models;
+    modelLabel.textContent = modelDisplayName(current, models);
+    modelMenuWrap.classList.remove("hidden");
+
+    modelMenu.innerHTML = "";
+    var list = models.length > 0 ? models : (current ? [{ value: current, displayName: current }] : []);
+    for (var i = 0; i < list.length; i++) {
+      var item = list[i];
+      var value = item.value || "";
+      var label = item.displayName || value;
+      var btn = document.createElement("button");
+      btn.className = "model-menu-item";
+      if (value === current) btn.classList.add("active");
+      btn.dataset.model = value;
+      btn.textContent = label;
+      btn.addEventListener("click", function () {
+        var model = this.dataset.model;
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "set_model", model: model }));
+        }
+        modelMenu.classList.add("hidden");
+        modelBtn.classList.remove("active");
+      });
+      modelMenu.appendChild(btn);
+    }
+  }
+
+  modelBtn.addEventListener("click", function (e) {
+    e.stopPropagation();
+    var open = modelMenu.classList.toggle("hidden");
+    modelBtn.classList.toggle("active", !open);
+  });
+
+  document.addEventListener("click", function (e) {
+    if (!modelMenu.contains(e.target) && e.target !== modelBtn) {
+      modelMenu.classList.add("hidden");
+      modelBtn.classList.remove("active");
+    }
+  });
+
+  // --- Usage panel ---
+  var usagePanel = $("usage-panel");
+  var usagePanelClose = $("usage-panel-close");
+  var usageFab = $("usage-fab");
+  var usageHeaderBtn = $("usage-header-btn");
+  var usageCostEl = $("usage-cost");
+  var usageInputEl = $("usage-input");
+  var usageOutputEl = $("usage-output");
+  var usageCacheReadEl = $("usage-cache-read");
+  var usageCacheWriteEl = $("usage-cache-write");
+  var usageTurnsEl = $("usage-turns");
+  var sessionUsage = { cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
+
+  // Rate limit bar elements
+  var usageLoading = $("usage-loading");
+  var usageError = $("usage-error");
+  var usageBars = $("usage-bars");
+  var usageRateLimitFetched = false;
+
+  function formatTokens(n) {
+    if (n >= 1000000) return (n / 1000000).toFixed(1) + "M";
+    if (n >= 1000) return (n / 1000).toFixed(1) + "K";
+    return String(n);
+  }
+
+  function formatTimeUntil(isoStr) {
+    if (!isoStr) return "";
+    var d = new Date(isoStr);
+    var now = Date.now();
+    var diff = d.getTime() - now;
+    if (diff <= 0) return "Resets soon";
+    var hours = Math.floor(diff / 3600000);
+    var minutes = Math.floor((diff % 3600000) / 60000);
+    var relative;
+    if (hours > 24) {
+      var days = Math.floor(hours / 24);
+      relative = days + "d " + (hours % 24) + "h";
+    } else if (hours > 0) {
+      relative = hours + "h " + minutes + "m";
+    } else {
+      relative = minutes + "m";
+    }
+    // Absolute time: "Mon 2/17 15:00" or "15:00" if today
+    var nowDate = new Date(now);
+    var month = d.getMonth() + 1;
+    var day = d.getDate();
+    var hh = String(d.getHours()).padStart(2, "0");
+    var mm = String(d.getMinutes()).padStart(2, "0");
+    var sameDay = d.getFullYear() === nowDate.getFullYear() && d.getMonth() === nowDate.getMonth() && d.getDate() === nowDate.getDate();
+    var abs = sameDay ? hh + ":" + mm : month + "/" + day + " " + hh + ":" + mm;
+    return "Resets in " + relative + " (" + abs + ")";
+  }
+
+  function updateRateLimitBar(prefix, utilization, resetsAt) {
+    var pctEl = $("usage-pct-" + prefix);
+    var fillEl = $("usage-fill-" + prefix);
+    var resetEl = $("usage-reset-" + prefix);
+    var groupEl = $("usage-bar-" + prefix);
+    if (!pctEl || !fillEl || !resetEl) return;
+
+    if (utilization == null) {
+      if (groupEl) groupEl.classList.add("hidden");
+      return;
+    }
+    if (groupEl) groupEl.classList.remove("hidden");
+
+    var pct = Math.max(0, Math.min(100, Math.round(utilization)));
+    pctEl.textContent = pct + "%";
+    fillEl.style.width = pct + "%";
+    fillEl.className = "usage-bar-fill";
+    if (prefix === "extra") fillEl.classList.add("usage-bar-fill-extra");
+    if (pct >= 90) fillEl.classList.add("critical");
+    else if (pct >= 70) fillEl.classList.add("warn");
+
+    resetEl.textContent = formatTimeUntil(resetsAt);
+  }
+
+  function handleUsageData(msg) {
+    if (!usageLoading || !usageError || !usageBars) return;
+    usageLoading.style.display = "none";
+
+    if (msg.error) {
+      usageError.textContent = msg.error;
+      usageError.classList.remove("hidden");
+      usageBars.classList.add("hidden");
+      return;
+    }
+
+    usageError.classList.add("hidden");
+    usageBars.classList.remove("hidden");
+    var data = msg.data || {};
+
+    // Session (five_hour)
+    var session = data.five_hour || {};
+    updateRateLimitBar("session", session.utilization, session.resets_at);
+
+    // Weekly all models (seven_day)
+    var weekly = data.seven_day || {};
+    updateRateLimitBar("weekly", weekly.utilization, weekly.resets_at);
+
+    // Weekly Sonnet only (seven_day_sonnet)
+    var sonnet = data.seven_day_sonnet || {};
+    updateRateLimitBar("sonnet", sonnet.utilization, sonnet.resets_at);
+
+    // Extra usage
+    var extra = data.extra_usage || {};
+    var extraGroup = $("usage-bar-extra");
+    if (extra.is_enabled) {
+      if (extraGroup) extraGroup.classList.remove("hidden");
+      // Compute reset time as first of next month
+      var now = new Date();
+      var nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
+      updateRateLimitBar("extra", extra.utilization, nextMonth.toISOString());
+      var extraResetEl = $("usage-reset-extra");
+      if (extraResetEl && extra.monthly_limit != null) {
+        var usedDollars = (extra.used_credits / 100).toFixed(2);
+        var limitDollars = (extra.monthly_limit / 100).toFixed(2);
+        extraResetEl.textContent = "$" + usedDollars + " / $" + limitDollars;
+      }
+    } else {
+      if (extraGroup) extraGroup.classList.add("hidden");
+    }
+
+    usageRateLimitFetched = true;
+  }
+
+  function requestUsageData() {
+    if (!ws || ws.readyState !== 1) return;
+    if (usageLoading) usageLoading.style.display = "";
+    if (usageError) usageError.classList.add("hidden");
+    ws.send(JSON.stringify({ type: "get_usage" }));
+  }
+
+  function updateUsagePanel() {
+    if (!usageCostEl) return;
+    usageCostEl.textContent = "$" + sessionUsage.cost.toFixed(4);
+    usageInputEl.textContent = formatTokens(sessionUsage.input);
+    usageOutputEl.textContent = formatTokens(sessionUsage.output);
+    usageCacheReadEl.textContent = formatTokens(sessionUsage.cacheRead);
+    usageCacheWriteEl.textContent = formatTokens(sessionUsage.cacheWrite);
+    usageTurnsEl.textContent = String(sessionUsage.turns);
+  }
+
+  function accumulateUsage(cost, usage) {
+    if (cost != null) sessionUsage.cost += cost;
+    if (usage) {
+      sessionUsage.input += usage.input_tokens || usage.inputTokens || 0;
+      sessionUsage.output += usage.output_tokens || usage.outputTokens || 0;
+      sessionUsage.cacheRead += usage.cache_read_input_tokens || usage.cacheReadInputTokens || 0;
+      sessionUsage.cacheWrite += usage.cache_creation_input_tokens || usage.cacheCreationInputTokens || 0;
+    }
+    sessionUsage.turns++;
+    updateUsagePanel();
+  }
+
+  function resetUsage() {
+    sessionUsage = { cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
+    updateUsagePanel();
+    if (usagePanel) usagePanel.classList.add("hidden");
+    if (usageFab) usageFab.classList.remove("active");
+    if (usageHeaderBtn) usageHeaderBtn.classList.remove("active");
+    usageRateLimitFetched = false;
+  }
+
+  function toggleUsagePanel() {
+    if (!usagePanel) return;
+    var isHidden = usagePanel.classList.toggle("hidden");
+    if (usageFab) usageFab.classList.toggle("active", !isHidden);
+    if (usageHeaderBtn) usageHeaderBtn.classList.toggle("active", !isHidden);
+    // Fetch rate limit data when opening
+    if (!isHidden) {
+      requestUsageData();
+    }
+    refreshIcons();
+  }
+
+  if (usagePanelClose) {
+    usagePanelClose.addEventListener("click", function () {
+      usagePanel.classList.add("hidden");
+      if (usageFab) usageFab.classList.remove("active");
+      if (usageHeaderBtn) usageHeaderBtn.classList.remove("active");
+    });
+  }
+
+  if (usageFab) {
+    usageFab.addEventListener("click", function () {
+      toggleUsagePanel();
+    });
+  }
+
+  if (usageHeaderBtn) {
+    usageHeaderBtn.addEventListener("click", function () {
+      toggleUsagePanel();
+    });
+  }
+
   function addToMessages(el) {
     if (prependAnchor) messagesEl.insertBefore(el, prependAnchor);
     else messagesEl.appendChild(el);
   }
 
+  var newMsgBtn = $("new-msg-btn");
+  var newMsgBtnDefault = "\u2193 Latest";
+  var newMsgBtnActivity = "\u2193 New activity";
+
+  messagesEl.addEventListener("scroll", function () {
+    var distFromBottom = messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight;
+    isUserScrolledUp = distFromBottom > scrollThreshold;
+    if (isUserScrolledUp) {
+      if (newMsgBtn.classList.contains("hidden")) {
+        newMsgBtn.textContent = newMsgBtnDefault;
+      }
+      newMsgBtn.classList.remove("hidden");
+    } else {
+      newMsgBtn.classList.add("hidden");
+      newMsgBtn.textContent = newMsgBtnDefault;
+    }
+  });
+
+  newMsgBtn.addEventListener("click", function () {
+    forceScrollToBottom();
+  });
+
   function scrollToBottom() {
     if (prependAnchor) return;
+    if (isUserScrolledUp) {
+      newMsgBtn.textContent = newMsgBtnActivity;
+      newMsgBtn.classList.remove("hidden");
+      return;
+    }
+    requestAnimationFrame(function () {
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+    });
+  }
+
+  function forceScrollToBottom() {
+    if (prependAnchor) return;
+    isUserScrolledUp = false;
+    newMsgBtn.classList.add("hidden");
+    newMsgBtn.textContent = newMsgBtnDefault;
     requestAnimationFrame(function () {
       messagesEl.scrollTop = messagesEl.scrollHeight;
     });
@@ -612,7 +914,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
 
     div.appendChild(bubble);
     addToMessages(div);
-    scrollToBottom();
+    forceScrollToBottom();
   }
 
   function ensureAssistantBlock() {
@@ -725,10 +1027,14 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     historyTotal = 0;
     prependAnchor = null;
     loadingMore = false;
+    isUserScrolledUp = false;
+    newMsgBtn.classList.add("hidden");
     setRewindMode(false);
+    removeSearchTimeline();
     setActivity(null);
     setStatus("connected");
     enableMainInput();
+    resetUsage();
   }
 
   // --- WebSocket ---
@@ -769,6 +1075,9 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
       reconnectDelay = 1000;
       if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
 
+      // Reset terminal xterm instances (server will send fresh term_list)
+      resetTerminals();
+
       // Re-send push subscription on reconnect
       if (window._pushSubscription) {
         try {
@@ -829,6 +1138,13 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           prependOlderHistory(msg.items, msg.meta);
           break;
 
+        case "history_done":
+          var pendingQuery = getActiveSearchQuery();
+          if (pendingQuery) {
+            requestAnimationFrame(function() { buildSearchTimeline(pendingQuery); });
+          }
+          break;
+
         case "info":
           projectName = msg.project || msg.cwd;
           if (msg.slug) currentSlug = msg.slug;
@@ -875,6 +1191,14 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           });
           break;
 
+        case "model_info":
+          updateModelSelector(msg.model, msg.models || []);
+          break;
+
+        case "usage_data":
+          handleUsageData(msg);
+          break;
+
         case "client_count":
           var countEl = document.getElementById("client-count");
           if (countEl) {
@@ -896,10 +1220,24 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           renderSessionList(msg.sessions || []);
           break;
 
+        case "search_results":
+          handleSearchResults(msg);
+          break;
+
         case "session_switched":
+          // Save draft from outgoing session
+          if (activeSessionId && inputEl.value) {
+            sessionDrafts[activeSessionId] = inputEl.value;
+          } else if (activeSessionId) {
+            delete sessionDrafts[activeSessionId];
+          }
           activeSessionId = msg.id;
           cliSessionId = msg.cliSessionId || null;
           resetClientState();
+          // Restore draft for incoming session
+          var draft = sessionDrafts[activeSessionId] || "";
+          inputEl.value = draft;
+          autoResize();
           break;
 
         case "session_id":
@@ -932,6 +1270,14 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           }
           break;
 
+        case "compacting":
+          if (msg.active) {
+            setActivity("Compacting conversation...");
+          } else {
+            setActivity(randomThinkingVerb() + "...");
+          }
+          break;
+
         case "thinking_start":
           startThinking();
           break;
@@ -998,11 +1344,13 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           }
           break;
 
-        case "tool_result":
-          if (msg.content != null) {
+        case "tool_result": {
             var tr = getTools()[msg.id];
             if (tr && tr.hidden) break; // skip hidden plan tools
-            updateToolResult(msg.id, msg.content, msg.is_error || false);
+            // Always call updateToolResult for Edit (to show diff from input), or when content exists
+            if (msg.content != null || (tr && tr.name === "Edit" && tr.input && tr.input.old_string)) {
+              updateToolResult(msg.id, msg.content || "", msg.is_error || false);
+            }
             // Refresh file browser if an Edit/Write tool modified the open file
             if (!msg.is_error && tr && (tr.name === "Edit" || tr.name === "Write") && tr.input && tr.input.file_path) {
               refreshIfOpen(tr.input.file_path);
@@ -1010,6 +1358,11 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           }
           break;
 
+        case "ask_user_answered":
+          markAskUserAnswered(msg.toolId);
+          stopUrgentBlink();
+          break;
+
         case "permission_request":
           renderPermissionRequest(msg.requestId, msg.toolName, msg.toolInput, msg.decisionReason);
           startUrgentBlink();
@@ -1051,6 +1404,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           markAllToolsDone();
           finalizeAssistantBlock();
           addTurnMeta(msg.cost, msg.duration);
+          accumulateUsage(msg.cost, msg.usage);
           break;
 
         case "done":
@@ -1104,12 +1458,28 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           handleFsRead(msg);
           break;
 
+        case "fs_file_changed":
+          handleFileChanged(msg);
+          break;
+
+        case "term_list":
+          handleTermList(msg);
+          break;
+
+        case "term_created":
+          handleTermCreated(msg);
+          break;
+
         case "term_output":
           handleTermOutput(msg);
           break;
 
         case "term_exited":
-          handleTermExited();
+          handleTermExited(msg);
+          break;
+
+        case "term_closed":
+          handleTermClosed(msg);
           break;
       }
   }
@@ -1241,6 +1611,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     messageUuidMap: function() { return messageUuidMap; },
     addUserMessage: addUserMessage,
     addSystemMessage: addSystemMessage,
+    toggleUsagePanel: toggleUsagePanel,
   });
 
   // --- Notifications module (viewport, banners, notifications, debug, service worker) ---

package/lib/public/css/base.css

@@ -8,8 +8,15 @@
   padding: 0;
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255,255,255,0.15) transparent;
 }
 
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
+
 :root {
   --bg: #2F2E2B;
   --bg-alt: #35332F;