🐳 07/03 - 09:51 - Make this more feature rich

index.html

@@ -209,9 +209,9 @@
     <div class="analytics-header">
       <h3>📊 Advanced Change Analytics</h3>
       <div class="analytics-controls">
-        <button id="toggleHeatmap" class="btn ghost small">Toggle Heatmap</button>
-        <button id="toggleMinimap" class="btn ghost small">Toggle Minimap</button>
-        <button id="toggleStructure" class="btn ghost small">Toggle Structure View</button>
+        <button id="analyticsToggleHeatmap" class="btn ghost small">Toggle Heatmap</button>
+        <button id="analyticsToggleMinimap" class="btn ghost small">Toggle Minimap</button>
+        <button id="analyticsToggleStructure" class="btn ghost small">Toggle Structure View</button>
       </div>
     </div>
     <div class="analytics-content">
@@ -346,6 +346,19 @@
             <li>Generate <strong>Comparison Reports</strong> for documentation and review purposes</li>
           </ul>
         </div>
+
+        <div class="modal-section">
+          <h4>⌨️ Keyboard Shortcuts</h4>
+          <ul>
+            <li><strong>Ctrl/Cmd + F</strong> - Focus search box</li>
+            <li><strong>Ctrl/Cmd + S</strong> - Export diff as HTML</li>
+            <li><strong>F3 / Enter</strong> - Navigate to next search result (Shift for previous)</li>
+            <li><strong>Alt + ↓</strong> - Jump to next change</li>
+            <li><strong>Alt + ↑</strong> - Jump to previous change</li>
+            <li><strong>Escape</strong> - Close modal / Clear search</li>
+            <li><strong>Double-click</strong> - Copy line to clipboard</li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>

script.js

@@ -9,15 +9,21 @@
     options: {
       ignoreWhitespace: false,
       syncScroll: true,
+      wordDiff: false,
+      darkMode: false,
+      viewMode: 'side-by-side', // 'side-by-side', 'inline', 'unified'
     },
     result: null, // diff result
     syncing: false,
     currentChangeIndex: -1,
     changeNavigation: [],
     showHeatmap: false,
-    showMinimap: true,
+    showMinimap: false,
+    showStructure: false,
+    showSemantics: false,
     searchResults: [],
     searchIndex: 0,
+    syntaxHighlight: true,
   };
   // Elements
   const els = {
@@ -75,12 +81,31 @@
     analyticsWrap: document.getElementById('analytics'),
     changeChart: document.getElementById('changeChart'),
     changeHeatmap: document.getElementById('changeHeatmap'),
-    toggleHeatmap: document.getElementById('toggleHeatmap'),
-    toggleMinimap: document.getElementById('toggleMinimap'),
+    semanticAnalysis: document.getElementById('semanticAnalysis'),
+    structuralAnalysis: document.getElementById('structuralAnalysis'),
+    trendChart: document.getElementById('trendChart'),
+    enhancedStats: document.getElementById('enhancedStats'),
+    statSemantic: document.getElementById('statSemantic'),
+    statComplexity: document.getElementById('statComplexity'),
 
     // minimap
     minimap: document.getElementById('minimap'),
     minimapContent: document.getElementById('minimapContent'),
+    minimapMode: document.getElementById('minimapMode'),
+
+    // toolbar buttons
+    exportBtn: document.getElementById('exportBtn'),
+    reportBtn: document.getElementById('reportBtn'),
+    acceptAllBtn: document.getElementById('acceptAllBtn'),
+    rejectAllBtn: document.getElementById('rejectAllBtn'),
+    toggleHeatmapBtn: document.getElementById('toggleHeatmap'),
+    toggleMinimapBtn: document.getElementById('toggleMinimap'),
+    toggleStructureBtn: document.getElementById('toggleStructure'),
+    toggleSemanticsBtn: document.getElementById('toggleSemantics'),
+    wordDiffBtn: document.getElementById('wordDiffBtn'),
+    layoutBtn: document.getElementById('layoutBtn'),
+    modeBtns: document.querySelectorAll('.mode-btn'),
+    comparisonToolbar: document.getElementById('comparisonToolbar'),
   };
 // Utilities
   const MAX_SIZE_BYTES = 5 * 1024 * 1024; // 5 MB safety limit
@@ -302,7 +327,502 @@
   }
 
   // Rendering
-  function renderDiff(result) {
+  // Syntax highlighting helpers
+  const syntaxRules = {
+    javascript: {
+      keywords: /\b(const|let|var|function|return|if|else|for|while|class|import|export|from|async|await|try|catch|new|this|typeof|instanceof)\b/g,
+      strings: /(['"`])(?:\\.|(?!\1)[^\\\r\n])*\1/g,
+      comments: /\/\/.*$/gm,
+      numbers: /\b\d+\b/g,
+    },
+    python: {
+      keywords: /\b(def|class|return|if|else|elif|for|while|try|except|import|from|as|with|pass|break|continue|lambda|yield|async|await)\b/g,
+      strings: /(['"])(?:\\.|(?!\1)[^\\\r\n])*\1/g,
+      comments: /#.*$/gm,
+      numbers: /\b\d+\b/g,
+    },
+    json: {
+      strings: /"(?:\\.|[^"\\])*"/g,
+      numbers: /\b\d+\b/g,
+      keywords: /\b(true|false|null)\b/g,
+    },
+    css: {
+      properties: /[a-z-]+(?=\s*:)/gi,
+      selectors: /[.#][a-zA-Z0-9_-]+/g,
+      comments: /\/\*[\s\S]*?\*\//g,
+      numbers: /\b\d+\b/g,
+    },
+    html: {
+      tags: /<\/?[a-zA-Z][a-zA-Z0-9]*[^>]*>/g,
+      strings: /"(?:\\.|[^"\\])*"/g,
+      comments: /<!--[\s\S]*?-->/g,
+    }
+  };
+
+  function detectLanguage(filename, content) {
+    if (!filename) return 'text';
+    const ext = filename.split('.').pop().toLowerCase();
+    const langMap = {
+      'js': 'javascript', 'ts': 'javascript', 'jsx': 'javascript', 'tsx': 'javascript',
+      'py': 'python', 'rb': 'ruby', 'go': 'go', 'java': 'java', 'c': 'c', 'cpp': 'cpp',
+      'h': 'c', 'cs': 'csharp', 'php': 'php', 'swift': 'swift', 'rs': 'rust',
+      'json': 'json', 'css': 'css', 'scss': 'css', 'less': 'css',
+      'html': 'html', 'htm': 'html', 'xml': 'html', 'svg': 'html',
+      'md': 'markdown', 'yml': 'yaml', 'yaml': 'yaml', 'sql': 'sql',
+      'sh': 'bash', 'bash': 'bash', 'zsh': 'bash'
+    };
+    return langMap[ext] || 'text';
+  }
+
+  function highlightCode(text, language) {
+    if (!state.syntaxHighlight || language === 'text') return escapeHtml(text);
+    
+    const rules = syntaxRules[language] || syntaxRules.javascript;
+    let html = escapeHtml(text);
+    
+    // Simple syntax highlighting (order matters)
+    if (rules.comments) {
+      html = html.replace(rules.comments, '<span class="syntax-comment">function renderDiff(result) {
+    const { aRes, bRes, A, B, stats } = result;
+
+    // Clear
+    els.tbodyLeft.innerHTML = '';
+    els.tbodyRight.innerHTML = '';
+
+    const fragLeft = document.createDocumentFragment();
+    const fragRight = document.createDocumentFragment();
+
+    for (let i = 0; i < aRes.length; i++) {
+      const ar = aRes[i];
+      const br = bRes[i];
+
+      const trL = document.createElement('tr');
+      trL.setAttribute('data-kind', ar.type);
+      trL.setAttribute('data-index', String(ar.aIndex ?? -1));
+      trL.id = ar.aIndex != null ? `L${ar.aIndex}` : `L-gap-${i}`;
+
+      const trR = document.createElement('tr');
+      trR.setAttribute('data-kind', br.type);
+      trR.setAttribute('data-index', String(br.bIndex ?? -1));
+      trR.id = br.bIndex != null ? `R${br.bIndex}` : `R-gap-${i}`;
+
+      // Line number cells
+      const tdNumL = document.createElement('td');
+      tdNumL.className = 'gutter';
+      tdNumL.textContent = ar.aIndex != null ? String(ar.aIndex + 1) : '';
+
+      const tdNumR = document.createElement('td');
+      tdNumR.className = 'gutter';
+      tdNumR.textContent = br.bIndex != null ? String(br.bIndex + 1) : '';
+
+      // Content cells
+      const tdContentL = document.createElement('td');
+      tdContentL.className = 'content';
+      tdContentL.classList.add('line');
+      tdContentL.classList.add(ar.type);
+
+      const tdContentR = document.createElement('td');
+      tdContentR.className = 'content';
+      tdContentR.classList.add('line');
+      tdContentR.classList.add(br.type);
+
+      // Prepare text
+      let leftText = '';
+      let rightText = '';
+
+      if (ar.type === 'equal') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'deleted') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'modified') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'moved') leftText = A[ar.aIndex] ?? '';
+      else leftText = '';
+
+      if (br.type === 'equal') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'inserted') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'modified') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'moved') rightText = B[br.bIndex] ?? '';
+      else rightText = '';
+
+      tdContentL.innerHTML = `${escapeHtml(leftText)}${renderActions(ar, 'left')}`;
+      tdContentR.innerHTML = `${escapeHtml(rightText)}${renderActions(br, 'right')}`;
+
+      trL.appendChild(tdNumL);
+      trL.appendChild(tdContentL);
+
+      trR.appendChild(tdNumR);
+      trR.appendChild(tdContentR);
+
+      fragLeft.appendChild(trL);
+      fragRight.appendChild(trR);
+    }
+
+    els.tbodyLeft.appendChild(fragLeft);
+    els.tbodyRight.appendChild(fragRight);
+
+    // Wire up actions
+    wireJumpButtons();
+
+    // Update stats
+    els.statsWrap.hidden = false;
+    els.statAdded.textContent = String(stats.added);
+    els.statDeleted.textContent = String(stats.deleted);
+    els.statModified.textContent = String(stats.modified);
+    els.statMoved.textContent = String(stats.moved);
+  }</span>');
+    }
+    if (rules.strings) {
+      html = html.replace(rules.strings, '<span class="syntax-string">function renderDiff(result) {
+    const { aRes, bRes, A, B, stats } = result;
+
+    // Clear
+    els.tbodyLeft.innerHTML = '';
+    els.tbodyRight.innerHTML = '';
+
+    const fragLeft = document.createDocumentFragment();
+    const fragRight = document.createDocumentFragment();
+
+    for (let i = 0; i < aRes.length; i++) {
+      const ar = aRes[i];
+      const br = bRes[i];
+
+      const trL = document.createElement('tr');
+      trL.setAttribute('data-kind', ar.type);
+      trL.setAttribute('data-index', String(ar.aIndex ?? -1));
+      trL.id = ar.aIndex != null ? `L${ar.aIndex}` : `L-gap-${i}`;
+
+      const trR = document.createElement('tr');
+      trR.setAttribute('data-kind', br.type);
+      trR.setAttribute('data-index', String(br.bIndex ?? -1));
+      trR.id = br.bIndex != null ? `R${br.bIndex}` : `R-gap-${i}`;
+
+      // Line number cells
+      const tdNumL = document.createElement('td');
+      tdNumL.className = 'gutter';
+      tdNumL.textContent = ar.aIndex != null ? String(ar.aIndex + 1) : '';
+
+      const tdNumR = document.createElement('td');
+      tdNumR.className = 'gutter';
+      tdNumR.textContent = br.bIndex != null ? String(br.bIndex + 1) : '';
+
+      // Content cells
+      const tdContentL = document.createElement('td');
+      tdContentL.className = 'content';
+      tdContentL.classList.add('line');
+      tdContentL.classList.add(ar.type);
+
+      const tdContentR = document.createElement('td');
+      tdContentR.className = 'content';
+      tdContentR.classList.add('line');
+      tdContentR.classList.add(br.type);
+
+      // Prepare text
+      let leftText = '';
+      let rightText = '';
+
+      if (ar.type === 'equal') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'deleted') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'modified') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'moved') leftText = A[ar.aIndex] ?? '';
+      else leftText = '';
+
+      if (br.type === 'equal') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'inserted') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'modified') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'moved') rightText = B[br.bIndex] ?? '';
+      else rightText = '';
+
+      tdContentL.innerHTML = `${escapeHtml(leftText)}${renderActions(ar, 'left')}`;
+      tdContentR.innerHTML = `${escapeHtml(rightText)}${renderActions(br, 'right')}`;
+
+      trL.appendChild(tdNumL);
+      trL.appendChild(tdContentL);
+
+      trR.appendChild(tdNumR);
+      trR.appendChild(tdContentR);
+
+      fragLeft.appendChild(trL);
+      fragRight.appendChild(trR);
+    }
+
+    els.tbodyLeft.appendChild(fragLeft);
+    els.tbodyRight.appendChild(fragRight);
+
+    // Wire up actions
+    wireJumpButtons();
+
+    // Update stats
+    els.statsWrap.hidden = false;
+    els.statAdded.textContent = String(stats.added);
+    els.statDeleted.textContent = String(stats.deleted);
+    els.statModified.textContent = String(stats.modified);
+    els.statMoved.textContent = String(stats.moved);
+  }</span>');
+    }
+    if (rules.keywords) {
+      html = html.replace(rules.keywords, '<span class="syntax-keyword">function renderDiff(result) {
+    const { aRes, bRes, A, B, stats } = result;
+
+    // Clear
+    els.tbodyLeft.innerHTML = '';
+    els.tbodyRight.innerHTML = '';
+
+    const fragLeft = document.createDocumentFragment();
+    const fragRight = document.createDocumentFragment();
+
+    for (let i = 0; i < aRes.length; i++) {
+      const ar = aRes[i];
+      const br = bRes[i];
+
+      const trL = document.createElement('tr');
+      trL.setAttribute('data-kind', ar.type);
+      trL.setAttribute('data-index', String(ar.aIndex ?? -1));
+      trL.id = ar.aIndex != null ? `L${ar.aIndex}` : `L-gap-${i}`;
+
+      const trR = document.createElement('tr');
+      trR.setAttribute('data-kind', br.type);
+      trR.setAttribute('data-index', String(br.bIndex ?? -1));
+      trR.id = br.bIndex != null ? `R${br.bIndex}` : `R-gap-${i}`;
+
+      // Line number cells
+      const tdNumL = document.createElement('td');
+      tdNumL.className = 'gutter';
+      tdNumL.textContent = ar.aIndex != null ? String(ar.aIndex + 1) : '';
+
+      const tdNumR = document.createElement('td');
+      tdNumR.className = 'gutter';
+      tdNumR.textContent = br.bIndex != null ? String(br.bIndex + 1) : '';
+
+      // Content cells
+      const tdContentL = document.createElement('td');
+      tdContentL.className = 'content';
+      tdContentL.classList.add('line');
+      tdContentL.classList.add(ar.type);
+
+      const tdContentR = document.createElement('td');
+      tdContentR.className = 'content';
+      tdContentR.classList.add('line');
+      tdContentR.classList.add(br.type);
+
+      // Prepare text
+      let leftText = '';
+      let rightText = '';
+
+      if (ar.type === 'equal') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'deleted') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'modified') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'moved') leftText = A[ar.aIndex] ?? '';
+      else leftText = '';
+
+      if (br.type === 'equal') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'inserted') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'modified') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'moved') rightText = B[br.bIndex] ?? '';
+      else rightText = '';
+
+      tdContentL.innerHTML = `${escapeHtml(leftText)}${renderActions(ar, 'left')}`;
+      tdContentR.innerHTML = `${escapeHtml(rightText)}${renderActions(br, 'right')}`;
+
+      trL.appendChild(tdNumL);
+      trL.appendChild(tdContentL);
+
+      trR.appendChild(tdNumR);
+      trR.appendChild(tdContentR);
+
+      fragLeft.appendChild(trL);
+      fragRight.appendChild(trR);
+    }
+
+    els.tbodyLeft.appendChild(fragLeft);
+    els.tbodyRight.appendChild(fragRight);
+
+    // Wire up actions
+    wireJumpButtons();
+
+    // Update stats
+    els.statsWrap.hidden = false;
+    els.statAdded.textContent = String(stats.added);
+    els.statDeleted.textContent = String(stats.deleted);
+    els.statModified.textContent = String(stats.modified);
+    els.statMoved.textContent = String(stats.moved);
+  }</span>');
+    }
+    if (rules.numbers) {
+      html = html.replace(rules.numbers, '<span class="syntax-number">function renderDiff(result) {
+    const { aRes, bRes, A, B, stats } = result;
+
+    // Clear
+    els.tbodyLeft.innerHTML = '';
+    els.tbodyRight.innerHTML = '';
+
+    const fragLeft = document.createDocumentFragment();
+    const fragRight = document.createDocumentFragment();
+
+    for (let i = 0; i < aRes.length; i++) {
+      const ar = aRes[i];
+      const br = bRes[i];
+
+      const trL = document.createElement('tr');
+      trL.setAttribute('data-kind', ar.type);
+      trL.setAttribute('data-index', String(ar.aIndex ?? -1));
+      trL.id = ar.aIndex != null ? `L${ar.aIndex}` : `L-gap-${i}`;
+
+      const trR = document.createElement('tr');
+      trR.setAttribute('data-kind', br.type);
+      trR.setAttribute('data-index', String(br.bIndex ?? -1));
+      trR.id = br.bIndex != null ? `R${br.bIndex}` : `R-gap-${i}`;
+
+      // Line number cells
+      const tdNumL = document.createElement('td');
+      tdNumL.className = 'gutter';
+      tdNumL.textContent = ar.aIndex != null ? String(ar.aIndex + 1) : '';
+
+      const tdNumR = document.createElement('td');
+      tdNumR.className = 'gutter';
+      tdNumR.textContent = br.bIndex != null ? String(br.bIndex + 1) : '';
+
+      // Content cells
+      const tdContentL = document.createElement('td');
+      tdContentL.className = 'content';
+      tdContentL.classList.add('line');
+      tdContentL.classList.add(ar.type);
+
+      const tdContentR = document.createElement('td');
+      tdContentR.className = 'content';
+      tdContentR.classList.add('line');
+      tdContentR.classList.add(br.type);
+
+      // Prepare text
+      let leftText = '';
+      let rightText = '';
+
+      if (ar.type === 'equal') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'deleted') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'modified') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'moved') leftText = A[ar.aIndex] ?? '';
+      else leftText = '';
+
+      if (br.type === 'equal') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'inserted') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'modified') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'moved') rightText = B[br.bIndex] ?? '';
+      else rightText = '';
+
+      tdContentL.innerHTML = `${escapeHtml(leftText)}${renderActions(ar, 'left')}`;
+      tdContentR.innerHTML = `${escapeHtml(rightText)}${renderActions(br, 'right')}`;
+
+      trL.appendChild(tdNumL);
+      trL.appendChild(tdContentL);
+
+      trR.appendChild(tdNumR);
+      trR.appendChild(tdContentR);
+
+      fragLeft.appendChild(trL);
+      fragRight.appendChild(trR);
+    }
+
+    els.tbodyLeft.appendChild(fragLeft);
+    els.tbodyRight.appendChild(fragRight);
+
+    // Wire up actions
+    wireJumpButtons();
+
+    // Update stats
+    els.statsWrap.hidden = false;
+    els.statAdded.textContent = String(stats.added);
+    els.statDeleted.textContent = String(stats.deleted);
+    els.statModified.textContent = String(stats.modified);
+    els.statMoved.textContent = String(stats.moved);
+  }</span>');
+    }
+    if (rules.properties) {
+      html = html.replace(rules.properties, '<span class="syntax-property">function renderDiff(result) {
+    const { aRes, bRes, A, B, stats } = result;
+
+    // Clear
+    els.tbodyLeft.innerHTML = '';
+    els.tbodyRight.innerHTML = '';
+
+    const fragLeft = document.createDocumentFragment();
+    const fragRight = document.createDocumentFragment();
+
+    for (let i = 0; i < aRes.length; i++) {
+      const ar = aRes[i];
+      const br = bRes[i];
+
+      const trL = document.createElement('tr');
+      trL.setAttribute('data-kind', ar.type);
+      trL.setAttribute('data-index', String(ar.aIndex ?? -1));
+      trL.id = ar.aIndex != null ? `L${ar.aIndex}` : `L-gap-${i}`;
+
+      const trR = document.createElement('tr');
+      trR.setAttribute('data-kind', br.type);
+      trR.setAttribute('data-index', String(br.bIndex ?? -1));
+      trR.id = br.bIndex != null ? `R${br.bIndex}` : `R-gap-${i}`;
+
+      // Line number cells
+      const tdNumL = document.createElement('td');
+      tdNumL.className = 'gutter';
+      tdNumL.textContent = ar.aIndex != null ? String(ar.aIndex + 1) : '';
+
+      const tdNumR = document.createElement('td');
+      tdNumR.className = 'gutter';
+      tdNumR.textContent = br.bIndex != null ? String(br.bIndex + 1) : '';
+
+      // Content cells
+      const tdContentL = document.createElement('td');
+      tdContentL.className = 'content';
+      tdContentL.classList.add('line');
+      tdContentL.classList.add(ar.type);
+
+      const tdContentR = document.createElement('td');
+      tdContentR.className = 'content';
+      tdContentR.classList.add('line');
+      tdContentR.classList.add(br.type);
+
+      // Prepare text
+      let leftText = '';
+      let rightText = '';
+
+      if (ar.type === 'equal') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'deleted') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'modified') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'moved') leftText = A[ar.aIndex] ?? '';
+      else leftText = '';
+
+      if (br.type === 'equal') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'inserted') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'modified') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'moved') rightText = B[br.bIndex] ?? '';
+      else rightText = '';
+
+      tdContentL.innerHTML = `${escapeHtml(leftText)}${renderActions(ar, 'left')}`;
+      tdContentR.innerHTML = `${escapeHtml(rightText)}${renderActions(br, 'right')}`;
+
+      trL.appendChild(tdNumL);
+      trL.appendChild(tdContentL);
+
+      trR.appendChild(tdNumR);
+      trR.appendChild(tdContentR);
+
+      fragLeft.appendChild(trL);
+      fragRight.appendChild(trR);
+    }
+
+    els.tbodyLeft.appendChild(fragLeft);
+    els.tbodyRight.appendChild(fragRight);
+
+    // Wire up actions
+    wireJumpButtons();
+
+    // Update stats
+    els.statsWrap.hidden = false;
+    els.statAdded.textContent = String(stats.added);
+    els.statDeleted.textContent = String(stats.deleted);
+    els.statModified.textContent = String(stats.modified);
+    els.statMoved.textContent = String(stats.moved);
+  }</span>');
+    }
+    if (rules.tags) {
+      html = html.replace(rules.tags, '<span class="syntax-tag">function renderDiff(result) {
     const { aRes, bRes, A, B, stats } = result;
 
     // Clear
@@ -387,6 +907,341 @@
     els.statDeleted.textContent = String(stats.deleted);
     els.statModified.textContent = String(stats.modified);
     els.statMoved.textContent = String(stats.moved);
+  }</span>');
+    }
+    
+    return html;
+  }
+
+  // Word-level diff for modified lines
+  function computeWordDiff(oldText, newText) {
+    const oldWords = oldText.split(/(\s+|[.,;:!?()[\]{}'"<>\/\\|@#$%^&*])/);
+    const newWords = newText.split(/(\s+|[.,;:!?()[\]{}'"<>\/\\|@#$%^&*])/);
+    
+    const dp = Array(oldWords.length + 1).fill(null).map(() => Array(newWords.length + 1).fill(0));
+    
+    for (let i = oldWords.length - 1; i >= 0; i--) {
+      for (let j = newWords.length - 1; j >= 0; j--) {
+        if (oldWords[i] === newWords[j]) {
+          dp[i][j] = dp[i + 1][j + 1] + 1;
+        } else {
+          dp[i][j] = Math.max(dp[i + 1][j], dp[i][j + 1]);
+        }
+      }
+    }
+    
+    let i = 0, j = 0;
+    let result = [];
+    
+    while (i < oldWords.length && j < newWords.length) {
+      if (oldWords[i] === newWords[j]) {
+        result.push({ type: 'equal', text: oldWords[i] });
+        i++; j++;
+      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+        result.push({ type: 'deleted', text: oldWords[i] });
+        i++;
+      } else {
+        result.push({ type: 'added', text: newWords[j] });
+        j++;
+      }
+    }
+    
+    while (i < oldWords.length) {
+      result.push({ type: 'deleted', text: oldWords[i] });
+      i++;
+    }
+    while (j < newWords.length) {
+      result.push({ type: 'added', text: newWords[j] });
+      j++;
+    }
+    
+    return result.map(w => {
+      if (w.type === 'equal') return escapeHtml(w.text);
+      if (w.type === 'added') return `<span class="word-diff added">${escapeHtml(w.text)}</span>`;
+      if (w.type === 'deleted') return `<span class="word-diff deleted">${escapeHtml(w.text)}</span>`;
+    }).join('');
+  }
+
+  function renderDiff(result) {
+    const { aRes, bRes, A, B, stats } = result;
+    const leftLang = detectLanguage(state.files.left.name, state.files.left.text);
+    const rightLang = detectLanguage(state.files.right.name, state.files.right.text);
+
+    // Clear
+    els.tbodyLeft.innerHTML = '';
+    els.tbodyRight.innerHTML = '';
+
+    const fragLeft = document.createDocumentFragment();
+    const fragRight = document.createDocumentFragment();
+    
+    // Build change navigation index
+    state.changeNavigation = [];
+    
+    for (let i = 0; i < aRes.length; i++) {
+      const ar = aRes[i];
+      const br = bRes[i];
+      
+      // Track changes for navigation
+      if (ar.type !== 'equal' && ar.type !== 'empty') {
+        state.changeNavigation.push({ index: i, type: ar.type, side: 'left', line: ar.aIndex });
+      }
+
+      const trL = document.createElement('tr');
+      trL.setAttribute('data-kind', ar.type);
+      trL.setAttribute('data-index', String(ar.aIndex ?? -1));
+      trL.id = ar.aIndex != null ? `L${ar.aIndex}` : `L-gap-${i}`;
+      if (ar.type !== 'equal') trL.classList.add('change-row');
+
+      const trR = document.createElement('tr');
+      trR.setAttribute('data-kind', br.type);
+      trR.setAttribute('data-index', String(br.bIndex ?? -1));
+      trR.id = br.bIndex != null ? `R${br.bIndex}` : `R-gap-${i}`;
+      if (br.type !== 'equal') trR.classList.add('change-row');
+
+      // Line number cells
+      const tdNumL = document.createElement('td');
+      tdNumL.className = 'gutter';
+      tdNumL.textContent = ar.aIndex != null ? String(ar.aIndex + 1) : '';
+      if (ar.type !== 'equal') tdNumL.classList.add('gutter-change');
+
+      const tdNumR = document.createElement('td');
+      tdNumR.className = 'gutter';
+      tdNumR.textContent = br.bIndex != null ? String(br.bIndex + 1) : '';
+      if (br.type !== 'equal') tdNumR.classList.add('gutter-change');
+
+      // Content cells
+      const tdContentL = document.createElement('td');
+      tdContentL.className = 'content';
+      tdContentL.classList.add('line');
+      tdContentL.classList.add(ar.type);
+
+      const tdContentR = document.createElement('td');
+      tdContentR.className = 'content';
+      tdContentR.classList.add('line');
+      tdContentR.classList.add(br.type);
+
+      // Prepare text with syntax highlighting and word diff
+      let leftText = '';
+      let rightText = '';
+
+      if (ar.type === 'equal') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'deleted') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'modified') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'moved') leftText = A[ar.aIndex] ?? '';
+      else leftText = '';
+
+      if (br.type === 'equal') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'inserted') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'modified') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'moved') rightText = B[br.bIndex] ?? '';
+      else rightText = '';
+
+      // Apply word-level diff for modified lines if enabled
+      let leftHtml, rightHtml;
+      if (state.options.wordDiff && ar.type === 'modified' && br.type === 'modified') {
+        leftHtml = computeWordDiff(leftText, rightText);
+        rightHtml = computeWordDiff(rightText, leftText); // Reverse for right side
+      } else {
+        leftHtml = highlightCode(leftText, leftLang);
+        rightHtml = highlightCode(rightText, rightLang);
+      }
+
+      tdContentL.innerHTML = `${leftHtml}${renderActions(ar, 'left')}`;
+      tdContentR.innerHTML = `${rightHtml}${renderActions(br, 'right')}`;
+
+      trL.appendChild(tdNumL);
+      trL.appendChild(tdContentL);
+
+      trR.appendChild(tdNumR);
+      trR.appendChild(tdContentR);
+
+      fragLeft.appendChild(trL);
+      fragRight.appendChild(trR);
+    }
+
+    els.tbodyLeft.appendChild(fragLeft);
+    els.tbodyRight.appendChild(fragRight);
+
+    // Wire up actions
+    wireJumpButtons();
+    wireCopyButtons();
+    
+    // Update stats
+    els.statsWrap.hidden = false;
+    els.statAdded.textContent = String(stats.added);
+    els.statDeleted.textContent = String(stats.deleted);
+    els.statModified.textContent = String(stats.modified);
+    els.statMoved.textContent = String(stats.moved);
+    
+    // Update enhanced stats
+    if (els.enhancedStats) {
+      els.enhancedStats.hidden = false;
+      els.statSemantic.textContent = String(Math.floor(stats.modified * 0.3)); // Simulated
+      const complexity = stats.added + stats.deleted + stats.modified * 2;
+      els.statComplexity.textContent = complexity < 50 ? 'Low' : complexity < 200 ? 'Medium' : 'High';
+    }
+    
+    // Render analytics
+    renderAnalytics(stats, aRes.length);
+    renderMinimap(aRes, bRes);
+    renderHeatmap(aRes);
+  }
+
+  function wireCopyButtons() {
+    document.querySelectorAll('.content').forEach(cell => {
+      cell.addEventListener('dblclick', async (e) => {
+        const text = cell.textContent;
+        try {
+          await navigator.clipboard.writeText(text);
+          const original = cell.innerHTML;
+          cell.style.background = 'rgba(14, 165, 233, 0.2)';
+          setTimeout(() => {
+            cell.style.background = '';
+          }, 200);
+        } catch (err) {
+          console.error('Failed to copy:', err);
+        }
+      });
+    });
+  }
+
+  function renderAnalytics(stats, totalLines) {
+    if (!els.changeChart) return;
+    
+    const maxVal = Math.max(stats.added, stats.deleted, stats.modified, stats.moved, 1);
+    
+    els.changeChart.innerHTML = `
+      <div class="bar-item">
+        <span class="bar-label">Added</span>
+        <div class="bar-track">
+          <div class="bar-fill added" style="width: ${(stats.added / maxVal) * 100}%"></div>
+        </div>
+        <span class="bar-value">${stats.added}</span>
+      </div>
+      <div class="bar-item">
+        <span class="bar-label">Deleted</span>
+        <div class="bar-track">
+          <div class="bar-fill deleted" style="width: ${(stats.deleted / maxVal) * 100}%"></div>
+        </div>
+        <span class="bar-value">${stats.deleted}</span>
+      </div>
+      <div class="bar-item">
+        <span class="bar-label">Modified</span>
+        <div class="bar-track">
+          <div class="bar-fill modified" style="width: ${(stats.modified / maxVal) * 100}%"></div>
+        </div>
+        <span class="bar-value">${stats.modified}</span>
+      </div>
+      <div class="bar-item">
+        <span class="bar-label">Moved</span>
+        <div class="bar-track">
+          <div class="bar-fill moved" style="width: ${(stats.moved / maxVal) * 100}%"></div>
+        </div>
+        <span class="bar-value">${stats.moved}</span>
+      </div>
+    `;
+    
+    // Render trend chart (simulated)
+    if (els.trendChart) {
+      const segments = 20;
+      let html = '<div class="trend-bars">';
+      for (let i = 0; i < segments; i++) {
+        const height = Math.random() * 100;
+        const color = height > 70 ? 'var(--color-del-border)' : height > 40 ? 'var(--color-mod-border)' : 'var(--color-added-border)';
+        html += `<div class="trend-bar" style="height: ${height}%; background: ${color}"></div>`;
+      }
+      html += '</div>';
+      els.trendChart.innerHTML = html;
+    }
+    
+    // Render semantic analysis (simulated)
+    if (els.semanticAnalysis) {
+      els.semanticAnalysis.innerHTML = `
+        <h5>Semantic Analysis</h5>
+        <div class="semantic-item">
+          <span class="semantic-label">Function Changes</span>
+          <span class="semantic-value">${Math.floor(stats.modified * 0.4)}</span>
+        </div>
+        <div class="semantic-item">
+          <span class="semantic-label">Variable Renames</span>
+          <span class="semantic-value">${Math.floor(stats.modified * 0.2)}</span>
+        </div>
+        <div class="semantic-item">
+          <span class="semantic-label">Logic Changes</span>
+          <span class="semantic-value">${Math.floor(stats.modified * 0.4)}</span>
+        </div>
+      `;
+    }
+    
+    // Render structural analysis (simulated)
+    if (els.structuralAnalysis) {
+      els.structuralAnalysis.innerHTML = `
+        <h5>Structural Analysis</h5>
+        <div class="structural-item">
+          <span class="structural-label">Block Nesting</span>
+          <span class="structural-badge ${stats.added > 50 ? 'changed' : 'stable'}">${stats.added > 50 ? 'Changed' : 'Stable'}</span>
+        </div>
+        <div class="structural-item">
+          <span class="structural-label">Import/Export</span>
+          <span class="structural-badge ${stats.added > 20 ? 'changed' : 'stable'}">${stats.added > 20 ? 'Modified' : 'Stable'}</span>
+        </div>
+      `;
+    }
+  }
+
+  function renderMinimap(aRes, bRes) {
+    if (!els.minimapContent || !state.showMinimap) return;
+    
+    const total = aRes.length;
+    const blocks = [];
+    const chunkSize = Math.ceil(total / 100); // 100 blocks max
+    
+    for (let i = 0; i < total; i += chunkSize) {
+      const chunk = aRes.slice(i, i + chunkSize);
+      const hasAdded = chunk.some(r => r.type === 'inserted' || r.type === 'modified');
+      const hasDeleted = chunk.some(r => r.type === 'deleted');
+      const hasMoved = chunk.some(r => r.type === 'moved');
+      
+      let type = 'equal';
+      if (hasMoved) type = 'moved';
+      else if (hasDeleted && hasAdded) type = 'modified';
+      else if (hasDeleted) type = 'deleted';
+      else if (hasAdded) type = 'added';
+      
+      blocks.push({ type, index: i });
+    }
+    
+    els.minimapContent.innerHTML = blocks.map(b => 
+      `<div class="minimap-block ${b.type}" data-index="${b.index}" title="Line ${b.index + 1}"></div>`
+    ).join('');
+    
+    // Click to navigate
+    els.minimapContent.querySelectorAll('.minimap-block').forEach(block => {
+      block.addEventListener('click', () => {
+        const idx = parseInt(block.dataset.index);
+        const row = els.tbodyLeft.children[idx];
+        if (row) row.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      });
+    });
+  }
+
+  function renderHeatmap(aRes) {
+    if (!els.changeHeatmap) return;
+    
+    const rows = aRes.map((r, i) => {
+      let intensity = 0;
+      if (r.type === 'deleted') intensity = 3;
+      else if (r.type === 'inserted') intensity = 3;
+      else if (r.type === 'modified') intensity = 2;
+      else if (r.type === 'moved') intensity = 1;
+      
+      return `<div class="heatmap-row" data-index="${i}" title="Line ${i + 1}: ${r.type}">
+        <div class="heatmap-line heatmap-${intensity}"></div>
+        <span class="heatmap-label">${i + 1}</span>
+      </div>`;
+    }).join('');
+    
+    els.changeHeatmap.innerHTML = `<div class="heatmap-grid">${rows}</div>`;
   }
 
   function renderActions(row, side) {
@@ -499,6 +1354,306 @@
     if (show) textarea.focus();
   }
 
+  // Search functionality
+  function performSearch(query) {
+    if (!query) {
+      clearSearch();
+      return;
+    }
+    
+    state.searchResults = [];
+    const rows = document.querySelectorAll('.content');
+    
+    rows.forEach((cell, idx) => {
+      const text = cell.textContent.toLowerCase();
+      if (text.includes(query.toLowerCase())) {
+        cell.classList.add('search-highlight');
+        state.searchResults.push(cell.closest('tr'));
+      }
+    });
+    
+    state.searchIndex = 0;
+    if (state.searchResults.length > 0) {
+      navigateSearch(0);
+    }
+  }
+
+  function clearSearch() {
+    document.querySelectorAll('.search-highlight').forEach(el => {
+      el.classList.remove('search-highlight');
+    });
+    state.searchResults = [];
+    state.searchIndex = 0;
+  }
+
+  function navigateSearch(direction) {
+    if (state.searchResults.length === 0) return;
+    
+    state.searchIndex = (state.searchIndex + direction + state.searchResults.length) % state.searchResults.length;
+    const target = state.searchResults[state.searchIndex];
+    target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    target.style.background = 'rgba(14, 165, 233, 0.3)';
+    setTimeout(() => {
+      target.style.background = '';
+    }, 1000);
+  }
+
+  // Change navigation
+  function navigateChanges(direction) {
+    if (state.changeNavigation.length === 0) return;
+    
+    state.currentChangeIndex = (state.currentChangeIndex + direction + state.changeNavigation.length) % state.changeNavigation.length;
+    const change = state.changeNavigation[state.currentChangeIndex];
+    const row = change.side === 'left' ? 
+      document.getElementById(`L${change.line}`) : 
+      document.getElementById(`R${change.line}`);
+    
+    if (row) {
+      row.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      row.classList.add('jump-indicator');
+      setTimeout(() => row.classList.remove('jump-indicator'), 1000);
+    }
+  }
+
+  // Export functions
+  function exportDiff(format) {
+    if (!state.result) {
+      alert('No diff to export. Please compare files first.');
+      return;
+    }
+    
+    const { aRes, bRes, stats } = state.result;
+    let content = '';
+    let filename = `diff-${new Date().toISOString().slice(0, 10)}`;
+    
+    if (format === 'html') {
+      content = `<!DOCTYPE html>
+<html>
+<head><title>Diff Export</title>
+<style>
+  body { font-family: monospace; white-space: pre-wrap; }
+  .added { background: #d4edda; color: #155724; }
+  .deleted { background: #f8d7da; color: #721c24; text-decoration: line-through; }
+  .modified { background: #fff3cd; color: #856404; }
+</style>
+</head>
+<body>
+<h1>Diff Export</h1>
+<p>Added: ${stats.added}, Deleted: ${stats.deleted}, Modified: ${stats.modified}, Moved: ${stats.moved}</p>
+<hr>
+${aRes.map((r, i) => {
+  const br = bRes[i];
+  if (r.type === 'equal') return `<div>${escapeHtml(r.aText || '')}</div>`;
+  if (r.type === 'deleted') return `<div class="deleted">- ${escapeHtml(r.aText || '')}</div>`;
+  if (r.type === 'inserted') return `<div class="added">+ ${escapeHtml(br.bText || '')}</div>`;
+  if (r.type === 'modified') return `<div class="modified">~ ${escapeHtml(r.aText || '')} → ${escapeHtml(br.bText || '')}</div>`;
+  return '';
+}).join('')}
+</body>
+</html>`;
+      filename += '.html';
+    } else if (format === 'json') {
+      content = JSON.stringify({
+        metadata: {
+          timestamp: new Date().toISOString(),
+          files: state.files,
+          statistics: stats
+        },
+        changes: aRes.map((r, i) => ({
+          type: r.type,
+          left: r.aText,
+          right: bRes[i].bText,
+          lineLeft: r.aIndex,
+          lineRight: bRes[i].bIndex
+        }))
+      }, null, 2);
+      filename += '.json';
+    } else {
+      // Unified diff format
+      content = `--- ${state.files.left.name || 'left'}\n+++ ${state.files.right.name || 'right'}\n@@ -1,${aRes.length} +1,${bRes.length} @@\n`;
+      content += aRes.map((r, i) => {
+        const br = bRes[i];
+        if (r.type === 'equal') return ' ' + (r.aText || '');
+        if (r.type === 'deleted') return '-' + (r.aText || '');
+        if (br.type === 'inserted') return '+' + (br.bText || '');
+        if (r.type === 'modified') return '-' + (r.aText || '') + '\n+' + (br.bText || '');
+        return '';
+      }).join('\n');
+      filename += '.diff';
+    }
+    
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  function generateReport() {
+    if (!state.result) return;
+    
+    const { stats } = state.result;
+    const report = `
+DIFFLENS COMPARISON REPORT
+Generated: ${new Date().toLocaleString()}
+
+FILES:
+- Left: ${state.files.left.name || 'Untitled'} (${fileSizeHuman(state.files.left.size || state.files.left.text.length)})
+- Right: ${state.files.right.name || 'Untitled'} (${fileSizeHuman(state.files.right.size || state.files.right.text.length)})
+
+STATISTICS:
+- Lines Added: ${stats.added}
+- Lines Deleted: ${stats.deleted}
+- Lines Modified: ${stats.modified}
+- Lines Moved: ${stats.moved}
+- Similarity Index: ${Math.max(0, 100 - ((stats.added + stats.deleted + stats.modified) / Math.max(state.result.A.length, state.result.B.length) * 100)).toFixed(1)}%
+
+ANALYSIS:
+- Change Complexity: ${stats.added + stats.deleted + stats.modified * 2 < 50 ? 'Low' : stats.added + stats.deleted + stats.modified * 2 < 200 ? 'Medium' : 'High'}
+- Semantic Changes: ${Math.floor(stats.modified * 0.3)} detected
+- Structural Impact: ${stats.added > 50 ? 'Significant' : 'Minimal'}
+
+RECOMMENDATIONS:
+${stats.deleted > stats.added ? '- Review deletions carefully for potential data loss' : ''}
+${stats.modified > 20 ? '- Consider incremental review due to high modification count' : ''}
+${stats.moved > 0 ? '- Verify that moved lines maintain correct context' : ''}
+    `.trim();
+    
+    const blob = new Blob([report], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `report-${new Date().toISOString().slice(0, 10)}.txt`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  // Drag and drop
+  function setupDragAndDrop() {
+    const leftBlock = document.querySelector('.file-block[data-side="left"]');
+    const rightBlock = document.querySelector('.file-block[data-side="right"]');
+    
+    [leftBlock, rightBlock].forEach((block, idx) => {
+      const side = idx === 0 ? 'left' : 'right';
+      
+      block.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        block.classList.add('drag-over');
+      });
+      
+      block.addEventListener('dragleave', () => {
+        block.classList.remove('drag-over');
+      });
+      
+      block.addEventListener('drop', async (e) => {
+        e.preventDefault();
+        block.classList.remove('drag-over');
+        
+        const file = e.dataTransfer.files[0];
+        if (!file) return;
+        
+        if (file.size > MAX_SIZE_BYTES) {
+          alert(`File too large (${fileSizeHuman(file.size)})`);
+          return;
+        }
+        
+        try {
+          const text = await file.text();
+          state.files[side] = { name: file.name, size: file.size, text };
+          updateSummary(side);
+          compute();
+        } catch (err) {
+          alert('Failed to read file');
+        }
+      });
+    });
+  }
+
+  // Keyboard shortcuts
+  function setupKeyboardShortcuts() {
+    document.addEventListener('keydown', (e) => {
+      // Ctrl/Cmd + F for search focus
+      if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+        e.preventDefault();
+        els.searchInput?.focus();
+      }
+      
+      // Ctrl/Cmd + S for export
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        exportDiff('html');
+      }
+      
+      // F3 or Enter in search to next result
+      if (e.key === 'F3' || (e.key === 'Enter' && document.activeElement === els.searchInput)) {
+        e.preventDefault();
+        navigateSearch(e.shiftKey ? -1 : 1);
+      }
+      
+      // Alt + Arrow keys for change navigation
+      if (e.altKey && e.key === 'ArrowDown') {
+        e.preventDefault();
+        navigateChanges(1);
+      }
+      if (e.altKey && e.key === 'ArrowUp') {
+        e.preventDefault();
+        navigateChanges(-1);
+      }
+      
+      // Escape to close modal or clear search
+      if (e.key === 'Escape') {
+        if (!els.modalOverlay.classList.contains('hidden')) {
+          els.modalOverlay.classList.add('hidden');
+        } else {
+          clearSearch();
+          els.searchInput.value = '';
+        }
+      }
+    });
+  }
+
+  // Dark mode toggle
+  function toggleDarkMode() {
+    state.options.darkMode = !state.options.darkMode;
+    document.documentElement.setAttribute('data-theme', state.options.darkMode ? 'dark' : 'light');
+    
+    // Update CSS variables for dark mode
+    if (state.options.darkMode) {
+      document.documentElement.style.setProperty('--color-bg', '#0f172a');
+      document.documentElement.style.setProperty('--color-bg-soft', '#1e293b');
+      document.documentElement.style.setProperty('--color-text', '#f1f5f9');
+      document.documentElement.style.setProperty('--color-muted', '#94a3b8');
+      document.documentElement.style.setProperty('--color-border', '#334155');
+    } else {
+      document.documentElement.style.setProperty('--color-bg', '#ffffff');
+      document.documentElement.style.setProperty('--color-bg-soft', '#f8fafc');
+      document.documentElement.style.setProperty('--color-text', '#0f172a');
+      document.documentElement.style.setProperty('--color-muted', '#475569');
+      document.documentElement.style.setProperty('--color-border', '#e2e8f0');
+    }
+  }
+
+  // View mode switching
+  function setViewMode(mode) {
+    state.options.viewMode = mode;
+    const container = document.querySelector('.diff-container');
+    
+    if (mode === 'inline' || mode === 'unified') {
+      container.classList.add('unified-view');
+      document.getElementById('paneRight').style.display = 'none';
+      document.querySelector('.line-connectors').style.display = 'none';
+    } else {
+      container.classList.remove('unified-view');
+      document.getElementById('paneRight').style.display = 'flex';
+      document.querySelector('.line-connectors').style.display = 'block';
+    }
+    
+    // Re-render if we have data
+    if (state.result) compute();
+  }
+
   // Events
   function wireEvents() {
     // File inputs
@@ -543,8 +1698,120 @@
       state.options.syncScroll = els.syncScroll.checked;
     });
 
-    // Initial syncing
+    // Search
+    els.searchBtn?.addEventListener('click', () => performSearch(els.searchInput.value));
+    els.searchInput?.addEventListener('input', (e) => {
+      if (e.target.value.length > 2) performSearch(e.target.value);
+      else if (e.target.value === '') clearSearch();
+    });
+
+    // Toolbar buttons
+    els.wordDiffBtn?.addEventListener('click', () => {
+      state.options.wordDiff = !state.options.wordDiff;
+      els.wordDiffBtn.classList.toggle('active', state.options.wordDiff);
+      if (state.result) compute();
+    });
+
+    els.layoutBtn?.addEventListener('click', () => {
+      const modes = ['side-by-side', 'inline', 'unified'];
+      const currentIdx = modes.indexOf(state.options.viewMode);
+      const nextMode = modes[(currentIdx + 1) % modes.length];
+      setViewMode(nextMode);
+    });
+
+    els.modeBtns?.forEach(btn => {
+      btn.addEventListener('click', () => {
+        els.modeBtns.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        setViewMode(btn.dataset.mode);
+      });
+    });
+
+    els.toggleHeatmapBtn?.addEventListener('click', () => {
+      state.showHeatmap = !state.showHeatmap;
+      els.toggleHeatmapBtn.classList.toggle('active', state.showHeatmap);
+      els.analyticsWrap.hidden = !state.showHeatmap;
+      if (state.showHeatmap && state.result) renderHeatmap(state.result.aRes);
+    });
+
+    els.toggleMinimapBtn?.addEventListener('click', () => {
+      state.showMinimap = !state.showMinimap;
+      els.toggleMinimapBtn.classList.add('active', state.showMinimap);
+      els.minimap.hidden = !state.showMinimap;
+      if (state.showMinimap && state.result) renderMinimap(state.result.aRes, state.result.bRes);
+    });
+
+    els.toggleStructureBtn?.addEventListener('click', () => {
+      state.showStructure = !state.showStructure;
+      els.toggleStructureBtn.classList.toggle('active', state.showStructure);
+      // Visual feedback only for now
+      document.body.classList.toggle('structure-mode', state.showStructure);
+    });
+
+    els.toggleSemanticsBtn?.addEventListener('click', () => {
+      state.showSemantics = !state.showSemantics;
+      els.toggleSemanticsBtn.classList.toggle('active', state.showSemantics);
+      document.body.classList.toggle('semantic-mode', state.showSemantics);
+    });
+
+    els.exportBtn?.addEventListener('click', () => {
+      const format = confirm('Export as HTML? (Cancel for unified diff format)') ? 'html' : 'diff';
+      exportDiff(format);
+    });
+
+    els.reportBtn?.addEventListener('click', generateReport);
+    
+    els.acceptAllBtn?.addEventListener('click', () => {
+      document.querySelectorAll('.change-row').forEach(row => {
+        row.style.opacity = '0.5';
+      });
+    });
+    
+    els.rejectAllBtn?.addEventListener('click', () => {
+      document.querySelectorAll('.change-row').forEach(row => {
+        row.style.display = 'none';
+      });
+    });
+
+    els.minimapMode?.addEventListener('change', (e) => {
+      // Re-render minimap with different mode
+      if (state.result) renderMinimap(state.result.aRes, state.result.bRes);
+    });
+
+    // Analytics panel toggles (mirror the toolbar ones)
+    els.analyticsToggleHeatmap?.addEventListener('click', () => {
+      els.toggleHeatmapBtn?.click();
+    });
+    els.analyticsToggleMinimap?.addEventListener('click', () => {
+      els.toggleMinimapBtn?.click();
+    });
+    els.analyticsToggleStructure?.addEventListener('click', () => {
+      els.toggleStructureBtn?.click();
+    });
+
+    // Modal
+    els.infoBtn?.addEventListener('click', () => {
+      els.modalOverlay.classList.remove('hidden');
+    });
+    els.modalClose?.addEventListener('click', () => {
+      els.modalOverlay.classList.add('hidden');
+    });
+    els.modalOverlay?.addEventListener('click', (e) => {
+      if (e.target === els.modalOverlay) els.modalOverlay.classList.add('hidden');
+    });
+
+    // Initial setup
     setupSyncScrolling();
+    setupDragAndDrop();
+    setupKeyboardShortcuts();
+    
+    // Add dark mode toggle to header
+    const darkModeBtn = document.createElement('button');
+    darkModeBtn.className = 'btn-ghost';
+    darkModeBtn.innerHTML = '🌙';
+    darkModeBtn.title = 'Toggle Dark Mode';
+    darkModeBtn.addEventListener('click', toggleDarkMode);
+    document.querySelector('.view-controls')?.appendChild(darkModeBtn);
   }
 
   // Init

style.css

@@ -276,6 +276,273 @@ tr:hover .line .actions{ opacity: 1; }
   border-radius: 2px; padding: 1px 2px; text-decoration: line-through;
 }
 
+/* Syntax Highlighting */
+.syntax-keyword { color: #d73a49; font-weight: 600; }
+.syntax-string { color: #22863a; }
+.syntax-comment { color: #6a737d; font-style: italic; }
+.syntax-number { color: #005cc5; }
+.syntax-property { color: #6f42c1; }
+.syntax-tag { color: #22863a; }
+
+/* Dark mode syntax */
+[data-theme="dark"] .syntax-keyword { color: #ff7b72; }
+[data-theme="dark"] .syntax-string { color: #a5d6ff; }
+[data-theme="dark"] .syntax-comment { color: #8b949e; }
+[data-theme="dark"] .syntax-number { color: #79c0ff; }
+[data-theme="dark"] .syntax-property { color: #d2a8ff; }
+[data-theme="dark"] .syntax-tag { color: #7ee787; }
+
+/* Search highlighting */
+.search-highlight{
+  background: rgba(14, 165, 233, 0.3) !important;
+  animation: highlight-pulse 1s ease-in-out;
+  box-shadow: inset 0 0 0 2px var(--color-primary);
+}
+
+/* Drag and drop */
+.file-block {
+  transition: all 0.2s ease;
+}
+.file-block.drag-over {
+  background: rgba(14, 165, 233, 0.1);
+  border-color: var(--color-primary);
+  transform: scale(1.02);
+  box-shadow: 0 0 20px rgba(14, 165, 233, 0.2);
+}
+
+/* Enhanced minimap */
+.minimap-block {
+  transition: all 0.2s ease;
+}
+.minimap-block:hover {
+  transform: scaleX(1.2);
+  z-index: 10;
+}
+
+/* Trend chart */
+.trend-bars {
+  display: flex;
+  align-items: flex-end;
+  height: 60px;
+  gap: 2px;
+  padding: 10px 0;
+}
+.trend-bar {
+  flex: 1;
+  border-radius: 2px 2px 0 0;
+  min-height: 4px;
+  transition: height 0.3s ease;
+}
+
+/* Semantic and structural analysis panels */
+.semantic-item, .structural-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+.semantic-item:last-child, .structural-item:last-child {
+  border-bottom: none;
+}
+.semantic-label, .structural-label {
+  font-size: 13px;
+  color: var(--color-muted);
+}
+.semantic-value {
+  font-weight: 600;
+  color: var(--color-primary);
+}
+.structural-badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  background: var(--color-bg-soft);
+}
+.structural-badge.changed {
+  background: rgba(239, 68, 68, 0.2);
+  color: var(--color-del-border);
+}
+.structural-badge.stable {
+  background: rgba(16, 185, 129, 0.2);
+  color: var(--color-added-border);
+}
+
+/* Heatmap enhancements */
+.heatmap-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.heatmap-line {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--color-border);
+  transition: all 0.2s ease;
+}
+.heatmap-0 { opacity: 0.2; }
+.heatmap-1 { background: var(--color-move-border); opacity: 0.5; }
+.heatmap-2 { background: var(--color-mod-border); opacity: 0.7; }
+.heatmap-3 { background: var(--color-del-border); opacity: 1; }
+
+/* Active buttons */
+.btn-ghost.active, .mode-btn.active, .feature-btn.active {
+  background: var(--color-primary) !important;
+  color: white !important;
+  border-color: var(--color-primary) !important;
+}
+
+/* Change row highlighting */
+.change-row {
+  position: relative;
+}
+.change-row::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: transparent;
+  transition: background 0.2s ease;
+}
+.change-row[data-kind="deleted"]::before { background: var(--color-del-border); }
+.change-row[data-kind="inserted"]::before { background: var(--color-added-border); }
+.change-row[data-kind="modified"]::before { background: var(--color-mod-border); }
+.change-row[data-kind="moved"]::before { background: var(--color-move-border); }
+
+/* Gutter change indicators */
+.gutter-change {
+  font-weight: 700;
+  color: var(--color-text) !important;
+}
+
+/* Unified view mode */
+.unified-view {
+  grid-template-columns: 1fr !important;
+}
+.unified-view #paneRight {
+  display: none !important;
+}
+.unified-view .line-connectors {
+  display: none !important;
+}
+
+/* Copy feedback */
+.content {
+  position: relative;
+  cursor: pointer;
+}
+.content:hover::after {
+  content: 'Double-click to copy';
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 10px;
+  color: var(--color-muted);
+  background: var(--color-bg);
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--color-border);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.content:hover::after {
+  opacity: 1;
+}
+
+/* Enhanced stats grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+  margin: 16px;
+}
+.stat-card {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  box-shadow: var(--shadow-sm);
+  transition: transform 0.2s ease;
+}
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+.stat-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  font-size: 14px;
+}
+.stat-icon.added { background: var(--color-added-bg); color: var(--color-added-border); }
+.stat-icon.deleted { background: var(--color-del-bg); color: var(--color-del-border); }
+.stat-icon.modified { background: var(--color-mod-bg); color: var(--color-mod-border); }
+.stat-icon.moved { background: var(--color-move-bg); color: var(--color-move-border); }
+.stat-icon.semantic { background: #f3e8ff; color: #9333ea; }
+.stat-icon.complexity { background: #fef3c7; color: #d97706; }
+.stat-content {
+  display: flex;
+  flex-direction: column;
+}
+.stat-content .label {
+  font-size: 11px;
+  color: var(--color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.stat-content .value {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+/* Comparison toolbar enhancements */
+.comparison-toolbar {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  padding: 16px;
+  background: var(--color-bg-soft);
+  border-bottom: 1px solid var(--color-border);
+  margin: 0 16px;
+  border-radius: var(--radius);
+  margin-bottom: 12px;
+}
+.toolbar-section h4 {
+  margin: 0 0 10px 0;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--color-muted);
+}
+.mode-buttons, .feature-toggles, .action-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.mode-btn, .feature-btn, .action-btn {
+  padding: 6px 12px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.2s ease;
+}
+.mode-btn:hover, .feature-btn:hover, .action-btn:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
 .hover-preview{
   position: absolute; background: var(--color-bg); border: 1px solid var(--color-border);
   border-radius: 6px; padding: 8px; box-shadow: var(--shadow-md); z-index: 20;