Update templates/index.html

templates/index.html

@@ -6,24 +6,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
     :root{
-      --bg: #0f1226;
-      --bg2:#111639;
-      --card:#151a3b;
-      --ink:#e9ecff;
-      --muted:#b7c0ffcc;
-      --accent:#7c9cff;
-      --accent2:#61e7ff;
-      --danger:#ff6b6b;
-      --ok:#35d39e;
-      --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
+      --bg: #0f1226; --bg2:#111639; --ink:#e9ecff; --muted:#b7c0ffcc;
+      --accent:#7c9cff; --accent2:#61e7ff; --danger:#ff6b6b; --ok:#35d39e;
       --radius: 18px;
       --shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
     }
-
     html,body{height:100%;}
     body{
-      margin:0;
-      color:var(--ink);
+      margin:0; color:var(--ink);
       background:
         radial-gradient(1200px 800px at 10% -10%, #2630a540, transparent 60%),
         radial-gradient(1000px 700px at 110% 20%, #1fb6ff26, transparent 60%),
@@ -31,22 +21,13 @@
       font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
       line-height:1.45;
     }
-
-    .wrap{
-      max-width: 980px;
-      margin: 48px auto 120px;
-      padding: 0 20px;
-    }
-    .title{
-      display:flex; align-items:center; gap:12px; margin:0 0 18px;
-      letter-spacing:.25px;
-    }
+    .wrap{ max-width: 980px; margin: 48px auto 120px; padding: 0 20px; }
+    .title{ display:flex; align-items:center; gap:12px; margin:0 0 18px; }
     .title .badge{
       padding:6px 10px; font-size:12px; border:1px solid #ffffff22; border-radius:999px; color:var(--muted);
       background: linear-gradient(180deg,#ffffff05,#00000020);
       box-shadow: inset 0 0 0 1px #ffffff08;
     }
-
     .card{
       background: linear-gradient(180deg, #ffffff08, #00000022);
       border: 1px solid #ffffff1c;
@@ -55,138 +36,46 @@
       overflow: clip;
       backdrop-filter: blur(8px);
     }
-    .card .hdr{
-      padding:14px 18px;
-      border-bottom:1px solid #ffffff12;
-      display:flex; align-items:center; gap:10px; justify-content:space-between;
-    }
-    .card .hdr h2{margin:0; font-size:18px; font-weight:700; color:#fff;}
+    .card .hdr{ padding:14px 18px; border-bottom:1px solid #ffffff12; display:flex; align-items:center; justify-content:space-between; gap:10px; }
+    .card .hdr h2{ margin:0; font-size:18px; font-weight:700; color:#fff; }
     .card .body{ padding:18px; }
 
     .uploader{ display:grid; gap:14px; }
-
-    #fileUpload{
-      position: absolute;
-      width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
-      white-space:nowrap; border:0; padding:0; margin:-1px;
-    }
-
-    .drop{
-      display:grid; place-items:center; text-align:center;
-      padding:28px; border:1.5px dashed #a8b0ff55; border-radius: calc(var(--radius) - 6px);
-      background: linear-gradient(180deg,#ffffff08,#00000018);
-      cursor: pointer;
-      transition: .18s ease;
-      outline: none;
-      position: relative;
-      min-height: 150px;
-    }
+    #fileUpload{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; }
+    .drop{ display:grid; place-items:center; text-align:center; padding:28px; border:1.5px dashed #a8b0ff55; border-radius: 12px; background: linear-gradient(180deg,#ffffff08,#00000018); cursor:pointer; transition:.18s ease; outline:none; position:relative; min-height:150px; }
     .drop:hover{ border-color:#c7d0ff77; transform: translateY(-1px);}
-    .drop:focus-visible{ box-shadow: var(--ring); }
-    .drop.dragover{
-      border-color: var(--accent2);
-      box-shadow: 0 0 0 2px #61e7ff33 inset, 0 0 48px #61e7ff25;
-      transform: translateY(-1px);
-    }
-    .drop .big{
-      font-size:28px; font-weight:800; margin-bottom:6px;
-      background: linear-gradient(90deg, var(--accent), var(--accent2));
-      -webkit-background-clip:text; background-clip:text; color:transparent;
-    }
+    .drop .big{ font-size:28px; font-weight:800; margin-bottom:6px; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
     .drop .small{ color:var(--muted); font-size:14px; }
-    .drop .hint{ margin-top:10px; font-size:13px; color:#cbd3ff; opacity:.85; }
-
     .row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
-
-    .btn{
-      --btn-bg: #2331a6;
-      --btn-fg: #eaf0ff;
-      display:inline-flex; align-items:center; gap:8px;
-      padding:10px 14px; border-radius:12px; border:1px solid #ffffff18;
-      background: linear-gradient(180deg, color-mix(in oklab, var(--btn-bg) 88%, #fff 0%), #0a0f3a);
-      color:var(--btn-fg); font-weight:700; letter-spacing:.2px; text-decoration:none;
-      box-shadow: 0 6px 18px rgba(15, 30, 120, .35), inset 0 0 0 1px #ffffff10;
-      cursor:pointer; transition:.18s ease;
-    }
-    .btn:hover{ transform: translateY(-1px); }
-    .btn:active{ transform: translateY(0px) scale(.99); }
+    .btn{ --btn-bg:#2331a6; --btn-fg:#eaf0ff; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid #ffffff18; background: linear-gradient(180deg, color-mix(in oklab, var(--btn-bg) 88%, #fff 0%), #0a0f3a); color:var(--btn-fg); font-weight:700; letter-spacing:.2px; text-decoration:none; box-shadow: 0 6px 18px rgba(15, 30, 120, .35), inset 0 0 0 1px #ffffff10; cursor:pointer; transition:.18s ease; }
     .btn.secondary{ --btn-bg:#1a213f; --btn-fg:#dbe2ff; }
-    .btn.danger  { --btn-bg:#4a1020; --btn-fg:#ffd7df; border-color:#ff6b6b44; }
-
-    progress{
-      width: 320px; height: 14px; border-radius: 999px; overflow:hidden; vertical-align: middle;
-      background: #293079;
-      border:1px solid #ffffff22;
-    }
+    .btn.danger{ --btn-bg:#4a1020; --btn-fg:#ffd7df; border-color:#ff6b6b44; }
+    progress{ width:320px; height:14px; border-radius:999px; overflow:hidden; vertical-align:middle; background:#293079; border:1px solid #ffffff22; }
     progress::-webkit-progress-bar{ background:#293079; }
-    progress::-webkit-progress-value{
-      background: linear-gradient(90deg, var(--accent), var(--accent2));
-    }
-    #uploadStatus, #searchStatus{ margin-left:10px; font-weight:700; color:#d5dcff; }
-
+    progress::-webkit-progress-value{ background: linear-gradient(90deg, var(--accent), var(--accent2)); }
+    #uploadStatus,#searchStatus{ margin-left:10px; font-weight:700; color:#d5dcff; }
     #uploadedListClient ul{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:8px;}
-    #uploadedListClient li{
-      padding:6px 10px; border-radius:999px; font-size:12px; color:#dfe5ff;
-      background: linear-gradient(180deg,#ffffff0a,#00000025); border:1px solid #ffffff1a;
-    }
-
+    #uploadedListClient li{ padding:6px 10px; border-radius:999px; font-size:12px; color:#dfe5ff; background: linear-gradient(180deg,#ffffff0a,#00000025); border:1px solid #ffffff1a; }
     label{ color:#cdd4ff; font-weight:600; letter-spacing:.2px; }
-    textarea, input[type="number"]{
-      width:100%; box-sizing:border-box; color:#fff; background:#0d1333; border:1px solid #ffffff22;
-      border-radius:12px; padding:12px 14px; outline:none; transition:.18s ease;
-      box-shadow: inset 0 0 0 1px #ffffff08;
-    }
-    textarea:focus, input[type="number"]:focus{ box-shadow: var(--ring); border-color:#9fb2ff77; }
-
+    textarea, input[type="number"]{ width:100%; color:#fff; background:#0d1333; border:1px solid #ffffff22; border-radius:12px; padding:12px 14px; outline:none; transition:.18s ease; box-shadow: inset 0 0 0 1px #ffffff08; }
+    textarea:focus, input[type="number"]:focus{ box-shadow: 0 0 0 3px #7c9cff44; border-color:#9fb2ff77; }
     hr{ border:none; height:1px; background:#ffffff1a; margin:26px 0; }
-
     ol{ padding-left: 22px; }
     ol li{ margin: 12px 0; }
     a{ color: var(--accent2); }
-
     .muted{ color:var(--muted); font-size:13px; }
-    .cluster{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
-
-    /* Sidebar for context */
-    .sidebar-backdrop{
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,.35);
-      opacity: 0;
-      pointer-events: none;
-      transition: .18s ease;
-      z-index: 60;
-    }
-    .sidebar{
-      position: fixed;
-      top: 0; right: 0; bottom: 0;
-      width: min(520px, 90vw);
-      background: linear-gradient(180deg, #0e1330, #0a0f28);
-      border-left: 1px solid #ffffff22;
-      box-shadow: -16px 0 40px rgba(0,0,0,.35);
-      transform: translateX(100%);
-      transition: transform .22s ease;
-      z-index: 70;
-      display: grid;
-      grid-template-rows: auto 1fr;
-    }
-    .sidebar.open{ transform: translateX(0); }
-    .sidebar-backdrop.open{ opacity: 1; pointer-events: auto; }
-    .sidebar .sbar-hdr{
-      display:flex; align-items:center; justify-content:space-between; gap:10px;
-      padding:14px 16px; border-bottom:1px solid #ffffff1a;
-    }
-    .sidebar .sbar-hdr h3{ margin:0; font-size:16px; }
-    .sidebar .sbar-body{
-      overflow: auto; padding: 16px;
-    }
-    .ctx-p{ margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: #ffffff06; border:1px solid #ffffff14; }
-    .ctx-p.hl{ outline: 2px solid #61e7ff; box-shadow: 0 0 0 3px #61e7ff22; }
 
-    .smallbtn{
-      font-size:12px; padding:6px 8px; border-radius:10px;
-      background: #1a213f; color:#dbe2ff; border:1px solid #ffffff18; cursor:pointer;
-    }
+    /* Sidebar: full merged text */
+    .sidebar-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:.18s ease; z-index:60; }
+    .sidebar{ position: fixed; top:0; right:0; bottom:0; width:min(640px, 92vw); background: linear-gradient(180deg, #0e1330, #0a0f28); border-left:1px solid #ffffff22; box-shadow:-16px 0 40px rgba(0,0,0,.35); transform: translateX(100%); transition: transform .22s ease; z-index:70; display:grid; grid-template-rows:auto 1fr; }
+    .sidebar.open{ transform: translateX(0); }
+    .sidebar-backdrop.open{ opacity:1; pointer-events:auto; }
+    .sbar-hdr{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid #ffffff1a; }
+    .sbar-hdr h3{ margin:0; font-size:16px; }
+    .sbar-body{ overflow:auto; padding:16px; }
+    .smallbtn{ font-size:12px; padding:6px 8px; border-radius:10px; background:#1a213f; color:#dbe2ff; border:1px solid #ffffff18; cursor:pointer; }
+    pre#fullText{ margin:0; white-space:pre-wrap; word-wrap:break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; line-height:1.5; }
+    mark#centerMark{ background:#61e7ff55; padding:0 .5px; border-radius:3px; }
   </style>
 </head>
 <body>
@@ -204,7 +93,7 @@
     <section class="card" aria-labelledby="upl">
       <div class="hdr">
         <h2 id="upl">Upload Text or PDF Files</h2>
-        <div class="cluster">
+        <div class="row">
           <button id="showFilesBtn" class="btn secondary" type="button">📄 Show Uploaded Files</button>
         </div>
       </div>
@@ -214,7 +103,6 @@
           <div id="dropZone" class="drop" tabindex="0" role="button" aria-label="Drop files here or click to browse">
             <div class="big">Drag & Drop files here</div>
             <div class="small">.txt, .pdf supported</div>
-            <div class="hint">or <span style="text-decoration:underline">click to browse</span></div>
           </div>
 
           <div class="row">
@@ -222,16 +110,16 @@
             <span id="uploadStatus"></span>
           </div>
 
+          <div id="uploadedListClient" style="display:none; margin-top:10px;"></div>
+
           {% if uploaded_filenames %}
-            <h4 style="margin:14px 0 6px;">Uploaded Files</h4>
+            <h4 style="margin:14px 0 6px;">Uploaded Files (server)</h4>
             <ul>
               {% for fname in uploaded_filenames %}
                 <li>{{ fname }}</li>
               {% endfor %}
             </ul>
           {% endif %}
-
-          <div id="uploadedListClient" style="display:none; margin-top:10px;"></div>
         </div>
       </div>
     </section>
@@ -260,7 +148,7 @@
           </div>
 
           <p class="muted" style="margin-top:10px;">
-            ⚠️ Uploaded files may take a few seconds to process before they’re searchable. If results don’t appear when you first click “Retrieve,” wait a moment and try again.
+            Tip: upload may take a moment to process before results appear.
           </p>
         </form>
 
@@ -271,21 +159,21 @@
         </form>
 
         {% if results %}
-        <br>
-        <div class="row">
-          <a class="btn secondary" href="{{ url_for('download', sid=sid) }}">⬇️ Download these results</a>
-          <a class="btn secondary" href="{{ url_for('download_merged', sid=sid) }}">📦 Download full merged text</a>
-        </div>
+          <br>
+          <div class="row">
+            <a class="btn secondary" href="{{ url_for('download', sid=sid) }}">⬇️ Download these results</a>
+            <a class="btn secondary" href="{{ url_for('download_merged', sid=sid) }}">📦 Download full merged text</a>
+          </div>
 
-        <h3 style="margin-top:18px;">Matching Paragraphs</h3>
-        <ol>
-          {% for r in results %}
-            <li>
-              <p>{{ r.text }}</p>
-              <button type="button" class="smallbtn" onclick="openContext({{ r.idx }})">🔎 View context</button>
-            </li>
-          {% endfor %}
-        </ol>
+          <h3 style="margin-top:18px;">Matching Paragraphs</h3>
+          <ol>
+            {% for r in results %}
+              <li>
+                <p>{{ r.text }}</p>
+                <button type="button" class="smallbtn" onclick="openContext({{ r.idx }})">🔎 View context</button>
+              </li>
+            {% endfor %}
+          </ol>
         {% endif %}
       </div>
     </section>
@@ -295,80 +183,71 @@
   <div id="sidebarBackdrop" class="sidebar-backdrop"></div>
   <aside id="sidebar" class="sidebar" aria-hidden="true">
     <div class="sbar-hdr">
-      <h3>Paragraph context</h3>
+      <h3>Full merged.txt (highlighted)</h3>
       <div style="display:flex; gap:8px; align-items:center;">
-        <button class="smallbtn" id="expandLess" title="Show less context">−</button>
-        <button class="smallbtn" id="expandMore" title="Show more context">+</button>
+        <button class="smallbtn" id="jumpTop" title="Jump to start">⤒ Top</button>
+        <button class="smallbtn" id="jumpBottom" title="Jump to end">⤓ Bottom</button>
         <button class="smallbtn" id="closeSidebar">✕</button>
       </div>
     </div>
-    <div id="sidebarBody" class="sbar-body"></div>
+    <div id="sidebarBody" class="sbar-body">
+      <pre id="fullText"></pre>
+    </div>
   </aside>
 
   <script>
     const SID = "{{ sid }}";
     let uploadedNames = [];
-    let currentWindow = 3;
 
-    // Upload (unchanged behavior)
-    document.getElementById("fileUpload").addEventListener("change", function () {
-      const files = this.files;
-      if (files.length === 0) return;
+    // Upload (client-side list + POST)
+    const fileInput = document.getElementById("fileUpload");
+    const dropZone = document.getElementById('dropZone');
+    const uploadedListClient = document.getElementById('uploadedListClient');
 
+    function sendFiles(files){
+      if (!files || files.length === 0) return;
       const formData = new FormData();
-      for (const file of files) {
-        formData.append("file", file);
-        uploadedNames.push(file.name);
-      }
+      for (const file of files) { formData.append("file", file); uploadedNames.push(file.name); }
 
       const xhr = new XMLHttpRequest();
       const progressBar = document.getElementById("uploadProgress");
       const statusText  = document.getElementById("uploadStatus");
-
-      xhr.open("POST", `/upload?sid=${SID}`, true);
+      xhr.open("POST", `/upload?sid=${encodeURIComponent(SID)}`, true);
 
       xhr.upload.onprogress = function (e) {
         if (e.lengthComputable) {
-          const percent = Math.round((e.loaded / e.total) * 100);
-          progressBar.value = percent;
+          progressBar.value = Math.round((e.loaded / e.total) * 100);
           progressBar.style.display = "inline-block";
-          statusText.textContent = `Uploading: ${percent}%`;
+          statusText.textContent = `Uploading: ${progressBar.value}%`;
         }
       };
-
       xhr.onload = function () {
         progressBar.value = 100;
         statusText.textContent = "✅ Upload complete!";
-        setTimeout(() => {
-          progressBar.style.display = "none";
-          statusText.textContent = "";
-        }, 1500);
-      };
-
-      xhr.onerror = function () {
-        statusText.textContent = "❌ Upload failed.";
+        setTimeout(() => { progressBar.style.display = "none"; statusText.textContent = ""; }, 1200);
       };
-
+      xhr.onerror = function () { statusText.textContent = "❌ Upload failed."; };
       xhr.send(formData);
-    });
+    }
 
-    // Show client-side list
-    document.getElementById("showFilesBtn").addEventListener("click", function () {
-      const listDiv = document.getElementById("uploadedListClient");
-      listDiv.innerHTML = "";
+    fileInput.addEventListener("change", e => sendFiles(e.target.files));
+    dropZone.addEventListener('click', () => fileInput.click());
+    dropZone.addEventListener('dragover', (e) => { e.preventDefault(); });
+    dropZone.addEventListener('drop', (e) => { e.preventDefault(); sendFiles(e.dataTransfer.files); });
 
+    document.getElementById("showFilesBtn").addEventListener("click", () => {
+      uploadedListClient.innerHTML = "";
       const ul = document.createElement("ul");
       for (const name of uploadedNames) {
         const li = document.createElement("li");
         li.textContent = name;
         ul.appendChild(li);
       }
-
-      listDiv.appendChild(ul);
-      listDiv.style.display = "block";
+      uploadedListClient.appendChild(ul);
+      uploadedListClient.style.display = "block";
     });
 
-    // Search progress (unchanged)
+    // Search progress
     document.querySelector('form[method="post"]').addEventListener("submit", function () {
       const progressBar = document.getElementById("searchProgress");
       const statusText  = document.getElementById("searchStatus");
@@ -377,71 +256,14 @@
       statusText.textContent = "🔍 Searching...";
     });
 
-    // Drag & drop (unchanged)
-    const dropZone = document.getElementById('dropZone');
-    const hiddenInput = document.getElementById('fileUpload');
-    dropZone.addEventListener('click', () => hiddenInput.click());
-    dropZone.addEventListener('keypress', (e) => {
-      if(e.key === 'Enter' || e.key === ' '){ e.preventDefault(); hiddenInput.click(); }
-    });
-    ['dragenter','dragover'].forEach(evt => {
-      dropZone.addEventListener(evt, e => {
-        e.preventDefault(); e.stopPropagation();
-        dropZone.classList.add('dragover');
-      });
-    });
-    ['dragleave','dragend','drop'].forEach(evt => {
-      dropZone.addEventListener(evt, () => dropZone.classList.remove('dragover'));
-    });
-    dropZone.addEventListener('drop', (e) => {
-      e.preventDefault(); e.stopPropagation();
-      const files = e.dataTransfer.files;
-      if(!files || files.length === 0) return;
-
-      const formData = new FormData();
-      for (const file of files) {
-        formData.append("file", file);
-        uploadedNames.push(file.name);
-      }
-
-      const xhr = new XMLHttpRequest();
-      const progressBar = document.getElementById("uploadProgress");
-      const statusText  = document.getElementById("uploadStatus");
-
-      xhr.open("POST", `/upload?sid=${SID}`, true);
-
-      xhr.upload.onprogress = function (e) {
-        if (e.lengthComputable) {
-          const percent = Math.round((e.loaded / e.total) * 100);
-          progressBar.value = percent;
-          progressBar.style.display = "inline-block";
-          statusText.textContent = `Uploading: ${percent}%`;
-        }
-      };
-
-      xhr.onload = function () {
-        progressBar.value = 100;
-        statusText.textContent = "✅ Upload complete!";
-        setTimeout(() => {
-          progressBar.style.display = "none";
-          statusText.textContent = "";
-        }, 1500);
-      };
-
-      xhr.onerror = function () {
-        statusText.textContent = "❌ Upload failed.";
-      };
-
-      xhr.send(formData);
-    });
-
-    // ── Context sidebar logic ──────────────────────────────────────────────
+    // Sidebar controls
     const sidebar = document.getElementById('sidebar');
     const sidebarBody = document.getElementById('sidebarBody');
     const backdrop = document.getElementById('sidebarBackdrop');
     const btnClose = document.getElementById('closeSidebar');
-    const btnMore = document.getElementById('expandMore');
-    const btnLess = document.getElementById('expandLess');
+    const pre = document.getElementById('fullText');
+    const jumpTop = document.getElementById('jumpTop');
+    const jumpBottom = document.getElementById('jumpBottom');
 
     function openSidebar(){
       sidebar.classList.add('open');
@@ -452,13 +274,24 @@
       sidebar.classList.remove('open');
       backdrop.classList.remove('open');
       sidebar.setAttribute('aria-hidden', 'true');
-      sidebarBody.innerHTML = '';
+      pre.innerHTML = '';
     }
     btnClose.addEventListener('click', closeSidebar);
     backdrop.addEventListener('click', closeSidebar);
 
-    async function fetchContext(idx, windowSize){
-      const res = await fetch(`/api/context?sid=${encodeURIComponent(SID)}&idx=${idx}&window=${windowSize}`);
+    jumpTop.addEventListener('click', () => { sidebarBody.scrollTo({ top: 0, behavior: 'smooth' }); });
+    jumpBottom.addEventListener('click', () => { sidebarBody.scrollTo({ top: sidebarBody.scrollHeight, behavior: 'smooth' }); });
+
+    function escapeHtml(s){
+      return s.replaceAll('&','&amp;')
+              .replaceAll('<','&lt;')
+              .replaceAll('>','&gt;')
+              .replaceAll('"','&quot;')
+              .replaceAll("'",'&#39;');
+    }
+
+    async function fetchFullContext(idx){
+      const res = await fetch(`/api/context?sid=${encodeURIComponent(SID)}&idx=${idx}`);
       if(!res.ok){
         const t = await res.text();
         throw new Error(t || 'Failed to fetch context');
@@ -466,59 +299,33 @@
       return res.json();
     }
 
-    function renderContext(ctxJson){
-      sidebarBody.innerHTML = '';
-      ctxJson.paras.forEach((p, i) => {
-        const div = document.createElement('div');
-        div.className = 'ctx-p' + (i === ctxJson.center ? ' hl' : '');
-        div.innerText = p;
-        if(i === ctxJson.center){
-          div.id = 'centerPara';
+    function renderFullTextHighlight(merged, start, end){
+      const before = escapeHtml(merged.slice(0, start));
+      const middle = escapeHtml(merged.slice(start, end));
+      const after  = escapeHtml(merged.slice(end));
+      pre.innerHTML = before + '<mark id="centerMark">' + middle + '</mark>' + after;
+
+      // Smoothly center the highlight in view
+      requestAnimationFrame(() => {
+        const mark = document.getElementById('centerMark');
+        if(mark){
+          const rect = mark.getBoundingClientRect();
+          const bodyRect = sidebarBody.getBoundingClientRect();
+          const offset = (rect.top + rect.height/2) - (bodyRect.top + bodyRect.height/2);
+          sidebarBody.scrollBy({ top: offset, behavior: 'smooth' });
         }
-        sidebarBody.appendChild(div);
       });
-      // Scroll the highlighted one into view
-      setTimeout(() => {
-        const el = document.getElementById('centerPara');
-        if(el){ el.scrollIntoView({behavior:'smooth', block:'center'}); }
-      }, 0);
     }
 
-    let lastIdx = null;
-
     window.openContext = async function(idx){
       try{
-        lastIdx = idx;
-        const data = await fetchContext(idx, currentWindow);
-        renderContext(data);
+        const data = await fetchFullContext(idx);
+        renderFullTextHighlight(data.merged, data.start, data.end);
         openSidebar();
       }catch(err){
         alert('Error: ' + err.message);
       }
     }
-
-    btnMore.addEventListener('click', async () => {
-      if(lastIdx === null) return;
-      currentWindow = Math.min(currentWindow + 2, 20);
-      const data = await fetchContext(lastIdx, currentWindow);
-      renderContext(data);
-    });
-
-    btnLess.addEventListener('click', async () => {
-      if(lastIdx === null) return;
-      currentWindow = Math.max(1, currentWindow - 2);
-      const data = await fetchContext(lastIdx, currentWindow);
-      renderContext(data);
-    });
-
-    // Maintain existing search progress behavior
-    document.querySelector('form[method="post"]').addEventListener("submit", function () {
-      const progressBar = document.getElementById("searchProgress");
-      const statusText  = document.getElementById("searchStatus");
-      progressBar.removeAttribute("value");
-      progressBar.style.display = "inline-block";
-      statusText.textContent = "🔍 Searching...";
-    });
   </script>
 </body>
 </html>