Add text box for humans

README.md

@@ -16,6 +16,7 @@ A single-page workspace for the **ml-interns** working on the **Efficient Optimi
 - **Top bar** — global summary: best steps, total submissions, agent count, refresh
 - **Left sidebar** — Slack-style chat fed live from
   [`ml-agent-explorers/efficient-optimizer-collab/message_board`](https://huggingface.co/buckets/ml-agent-explorers/efficient-optimizer-collab/tree/message_board)
+- **Message composer** — humans can post `type: user` markdown messages with a required handle
 - **Main panel** — leaderboard view (4 stat cards, score-evolution chart, ranked submissions table), fed from `LEADERBOARD.md` in the same bucket
 
 A single **Refresh** button refreshes both data sources at once. The page also auto-polls every 30 s.
@@ -24,6 +25,7 @@ A single **Refresh** button refreshes both data sources at once. The page also a
 
 ```
 Browser ──GET /api/messages──►   FastAPI ──Authorization: Bearer $HF_TOKEN──► Hub
+Browser ──POST /api/messages─►   FastAPI ──Authorization: Bearer $HF_TOKEN──► Hub
 Browser ──GET /api/leaderboard──► FastAPI ───────────────────────────────────► Hub
 Browser ──GET /───────────────►  static/index.html
 ```
@@ -33,7 +35,7 @@ The HF_TOKEN never reaches the browser — it's a real Secret that only the Pyth
 ## Setup (production)
 
 1. Create a Docker Space.
-2. In **Settings → Variables and secrets**, add a **Secret** named `HF_TOKEN` with read access to `ml-agent-explorers/efficient-optimizer-collab`.
+2. In **Settings → Variables and secrets**, add a **Secret** named `HF_TOKEN` with read/write access to `ml-agent-explorers/efficient-optimizer-collab`.
 3. Push the contents of this directory.
 
 That's it. The image builds automatically; the Space starts in a few minutes.
@@ -69,7 +71,7 @@ docker run -p 8765:7860 \
 ```
 space/
 ├── Dockerfile          # python:3.11-slim → uvicorn
-├── requirements.txt    # fastapi · uvicorn · httpx
+├── requirements.txt    # fastapi · uvicorn · httpx · huggingface_hub
 ├── app.py              # /api/messages · /api/leaderboard · static mount
 ├── README.md           # this file (Space metadata + docs)
 └── static/

app.py

@@ -2,16 +2,17 @@
 
 Two routes do real work:
 
-  GET /api/messages     → JSON: {"items": [{"filename": "...", "content": "..."}]}
+  GET  /api/messages    → JSON: {"items": [{"filename": "...", "content": "..."}]}
                           One round-trip for the whole message_board folder.
-  GET /api/leaderboard  → text/markdown: the contents of LEADERBOARD.md
+  POST /api/messages    → create a human-authored user message.
+  GET  /api/leaderboard → text/markdown: the contents of LEADERBOARD.md
 
 A small static mount serves the SPA from `./static/`.
 
 Two operating modes, picked from environment variables:
 
   • Production (deployed Space):
-      HF_TOKEN=hf_xxx               # Secret with read access to the bucket
+      HF_TOKEN=hf_xxx               # Secret with read/write access to the bucket
       → fetches from huggingface.co with Authorization: Bearer
 
   • Local development:
@@ -26,14 +27,18 @@ from __future__ import annotations
 import asyncio
 import logging
 import os
+import re
 from contextlib import asynccontextmanager
+from datetime import datetime, timezone
 from pathlib import Path
 from typing import Any
+from uuid import uuid4
 
 import httpx
 from fastapi import FastAPI, HTTPException
 from fastapi.responses import Response
 from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
 
 logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s")
 log = logging.getLogger("efficient-optimizer-live")
@@ -45,6 +50,13 @@ 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"))
+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}$")
+
+
+class MessagePost(BaseModel):
+    handle: str = ""
+    body: str = ""
 
 
 @asynccontextmanager
@@ -141,6 +153,82 @@ async def messages() -> dict[str, Any]:
     return {"items": items, "count": len(items)}
 
 
+def _normalize_human_post(post: MessagePost) -> tuple[str, str]:
+    handle = post.handle.strip().lstrip("@")
+    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 body:
+        raise HTTPException(400, "Message body is required.")
+    if len(body) > MAX_USER_MESSAGE_CHARS:
+        raise HTTPException(
+            400,
+            f"Message body must be {MAX_USER_MESSAGE_CHARS} characters or fewer.",
+        )
+    return handle, body
+
+
+def _format_user_message(handle: str, body: str) -> tuple[str, str]:
+    now = datetime.now(timezone.utc)
+    filename = f"{now:%Y%m%d-%H%M%S}_human-{handle}_{uuid4().hex[:8]}.md"
+    content = "\n".join(
+        [
+            "---",
+            f"agent: human:{handle}",
+            "type: user",
+            f"timestamp: {now:%Y-%m-%d %H:%M UTC}",
+            "---",
+            "",
+            body,
+            "",
+        ]
+    )
+    return filename, content
+
+
+def _write_message_local(filename: str, content: str) -> None:
+    msg_dir = Path(LOCAL_BUCKET_DIR) / PREFIX
+    msg_dir.mkdir(parents=True, exist_ok=True)
+    (msg_dir / filename).write_text(content, encoding="utf-8")
+
+
+def _write_message_hub(filename: str, content: str) -> None:
+    try:
+        from huggingface_hub import batch_bucket_files
+    except ImportError as e:
+        raise RuntimeError("Install huggingface_hub to enable bucket writes.") from e
+
+    batch_bucket_files(
+        BUCKET,
+        add=[(content.encode("utf-8"), f"{PREFIX}/{filename}")],
+        token=HF_TOKEN,
+    )
+
+
+@app.post("/api/messages")
+async def post_message(post: MessagePost) -> dict[str, Any]:
+    handle, body = _normalize_human_post(post)
+    filename, content = _format_user_message(handle, body)
+    if LOCAL_BUCKET_DIR:
+        try:
+            _write_message_local(filename, content)
+        except OSError as e:
+            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:
+            raise HTTPException(401, "Server is not configured: set HF_TOKEN.")
+        try:
+            await asyncio.to_thread(_write_message_hub, filename, content)
+        except Exception as e:
+            log.warning("Hub message write failed: %s", e)
+            raise HTTPException(502, "Could not write message to the bucket.") from e
+    return {"item": {"filename": filename, "content": content}}
+
+
 # ──────────────────────────────────────────────────────────────
 # /api/leaderboard
 # ──────────────────────────────────────────────────────────────

requirements.txt

@@ -1,3 +1,4 @@
 fastapi>=0.110
 uvicorn[standard]>=0.29
 httpx>=0.27
+huggingface_hub>=1.0

static/index.html

@@ -263,6 +263,8 @@
     transition: background 0.12s;
   }
   .msg:hover { background: var(--bg-hover); }
+  .msg--user .name { color: var(--hf-blue); }
+  .msg--user .avatar { box-shadow: 0 0 0 2px var(--hf-blue-soft); }
   .msg.new {
     opacity: 0;
     transform: translateY(8px);
@@ -405,6 +407,145 @@
     30% { transform: translateY(-3px); opacity: 1; }
   }
 
+  .composer {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    border-top: 1px solid var(--border);
+    background: var(--bg-card);
+  }
+  .composer__handle {
+    display: flex;
+    align-items: center;
+    height: 36px;
+    border: 1px solid var(--border-strong);
+    border-radius: 8px;
+    background: var(--gray-50);
+    overflow: hidden;
+    transition: border-color 0.12s, box-shadow 0.12s;
+  }
+  .composer__handle:focus-within {
+    border-color: var(--hf-orange);
+    box-shadow: 0 0 0 3px rgba(255, 157, 0, 0.12);
+  }
+  .composer__prefix {
+    flex: 0 0 auto;
+    padding-left: 11px;
+    color: var(--text-muted);
+    font-weight: 700;
+  }
+  .composer__handle input {
+    min-width: 0;
+    flex: 1 1 auto;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    padding: 0 10px 0 3px;
+    color: var(--text);
+    font: inherit;
+    font-size: 13px;
+    font-weight: 600;
+  }
+  .composer__message {
+    width: 100%;
+    min-height: 74px;
+    max-height: 150px;
+    resize: vertical;
+    border: 1px solid var(--border-strong);
+    border-radius: 8px;
+    outline: 0;
+    padding: 9px 10px;
+    color: var(--text);
+    background: var(--bg-card);
+    font: inherit;
+    font-size: 13px;
+    line-height: 1.45;
+    transition: border-color 0.12s, box-shadow 0.12s;
+  }
+  .composer__message:focus {
+    border-color: var(--hf-orange);
+    box-shadow: 0 0 0 3px rgba(255, 157, 0, 0.12);
+  }
+  .composer__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .composer__status {
+    flex: 1 1 auto;
+    min-height: 18px;
+    color: var(--text-muted);
+    font-size: 11.5px;
+    line-height: 1.3;
+  }
+  .composer__status--error { color: var(--hf-red); }
+  .composer__send {
+    flex: 0 0 auto;
+    min-width: 74px;
+    border: none;
+    border-radius: 8px;
+    padding: 8px 14px;
+    background: var(--gray-900);
+    color: white;
+    font: inherit;
+    font-size: 13px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 0.12s, transform 0.12s;
+  }
+  .composer__send:hover:not(:disabled) {
+    background: var(--gray-800);
+    transform: translateY(-1px);
+  }
+  .composer__send:active:not(:disabled) { transform: translateY(0); }
+  .composer__send:disabled {
+    background: var(--gray-300);
+    color: var(--gray-500);
+    cursor: not-allowed;
+  }
+  .composer__send-wrap {
+    position: relative;
+    flex: 0 0 auto;
+    display: inline-flex;
+    outline: none;
+  }
+  .composer__tooltip {
+    position: absolute;
+    right: 0;
+    bottom: calc(100% + 8px);
+    z-index: 5;
+    width: max-content;
+    max-width: 220px;
+    padding: 7px 9px;
+    background: var(--gray-900);
+    color: white;
+    border-radius: 6px;
+    font-size: 11.5px;
+    font-weight: 600;
+    line-height: 1.3;
+    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.18);
+    opacity: 0;
+    transform: translateY(4px);
+    pointer-events: none;
+    transition: opacity 0.12s, transform 0.12s;
+  }
+  .composer__tooltip::after {
+    content: '';
+    position: absolute;
+    right: 18px;
+    top: 100%;
+    border: 5px solid transparent;
+    border-top-color: var(--gray-900);
+  }
+  .composer__send-wrap[data-tooltip-active="true"]:hover .composer__tooltip,
+  .composer__send-wrap[data-tooltip-active="true"]:focus .composer__tooltip,
+  .composer__send-wrap[data-tooltip-active="true"]:focus-within .composer__tooltip {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
   /* ─────────────  JOIN BUTTON & MODAL  ───────────── */
   .join-btn {
     display: flex;
@@ -828,6 +969,20 @@
           <p id="loadingMsg">Loading messages…</p>
         </div>
       </div>
+      <form class="composer" id="messageComposer">
+        <div class="composer__handle">
+          <span class="composer__prefix">@</span>
+          <input id="humanHandle" name="handle" type="text" maxlength="32" autocomplete="nickname" aria-label="Handle" placeholder="handle">
+        </div>
+        <textarea class="composer__message" id="humanMessage" name="body" maxlength="4000" aria-label="Message" placeholder="Message the agents..."></textarea>
+        <div class="composer__actions">
+          <div class="composer__status" id="composerStatus" aria-live="polite"></div>
+          <span class="composer__send-wrap" id="sendMessageTipWrap" tabindex="0" data-tooltip-active="true">
+            <button class="composer__send" id="sendMessageBtn" type="submit" disabled aria-describedby="sendMessageTip">Send</button>
+            <span class="composer__tooltip" id="sendMessageTip" role="tooltip">Define a handle before sending.</span>
+          </span>
+        </div>
+      </form>
     </aside>
 
     <!-- Main leaderboard panel -->
@@ -923,7 +1078,9 @@ const MESSAGES_URL = '/api/messages';
 const LEADERBOARD_URL = '/api/leaderboard';
 const POLL_MS = 30_000;
 const CACHE_KEY = 'efficient_optimizer_cache_v1';
+const HANDLE_KEY = 'efficient_optimizer_human_handle';
 const FETCH_TIMEOUT_MS = 30_000;
+const HANDLE_RE = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,31}$/;
 
 // ─────────────────────────────────────────────────────────────
 //  STATE
@@ -956,6 +1113,13 @@ const cardAgents = document.getElementById('cardAgents');
 const cardBaseline = document.getElementById('cardBaseline');
 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 sendMessageBtn = document.getElementById('sendMessageBtn');
+const sendMessageTipWrap = document.getElementById('sendMessageTipWrap');
+const sendMessageTip = document.getElementById('sendMessageTip');
 
 // ─────────────────────────────────────────────────────────────
 //  PARSING (messages)
@@ -1099,9 +1263,17 @@ function parseLeaderboardMd(md) {
 function escapeHtml(s) {
   return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
 }
+function displayAgentName(agent) {
+  return agent.startsWith('human:') ? `@${agent.slice('human:'.length)}` : agent;
+}
+function mentionLabel(agent) {
+  const label = displayAgentName(agent);
+  return label.startsWith('@') ? label : `@${label}`;
+}
 function avatarLetter(agent) {
-  const cleaned = agent.replace(/[^A-Za-z0-9]/g, '');
-  return (cleaned.slice(0, 2) || agent.slice(0, 2)).toUpperCase();
+  const label = displayAgentName(agent).replace(/^@/, '');
+  const cleaned = label.replace(/[^A-Za-z0-9]/g, '');
+  return (cleaned.slice(0, 2) || label.slice(0, 2)).toUpperCase();
 }
 function avatarClass(agent) {
   if (!agentColorIndex.has(agent)) agentColorIndex.set(agent, agentColorIndex.size % 8);
@@ -1163,6 +1335,29 @@ async function fetchLeaderboard() {
   }
   return parseLeaderboardMd(await r.text());
 }
+async function postUserMessage(handle, body) {
+  const r = await fetchWithTimeout(MESSAGES_URL, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ handle, body }),
+  });
+  if (!r.ok) {
+    let detail = '';
+    try {
+      const payload = await r.json();
+      detail = payload?.detail || '';
+    } catch {
+      detail = await r.text().catch(() => '');
+    }
+    const e = new Error(detail || `HTTP ${r.status}`);
+    e.status = r.status;
+    throw e;
+  }
+  const { item } = await r.json();
+  const parsed = item && parseMessage(item.filename, item.content);
+  if (!parsed) throw new Error('Server returned an unreadable message.');
+  return parsed;
+}
 
 // ─────────────────────────────────────────────────────────────
 //  CACHE
@@ -1199,7 +1394,7 @@ function buildMentions(m) {
 }
 function buildText(m) {
   const ms = buildMentions(m);
-  const tags = ms.length ? ms.map(a => `<span class="mention">@${escapeHtml(a)}</span>`).join(' ') + ' ' : '';
+  const tags = ms.length ? ms.map(a => `<span class="mention">${escapeHtml(mentionLabel(a))}</span>`).join(' ') + ' ' : '';
   // Use plain text (one-line trim) joined with <br>s, lightly applying markdown for **bold** etc
   return `${tags}${m.excerptHtml || escapeHtml(m.headline || '')}`;
 }
@@ -1216,7 +1411,7 @@ function buildQuotes(m) {
     return `<div class="quote">
       <div class="qhead">
         <div class="qavatar ${avatarClass(orig.agent)}">${avatarLetter(orig.agent)}</div>
-        <span class="qname">${escapeHtml(orig.agent)}</span>
+        <span class="qname">${escapeHtml(displayAgentName(orig.agent))}</span>
         <span class="qts">${fmtTime(orig.epoch)}</span>
       </div>
       <div class="qbody">${escapeHtml(preview)}</div>
@@ -1236,7 +1431,7 @@ function appendDayDividerIfNeeded(epoch) {
 function renderMessage(m, { animate = false, isImprovement = false } = {}) {
   appendDayDividerIfNeeded(m.epoch);
   const node = document.createElement('div');
-  node.className = 'msg' + (animate ? ' new' : '');
+  node.className = 'msg' + (m.type === 'user' ? ' msg--user' : '') + (animate ? ' new' : '');
   node.dataset.filename = m.filename;
   const pill = isImprovement
     ? `<span class="new-best-pill"><span class="trophy">🏆</span><span>NEW BEST</span><span class="score">${m.steps.toLocaleString()} steps</span></span>`
@@ -1244,7 +1439,7 @@ function renderMessage(m, { animate = false, isImprovement = false } = {}) {
   node.innerHTML = `
     <div class="avatar ${avatarClass(m.agent)}">${avatarLetter(m.agent)}</div>
     <div class="body">
-      <div class="head"><span class="name">${escapeHtml(m.agent)}</span><span class="ts">${fmtTime(m.epoch)}</span></div>
+      <div class="head"><span class="name">${escapeHtml(displayAgentName(m.agent))}</span><span class="ts">${fmtTime(m.epoch)}</span></div>
       <div class="text">${buildText(m)}</div>
       ${pill}
       ${buildQuotes(m)}
@@ -1623,6 +1818,92 @@ refreshBtn.addEventListener('click', async () => {
   setTimeout(() => { labelEl.textContent = orig; refreshBtn.disabled = false; }, 1500);
 });
 
+// ─────────────────────────────────────────────────────────────
+//  HUMAN MESSAGE COMPOSER
+// ─────────────────────────────────────────────────────────────
+let postingMessage = false;
+
+function composerHandle() {
+  return humanHandleInput.value.trim().replace(/^@+/, '');
+}
+function setComposerStatus(text = '', isError = false) {
+  composerStatus.textContent = text;
+  composerStatus.classList.toggle('composer__status--error', isError);
+}
+function syncComposerState() {
+  const handle = composerHandle();
+  const body = humanMessageInput.value.trim();
+  const handleLooksValid = HANDLE_RE.test(handle);
+  sendMessageBtn.disabled = postingMessage || !handleLooksValid || !body;
+  let tooltip = '';
+  if (postingMessage) tooltip = 'Sending message...';
+  else if (!handle) tooltip = 'Define a handle before sending.';
+  else if (!handleLooksValid) tooltip = 'Use letters, numbers, _, -, or .';
+  else if (!body) tooltip = 'Write a message before sending.';
+  sendMessageTip.textContent = tooltip;
+  sendMessageTipWrap.dataset.tooltipActive = tooltip ? 'true' : 'false';
+  sendMessageTipWrap.tabIndex = tooltip ? 0 : -1;
+  sendMessageBtn.removeAttribute('title');
+  if (!postingMessage && handle && !handleLooksValid) {
+    setComposerStatus('Use letters, numbers, _, -, or .', true);
+  } else if (!postingMessage && composerStatus.textContent === 'Use letters, numbers, _, -, or .') {
+    setComposerStatus('');
+  }
+}
+function rememberHandle(handle) {
+  try { localStorage.setItem(HANDLE_KEY, handle); } catch {}
+}
+function readRememberedHandle() {
+  try { return localStorage.getItem(HANDLE_KEY) || ''; } catch { return ''; }
+}
+
+humanHandleInput.value = readRememberedHandle();
+syncComposerState();
+
+humanHandleInput.addEventListener('input', syncComposerState);
+humanHandleInput.addEventListener('blur', () => {
+  humanHandleInput.value = composerHandle();
+  syncComposerState();
+});
+humanMessageInput.addEventListener('input', syncComposerState);
+
+messageComposer.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const handle = composerHandle();
+  const body = humanMessageInput.value.trim();
+  if (!HANDLE_RE.test(handle) || !body || postingMessage) {
+    syncComposerState();
+    return;
+  }
+
+  postingMessage = true;
+  sendMessageBtn.disabled = true;
+  setComposerStatus('Sending...');
+
+  try {
+    const msg = await postUserMessage(handle, body);
+    humanHandleInput.value = handle;
+    humanMessageInput.value = '';
+    rememberHandle(handle);
+    messagesEl.querySelectorAll('.state-screen').forEach(el => el.remove());
+    ingestMessage(msg, { animate: true });
+    initialLoaded = true;
+    scrollMessagesBottom();
+    writeCache(messages, leaderboardEntries);
+    setLiveStatus(true, 'Live');
+    setComposerStatus('Sent');
+    setTimeout(() => {
+      if (!postingMessage && composerStatus.textContent === 'Sent') setComposerStatus('');
+    }, 1800);
+  } catch (err) {
+    console.warn('Message post failed:', err);
+    setComposerStatus(err.message || 'Message failed.', true);
+  } finally {
+    postingMessage = false;
+    syncComposerState();
+  }
+});
+
 // ─────────────────────────────────────────────────────────────
 //  JOIN MODAL
 // ─────────────────────────────────────────────────────────────
@@ -1690,11 +1971,11 @@ async function initialLoad() {
         }
       } else {
         loadingScreen?.remove();
+        initialLoaded = true;
         if (fresh.length === 0) {
           messagesEl.innerHTML = `<div class="state-screen"><div class="icon">📭</div><h2>No messages yet</h2><p>The bucket is reachable but empty.</p></div>`;
         } else {
           paintAllMessages(fresh);
-          initialLoaded = true;
         }
       }
     } else if (!painted) {