feat: Add core medical document validation module with text/image extraction and initial static UI page.

app/static/index.html

@@ -379,112 +379,190 @@
             }
         }
 
+        /* Results Section Refined */
         .results {
             display: none;
-            margin-top: 30px;
-            padding: 20px;
-            border-radius: 8px;
-            background: #f8f9fa;
+            margin-top: 32px;
+            animation: fadeIn 0.4s ease-out;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
 
         .status {
-            padding: 12px 20px;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            font-weight: 600;
-            font-size: 18px;
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            padding: 24px;
+            border-radius: var(--radius-lg);
+            margin-bottom: 32px;
+            border: 1px solid transparent;
+            box-shadow: var(--shadow-sm);
         }
 
         .status.pass {
-            background: #d4edda;
-            color: #155724;
-            border: 1px solid #c3e6cb;
+            background: #ECFDF5;
+            border-color: #A7F3D0;
+            color: #065F46;
         }
 
         .status.fail {
-            background: #f8d7da;
-            color: #721c24;
-            border: 1px solid #f5c6cb;
+            background: #FEF2F2;
+            border-color: #FECACA;
+            color: #991B1B;
         }
 
-        .summary {
-            margin-bottom: 20px;
-            color: #333;
-            font-size: 16px;
+        .status-icon {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(255, 255, 255, 0.6);
+            font-size: 28px;
+            flex-shrink: 0;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        }
+
+        .status-content {
+            flex: 1;
+        }
+
+        .status-content h3 {
+            font-size: 20px;
+            font-weight: 700;
+            margin-bottom: 6px;
+            letter-spacing: -0.01em;
+        }
+
+        .status-content p {
+            font-size: 15px;
+            opacity: 0.9;
+            line-height: 1.5;
         }
 
-        .elements-list {
+        .elements-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
             list-style: none;
+            margin-bottom: 32px;
         }
 
         .element-item {
             background: white;
-            padding: 15px;
-            margin-bottom: 10px;
-            border-radius: 6px;
-            border-left: 4px solid #e0e0e0;
+            border: 1px solid var(--border);
+            border-radius: var(--radius-md);
+            padding: 20px;
+            box-shadow: var(--shadow-sm);
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        .element-item:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-lg);
+            border-color: var(--primary-light);
         }
 
-        .element-item.present {
-            border-left-color: #28a745;
+        .element-item::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 6px;
+        }
+
+        .element-item.present::before {
+            background: var(--success);
         }
 
-        .element-item.missing {
-            border-left-color: #dc3545;
+        .element-item.missing::before {
+            background: var(--error);
         }
 
-        .element-item.optional {
-            border-left-color: #ffc107;
+        .element-item.optional::before {
+            background: var(--warning);
         }
 
         .element-header {
             display: flex;
             justify-content: space-between;
-            align-items: center;
-            margin-bottom: 8px;
+            align-items: flex-start;
+            margin-bottom: 16px;
         }
 
         .element-label {
-            font-weight: 600;
-            color: #333;
+            font-weight: 700;
+            font-size: 16px;
+            color: var(--text-primary);
+            padding-left: 12px;
+            line-height: 1.3;
         }
 
         .element-badge {
-            padding: 4px 12px;
-            border-radius: 12px;
-            font-size: 12px;
-            font-weight: 600;
+            font-size: 11px;
+            font-weight: 700;
+            text-transform: uppercase;
+            padding: 6px 12px;
+            border-radius: 20px;
+            letter-spacing: 0.5px;
+            flex-shrink: 0;
         }
 
         .badge-present {
-            background: #d4edda;
-            color: #155724;
+            background: #E6FFFA;
+            color: #047481;
+            border: 1px solid #B2F5EA;
         }
 
         .badge-missing {
-            background: #f8d7da;
-            color: #721c24;
+            background: #FFF5F5;
+            color: #C53030;
+            border: 1px solid #FED7D7;
         }
 
         .badge-optional {
-            background: #fff3cd;
-            color: #856404;
+            background: #FFFFF0;
+            color: #B7791F;
+            border: 1px solid #FEFCBF;
         }
 
         .element-reason {
-            color: #666;
+            color: var(--text-secondary);
             font-size: 14px;
-            margin-top: 8px;
+            margin-top: auto;
+            line-height: 1.5;
+            padding-left: 12px;
+            border-top: 1px solid #F3F4F6;
+            padding-top: 12px;
         }
 
         .error {
             display: none;
-            background: #f8d7da;
-            color: #721c24;
-            padding: 15px;
-            border-radius: 8px;
-            margin-top: 20px;
-            border: 1px solid #f5c6cb;
+            background: #FEF2F2;
+            color: #991B1B;
+            padding: 20px;
+            border-radius: var(--radius-md);
+            margin-top: 24px;
+            border: 1px solid #FECACA;
+            font-weight: 500;
+            text-align: center;
         }
 
         .templates-loading {
@@ -741,6 +819,41 @@
             background: #fff3cd;
             color: #856404;
         }
+
+        /* Loading animations */
+        @keyframes rotate {
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        @keyframes dash {
+            0% {
+                stroke-dashoffset: 80;
+            }
+
+            50% {
+                stroke-dashoffset: 20;
+            }
+
+            100% {
+                stroke-dashoffset: 80;
+            }
+        }
+
+        @keyframes progress {
+            0% {
+                width: 5%;
+            }
+
+            50% {
+                width: 70%;
+            }
+
+            100% {
+                width: 95%;
+            }
+        }
     </style>
 </head>
 
@@ -800,252 +913,257 @@
             <p>Upload a document and select a template to validate against</p>
         </div>
 
-        <!-- Project Selector Card -->
-        <div class="card" style="padding: 16px;">
-            <div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
-                <div style="display: flex; align-items: center; gap: 8px;">
-                    <span style="font-size: 20px;">📂</span>
-                    <label style="font-weight: 600; margin: 0; white-space: nowrap;">Project:</label>
+        <!-- VALIDATE PAGE -->
+        <div id="validatePage" class="page-section">
+            <!-- Project Selector Card -->
+            <div class="card" style="padding: 16px;">
+                <div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
+                    <div style="display: flex; align-items: center; gap: 8px;">
+                        <span style="font-size: 20px;">📂</span>
+                        <label style="font-weight: 600; margin: 0; white-space: nowrap;">Project:</label>
+                    </div>
+                    <select id="currentProject" style="flex: 1; min-width: 200px;">
+                        <option value="">No Project (Not Saved)</option>
+                    </select>
+                    <button type="button" class="btn btn-secondary" id="createProjectBtn">+ New</button>
+                    <button type="button" class="btn btn-secondary" id="viewProjectsBtn">View All</button>
                 </div>
-                <select id="currentProject" style="flex: 1; min-width: 200px;">
-                    <option value="">No Project (Not Saved)</option>
-                </select>
-                <button type="button" class="btn btn-secondary" id="createProjectBtn">+ New</button>
-                <button type="button" class="btn btn-secondary" id="viewProjectsBtn">View All</button>
             </div>
-        </div>
 
-        <!-- SharePoint Integration -->
-        <div
-            style="background: #f3f6f9; padding: 15px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid #0078d4; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;">
-            <div style="display: flex; align-items: center; gap: 10px;">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M12.5 4H19.5C20.6046 4 21.5 4.89543 21.5 6V20C21.5 21.1046 20.6046 22 19.5 22H12.5V4Z"
-                        fill="#0078D4" />
-                    <path d="M2.5 6C2.5 4.89543 3.39543 4 4.5 4H11.5V22H4.5C3.39543 22 2.5 21.1046 2.5 20V6Z"
-                        fill="#50E6FF" fill-opacity="0.3" />
-                    <path d="M11.5 4V13H7.5V7H11.5V4Z" fill="#0078D4" fill-opacity="0.5" />
-                </svg>
-                <div>
-                    <strong style="display: block; color: #333;">Microsoft SharePoint / OneDrive</strong>
-                    <span style="font-size: 12px; color: #666;">Import documents directly from cloud</span>
+            <!-- SharePoint Integration -->
+            <div
+                style="background: #f3f6f9; padding: 15px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid #0078d4; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;">
+                <div style="display: flex; align-items: center; gap: 10px;">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M12.5 4H19.5C20.6046 4 21.5 4.89543 21.5 6V20C21.5 21.1046 20.6046 22 19.5 22H12.5V4Z"
+                            fill="#0078D4" />
+                        <path d="M2.5 6C2.5 4.89543 3.39543 4 4.5 4H11.5V22H4.5C3.39543 22 2.5 21.1046 2.5 20V6Z"
+                            fill="#50E6FF" fill-opacity="0.3" />
+                        <path d="M11.5 4V13H7.5V7H11.5V4Z" fill="#0078D4" fill-opacity="0.5" />
+                    </svg>
+                    <div>
+                        <strong style="display: block; color: #333;">Microsoft SharePoint / OneDrive</strong>
+                        <span style="font-size: 12px; color: #666;">Import documents directly from cloud</span>
+                    </div>
+                </div>
+                <div id="sharepointAuthSection">
+                    <button type="button" class="btn-secondary" id="connectSharePointBtn"
+                        style="border: 1px solid #0078d4; color: #0078d4; background: white;">
+                        🔗 Connect Account
+                    </button>
+                </div>
+                <div id="sharepointActionsSection" style="display: none;">
+                    <span id="sharepointStatus"
+                        style="font-size: 12px; color: #28a745; font-weight: 600; margin-right: 10px;">✓
+                        Connected</span>
+                    <button type="button" class="btn-secondary" id="browseSharePointBtn"
+                        style="background: #0078d4; color: white; border: none;">
+                        📂 Browse Files
+                    </button>
+                    <button type="button" class="btn-secondary" id="logoutSharePointBtn"
+                        style="background: #eee; border: 1px solid #ccc; font-size: 12px; padding: 5px 10px;">
+                        Disconnect
+                    </button>
                 </div>
             </div>
-            <div id="sharepointAuthSection">
-                <button type="button" class="btn-secondary" id="connectSharePointBtn"
-                    style="border: 1px solid #0078d4; color: #0078d4; background: white;">
-                    🔗 Connect Account
-                </button>
-            </div>
-            <div id="sharepointActionsSection" style="display: none;">
-                <span id="sharepointStatus"
-                    style="font-size: 12px; color: #28a745; font-weight: 600; margin-right: 10px;">✓ Connected</span>
-                <button type="button" class="btn-secondary" id="browseSharePointBtn"
-                    style="background: #0078d4; color: white; border: none;">
-                    📂 Browse Files
-                </button>
-                <button type="button" class="btn-secondary" id="logoutSharePointBtn"
-                    style="background: #eee; border: 1px solid #ccc; font-size: 12px; padding: 5px 10px;">
-                    Disconnect
-                </button>
-            </div>
-        </div>
 
-        <!-- SharePoint File Browser Modal -->
-        <div id="sharePointModal"
-            style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center;">
-            <div
-                style="background: white; padding: 0; border-radius: 8px; max-width: 800px; width: 90%; height: 80vh; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">
-                <div
-                    style="padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;">
-                    <h2 style="margin: 0; font-size: 20px;">📂 Select Documents</h2>
-                    <button type="button" id="closeSharePointModal"
-                        style="background: none; border: none; font-size: 24px; cursor: pointer;">&times;</button>
+            <!-- Validation Form Card -->
+            <div class="card" id="validateSection">
+                <div class="card-header">
+                    <div class="card-icon accent">✓</div>
+                    <h2>Validate Document</h2>
                 </div>
 
-                <div
-                    style="padding: 10px 20px; background: #f8f9fa; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px;">
-                    <button id="spBackBtn" disabled style="padding: 5px 10px; cursor: pointer;">⬅ Back</button>
-                    <div id="spBreadcrumbs"
-                        style="font-size: 14px; color: #666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
-                        Home</div>
-                </div>
+                <form id="validationForm">
+                    <div class="form-group">
+                        <label for="templateSelect">Select Template <span class="optional">(Required for template
+                                validation)</span></label>
+                        <select id="templateSelect" name="template">
+                            <option value="">-- Select a template --</option>
+                        </select>
+                    </div>
 
-                <div id="spFileList" style="flex: 1; overflow-y: auto; padding: 20px;">
-                    <!-- Drives/Files populated here -->
-                    <div style="text-align: center; color: #999;">Loading...</div>
-                </div>
+                    <div class="form-group">
+                        <label for="fileInput">Upload Document</label>
+                        <div class="file-upload-wrapper" id="dropZone">
+                            <div class="file-upload-icon">📄</div>
+                            <div class="file-upload-text">
+                                <strong>Click to upload</strong> or drag and drop<br>
+                                PDF, DOCX, or PPTX files
+                            </div>
+                            <input type="file" id="fileInput" name="file" accept=".pdf,.docx,.pptx" required
+                                style="display: none;">
+                        </div>
+                        <div class="file-info" id="fileInfo" style="display: none;"></div>
+                    </div>
 
-                <div style="padding: 20px; border-top: 1px solid #eee; background: #fcfcfc; text-align: right;">
-                    <span id="spSelectionCount" style="margin-right: 15px; color: #666; font-size: 14px;">0 files
-                        selected</span>
-                    <button type="button" class="btn" id="spImportBtn" disabled>Import & Validate</button>
-                </div>
+                    <div class="form-group">
+                        <label for="customPrompt">Custom Instructions <span class="optional">(Optional)</span></label>
+                        <textarea id="customPrompt" name="customPrompt" rows="3" maxlength="500"
+                            placeholder="e.g., 'Focus on date format validation' or 'Pay special attention to logo placement'..."></textarea>
+                        <div style="text-align: right; font-size: 12px; color: var(--text-muted); margin-top: 4px;">
+                            <span id="charCount">0</span>/500 characters
+                        </div>
+                    </div>
+
+                    <div class="button-group">
+                        <button type="button" class="btn btn-primary btn-lg" id="validateBtn">
+                            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                            Validate Document
+                        </button>
+                        <button type="button" class="btn btn-secondary btn-lg" id="spellingOnlyBtn">
+                            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
+                                </path>
+                            </svg>
+                            Quality Check Only
+                        </button>
+                    </div>
+                    <p style="font-size: 13px; color: var(--text-muted); margin-top: 12px; text-align: center;">
+                        💡 Use "Quality Check Only" for grammar and spelling without template validation
+                    </p>
+                </form>
             </div>
-        </div>
 
-        <!-- Create Project Modal -->
-        <div id="createProjectModal"
-            style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
-            <div
-                style="background: white; padding: 30px; border-radius: 8px; max-width: 500px;  width: 90%; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
-                <h2 style="margin-top: 0;">Create New Project</h2>
-                <div class="form-group">
-                    <label for="projectName">Project Name: *</label>
-                    <input type="text" id="projectName" placeholder="e.g., Cardiology Conference Q1 2025"
-                        style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
-                </div>
-                <div class="form-group">
-                    <label for="projectDescription">Description (Optional):</label>
-                    <textarea id="projectDescription" rows="3" placeholder="Brief description of this project..."
-                        style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; resize: vertical;"></textarea>
-                </div>
-                <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
-                    <button type="button" class="btn-secondary" id="cancelProjectBtn">Cancel</button>
-                    <button type="button" class="btn" id="saveProjectBtn">Create Project</button>
-                </div>
+            <div class="loading" id="loading">
+                <div class="spinner"></div>
+                <p>Validating document...</p>
             </div>
-        </div>
 
-        <!-- Validation Form Card -->
-        <div class="card" id="validateSection">
-            <div class="card-header">
-                <div class="card-icon accent">✓</div>
-                <h2>Validate Document</h2>
+            <div class="error" id="error"></div>
+
+            <div class="results" id="results">
+                <div class="status" id="status"></div>
+                <div class="summary" id="summary"></div>
+                <ul class="elements-list" id="elementsList"></ul>
             </div>
+        </div>
 
-            <form id="validationForm">
-                <div class="form-group">
-                    <label for="templateSelect">Select Template <span class="optional">(Required for template
-                            validation)</span></label>
-                    <select id="templateSelect" name="template">
-                        <option value="">-- Select a template --</option>
-                    </select>
-                </div>
 
-                <div class="form-group">
-                    <label for="fileInput">Upload Document</label>
-                    <div class="file-upload-wrapper" id="dropZone">
-                        <div class="file-upload-icon">📄</div>
-                        <div class="file-upload-text">
-                            <strong>Click to upload</strong> or drag and drop<br>
-                            PDF, DOCX, or PPTX files
-                        </div>
-                        <input type="file" id="fileInput" name="file" accept=".pdf,.docx,.pptx" required
-                            style="display: none;">
+
+        <!-- COMPARE PAGE -->
+        <div id="comparePage" class="page-section" style="display: none;">
+            <!-- Document Comparison Section -->
+            <div class="comparison-section"
+                style="background: #f8f9fa; padding: 25px; border-radius: 8px; margin-top: 30px;">
+                <h3 style="margin-bottom: 15px; font-size: 20px; color: #333;">🔄 Compare Documents</h3>
+                <p style="color: #666; font-size: 14px; margin-bottom: 20px;">
+                    Upload two versions of a document to see what changed (e.g., before and after edits).
+                </p>
+
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
+                    <div class="form-group">
+                        <label for="compareFile1">📄 Original Document:</label>
+                        <input type="file" id="compareFile1" accept=".pdf,.docx,.pptx">
+                        <div class="file-info" id="compareFileInfo1"></div>
                     </div>
-                    <div class="file-info" id="fileInfo" style="display: none;"></div>
-                </div>
 
-                <div class="form-group">
-                    <label for="customPrompt">Custom Instructions <span class="optional">(Optional)</span></label>
-                    <textarea id="customPrompt" name="customPrompt" rows="3" maxlength="500"
-                        placeholder="e.g., 'Focus on date format validation' or 'Pay special attention to logo placement'..."></textarea>
-                    <div style="text-align: right; font-size: 12px; color: var(--text-muted); margin-top: 4px;">
-                        <span id="charCount">0</span>/500 characters
+                    <div class="form-group">
+                        <label for="compareFile2">📝 Modified Document:</label>
+                        <input type="file" id="compareFile2" accept=".pdf,.docx,.pptx">
+                        <div class="file-info" id="compareFileInfo2"></div>
                     </div>
                 </div>
 
-                <div class="button-group">
-                    <button type="button" class="btn btn-primary btn-lg" id="validateBtn">
-                        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                        </svg>
-                        Validate Document
-                    </button>
-                    <button type="button" class="btn btn-secondary btn-lg" id="spellingOnlyBtn">
-                        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
-                            </path>
+                <button type="button" class="btn" id="compareBtn" style="width: 100%;">
+                    🔍 Compare Documents
+                </button>
+
+                <div class="error" id="compareError" style="margin-top: 15px;"></div>
+
+                <!-- Loading Indicator -->
+                <div id="compareLoading"
+                    style="display: none; margin-top: 20px; text-align: center; padding: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white;">
+                    <div style="margin-bottom: 20px;">
+                        <svg width="60" height="60" viewBox="0 0 50 50" style="animation: rotate 2s linear infinite;">
+                            <circle cx="25" cy="25" r="20" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="4">
+                            </circle>
+                            <circle cx="25" cy="25" r="20" fill="none" stroke="white" stroke-width="4"
+                                stroke-dasharray="80" stroke-dashoffset="60" stroke-linecap="round"
+                                style="animation: dash 1.5s ease-in-out infinite;"></circle>
                         </svg>
-                        Quality Check Only
-                    </button>
+                    </div>
+                    <h3 style="margin: 0 0 10px 0; font-size: 18px; font-weight: 600;">Comparing Documents...</h3>
+                    <p id="compareLoadingText" style="margin: 0; opacity: 0.9; font-size: 14px;">Extracting and
+                        analyzing content</p>
+                    <div
+                        style="margin-top: 15px; background: rgba(255,255,255,0.2); border-radius: 8px; height: 6px; overflow: hidden;">
+                        <div id="compareProgressBar"
+                            style="height: 100%; background: white; width: 0%; transition: width 0.5s ease; animation: progress 3s ease-in-out infinite;">
+                        </div>
+                    </div>
                 </div>
-                <p style="font-size: 13px; color: var(--text-muted); margin-top: 12px; text-align: center;">
-                    💡 Use "Quality Check Only" for grammar and spelling without template validation
-                </p>
-            </form>
-        </div>
+            </div>
 
-        <div class="debug-section">
-            <h3 style="margin-bottom: 10px; font-size: 18px;">🔍 Debug: Image Extraction</h3>
-            <p style="color: #666; font-size: 14px; margin-bottom: 10px;">
-                Test image extraction without full validation. Check console logs for detailed information.
-            </p>
-            <button type="button" class="debug-btn" id="debugBtn">Extract Images (Debug)</button>
-            <div class="debug-info" id="debugInfo" style="display: none;"></div>
+            <!-- Comparison Results inside Compare Page -->
+            <div class="results" id="comparisonResults" style="display: none;">
+                <h2 style="margin-bottom: 20px;">📊 Comparison Results</h2>
+                <div id="comparisonSummary" style="margin-bottom: 20px;"></div>
+                <div id="comparisonDetails"></div>
+            </div>
         </div>
 
-        <!-- Document Comparison Section -->
-        <div class="comparison-section"
-            style="background: #f8f9fa; padding: 25px; border-radius: 8px; margin-top: 30px;">
-            <h3 style="margin-bottom: 15px; font-size: 20px; color: #333;">🔄 Compare Documents</h3>
-            <p style="color: #666; font-size: 14px; margin-bottom: 20px;">
-                Upload two versions of a document to see what changed (e.g., before and after edits).
-            </p>
-
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
-                <div class="form-group">
-                    <label for="compareFile1">📄 Original Document:</label>
-                    <input type="file" id="compareFile1" accept=".pdf,.docx,.pptx">
-                    <div class="file-info" id="compareFileInfo1"></div>
-                </div>
+        <!-- BULK PAGE -->
+        <div id="bulkPage" class="page-section" style="display: none;">
+            <!-- Bulk Certificate Validation Section -->
+            <div class="bulk-validation-section"
+                style="background: #f0f8ff; padding: 25px; border-radius: 8px; margin-top: 30px;">
+                <h3 style="margin-bottom: 15px; font-size: 20px; color: #333;">📋 Bulk Certificate Validation
+                </h3>
+                <p style="color: #666; font-size: 14px; margin-bottom: 20px;">
+                    Upload an Excel list of names and multiple certificates to verify all attendees received
+                    their
+                    certificates.
+                </p>
 
-                <div class="form-group">
-                    <label for="compareFile2">📝 Modified Document:</label>
-                    <input type="file" id="compareFile2" accept=".pdf,.docx,.pptx">
-                    <div class="file-info" id="compareFileInfo2"></div>
+                <!-- Step 1: Excel Upload -->
+                <div class="form-group" style="margin-bottom: 20px;">
+                    <label for="excelFile">1️⃣ Upload Excel File with Names:</label>
+                    <input type="file" id="excelFile" accept=".xlsx">
+                    <div class="file-info" id="excelFileInfo"></div>
                 </div>
-            </div>
-
-            <button type="button" class="btn" id="compareBtn" style="width: 100%;">
-                🔍 Compare Documents
-            </button>
-        </div>
 
-        <!-- Bulk Certificate Validation Section -->
-        <div class="bulk-validation-section"
-            style="background: #f0f8ff; padding: 25px; border-radius: 8px; margin-top: 30px;">
-            <h3 style="margin-bottom: 15px; font-size: 20px; color: #333;">📋 Bulk Certificate Validation</h3>
-            <p style="color: #666; font-size: 14px; margin-bottom: 20px;">
-                Upload an Excel list of names and multiple certificates to verify all attendees received their
-                certificates.
-            </p>
-
-            <!-- Step 1: Excel Upload -->
-            <div class="form-group" style="margin-bottom: 20px;">
-                <label for="excelFile">1️⃣ Upload Excel File with Names:</label>
-                <input type="file" id="excelFile" accept=".xlsx">
-                <div class="file-info" id="excelFileInfo"></div>
-            </div>
+                <!-- Step 2: Column Selection -->
+                <div class="form-group" style="margin-bottom: 20px; display: none;" id="columnSelectorGroup">
+                    <label for="nameColumn">2️⃣ Select Column Containing Names:</label>
+                    <select id="nameColumn"
+                        style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
+                        <option value="">Loading columns...</option>
+                    </select>
+                    <div style="margin-top: 8px; color: #666; font-size: 13px;">
+                        Preview: <span id="namePreview" style="font-weight: 500;"></span>
+                    </div>
+                </div>
 
-            <!-- Step 2: Column Selection -->
-            <div class="form-group" style="margin-bottom: 20px; display: none;" id="columnSelectorGroup">
-                <label for="nameColumn">2️⃣ Select Column Containing Names:</label>
-                <select id="nameColumn" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
-                    <option value="">Loading columns...</option>
-                </select>
-                <div style="margin-top: 8px; color: #666; font-size: 13px;">
-                    Preview: <span id="namePreview" style="font-weight: 500;"></span>
+                <!-- Step 3: Certificates Upload -->
+                <div class="form-group" style="margin-bottom: 20px;">
+                    <label for="certificateFiles">3️⃣ Upload Certificates (Max 150):</label>
+                    <input type="file" id="certificateFiles" multiple accept=".pdf,.pptx">
+                    <div style=" margin-top: 8px;">
+                        <span style="font-weight: 600; color: #007bff;" id="certCount">0</span>
+                        <span style="color: #666;">/150 files selected</span>
+                    </div>
                 </div>
-            </div>
 
-            <!-- Step 3: Certificates Upload -->
-            <div class="form-group" style="margin-bottom: 20px;">
-                <label for="certificateFiles">3️⃣ Upload Certificates (Max 150):</label>
-                <input type="file" id="certificateFiles" multiple accept=".pdf,.pptx"">
-                <div style=" margin-top: 8px;">
-                <span style="font-weight: 600; color: #007bff;" id="certCount">0</span>
-                <span style="color: #666;">/150 files selected</span>
+                <!-- Step 4: Validate Button -->
+                <button type="button" class="btn" id="bulkValidateBtn" style="width: 100%;" disabled>
+                    ✅ Validate All Certificates
+                </button>
             </div>
-        </div>
 
-        <!-- Step 4: Validate Button -->
-        <button type="button" class="btn" id="bulkValidateBtn" style="width: 100%;" disabled>
-            ✅ Validate All Certificates
-        </button>
+            <!-- Bulk Validation Results inside Bulk Page -->
+            <div class="results" id="bulkResults" style="display: none;">
+                <h2 style="margin-bottom: 20px;">📊 Bulk Validation Results</h2>
+                <div id="bulkSummary" style="margin-bottom: 20px;"></div>
+                <button type="button" class="btn-secondary" id="downloadCSVBtn" style="margin-bottom: 20px;">
+                    📥 Download CSV Report
+                </button>
+                <div id="bulkDetails"></div>
+            </div>
         </div>
 
         <div class="loading" id="loading">
@@ -1055,31 +1173,60 @@
 
         <div class="error" id="error"></div>
 
-        <div class="results" id="results">
-            <div class="status" id="status"></div>
-            <div class="summary" id="summary"></div>
-            <ul class="elements-list" id="elementsList"></ul>
-        </div>
-
-        <!-- Comparison Results -->
-        <div class="results" id="comparisonResults" style="display: none;">
-            <h2 style="margin-bottom: 20px;">📊 Comparison Results</h2>
-            <div id="comparisonSummary" style="margin-bottom: 20px;"></div>
-            <div id="comparisonDetails"></div>
-        </div>
 
-        <!-- Bulk Validation Results -->
-        <div class="results" id="bulkResults" style="display: none;">
-            <h2 style="margin-bottom: 20px;">📊 Bulk Validation Results</h2>
-            <div id="bulkSummary" style="margin-bottom: 20px;"></div>
-            <button type="button" class="btn-secondary" id="downloadCSVBtn" style="margin-bottom: 20px;">
-                📥 Download CSV Report
-            </button>
-            <div id="bulkDetails"></div>
-        </div>
     </main>
 
     <script>
+        // Tab Navigation Logic
+        document.addEventListener('DOMContentLoaded', () => {
+            const navItems = document.querySelectorAll('.nav-item[data-tab]');
+            const pages = {
+                'validate': document.getElementById('validatePage'),
+                'compare': document.getElementById('comparePage'),
+                'bulk': document.getElementById('bulkPage')
+            };
+            const pageHeaderTitle = document.querySelector('.page-header h1');
+            const pageHeaderDesc = document.querySelector('.page-header p');
+
+            const pageInfo = {
+                'validate': { title: 'Document Validation', desc: 'Upload a document and select a template to validate against' },
+                'compare': { title: 'Compare Documents', desc: 'Upload two versions of a document to see differences' },
+                'bulk': { title: 'Bulk Certificate Validation', desc: 'Validate multiple certificates against an Excel list' }
+            };
+
+            navItems.forEach(item => {
+                item.addEventListener('click', () => {
+                    const tabName = item.getAttribute('data-tab');
+
+                    // Update Sidebar
+                    navItems.forEach(nav => nav.classList.remove('active'));
+                    item.classList.add('active');
+
+                    // Update Pages
+                    Object.values(pages).forEach(page => {
+                        if (page) page.style.display = 'none';
+                    });
+                    if (pages[tabName]) {
+                        pages[tabName].style.display = 'block';
+
+                        // Update Header
+                        if (pageInfo[tabName]) {
+                            pageHeaderTitle.textContent = pageInfo[tabName].title;
+                            pageHeaderDesc.textContent = pageInfo[tabName].desc;
+                        }
+                    }
+
+                    // Clear and hide global error on tab switch
+                    const errorDiv = document.getElementById('error');
+                    errorDiv.style.display = 'none';
+                    errorDiv.textContent = '';
+                });
+            });
+
+            // Initial load of templates
+            loadTemplates();
+        });
+
         // Load templates on page load
         async function loadTemplates() {
             try {
@@ -1173,29 +1320,44 @@
         document.getElementById('compareBtn').addEventListener('click', async function () {
             const file1 = document.getElementById('compareFile1').files[0];
             const file2 = document.getElementById('compareFile2').files[0];
+            const compareError = document.getElementById('compareError');
+            const compareLoading = document.getElementById('compareLoading');
+            const loadingText = document.getElementById('compareLoadingText');
+
+            // Clear previous errors
+            compareError.style.display = 'none';
+            compareError.textContent = '';
 
             if (!file1 || !file2) {
-                showError('Please select both documents to compare');
+                compareError.textContent = 'Please select both documents to compare';
+                compareError.style.display = 'block';
                 return;
             }
 
             // Hide previous results
             document.getElementById('results').style.display = 'none';
             document.getElementById('comparisonResults').style.display = 'none';
-            document.getElementById('error').style.display = 'none';
-            document.getElementById('loading').querySelector('p').textContent = 'Comparing documents...';
-            document.getElementById('loading').style.display = 'block';
+
+            // Show loading indicator
+            compareLoading.style.display = 'block';
+            loadingText.textContent = 'Extracting text from documents...';
+            this.disabled = true;
 
             try {
                 const formData = new FormData();
                 formData.append('file1', file1);
                 formData.append('file2', file2);
 
+                // Update status
+                loadingText.textContent = 'Analyzing differences with AI...';
+
                 const response = await fetch('/compare', {
                     method: 'POST',
                     body: formData
                 });
 
+                loadingText.textContent = 'Processing results...';
+
                 const data = await response.json();
 
                 if (!response.ok) {
@@ -1204,9 +1366,11 @@
 
                 displayComparisonResults(data);
             } catch (error) {
-                showError(error.message || 'An error occurred during comparison');
+                compareError.textContent = error.message || 'An error occurred during comparison';
+                compareError.style.display = 'block';
             } finally {
-                document.getElementById('loading').style.display = 'none';
+                compareLoading.style.display = 'none';
+                this.disabled = false;
             }
         });
 
@@ -1342,43 +1506,49 @@
             const summaryDiv = document.getElementById('summary');
             const elementsList = document.getElementById('elementsList');
 
-            // Set status
-            statusDiv.textContent = data.status === 'PASS' ? '✓ Validation Passed' : '✗ Validation Failed';
+            // 1. Status Section
+            const isPass = data.status === 'PASS';
             statusDiv.className = `status ${data.status.toLowerCase()}`;
 
-            // Set summary
-            summaryDiv.textContent = data.summary || 'Validation completed';
+            const iconSvg = isPass
+                ? '<svg class="status-icon-svg" width="32" height="32" fill="none" stroke="#059669" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>'
+                : '<svg class="status-icon-svg" width="32" height="32" fill="none" stroke="#DC2626" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>';
 
-            // Clear and populate elements list
+            statusDiv.innerHTML = `
+                <div class="status-icon">
+                    ${iconSvg}
+                </div>
+                <div class="status-content">
+                    <h3>${isPass ? 'Validation Passed' : 'Validation Failed'}</h3>
+                    <p>${data.summary || 'Validation run completed.'}</p>
+                </div>
+            `;
+
+            // Hide separate summary div
+            summaryDiv.style.display = 'none';
+
+            // 2. Elements Grid
             elementsList.innerHTML = '';
+            elementsList.className = 'elements-grid'; // Ensure grid class is used
+
             data.elements_report.forEach(element => {
                 const li = document.createElement('li');
                 li.className = `element-item ${element.is_present ? 'present' : 'missing'} ${!element.required ? 'optional' : ''}`;
 
-                const header = document.createElement('div');
-                header.className = 'element-header';
-
-                const label = document.createElement('span');
-                label.className = 'element-label';
-                label.textContent = element.label;
-
-                const badge = document.createElement('span');
-                badge.className = `element-badge ${element.is_present ? 'badge-present' : 'badge-missing'} ${!element.required ? 'badge-optional' : ''}`;
+                let badgeClass = element.is_present ? 'badge-present' : 'badge-missing';
+                let badgeText = element.is_present ? 'PRESENT' : 'MISSING';
                 if (!element.required) {
-                    badge.textContent = 'Optional';
-                } else {
-                    badge.textContent = element.is_present ? 'Present' : 'Missing';
+                    badgeClass = 'badge-optional';
+                    badgeText = 'OPTIONAL';
                 }
 
-                header.appendChild(label);
-                header.appendChild(badge);
-
-                const reason = document.createElement('div');
-                reason.className = 'element-reason';
-                reason.textContent = element.reason;
-
-                li.appendChild(header);
-                li.appendChild(reason);
+                li.innerHTML = `
+                    <div class="element-header">
+                        <span class="element-label">${element.label}</span>
+                        <span class="element-badge ${badgeClass}">${badgeText}</span>
+                    </div>
+                    <div class="element-reason">${element.reason}</div>
+                `;
                 elementsList.appendChild(li);
             });
 
@@ -1397,7 +1567,11 @@
         }
 
         function displaySpellCheck(spellCheck) {
-            const elementsList = document.getElementById('elementsList');
+            const resultsDiv = document.getElementById('results');
+
+            // Remove existing spell check section
+            const existing = resultsDiv.querySelectorAll('.spell-check-section');
+            existing.forEach(el => el.remove());
 
             // Create spell check section
             const spellSection = document.createElement('div');
@@ -1405,137 +1579,201 @@
 
             const header = document.createElement('div');
             header.className = 'spell-check-header';
-            header.innerHTML = `✨ Quality & Spelling Check<span style="font-size: 14px; color: #666; font-weight: normal; margin-left: auto;">${spellCheck.summary}</span>`;
+            header.innerHTML = `
+                <div style="display:flex; align-items:center; gap:12px;">
+                    <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                    Quality & Spelling Check
+                </div>
+                <span style="font-size: 14px; color: var(--text-secondary); font-weight: normal;">${spellCheck.summary}</span>
+            `;
             spellSection.appendChild(header);
 
             if (spellCheck.total_errors === 0) {
                 const noErrors = document.createElement('div');
-                noErrors.className = 'spell-check-no-errors';
-                noErrors.textContent = '✓ No quality or spelling errors found!';
+                noErrors.className = 'status pass';
+                noErrors.style.marginBottom = '0';
+                noErrors.style.display = 'flex';
+                noErrors.innerHTML = `
+                    <div style="font-size: 20px;">✓</div>
+                    <div>No quality or spelling errors found!</div>
+                `;
                 spellSection.appendChild(noErrors);
             } else {
+                const grid = document.createElement('div');
+                grid.className = 'spell-errors-grid';
+
                 spellCheck.errors.forEach(error => {
                     const errorItem = document.createElement('div');
-                    errorItem.className = 'spell-error-item';
+                    errorItem.className = 'element-item'; // Reuse card style
+                    errorItem.style.borderLeft = '4px solid var(--warning)'; // Distinctive
 
                     const wordDiv = document.createElement('div');
-                    wordDiv.className = 'spell-error-word';
-                    wordDiv.innerHTML = `"${error.word}"<span class="spell-error-type type-${error.error_type}">${error.error_type}</span>`;
+                    wordDiv.style.marginBottom = '8px';
+                    wordDiv.innerHTML = `<span style="font-weight:700; font-size:16px; color:#1F2937;">"${error.word}"</span> <span class="element-badge badge-missing" style="font-size:10px; margin-left:8px;">${error.error_type}</span>`;
                     errorItem.appendChild(wordDiv);
 
                     if (error.context) {
                         const contextDiv = document.createElement('div');
-                        contextDiv.className = 'spell-error-context';
+                        contextDiv.className = 'element-reason';
+                        contextDiv.style.borderTop = 'none';
+                        contextDiv.style.paddingLeft = '0';
+                        contextDiv.style.fontStyle = 'italic';
                         contextDiv.textContent = `Context: "${error.context}"`;
                         errorItem.appendChild(contextDiv);
                     }
 
                     if (error.suggestions && error.suggestions.length > 0) {
-                        const suggestionsLabel = document.createElement('div');
-                        suggestionsLabel.textContent = 'Suggestions:';
-                        suggestionsLabel.style.fontSize = '14px';
-                        suggestionsLabel.style.marginTop = '8px';
-                        suggestionsLabel.style.marginBottom = '6px';
-                        suggestionsLabel.style.fontWeight = '600';
-                        errorItem.appendChild(suggestionsLabel);
-
                         const suggestionsDiv = document.createElement('div');
-                        suggestionsDiv.className = 'spell-suggestions';
+                        suggestionsDiv.style.marginTop = '12px';
+                        suggestionsDiv.style.display = 'flex';
+                        suggestionsDiv.style.gap = '8px';
+                        suggestionsDiv.style.flexWrap = 'wrap';
+
                         error.suggestions.forEach(suggestion => {
-                            const suggestionSpan = document.createElement('span');
-                            suggestionSpan.className = 'spell-suggestion';
-                            suggestionSpan.textContent = suggestion;
-                            suggestionsDiv.appendChild(suggestionSpan);
+                            const badge = document.createElement('span');
+                            badge.className = 'element-badge badge-present';
+                            badge.textContent = suggestion;
+                            suggestionsDiv.appendChild(badge);
                         });
                         errorItem.appendChild(suggestionsDiv);
                     }
 
-                    spellSection.appendChild(errorItem);
+                    grid.appendChild(errorItem);
                 });
+                spellSection.appendChild(grid);
             }
 
-            elementsList.appendChild(spellSection);
+            resultsDiv.appendChild(spellSection);
         }
 
         function displayLinkReport(linkReport) {
-            const elementsList = document.getElementById('elementsList');
+            const resultsDiv = document.getElementById('results');
+
+            // Remove existing
+            const existing = resultsDiv.querySelectorAll('.link-validation-section');
+            existing.forEach(el => el.remove());
 
             // Create link results section
             const linkSection = document.createElement('div');
             linkSection.className = 'link-validation-section';
+            // Inline styles to match refined look (or could add to CSS block)
+            linkSection.style.background = 'white';
+            linkSection.style.border = '1px solid var(--border)';
+            linkSection.style.borderRadius = 'var(--radius-lg)';
+            linkSection.style.padding = '24px';
+            linkSection.style.marginTop = '32px';
+            linkSection.style.boxShadow = 'var(--shadow-sm)';
 
             const header = document.createElement('div');
             header.className = 'link-validation-header';
-            header.innerHTML = `🔗 Link Validation <span style="font-size: 14px; color: #666; font-weight: normal; margin-left: auto;">${linkReport.length} link(s) checked</span>`;
+            header.innerHTML = `
+                <div style="display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:18px; font-weight:700; color:var(--text-primary); border-bottom:2px solid var(--bg-main); padding-bottom:16px;">
+                    <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg>
+                    Link Validation
+                    <span style="font-size: 14px; color: var(--text-secondary); font-weight: normal; margin-left: auto;">${linkReport.length} link(s) checked</span>
+                </div>
+            `;
             linkSection.appendChild(header);
 
             if (linkReport.length === 0) {
                 const noLinks = document.createElement('div');
                 noLinks.style.padding = '10px';
-                noLinks.style.color = '#666';
+                noLinks.style.color = 'var(--text-secondary)';
                 noLinks.style.fontStyle = 'italic';
                 noLinks.textContent = 'No links found in document.';
                 linkSection.appendChild(noLinks);
             } else {
                 const list = document.createElement('ul');
                 list.className = 'link-list';
+                list.style.listStyle = 'none';
 
                 linkReport.forEach(link => {
                     const item = document.createElement('li');
-                    let statusClass = 'valid';
-                    if (link.status === 'broken') statusClass = 'broken';
-                    if (link.status === 'warning') statusClass = 'warning';
+                    let statusColor = 'var(--success)';
+                    let borderColor = 'var(--success-bg)';
+                    let bgColor = '#F0FDF4';
+
+                    if (link.status === 'broken') {
+                        statusColor = 'var(--error)';
+                        borderColor = 'var(--error-bg)';
+                        bgColor = '#FEF2F2';
+                    }
+                    if (link.status === 'warning') {
+                        statusColor = 'var(--warning)';
+                        borderColor = 'var(--warning-bg)';
+                        bgColor = '#FFFBEB';
+                    }
 
-                    item.className = `link-item ${statusClass}`;
+                    item.style.display = 'flex';
+                    item.style.marginBottom = '10px';
+                    item.style.padding = '12px';
+                    item.style.background = bgColor;
+                    item.style.border = `1px solid ${borderColor}`;
+                    item.style.borderRadius = 'var(--radius-md)';
+                    item.style.alignItems = 'center';
 
                     const leftDiv = document.createElement('div');
                     leftDiv.style.flex = '1';
                     leftDiv.style.marginRight = '10px';
                     leftDiv.style.overflow = 'hidden';
-
-                    const urlDiv = document.createElement('div');
-                    urlDiv.className = 'link-url';
-                    urlDiv.textContent = link.url;
-                    leftDiv.appendChild(urlDiv);
-
-                    const metaDiv = document.createElement('div');
-                    metaDiv.className = 'link-meta';
-                    const pageInfo = link.page !== 'Unknown' ? `Page: ${link.page}` : '';
-                    metaDiv.textContent = `${pageInfo} ${link.message ? '• ' + link.message : ''}`;
-                    leftDiv.appendChild(metaDiv);
-
-                    const badge = document.createElement('span');
-                    badge.className = `link-status-badge status-${statusClass}`;
-                    badge.textContent = link.status.toUpperCase();
+                    leftDiv.style.textOverflow = 'ellipsis';
+
+                    const urlLink = document.createElement('a');
+                    urlLink.href = link.url;
+                    urlLink.target = '_blank';
+                    urlLink.textContent = link.url;
+                    urlLink.style.color = 'var(--primary)';
+                    urlLink.style.fontWeight = '500';
+                    urlLink.style.textDecoration = 'none';
+                    leftDiv.appendChild(urlLink);
+
+                    const statusSpan = document.createElement('span');
+                    statusSpan.style.fontWeight = '700';
+                    statusSpan.style.color = statusColor;
+                    statusSpan.style.textTransform = 'uppercase';
+                    statusSpan.style.fontSize = '12px';
+                    statusSpan.textContent = link.status;
 
                     item.appendChild(leftDiv);
-                    item.appendChild(badge);
+                    item.appendChild(statusSpan);
                     list.appendChild(item);
                 });
                 linkSection.appendChild(list);
             }
 
-            elementsList.appendChild(linkSection);
+            resultsDiv.appendChild(linkSection);
         }
 
         function displaySpellingOnlyResults(data) {
             const resultsDiv = document.getElementById('results');
             const statusDiv = document.getElementById('status');
             const summaryDiv = document.getElementById('summary');
-            const elementsList = document.getElementById('elementsList');
+            const elementsList = document.getElementById('elementsList'); // unused but cleared
 
-            // Set status for spelling-only mode
+            // 1. Status Section
             const hasErrors = data.spell_check && data.spell_check.total_errors > 0;
-            statusDiv.textContent = hasErrors ? '⚠️ Issues Found' : '✓ Text Quality OK';
             statusDiv.className = `status ${hasErrors ? 'fail' : 'pass'}`;
 
-            // Set summary
-            summaryDiv.textContent = data.spell_check ? data.spell_check.summary : 'Spell check completed';
+            const iconSvg = hasErrors
+                ? '<svg class="status-icon-svg" width="32" height="32" fill="none" stroke="#DC2626" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>'
+                : '<svg class="status-icon-svg" width="32" height="32" fill="none" stroke="#059669" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>';
+
+            statusDiv.innerHTML = `
+                <div class="status-icon">
+                    ${iconSvg}
+                </div>
+                <div class="status-content">
+                    <h3>${hasErrors ? 'Quality Issues Found' : 'Text Quality Passed'}</h3>
+                    <p>${data.summary || (hasErrors ? 'Issues detected in document text.' : 'No spelling or grammar issues found.')}</p>
+                </div>
+            `;
 
-            // Clear elements list
+            // Hide summary, clear elements
+            summaryDiv.style.display = 'none';
             elementsList.innerHTML = '';
+            elementsList.className = 'elements-grid'; // Ensure grid class just in case
 
-            // Display spell check results
+            // Display spell check results if available
             if (data.spell_check) {
                 displaySpellCheck(data.spell_check);
             }
@@ -1545,81 +1783,85 @@
         }
 
         // Debug: Extract images
-        document.getElementById('debugBtn').addEventListener('click', async function () {
-            const templateKey = document.getElementById('templateSelect').value;
-            const fileInput = document.getElementById('fileInput');
-            const file = fileInput.files[0];
-            const debugInfo = document.getElementById('debugInfo');
+        const debugBtn = document.getElementById('debugBtn');
+        if (debugBtn) {
+            debugBtn.addEventListener('click', async function () {
+                const templateKey = document.getElementById('templateSelect').value;
+                const fileInput = document.getElementById('fileInput');
+                const file = fileInput.files[0];
+                const debugInfo = document.getElementById('debugInfo');
+
+                if (!templateKey) {
+                    alert('Please select a template first');
+                    return;
+                }
 
-            if (!templateKey) {
-                alert('Please select a template first');
-                return;
-            }
+                if (!file) {
+                    alert('Please select a file first');
+                    return;
+                }
 
-            if (!file) {
-                alert('Please select a file first');
-                return;
-            }
+                debugInfo.style.display = 'block';
+                debugInfo.innerHTML = '<p>Extracting images...</p>';
 
-            debugInfo.style.display = 'block';
-            debugInfo.innerHTML = '<p>Extracting images...</p>';
+                try {
+                    const formData = new FormData();
+                    formData.append('file', file);
 
-            try {
-                const formData = new FormData();
-                formData.append('file', file);
+                    const response = await fetch(`/debug/extract-images?template_key=${encodeURIComponent(templateKey)}`, {
+                        method: 'POST',
+                        body: formData
+                    });
 
-                const response = await fetch(`/debug/extract-images?template_key=${encodeURIComponent(templateKey)}`, {
-                    method: 'POST',
-                    body: formData
-                });
+                    const data = await response.json();
 
-                const data = await response.json();
+                    if (!response.ok) {
+                        throw new Error(data.detail || 'Extraction failed');
+                    }
 
-                if (!response.ok) {
-                    throw new Error(data.detail || 'Extraction failed');
-                }
+                    // Format debug output
+                    let output = '=== IMAGE EXTRACTION DEBUG ===\n\n';
+                    output += `File: ${data.file_name}\n`;
+                    output += `Size: ${(data.file_size_bytes / 1024).toFixed(2)} KB\n`;
+                    output += `Text extracted: ${data.text_extracted ? 'Yes' : 'No'} (${data.text_length} chars)\n\n`;
+                    output += `Images Found: ${data.images_found}\n`;
+                    output += `Template Requires Visual Elements: ${data.template_requires_visual_elements ? 'Yes' : 'No'}\n\n`;
+
+                    if (data.template_visual_elements.length > 0) {
+                        output += 'Template Visual Elements:\n';
+                        data.template_visual_elements.forEach(elem => {
+                            output += `  - ${elem.label} (${elem.type}) - Required: ${elem.required}\n`;
+                        });
+                        output += '\n';
+                    }
 
-                // Format debug output
-                let output = '=== IMAGE EXTRACTION DEBUG ===\n\n';
-                output += `File: ${data.file_name}\n`;
-                output += `Size: ${(data.file_size_bytes / 1024).toFixed(2)} KB\n`;
-                output += `Text extracted: ${data.text_extracted ? 'Yes' : 'No'} (${data.text_length} chars)\n\n`;
-                output += `Images Found: ${data.images_found}\n`;
-                output += `Template Requires Visual Elements: ${data.template_requires_visual_elements ? 'Yes' : 'No'}\n\n`;
-
-                if (data.template_visual_elements.length > 0) {
-                    output += 'Template Visual Elements:\n';
-                    data.template_visual_elements.forEach(elem => {
-                        output += `  - ${elem.label} (${elem.type}) - Required: ${elem.required}\n`;
-                    });
-                    output += '\n';
-                }
+                    if (data.images.length > 0) {
+                        output += 'Extracted Images:\n';
+                        data.images.forEach((img, idx) => {
+                            output += `\n${idx + 1}. ${img.id}\n`;
+                            output += `   Path: ${img.file_path}\n`;
+                            output += `   Exists: ${img.file_exists ? 'Yes' : 'No'}\n`;
+                            output += `   Size: ${(img.file_size_bytes / 1024).toFixed(2)} KB\n`;
+                            output += `   Dimensions: ${img.dimensions}\n`;
+                            output += `   Mode: ${img.image_mode}\n`;
+                            output += `   Role: ${img.role_hint}\n`;
+                            output += `   Type: ${img.element_type}\n`;
+                        });
+                    } else {
+                        output += '\n⚠️ No images were extracted from the document.\n';
+                        output += 'This could mean:\n';
+                        output += '  - The document has no embedded images\n';
+                        output += '  - Images are in a format not supported\n';
+                        output += '  - Images are embedded as external links\n';
+                    }
 
-                if (data.images.length > 0) {
-                    output += 'Extracted Images:\n';
-                    data.images.forEach((img, idx) => {
-                        output += `\n${idx + 1}. ${img.id}\n`;
-                        output += `   Path: ${img.file_path}\n`;
-                        output += `   Exists: ${img.file_exists ? 'Yes' : 'No'}\n`;
-                        output += `   Size: ${(img.file_size_bytes / 1024).toFixed(2)} KB\n`;
-                        output += `   Dimensions: ${img.dimensions}\n`;
-                        output += `   Mode: ${img.image_mode}\n`;
-                        output += `   Role: ${img.role_hint}\n`;
-                        output += `   Type: ${img.element_type}\n`;
-                    });
-                } else {
-                    output += '\n⚠️ No images were extracted from the document.\n';
-                    output += 'This could mean:\n';
-                    output += '  - The document has no embedded images\n';
-                    output += '  - Images are in a format not supported\n';
-                    output += '  - Images are embedded as external links\n';
+                    debugInfo.innerHTML = '<pre>' + output + '</pre>';
+                } catch (error) {
+                    debugInfo.innerHTML = '<pre style="color: red;">Error: ' + error.message + '</pre>';
                 }
+            });
+        }
 
-                debugInfo.innerHTML = '<pre>' + output + '</pre>';
-            } catch (error) {
-                debugInfo.innerHTML = '<pre style="color: red;">Error: ' + error.message + '</pre>';
-            }
-        });
 
         // Function to display comparison results
         function displayComparisonResults(data) {
@@ -1921,52 +2163,65 @@
         }
 
         // Create project modal handlers
-        document.getElementById('createProjectBtn').addEventListener('click', function () {
-            document.getElementById('createProjectModal').style.display = 'flex';
-            document.getElementById('projectName').value = '';
-            document.getElementById('projectDescription').value = '';
-        });
+        // Create project modal handlers
+        const createProjectBtn = document.getElementById('createProjectBtn');
+        if (createProjectBtn) {
+            createProjectBtn.addEventListener('click', function () {
+                document.getElementById('createProjectModal').style.display = 'flex';
+                document.getElementById('projectName').value = '';
+                document.getElementById('projectDescription').value = '';
+            });
+        }
 
-        document.getElementById('cancelProjectBtn').addEventListener('click', function () {
-            document.getElementById('createProjectModal').style.display = 'none';
-        });
+        const cancelProjectBtn = document.getElementById('cancelProjectBtn');
+        if (cancelProjectBtn) {
+            cancelProjectBtn.addEventListener('click', function () {
+                document.getElementById('createProjectModal').style.display = 'none';
+            });
+        }
 
-        document.getElementById('saveProjectBtn').addEventListener('click', async function () {
-            const name = document.getElementById('projectName').value.trim();
-            const description = document.getElementById('projectDescription').value.trim();
+        const saveProjectBtn = document.getElementById('saveProjectBtn');
+        if (saveProjectBtn) {
+            saveProjectBtn.addEventListener('click', async function () {
+                const name = document.getElementById('projectName').value.trim();
+                const description = document.getElementById('projectDescription').value.trim();
 
-            if (!name) {
-                showError('Project name is required');
-                return;
-            }
+                if (!name) {
+                    showError('Project name is required');
+                    return;
+                }
 
-            try {
-                const response = await fetch('/projects', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ name, description })
-                });
+                try {
+                    const response = await fetch('/projects', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ name, description })
+                    });
 
-                if (!response.ok) {
-                    const error = await response.json();
-                    throw new Error(error.detail || 'Failed to create project');
-                }
+                    if (!response.ok) {
+                        const error = await response.json();
+                        throw new Error(error.detail || 'Failed to create project');
+                    }
 
-                const project = await response.json();
-                document.getElementById('createProjectModal').style.display = 'none';
-                await loadProjects();
-                document.getElementById('currentProject').value = project.id;
-                showError(''); // clear error
-            } catch (error) {
-                showError(error.message);
-            }
-        });
+                    const project = await response.json();
+                    document.getElementById('createProjectModal').style.display = 'none';
+                    await loadProjects();
+                    document.getElementById('currentProject').value = project.id;
+                    showError(''); // clear error
+                } catch (error) {
+                    showError(error.message);
+                }
+            });
+        }
 
         // View all projects
-        document.getElementById('viewProjectsBtn').addEventListener('click', function () {
-            // For now, just alert - can be enhanced later
-            alert('Projects view coming soon! For now, use the dropdown to select projects.');
-        });
+        const viewProjectsBtn = document.getElementById('viewProjectsBtn');
+        if (viewProjectsBtn) {
+            viewProjectsBtn.addEventListener('click', function () {
+                // For now, just alert - can be enhanced later
+                alert('Projects view coming soon! For now, use the dropdown to select projects.');
+            });
+        }
 
 
         // ==================== SHAREPOINT INTEGRATION ====================
@@ -1978,89 +2233,152 @@
             breadcrumbs: [],
             selectedFiles: new Set()
         };
-
         // Initialize UI based on auth state
         function updateSharePointUI() {
-            if (spState.token) {
-                document.getElementById('sharepointAuthSection').style.display = 'none';
-                document.getElementById('sharepointActionsSection').style.display = 'block';
-            } else {
-                document.getElementById('sharepointAuthSection').style.display = 'block';
-                document.getElementById('sharepointActionsSection').style.display = 'none';
-            }
+            const connected = localStorage.getItem('sp_connected') === 'true';
+            // FIX: Use correct ID from HTML (sharepointAuthSection, not sharepointConnectSection)
+            const connectDiv = document.getElementById('sharepointAuthSection');
+            const actionsDiv = document.getElementById('sharepointActionsSection');
+
+            if (connectDiv) connectDiv.style.display = connected ? 'none' : 'flex';
+            if (actionsDiv) actionsDiv.style.display = connected ? 'block' : 'none';
         }
         updateSharePointUI();
 
         // Connect Button Handler
-        document.getElementById('connectSharePointBtn').addEventListener('click', async () => {
-            try {
-                const response = await fetch('/auth/sharepoint/login');
-                const data = await response.json();
-
-                // Open popup
+        const connectSharePointBtn = document.getElementById('connectSharePointBtn');
+        console.log('SharePoint Button found:', !!connectSharePointBtn); // Debug
+        if (connectSharePointBtn) {
+            connectSharePointBtn.addEventListener('click', async () => {
+                console.log('Connect Account button clicked!'); // Debug
+                // Open popup immediately to avoid blocker
                 const width = 600;
                 const height = 700;
                 const left = (window.screen.width - width) / 2;
                 const top = (window.screen.height - height) / 2;
 
-                window.open(
-                    data.auth_url,
-                    'SharePointLogin',
+                // Use unique name to ensure new window every time
+                const popup = window.open(
+                    'about:blank',
+                    `SharePointLogin_${Date.now()}`,
                     `width=${width},height=${height},top=${top},left=${left}`
                 );
-            } catch (error) {
-                showError('Failed to start login: ' + error.message);
-            }
-        });
 
-        // Listen for auth message from popup
-        window.addEventListener('message', (event) => {
-            if (event.data.type === 'SHAREPOINT_AUTH') {
-                spState.token = event.data.token;
-                localStorage.setItem('sharepoint_token', spState.token);
-                updateSharePointUI();
-                showError(''); // Clear errors
-            }
-        });
+                console.log('Popup result:', popup); // Debug
+
+                if (!popup) {
+                    showError('Popup blocked! Please allow popups for this site.');
+                    return;
+                }
+
+                // Safer way to set content
+                try {
+                    popup.document.body.innerHTML = '<h3>Connecting to Microsoft...</h3><p>Please wait while we redirect you.</p>';
+                } catch (e) {
+                    // Ignore modification errors if cross-origin or closed
+                    console.warn('Could not set popup content', e);
+                }
+
+                try {
+                    const response = await fetch('/auth/sharepoint/login');
+                    const data = await response.json();
+                    console.log('Auth response:', data); // Debug
+
+                    if (response.ok && data.auth_url) {
+                        if (!popup.closed) {
+                            popup.location.href = data.auth_url;
+                        }
+                    } else {
+                        if (!popup.closed) popup.close();
+                        showError('Failed to get login URL');
+                    }
+                } catch (error) {
+                    console.error('Auth error:', error); // Debug
+                    if (!popup.closed) popup.close();
+                    showError('Failed to start login: ' + error.message);
+                }
+            });
+        } else {
+            console.error('SharePoint button NOT FOUND in DOM!');
+        }
 
         // Logout
-        document.getElementById('logoutSharePointBtn').addEventListener('click', () => {
-            spState.token = null;
-            localStorage.removeItem('sharepoint_token');
-            updateSharePointUI();
-        });
+        const logoutSharePointBtn = document.getElementById('logoutSharePointBtn');
+        if (logoutSharePointBtn) {
+            logoutSharePointBtn.addEventListener('click', () => {
+                localStorage.removeItem('sp_connected');
+                updateSharePointUI();
+            });
+        }
 
-        // Browse Button
-        document.getElementById('browseSharePointBtn').addEventListener('click', () => {
-            document.getElementById('sharePointModal').style.display = 'flex';
-            loadDrives();
-        });
+        // Browse
+        const browseSharePointBtn = document.getElementById('browseSharePointBtn');
+        if (browseSharePointBtn) {
+            browseSharePointBtn.addEventListener('click', async () => {
+                document.getElementById('sharepointModal').style.display = 'flex';
+                await loadSharePointItems();
+            });
+        }
 
-        document.getElementById('closeSharePointModal').addEventListener('click', () => {
-            document.getElementById('sharePointModal').style.display = 'none';
-        });
+        // Close Modal
+        const closeSharePointModal = document.getElementById('closeSharePointModal');
+        if (closeSharePointModal) {
+            closeSharePointModal.addEventListener('click', () => {
+                document.getElementById('sharepointModal').style.display = 'none';
+            });
+        }
 
-        // Load Drives (Root level)
-        async function loadDrives() {
-            showLoadingList();
-            try {
-                const response = await fetch(`/sharepoint/drives?token=${spState.token}`);
-                if (!response.ok) throw new Error('Failed to load drives');
-                const drives = await response.json();
-
-                spState.currentDriveId = null;
-                spState.breadcrumbs = [{ name: 'Home', id: null }];
-                updateBreadcrumbs();
-
-                renderList(drives.map(drive => ({
-                    id: drive.id,
-                    name: drive.name,
-                    type: 'drive',
-                    icon: '💽'
-                })));
-            } catch (error) {
-                handleSPError(error);
-            }
+        // Back Button
+        const spBackBtn = document.getElementById('spBackBtn');
+        if (spBackBtn) {
+            spBackBtn.addEventListener('click', async () => {
+                if (currentPath.length > 0) {
+                    currentPath.pop(); // Remove current folder
+                    const parentFolder = currentPath.length > 0 ? currentPath[currentPath.length - 1] : null;
+                    await loadSharePointItems(parentFolder ? parentFolder.id : null);
+                }
+            });
+        }
+
+        // Import Button
+        const spImportBtn = document.getElementById('spImportBtn');
+        if (spImportBtn) {
+            spImportBtn.addEventListener('click', async () => {
+                const checkboxes = document.querySelectorAll('.sp-item-checkbox:checked');
+                if (checkboxes.length === 0) {
+                    alert('Please select at least one file to import.');
+                    return;
+                }
+
+                const fileIds = Array.from(checkboxes).map(cb => cb.value);
+                const btn = document.getElementById('spImportBtn');
+                btn.disabled = true;
+                btn.textContent = 'Importing...';
+
+                try {
+                    // This endpoint would handle downloading from Graph API and processing
+                    // For now, we simulate success or need to implement the backend logic
+                    const response = await fetch('/sharepoint/download-and-validate', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ file_ids: fileIds })
+                    });
+
+                    if (response.ok) {
+                        const result = await response.json();
+                        document.getElementById('sharepointModal').style.display = 'none';
+                        // Refresh validation results or show success
+                        displayResults(result);
+                    } else {
+                        throw new Error('Import failed');
+                    }
+                } catch (e) {
+                    alert('Error importing files: ' + e.message);
+                } finally {
+                    btn.disabled = false;
+                    btn.textContent = 'Import Selected';
+                }
+            });
         }
 
         // Load Items (Folder level)
@@ -2203,48 +2521,21 @@
             return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
         }
 
-        // Import Button
-        document.getElementById('spImportBtn').addEventListener('click', async () => {
-            const fileIds = Array.from(spState.selectedFiles);
-            const btn = document.getElementById('spImportBtn');
-            btn.disabled = true;
-            btn.textContent = 'Importing...';
-
-            try {
-                // Determine current project
-                const projectId = document.getElementById('currentProject').value || null;
-
-                const response = await fetch('/sharepoint/download-and-validate', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        drive_id: spState.currentDriveId,
-                        file_ids: fileIds,
-                        token: spState.token,
-                        project_id: projectId ? parseInt(projectId) : null
-                    })
-                });
-
-                if (!response.ok) throw new Error('Import failed');
-
-                const result = await response.json();
-                document.getElementById('sharePointModal').style.display = 'none';
-                spState.selectedFiles.clear();
-                updateSelectionCount();
-
-                // Show success or redirect to results
-                showStatus('Successfully imported files! Check validation results below.', 'pass');
-
-                // Trigger refresh of validations (if implemented) or just alert
-                alert('Files imported successfully! (Validation logic to be connected fully in next step)');
+        // App Logout
+        const logoutBtn = document.getElementById('logoutBtn');
+        if (logoutBtn) {
+            logoutBtn.addEventListener('click', async () => {
+                try {
+                    // Call backend logout if it exists, or just redirect
+                    await fetch('/logout', { method: 'POST' });
+                    window.location.href = '/login';
+                } catch (e) {
+                    // Fallback
+                    window.location.href = '/login';
+                }
+            });
+        }
 
-            } catch (error) {
-                showError('Import failed: ' + error.message);
-            } finally {
-                btn.disabled = false;
-                btn.textContent = 'Import & Validate';
-            }
-        });
 
         // Load templates when page loads
         loadProjects();

app/validator.py

@@ -681,9 +681,38 @@ class Validator:
         """
         logger.info(f"Starting comparison: {file1_name} vs {file2_name}")
         
+        # Normalize text to handle PDF ligatures and encoding differences
+        def normalize_text(text: str) -> str:
+            """Normalize Unicode ligatures and common PDF text artifacts."""
+            import unicodedata
+            # Common ligature replacements
+            ligatures = {
+                'fi': 'fi',
+                'fl': 'fl',
+                'ff': 'ff',
+                'ffi': 'ffi',
+                'ffl': 'ffl',
+                'Ꜳ': 'AA',
+                'ꜳ': 'aa',
+                'Æ': 'AE',
+                'æ': 'ae',
+                'Œ': 'OE',
+                'œ': 'oe',
+                '\u00AD': '',  # Soft hyphen
+                '\u200B': '',  # Zero-width space
+                '\u200C': '',  # Zero-width non-joiner
+                '\u200D': '',  # Zero-width joiner
+                '\uFEFF': '',  # BOM
+            }
+            for lig, replacement in ligatures.items():
+                text = text.replace(lig, replacement)
+            # Normalize Unicode to NFC form
+            text = unicodedata.normalize('NFC', text)
+            return text
+        
         # Extract text from both documents
-        text1 = extract_document_text(file1_content, file1_extension)
-        text2 = extract_document_text(file2_content, file2_extension)
+        text1 = normalize_text(extract_document_text(file1_content, file1_extension))
+        text2 = normalize_text(extract_document_text(file2_content, file2_extension))
         
         logger.info(f"Extracted text - File 1: {len(text1)} chars, File 2: {len(text2)} chars")
         
@@ -691,18 +720,25 @@ class Validator:
             raise ValueError("Both documents appear to be empty or contain no extractable text")
         
         # Build LLM prompt for comparison
-        comparison_prompt = f"""You are comparing two versions of a document to identify what changed.
+        comparison_prompt = f"""You are comparing two versions of a document to identify MEANINGFUL content changes.
 
-DOCUMENT 1 ({file1_name}):
-{text1[:10000]}  # Limit to avoid token limits
+DOCUMENT 1 (Original - {file1_name}):
+{text1[:10000]}
 
-DOCUMENT 2 ({file2_name}):
+DOCUMENT 2 (Modified - {file2_name}):
 {text2[:10000]}
 
 Please analyze the differences between these two documents and provide:
 
 1. A natural language summary of the main changes (2-3 sentences)
-2. A detailed list of specific changes
+2. A detailed list of UNIQUE, MEANINGFUL changes only
+
+IMPORTANT RULES:
+- Do NOT report duplicate changes - each change should appear only once
+- IGNORE font/encoding differences (like ligatures, special characters that look the same)
+- IGNORE minor whitespace or formatting differences
+- Focus on actual CONTENT changes (text additions, deletions, modifications)
+- Group similar changes together instead of listing each instance separately
 
 Format your response as a JSON object with this structure:
 {{
@@ -710,19 +746,17 @@ Format your response as a JSON object with this structure:
     "changes": [
         {{
             "type": "addition|deletion|modification",
-            "section": "Optional section name where change occurred",
+            "section": "Section name where change occurred",
             "description": "Description of the change"
         }}
     ]
 }}
 
-Focus on:
-- Content additions or deletions
-- Text modifications
-- Structural changes (headings, lists, tables)
-- Significant formatting changes
-
-If the documents are identical, return an empty changes array.
+If the documents are essentially identical (only minor formatting/encoding differences), return:
+{{
+    "summary": "Documents are essentially identical with no meaningful content changes.",
+    "changes": []
+}}
 """
 
         try:
@@ -744,9 +778,42 @@ If the documents are identical, return an empty changes array.
             response_text = message.content[0].text if message.content else ""
             logger.info(f"Received comparison response ({len(response_text)} chars)")
             
-            # Parse JSON response
+            # Parse JSON response - extract from markdown code blocks if present
             import json
-            comparison_data = json.loads(response_text)
+            import re
+            
+            # Try to extract JSON from markdown code blocks
+            json_text = response_text
+            
+            # Check for ```json ... ``` or ``` ... ``` patterns
+            code_block_match = re.search(r'```(?:json)?\s*([\s\S]*?)```', response_text)
+            if code_block_match:
+                json_text = code_block_match.group(1).strip()
+                logger.info("Extracted JSON from markdown code block")
+            else:
+                # Try to find raw JSON object
+                json_match = re.search(r'\{[\s\S]*\}', response_text)
+                if json_match:
+                    json_text = json_match.group(0)
+                    logger.info("Extracted raw JSON object from response")
+            
+            try:
+                comparison_data = json.loads(json_text)
+            except json.JSONDecodeError as json_err:
+                logger.error(f"JSON parsing failed. Raw response: {response_text[:500]}...")
+                raise ValueError(f"Failed to parse comparison response as JSON: {str(json_err)}")
+            
+            # Deduplicate changes based on description
+            if 'changes' in comparison_data:
+                seen_descriptions = set()
+                unique_changes = []
+                for change in comparison_data['changes']:
+                    desc = change.get('description', '').lower().strip()
+                    if desc and desc not in seen_descriptions:
+                        seen_descriptions.add(desc)
+                        unique_changes.append(change)
+                comparison_data['changes'] = unique_changes
+                logger.info(f"After deduplication: {len(unique_changes)} unique changes")
             
             logger.info(f"Comparison complete: {len(comparison_data.get('changes', []))} changes detected")