sync from abhijitramesh/webgpu-bench@a4fd7c1c6f

css/style.css

@@ -1208,73 +1208,37 @@ a:hover { color: var(--info); }
   border-bottom: 1px solid var(--border);
 }
 
-/* Attribution row — stacked avatars + @username for the most-active
-   contributor. Sits between the header and the specs grid; collapses
-   cleanly when no contributors are known (older records). */
-.machine-card-submitters {
-  display: flex;
+/* Submitter cell in the Results table — small avatar + @username link.
+   Inline so the column hugs its content rather than stretching. */
+.submitter-link {
+  display: inline-flex;
   align-items: center;
-  gap: 10px;
-  margin: -8px 0 14px;
-  font-family: var(--font-mono);
-  font-size: 11.5px;
+  gap: 6px;
   color: var(--foreground-secondary);
-  min-width: 0;
-}
-.machine-card-submitter-pips {
-  display: inline-flex;
-  flex-shrink: 0;
-}
-.machine-card-submitter-pip {
-  display: inline-flex;
-  border-radius: 50%;
-  /* 2px ring against the card surface so overlapping circles read clearly. */
-  box-shadow: 0 0 0 2px var(--surface-1);
-  transition: transform var(--transition-fast);
   text-decoration: none;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  transition: color var(--transition-fast);
 }
-.machine-card-submitter-pip:hover {
-  transform: translateY(-1px);
-  z-index: 2;
+.submitter-link:hover {
+  color: var(--signal-strong);
+  text-decoration: none;
 }
-.machine-card-submitter-avatar {
-  width: 22px;
-  height: 22px;
+[data-theme="dark"] .submitter-link:hover { color: var(--signal); }
+.submitter-avatar {
+  width: 18px;
+  height: 18px;
   border-radius: 50%;
-  display: block;
+  display: inline-block;
   object-fit: cover;
   background: var(--surface-3);
+  flex-shrink: 0;
 }
-.machine-card-submitter-avatar--placeholder {
+.submitter-avatar--placeholder {
   background: linear-gradient(135deg, var(--signal-bg), var(--accent-violet-bg));
 }
-.machine-card-submitter-more {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: -8px;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  background: var(--surface-3);
-  color: var(--foreground-secondary);
-  box-shadow: 0 0 0 2px var(--surface-1);
-  font-size: 10px;
-  font-weight: 600;
-  cursor: default;
-}
-.machine-card-submitter-name {
+.submitter-name {
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--foreground);
-  font-weight: 500;
-  min-width: 0;
-}
-.machine-card-submitter-others {
-  color: var(--foreground-muted);
-  font-weight: 400;
-  margin-left: 4px;
 }
 .machine-card-header h3 {
   font-size: 14px;

data/combined.json

@@ -7,11 +7,19 @@
         "platform": "darwin",
         "arch": "arm",
         "totalMemoryGB": 4,
-        "submittedAt": "2026-04-25T04:41:33.272Z",
-        "resultCount": 3,
-        "passCount": 3,
+        "submittedAt": "2026-04-25T04:56:50.572Z",
+        "resultCount": 4,
+        "passCount": 4,
         "llamaCppCommit": null,
-        "submitters": []
+        "submitters": [
+          {
+            "name": "abhijitramesh",
+            "hubId": null,
+            "avatarUrl": null,
+            "count": 1,
+            "latestAt": "2026-04-25T04:50:36.488Z"
+          }
+        ]
       },
       {
         "slug": "apple-metal-3-8gb-darwin",
@@ -19,7 +27,7 @@
         "platform": "darwin",
         "arch": "arm",
         "totalMemoryGB": 8,
-        "submittedAt": "2026-04-25T04:41:33.272Z",
+        "submittedAt": "2026-04-25T04:56:50.572Z",
         "resultCount": 1,
         "passCount": 1,
         "llamaCppCommit": null,
@@ -27,12 +35,13 @@
       }
     ],
     "models": [
-      "Llama-3.2-1B-Instruct"
+      "Llama-3.2-1B-Instruct",
+      "Qwen3.5-2B"
     ],
     "browsers": [
       "chromium-147"
     ],
-    "generatedAt": "2026-04-25T04:41:33.327Z"
+    "generatedAt": "2026-04-25T04:56:50.620Z"
   },
   "results": [
     {
@@ -116,6 +125,37 @@
       "submittedBy": null,
       "iterations": 5
     },
+    {
+      "machineSlug": "apple-metal-3-4gb-darwin",
+      "timestamp": "2026-04-25T04:50:36.488Z",
+      "browser": "chromium-147",
+      "model": "Qwen3.5-2B",
+      "repo": "unsloth/Qwen3.5-2B-GGUF",
+      "variant": "IQ4_XS",
+      "filename": "Qwen3.5-2B-IQ4_XS.gguf",
+      "sizeMB": 1118.66,
+      "status": "done",
+      "error": null,
+      "buildType": "jspi",
+      "webgpuAvailable": true,
+      "nGpuLayers": 999,
+      "wallTimeMs": 137132.30000001192,
+      "prefill_tok_s": 61.42,
+      "decode_tok_s": 28.23,
+      "n_p_eval": 30,
+      "t_p_eval_ms": 1043.3,
+      "n_eval": 127,
+      "t_eval_ms": 4552.3,
+      "consistency_rate": 0.9922,
+      "consistency_first_disagree": 33,
+      "llamaCppCommit": null,
+      "submittedBy": {
+        "name": "abhijitramesh",
+        "hubId": null,
+        "avatarUrl": null
+      },
+      "iterations": 5
+    },
     {
       "machineSlug": "apple-metal-3-8gb-darwin",
       "timestamp": "2026-04-24T07:21:54.498Z",

js/tables.js

@@ -12,6 +12,12 @@ function sortResults(results, key, dir) {
   const isNum = NUM_KEYS.has(key);
   return [...results].sort((a, b) => {
     let va = a[key], vb = b[key];
+    // Submitter is an object — collapse to its name for comparison and let
+    // the null-handling below treat unattributed rows as the lowest.
+    if (key === 'submittedBy') {
+      va = va?.name || null;
+      vb = vb?.name || null;
+    }
     if (va == null && vb == null) return 0;
     if (va == null) return 1;
     if (vb == null) return -1;
@@ -62,6 +68,7 @@ export function renderResultsTable(results) {
     { key: 'variant', label: 'Quant', priority: 1 },
     { key: 'sizeMB', label: 'Size (MB)', priority: 3 },
     { key: 'browser', label: 'Browser', priority: 2 },
+    { key: 'submittedBy', label: 'Submitter', priority: 2 },
     { key: 'nGpuLayers', label: 'Backend', priority: 2 },
     { key: 'status', label: 'Status', priority: 1 },
     { key: 'buildType', label: 'Build', priority: 3 },
@@ -139,6 +146,9 @@ export function renderResultsTable(results) {
             html += '<span class="text-muted">\u2014</span>';
           }
           break;
+        case 'submittedBy':
+          html += renderSubmitterCell(r.submittedBy);
+          break;
         case 'llamaCppCommit':
           if (r.llamaCppCommit) {
             const short = r.llamaCppCommit.slice(0, 10);
@@ -233,23 +243,15 @@ export function renderMachineInfo(machines) {
     return;
   }
 
-  // Show up to this many avatars before collapsing the rest into "+N".
-  // Three keeps the row visually balanced with the card width on mobile.
-  const MAX_VISIBLE_SUBMITTERS = 3;
-
   let html = '<div class="machine-grid">';
   for (const m of machines) {
     const failCount = m.resultCount - m.passCount;
-    const submitters = Array.isArray(m.submitters) ? m.submitters : [];
-    const submitterRow = submitters.length > 0
-      ? renderSubmitterStack(submitters, MAX_VISIBLE_SUBMITTERS)
-      : '';
     html += `
       <div class="machine-card">
         <div class="machine-card-header">
           <svg class="machine-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
           <h3>${escapeHtml(m.cpus)}</h3>
-        </div>${submitterRow}
+        </div>
         <div class="machine-card-specs">
           <div class="spec-row"><span class="spec-label">Platform</span><span class="spec-value">${m.platform}</span></div>
           <div class="spec-row"><span class="spec-label">Arch</span><span class="spec-value">${m.arch}</span></div>
@@ -272,35 +274,14 @@ function escapeHtml(str) {
   return div.innerHTML;
 }
 
-/* Render a stack of contributor avatars on a machine card. The first avatar
-   doubles as a profile link with the @username next to it; additional
-   contributors stack as overlapping circles, with any over MAX_VISIBLE
-   collapsing to a "+N" chip. The full list is preserved in the title
-   attribute as a tooltip. */
-function renderSubmitterStack(submitters, maxVisible) {
-  const visible = submitters.slice(0, maxVisible);
-  const overflow = submitters.length - visible.length;
-  const fullList = submitters.map(s => `@${s.name}${s.count ? ` (${s.count})` : ''}`).join(', ');
-  const lead = visible[0];
-
-  const avatarStack = visible.map((s, i) => {
-    const offset = i * -8; // overlap by 8px
-    const img = s.avatarUrl
-      ? `<img class="machine-card-submitter-avatar" src="${escapeHtml(s.avatarUrl)}" alt="" width="22" height="22" loading="lazy">`
-      : '<span class="machine-card-submitter-avatar machine-card-submitter-avatar--placeholder" aria-hidden="true"></span>';
-    return `<a href="https://huggingface.co/${escapeHtml(s.name)}" target="_blank" rel="noopener" class="machine-card-submitter-pip" style="margin-left: ${offset}px;" title="@${escapeHtml(s.name)}${s.count ? ` · ${s.count} submissions` : ''}">${img}</a>`;
-  }).join('');
-
-  const overflowChip = overflow > 0
-    ? `<span class="machine-card-submitter-more" title="${escapeHtml(fullList)}">+${overflow}</span>`
-    : '';
-  const leadName = `<span class="machine-card-submitter-name">@${escapeHtml(lead.name)}${overflow > 0 || submitters.length > 1 ? ` <span class="machine-card-submitter-others">+${submitters.length - 1} other${submitters.length - 1 === 1 ? '' : 's'}</span>` : ''}</span>`;
-
-  return `
-          <div class="machine-card-submitters" title="${escapeHtml(fullList)}">
-            <div class="machine-card-submitter-pips">${avatarStack}${overflowChip}</div>
-            ${leadName}
-          </div>`;
+/* Render a single submitter's avatar + @username link for the Results
+   table column. Falls back to an em-dash if attribution is unknown. */
+function renderSubmitterCell(sb) {
+  if (!sb?.name) return '<span class="text-muted">\u2014</span>';
+  const avatar = sb.avatarUrl
+    ? `<img class="submitter-avatar" src="${escapeHtml(sb.avatarUrl)}" alt="" width="18" height="18" loading="lazy">`
+    : '<span class="submitter-avatar submitter-avatar--placeholder" aria-hidden="true"></span>';
+  return `<a class="submitter-link" href="https://huggingface.co/${escapeHtml(sb.name)}" target="_blank" rel="noopener" title="View @${escapeHtml(sb.name)} on Hugging Face">${avatar}<span class="submitter-name">@${escapeHtml(sb.name)}</span></a>`;
 }
 
 export function renderCpuGpuTable(results) {