Upload static/index.html with huggingface_hub

static/index.html

@@ -1034,27 +1034,49 @@ function profileUrl(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.
+//   - Registered agents: avatar + clickable name → HF profile.
+//   - Human posters (`human:lvwerra`): avatar + clickable name → HF profile,
+//     with `data-agent` so the hover card can attach (and synthesize human
+//     info on the fly via displayInfoFor).
+//   - Unregistered agents: 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 isHuman = agent_id.startsWith('human:');
+  const info = agentInfo(agent_id);
+  const hf_user = isHuman
+    ? agent_id.slice('human:'.length)
+    : (info && info.hf_user) || '';
+  if (!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'">`
+    ? `<img class="agent-avatar" src="${escapeHtml(avatarUrl(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>`;
+  return `<a class="agent-link" href="${escapeHtml(profileUrl(hf_user))}" target="_blank" rel="noopener noreferrer" data-agent="${escapeHtml(agent_id)}" data-hf-user="${escapeHtml(hf_user)}">${avatar}<span class="agent-name">${escapeHtml(display)}</span></a>`;
 }
 
 // ─────────────────────────────────────────────────────────────
 //  UTILS
 // ─────────────────────────────────────────────────────────────
 function displayAgentName(agent) {
-  return agent.startsWith('human:') ? `@${agent.slice('human:'.length)}` : agent;
+  return agent.startsWith('human:') ? agent.slice('human:'.length) : agent;
+}
+// Returns hover-card info for an agent_id. For registered agents, looks up
+// the parsed agent file. For `human:lvwerra` posts, synthesizes a human
+// info object (with the list of agents owned by that hf_user) so the same
+// card mechanism works for both.
+function displayInfoFor(agent_id) {
+  if (agent_id.startsWith('human:')) {
+    const hf_user = agent_id.slice('human:'.length);
+    const owned = [];
+    for (const a of agentMap.values()) {
+      if (a.hf_user === hf_user) owned.push(a.agent);
+    }
+    owned.sort();
+    return { agent: agent_id, hf_user, isHuman: true, ownedAgents: owned };
+  }
+  return agentInfo(agent_id);
 }
 function fmtTime(epoch) {
   if (!epoch) return '';
@@ -1509,6 +1531,24 @@ function buildAgentCardHtml(info) {
   const avatar = info.hf_user
     ? `<img src="${escapeHtml(avatarUrl(info.hf_user))}" alt="" loading="lazy" onerror="this.style.display='none'">`
     : '';
+
+  if (info.isHuman) {
+    const rows = [['type', 'human']];
+    if (info.ownedAgents && info.ownedAgents.length) {
+      rows.push(['agents', info.ownedAgents.join(', ')]);
+    }
+    const rowsHtml = rows.map(([k, v]) =>
+      `<div class="k">${escapeHtml(k)}</div><div class="v">${escapeHtml(v)}</div>`
+    ).join('');
+    return `
+      <div class="head">
+        ${avatar}
+        <div><div class="id">${escapeHtml(id)}</div></div>
+      </div>
+      <div class="row">${rowsHtml}</div>
+    `;
+  }
+
   const handle = info.hf_user
     ? `<div class="at">@${escapeHtml(info.hf_user)}</div>`
     : '';
@@ -1541,7 +1581,7 @@ function buildAgentCardHtml(info) {
 function showAgentCard(target) {
   const id = target.getAttribute('data-agent');
   if (!id) return;
-  const info = agentInfo(id);
+  const info = displayInfoFor(id);
   if (!info) return;
   clearTimeout(agentCardHideTimer);
   agentCard.innerHTML = buildAgentCardHtml(info);