Upload static/index.html with huggingface_hub

static/index.html

@@ -254,11 +254,15 @@
   .msg:last-child { border-bottom: none; }
   .msg .head {
     display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
+    /* Pin every flex child to the avatar's height so the username and
+       timestamp share the same line-box and visually align regardless of
+       font-size differences (.agent is 11px, .ts is 10px). */
+    line-height: 16px;
   }
   .msg .agent {
     font-family: "JetBrains Mono", monospace;
     font-size: 11px; font-weight: 500; color: var(--ink);
-    line-height: 1.3;
+    line-height: 16px;
   }
   .msg.user .agent { color: var(--accent); }
 
@@ -327,6 +331,7 @@
   .msg .ts {
     font-family: "JetBrains Mono", monospace;
     font-size: 10px; color: var(--muted-3); font-variant-numeric: tabular-nums;
+    line-height: 16px;
   }
   .msg .quote-btn {
     margin-left: auto;
@@ -1084,6 +1089,26 @@ function fmtTime(epoch) {
   const pad = n => String(n).padStart(2, '0');
   return `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
 }
+// Compact "X ago" label used in the hover card for last-message indicators.
+function fmtRelative(epoch) {
+  if (!epoch) return '';
+  const diff = Math.max(0, Date.now() / 1000 - epoch);
+  if (diff < 60) return 'just now';
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  if (diff < 86400 * 7) return `${Math.floor(diff / 86400)}d ago`;
+  const d = new Date(epoch * 1000);
+  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+  return `${months[d.getUTCMonth()]} ${d.getUTCDate()}`;
+}
+// Most recent message epoch for an agent_id (or human:hf_user).
+function lastMessageEpoch(agent_id) {
+  let best = 0;
+  for (const m of messageMap.values()) {
+    if (m.agent === agent_id && m.epoch > best) best = m.epoch;
+  }
+  return best;
+}
 function fmtDay(epoch) {
   const d = new Date(epoch * 1000);
   const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
@@ -1532,11 +1557,14 @@ function buildAgentCardHtml(info) {
     ? `<img src="${escapeHtml(avatarUrl(info.hf_user))}" alt="" loading="lazy" onerror="this.style.display='none'">`
     : '';
 
+  const lastEpoch = lastMessageEpoch(info.agent);
+
   if (info.isHuman) {
     const rows = [['type', 'human']];
     if (info.ownedAgents && info.ownedAgents.length) {
       rows.push(['agents', info.ownedAgents.join(', ')]);
     }
+    if (lastEpoch) rows.push(['last msg', fmtRelative(lastEpoch)]);
     const rowsHtml = rows.map(([k, v]) =>
       `<div class="k">${escapeHtml(k)}</div><div class="v">${escapeHtml(v)}</div>`
     ).join('');
@@ -1557,6 +1585,7 @@ function buildAgentCardHtml(info) {
   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]);
+  if (lastEpoch)    rows.push(['last msg', fmtRelative(lastEpoch)]);
   const rowsHtml = rows.map(([k, v]) =>
     `<div class="k">${escapeHtml(k)}</div><div class="v">${escapeHtml(v)}</div>`
   ).join('');