Adding comarison for json refinement

templates/bible_comparison.html

@@ -5,6 +5,7 @@
     .diff-changed { background-color: #fff3cd; transition: background 0.5s; }
     .diff-added { background-color: #d1e7dd; transition: background 0.5s; }
     .diff-removed { background-color: #f8d7da; text-decoration: line-through; opacity: 0.7; transition: background 0.5s; }
+    .diff-moved { background-color: #cff4fc; transition: background 0.5s; }
     .select-checkbox { transform: scale(1.2); cursor: pointer; }
 </style>
 
@@ -59,7 +60,7 @@
         <h6 class="text-muted text-uppercase small fw-bold border-bottom pb-1">Characters ({{ bible.characters|length }})</h6>
         <ul class="list-unstyled small">
             {% for c in bible.characters %}
-            <li class="mb-2" data-diff-key="char.{{ loop.index0 }}">
+            <li class="mb-2" data-diff-key="char.{{ loop.index0 }}" data-stable-id="char:{{ c.name|e }}">
                 <input type="checkbox" class="select-checkbox me-2 d-none" value="char.{{ loop.index0 }}">
                 <strong data-diff-key="char.{{ loop.index0 }}.name">{{ c.name }}</strong> <span class="badge bg-light text-dark border" data-diff-key="char.{{ loop.index0 }}.role">{{ c.role }}</span><br>
                 <span class="text-muted ms-4" data-diff-key="char.{{ loop.index0 }}.desc">{{ c.description }}</span>
@@ -71,13 +72,13 @@
     <div class="mb-3">
         <h6 class="text-muted text-uppercase small fw-bold border-bottom pb-1">Plot Structure</h6>
         {% for book in bible.books %}
-            <div class="mb-2" data-diff-key="book.{{ book.book_number }}">
+            <div class="mb-2" data-diff-key="book.{{ book.book_number }}" data-stable-id="book:{{ book.title|e }}">
                 <input type="checkbox" class="select-checkbox me-2 d-none" value="book.{{ book.book_number }}">
                 <strong data-diff-key="book.{{ book.book_number }}.title">Book {{ book.book_number }}: {{ book.title }}</strong>
                 <p class="fst-italic small text-muted mb-1 ms-4" data-diff-key="book.{{ book.book_number }}.instr">{{ book.manual_instruction }}</p>
                 <ol class="small ps-3 mb-0">
                     {% for beat in book.plot_beats %}
-                    <li><input type="checkbox" class="select-checkbox me-2 d-none" value="book.{{ book.book_number }}.beat.{{ loop.index0 }}"><span data-diff-key="book.{{ book.book_number }}.beat.{{ loop.index0 }}">{{ beat }}</span></li>
+                    <li><input type="checkbox" class="select-checkbox me-2 d-none" value="book.{{ book.book_number }}.beat.{{ loop.index0 }}"><span data-diff-key="book.{{ book.book_number }}.beat.{{ loop.index0 }}" data-stable-id="beat:{{ beat|e }}">{{ beat }}</span></li>
                     {% endfor %}
                 </ol>
             </div>
@@ -184,11 +185,31 @@ document.addEventListener('DOMContentLoaded', function() {
     const btnRefine = document.getElementById('btnRefine');
     const btnSelectAll = document.getElementById('btnSelectAll');
 
+    function findCounterpart(el, contextRoot) {
+        const key = el.getAttribute('data-diff-key');
+        const stableParent = el.closest('[data-stable-id]');
+        if (stableParent) {
+            const stableId = stableParent.getAttribute('data-stable-id');
+            const otherParent = contextRoot.querySelector(`[data-stable-id="${stableId.replace(/"/g, '\\"')}"]`);
+            if (otherParent) {
+                const parentKey = stableParent.getAttribute('data-diff-key');
+                if (key.startsWith(parentKey)) {
+                    const suffix = key.substring(parentKey.length);
+                    const otherParentKey = otherParent.getAttribute('data-diff-key');
+                    return contextRoot.querySelector(`[data-diff-key="${otherParentKey + suffix}"]`);
+                }
+                return otherParent;
+            }
+            return null;
+        }
+        return contextRoot.querySelector(`[data-diff-key="${key}"]`);
+    }
+
     // 1. Highlight Differences
     const newElements = newDraft.querySelectorAll('[data-diff-key]');
     newElements.forEach(el => {
         const key = el.getAttribute('data-diff-key');
-        const origEl = original.querySelector(`[data-diff-key="${key}"]`);
+        const origEl = findCounterpart(el, original);
         
         // Find associated checkbox (it might be a sibling or parent wrapper)
         // In our macro, checkbox is usually a sibling of the span with data-diff-key
@@ -215,6 +236,14 @@ document.addEventListener('DOMContentLoaded', function() {
                 checkbox.classList.remove('d-none');
                 checkbox.checked = true;
             }
+        } else if (el.getAttribute('data-diff-key') !== origEl.getAttribute('data-diff-key')) {
+            // Moved (Index changed but content matched by ID)
+            el.classList.add('diff-moved');
+            el.title = "Moved from original position";
+            if (checkbox) {
+                checkbox.classList.remove('d-none');
+                checkbox.checked = true;
+            }
         } else if (el.innerText.trim() !== origEl.innerText.trim()) {
             el.classList.add('diff-changed');
             origEl.classList.add('diff-changed');
@@ -229,8 +258,7 @@ document.addEventListener('DOMContentLoaded', function() {
     // Check for removed items
     const origElements = original.querySelectorAll('[data-diff-key]');
     origElements.forEach(el => {
-        const key = el.getAttribute('data-diff-key');
+        const newEl = findCounterpart(el, newDraft);
-        const newEl = newDraft.querySelector(`[data-diff-key="${key}"]`);
         if (!newEl) {
             el.classList.add('diff-removed');
             el.title = "Removed in new draft";