From af6702bceb57fa65fda3d47c218d42b40cc83bfe Mon Sep 17 00:00:00 2001
From: wagesj45 <jordan@jordanwages.com>
Date: Tue, 6 Jan 2026 21:42:57 -0600
Subject: [PATCH] Add prompt reduction badge to debug diff

---
 options/options.html |  5 ++-
 options/options.js   | 88 +++++++++++++++++++++++++++-----------------
 2 files changed, 59 insertions(+), 34 deletions(-)

diff --git a/options/options.html b/options/options.html
index 59ebc83..b118ee0 100644
--- a/options/options.html
+++ b/options/options.html
@@ -292,7 +292,10 @@
                 </h2>
                 <pre id="payload-display"></pre>
                 <div id="diff-container" class="mt-4 is-hidden">
-                    <label class="label">Prompt diff</label>
+                    <div class="is-flex is-align-items-center is-justify-content-space-between">
+                        <label class="label mb-0">Prompt diff</label>
+                        <span id="prompt-reduction" class="tag is-info is-light is-hidden">Prompt Token Reduction: 0%</span>
+                    </div>
                     <div id="diff-display" class="box content is-family-monospace"></div>
                 </div>
             </div>
diff --git a/options/options.js b/options/options.js
index 30fa5f3..046c674 100644
--- a/options/options.js
+++ b/options/options.js
@@ -71,6 +71,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     const payloadDisplay = document.getElementById('payload-display');
     const diffDisplay = document.getElementById('diff-display');
     const diffContainer = document.getElementById('diff-container');
+    const promptReductionLabel = document.getElementById('prompt-reduction');
 
     let lastFullText = defaults.lastFullText || '';
     let lastPromptText = defaults.lastPromptText || '';
@@ -79,22 +80,6 @@ document.addEventListener('DOMContentLoaded', async () => {
     if (lastPayload) {
         payloadDisplay.textContent = lastPayload;
     }
-    if (lastFullText && lastPromptText && diff_match_patch) {
-        const dmp = new diff_match_patch();
-        dmp.Diff_EditCost = 4;
-        const diffs = dmp.diff_main(lastFullText, lastPromptText);
-        dmp.diff_cleanupEfficiency(diffs);
-        const hasDiff = diffs.some(d => d[0] !== 0);
-        if (hasDiff) {
-            diffDisplay.innerHTML = dmp.diff_prettyHtml(diffs);
-            diffContainer.classList.remove('is-hidden');
-        } else {
-            diffDisplay.innerHTML = '';
-            diffContainer.classList.add('is-hidden');
-        }
-    } else {
-        diffContainer.classList.add('is-hidden');
-    }
     themeSelect.addEventListener('change', async () => {
         markDirty();
         await applyTheme(themeSelect.value);
@@ -164,6 +149,51 @@ document.addEventListener('DOMContentLoaded', async () => {
     const tokenReductionToggle = document.getElementById('token-reduction');
     tokenReductionToggle.checked = defaults.tokenReduction === true;
 
+    function tokenSavingEnabled() {
+        return htmlToggle.checked
+            || stripUrlToggle.checked
+            || altTextToggle.checked
+            || collapseWhitespaceToggle.checked
+            || tokenReductionToggle.checked;
+    }
+
+    function updatePromptReductionLabel(hasDiff) {
+        if (!promptReductionLabel) return;
+        if (!hasDiff || !tokenSavingEnabled() || !lastFullText || !lastPromptText) {
+            promptReductionLabel.classList.add('is-hidden');
+            return;
+        }
+        const baseLength = lastFullText.length;
+        const promptLength = lastPromptText.length;
+        const percentSaved = baseLength > 0
+            ? Math.max(0, Math.round((1 - (promptLength / baseLength)) * 100))
+            : 0;
+        promptReductionLabel.textContent = `Prompt Token Reduction: ${percentSaved}%`;
+        promptReductionLabel.classList.remove('is-hidden');
+    }
+
+    function updateDiffDisplay() {
+        if (lastFullText && lastPromptText && diff_match_patch) {
+            const dmp = new diff_match_patch();
+            dmp.Diff_EditCost = 4;
+            const diffs = dmp.diff_main(lastFullText, lastPromptText);
+            dmp.diff_cleanupEfficiency(diffs);
+            const hasDiff = diffs.some(d => d[0] !== 0);
+            if (hasDiff) {
+                diffDisplay.innerHTML = dmp.diff_prettyHtml(diffs);
+                diffContainer.classList.remove('is-hidden');
+            } else {
+                diffDisplay.innerHTML = '';
+                diffContainer.classList.add('is-hidden');
+            }
+            updatePromptReductionLabel(hasDiff);
+        } else {
+            diffDisplay.innerHTML = '';
+            diffContainer.classList.add('is-hidden');
+            updatePromptReductionLabel(false);
+        }
+    }
+
     const debugTabToggle = document.getElementById('show-debug-tab');
     const debugTabBtn = document.getElementById('debug-tab-button');
     function updateDebugTab() {
@@ -174,6 +204,14 @@ document.addEventListener('DOMContentLoaded', async () => {
     debugTabToggle.addEventListener('change', () => { updateDebugTab(); markDirty(); });
     updateDebugTab();
 
+    updateDiffDisplay();
+
+    [htmlToggle, stripUrlToggle, altTextToggle, collapseWhitespaceToggle, tokenReductionToggle].forEach(toggle => {
+        toggle.addEventListener('change', () => {
+            updatePromptReductionLabel(!diffContainer.classList.contains('is-hidden'));
+        });
+    });
+
 
     const aiParams = Object.assign({}, DEFAULT_AI_PARAMS, defaults.aiParams || {});
     for (const [key, val] of Object.entries(aiParams)) {
@@ -770,23 +808,7 @@ document.addEventListener('DOMContentLoaded', async () => {
                 if (latest.lastFullText !== lastFullText || latest.lastPromptText !== lastPromptText) {
                     lastFullText = latest.lastFullText || '';
                     lastPromptText = latest.lastPromptText || '';
-                    if (lastFullText && lastPromptText && diff_match_patch) {
-                        const dmp = new diff_match_patch();
-                        dmp.Diff_EditCost = 4;
-                        const diffs = dmp.diff_main(lastFullText, lastPromptText);
-                        dmp.diff_cleanupEfficiency(diffs);
-                        const hasDiff = diffs.some(d => d[0] !== 0);
-                        if (hasDiff) {
-                            diffDisplay.innerHTML = dmp.diff_prettyHtml(diffs);
-                            diffContainer.classList.remove('is-hidden');
-                        } else {
-                            diffDisplay.innerHTML = '';
-                            diffContainer.classList.add('is-hidden');
-                        }
-                    } else {
-                        diffDisplay.innerHTML = '';
-                        diffContainer.classList.add('is-hidden');
-                    }
+                    updateDiffDisplay();
                 }
             }
         } catch {}