Upload static/index.html with huggingface_hub

static/index.html

@@ -281,12 +281,18 @@
   .agent-link:hover { color: var(--accent); }
   .agent-link:hover .agent-name { border-bottom-color: var(--accent); }
   .agent-avatar {
+    /* A <span> with background-image, NOT an <img>. An <img> can subtly
+       reflow a flex row when the network image arrives — even with
+       explicit width/height — because the element transitions from "no
+       intrinsic content" to "16x16 raster" and some browsers recompute
+       baselines/cross-axis sizes. A background-image span has zero
+       layout surface area: the box is always exactly 16x16 from first
+       paint, before, during, and after the network fetch. */
+    display: inline-block; flex: 0 0 auto;
     width: 16px; height: 16px; border-radius: 50%;
-    background: var(--bg-soft); object-fit: cover;
-    /* Explicit block + size locks the layout box before the image data
-       arrives, so loading the avatar doesn't cause a CLS shift that
-       reflows the row and visibly drops the username/timestamp. */
-    display: block; flex: 0 0 auto;
+    background-color: var(--bg-soft);
+    background-size: cover; background-position: center;
+    background-repeat: no-repeat;
   }
   .lb-table .agent-link { gap: 0; }
   .lb-table .agent-link .agent-name { font-weight: 500; }
@@ -305,8 +311,12 @@
   .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 .card-avatar {
+    display: inline-block; flex: 0 0 auto;
+    width: 32px; height: 32px; border-radius: 50%;
+    background-color: var(--bg-soft);
+    background-size: cover; background-position: center;
+    background-repeat: no-repeat;
   }
   .agent-card .head .id {
     font-family: "JetBrains Mono", monospace;
@@ -1069,7 +1079,7 @@ function renderAgentName(agent_id, opts = {}) {
   if (!hf_user) return escapeHtml(display);
 
   const avatar = (opts.avatar !== false)
-    ? `<img class="agent-avatar" src="${escapeHtml(avatarUrl(hf_user))}" width="16" height="16" alt="" onerror="this.style.visibility='hidden'">`
+    ? `<span class="agent-avatar" style="background-image:url('${escapeHtml(avatarUrl(hf_user))}')" aria-hidden="true"></span>`
     : '';
   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>`;
 }
@@ -1580,7 +1590,7 @@ let agentCardHideTimer = null;
 function buildAgentCardHtml(info) {
   const id = displayAgentName(info.agent);
   const avatar = info.hf_user
-    ? `<img src="${escapeHtml(avatarUrl(info.hf_user))}" width="32" height="32" alt="" onerror="this.style.visibility='hidden'">`
+    ? `<span class="card-avatar" style="background-image:url('${escapeHtml(avatarUrl(info.hf_user))}')" aria-hidden="true"></span>`
     : '';
 
   const lastEpoch = lastMessageEpoch(info.agent);