feat: HF OAuth login, increase docs to 50, filter consensus non-datasets

- Add /api/auth/login (redirect to HF OAuth authorize)
- Add /api/auth/callback (exchange code, set hf_user cookie)
- Read hf_user cookie on mount for annotator identity
- Add top bar with 'Sign in with HF' button / username display
- Set hf_oauth: true in README metadata
- Increase MAX_DOCS_TO_SCAN from 5 to 50
- Filter out consensus non-datasets (model + judge agree)

README.md

@@ -6,6 +6,8 @@ colorTo: purple
 sdk: docker
 pinned: false
 app_port: 7860
+hf_oauth: true
+hf_oauth_expiration_minutes: 480
 ---
 
 # Annotation MVP

app/api/auth/callback/route.js

@@ -0,0 +1,92 @@
+import { NextResponse } from 'next/server';
+
+/**
+ * GET /api/auth/callback
+ * Handles the OAuth callback from HuggingFace.
+ * Exchanges code for access token, fetches userinfo, sets session cookie.
+ */
+export async function GET(request) {
+    const { searchParams } = new URL(request.url);
+    const code = searchParams.get('code');
+    const state = searchParams.get('state');
+
+    if (!code) {
+        return NextResponse.json({ error: 'Missing code parameter' }, { status: 400 });
+    }
+
+    // Verify state
+    const savedState = request.cookies.get('oauth_state')?.value;
+    if (!savedState || savedState !== state) {
+        return NextResponse.json({ error: 'Invalid state parameter' }, { status: 400 });
+    }
+
+    const clientId = process.env.OAUTH_CLIENT_ID;
+    const clientSecret = process.env.OAUTH_CLIENT_SECRET;
+
+    if (!clientId || !clientSecret) {
+        return NextResponse.json({ error: 'OAuth not configured' }, { status: 500 });
+    }
+
+    const host = process.env.SPACE_HOST
+        ? `https://${process.env.SPACE_HOST}`
+        : 'http://localhost:3000';
+    const redirectUri = `${host}/api/auth/callback`;
+
+    try {
+        // Exchange code for access token
+        const tokenRes = await fetch('https://huggingface.co/oauth/token', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString('base64')}`,
+            },
+            body: new URLSearchParams({
+                grant_type: 'authorization_code',
+                code,
+                redirect_uri: redirectUri,
+            }),
+        });
+
+        if (!tokenRes.ok) {
+            const errText = await tokenRes.text();
+            console.error('Token exchange failed:', errText);
+            return NextResponse.json({ error: 'Failed to exchange code for token' }, { status: 500 });
+        }
+
+        const tokenData = await tokenRes.json();
+
+        // Fetch user info
+        const userRes = await fetch('https://huggingface.co/oauth/userinfo', {
+            headers: { 'Authorization': `Bearer ${tokenData.access_token}` },
+        });
+
+        if (!userRes.ok) {
+            return NextResponse.json({ error: 'Failed to fetch user info' }, { status: 500 });
+        }
+
+        const userInfo = await userRes.json();
+        const username = userInfo.preferred_username || userInfo.name || 'user';
+
+        // Set session cookie with username
+        const response = NextResponse.redirect(host);
+        response.cookies.set('hf_user', JSON.stringify({
+            username,
+            name: userInfo.name,
+            picture: userInfo.picture,
+        }), {
+            httpOnly: false, // readable by client JS
+            secure: process.env.NODE_ENV === 'production',
+            sameSite: 'lax',
+            maxAge: 60 * 60 * 8, // 8 hours
+            path: '/',
+        });
+
+        // Clear the state cookie
+        response.cookies.delete('oauth_state');
+
+        return response;
+    } catch (error) {
+        console.error('OAuth callback error:', error);
+        return NextResponse.json({ error: 'OAuth callback failed: ' + error.message }, { status: 500 });
+    }
+}

app/api/auth/login/route.js

@@ -0,0 +1,47 @@
+import { NextResponse } from 'next/server';
+import crypto from 'crypto';
+
+/**
+ * GET /api/auth/login
+ * Redirects user to HuggingFace OAuth authorize URL.
+ */
+export async function GET(request) {
+    const clientId = process.env.OAUTH_CLIENT_ID;
+    if (!clientId) {
+        return NextResponse.json(
+            { error: 'OAuth not configured (missing OAUTH_CLIENT_ID). Set hf_oauth: true in Space metadata.' },
+            { status: 500 }
+        );
+    }
+
+    // Build redirect URI
+    const host = process.env.SPACE_HOST
+        ? `https://${process.env.SPACE_HOST}`
+        : 'http://localhost:3000';
+    const redirectUri = `${host}/api/auth/callback`;
+
+    // Generate state for CSRF protection
+    const state = crypto.randomBytes(16).toString('hex');
+
+    const params = new URLSearchParams({
+        client_id: clientId,
+        redirect_uri: redirectUri,
+        scope: 'openid profile',
+        response_type: 'code',
+        state: state,
+    });
+
+    const authorizeUrl = `https://huggingface.co/oauth/authorize?${params.toString()}`;
+
+    // Set state in a cookie for verification on callback
+    const response = NextResponse.redirect(authorizeUrl);
+    response.cookies.set('oauth_state', state, {
+        httpOnly: true,
+        secure: true,
+        sameSite: 'lax',
+        maxAge: 300, // 5 minutes
+        path: '/',
+    });
+
+    return response;
+}

app/globals.css

@@ -35,11 +35,71 @@ h4 {
 
 /* ── Layout ─────────────────────────────────────── */
 
+/* ── App Wrapper & Top Bar ────────────────────── */
+
+.app-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+}
+
+.top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 20px;
+  background-color: var(--pane-bg);
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+  height: 40px;
+}
+
+.top-bar-title {
+  font-weight: 700;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+}
+
+.top-bar-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.user-badge {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--success);
+  background: rgba(16, 185, 129, 0.1);
+  padding: 3px 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.btn-login {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-color);
+  background: var(--accent);
+  padding: 4px 12px;
+  border-radius: 6px;
+  text-decoration: none;
+  transition: background 0.2s;
+}
+
+.btn-login:hover {
+  background: var(--accent-hover);
+}
+
 .container {
   display: flex;
   width: 100%;
-  height: 100%;
+  flex: 1;
   flex-wrap: wrap;
+  overflow: hidden;
 }
 
 .pane {

app/page.js

@@ -61,6 +61,23 @@ export default function Home() {
             });
     }, []);
 
+    // Read HF OAuth cookie for annotator identity
+    useEffect(() => {
+        try {
+            const cookie = document.cookie
+                .split('; ')
+                .find(c => c.startsWith('hf_user='));
+            if (cookie) {
+                const user = JSON.parse(decodeURIComponent(cookie.split('=').slice(1).join('=')));
+                if (user.username) {
+                    setAnnotatorName(user.username);
+                }
+            }
+        } catch (e) {
+            console.warn('Could not read hf_user cookie', e);
+        }
+    }, []);
+
     // Update currentDoc when selection changes
     useEffect(() => {
         if (selectedDocIndex !== null) {
@@ -337,77 +354,92 @@ export default function Home() {
     }
 
     return (
-        <div className="container">
-            <div className="pane left-pane">
-                <div className="pane-header">
-                    <h2>PDF Viewer</h2>
-                    <DocumentSelector
-                        documents={documents}
+        <div className="app-wrapper">
+            {/* Top bar with user identity */}
+            <div className="top-bar">
+                <span className="top-bar-title">Annotation Tool</span>
+                <div className="top-bar-user">
+                    {annotatorName ? (
+                        <span className="user-badge">👤 {annotatorName}</span>
+                    ) : (
+                        <a href="/api/auth/login" className="btn btn-login" target="_blank" rel="noopener">
+                            🔑 Sign in with HF
+                        </a>
+                    )}
+                </div>
+            </div>
+            <div className="container">
+                <div className="pane left-pane">
+                    <div className="pane-header">
+                        <h2>PDF Viewer</h2>
+                        <DocumentSelector
+                            documents={documents}
+                            selectedDocIndex={selectedDocIndex}
+                            onDocChange={handleDocChange}
+                        />
+                    </div>
+                    <PdfViewer
+                        pdfUrl={currentDoc?.pdf_url}
+                        pageNumber={currentPageNumber}
+                    />
+                </div>
+
+                <div className="pane right-pane">
+                    <MarkdownAnnotator
                         selectedDocIndex={selectedDocIndex}
-                        onDocChange={handleDocChange}
+                        selectedPage={currentPageNumber}
+                        currentPageData={currentPageData}
+                        loadingPage={loadingPage}
+                        onAnnotate={handleAnnotate}
                     />
                 </div>
-                <PdfViewer
-                    pdfUrl={currentDoc?.pdf_url}
-                    pageNumber={currentPageNumber}
+
+                {/* Floating chevron to open annotations panel */}
+                <button
+                    className="panel-chevron"
+                    onClick={() => setPanelOpen(prev => !prev)}
+                    title="Toggle annotations"
+                >
+                    {panelOpen ? '›' : '‹'}
+                    {!panelOpen && currentPageDatasets.length > 0 && (
+                        <span className="chevron-badge">{currentPageDatasets.length}</span>
+                    )}
+                </button>
+                <AnnotationPanel
+                    isOpen={panelOpen}
+                    onClose={() => setPanelOpen(false)}
+                    datasets={currentPageDatasets}
+                    annotatorName={annotatorName}
+                    onValidate={handleValidateDataset}
+                    onDelete={handleDeleteAnnotation}
                 />
-            </div>
 
-            <div className="pane right-pane">
-                <MarkdownAnnotator
-                    selectedDocIndex={selectedDocIndex}
-                    selectedPage={currentPageNumber}
-                    currentPageData={currentPageData}
-                    loadingPage={loadingPage}
-                    onAnnotate={handleAnnotate}
+                {/* Shared page navigator at the bottom */}
+                <div className="bottom-nav">
+                    <PageNavigator
+                        currentIndex={pageIdx}
+                        totalPages={annotatablePages.length}
+                        currentPageNumber={currentPageNumber}
+                        onPrevious={handlePrevPage}
+                        onNext={handleNextPage}
+                    />
+                </div>
+
+                <AnnotationModal
+                    isOpen={modalOpen}
+                    selectedText={selectedText}
+                    annotatorName={annotatorName}
+                    onAnnotatorChange={handleAnnotatorChange}
+                    onSubmit={handleAnnotationSubmit}
+                    onClose={() => setModalOpen(false)}
                 />
-            </div>
 
-            {/* Floating chevron to open annotations panel */}
-            <button
-                className="panel-chevron"
-                onClick={() => setPanelOpen(prev => !prev)}
-                title="Toggle annotations"
-            >
-                {panelOpen ? '›' : '‹'}
-                {!panelOpen && currentPageDatasets.length > 0 && (
-                    <span className="chevron-badge">{currentPageDatasets.length}</span>
+                {toast && (
+                    <div className={`toast toast-${toast.type}`}>
+                        {toast.message}
+                    </div>
                 )}
-            </button>
-            <AnnotationPanel
-                isOpen={panelOpen}
-                onClose={() => setPanelOpen(false)}
-                datasets={currentPageDatasets}
-                annotatorName={annotatorName}
-                onValidate={handleValidateDataset}
-                onDelete={handleDeleteAnnotation}
-            />
-
-            {/* Shared page navigator at the bottom */}
-            <div className="bottom-nav">
-                <PageNavigator
-                    currentIndex={pageIdx}
-                    totalPages={annotatablePages.length}
-                    currentPageNumber={currentPageNumber}
-                    onPrevious={handlePrevPage}
-                    onNext={handleNextPage}
-                />
             </div>
-
-            <AnnotationModal
-                isOpen={modalOpen}
-                selectedText={selectedText}
-                annotatorName={annotatorName}
-                onAnnotatorChange={handleAnnotatorChange}
-                onSubmit={handleAnnotationSubmit}
-                onClose={() => setModalOpen(false)}
-            />
-
-            {toast && (
-                <div className={`toast toast-${toast.type}`}>
-                    {toast.message}
-                </div>
-            )}
         </div>
     );
 }

utils/config.js

@@ -1,4 +1,4 @@
 // Centralized configuration for the annotation app
 export const HF_DATASET_ID = process.env.HF_DATASET_REPO || 'ai4data/annotation_data';
 export const HF_DATASET_BASE_URL = `https://huggingface.co/datasets/${HF_DATASET_ID}`;
-export const MAX_DOCS_TO_SCAN = parseInt(process.env.MAX_DOCS_TO_SCAN || '5', 10);
+export const MAX_DOCS_TO_SCAN = parseInt(process.env.MAX_DOCS_TO_SCAN || '50', 10);