From a36c2e46296ef9af8a23d51ac2fed429c87ae90f Mon Sep 17 00:00:00 2001
From: Tobias Gesellchen <tobias@gesellix.de>
Date: Sat, 7 Mar 2026 12:56:06 +0100
Subject: [PATCH] Prevent browser freeze for large payloads (#101)

---
 pkg/service/handlers/web/index.html   |  5 +++
 pkg/service/handlers/web/js/script.js | 60 +++++++++++++++++----------
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/pkg/service/handlers/web/index.html b/pkg/service/handlers/web/index.html
index b0fa194..801cc60 100644
--- a/pkg/service/handlers/web/index.html
+++ b/pkg/service/handlers/web/index.html
@@ -1389,6 +1389,11 @@
                 ></ul>
             </div>
 
+            <div id="diff-size-warning" style="display: none; margin-bottom: 15px; padding: 10px; background: #fff3cd; border: 1px solid #ffeeba; border-radius: 4px; color: #856404;">
+                ⚠️ <strong>Large Payload:</strong> Rich diff highlighting is disabled to prevent a browser freeze. Showing raw comparison instead.
+                <button id="force-rich-diff-btn" style="margin-left: 10px; font-size: 0.8em; cursor: pointer;">Show Rich Diff Anyway</button>
+            </div>
+
             <div class="diff-container" style="margin-top: 15px">
                 <div class="diff-pane">
                             <span
diff --git a/pkg/service/handlers/web/js/script.js b/pkg/service/handlers/web/js/script.js
index 6866ae6..db4a461 100644
--- a/pkg/service/handlers/web/js/script.js
+++ b/pkg/service/handlers/web/js/script.js
@@ -1008,7 +1008,7 @@ async function clearParityMismatches() {
     }
 }
 
-function viewParityMismatch(m) {
+function viewParityMismatch(m, forceRichDiff = false) {
     document.getElementById("diff-path-display").innerText = m.method + " " + m.path;
     const reasonsList = document.getElementById("diff-reasons-list");
     reasonsList.innerHTML = "";
@@ -1027,32 +1027,46 @@ function viewParityMismatch(m) {
     const localBody = formatBody(m.local.body, localCT);
     const upstreamBody = formatBody(m.upstream.body, upstreamCT);
 
-    if (typeof Diff !== 'undefined') {
-        const diff = Diff.diffChars(localBody, upstreamBody);
-        const localEl = document.getElementById("diff-local-body");
-        const upstreamEl = document.getElementById("diff-upstream-body");
+    const diffSizeThreshold = 50000; // 50KB
+    const isLarge = localBody.length > diffSizeThreshold || upstreamBody.length > diffSizeThreshold;
+    const warningEl = document.getElementById("diff-size-warning");
 
-        localEl.innerHTML = "";
-        upstreamEl.innerHTML = "";
+    if (isLarge && !forceRichDiff) {
+        warningEl.style.display = "block";
+        const forceBtn = document.getElementById("force-rich-diff-btn");
+        forceBtn.onclick = () => viewParityMismatch(m, true);
 
-        diff.forEach((part) => {
-            const span = document.createElement('span');
-            if (part.added) {
-                span.className = 'diff-added';
-                span.innerText = part.value;
-                upstreamEl.appendChild(span);
-            } else if (part.removed) {
-                span.className = 'diff-removed';
-                span.innerText = part.value;
-                localEl.appendChild(span);
-            } else {
-                localEl.appendChild(document.createTextNode(part.value));
-                upstreamEl.appendChild(document.createTextNode(part.value));
-            }
-        });
-    } else {
         document.getElementById("diff-local-body").innerText = localBody;
         document.getElementById("diff-upstream-body").innerText = upstreamBody;
+    } else {
+        warningEl.style.display = "none";
+        if (typeof Diff !== 'undefined') {
+            const diff = Diff.diffChars(localBody, upstreamBody);
+            const localEl = document.getElementById("diff-local-body");
+            const upstreamEl = document.getElementById("diff-upstream-body");
+
+            localEl.innerHTML = "";
+            upstreamEl.innerHTML = "";
+
+            diff.forEach((part) => {
+                const span = document.createElement('span');
+                if (part.added) {
+                    span.className = 'diff-added';
+                    span.innerText = part.value;
+                    upstreamEl.appendChild(span);
+                } else if (part.removed) {
+                    span.className = 'diff-removed';
+                    span.innerText = part.value;
+                    localEl.appendChild(span);
+                } else {
+                    localEl.appendChild(document.createTextNode(part.value));
+                    upstreamEl.appendChild(document.createTextNode(part.value));
+                }
+            });
+        } else {
+            document.getElementById("diff-local-body").innerText = localBody;
+            document.getElementById("diff-upstream-body").innerText = upstreamBody;
+        }
     }
 
     document.getElementById("parity-diff-view").style.display = "block";