Add static UI implementation for browsing, submitting, and searching tips with HTML, CSS, and JavaScript; remove dependency on Gradio-based UI.

README.md

@@ -6,6 +6,7 @@ colorTo: purple
 sdk: docker
 pinned: false
 short_description: YantraBodha (యంత్రబోధ) - An open-source knowledge base where
+hf_oauth: true
 ---
 
 # Yantrabodha API
@@ -20,10 +21,17 @@ FastAPI backend with static UI for the Yantrabodha knowledge base.
   - `POST /api/post` — submit a new article
   - `GET /api/match?q=...` — full-text search
 
+## Commenting (requires an account)
+
+Users must sign in to comment. Two options:
+
+- **Hugging Face** (when the app is hosted on HF Spaces): “Sign in with Hugging Face” uses HF OAuth (`hf_oauth: true` in the Space).
+- **App account**: “Create account” / “Sign in” with email and password (Supabase Auth). To enable this, set **Secrets**: `SUPABASE_ANON_KEY` (Project Settings → API → anon public) and `SUPABASE_JWT_SECRET` (Project Settings → API → JWT Secret). The UI fetches `/api/config` to get the anon key for sign-up/sign-in; the backend uses the JWT secret to verify tokens when posting comments.
+
 ## Deploy on Hugging Face Spaces
 
 1. Create a new **Space**, choose **Docker** as the SDK.
-2. Add **Secrets** in Space settings: `SUPABASE_URL`, `SUPABASE_SERVICE_KEY`.
+2. Add **Secrets**: `SUPABASE_URL`, `SUPABASE_SERVICE_KEY`. Optional (for app accounts): `SUPABASE_ANON_KEY`, `SUPABASE_JWT_SECRET`.
 3. HF builds and runs the app; the UI is at the Space root.
 
 ## Local run
@@ -32,6 +40,9 @@ FastAPI backend with static UI for the Yantrabodha knowledge base.
    ```
    SUPABASE_URL=your_supabase_url
    SUPABASE_SERVICE_KEY=your_service_key
+   # Optional, for “Create account” / “Sign in”:
+   SUPABASE_ANON_KEY=your_anon_key
+   SUPABASE_JWT_SECRET=your_jwt_secret
    ```
 2. Run the app:
 

api/auth.py

@@ -0,0 +1,35 @@
+"""Resolve comment author from Supabase JWT (app account) or request body (HF OAuth)."""
+import os
+from typing import Optional
+
+import jwt
+from fastapi import Header, HTTPException
+
+# JWT secret from Supabase Project Settings → API → JWT Secret (optional; needed for app-account comments)
+SUPABASE_JWT_SECRET = os.environ.get("SUPABASE_JWT_SECRET")
+
+
+def get_author_from_bearer(authorization: Optional[str] = Header(None)) -> Optional[str]:
+    """If Authorization: Bearer <supabase_jwt> is present, verify and return author name/email."""
+    if not SUPABASE_JWT_SECRET or not authorization or not authorization.startswith("Bearer "):
+        return None
+    token = authorization[7:].strip()
+    if not token:
+        return None
+    try:
+        payload = jwt.decode(
+            token,
+            SUPABASE_JWT_SECRET,
+            audience="authenticated",
+            algorithms=["HS256"],
+        )
+        meta = payload.get("user_metadata") or {}
+        name = meta.get("name") or meta.get("full_name")
+        if name:
+            return str(name).strip()
+        email = payload.get("email")
+        if email:
+            return str(email).strip()
+        return payload.get("sub", "")
+    except jwt.PyJWTError:
+        return None

api/endpoints/articles.py

@@ -18,7 +18,7 @@ def list_articles(
     """List recent articles, newest first. Optional filters: since (ISO date), language, type."""
     query = (
         supabase.table("articles")
-        .select("id, title, body, language, tags, type, contributing_agent, confidence, created_at, user_id, username, avatar_url")
+        .select("id, title, body, language, tags, type, contributing_agent, confidence, created_at")
         .order("created_at", desc=True)
         .limit(min(limit, 100))
     )

api/endpoints/comments.py

@@ -1,8 +1,9 @@
 """GET/POST comments for an article."""
 from typing import Optional
 
-from fastapi import APIRouter, HTTPException
+from fastapi import APIRouter, Header, HTTPException
 
+from auth import get_author_from_bearer
 from database import supabase
 
 router = APIRouter(tags=["comments"])
@@ -13,7 +14,7 @@ def list_comments(article_id: str):
     """List comments for an article, oldest first."""
     result = (
         supabase.table("comments")
-        .select("id, article_id, body, author, created_at, user_id, avatar_url")
+        .select("id, article_id, body, author, created_at")
         .eq("article_id", article_id)
         .order("created_at", desc=False)
         .execute()
@@ -22,20 +23,30 @@ def list_comments(article_id: str):
 
 
 @router.post("/articles/{article_id}/comments", status_code=201)
-def create_comment(article_id: str, payload: dict):
-    """Add a comment. JSON: { "body": "...", "author": "..." (optional), "user_id", "username", "avatar_url" (optional, for HF OAuth) }."""
+def create_comment(
+    article_id: str,
+    payload: dict,
+    authorization: Optional[str] = Header(None),
+):
+    """Add a comment. Requires an account: sign in with Hugging Face (send author in body) or with app account (Authorization: Bearer <token>)."""
     body = (payload.get("body") or "").strip()
-    author = (payload.get("author") or "").strip() or None
-    username = (payload.get("username") or "").strip() or None
-    user_id = (payload.get("user_id") or "").strip() or None
-    avatar_url = (payload.get("avatar_url") or "").strip() or None
-    if username:
-        author = author or username
+    author = get_author_from_bearer(authorization)
+    if not author:
+        author = (payload.get("author") or "").strip() or None
+        if payload.get("username"):
+            author = author or (payload.get("username") or "").strip()
     if not body:
         raise HTTPException(status_code=400, detail="body required")
     if len(body) > 2000:
         raise HTTPException(status_code=400, detail="body max 2000 characters")
-    row = {"article_id": article_id, "body": body, "author": (author or "").strip() or None}
+    if not author:
+        raise HTTPException(
+            status_code=401,
+            detail="Sign in to comment. Use Hugging Face (when on HF) or create an account / sign in.",
+        )
+    user_id = (payload.get("user_id") or "").strip() or None
+    avatar_url = (payload.get("avatar_url") or "").strip() or None
+    row = {"article_id": article_id, "body": body, "author": author}
     if user_id:
         row["user_id"] = user_id
     if avatar_url:

api/endpoints/config.py

@@ -0,0 +1,14 @@
+"""Public config for the frontend (e.g. Supabase URL and anon key for app auth)."""
+import os
+
+from fastapi import APIRouter
+
+router = APIRouter(tags=["config"])
+
+
+@router.get("/config")
+def get_config():
+    """Return public config so the frontend can init Supabase Auth (create account / sign in)."""
+    url = os.environ.get("SUPABASE_URL", "")
+    anon = os.environ.get("SUPABASE_ANON_KEY", "")
+    return {"supabaseUrl": url, "supabaseAnonKey": anon}

api/endpoints/match.py

@@ -18,7 +18,7 @@ def match_articles(
     """Full-text search across article titles and bodies."""
     query = (
         supabase.table("articles")
-        .select("id, title, body, language, tags, type, contributing_agent, confidence, created_at, user_id, username, avatar_url")
+        .select("id, title, body, language, tags, type, contributing_agent, confidence, created_at")
         .text_search("fts", q, config="english")
         .limit(limit)
     )

api/main.py

@@ -21,6 +21,7 @@ from fastapi.staticfiles import StaticFiles
 from database import supabase  # noqa: F401 — ensure DB is loaded
 from endpoints.articles import router as articles_router
 from endpoints.comments import router as comments_router
+from endpoints.config import router as config_router
 from endpoints.match import router as match_router
 from endpoints.post import router as post_router
 from endpoints.report import router as report_router
@@ -30,6 +31,7 @@ app = FastAPI(title="Yantrabodha API", version="1.0.0")
 app.include_router(post_router, prefix="/api/post")
 app.include_router(match_router, prefix="/api/match")
 app.include_router(report_router, prefix="/api")
+app.include_router(config_router, prefix="/api")
 # More specific routes first: /api/articles/{id}/comments before /api/articles
 app.include_router(comments_router, prefix="/api")
 app.include_router(articles_router, prefix="/api")

api/requirements.txt

@@ -3,3 +3,4 @@ uvicorn
 supabase
 pydantic
 python-dotenv
+PyJWT

api/static/app.js

@@ -170,6 +170,15 @@
     });
   }
 
+  function apiPostWithAuth(path, body, extraHeaders) {
+    var headers = { "Content-Type": "application/json", Accept: "application/json" };
+    if (extraHeaders) for (var k in extraHeaders) headers[k] = extraHeaders[k];
+    return fetch(path, { method: "POST", headers: headers, body: JSON.stringify(body) }).then(function (r) {
+      if (!r.ok) return r.json().then(function (j) { throw new Error(j.detail || r.statusText); });
+      return r.json();
+    });
+  }
+
   // ——— Browse ———
   function loadBrowseFeed() {
     const timeVal = document.getElementById("browse-time").value;
@@ -203,16 +212,24 @@
             );
           })
         ).then(function (rows) {
+          const isLoggedIn = typeof window.getCurrentUser === "function" && window.getCurrentUser();
           const cards = rows.map(function (r) {
             const cardHtml = articleToCard(r.article, r.comments);
-            const commentId = "comment-" + r.article.id;
+            const articleId = escapeHtml(r.article.id);
+            let commentRow;
+            if (isLoggedIn) {
+              commentRow =
+                '<textarea class="comment-input" data-article-id="' + articleId + '" placeholder="Add a comment…" rows="3" maxlength="' + COMMENT_BODY_MAX + '"></textarea>' +
+                '<button type="button" class="btn secondary submit-comment-btn">Submit comment</button>';
+            } else {
+              commentRow =
+                '<p class="signin-to-comment">Sign in with Hugging Face to comment.</p>' +
+                '<button type="button" class="btn primary hf-signin-btn">Sign in to comment</button>';
+            }
             return (
               '<div class="article-card-wrapper">' +
               '<div class="card-html">' + cardHtml + "</div>" +
-              '<div class="card-comment-row">' +
-              '<textarea class="comment-input" data-article-id="' + escapeHtml(r.article.id) + '" placeholder="Add a comment…" rows="3" maxlength="' + COMMENT_BODY_MAX + '"></textarea>' +
-              '<button type="button" class="btn secondary submit-comment-btn">Submit comment</button>' +
-              "</div>" +
+              '<div class="card-comment-row">' + commentRow + "</div>" +
               "</div>"
             );
           });
@@ -228,15 +245,19 @@
   }
 
   function bindBrowseCommentButtons() {
-    const authorInput = document.getElementById("browse-comment-author");
     const msgEl = document.getElementById("browse-comment-msg");
     document.querySelectorAll(".submit-comment-btn").forEach(function (btn) {
       btn.onclick = function () {
+        const user = typeof window.getCurrentUser === "function" ? window.getCurrentUser() : null;
+        if (!user) {
+          msgEl.textContent = "Sign in to comment (Hugging Face or create an account).";
+          return;
+        }
         const row = btn.closest(".card-comment-row");
-        const textarea = row.querySelector(".comment-input");
+        const textarea = row && row.querySelector(".comment-input");
+        if (!textarea) return;
         const articleId = textarea.getAttribute("data-article-id");
         const body = (textarea.value || "").trim();
-        const author = (authorInput && authorInput.value || "").trim() || null;
         if (!body) {
           msgEl.textContent = "Enter a comment.";
           return;
@@ -246,7 +267,14 @@
           return;
         }
         msgEl.textContent = "";
-        apiPost("/api/articles/" + encodeURIComponent(articleId) + "/comments", { body: body, author: author })
+        var payload = { body: body };
+        var headers = {};
+        if (user.token) {
+          headers["Authorization"] = "Bearer " + user.token;
+        } else {
+          payload.author = user.name || user.preferred_username || user.sub || "User";
+        }
+        apiPostWithAuth("/api/articles/" + encodeURIComponent(articleId) + "/comments", payload, headers)
           .then(function () {
             msgEl.textContent = "Comment added.";
             textarea.value = "";
@@ -350,6 +378,25 @@
     if (tabId === "browse") loadBrowseFeed();
   }
 
+  function updateTabsForAuth() {
+    var user = typeof window.getCurrentUser === "function" ? window.getCurrentUser() : null;
+    var submitTab = document.querySelector('.tab[data-tab="submit"]');
+    var searchTab = document.querySelector('.tab[data-tab="search"]');
+    if (!user) {
+      if (submitTab) submitTab.style.display = "none";
+      if (searchTab) searchTab.style.display = "none";
+      var submitPanel = document.getElementById("submit-panel");
+      var searchPanel = document.getElementById("search-panel");
+      if (submitPanel && !submitPanel.hidden) switchTab("browse");
+      if (searchPanel && !searchPanel.hidden) switchTab("browse");
+    } else {
+      if (submitTab) submitTab.style.display = "";
+      if (searchTab) searchTab.style.display = "";
+    }
+  }
+
+  window.__updateTabsForAuth = updateTabsForAuth;
+
   // ——— Init ———
   document.querySelectorAll(".tab").forEach(function (t) {
     t.addEventListener("click", function () {
@@ -365,5 +412,12 @@
     if (e.key === "Enter") runSearch();
   });
 
+  window.__onHfAuthChange = function () {
+    updateTabsForAuth();
+    var panel = document.getElementById("browse-panel");
+    if (panel && panel.classList.contains("active")) loadBrowseFeed();
+  };
+
   loadBrowseFeed();
+  updateTabsForAuth();
 })();

api/static/auth.js

@@ -0,0 +1,233 @@
+/**
+ * Auth: Hugging Face (when on HF Spaces) or app account (create account / sign in with email).
+ * Commenting requires being signed in one way or the other.
+ */
+(function () {
+  const HF_STORAGE_KEY = "yantrabodha_hf_oauth";
+  var supabase = null;
+
+  window.getHfUser = function () {
+    return window.__HF_USER__ || null;
+  };
+
+  window.getAppUser = function () {
+    return window.__APP_USER__ || null;
+  };
+
+  function setAppUserFromSession(session) {
+    if (!session || !session.user) { window.__APP_USER__ = null; return; }
+    var user = session.user;
+    var name = (user.user_metadata && (user.user_metadata.name || user.user_metadata.full_name)) || user.email;
+    window.__APP_USER__ = { name: name || user.email, email: user.email, token: session.access_token };
+  }
+
+  window.getCurrentUser = function () {
+    return window.getHfUser() || window.getAppUser();
+  };
+
+  window.signOutHf = function () {
+    try { sessionStorage.removeItem(HF_STORAGE_KEY); } catch (_) {}
+    window.__HF_USER__ = null;
+    renderAuthUI();
+    if (typeof window.__onHfAuthChange === "function") window.__onHfAuthChange();
+  };
+
+  window.signOutApp = function () {
+    if (window.__SUPABASE_CLIENT__) {
+      window.__SUPABASE_CLIENT__.auth.signOut().then(function () {
+        renderAuthUI();
+        if (typeof window.__onHfAuthChange === "function") window.__onHfAuthChange();
+      });
+    }
+  };
+
+  function renderAuthUI() {
+    var user = window.getCurrentUser();
+    var signin = document.getElementById("auth-signin");
+    var loggedin = document.getElementById("auth-loggedin");
+    var loggedinName = document.getElementById("auth-loggedin-name");
+    var loggedinImg = document.getElementById("auth-loggedin-img");
+    var hfBtn = document.getElementById("auth-signin-btn");
+    if (hfBtn) hfBtn.style.display = (window.huggingface && window.huggingface.variables) ? "" : "none";
+    var sep = document.querySelector(".auth-sep");
+    if (sep) sep.style.display = (window.huggingface && window.huggingface.variables) ? "" : "none";
+    if (!signin && !loggedin) return;
+    if (user) {
+      if (signin) signin.style.display = "none";
+      if (typeof window.__updateTabsForAuth === "function") window.__updateTabsForAuth();
+      if (loggedin) {
+        loggedin.style.display = "flex";
+        if (loggedinName) loggedinName.textContent = user.name || user.email || "User";
+        if (loggedinImg) {
+          if (user.picture) {
+            loggedinImg.src = user.picture;
+            loggedinImg.alt = "";
+            loggedinImg.style.display = "";
+          } else {
+            loggedinImg.style.display = "none";
+          }
+        }
+      }
+    } else {
+      if (signin) signin.style.display = "flex";
+      if (loggedin) loggedin.style.display = "none";
+      if (typeof window.__updateTabsForAuth === "function") window.__updateTabsForAuth();
+    }
+  }
+
+  function persistAndRender(result) {
+    var user = result && result.userInfo ? {
+      sub: result.userInfo.sub,
+      name: result.userInfo.name,
+      preferred_username: result.userInfo.preferred_username,
+      picture: result.userInfo.picture,
+    } : null;
+    try { if (user) sessionStorage.setItem(HF_STORAGE_KEY, JSON.stringify(user)); } catch (_) {}
+    window.__HF_USER__ = user;
+    renderAuthUI();
+    if (typeof window.__onHfAuthChange === "function") window.__onHfAuthChange();
+  }
+
+  async function doHfLogin() {
+    try {
+      var hub = await import("https://esm.sh/@huggingface/hub@0.21.0");
+      var scopes = window.huggingface && window.huggingface.variables && window.huggingface.variables.OAUTH_SCOPES;
+      var url = await hub.oauthLoginUrl(scopes ? { scopes: scopes } : {});
+      window.location.href = url + (url.indexOf("?") >= 0 ? "&" : "?") + "prompt=consent";
+    } catch (err) { console.warn("HF OAuth login failed:", err); }
+  }
+
+  function openModal(panel) {
+    var modal = document.getElementById("auth-modal");
+    if (!modal) return;
+    modal.hidden = false;
+    modal.setAttribute("aria-hidden", "false");
+    document.body.classList.add("auth-modal-open");
+    document.getElementById("auth-modal-signin").style.display = panel === "signin" ? "block" : "none";
+    document.getElementById("auth-modal-register").style.display = panel === "register" ? "block" : "none";
+    document.getElementById("auth-modal-error").style.display = "none";
+    document.addEventListener("keydown", onModalEscape);
+  }
+
+  function closeModal() {
+    var modal = document.getElementById("auth-modal");
+    if (modal) {
+      modal.hidden = true;
+      modal.setAttribute("aria-hidden", "true");
+    }
+    document.body.classList.remove("auth-modal-open");
+    document.removeEventListener("keydown", onModalEscape);
+  }
+
+  function onModalEscape(e) {
+    if (e.key === "Escape") closeModal();
+  }
+
+  function showAuthError(msg) {
+    var el = document.getElementById("auth-modal-error");
+    if (el) { el.textContent = msg || ""; el.style.display = msg ? "block" : "none"; }
+  }
+
+  async function initSupabase() {
+    try {
+      var r = await fetch("/api/config");
+      var config = await r.json();
+      if (!config.supabaseUrl || !config.supabaseAnonKey) return;
+      var mod = await import("https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm");
+      var createClient = mod.createClient || (mod.default && mod.default.createClient);
+      window.__SUPABASE_CLIENT__ = createClient(config.supabaseUrl, config.supabaseAnonKey);
+      supabase = window.__SUPABASE_CLIENT__;
+      supabase.auth.onAuthStateChange(function (event, session) {
+        setAppUserFromSession(session);
+        renderAuthUI();
+        if (typeof window.__onHfAuthChange === "function") window.__onHfAuthChange();
+      });
+      var session = (await supabase.auth.getSession()).data.session;
+      setAppUserFromSession(session);
+      if (session) { renderAuthUI(); if (typeof window.__onHfAuthChange === "function") window.__onHfAuthChange(); }
+    } catch (_) {}
+  }
+
+  async function init() {
+    var stored = null;
+    try { var raw = sessionStorage.getItem(HF_STORAGE_KEY); if (raw) stored = JSON.parse(raw); } catch (_) {}
+    if (stored) { window.__HF_USER__ = stored; renderAuthUI(); }
+
+    await initSupabase();
+
+    if (window.huggingface && window.huggingface.variables) {
+      try {
+        var hub = await import("https://esm.sh/@huggingface/hub@0.21.0");
+        var oauthResult = await hub.oauthHandleRedirectIfPresent();
+        if (oauthResult) { persistAndRender(oauthResult); bindButtons(); return; }
+      } catch (e) { console.warn("HF OAuth redirect failed:", e); }
+    }
+
+    renderAuthUI();
+    bindButtons();
+    if (typeof window.__updateTabsForAuth === "function") window.__updateTabsForAuth();
+  }
+
+  function bindButtons() {
+    var signinBtn = document.getElementById("auth-signin-btn");
+    if (signinBtn) signinBtn.onclick = doHfLogin;
+    document.body.addEventListener("click", function (e) {
+      if (e.target.closest(".hf-signin-btn")) { e.preventDefault(); doHfLogin(); }
+    });
+    var signoutBtn = document.getElementById("auth-signout-btn");
+    if (signoutBtn) {
+      signoutBtn.onclick = function () {
+        if (window.getHfUser()) window.signOutHf();
+        else window.signOutApp();
+      };
+    }
+    var appSigninBtn = document.getElementById("auth-app-signin-btn");
+    if (appSigninBtn) appSigninBtn.onclick = function () { openModal("signin"); };
+    var appRegisterBtn = document.getElementById("auth-app-register-btn");
+    if (appRegisterBtn) appRegisterBtn.onclick = function () { openModal("register"); };
+    document.getElementById("auth-show-register") && document.getElementById("auth-show-register").addEventListener("click", function () { openModal("register"); });
+    document.getElementById("auth-show-signin") && document.getElementById("auth-show-signin").addEventListener("click", function () { openModal("signin"); });
+    var closeBtn = document.querySelector(".auth-modal-close");
+    if (closeBtn) closeBtn.addEventListener("click", closeModal);
+    var backdrop = document.querySelector(".auth-modal-backdrop");
+    if (backdrop) backdrop.addEventListener("click", closeModal);
+    var formSignin = document.getElementById("auth-form-signin");
+    if (formSignin) {
+      formSignin.onsubmit = async function (e) {
+        e.preventDefault();
+        showAuthError("");
+        if (!window.__SUPABASE_CLIENT__) { showAuthError("App sign-in not configured."); return; }
+        var email = document.getElementById("auth-email-signin").value.trim();
+        var password = document.getElementById("auth-password-signin").value;
+        try {
+          var res = await window.__SUPABASE_CLIENT__.auth.signInWithPassword({ email: email, password: password });
+          if (res.error) throw new Error(res.error.message);
+          closeModal();
+          renderAuthUI();
+          if (typeof window.__onHfAuthChange === "function") window.__onHfAuthChange();
+        } catch (err) { showAuthError(err.message || "Sign in failed."); }
+      };
+    }
+    var formRegister = document.getElementById("auth-form-register");
+    if (formRegister) {
+      formRegister.onsubmit = async function (e) {
+        e.preventDefault();
+        showAuthError("");
+        if (!window.__SUPABASE_CLIENT__) { showAuthError("Create account not configured."); return; }
+        var name = document.getElementById("auth-name-register").value.trim();
+        var email = document.getElementById("auth-email-register").value.trim();
+        var password = document.getElementById("auth-password-register").value;
+        try {
+          var res = await window.__SUPABASE_CLIENT__.auth.signUp({ email: email, password: password, options: { data: { name: name || email } } });
+          if (res.error) throw new Error(res.error.message);
+          closeModal();
+          showAuthError("");
+          renderAuthUI();
+          if (typeof window.__onHfAuthChange === "function") window.__onHfAuthChange();
+        } catch (err) { showAuthError(err.message || "Create account failed."); }
+      };
+    }
+  }
+
+  init();
+})();

api/static/index.html

@@ -13,8 +13,25 @@
 <body>
   <div class="container">
     <header class="header">
-      <h1>Yantrabodha</h1>
-      <p class="subtitle">Knowledge base tips — browse, add, and search</p>
+      <div class="header-top">
+        <div>
+          <h1>Yantrabodha</h1>
+          <p class="subtitle">Knowledge base tips — browse, add, and search</p>
+        </div>
+        <div id="auth-header" class="auth-header">
+          <div id="auth-signin" class="auth-signin-row" style="display: none;">
+            <button type="button" id="auth-signin-btn" class="btn secondary btn-sm">Sign in with Hugging Face</button>
+            <span class="auth-sep">or</span>
+            <button type="button" id="auth-app-signin-btn" class="btn secondary btn-sm">Sign in</button>
+            <button type="button" id="auth-app-register-btn" class="btn primary btn-sm">Create account</button>
+          </div>
+          <div id="auth-loggedin" class="auth-loggedin" style="display: none;">
+            <img id="auth-loggedin-img" class="auth-avatar" src="" alt="" />
+            <span id="auth-loggedin-name" class="auth-name"></span>
+            <button type="button" id="auth-signout-btn" class="btn secondary btn-sm">Sign out</button>
+          </div>
+        </div>
+      </div>
     </header>
 
     <nav class="tabs" role="tablist">
@@ -65,10 +82,6 @@
           </select>
         </label>
       </div>
-      <p class="comment-author-row">
-        <label for="browse-comment-author">Your name (optional)</label>
-        <input type="text" id="browse-comment-author" maxlength="100" placeholder="Your name (optional)" />
-      </p>
       <div id="browse-feed" class="feed" aria-busy="false">
         <div class="empty-state">Loading…</div>
       </div>
@@ -176,6 +189,33 @@
       </div>
     </section>
   </div>
+  <div id="auth-modal" class="auth-modal" hidden aria-modal="true" aria-hidden="true" role="dialog" aria-label="Sign in or create account">
+    <div class="auth-modal-backdrop"></div>
+    <div class="auth-modal-box">
+      <button type="button" class="auth-modal-close" aria-label="Close">&times;</button>
+      <div id="auth-modal-signin" class="auth-modal-panel">
+        <h3 class="auth-modal-title">Sign in</h3>
+        <form id="auth-form-signin" class="auth-form">
+          <label>Email <input type="email" id="auth-email-signin" required placeholder="you@example.com" /></label>
+          <label>Password <input type="password" id="auth-password-signin" required /></label>
+          <button type="submit" class="btn primary">Sign in</button>
+        </form>
+        <p class="auth-modal-switch">Don’t have an account? <button type="button" id="auth-show-register" class="auth-link">Create account</button></p>
+      </div>
+      <div id="auth-modal-register" class="auth-modal-panel" style="display: none;">
+        <h3 class="auth-modal-title">Create account</h3>
+        <form id="auth-form-register" class="auth-form">
+          <label>Name <input type="text" id="auth-name-register" placeholder="Your name" /></label>
+          <label>Email <input type="email" id="auth-email-register" required placeholder="you@example.com" /></label>
+          <label>Password <input type="password" id="auth-password-register" required minlength="6" placeholder="min 6 characters" /></label>
+          <button type="submit" class="btn primary">Create account</button>
+        </form>
+        <p class="auth-modal-switch">Already have an account? <button type="button" id="auth-show-signin" class="auth-link">Sign in</button></p>
+      </div>
+      <p id="auth-modal-error" class="auth-modal-error" style="display: none;"></p>
+    </div>
+  </div>
+  <script src="auth.js"></script>
   <script src="app.js"></script>
 </body>
 </html>

api/static/styles.css

@@ -63,6 +63,165 @@ body {
   font-size: 0.9375rem;
 }
 
+.header-top {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.auth-header {
+  flex-shrink: 0;
+}
+
+.auth-loggedin {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.auth-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.auth-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.btn-sm {
+  padding: 0.4rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.signin-to-comment {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  color: var(--text-light);
+}
+
+.auth-signin-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.auth-sep {
+  font-size: 0.75rem;
+  color: var(--text-light);
+}
+
+body.auth-modal-open {
+  overflow: hidden;
+  height: 100%;
+}
+
+.auth-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  overflow: auto;
+}
+
+.auth-modal[hidden] {
+  display: none !important;
+}
+
+.auth-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.auth-modal-box {
+  position: relative;
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-md);
+  padding: 1.5rem;
+  max-width: 360px;
+  width: 100%;
+}
+
+.auth-modal-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--text-muted);
+  line-height: 1;
+}
+
+.auth-modal-close:hover {
+  color: var(--text);
+}
+
+.auth-modal-title {
+  margin: 0 0 1rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.auth-form label {
+  display: block;
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.auth-form input {
+  display: block;
+  width: 100%;
+  margin-top: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.9rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+
+.auth-form button[type="submit"] {
+  margin-top: 0.5rem;
+}
+
+.auth-modal-switch {
+  margin: 1rem 0 0 0;
+  font-size: 0.875rem;
+  color: var(--text-light);
+}
+
+.auth-link {
+  background: none;
+  border: none;
+  color: var(--primary);
+  cursor: pointer;
+  font-size: inherit;
+  text-decoration: underline;
+}
+
+.auth-link:hover {
+  color: var(--primary-hover);
+}
+
+.auth-modal-error {
+  margin: 0.75rem 0 0 0;
+  font-size: 0.875rem;
+  color: #b91c1c;
+}
+
 /* Tabs — pill style */
 .tabs {
   display: flex;