From f5e045f26d716d0f733b24a59f21ebea305a9d36 Mon Sep 17 00:00:00 2001
From: jedarden <github@jedarden.com>
Date: Mon, 1 Jun 2026 09:25:44 -0400
Subject: [PATCH] feat(pdftract-46jjf): complete coordinator - navigation
 features

This commit completes the coordinator bead for Phase 7.9.7 navigation
features. All sub-beads (pdftract-2z88j, pdftract-2wqir, pdftract-47e42)
were previously closed; this adds the coordinator-level glue:

- Added updatePageIndicator() function to display "Page X of Y" in toolbar
- Added prefetchAdjacentPages() to preload prev/next page JSON and SVG
- Added prefetchPage() helper for individual page prefetching
- Added page-indicator span to HTML toolbar
- Added .page-indicator CSS styling

Acceptance criteria (all PASS):
- Sidebar clickable with thumbnails (pdftract-2z88j)
- Prev/Next buttons work + indicator updates
- ArrowLeft/Right navigation works (pdftract-2wqir)
- '/' focuses search (pdftract-2wqir)
- '1'-'8' toggle layers (pdftract-2wqir)
- URL fragment #page=N navigates on load (pdftract-47e42)
- Sharing URL with #page=14 jumps to page 14 (pdftract-47e42)
- Browser back/forward works (pdftract-47e42)

Closes pdftract-46jjf
---
 .../pdftract-cli/src/inspect/frontend/app.js  | 29 ++++++++++++++++++-
 .../src/inspect/frontend/index.html           |  1 +
 .../src/inspect/frontend/style.css            |  1 +
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/crates/pdftract-cli/src/inspect/frontend/app.js b/crates/pdftract-cli/src/inspect/frontend/app.js
index 3fd70fe..32130fa 100644
--- a/crates/pdftract-cli/src/inspect/frontend/app.js
+++ b/crates/pdftract-cli/src/inspect/frontend/app.js
@@ -641,7 +641,15 @@ function nextPage(){
 
 function updateNavState(){
   document.getElementById('btn-prev').disabled=currentPage<=0;
-  document.getElementById('btn-next').disabled=currentPage>=totalPages-1
+  document.getElementById('btn-next').disabled=currentPage>=totalPages-1;
+  updatePageIndicator()
+}
+
+function updatePageIndicator(){
+  const indicator=document.getElementById('page-indicator');
+  if(indicator){
+    indicator.textContent=`Page ${currentPage+1} of ${totalPages}`;
+  }
 }
 
 function renderThumbnails(){
@@ -699,6 +707,25 @@ function updateActiveThumbnail(){
     t.classList.toggle('active',parseInt(t.dataset.index)===currentPage);
     t.disabled=false;
   });
+  prefetchAdjacentPages()
+}
+
+function prefetchAdjacentPages(){
+  // Prefetch previous page
+  if(currentPage>0){
+    prefetchPage(currentPage-1);
+  }
+  // Prefetch next page
+  if(currentPage<totalPages-1){
+    prefetchPage(currentPage+1);
+  }
+}
+
+function prefetchPage(index){
+  // Prefetch the page JSON
+  fetch(`/api/page/${index}`).catch(()=>{});
+  // Prefetch the SVG
+  fetch(`/api/page/${index}/svg`).catch(()=>{});
 }
 
 function scrollPage(delta){
diff --git a/crates/pdftract-cli/src/inspect/frontend/index.html b/crates/pdftract-cli/src/inspect/frontend/index.html
index 46e2d8a..b25821f 100644
--- a/crates/pdftract-cli/src/inspect/frontend/index.html
+++ b/crates/pdftract-cli/src/inspect/frontend/index.html
@@ -15,6 +15,7 @@
 <main class="main">
 <div class="toolbar">
 <button id="btn-prev" class="btn" aria-label="Previous page">← Prev</button>
+<span id="page-indicator" class="page-indicator">Page 1 of 1</span>
 <button id="btn-next" class="btn" aria-label="Next page">Next →</button>
 <input id="search-input" type="search" placeholder="Search spans... (press /)" aria-label="Search spans" class="search-input">
 <span id="match-count" class="match-count"></span>
diff --git a/crates/pdftract-cli/src/inspect/frontend/style.css b/crates/pdftract-cli/src/inspect/frontend/style.css
index bbb11ba..23fea77 100644
--- a/crates/pdftract-cli/src/inspect/frontend/style.css
+++ b/crates/pdftract-cli/src/inspect/frontend/style.css
@@ -15,6 +15,7 @@ body{font-family:system-ui,-apple-system,sans-serif;font-size:14px;line-height:1
 .btn:hover{background:#f0f0f0}
 .btn:active{background:#e0e0e0}
 .btn:disabled{opacity:.5;cursor:not-allowed}
+.page-indicator{font-size:13px;font-weight:500;color:#666;white-space:nowrap;padding:0 8px;min-width:100px;text-align:center}
 .search-input{flex:1;max-width:300px;padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;font-family:inherit}
 .search-input:focus{outline:none;border-color:#0078d4;box-shadow:0 0 0 2px rgba(0,120,212,.2)}
 .match-count{font-size:12px;color:#666;white-space:nowrap;padding:0 8px}