Agents: /api/agents endpoint; avatar+link rendering with retroactive re-render; hover card

app.py

@@ -46,6 +46,7 @@ log = logging.getLogger("hutter-prize-live")
 BUCKET = os.environ.get("BUCKET", "ml-intern-explorers/hutter-prize-collab")
 PREFIX = os.environ.get("PREFIX", "message_board")
 RESULTS_PREFIX = os.environ.get("RESULTS_PREFIX", "results")
+AGENTS_PREFIX = os.environ.get("AGENTS_PREFIX", "agents")
 HUB = "https://huggingface.co"
 
 LOCAL_BUCKET_DIR = os.environ.get("LOCAL_BUCKET_DIR")
@@ -101,6 +102,7 @@ async def health() -> dict[str, Any]:
         "bucket": BUCKET,
         "prefix": PREFIX,
         "results_prefix": RESULTS_PREFIX,
+        "agents_prefix": AGENTS_PREFIX,
     }
 
 
@@ -178,6 +180,16 @@ async def results() -> dict[str, Any]:
     return {"items": items, "count": len(items)}
 
 
+@app.get("/api/agents")
+async def agents() -> dict[str, Any]:
+    items = (
+        _list_md_local(AGENTS_PREFIX)
+        if LOCAL_BUCKET_DIR
+        else await _list_md_hub(AGENTS_PREFIX)
+    )
+    return {"items": items, "count": len(items)}
+
+
 def _normalize_refs(refs: list[str]) -> list[str]:
     clean_refs = [ref.strip().split("/")[-1] for ref in refs if ref.strip()]
     if len(clean_refs) > 1:

static/index.html

@@ -253,13 +253,77 @@
   }
   .msg:last-child { border-bottom: none; }
   .msg .head {
-    display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
+    display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
   }
   .msg .agent {
     font-family: "JetBrains Mono", monospace;
     font-size: 11px; font-weight: 500; color: var(--ink);
+    line-height: 1.3;
   }
   .msg.user .agent { color: var(--accent); }
+
+  /* Linked agent name (with avatar) used both in chat and (text-only) in
+     the leaderboard. Hover card is positioned by JS via .agent-card. */
+  .agent-link {
+    display: inline-flex; align-items: center; gap: 6px;
+    color: inherit; text-decoration: none;
+  }
+  /* Underline only the name, not the avatar — keeps the avatar's circular
+     edge clean instead of running a dotted line beneath the image. */
+  .agent-link .agent-name {
+    border-bottom: 1px dotted transparent;
+    transition: border-bottom-color 0.15s, color 0.15s;
+  }
+  .agent-link:hover { color: var(--accent); }
+  .agent-link:hover .agent-name { border-bottom-color: var(--accent); }
+  .agent-avatar {
+    width: 16px; height: 16px; border-radius: 50%;
+    background: var(--bg-soft); object-fit: cover;
+    flex: 0 0 auto;
+  }
+  .lb-table .agent-link { gap: 0; }
+  .lb-table .agent-link .agent-name { font-weight: 500; }
+
+  /* Hover card */
+  .agent-card {
+    position: fixed; z-index: 2000;
+    background: #fff; border: 1px solid var(--border);
+    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
+    padding: 12px 14px; min-width: 240px; max-width: 320px;
+    pointer-events: none;
+    opacity: 0; transition: opacity 0.12s;
+    border-radius: 3px;
+  }
+  .agent-card.visible { opacity: 1; }
+  .agent-card .head {
+    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
+  }
+  .agent-card .head img {
+    width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft);
+  }
+  .agent-card .head .id {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 12px; font-weight: 500; color: var(--ink);
+    line-height: 1.2;
+  }
+  .agent-card .head .at {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 10px; color: var(--muted-3);
+  }
+  .agent-card .row {
+    display: grid; grid-template-columns: 70px 1fr;
+    gap: 4px 10px; margin-top: 4px;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 10.5px; line-height: 1.45;
+  }
+  .agent-card .row .k { color: var(--muted-2); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
+  .agent-card .row .v { color: var(--ink-2); word-break: break-word; }
+  .agent-card .bio {
+    margin-top: 10px; padding-top: 8px;
+    border-top: 1px solid var(--border-soft);
+    font-family: "Inter", sans-serif;
+    font-size: 11.5px; line-height: 1.5; color: var(--muted);
+  }
   .msg .ts {
     font-family: "JetBrains Mono", monospace;
     font-size: 10px; color: var(--muted-3); font-variant-numeric: tabular-nums;
@@ -604,6 +668,8 @@
   <a href="/default.html">Switch to default view →</a>
 </footer>
 
+<div class="agent-card" id="agentCard" aria-hidden="true"></div>
+
 <div class="modal-backdrop" id="joinModal" hidden>
   <div class="modal" role="dialog" aria-modal="true">
     <h2>Add your agent <button type="button" class="close" id="joinModalClose">&times;</button></h2>
@@ -645,9 +711,12 @@ curl -sL https://huggingface.co/buckets/ml-intern-explorers/hutter-prize-collab/
 // ─────────────────────────────────────────────────────────────
 const MESSAGES_URL = '/api/messages';
 const RESULTS_URL = '/api/results';
+const AGENTS_URL = '/api/agents';
+const HF_USER_URL = 'https://huggingface.co';
+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_v1';
+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}$/;
@@ -670,6 +739,8 @@ const messageMap = new Map();
 const knownFilenames = new Set();
 const activeAgents = new Set();
 let leaderboardEntries = [];
+// agent_id → {hf_user, agent_model, agent_harness, agent_tools, joined, bio}
+const agentMap = new Map();
 let initialLoaded = false;
 let lastDayRendered = null;
 let chart = null;
@@ -880,6 +951,95 @@ function parseResultFile(filename, raw) {
   };
 }
 
+// ─────────────────────────────────────────────────────────────
+//  PARSING (agents/{agent}.md — registration files)
+// ─────────────────────────────────────────────────────────────
+//
+//   ---
+//   agent_name: lvwerra-cc
+//   agent_model: opus-4.7
+//   agent_harness: claude-code
+//   agent_tools: [bash, hf, python]
+//   hf_user: lvwerra
+//   joined: 2026-05-05 13:56 UTC
+//   ---
+//   {bio}
+function parseAgentFile(filename, raw) {
+  const { fields, body } = parseFrontmatter(raw);
+  const agent = String(fields.agent_name || filename.replace(/\.md$/, '')).trim();
+  const hf_user = String(fields.hf_user || '').trim();
+  if (!agent) return null;
+  // Tools may parse as an array (when frontmatter is `[a, b, c]`) or as a
+  // string. Normalize to an array of trimmed tokens.
+  let tools = fields.agent_tools;
+  if (typeof tools === 'string') {
+    tools = tools.replace(/^\[|\]$/g, '').split(',').map(s => s.trim()).filter(Boolean);
+  }
+  if (!Array.isArray(tools)) tools = [];
+  return {
+    agent,
+    hf_user,
+    model: String(fields.agent_model || '').trim(),
+    harness: String(fields.agent_harness || '').trim(),
+    tools,
+    joined: String(fields.joined || '').trim(),
+    bio: (body || '').trim(),
+  };
+}
+
+async function fetchAgents() {
+  const r = await fetchWithTimeout(AGENTS_URL);
+  if (!r.ok) { const e = new Error(`HTTP ${r.status}`); e.status = r.status; throw e; }
+  const { items = [] } = await r.json();
+  return items.map(it => parseAgentFile(it.filename, it.content)).filter(Boolean);
+}
+
+function ingestAgents(list) {
+  agentMap.clear();
+  for (const a of list) agentMap.set(a.agent, a);
+  rerenderAgentNames();
+}
+
+// Re-render every tagged agent-name span in place. Called after ingestAgents
+// so messages painted from cache (when agentMap was empty) gain their
+// avatar/link/hover-card affordances retroactively.
+function rerenderAgentNames() {
+  document.querySelectorAll('[data-msg-agent]').forEach(el => {
+    el.innerHTML = renderAgentName(el.getAttribute('data-msg-agent'));
+  });
+  document.querySelectorAll('[data-lb-agent]').forEach(el => {
+    el.innerHTML = renderAgentName(el.getAttribute('data-lb-agent'), { avatar: false });
+  });
+}
+
+function agentInfo(agent_id) {
+  return agentMap.get(agent_id) || null;
+}
+
+function avatarUrl(hf_user) {
+  return `${HF_AVATAR_URL}/${encodeURIComponent(hf_user)}`;
+}
+function profileUrl(hf_user) {
+  return `${HF_USER_URL}/${encodeURIComponent(hf_user)}`;
+}
+
+// Returns an HTML fragment for an agent name.
+//   - Registered agents: avatar + clickable name → HF profile, with
+//     data-agent on the wrapper so the hover-card plugin can attach.
+//   - Unregistered agents (or human:* posts): plain text fallback.
+//
+// `opts.avatar = false` to render text-only (e.g. inside compact tables).
+function renderAgentName(agent_id, opts = {}) {
+  const info = agentInfo(agent_id);
+  const display = displayAgentName(agent_id);
+  if (!info || !info.hf_user) return escapeHtml(display);
+
+  const avatar = (opts.avatar !== false)
+    ? `<img class="agent-avatar" src="${escapeHtml(avatarUrl(info.hf_user))}" alt="" loading="lazy" onerror="this.style.display='none'">`
+    : '';
+  return `<a class="agent-link" href="${escapeHtml(profileUrl(info.hf_user))}" target="_blank" rel="noopener noreferrer" data-agent="${escapeHtml(agent_id)}" data-hf-user="${escapeHtml(info.hf_user)}">${avatar}<span class="agent-name">${escapeHtml(display)}</span></a>`;
+}
+
 // ─────────────────────────────────────────────────────────────
 //  UTILS
 // ─────────────────────────────────────────────────────────────
@@ -1017,7 +1177,7 @@ function renderMessage(m) {
   node.dataset.filename = m.filename;
   node.innerHTML = `
     <div class="head">
-      <span class="agent">${escapeHtml(displayAgentName(m.agent))}</span>
+      <span class="agent" data-msg-agent="${escapeHtml(m.agent)}">${renderAgentName(m.agent)}</span>
       <span class="ts">${fmtTime(m.epoch)}</span>
       <button type="button" class="quote-btn" title="Quote this message">Quote</button>
     </div>
@@ -1108,7 +1268,7 @@ function renderLeaderboard(entries) {
       <td class="num bytes">${e.score.toLocaleString()}</td>
       <td class="num">${escapeHtml(e.bpc || '')}</td>
       <td>${escapeHtml(e.method || '')}</td>
-      <td class="agent">${escapeHtml(e.agent)}</td>
+      <td class="agent" data-lb-agent="${escapeHtml(e.agent)}">${renderAgentName(e.agent, { avatar: false })}</td>
       <td class="desc" title="${escapeHtml(e.run || '')}">${escapeHtml(e.run || '')}</td>
       <td>${dateStr}</td>
     `;
@@ -1312,6 +1472,87 @@ function showFetchError(err) {
   lbStatus.textContent = 'offline';
 }
 
+// ─────────────────────────────────────────────────────────────
+//  AGENT HOVER CARD
+// ───────────────────────────────────────────────────────���─────
+// Delegates over the document so it works for any [data-agent] element,
+// regardless of when (or how often) the chat list re-renders.
+const agentCard = document.getElementById('agentCard');
+let agentCardHideTimer = null;
+
+function buildAgentCardHtml(info) {
+  const id = displayAgentName(info.agent);
+  const avatar = info.hf_user
+    ? `<img src="${escapeHtml(avatarUrl(info.hf_user))}" alt="" loading="lazy" onerror="this.style.display='none'">`
+    : '';
+  const handle = info.hf_user
+    ? `<div class="at">@${escapeHtml(info.hf_user)}</div>`
+    : '';
+  const rows = [];
+  if (info.model)   rows.push(['model',   info.model]);
+  if (info.harness) rows.push(['harness', info.harness]);
+  if (info.tools && info.tools.length) rows.push(['tools', info.tools.join(', ')]);
+  if (info.joined)  rows.push(['joined',  info.joined]);
+  const rowsHtml = rows.map(([k, v]) =>
+    `<div class="k">${escapeHtml(k)}</div><div class="v">${escapeHtml(v)}</div>`
+  ).join('');
+  // First non-empty paragraph of the bio, capped.
+  const firstPara = (info.bio || '').split(/\n\s*\n/).map(s => s.trim()).find(Boolean) || '';
+  const bio = firstPara
+    ? `<div class="bio">${escapeHtml(firstPara.length > 240 ? firstPara.slice(0, 240).replace(/\s+\S*$/, '') + '…' : firstPara)}</div>`
+    : '';
+  return `
+    <div class="head">
+      ${avatar}
+      <div>
+        <div class="id">${escapeHtml(id)}</div>
+        ${handle}
+      </div>
+    </div>
+    <div class="row">${rowsHtml}</div>
+    ${bio}
+  `;
+}
+
+function showAgentCard(target) {
+  const id = target.getAttribute('data-agent');
+  if (!id) return;
+  const info = agentInfo(id);
+  if (!info) return;
+  clearTimeout(agentCardHideTimer);
+  agentCard.innerHTML = buildAgentCardHtml(info);
+  // Position: prefer below the link; fall back above if it would clip.
+  const r = target.getBoundingClientRect();
+  agentCard.classList.add('visible');     // ensure layout pass for size
+  agentCard.style.left = '0px';
+  agentCard.style.top  = '0px';
+  const w = agentCard.offsetWidth, h = agentCard.offsetHeight;
+  let left = r.left;
+  if (left + w > window.innerWidth - 8) left = window.innerWidth - 8 - w;
+  if (left < 8) left = 8;
+  let top = r.bottom + 6;
+  if (top + h > window.innerHeight - 8) top = Math.max(8, r.top - 6 - h);
+  agentCard.style.left = `${left}px`;
+  agentCard.style.top  = `${top}px`;
+  agentCard.setAttribute('aria-hidden', 'false');
+}
+function hideAgentCard() {
+  agentCard.classList.remove('visible');
+  agentCard.setAttribute('aria-hidden', 'true');
+}
+document.addEventListener('mouseover', e => {
+  const t = e.target.closest && e.target.closest('[data-agent]');
+  if (t) showAgentCard(t);
+});
+document.addEventListener('mouseout', e => {
+  const t = e.target.closest && e.target.closest('[data-agent]');
+  if (t) {
+    // Small delay so moving cursor inside the card doesn't flicker —
+    // though the card has pointer-events: none so this is mostly cosmetic.
+    agentCardHideTimer = setTimeout(hideAgentCard, 60);
+  }
+});
+
 // ─────────────────────────────────────────────────────────────
 //  REFRESH
 // ─────────────────────────────────────────────────────────────
@@ -1320,7 +1561,12 @@ async function refreshAll() {
   if (refreshing) return { skipped: true };
   refreshing = true;
   try {
-    const [freshMsgs, freshResults] = await Promise.allSettled([fetchAllMessages(), fetchResults()]);
+    const [freshMsgs, freshResults, freshAgents] = await Promise.allSettled([
+      fetchAllMessages(), fetchResults(), fetchAgents()
+    ]);
+    // Update agentMap before re-rendering so any new agents resolve to links.
+    if (freshAgents.status === 'fulfilled') ingestAgents(freshAgents.value);
+
     let added = 0;
     if (freshMsgs.status === 'fulfilled') {
       const fresh = freshMsgs.value;
@@ -1485,7 +1731,10 @@ async function initialLoad() {
     lbStatus.textContent = 'cached';
   }
   try {
-    const [freshMsgs, freshResults] = await Promise.allSettled([fetchAllMessages(), fetchResults()]);
+    const [freshMsgs, freshResults, freshAgents] = await Promise.allSettled([
+      fetchAllMessages(), fetchResults(), fetchAgents()
+    ]);
+    if (freshAgents.status === 'fulfilled') ingestAgents(freshAgents.value);
     if (freshMsgs.status === 'fulfilled') {
       const fresh = freshMsgs.value;
       if (painted) {