feat(webui): show GPU serial in NVIDIA selection pickers

Every GPU-selection picker (Load/SAT, Burn, Benchmark) now renders the
card serial: "GPU N — <model> · <mem> MiB · sn: <serial>". The serial is
monospace and the digits that differ across the listed GPUs (common
prefix/suffix stripped) are emphasised so operators can tell cards apart.

Row markup was duplicated across three pages (and twice within
page_validate.go). Consolidated into a single module,
internal/webui/gpu_picker.go: beeGpuPicker.render({...}) builds every row;
gpuPickerCSS/gpuPickerJS are injected once by layoutHead/renderPage. Pages
keep their own selection-note text and multi-GPU toggles but no longer
hand-build <label> markup.

ListNvidiaGPUs() adds the serial via nvidia-smi --query-gpu=...,serial;
N/A is normalised to empty. Serial flows to the client unchanged through
the existing /api/gpu/nvidia JSON response.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AudE3Q2nd9kxxVuxPKcTho

audit/internal/webui/gpu_picker.go

@@ -0,0 +1,71 @@
+package webui
+
+// Shared NVIDIA GPU selection picker.
+//
+// Every page that lets the operator pick GPUs (Load, Burn, Benchmark) renders
+// the same row markup: "GPU N — <model> · <memory> MiB · sn: <serial>". That
+// markup lives here once. Pages keep their own selection-note text, multi-GPU
+// mode toggles and CSS-class prefixes, but call beeGpuPicker.render({...}) from
+// their *RenderGPUList wrapper instead of hand-building each <label>.
+//
+// The serial number is rendered monospace, with the digits that differ across
+// the listed GPUs (usually a run at the end, sometimes the middle or start)
+// emphasised so operators can tell cards apart at a glance.
+//
+// gpuPickerCSS is injected once by layoutHead; gpuPickerJS once by renderPage.
+
+const gpuPickerCSS = `.bee-gpu-row{display:flex;align-items:flex-start;gap:8px;padding:6px 0;cursor:pointer;font-size:13px}
+.bee-gpu-row input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex-shrink:0}
+.bee-gpu-sn{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
+.bee-gpu-sn b{font-weight:700;color:var(--accent)}`
+
+const gpuPickerJS = `window.beeGpuPicker={
+  _esc:function(s){return String(s).replace(/[&<>"]/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];});},
+  _commonPrefix:function(arr){
+    arr=arr.filter(Boolean);
+    if(arr.length<2)return 0;
+    var n=0,a=arr[0];
+    while(n<a.length&&arr.every(function(s){return s.charAt(n)===a.charAt(n);}))n++;
+    return n;
+  },
+  _commonSuffix:function(arr,capLeft){
+    arr=arr.filter(Boolean);
+    if(arr.length<2)return 0;
+    var minLen=Math.min.apply(null,arr.map(function(s){return s.length;}));
+    var n=0,a=arr[0];
+    while(n<a.length&&capLeft+n<minLen&&arr.every(function(s){return s.charAt(s.length-1-n)===a.charAt(a.length-1-n);}))n++;
+    return n;
+  },
+  _fmtSerial:function(s,p,q){
+    s=String(s);
+    if(p+q>=s.length){p=0;q=0;}
+    if(p===0&&q===0)return this._esc(s); // nothing distinguishing to highlight
+    return this._esc(s.slice(0,p))+'<b>'+this._esc(s.slice(p,s.length-q))+'</b>'+this._esc(s.slice(s.length-q));
+  },
+  row:function(gpu,checkboxClass,onToggle,prefixLen,suffixLen){
+    var mem=gpu.memory_mb>0?' · '+gpu.memory_mb+' MiB':'';
+    var name=this._esc(gpu.name||('GPU '+gpu.index));
+    var sn=gpu.serial?' · <span class="bee-gpu-sn">sn: '+this._fmtSerial(gpu.serial,prefixLen||0,suffixLen||0)+'</span>':'';
+    return '<label class="bee-gpu-row">'
+      +'<input class="'+checkboxClass+'" type="checkbox" value="'+gpu.index+'" checked'
+      +(onToggle?' onchange="'+onToggle+'"':'')+'>'
+      +'<span><strong>GPU '+gpu.index+'</strong> — '+name+mem+sn+'</span>'
+      +'</label>';
+  },
+  render:function(opts){
+    var root=document.getElementById(opts.rootId);
+    if(!root)return;
+    var gpus=opts.gpus||[];
+    if(!gpus.length){
+      root.innerHTML=opts.emptyHTML||'<p style="color:var(--muted);font-size:13px">No NVIDIA GPUs detected.</p>';
+      if(opts.after)opts.after(0);
+      return;
+    }
+    var serials=gpus.map(function(g){return g.serial||'';});
+    var p=this._commonPrefix(serials);
+    var q=this._commonSuffix(serials,p);
+    var self=this;
+    root.innerHTML=gpus.map(function(g){return self.row(g,opts.checkboxClass,opts.onToggle,p,q);}).join('');
+    if(opts.after)opts.after(gpus.length);
+  }
+};`

audit/internal/webui/layout.go

@@ -91,6 +91,7 @@ tbody tr:hover td{background:rgba(0,0,0,.03)}
 .alert-info{background:#dff0ff;border:1px solid #a9d4f5;color:#1e3a5f}
 .alert-warn{background:var(--warn-bg);border:1px solid #c9ba9b;color:var(--warn-fg)}
 .alert-crit{background:var(--crit-bg);border:1px solid var(--crit-border);color:var(--crit-fg);font-weight:700}
+` + gpuPickerCSS + `
 </style>
 </head>
 <body>

audit/internal/webui/page_benchmark.go

@@ -97,8 +97,6 @@ func renderBenchmark(opts HandlerOptions) string {
 <style>
 .benchmark-cb-row { display:flex; align-items:flex-start; gap:8px; cursor:pointer; font-size:13px; }
 .benchmark-cb-row input[type=checkbox] { width:16px; height:16px; margin-top:2px; flex-shrink:0; }
-.benchmark-gpu-row { display:flex; align-items:flex-start; gap:8px; padding:6px 0; cursor:pointer; font-size:13px; }
-.benchmark-gpu-row input[type=checkbox] { width:16px; height:16px; margin-top:2px; flex-shrink:0; }
 </style>
 
 <script>
@@ -142,21 +140,11 @@ function benchmarkUpdateSelectionNote() {
   }
 }
 function benchmarkRenderGPUList(gpus) {
-  const root = document.getElementById('benchmark-gpu-list');
-  if (!gpus || !gpus.length) {
-    root.innerHTML = '<p style="color:var(--muted);font-size:13px">No NVIDIA GPUs detected.</p>';
-    benchmarkUpdateSelectionNote();
-    return;
-  }
-  root.innerHTML = gpus.map(function(gpu) {
-    const mem = gpu.memory_mb > 0 ? ' · ' + gpu.memory_mb + ' MiB' : '';
-    return '<label class="benchmark-gpu-row">'
-      + '<input class="benchmark-gpu-checkbox" type="checkbox" value="' + gpu.index + '" checked onchange="benchmarkUpdateSelectionNote()">'
-      + '<span><strong>GPU ' + gpu.index + '</strong> — ' + gpu.name + mem + '</span>'
-      + '</label>';
-  }).join('');
-  benchmarkApplyMultiGPUState(gpus.length);
-  benchmarkUpdateSelectionNote();
+  beeGpuPicker.render({
+    rootId: 'benchmark-gpu-list', gpus: gpus,
+    checkboxClass: 'benchmark-gpu-checkbox', onToggle: 'benchmarkUpdateSelectionNote()',
+    after: function(n) { benchmarkApplyMultiGPUState(n); benchmarkUpdateSelectionNote(); },
+  });
 }
 function benchmarkApplyMultiGPUState(gpuCount) {
   var multiValues = ['parallel', 'ramp-up'];

audit/internal/webui/page_burn.go

@@ -92,8 +92,6 @@ func renderBurn() string {
 .cb-row input[type=checkbox]:disabled { opacity:0.4; cursor:not-allowed; }
 .cb-row input[type=checkbox]:disabled ~ span { opacity:0.45; cursor:not-allowed; }
 .cb-note { font-size:11px; color:var(--muted); font-style:italic; }
-.burn-gpu-row { display:flex; align-items:flex-start; gap:8px; padding:6px 0; cursor:pointer; font-size:13px; }
-.burn-gpu-row input[type=checkbox] { width:16px; height:16px; margin-top:2px; flex-shrink:0; }
 .burn-profile-body { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:stretch; }
 .burn-profile-col { min-width:0; }
 .burn-profile-action { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; }
@@ -159,21 +157,11 @@ function burnUpdateSelectionNote() {
   note.textContent = 'Selected NVIDIA GPUs: ' + selected.join(', ') + '. Official and custom NVIDIA tasks will use only these GPUs.';
 }
 function burnRenderGPUList(gpus) {
-  const root = document.getElementById('burn-gpu-list');
-  if (!gpus || !gpus.length) {
-    root.innerHTML = '<p style="color:var(--muted);font-size:13px">No NVIDIA GPUs detected.</p>';
-    burnUpdateSelectionNote();
-    return;
-  }
-  root.innerHTML = gpus.map(function(gpu) {
-    const mem = gpu.memory_mb > 0 ? ' · ' + gpu.memory_mb + ' MiB' : '';
-    return '<label class="burn-gpu-row">'
-      + '<input class="burn-gpu-checkbox" type="checkbox" value="' + gpu.index + '" checked onchange="burnUpdateSelectionNote()">'
-      + '<span><strong>GPU ' + gpu.index + '</strong> — ' + gpu.name + mem + '</span>'
-      + '</label>';
-  }).join('');
-  burnApplyMultiGPUState(gpus.length);
-  burnUpdateSelectionNote();
+  beeGpuPicker.render({
+    rootId: 'burn-gpu-list', gpus: gpus,
+    checkboxClass: 'burn-gpu-checkbox', onToggle: 'burnUpdateSelectionNote()',
+    after: function(n) { burnApplyMultiGPUState(n); burnUpdateSelectionNote(); },
+  });
 }
 function burnSelectAll() {
   document.querySelectorAll('.burn-gpu-checkbox').forEach(function(el) { el.checked = true; });

audit/internal/webui/page_validate.go

@@ -212,8 +212,6 @@ func renderValidateMode(opts HandlerOptions, stressDefault bool) string {
 .validate-card-body { padding:0; }
 .validate-card-section { padding:12px 16px 0; }
 .validate-card-section:last-child { padding-bottom:16px; }
-.sat-gpu-row { display:flex; align-items:flex-start; gap:8px; padding:6px 0; cursor:pointer; font-size:13px; }
-.sat-gpu-row input[type=checkbox] { width:16px; height:16px; margin-top:2px; flex-shrink:0; }
 </style>
 <script>
 let satES = null;
@@ -251,21 +249,11 @@ function satUpdateGPUSelectionNote() {
   note.textContent = 'Selected GPUs: ' + selected.join(', ') + '. Multi-GPU tests will use all selected GPUs.';
 }
 function satRenderGPUList(gpus) {
-  const root = document.getElementById('sat-gpu-list');
-  if (!root) return;
-  if (!gpus || !gpus.length) {
-    root.innerHTML = '<p style="color:var(--muted);font-size:13px">No NVIDIA GPUs detected.</p>';
-    satUpdateGPUSelectionNote();
-    return;
-  }
-  root.innerHTML = gpus.map(function(gpu) {
-    const mem = gpu.memory_mb > 0 ? ' · ' + gpu.memory_mb + ' MiB' : '';
-    return '<label class="sat-gpu-row">'
-      + '<input class="sat-nvidia-checkbox" type="checkbox" value="' + gpu.index + '" checked onchange="satUpdateGPUSelectionNote()">'
-      + '<span><strong>GPU ' + gpu.index + '</strong> — ' + gpu.name + mem + '</span>'
-      + '</label>';
-  }).join('');
-  satUpdateGPUSelectionNote();
+  beeGpuPicker.render({
+    rootId: 'sat-gpu-list', gpus: gpus,
+    checkboxClass: 'sat-nvidia-checkbox', onToggle: 'satUpdateGPUSelectionNote()',
+    after: function() { satUpdateGPUSelectionNote(); },
+  });
 }
 function satSelectAllGPUs() {
   document.querySelectorAll('.sat-nvidia-checkbox').forEach(function(el) { el.checked = true; });
@@ -729,8 +717,6 @@ func renderCheck(opts HandlerOptions) string {
 .validate-card-body { padding:0; }
 .validate-card-section { padding:12px 16px 0; }
 .validate-card-section:last-child { padding-bottom:16px; }
-.sat-gpu-row { display:flex; align-items:flex-start; gap:8px; padding:6px 0; cursor:pointer; font-size:13px; }
-.sat-gpu-row input[type=checkbox] { width:16px; height:16px; margin-top:2px; flex-shrink:0; }
 .cb-row { display:flex; align-items:flex-start; gap:8px; padding:4px 0; cursor:pointer; font-size:13px; }
 .cb-row input[type=checkbox] { width:16px; height:16px; margin-top:2px; flex-shrink:0; }
 </style>
@@ -765,17 +751,11 @@ function satUpdateGPUSelectionNote() {
     : 'Select at least one NVIDIA GPU to enable NVIDIA check tasks.';
 }
 function satRenderGPUList(gpus) {
-  const root = document.getElementById('sat-gpu-list');
-  if (!root) return;
-  if (!gpus || !gpus.length) {
-    root.innerHTML = '<p style="color:var(--muted);font-size:13px">No NVIDIA GPUs detected.</p>';
-    satUpdateGPUSelectionNote(); return;
-  }
-  root.innerHTML = gpus.map(gpu => {
-    const mem = gpu.memory_mb > 0 ? ' · ' + gpu.memory_mb + ' MiB' : '';
-    return '<label class="sat-gpu-row"><input class="sat-nvidia-checkbox" type="checkbox" value="' + gpu.index + '" checked onchange="satUpdateGPUSelectionNote()"><span><strong>GPU ' + gpu.index + '</strong> — ' + gpu.name + mem + '</span></label>';
-  }).join('');
-  satUpdateGPUSelectionNote();
+  beeGpuPicker.render({
+    rootId: 'sat-gpu-list', gpus: gpus,
+    checkboxClass: 'sat-nvidia-checkbox', onToggle: 'satUpdateGPUSelectionNote()',
+    after: function() { satUpdateGPUSelectionNote(); },
+  });
 }
 function satSelectAllGPUs() { document.querySelectorAll('.sat-nvidia-checkbox').forEach(el => { el.checked = true; }); satUpdateGPUSelectionNote(); }
 function satSelectNoGPUs() { document.querySelectorAll('.sat-nvidia-checkbox').forEach(el => { el.checked = false; }); satUpdateGPUSelectionNote(); }

audit/internal/webui/pages.go

@@ -126,6 +126,7 @@ function openComponentDetail(type) {
     body.innerHTML = '<div style="padding:20px;color:var(--crit-fg)">Error loading details.</div>';
   });
 }
+` + gpuPickerJS + `
 </script>` +
 		`</body></html>`
 }