feat: add in-app help guide with ❓ button in top bar

- HelpModal component renders condensed annotator guide
- Accessible via ❓ Help button in top bar
- Scrollable modal with styled markdown tables
- Covers navigation, tags, validation, and annotation workflow

app/components/HelpModal.js

@@ -0,0 +1,110 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+const GUIDE_CONTENT = `
+## Getting Started
+
+1. **Sign in** with your HuggingFace account
+2. Your assigned documents appear in the dropdown
+3. Only accounts in the annotator config will see documents
+
+---
+
+## Interface Layout
+
+| Panel | Purpose |
+|-------|---------|
+| **Left** | PDF viewer — original document page |
+| **Right** | Markdown text with highlighted data mentions |
+
+---
+
+## Page Navigation
+
+| Button | Action |
+|--------|--------|
+| **← Prev / Next →** | Move one page at a time |
+| **⏮ / ⏭** | Jump to page with data mentions |
+| **● green dot** | Current page has mentions |
+
+---
+
+## Data Mention Colors
+
+| Color | Tag | Meaning |
+|-------|-----|---------|
+| 🟢 Green | **Named** | A specific, named dataset |
+| 🟡 Amber | **Descriptive** | Described but not formally named |
+| 🟣 Purple | **Vague** | Unclear or ambiguous reference |
+| ⚪ Gray | **Non-Dataset** | Not actually a dataset |
+
+---
+
+## Validating Mentions
+
+1. Click the **toggle (‹)** to open the side panel
+2. For each mention:
+   - ✅ **Correct** — real dataset mention
+   - ❌ **Wrong** — false positive
+   - **Edit tag** — click the tag badge to change it
+   - **Delete** — remove false mentions (click twice to confirm)
+
+---
+
+## Adding New Annotations
+
+1. **Select text** in the markdown preview (click & drag)
+2. Click **✍️ Annotate Selection**
+3. Choose a tag: Named, Descriptive, or Vague
+4. Click **Save Annotation**
+
+---
+
+## Recommended Workflow
+
+1. **Read** the markdown text, reference the PDF for context
+2. **Review** each highlighted mention in the side panel
+3. **Add** any mentions the AI missed via text selection
+4. **Move** to the next page (warning if unvalidated mentions remain)
+
+---
+
+## Tips
+
+- Use **⏮/⏭ jump buttons** to skip pages without mentions
+- Pages without mentions may still have datasets the AI missed
+- Select just the **dataset name**, not surrounding text
+- The **PDF is the source of truth** — markdown may have formatting issues
+`;
+
+export default function HelpModal({ isOpen, onClose }) {
+    useEffect(() => {
+        const handleEsc = (e) => { if (e.key === 'Escape') onClose(); };
+        if (isOpen) window.addEventListener('keydown', handleEsc);
+        return () => window.removeEventListener('keydown', handleEsc);
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="modal-overlay help-modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+            <div className="modal-content help-modal-content">
+                <div className="modal-header">
+                    <h3>📖 Annotator Guide</h3>
+                    <button className="modal-close" onClick={onClose}>&times;</button>
+                </div>
+                <div className="modal-body help-modal-body">
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                        {GUIDE_CONTENT}
+                    </ReactMarkdown>
+                </div>
+                <div className="modal-footer">
+                    <button className="btn btn-primary" onClick={onClose}>Got it!</button>
+                </div>
+            </div>
+        </div>
+    );
+}

app/globals.css

@@ -1228,6 +1228,58 @@ h4 {
   animation: slideUp 0.2s ease;
 }
 
+.help-modal-content {
+  max-width: 700px;
+}
+
+.help-modal-body {
+  max-height: 65vh;
+  overflow-y: auto;
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
+.help-modal-body h2 {
+  color: #e2e8f0;
+  font-size: 1.1rem;
+  margin-top: 1.2em;
+}
+
+.help-modal-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.8em 0;
+  font-size: 0.85rem;
+}
+
+.help-modal-body th,
+.help-modal-body td {
+  border: 1px solid var(--border-color);
+  padding: 6px 10px;
+  text-align: left;
+}
+
+.help-modal-body th {
+  background-color: #334155;
+  color: #e2e8f0;
+}
+
+.help-modal-body hr {
+  border: 0;
+  height: 1px;
+  background: var(--border-color);
+  margin: 16px 0;
+}
+
+.help-modal-body ol,
+.help-modal-body ul {
+  padding-left: 20px;
+}
+
+.help-modal-body strong {
+  color: #e2e8f0;
+}
+
 .modal-header {
   display: flex;
   justify-content: space-between;

app/page.js

@@ -9,6 +9,7 @@ import AnnotationModal from './components/AnnotationModal';
 import PageNavigator from './components/PageNavigator';
 import ProgressBar from './components/ProgressBar';
 import Leaderboard from './components/Leaderboard';
+import HelpModal from './components/HelpModal';
 
 export default function Home() {
     const [documents, setDocuments] = useState([]);
@@ -39,6 +40,7 @@ export default function Home() {
 
     // Leaderboard state
     const [leaderboardOpen, setLeaderboardOpen] = useState(false);
+    const [helpOpen, setHelpOpen] = useState(false);
 
     const showToast = useCallback((message, type = 'success') => {
         setToast({ message, type });
@@ -486,6 +488,12 @@ export default function Home() {
                         >
                             🏆 Leaderboard
                         </button>
+                        <button
+                            className="btn-leaderboard"
+                            onClick={() => setHelpOpen(true)}
+                        >
+                            ❓ Help
+                        </button>
                         {annotatorName ? (
                             <span className="user-badge">👤 {annotatorName}</span>
                         ) : (
@@ -574,6 +582,7 @@ export default function Home() {
                 )}
             </div>
             <Leaderboard isOpen={leaderboardOpen} onClose={() => setLeaderboardOpen(false)} />
+            <HelpModal isOpen={helpOpen} onClose={() => setHelpOpen(false)} />
         </div>
     );
 }