feat: add annotation leaderboard with medals and stats

- /api/leaderboard tallies per-annotator: verified, added, docs, score
- Leaderboard modal with 🥇🥈🥉 medals and stats table
- 🏆 button in top bar to open
- Score = verified + human-added mentions

app/api/leaderboard/route.js

@@ -0,0 +1,92 @@
+import { HF_DATASET_BASE_URL, MAX_DOCS_TO_SCAN } from '../../../utils/config.js';
+
+/**
+ * GET /api/leaderboard
+ * Returns annotator rankings based on validation counts.
+ */
+export async function GET() {
+    try {
+        const linksUrl = `${HF_DATASET_BASE_URL}/raw/main/annotation_data/wbg_data/wbg_pdf_links.json`;
+        const linksRes = await fetch(linksUrl, {
+            headers: { 'Authorization': `Bearer ${process.env.HF_TOKEN}` },
+            next: { revalidate: 300 }
+        });
+
+        if (!linksRes.ok) {
+            return new Response(JSON.stringify({ error: 'Failed to fetch links' }), { status: 500 });
+        }
+
+        const links = await linksRes.json();
+        const activeLinks = links
+            .filter(l => l.status === 'success' && l.has_revalidation === true)
+            .slice(0, MAX_DOCS_TO_SCAN);
+
+        // Tally per-annotator stats
+        const stats = {}; // annotator -> { verified, correct, incorrect, docs, humanAdded }
+
+        const results = await Promise.allSettled(
+            activeLinks.map(async (link) => {
+                const docUrl = `${HF_DATASET_BASE_URL}/raw/main/annotation_data/wbg_extractions/doc_${link.index}/raw/doc_${link.index}_direct_judged.jsonl`;
+                const docRes = await fetch(docUrl, {
+                    headers: { 'Authorization': `Bearer ${process.env.HF_TOKEN}` }
+                });
+                if (!docRes.ok) return;
+
+                const pagesData = await docRes.json();
+                const docAnnotators = new Set();
+
+                for (const page of pagesData) {
+                    for (const ds of (page.datasets || [])) {
+                        // Count human-added annotations
+                        if (ds.source === 'human' && ds.annotator) {
+                            if (!stats[ds.annotator]) {
+                                stats[ds.annotator] = { verified: 0, correct: 0, incorrect: 0, docs: new Set(), humanAdded: 0 };
+                            }
+                            stats[ds.annotator].humanAdded++;
+                            stats[ds.annotator].docs.add(link.index);
+                        }
+
+                        // Count validations
+                        for (const v of (ds.validations || [])) {
+                            if (!v.annotator || !v.human_validated) continue;
+                            if (!stats[v.annotator]) {
+                                stats[v.annotator] = { verified: 0, correct: 0, incorrect: 0, docs: new Set(), humanAdded: 0 };
+                            }
+                            stats[v.annotator].verified++;
+                            if (v.human_verdict === true) stats[v.annotator].correct++;
+                            else stats[v.annotator].incorrect++;
+                            stats[v.annotator].docs.add(link.index);
+                        }
+                    }
+                }
+            })
+        );
+
+        // Build ranked list
+        const leaderboard = Object.entries(stats)
+            .map(([annotator, s]) => ({
+                annotator,
+                verified: s.verified,
+                correct: s.correct,
+                incorrect: s.incorrect,
+                humanAdded: s.humanAdded,
+                docsWorked: s.docs.size,
+                score: s.verified + s.humanAdded, // total contributions
+            }))
+            .sort((a, b) => b.score - a.score);
+
+        return new Response(JSON.stringify({ leaderboard }), {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json',
+                'Cache-Control': 'public, s-maxage=120, stale-while-revalidate=59'
+            }
+        });
+    } catch (error) {
+        console.error('Leaderboard API error:', error);
+        return new Response(
+            JSON.stringify({ error: 'Failed to compute leaderboard' }),
+            { status: 500, headers: { 'Content-Type': 'application/json' } }
+        );
+    }
+}

app/components/Leaderboard.js

@@ -0,0 +1,83 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+
+const MEDALS = ['🥇', '🥈', '🥉'];
+
+export default function Leaderboard({ isOpen, onClose }) {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (isOpen && !data) {
+            setLoading(true);
+            fetch('/api/leaderboard')
+                .then(res => res.json())
+                .then(d => { setData(d); setLoading(false); })
+                .catch(() => setLoading(false));
+        }
+    }, [isOpen, data]);
+
+    if (!isOpen) return null;
+
+    return (
+        <>
+            <div className="panel-backdrop" onClick={onClose} />
+            <div className="leaderboard-modal">
+                <div className="leaderboard-header">
+                    <h3>🏆 Annotation Leaderboard</h3>
+                    <button className="panel-close" onClick={onClose}>&times;</button>
+                </div>
+
+                <div className="leaderboard-body">
+                    {loading ? (
+                        <div className="leaderboard-loading">
+                            <div className="spinner" />
+                            <p>Tallying scores...</p>
+                        </div>
+                    ) : !data?.leaderboard?.length ? (
+                        <p className="leaderboard-empty">No annotations yet. Be the first! 🚀</p>
+                    ) : (
+                        <table className="leaderboard-table">
+                            <thead>
+                                <tr>
+                                    <th>#</th>
+                                    <th>Annotator</th>
+                                    <th title="Total verifications">✅ Verified</th>
+                                    <th title="Manually added mentions">✍️ Added</th>
+                                    <th title="Documents worked on">📄 Docs</th>
+                                    <th title="Total score">⭐ Score</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {data.leaderboard.map((entry, i) => (
+                                    <tr key={entry.annotator} className={i < 3 ? `rank-${i + 1}` : ''}>
+                                        <td className="rank-cell">
+                                            {i < 3 ? MEDALS[i] : i + 1}
+                                        </td>
+                                        <td className="annotator-cell">
+                                            {entry.annotator}
+                                        </td>
+                                        <td>
+                                            <span className="stat-verified">{entry.verified}</span>
+                                            {entry.incorrect > 0 && (
+                                                <span className="stat-detail"> ({entry.correct}✓ {entry.incorrect}✕)</span>
+                                            )}
+                                        </td>
+                                        <td>{entry.humanAdded}</td>
+                                        <td>{entry.docsWorked}</td>
+                                        <td className="score-cell">{entry.score}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    )}
+                </div>
+
+                <div className="leaderboard-footer">
+                    <p>Score = Verified + Added • Updates every 2 min</p>
+                </div>
+            </div>
+        </>
+    );
+}

app/globals.css

@@ -218,6 +218,142 @@ h4 {
   background: var(--border-color);
 }
 
+/* ── Leaderboard ─────────────────────────────── */
+
+.btn-leaderboard {
+  background: none;
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-size: 0.72rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-leaderboard:hover {
+  background: var(--surface);
+  border-color: var(--accent);
+}
+
+.leaderboard-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1001;
+  background: var(--pane-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  width: 480px;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+.leaderboard-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.leaderboard-header h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.leaderboard-body {
+  padding: 12px 20px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.leaderboard-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 30px;
+  color: #94a3b8;
+}
+
+.leaderboard-empty {
+  text-align: center;
+  color: #94a3b8;
+  padding: 30px;
+}
+
+.leaderboard-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+}
+
+.leaderboard-table th {
+  text-align: left;
+  padding: 6px 8px;
+  color: #64748b;
+  font-weight: 600;
+  font-size: 0.72rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.leaderboard-table td {
+  padding: 8px 8px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.leaderboard-table tr:last-child td {
+  border-bottom: none;
+}
+
+.rank-cell {
+  font-size: 1rem;
+  text-align: center;
+  width: 32px;
+}
+
+.annotator-cell {
+  font-weight: 600;
+}
+
+.score-cell {
+  font-weight: 700;
+  color: var(--accent);
+}
+
+.stat-verified {
+  font-weight: 600;
+}
+
+.stat-detail {
+  font-size: 0.65rem;
+  color: #64748b;
+}
+
+.rank-1 {
+  background: rgba(255, 215, 0, 0.06);
+}
+
+.rank-2 {
+  background: rgba(192, 192, 192, 0.06);
+}
+
+.rank-3 {
+  background: rgba(205, 127, 50, 0.06);
+}
+
+.leaderboard-footer {
+  padding: 8px 20px;
+  border-top: 1px solid var(--border-color);
+  font-size: 0.65rem;
+  color: #64748b;
+  text-align: center;
+}
+
 .pane {
   flex: 1;
   padding: 20px 24px;

app/page.js

@@ -8,6 +8,7 @@ import AnnotationPanel from './components/AnnotationPanel';
 import AnnotationModal from './components/AnnotationModal';
 import PageNavigator from './components/PageNavigator';
 import ProgressBar from './components/ProgressBar';
+import Leaderboard from './components/Leaderboard';
 
 export default function Home() {
     const [documents, setDocuments] = useState([]);
@@ -35,6 +36,9 @@ export default function Home() {
     // Toast state
     const [toast, setToast] = useState(null);
 
+    // Leaderboard state
+    const [leaderboardOpen, setLeaderboardOpen] = useState(false);
+
     const showToast = useCallback((message, type = 'success') => {
         setToast({ message, type });
         setTimeout(() => setToast(null), 3000);
@@ -441,6 +445,12 @@ export default function Home() {
                         annotatorName={annotatorName}
                     />
                     <div className="top-bar-user">
+                        <button
+                            className="btn-leaderboard"
+                            onClick={() => setLeaderboardOpen(true)}
+                        >
+                            🏆 Leaderboard
+                        </button>
                         {annotatorName ? (
                             <span className="user-badge">👤 {annotatorName}</span>
                         ) : (
@@ -523,6 +533,7 @@ export default function Home() {
                     </div>
                 )}
             </div>
+            <Leaderboard isOpen={leaderboardOpen} onClose={() => setLeaderboardOpen(false)} />
         </div>
     );
 }