feat: show all pages with jump-to-mention navigation

- documents/route.js now includes ALL pages, not just those with datasets
- Added pages_with_mentions array to document data
- PageNavigator has ⏮/⏭ jump buttons to skip to pages with mentions
- Green ● dot indicator on pages that have data mentions
- Users can browse full document context while quickly jumping to mentions

app/api/documents/route.js

@@ -106,11 +106,13 @@ export async function GET(request) {
                     if (!docRes.ok) return null;
 
                     const pagesData = await docRes.json();
-                    const annotatablePages = pagesData
+                    const allPages = pagesData
+                        .map(page => page.document.pages[0]);
+                    const pagesWithMentions = pagesData
                         .filter(page => page.datasets && page.datasets.length > 0)
                         .map(page => page.document.pages[0]);
 
-                    if (annotatablePages.length === 0) return null;
+                    if (allPages.length === 0) return null;
 
                     const pdfUrl = link.direct_pdf_url;
                     if (!pdfUrl) return null;
@@ -121,7 +123,8 @@ export async function GET(request) {
                         index: link.index,
                         pdf_url: pdfUrl,
                         landing_page: link.landing_page_url,
-                        annotatable_pages: annotatablePages
+                        annotatable_pages: allPages,
+                        pages_with_mentions: pagesWithMentions
                     };
                 })
             );

app/components/PageNavigator.js

@@ -4,33 +4,60 @@ export default function PageNavigator({
     currentIndex,
     totalPages,
     currentPageNumber,
+    hasMentions,
     onPrevious,
     onNext,
+    onJumpToMention,
+    hasNextMention,
+    hasPrevMention,
 }) {
     return (
         <div className="page-navigator">
-            <button
-                className="btn btn-nav"
-                onClick={onPrevious}
-                disabled={currentIndex <= 0}
-                aria-label="Previous page"
-            >
-                ← Prev
-            </button>
+            <div className="page-nav-group">
+                <button
+                    className="btn btn-nav btn-jump"
+                    onClick={() => onJumpToMention(-1)}
+                    disabled={!hasPrevMention}
+                    aria-label="Previous page with mentions"
+                    title="Jump to previous page with data mentions"
+                >
+                    ⏮
+                </button>
+                <button
+                    className="btn btn-nav"
+                    onClick={onPrevious}
+                    disabled={currentIndex <= 0}
+                    aria-label="Previous page"
+                >
+                    ← Prev
+                </button>
+            </div>
 
             <span className="page-indicator">
                 Page <strong>{currentPageNumber}</strong>
+                {hasMentions && <span className="mention-dot" title="This page has data mentions">●</span>}
                 <span className="page-count">{currentIndex + 1} / {totalPages}</span>
             </span>
 
-            <button
-                className="btn btn-nav"
-                onClick={onNext}
-                disabled={currentIndex >= totalPages - 1}
-                aria-label="Next page"
-            >
-                Next →
-            </button>
+            <div className="page-nav-group">
+                <button
+                    className="btn btn-nav"
+                    onClick={onNext}
+                    disabled={currentIndex >= totalPages - 1}
+                    aria-label="Next page"
+                >
+                    Next →
+                </button>
+                <button
+                    className="btn btn-nav btn-jump"
+                    onClick={() => onJumpToMention(1)}
+                    disabled={!hasNextMention}
+                    aria-label="Next page with mentions"
+                    title="Jump to next page with data mentions"
+                >
+                    ⏭
+                </button>
+            </div>
         </div>
     );
 }

app/globals.css

@@ -527,7 +527,12 @@ h4 {
 .page-navigator {
   display: flex;
   align-items: center;
-  gap: 24px;
+  gap: 16px;
+}
+
+.page-nav-group {
+  display: flex;
+  gap: 4px;
 }
 
 .page-indicator {
@@ -544,6 +549,26 @@ h4 {
   color: #f8fafc;
 }
 
+.mention-dot {
+  color: #10b981;
+  font-size: 0.6rem;
+  margin-left: 4px;
+  vertical-align: middle;
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+@keyframes pulse-dot {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+}
+
 .page-count {
   font-size: 0.75rem;
   color: #64748b;
@@ -560,6 +585,11 @@ h4 {
   transition: all 0.2s;
 }
 
+.btn-nav.btn-jump {
+  padding: 10px 12px;
+  font-size: 0.8rem;
+}
+
 .btn-nav:hover:not(:disabled) {
   background-color: var(--accent);
   border-color: var(--accent);

app/page.js

@@ -47,6 +47,7 @@ export default function Home() {
 
     // Derived: current page number from the annotatable_pages array
     const annotatablePages = currentDoc?.annotatable_pages ?? [];
+    const pagesWithMentions = new Set(currentDoc?.pages_with_mentions ?? []);
     const currentPageNumber = annotatablePages[pageIdx] ?? null;
 
     // Load documents (re-fetches when annotatorName changes to get user-specific assignment)
@@ -204,6 +205,27 @@ export default function Home() {
         setPageIdx(prev => Math.min(annotatablePages.length - 1, prev + 1));
     };
 
+    const handleJumpToMention = (direction = 1) => {
+        const currentPage = annotatablePages[pageIdx];
+        if (direction === 1) {
+            // Find next page index (after current) that has mentions
+            for (let i = pageIdx + 1; i < annotatablePages.length; i++) {
+                if (pagesWithMentions.has(annotatablePages[i])) {
+                    setPageIdx(i);
+                    return;
+                }
+            }
+        } else {
+            // Find previous page index that has mentions
+            for (let i = pageIdx - 1; i >= 0; i--) {
+                if (pagesWithMentions.has(annotatablePages[i])) {
+                    setPageIdx(i);
+                    return;
+                }
+            }
+        }
+    };
+
     const handleAnnotate = (text, domOffset) => {
         setSelectedText(text);
         setSelectionOffset(domOffset || 0);
@@ -527,8 +549,12 @@ export default function Home() {
                         currentIndex={pageIdx}
                         totalPages={annotatablePages.length}
                         currentPageNumber={currentPageNumber}
+                        hasMentions={pagesWithMentions.has(currentPageNumber)}
                         onPrevious={handlePrevPage}
                         onNext={handleNextPage}
+                        onJumpToMention={handleJumpToMention}
+                        hasNextMention={annotatablePages.slice(pageIdx + 1).some(p => pagesWithMentions.has(p))}
+                        hasPrevMention={annotatablePages.slice(0, pageIdx).some(p => pagesWithMentions.has(p))}
                     />
                 </div>