claude-relay 2.2.4 → 2.3.1

package/lib/public/modules/input.js

@@ -11,10 +11,12 @@ var slashFiltered = [];
 var isComposing = false;
 var isRemoteInput = false;
 
-var builtinCommands = [
+export var builtinCommands = [
   { name: "clear", desc: "Clear conversation" },
+  { name: "context", desc: "Context window usage" },
   { name: "rewind", desc: "Toggle rewind mode" },
   { name: "usage", desc: "Toggle usage panel" },
+  { name: "status", desc: "Process status and resource usage" },
 ];
 
 // --- Send ---
@@ -25,10 +27,12 @@ export function sendMessage() {
   hideSlashMenu();
 
   if (text === "/clear") {
-    ctx.messagesEl.innerHTML = "";
     ctx.inputEl.value = "";
     clearPendingImages();
     autoResize();
+    if (ctx.ws && ctx.connected) {
+      ctx.ws.send(JSON.stringify({ type: "new_session" }));
+    }
     return;
   }
 
@@ -44,6 +48,14 @@ export function sendMessage() {
     return;
   }
 
+  if (text === "/context") {
+    ctx.inputEl.value = "";
+    clearPendingImages();
+    autoResize();
+    if (ctx.toggleContextPanel) ctx.toggleContextPanel();
+    return;
+  }
+
   if (text === "/usage") {
     ctx.inputEl.value = "";
     clearPendingImages();
@@ -52,6 +64,14 @@ export function sendMessage() {
     return;
   }
 
+  if (text === "/status") {
+    ctx.inputEl.value = "";
+    clearPendingImages();
+    autoResize();
+    if (ctx.toggleStatusPanel) ctx.toggleStatusPanel();
+    return;
+  }
+
   if (!ctx.connected) {
     ctx.addSystemMessage("Not connected — message not sent.", true);
     return;
@@ -81,6 +101,67 @@ export function autoResize() {
   ctx.inputEl.style.height = Math.min(ctx.inputEl.scrollHeight, 120) + "px";
 }
 
+// --- File path extraction from clipboard ---
+function extractFilePaths(cd) {
+  var paths = [];
+
+  // 1. Check text/uri-list for file:// URIs (Finder on some browsers)
+  var uriList = cd.getData("text/uri-list");
+  if (uriList) {
+    var lines = uriList.split(/\r?\n/);
+    for (var i = 0; i < lines.length; i++) {
+      var line = lines[i].trim();
+      if (line && !line.startsWith("#") && line.startsWith("file://")) {
+        paths.push(decodeURIComponent(line.replace("file://", "")));
+      }
+    }
+    if (paths.length > 0) return paths;
+  }
+
+  // 2. Check if text/plain looks like file path(s) while files are present
+  //    (Finder Cmd+C puts filename in text/plain, Cmd+Option+C puts full path)
+  if (cd.files && cd.files.length > 0) {
+    var plainText = cd.getData("text/plain");
+    if (plainText) {
+      var textLines = plainText.split(/\r?\n/).filter(function (l) { return l.trim(); });
+      for (var i = 0; i < textLines.length; i++) {
+        var p = textLines[i].trim();
+        if (p.startsWith("/") || p.startsWith("~")) {
+          paths.push(p);
+        }
+      }
+      if (paths.length > 0) return paths;
+    }
+    // 3. Fallback: files present but no path in text, use filenames
+    for (var i = 0; i < cd.files.length; i++) {
+      var f = cd.files[i];
+      if (f.name && f.type.indexOf("image/") !== 0) {
+        paths.push(f.name);
+      }
+    }
+  }
+
+  return paths;
+}
+
+// --- Insert text at cursor in textarea ---
+function insertTextAtCursor(text) {
+  var el = ctx.inputEl;
+  el.focus();
+  var start = el.selectionStart;
+  var end = el.selectionEnd;
+  var before = el.value.substring(0, start);
+  var after = el.value.substring(end);
+  // Add space before if cursor is right after non-space text
+  if (before.length > 0 && before[before.length - 1] !== " " && before[before.length - 1] !== "\n") {
+    text = " " + text;
+  }
+  el.value = before + text + after;
+  el.selectionStart = el.selectionEnd = start + text.length;
+  autoResize();
+  sendInputSync();
+}
+
 // --- Image paste ---
 function addPendingImage(dataUrl) {
   var commaIdx = dataUrl.indexOf(",");
@@ -125,6 +206,9 @@ function renderInputPreviews() {
       wrap.className = "image-preview-thumb";
       var img = document.createElement("img");
       img.src = "data:" + pendingImages[idx].mediaType + ";base64," + pendingImages[idx].data;
+      img.addEventListener("click", function () {
+        if (ctx.showImageModal) ctx.showImageModal(this.src);
+      });
       var removeBtn = document.createElement("button");
       removeBtn.className = "image-preview-remove";
       removeBtn.innerHTML = iconHtml("x");
@@ -385,6 +469,16 @@ export function initInput(_ctx) {
       }
     }
 
+    // File path paste: detect file:// URIs or Finder file references
+    if (!found) {
+      var filePaths = extractFilePaths(cd);
+      if (filePaths.length > 0) {
+        e.preventDefault();
+        insertTextAtCursor(filePaths.join("\n"));
+        found = true;
+      }
+    }
+
     // Long text paste → pasted chip
     if (!found) {
       var pastedText = cd.getData("text/plain");

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 footerStatus = $("footer-status");
     if (!footerBtn || !footerMenu) return;
 
     footerBtn.addEventListener("click", function (e) {
@@ -195,6 +196,14 @@ export function initNotifications(_ctx) {
         }, 2000);
       });
     }
+
+    if (footerStatus) {
+      footerStatus.addEventListener("click", function (e) {
+        e.stopPropagation();
+        footerMenu.classList.add("hidden");
+        if (ctx.toggleStatusPanel) ctx.toggleStatusPanel();
+      });
+    }
   })();
 
   // --- Onboarding banner (HTTPS / Push) ---
@@ -371,14 +380,20 @@ export function initNotifications(_ctx) {
   }
 
   function sendPushSubscription(sub) {
+    var prevEndpoint = localStorage.getItem("push-endpoint");
     window._pushSubscription = sub;
+    localStorage.setItem("push-endpoint", sub.endpoint);
     var json = sub.toJSON();
+    var payload = { subscription: json };
+    if (prevEndpoint && prevEndpoint !== sub.endpoint) {
+      payload.replaceEndpoint = prevEndpoint;
+    }
     if (ctx.ws && ctx.ws.readyState === 1) {
-      ctx.ws.send(JSON.stringify({ type: "push_subscribe", subscription: json }));
+      ctx.ws.send(JSON.stringify({ type: "push_subscribe", subscription: json, replaceEndpoint: payload.replaceEndpoint || null }));
     } else {
       fetch(basePath + "api/push-subscribe", {
         method: "POST", headers: { "Content-Type": "application/json" },
-        credentials: "same-origin", body: JSON.stringify(json),
+        credentials: "same-origin", body: JSON.stringify(payload),
       });
     }
   }
@@ -397,6 +412,15 @@ export function initNotifications(_ctx) {
     }).then(function (sub) {
       sendPushSubscription(sub);
       localStorage.setItem("notif-push", "1");
+      hideOnboarding();
+      localStorage.setItem("onboarding-dismissed", "1");
+      // Show a welcome notification so the user knows it works
+      navigator.serviceWorker.ready.then(function (reg) {
+        reg.showNotification("\ud83c\udf89 Welcome to Claude Relay!", {
+          body: "\ud83d\udd14 You\u2019ll be notified when Claude responds.",
+          tag: "claude-welcome",
+        });
+      }).catch(function () {});
     }).catch(function () {
       notifTogglePush.checked = false;
       localStorage.setItem("notif-push", "0");
@@ -454,6 +478,7 @@ export function initNotifications(_ctx) {
             window._pushSubscription = sub;
             notifTogglePush.checked = true;
             sendPushSubscription(sub);
+            hideOnboarding();
           } else if (serverKey && localStorage.getItem("notif-push") === "1") {
             // Had push enabled but subscription is gone (VAPID key change), re-subscribe
             var raw = atob(serverKey.replace(/-/g, "+").replace(/_/g, "/"));
@@ -474,7 +499,8 @@ export function initNotifications(_ctx) {
             // Skip if setup was just completed (setup-done flag)
             var isStandalone = window.matchMedia("(display-mode:standalone)").matches || navigator.standalone;
             if (isStandalone && !localStorage.getItem("setup-done")) {
-              location.href = "/setup";
+              var isTailscale = /^100\./.test(location.hostname);
+              location.href = "/setup" + (isTailscale ? "" : "?mode=lan");
               return;
             }
             // Browser: show onboarding banner

package/lib/public/modules/qrcode.js

@@ -1,5 +1,14 @@
 import { copyToClipboard } from './utils.js';
 
+function getShareUrl() {
+  var url = window.location.href;
+  var h = window.location.hostname;
+  if ((h === "localhost" || h === "127.0.0.1") && window.__lanHost) {
+    url = url.replace(h + ":" + window.location.port, window.__lanHost);
+  }
+  return url;
+}
+
 export function initQrCode() {
   var $ = function (id) { return document.getElementById(id); };
   var qrBtn = $("qr-btn");
@@ -9,7 +18,7 @@ export function initQrCode() {
 
   qrBtn.addEventListener("click", function (e) {
     e.stopPropagation();
-    var url = window.location.href;
+    var url = getShareUrl();
 
     // Use Web Share API if available
     if (navigator.share) {
@@ -30,7 +39,7 @@ export function initQrCode() {
 
   // click URL to copy
   qrUrl.addEventListener("click", function () {
-    var url = window.location.href;
+    var url = getShareUrl();
     copyToClipboard(url).then(function () {
       qrUrl.innerHTML = "Copied!";
       qrUrl.classList.add("copied");

package/lib/public/modules/rewind.js

@@ -6,7 +6,8 @@ var rewindMode = false;
 var pendingRewindUuid = null;
 var rewindBannerEl = null;
 var rewindScrollHandler = null;
-var rewindModal, rewindSummary, rewindFilesList, rewindConfirmBtn, rewindCancelBtn;
+var rewindModal, rewindSummary, rewindFilesList, rewindConfirmBtn, rewindCancelBtn, rewindModeOptions;
+var cachedPreview = null;
 
 export function setRewindMode(on) {
   rewindMode = on;
@@ -64,12 +65,53 @@ function initiateRewind(uuid) {
   }
 }
 
+function getSelectedMode() {
+  if (!rewindModeOptions) return "both";
+  var checked = rewindModeOptions.querySelector('input[name="rewind-mode"]:checked');
+  return checked ? checked.value : "both";
+}
+
+function updateSummaryForMode() {
+  if (!cachedPreview) return;
+  var mode = getSelectedMode();
+  var fileCount = cachedPreview.fileCount;
+  var insertions = cachedPreview.insertions;
+  var deletions = cachedPreview.deletions;
+
+  if (mode === "chat") {
+    rewindSummary.textContent = "Conversation will be rewound. Files will not be changed.";
+    rewindFilesList.style.display = "none";
+  } else if (fileCount > 0) {
+    var summary = fileCount + " file" + (fileCount !== 1 ? "s" : "") + " will be restored.";
+    if (insertions || deletions) summary += " (+" + insertions + " / -" + deletions + " lines)";
+    if (mode === "files") summary += " Conversation will not be changed.";
+    rewindSummary.textContent = summary;
+    rewindFilesList.style.display = "";
+  } else {
+    if (mode === "files") {
+      rewindSummary.textContent = "No file changes to restore.";
+    } else {
+      rewindSummary.textContent = "No file changes to restore. Conversation will be rewound.";
+    }
+    rewindFilesList.style.display = "none";
+  }
+}
+
 export function showRewindModal(data) {
   var p = data.preview || data;
   var filePaths = p.filesChanged || p.filePaths || p.files || [];
   var fileCount = filePaths.length;
   var insertions = p.insertions || 0;
   var deletions = p.deletions || 0;
+
+  cachedPreview = { fileCount: fileCount, insertions: insertions, deletions: deletions };
+
+  // Reset radio to default
+  if (rewindModeOptions) {
+    var defaultRadio = rewindModeOptions.querySelector('input[value="both"]');
+    if (defaultRadio) defaultRadio.checked = true;
+  }
+
   if (fileCount > 0) {
     var summary = fileCount + " file" + (fileCount !== 1 ? "s" : "") + " will be restored.";
     if (insertions || deletions) summary += " (+" + insertions + " / -" + deletions + " lines)";
@@ -264,6 +306,12 @@ export function initRewind(_ctx) {
   rewindFilesList = ctx.$("rewind-files-list");
   rewindConfirmBtn = ctx.$("rewind-confirm");
   rewindCancelBtn = ctx.$("rewind-cancel");
+  rewindModeOptions = ctx.$("rewind-mode-options");
+
+  // Update summary when rewind mode radio changes
+  if (rewindModeOptions) {
+    rewindModeOptions.addEventListener("change", updateSummaryForMode);
+  }
 
   // Click on user message bubble to rewind
   ctx.messagesEl.addEventListener("click", function(e) {
@@ -275,7 +323,8 @@ export function initRewind(_ctx) {
 
   rewindConfirmBtn.addEventListener("click", function() {
     if (pendingRewindUuid && ctx.ws && ctx.connected) {
-      ctx.ws.send(JSON.stringify({ type: "rewind_execute", uuid: pendingRewindUuid }));
+      var mode = getSelectedMode();
+      ctx.ws.send(JSON.stringify({ type: "rewind_execute", uuid: pendingRewindUuid, mode: mode }));
     }
     hideRewindModal();
   });

package/lib/public/modules/terminal.js

@@ -1,6 +1,7 @@
 import { iconHtml, refreshIcons } from './icons.js';
 import { closeSidebar } from './sidebar.js';
 import { closeFileViewer } from './filebrowser.js';
+import { copyToClipboard } from './utils.js';
 
 var ctx;
 var tabs = new Map(); // termId -> { id, title, exited, xterm, fitAddon, bodyEl }
@@ -11,6 +12,7 @@ var isTouchDevice = "ontouchstart" in window;
 var viewportHandler = null;
 var resizeObserver = null;
 var toolbarBound = false;
+var termCtxMenu = null;
 
 // --- Init ---
 export function initTerminal(_ctx) {
@@ -239,6 +241,11 @@ function createXtermForTab(tab) {
     }
   });
 
+  // Right-click context menu
+  bodyEl.addEventListener("contextmenu", function (e) {
+    showTermCtxMenu(e, tab);
+  });
+
   tab.xterm = xterm;
   tab.fitAddon = fitAddon;
   tab.bodyEl = bodyEl;
@@ -527,6 +534,72 @@ export function resetTerminals() {
   renderTabBar();
 }
 
+// --- Terminal context menu ---
+function closeTermCtxMenu() {
+  if (termCtxMenu) {
+    termCtxMenu.remove();
+    termCtxMenu = null;
+  }
+}
+
+function showTermCtxMenu(e, tab) {
+  e.preventDefault();
+  e.stopPropagation();
+  closeTermCtxMenu();
+
+  var menu = document.createElement("div");
+  menu.className = "term-ctx-menu";
+
+  // Copy
+  var copyItem = document.createElement("button");
+  copyItem.className = "term-ctx-item";
+  copyItem.innerHTML = iconHtml("clipboard-copy") + " <span>Copy Terminal</span>";
+  copyItem.addEventListener("click", function (ev) {
+    ev.stopPropagation();
+    closeTermCtxMenu();
+    if (!tab.xterm) return;
+    tab.xterm.selectAll();
+    var text = tab.xterm.getSelection();
+    tab.xterm.clearSelection();
+    if (text) copyToClipboard(text);
+  });
+  menu.appendChild(copyItem);
+
+  // Clear
+  var clearItem = document.createElement("button");
+  clearItem.className = "term-ctx-item";
+  clearItem.innerHTML = iconHtml("trash-2") + " <span>Clear Terminal</span>";
+  clearItem.addEventListener("click", function (ev) {
+    ev.stopPropagation();
+    closeTermCtxMenu();
+    if (!tab.xterm) return;
+    tab.xterm.clear();
+  });
+  menu.appendChild(clearItem);
+
+  // Position at mouse cursor
+  menu.style.left = e.clientX + "px";
+  menu.style.top = e.clientY + "px";
+  document.body.appendChild(menu);
+
+  // Clamp to viewport
+  var rect = menu.getBoundingClientRect();
+  if (rect.right > window.innerWidth) {
+    menu.style.left = (window.innerWidth - rect.width - 4) + "px";
+  }
+  if (rect.bottom > window.innerHeight) {
+    menu.style.top = (window.innerHeight - rect.height - 4) + "px";
+  }
+
+  termCtxMenu = menu;
+  refreshIcons();
+
+  // Close on outside click (next tick to avoid immediate trigger)
+  setTimeout(function () {
+    document.addEventListener("click", closeTermCtxMenu, { once: true });
+  }, 0);
+}
+
 // --- Mobile toolbar ---
 var KEY_MAP = {
   tab: "\t",

package/lib/public/modules/tools.js

@@ -1,7 +1,8 @@
 import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons, randomThinkingVerb } from './icons.js';
 import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks } from './markdown.js';
-import { renderDiffPre } from './rewind.js';
+import { renderUnifiedDiff, renderSplitDiff, renderPatchDiff } from './diff.js';
+import { openFile } from './filebrowser.js';
 
 var ctx;
 
@@ -257,6 +258,7 @@ function permissionInputSummary(toolName, input) {
 }
 
 export function renderPermissionRequest(requestId, toolName, toolInput, decisionReason) {
+  if (pendingPermissions[requestId]) return;
   ctx.finalizeAssistantBlock();
   stopThinking();
 
@@ -352,6 +354,7 @@ export function renderPermissionRequest(requestId, toolName, toolInput, decision
 }
 
 function renderPlanPermission(requestId) {
+  if (pendingPermissions[requestId]) return;
   var container = document.createElement("div");
   container.className = "permission-container plan-permission";
   container.dataset.requestId = requestId;
@@ -813,7 +816,28 @@ export function updateToolExecuting(id, name, input) {
   if (!tool) return;
 
   tool.input = input;
-  tool.el.querySelector(".tool-desc").textContent = toolSummary(name, input);
+  var descEl = tool.el.querySelector(".tool-desc");
+  descEl.textContent = toolSummary(name, input);
+
+  // Make file path clickable for Read/Edit/Write tools
+  var filePath = input && input.file_path;
+  if (filePath && (name === "Read" || name === "Edit" || name === "Write")) {
+    descEl.classList.add("tool-desc-link");
+    descEl.dataset.filePath = filePath;
+    descEl.insertAdjacentHTML("beforeend", '<span class="tool-desc-link-icon">' + iconHtml("external-link") + '</span>');
+    refreshIcons();
+    (function (toolName, toolInput) {
+      descEl.onclick = function (e) {
+        e.stopPropagation();
+        if (toolName === "Edit" && toolInput && (toolInput.old_string || toolInput.new_string)) {
+          openFile(filePath, { diff: { oldStr: toolInput.old_string || "", newStr: toolInput.new_string || "" } });
+        } else {
+          openFile(filePath);
+        }
+      };
+    })(name, input);
+  }
+
   ctx.setActivity(toolActivityText(name, input));
 
   var subtitleText = tool.el.querySelector(".tool-subtitle-text");
@@ -822,112 +846,26 @@ export function updateToolExecuting(id, name, input) {
   ctx.scrollToBottom();
 }
 
-function buildUnifiedDiff(oldLines, newLines) {
-  var body = document.createElement("div");
-  body.className = "edit-diff-body";
-
-  var gutter = document.createElement("pre");
-  gutter.className = "edit-diff-gutter";
-
-  var content = document.createElement("pre");
-  content.className = "edit-diff-content";
-
-  var gutterLines = [];
-
-  for (var i = 0; i < oldLines.length; i++) {
-    gutterLines.push(String(i + 1));
-    var span = document.createElement("span");
-    span.className = "diff-del";
-    span.textContent = "- " + oldLines[i];
-    content.appendChild(span);
-    content.appendChild(document.createTextNode("\n"));
-  }
-  for (var i = 0; i < newLines.length; i++) {
-    gutterLines.push(String(i + 1));
-    var span = document.createElement("span");
-    span.className = "diff-add";
-    span.textContent = "+ " + newLines[i];
-    content.appendChild(span);
-    if (i < newLines.length - 1) content.appendChild(document.createTextNode("\n"));
-  }
-
-  gutter.textContent = gutterLines.join("\n");
-  body.appendChild(gutter);
-  body.appendChild(content);
-  return body;
-}
-
-function buildSplitDiff(oldLines, newLines) {
-  var body = document.createElement("div");
-  body.className = "edit-diff-body edit-diff-split";
-
-  var leftGutter = document.createElement("pre");
-  leftGutter.className = "edit-diff-gutter";
-  var leftContent = document.createElement("pre");
-  leftContent.className = "edit-diff-content edit-diff-side-old";
-  var rightGutter = document.createElement("pre");
-  rightGutter.className = "edit-diff-gutter";
-  var rightContent = document.createElement("pre");
-  rightContent.className = "edit-diff-content edit-diff-side-new";
-
-  var maxLen = Math.max(oldLines.length, newLines.length);
-  var leftNums = [];
-  var rightNums = [];
-
-  for (var i = 0; i < maxLen; i++) {
-    if (i < oldLines.length) {
-      leftNums.push(String(i + 1));
-      var span = document.createElement("span");
-      span.className = "diff-del";
-      span.textContent = oldLines[i];
-      leftContent.appendChild(span);
-    } else {
-      leftNums.push("");
-      leftContent.appendChild(document.createTextNode(""));
-    }
-    if (i < oldLines.length - 1 || (i >= oldLines.length && i < maxLen - 1)) {
-      leftContent.appendChild(document.createTextNode("\n"));
-    }
-
-    if (i < newLines.length) {
-      rightNums.push(String(i + 1));
-      var span = document.createElement("span");
-      span.className = "diff-add";
-      span.textContent = newLines[i];
-      rightContent.appendChild(span);
-    } else {
-      rightNums.push("");
-      rightContent.appendChild(document.createTextNode(""));
-    }
-    if (i < newLines.length - 1 || (i >= newLines.length && i < maxLen - 1)) {
-      rightContent.appendChild(document.createTextNode("\n"));
-    }
-  }
-
-  leftGutter.textContent = leftNums.join("\n");
-  rightGutter.textContent = rightNums.join("\n");
-
-  body.appendChild(leftGutter);
-  body.appendChild(leftContent);
-  body.appendChild(rightGutter);
-  body.appendChild(rightContent);
-  return body;
-}
-
 function renderEditDiff(oldStr, newStr, filePath) {
   var wrapper = document.createElement("div");
   wrapper.className = "edit-diff";
-
-  var oldLines = oldStr.split("\n");
-  var newLines = newStr.split("\n");
+  var lang = getLanguageFromPath(filePath);
 
   // Header with file path and split toggle (desktop only)
   var header = document.createElement("div");
   header.className = "edit-diff-header";
 
   var pathSpan = document.createElement("span");
-  pathSpan.className = "edit-diff-path";
+  pathSpan.className = "edit-diff-path edit-diff-path-link";
   pathSpan.textContent = filePath || "";
+  if (filePath) {
+    (function (fp, os, ns) {
+      pathSpan.addEventListener("click", function (e) {
+        e.stopPropagation();
+        openFile(fp, { diff: { oldStr: os || "", newStr: ns || "" } });
+      });
+    })(filePath, oldStr, newStr);
+  }
   header.appendChild(pathSpan);
 
   var isMobile = "ontouchstart" in window;
@@ -952,27 +890,29 @@ function renderEditDiff(oldStr, newStr, filePath) {
 
   wrapper.appendChild(header);
 
-  var currentBody = buildUnifiedDiff(oldLines, newLines);
+  var currentBody = renderUnifiedDiff(oldStr, newStr, lang);
   wrapper.appendChild(currentBody);
 
-  unifiedBtn.addEventListener("click", function () {
+  unifiedBtn.addEventListener("click", function (e) {
+    e.stopPropagation();
     if (!isSplit) return;
     isSplit = false;
     unifiedBtn.classList.add("active");
     splitBtn.classList.remove("active");
     wrapper.removeChild(currentBody);
-    currentBody = buildUnifiedDiff(oldLines, newLines);
+    currentBody = renderUnifiedDiff(oldStr, newStr, lang);
     wrapper.appendChild(currentBody);
     refreshIcons();
   });
 
-  splitBtn.addEventListener("click", function () {
+  splitBtn.addEventListener("click", function (e) {
+    e.stopPropagation();
     if (isSplit) return;
     isSplit = true;
     splitBtn.classList.add("active");
     unifiedBtn.classList.remove("active");
     wrapper.removeChild(currentBody);
-    currentBody = buildSplitDiff(oldLines, newLines);
+    currentBody = renderSplitDiff(oldStr, newStr, lang);
     wrapper.appendChild(currentBody);
     refreshIcons();
   });
@@ -1075,7 +1015,8 @@ export function updateToolResult(id, content, isError) {
   if (hasEditDiff) {
     resultBlock.appendChild(renderEditDiff(tool.input.old_string, tool.input.new_string, tool.input.file_path));
   } else if (!isError && isDiffContent(displayContent)) {
-    resultBlock.appendChild(renderDiffPre(displayContent));
+    var patchLang = tool.input && tool.input.file_path ? getLanguageFromPath(tool.input.file_path) : null;
+    resultBlock.appendChild(renderPatchDiff(displayContent, patchLang));
   } else if (!isError && tool.name === "Read" && tool.input && tool.input.file_path) {
     var parsed = parseLineNumberedContent(displayContent);
     if (parsed) {