refactor: make progress bar contextual - shows current PDF/page/mentions position

app/components/ProgressBar.js

@@ -1,83 +1,49 @@
 "use client";
 
-import { useState, useEffect } from 'react';
+export default function ProgressBar({
+    documents,
+    selectedDocIndex,
+    currentDoc,
+    pageIdx,
+    currentPageDatasets,
+}) {
+    if (!documents || documents.length === 0) return null;
 
-export default function ProgressBar() {
-    const [progress, setProgress] = useState(null);
-    const [expanded, setExpanded] = useState(false);
-    const [loading, setLoading] = useState(true);
+    // 1. PDF progress: which doc out of total
+    const docPosition = documents.findIndex(d => d.index === selectedDocIndex) + 1;
+    const totalDocs = documents.length;
 
-    useEffect(() => {
-        fetch('/api/progress')
-            .then(res => res.json())
-            .then(data => {
-                setProgress(data);
-                setLoading(false);
-            })
-            .catch(() => setLoading(false));
-    }, []);
+    // 2. Page progress: which page out of annotatable pages in current doc
+    const totalPages = currentDoc?.annotatable_pages?.length ?? 0;
+    const currentPage = totalPages > 0 ? pageIdx + 1 : 0;
 
-    if (loading || !progress) {
-        return null; // Don't show anything while loading
-    }
-
-    const docPct = progress.totalDocs > 0
-        ? Math.round((progress.completedDocs / progress.totalDocs) * 100) : 0;
-    const pagePct = progress.totalPages > 0
-        ? Math.round((progress.completedPages / progress.totalPages) * 100) : 0;
-    const mentionPct = progress.totalMentions > 0
-        ? Math.round((progress.verifiedMentions / progress.totalMentions) * 100) : 0;
+    // 3. Mentions progress: verified vs total on current page
+    const totalMentions = currentPageDatasets?.length ?? 0;
+    const verifiedMentions = currentPageDatasets?.filter(ds => ds.human_validated === true).length ?? 0;
 
     return (
         <div className="progress-container">
-            <button
-                className="progress-toggle"
-                onClick={() => setExpanded(!expanded)}
-            >
-                <span className="progress-summary">
-                    📊 Progress: {progress.verifiedMentions}/{progress.totalMentions} mentions verified ({mentionPct}%)
-                </span>
-                <span className="progress-chevron">{expanded ? '▲' : '▼'}</span>
-            </button>
-
-            {expanded && (
-                <div className="progress-details">
-                    <div className="progress-row">
-                        <span className="progress-label">📄 Documents</span>
-                        <div className="progress-bar-track">
-                            <div
-                                className="progress-bar-fill docs-fill"
-                                style={{ width: `${docPct}%` }}
-                            />
-                        </div>
-                        <span className="progress-stat">{progress.completedDocs}/{progress.totalDocs} ({docPct}%)</span>
-                    </div>
-                    <div className="progress-row">
-                        <span className="progress-label">📑 Pages</span>
-                        <div className="progress-bar-track">
-                            <div
-                                className="progress-bar-fill pages-fill"
-                                style={{ width: `${pagePct}%` }}
-                            />
-                        </div>
-                        <span className="progress-stat">{progress.completedPages}/{progress.totalPages} ({pagePct}%)</span>
-                    </div>
-                    <div className="progress-row">
-                        <span className="progress-label">🏷️ Mentions</span>
-                        <div className="progress-bar-track">
-                            <div
-                                className="progress-bar-fill mentions-fill"
-                                style={{ width: `${mentionPct}%` }}
-                            />
-                        </div>
-                        <span className="progress-stat">{progress.verifiedMentions}/{progress.totalMentions} ({mentionPct}%)</span>
-                    </div>
-                    <div className="progress-row">
-                        <span className="progress-label">✍️ Human annotations</span>
-                        <span className="progress-stat highlight">{progress.humanAnnotations}</span>
-                    </div>
+            <div className="progress-pills">
+                <div className="progress-pill">
+                    <span className="pill-icon">📄</span>
+                    <span className="pill-label">PDF</span>
+                    <span className="pill-value">{docPosition}/{totalDocs}</span>
+                </div>
+                <div className="pill-divider" />
+                <div className="progress-pill">
+                    <span className="pill-icon">📑</span>
+                    <span className="pill-label">Page</span>
+                    <span className="pill-value">{currentPage}/{totalPages}</span>
+                </div>
+                <div className="pill-divider" />
+                <div className="progress-pill">
+                    <span className="pill-icon">🏷️</span>
+                    <span className="pill-label">Verified</span>
+                    <span className={`pill-value ${verifiedMentions === totalMentions && totalMentions > 0 ? 'pill-complete' : ''}`}>
+                        {verifiedMentions}/{totalMentions}
+                    </span>
                 </div>
-            )}
+            </div>
         </div>
     );
 }

app/globals.css

@@ -164,92 +164,45 @@ h4 {
   border-bottom: 1px solid var(--border-color);
   background: var(--pane-bg);
   flex-shrink: 0;
+  padding: 4px 20px;
 }
 
-.progress-toggle {
+.progress-pills {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 5px 20px;
-  background: none;
-  border: none;
-  color: var(--text-color);
-  cursor: pointer;
-  font-size: 0.78rem;
-}
-
-.progress-toggle:hover {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.progress-summary {
-  font-weight: 600;
-}
-
-.progress-chevron {
-  font-size: 0.6rem;
-  color: #64748b;
-}
-
-.progress-details {
-  padding: 8px 20px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  border-top: 1px solid var(--border-color);
+  gap: 12px;
 }
 
-.progress-row {
+.progress-pill {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 5px;
   font-size: 0.75rem;
 }
 
-.progress-label {
-  width: 130px;
-  flex-shrink: 0;
-  color: #94a3b8;
-}
-
-.progress-bar-track {
-  flex: 1;
-  height: 6px;
-  background: var(--surface);
-  border-radius: 3px;
-  overflow: hidden;
-}
-
-.progress-bar-fill {
-  height: 100%;
-  border-radius: 3px;
-  transition: width 0.5s ease;
-}
-
-.docs-fill {
-  background: var(--success);
+.pill-icon {
+  font-size: 0.7rem;
 }
 
-.pages-fill {
-  background: var(--accent);
+.pill-label {
+  color: #64748b;
+  font-weight: 500;
 }
 
-.mentions-fill {
-  background: #f59e0b;
+.pill-value {
+  color: var(--text-color);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
 }
 
-.progress-stat {
-  font-size: 0.72rem;
-  color: #94a3b8;
-  white-space: nowrap;
-  min-width: 80px;
-  text-align: right;
+.pill-value.pill-complete {
+  color: var(--success);
 }
 
-.progress-stat.highlight {
-  color: var(--success);
-  font-weight: 600;
+.pill-divider {
+  width: 1px;
+  height: 14px;
+  background: var(--border-color);
 }
 
 .pane {

app/page.js

@@ -431,7 +431,13 @@ export default function Home() {
                     )}
                 </div>
             </div>
-            <ProgressBar />
+            <ProgressBar
+                documents={documents}
+                selectedDocIndex={selectedDocIndex}
+                currentDoc={currentDoc}
+                pageIdx={pageIdx}
+                currentPageDatasets={currentPageDatasets}
+            />
             <div className="container">
                 <div className="pane left-pane">
                     <div className="pane-header">