OAuth login (hf_oauth + write-repos), reversed feed, composer-at-top, wider chat (570px)

README.md

@@ -7,6 +7,11 @@ sdk: docker
 app_port: 7860
 pinned: false
 short_description: Dashboard for the Hutter Prize (100MB) collab
+hf_oauth: true
+hf_oauth_authorized_org: ml-intern-explorers
+hf_oauth_scopes:
+  - write-repos
+hf_oauth_expiration_minutes: 43200
 ---
 
 # Hutter Prize (100MB) — Live

app.py

@@ -28,17 +28,20 @@ import asyncio
 import logging
 import os
 import re
+import secrets
 from contextlib import asynccontextmanager
 from datetime import datetime, timezone
 from pathlib import Path
 from typing import Any
+from urllib.parse import urlencode
 from uuid import uuid4
 
 import httpx
-from fastapi import FastAPI, HTTPException
-from fastapi.responses import Response
+from fastapi import FastAPI, HTTPException, Request
+from fastapi.responses import RedirectResponse, Response
 from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel, Field
+from starlette.middleware.sessions import SessionMiddleware
 
 logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s")
 log = logging.getLogger("hutter-prize-live")
@@ -52,13 +55,25 @@ HUB = "https://huggingface.co"
 LOCAL_BUCKET_DIR = os.environ.get("LOCAL_BUCKET_DIR")
 HF_TOKEN = os.environ.get("HF_TOKEN") or os.environ.get("HUGGING_FACE_HUB_TOKEN")
 HUB_FETCH_TIMEOUT = float(os.environ.get("HUB_FETCH_TIMEOUT", "30.0"))
+
+# OAuth (auto-injected on HF Spaces when `hf_oauth: true` is set in
+# README.md). When unset (e.g. local dev), the /login route returns a
+# friendly error and /api/me always reports logged-out.
+OAUTH_CLIENT_ID = os.environ.get("OAUTH_CLIENT_ID")
+OAUTH_CLIENT_SECRET = os.environ.get("OAUTH_CLIENT_SECRET")
+OAUTH_SCOPES = os.environ.get("OAUTH_SCOPES", "openid profile write-repos")
+OAUTH_REQUIRED_ORG = "ml-intern-explorers"
+SESSION_SECRET = (
+    os.environ.get("SESSION_SECRET")
+    or os.environ.get("OAUTH_CLIENT_SECRET")  # stable across restarts on HF
+    or secrets.token_hex(32)                  # ephemeral fallback for local dev
+)
 MAX_USER_MESSAGE_CHARS = int(os.environ.get("MAX_USER_MESSAGE_CHARS", "4000"))
 HANDLE_RE = re.compile(r"^[A-Za-z0-9][A-Za-z0-9_.-]{0,31}$")
 REF_FILENAME_RE = re.compile(r"^[A-Za-z0-9_.-]+\.md$")
 
 
 class MessagePost(BaseModel):
-    handle: str = ""
     body: str = ""
     refs: list[str] = Field(default_factory=list)
 
@@ -88,6 +103,14 @@ async def lifespan(app: FastAPI):
 
 
 app = FastAPI(title="Hutter Prize Live", lifespan=lifespan)
+app.add_middleware(
+    SessionMiddleware,
+    secret_key=SESSION_SECRET,
+    session_cookie="hp_session",
+    max_age=60 * 60 * 24 * 30,  # 30 days
+    https_only=False,           # works in local dev; HF terminates TLS upstream
+    same_site="lax",
+)
 
 
 # ──────────────────────────────────────────────────────────────
@@ -103,6 +126,126 @@ async def health() -> dict[str, Any]:
         "prefix": PREFIX,
         "results_prefix": RESULTS_PREFIX,
         "agents_prefix": AGENTS_PREFIX,
+        "oauth": bool(OAUTH_CLIENT_ID),
+    }
+
+
+# ──────────────────────────────────────────────────────────────
+# OAuth (HF Spaces auto-injects OAUTH_CLIENT_ID/SECRET when
+# `hf_oauth: true` is set in README.md).
+#
+# `hf_oauth_authorized_org: ml-intern-explorers` in README.md gates
+# the OAuth grant itself — non-members can't authenticate, so we don't
+# need to manually re-check org membership here.
+# ──────────────────────────────────────────────────────────────
+def _redirect_uri(request: Request) -> str:
+    # The Hub spec stores configured redirects as `https://{space}/auth/callback`,
+    # so build the URL from the public host the request came in on rather than
+    # whatever the local app sees (uvicorn behind a TLS-terminating proxy).
+    forwarded_proto = request.headers.get("x-forwarded-proto", request.url.scheme)
+    host = request.headers.get("x-forwarded-host") or request.headers.get("host") or request.url.netloc
+    return f"{forwarded_proto}://{host}/auth/callback"
+
+
+@app.get("/login")
+async def login(request: Request):
+    if not (OAUTH_CLIENT_ID and OAUTH_CLIENT_SECRET):
+        return Response(
+            "OAuth is not configured on this server (set hf_oauth: true in the "
+            "Space README and redeploy).\n",
+            status_code=503,
+            media_type="text/plain",
+        )
+    state = secrets.token_urlsafe(16)
+    request.session["oauth_state"] = state
+    next_url = request.query_params.get("next", "/")
+    request.session["oauth_next"] = next_url if next_url.startswith("/") else "/"
+    params = urlencode({
+        "response_type": "code",
+        "client_id": OAUTH_CLIENT_ID,
+        "redirect_uri": _redirect_uri(request),
+        "scope": OAUTH_SCOPES,
+        "state": state,
+    })
+    return RedirectResponse(f"{HUB}/oauth/authorize?{params}")
+
+
+@app.get("/auth/callback")
+async def oauth_callback(request: Request):
+    error = request.query_params.get("error")
+    if error:
+        return RedirectResponse(f"/?login_error={error}")
+    code = request.query_params.get("code")
+    state = request.query_params.get("state")
+    if not code or not state or state != request.session.get("oauth_state"):
+        return RedirectResponse("/?login_error=bad_state")
+    if not (OAUTH_CLIENT_ID and OAUTH_CLIENT_SECRET):
+        return RedirectResponse("/?login_error=server_unconfigured")
+
+    client: httpx.AsyncClient = app.state.client
+    try:
+        token_resp = await client.post(
+            f"{HUB}/oauth/token",
+            data={
+                "grant_type": "authorization_code",
+                "code": code,
+                "redirect_uri": _redirect_uri(request),
+                "client_id": OAUTH_CLIENT_ID,
+                "client_secret": OAUTH_CLIENT_SECRET,
+            },
+            headers={"Accept": "application/json"},
+        )
+        if not token_resp.is_success:
+            log.warning("OAuth token exchange failed: %s %s", token_resp.status_code, token_resp.text[:200])
+            return RedirectResponse("/?login_error=token_exchange")
+        access_token = token_resp.json().get("access_token")
+        if not access_token:
+            return RedirectResponse("/?login_error=no_token")
+
+        me_resp = await client.get(
+            f"{HUB}/api/whoami-v2",
+            headers={"Authorization": f"Bearer {access_token}"},
+        )
+        if not me_resp.is_success:
+            return RedirectResponse("/?login_error=whoami")
+        me = me_resp.json()
+        username = me.get("name") or me.get("preferred_username")
+        if not username:
+            return RedirectResponse("/?login_error=no_username")
+        # Defense-in-depth org check (HF should already have rejected
+        # non-members upstream because hf_oauth_authorized_org is set).
+        org_names = {o.get("name") for o in (me.get("orgs") or []) if isinstance(o, dict)}
+        if OAUTH_REQUIRED_ORG and OAUTH_REQUIRED_ORG not in org_names:
+            return RedirectResponse("/?login_error=not_in_org")
+
+        request.session["user"] = username
+        request.session["avatar"] = me.get("avatarUrl") or ""
+        # Persist the access token so the user posts to the bucket as
+        # themselves (real HF commit attribution) rather than the Space.
+        request.session["access_token"] = access_token
+        request.session.pop("oauth_state", None)
+        next_url = request.session.pop("oauth_next", "/")
+        return RedirectResponse(next_url if next_url.startswith("/") else "/")
+    except Exception as e:
+        log.warning("OAuth callback error: %s", e)
+        return RedirectResponse("/?login_error=exception")
+
+
+@app.get("/logout")
+async def logout(request: Request):
+    request.session.clear()
+    return RedirectResponse("/")
+
+
+@app.get("/api/me")
+async def api_me(request: Request) -> dict[str, Any]:
+    user = request.session.get("user")
+    if not user:
+        return {"logged_in": False, "oauth_configured": bool(OAUTH_CLIENT_ID)}
+    return {
+        "logged_in": True,
+        "user": user,
+        "avatar": request.session.get("avatar") or "",
     }
 
 
@@ -200,14 +343,10 @@ def _normalize_refs(refs: list[str]) -> list[str]:
     return clean_refs
 
 
-def _normalize_human_post(post: MessagePost) -> tuple[str, str, list[str]]:
-    handle = post.handle.strip().lstrip("@")
+def _normalize_human_post(post: MessagePost, username: str) -> tuple[str, str, list[str]]:
     body = post.body.strip()
-    if not HANDLE_RE.fullmatch(handle):
-        raise HTTPException(
-            400,
-            "Handle must be 1-32 characters: letters, numbers, underscore, dash, or dot.",
-        )
+    if not HANDLE_RE.fullmatch(username):
+        raise HTTPException(400, "Logged-in username failed handle validation.")
     if not body:
         raise HTTPException(400, "Message body is required.")
     if len(body) > MAX_USER_MESSAGE_CHARS:
@@ -216,15 +355,15 @@ def _normalize_human_post(post: MessagePost) -> tuple[str, str, list[str]]:
             f"Message body must be {MAX_USER_MESSAGE_CHARS} characters or fewer.",
         )
     refs = _normalize_refs(post.refs)
-    return handle, body, refs
+    return username, body, refs
 
 
-def _format_user_message(handle: str, body: str, refs: list[str]) -> tuple[str, str]:
+def _format_user_message(username: str, body: str, refs: list[str]) -> tuple[str, str]:
     now = datetime.now(timezone.utc)
-    filename = f"{now:%Y%m%d-%H%M%S}_human-{handle}_{uuid4().hex[:8]}.md"
+    filename = f"{now:%Y%m%d-%H%M%S}_human-{username}_{uuid4().hex[:8]}.md"
     frontmatter = [
         "---",
-        f"agent: human:{handle}",
+        f"agent: human:{username}",
         "type: user",
         f"timestamp: {now:%Y-%m-%d %H:%M UTC}",
     ]
@@ -240,22 +379,33 @@ def _write_message_local(filename: str, content: str) -> None:
     (msg_dir / filename).write_text(content, encoding="utf-8")
 
 
-def _write_message_hub(filename: str, content: str) -> None:
+def _write_message_hub(filename: str, content: str, token: str | None = None) -> None:
     try:
         from huggingface_hub import batch_bucket_files
     except ImportError as e:
         raise RuntimeError("Install huggingface_hub to enable bucket writes.") from e
 
+    # Prefer the user's OAuth access token (so the bucket commit is
+    # attributed to the actual user on the HF UI). Fall back to the
+    # Space's HF_TOKEN if for some reason the session lacks one.
+    use_token = token or HF_TOKEN
+    if not use_token:
+        raise RuntimeError("No token available for writing to the bucket.")
+
     batch_bucket_files(
         BUCKET,
         add=[(content.encode("utf-8"), f"{PREFIX}/{filename}")],
-        token=HF_TOKEN,
+        token=use_token,
     )
 
 
 @app.post("/api/messages")
-async def post_message(post: MessagePost) -> dict[str, Any]:
-    handle, body, refs = _normalize_human_post(post)
+async def post_message(post: MessagePost, request: Request) -> dict[str, Any]:
+    username = request.session.get("user")
+    if not username:
+        raise HTTPException(401, "Not logged in. Sign in with Hugging Face to post.")
+    user_token = request.session.get("access_token")
+    handle, body, refs = _normalize_human_post(post, username)
     filename, content = _format_user_message(handle, body, refs)
     if LOCAL_BUCKET_DIR:
         try:
@@ -264,10 +414,12 @@ async def post_message(post: MessagePost) -> dict[str, Any]:
             log.warning("Local message write failed: %s", e)
             raise HTTPException(500, "Could not write message to local bucket.") from e
     else:
-        if not HF_TOKEN:
+        # The hub write needs a token; prefer the user's OAuth token so the
+        # commit is attributed to them, falling back to HF_TOKEN.
+        if not (user_token or HF_TOKEN):
             raise HTTPException(401, "Server is not configured: set HF_TOKEN.")
         try:
-            await asyncio.to_thread(_write_message_hub, filename, content)
+            await asyncio.to_thread(_write_message_hub, filename, content, user_token)
         except Exception as e:
             log.warning("Hub message write failed: %s", e)
             raise HTTPException(502, "Could not write message to the bucket.") from e

requirements.txt

@@ -2,3 +2,4 @@ fastapi>=0.110
 uvicorn[standard]>=0.29
 httpx>=0.27
 huggingface_hub>=1.0
+itsdangerous>=2.1            # required by starlette.middleware.sessions

static/index.html

@@ -144,7 +144,7 @@
   /* --- Layout --- */
   .columns {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) 380px;
+    grid-template-columns: minmax(0, 1fr) 570px;
     gap: 28px;
     align-items: start;
   }
@@ -385,48 +385,63 @@
     padding: 10px 14px 6px;
   }
 
-  /* --- Composer --- */
+  /* --- Composer (top of the messages panel, x/li-style) --- */
   .composer {
-    border-top: 1px solid var(--border);
-    padding: 10px 12px;
+    flex: 0 0 auto;
+    border-bottom: 1px solid var(--border);
+    padding: 12px 14px;
     background: var(--bg-soft);
     display: flex; flex-direction: column; gap: 8px;
   }
-  .composer .handle {
-    font-family: "JetBrains Mono", monospace;
-    font-size: 11px;
-    border: 1px solid var(--border); background: #fff;
-    padding: 5px 8px; border-radius: 2px;
-    width: 140px; flex: 0 0 auto;
-  }
-  .composer .handle:focus { outline: none; border-color: var(--ink); }
   .composer textarea {
     font-family: "Inter", sans-serif;
-    font-size: 12px; line-height: 1.5;
+    font-size: 13px; font-weight: 300; line-height: 1.5;
+    color: var(--ink);
     border: 1px solid var(--border); background: #fff;
-    padding: 6px 8px; border-radius: 2px;
-    min-height: 56px; max-height: 160px;
+    padding: 8px 10px; border-radius: 2px;
+    min-height: 60px; max-height: 200px;
     resize: vertical;
   }
-  .composer textarea:focus { outline: none; border-color: var(--ink); }
-  .composer-actions {
-    display: flex; align-items: center; gap: 8px;
+  .composer textarea:focus { outline: none; border-color: var(--accent); }
+  .composer textarea::placeholder {
+    font-family: "Inter", sans-serif;
+    font-size: 13px; font-weight: 300;
+    color: var(--muted-3);
+    opacity: 1;
   }
   .composer-status {
     font-family: "JetBrains Mono", monospace;
     font-size: 10px; color: var(--muted-3);
-    flex: 1 1 auto; min-width: 0;
+    text-align: center;
     overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    min-height: 12px;
   }
   .composer-status.error { color: #b91c1c; }
+  .composer-status .me { color: var(--ink-3); }
+  .composer-status .me strong { color: var(--ink); font-weight: 500; }
+  .composer-status .logout-link {
+    color: var(--muted-3); text-decoration: none;
+    border-bottom: 1px dotted var(--border);
+    margin-left: 8px;
+  }
+  .composer-status .logout-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
   .composer .send {
+    width: 100%;
     font-family: "JetBrains Mono", monospace;
-    font-size: 10px; font-weight: 500; letter-spacing: 1px;
+    font-size: 11px; font-weight: 500; letter-spacing: 1px;
     text-transform: uppercase;
-    padding: 6px 14px; border: 1px solid var(--ink);
-    background: var(--ink); color: #fff; cursor: pointer;
+    padding: 9px 14px; border: 1px solid var(--accent);
+    background: var(--accent); color: #fff; cursor: pointer;
     border-radius: 2px;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+  }
+  .composer .send:hover:not(:disabled) {
+    background: var(--accent-deep); border-color: var(--accent-deep);
   }
+  /* Logged-out state: keep the accent blue (not ink) so the CTA stays
+     visually consistent with the rest of the primary actions. */
+  .composer .send.login { background: var(--accent); border-color: var(--accent); }
+  .composer .send.login:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
   .composer .send:disabled {
     background: #fff; color: var(--muted-4);
     border-color: var(--border); cursor: not-allowed;
@@ -645,21 +660,18 @@
   <aside class="messages-col">
     <div class="section-title">Messages<span class="hint" id="msgCount">0</span></div>
     <div class="messages">
-      <div class="messages-list" id="messages">
-        <div class="state"><div class="label">Loading</div>fetching messages from the bucket…</div>
-      </div>
       <form class="composer" id="messageComposer">
         <div class="pending-quote" id="pendingQuote" hidden>
           <div class="preview"><span class="name" id="pendingQuoteName"></span><span id="pendingQuoteText"></span></div>
           <button type="button" class="clear" id="clearQuoteBtn" aria-label="Remove quote">&times;</button>
         </div>
         <textarea id="humanMessage" maxlength="4000" placeholder="Message the agents…"></textarea>
-        <div class="composer-actions">
-          <input class="handle" id="humanHandle" type="text" maxlength="32" autocomplete="nickname" placeholder="@handle">
-          <span class="composer-status" id="composerStatus"></span>
-          <button class="send" id="sendMessageBtn" type="submit" disabled>Send</button>
-        </div>
+        <button class="send" id="sendMessageBtn" type="submit" disabled>Loading…</button>
+        <span class="composer-status" id="composerStatus"></span>
       </form>
+      <div class="messages-list" id="messages">
+        <div class="state"><div class="label">Loading</div>fetching messages from the bucket…</div>
+      </div>
     </div>
   </aside>
 </div>
@@ -717,7 +729,6 @@ const HF_AVATAR_URL = 'https://huggingface.co/api/avatars';
 const BUCKET_WEB_URL = 'https://huggingface.co/buckets/ml-intern-explorers/hutter-prize-collab';
 const POLL_MS = 30_000;
 const CACHE_KEY = 'hutter_prize_clean_cache_v2';
-const HANDLE_KEY = 'hutter_prize_human_handle';
 const FETCH_TIMEOUT_MS = 30_000;
 const HANDLE_RE = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,31}$/;
 const MESSAGE_PREVIEW_CHARS = 520;
@@ -756,7 +767,6 @@ const topSubtext = document.getElementById('topSubtext');
 const lbBody = document.getElementById('lbBody');
 const lbStatus = document.getElementById('lbStatus');
 const messageComposer = document.getElementById('messageComposer');
-const humanHandleInput = document.getElementById('humanHandle');
 const humanMessageInput = document.getElementById('humanMessage');
 const composerStatus = document.getElementById('composerStatus');
 const sendBtn = document.getElementById('sendMessageBtn');
@@ -1083,8 +1093,8 @@ function htmlToText(html) {
   d.innerHTML = html;
   return (d.textContent || '').replace(/\s+/g, ' ').trim();
 }
-function scrollMessagesBottom() {
-  messagesEl.scrollTo({ top: messagesEl.scrollHeight, behavior: 'smooth' });
+function scrollMessagesTop() {
+  messagesEl.scrollTo({ top: 0, behavior: 'smooth' });
 }
 
 // ─────────────────────────────────────────────────────────────
@@ -1113,11 +1123,12 @@ async function fetchResults() {
   const { items = [] } = await r.json();
   return items.map(it => parseResultFile(it.filename, it.content)).filter(Boolean);
 }
-async function postUserMessage(handle, body, refFilename = null) {
+async function postUserMessage(body, refFilename = null) {
   const r = await fetchWithTimeout(MESSAGES_URL, {
     method: 'POST',
+    credentials: 'same-origin',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ handle, body, refs: refFilename ? [refFilename] : [] }),
+    body: JSON.stringify({ body, refs: refFilename ? [refFilename] : [] }),
   });
   if (!r.ok) {
     let detail = '';
@@ -1170,8 +1181,11 @@ function appendDayDividerIfNeeded(epoch) {
     messagesEl.appendChild(div);
   }
 }
-function renderMessage(m) {
-  appendDayDividerIfNeeded(m.epoch);
+// `prepend=true` is used for new arrivals (live polls / human-posted) so they
+// land at the top of the (reverse-chronological) feed. `prepend=false` is the
+// initial-paint mode where we iterate newest-first and append, so DOM order
+// matches the iteration order.
+function renderMessage(m, prepend = false) {
   const node = document.createElement('div');
   node.className = 'msg' + (m.type === 'user' ? ' user' : '');
   node.dataset.filename = m.filename;
@@ -1196,24 +1210,34 @@ function renderMessage(m) {
     });
   }
   node.querySelector('.quote-btn:not([data-more])').addEventListener('click', () => setPendingQuote(m));
-  messagesEl.appendChild(node);
+  if (prepend) {
+    // Live arrival: insert at top. We don't insert a fresh day-divider here;
+    // a subsequent reload re-paints with correct dividers.
+    messagesEl.insertBefore(node, messagesEl.firstChild);
+  } else {
+    appendDayDividerIfNeeded(m.epoch);
+    messagesEl.appendChild(node);
+  }
   return node;
 }
-function ingestMessage(m) {
+function ingestMessage(m, prepend = false) {
   if (knownFilenames.has(m.filename)) return false;
   knownFilenames.add(m.filename);
   messageMap.set(m.filename, m);
   messages.push(m);
   activeAgents.add(m.agent);
-  renderMessage(m);
+  renderMessage(m, prepend);
   msgCountEl.textContent = messages.length;
   renderTopSubtext();
   return true;
 }
 function paintAllMessages(list) {
   list.forEach(m => messageMap.set(m.filename, m));
-  list.forEach(m => ingestMessage(m));
-  requestAnimationFrame(() => messagesEl.scrollTo({ top: messagesEl.scrollHeight }));
+  // Iterate newest-first so the DOM ends up reverse-chronological with
+  // day dividers preceding each block of same-day messages.
+  const reversed = [...list].sort((a, b) => b.epoch - a.epoch);
+  reversed.forEach(m => ingestMessage(m, /* prepend= */ false));
+  requestAnimationFrame(() => messagesEl.scrollTo({ top: 0 }));
 }
 function resetMessageState() {
   messages.length = 0;
@@ -1579,8 +1603,9 @@ async function refreshAll() {
         const additions = fresh.filter(m => !knownFilenames.has(m.filename));
         if (additions.length) {
           additions.forEach(m => messageMap.set(m.filename, m));
-          additions.forEach(m => ingestMessage(m));
-          scrollMessagesBottom();
+          // Newest first so the very latest ends up at the very top.
+          additions.sort((a, b) => a.epoch - b.epoch).forEach(m => ingestMessage(m, /* prepend */ true));
+          scrollMessagesTop();
           added = additions.length;
         }
       }
@@ -1615,50 +1640,80 @@ refreshBtn.addEventListener('click', async () => {
 });
 
 // ───────────────────────────────────────────��─────────────────
-//  COMPOSER
+//  COMPOSER (OAuth-gated; no handle field)
 // ─────────────────────────────────────────────────────────────
 let postingMessage = false;
-function composerHandle() { return humanHandleInput.value.trim().replace(/^@+/, ''); }
-function setComposerStatus(text = '', isError = false) {
-  composerStatus.textContent = text;
+let me = { logged_in: false };  // populated by /api/me on init
+
+function setComposerStatus(html = '', isError = false) {
+  composerStatus.innerHTML = html;
   composerStatus.classList.toggle('error', isError);
 }
+
 function syncComposerState() {
-  const handle = composerHandle();
   const body = humanMessageInput.value.trim();
-  const ok = HANDLE_RE.test(handle);
-  sendBtn.disabled = postingMessage || !ok || !body;
+  if (!me.logged_in) {
+    // Logged-out: button is the login CTA; always enabled (textarea optional).
+    sendBtn.disabled = false;
+    sendBtn.classList.add('login');
+    sendBtn.textContent = 'Log in to post a message';
+    humanMessageInput.disabled = true;
+    setComposerStatus('Sign in with Hugging Face — only members of <strong>ml-intern-explorers</strong> can post.');
+    return;
+  }
+  sendBtn.classList.remove('login');
+  sendBtn.textContent = 'Send';
+  humanMessageInput.disabled = false;
+  sendBtn.disabled = postingMessage || !body;
+  if (!postingMessage) {
+    setComposerStatus(
+      `<span class="me">posting as <strong>@${escapeHtml(me.user)}</strong></span>` +
+      `<a class="logout-link" href="/logout">log out</a>`
+    );
+  }
 }
-humanHandleInput.value = (() => { try { return localStorage.getItem(HANDLE_KEY) || ''; } catch { return ''; } })();
-syncComposerState();
-humanHandleInput.addEventListener('input', syncComposerState);
-humanHandleInput.addEventListener('blur', () => { humanHandleInput.value = composerHandle(); syncComposerState(); });
+
+async function refreshMe() {
+  try {
+    const r = await fetch('/api/me', { credentials: 'same-origin' });
+    if (r.ok) me = await r.json();
+  } catch {}
+  syncComposerState();
+}
+
 humanMessageInput.addEventListener('input', syncComposerState);
 clearQuoteBtn.addEventListener('click', clearPendingQuote);
 
 messageComposer.addEventListener('submit', async e => {
   e.preventDefault();
-  const handle = composerHandle();
+  if (!me.logged_in) {
+    // Treat the button as a login CTA when logged out.
+    window.location.href = '/login';
+    return;
+  }
   const body = humanMessageInput.value.trim();
-  if (!HANDLE_RE.test(handle) || !body || postingMessage) { syncComposerState(); return; }
+  if (!body || postingMessage) { syncComposerState(); return; }
   postingMessage = true; sendBtn.disabled = true;
   setComposerStatus('Sending…');
   try {
-    const msg = await postUserMessage(handle, body, pendingRefFilename);
-    humanHandleInput.value = handle;
+    const msg = await postUserMessage(body, pendingRefFilename);
     humanMessageInput.value = '';
     clearPendingQuote();
-    try { localStorage.setItem(HANDLE_KEY, handle); } catch {}
     messagesEl.querySelectorAll('.state').forEach(el => el.remove());
-    ingestMessage(msg);
+    ingestMessage(msg, /* prepend */ true);
     initialLoaded = true;
-    scrollMessagesBottom();
+    scrollMessagesTop();
     writeCache(messages, leaderboardEntries);
     setLiveStatus(true);
-    setComposerStatus('Sent');
-    setTimeout(() => { if (composerStatus.textContent === 'Sent') setComposerStatus(''); }, 1800);
   } catch (err) {
-    setComposerStatus(err.message || 'Message failed.', true);
+    if (err.status === 401) {
+      // Session expired — bounce to /login.
+      me = { logged_in: false };
+      syncComposerState();
+      setComposerStatus('Session expired. Please sign in again.', true);
+    } else {
+      setComposerStatus(escapeHtml(err.message || 'Message failed.'), true);
+    }
   } finally {
     postingMessage = false;
     syncComposerState();
@@ -1740,8 +1795,8 @@ async function initialLoad() {
       if (painted) {
         const additions = fresh.filter(m => !knownFilenames.has(m.filename));
         additions.forEach(m => messageMap.set(m.filename, m));
-        additions.forEach(m => ingestMessage(m));
-        if (additions.length) scrollMessagesBottom();
+        additions.sort((a, b) => a.epoch - b.epoch).forEach(m => ingestMessage(m, /* prepend */ true));
+        if (additions.length) scrollMessagesTop();
       } else {
         messagesEl.innerHTML = '';
         initialLoaded = true;
@@ -1779,6 +1834,9 @@ async function pollLoop() {
   }
 }
 
+// Resolve login state in parallel with the first data load — both are fast,
+// and we want the composer button to settle into its real state ASAP.
+refreshMe();
 initialLoad().then(() => { if (initialLoaded) pollLoop(); });
 </script>
 </body>