Rework FRU and DMI editors: per-row inline save, all fields editable

- Replace global Save button with per-row ✓ (save) / ✗ (cancel) buttons
  that appear only when a field is changed
- All fields shown as editable inputs; server rejects unknown fields
  with a clear error message instead of hiding them in the UI
- Monospace font and 1.5px border for all value inputs
- Server-side name→area/index lookup for fields sent without area
- SAA DMI card: same per-row UX, confirm dialog kept (requires reboot)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

audit/internal/webui/ipmi_fru.go

@@ -94,7 +94,8 @@ func fruFieldMeta(name string) (editable bool, area string, index int) {
 	if e, ok := fruEditableFields[name]; ok {
 		return true, e.Area, e.Index
 	}
-	return false, "", 0
+	// All fields are shown as editable; server will reject unknown fields.
+	return true, "", 0
 }
 
 func (h *handler) handleAPIIPMIFRURead(w http.ResponseWriter, r *http.Request) {
@@ -128,7 +129,17 @@ func (h *handler) handleAPIIPMIFRUWrite(w http.ResponseWriter, r *http.Request)
 		return
 	}
 	validAreas := map[string]bool{"c": true, "b": true, "p": true}
-	for _, c := range req.Changes {
+	for i, c := range req.Changes {
+		if c.Area == "" {
+			e, ok := fruEditableFields[c.Name]
+			if !ok {
+				writeError(w, http.StatusUnprocessableEntity, "field not writable via ipmitool: "+c.Name)
+				return
+			}
+			req.Changes[i].Area = e.Area
+			req.Changes[i].Index = e.Index
+			c = req.Changes[i]
+		}
 		if !validAreas[c.Area] {
 			writeError(w, http.StatusUnprocessableEntity, "invalid area: "+c.Area)
 			return
@@ -196,106 +207,78 @@ func renderIPMIFRUCard() string {
 <p style="font-size:13px;color:var(--muted);margin-bottom:12px">Reads and edits FRU fields via ipmitool (In-Band, device 0). Works on any server with IPMI support.</p>
 <div id="fru-status" style="font-size:13px;color:var(--muted);margin-bottom:8px"></div>
 <div id="fru-table"></div>
-<div id="fru-save-row" style="display:none;margin-top:12px">
-  <button class="btn btn-primary" id="fru-save-btn" onclick="fruSave()">Save</button>
-  <span id="fru-save-msg" style="font-size:13px;color:var(--muted);margin-left:10px"></span>
-</div>
 </div></div>
 <script>
-var fruOriginal = {};
+var _fruActBtnStyle = 'width:22px;height:22px;padding:0;font-size:13px;line-height:1;border:1px solid var(--line);border-radius:3px;background:var(--surface);cursor:pointer;vertical-align:middle;';
+var _fruInputStyle = 'width:100%;padding:3px 6px;border:1.5px solid #888;border-radius:3px;font-size:13px;font-family:monospace;background:var(--surface);color:var(--ink);';
 function fruRead() {
-  document.getElementById('fru-status').textContent = 'Reading...';
+  var status = document.getElementById('fru-status');
+  status.textContent = 'Reading...'; status.style.color = 'var(--muted)';
   document.getElementById('fru-table').innerHTML = '';
-  document.getElementById('fru-save-row').style.display = 'none';
   fetch('/api/tools/ipmi-fru', {cache:'no-store'})
-    .then(function(r) {
-      if (!r.ok) return r.json().then(function(e) { throw new Error(e.error || r.statusText); });
-      return r.json();
-    })
+    .then(function(r) { return r.json().then(function(d){if(!r.ok)throw new Error(d.error||r.statusText);return d;}); })
     .then(function(fields) {
-      fruOriginal = {};
-      if (!fields || !fields.length) {
-        document.getElementById('fru-status').textContent = 'No FRU fields returned.';
-        return;
-      }
-      document.getElementById('fru-status').textContent = '';
+      if (!fields || !fields.length) { status.textContent = 'No FRU fields returned.'; return; }
+      status.textContent = '';
       var rows = fields.map(function(f) {
-        var val = f.value || '';
-        if (f.editable) {
-          fruOriginal[f.area + '_' + f.index] = val;
-          return '<tr><td style="color:var(--muted);white-space:nowrap;padding-right:16px">' + escHtml(f.name) + '</td>'
-            + '<td><input class="fru-input" style="width:100%;padding:4px 6px;border:1px solid var(--border);border-radius:3px;font-size:13px;font-family:inherit;background:var(--surface);color:var(--ink)"'
-            + ' data-area="' + escHtml(f.area) + '" data-index="' + f.index + '" data-name="' + escHtml(f.name) + '"'
-            + ' data-original="' + escHtml(val) + '" value="' + escHtml(val) + '" oninput="fruDirtyCheck()"></td></tr>';
-        }
-        return '<tr><td style="color:var(--muted);white-space:nowrap;padding-right:16px">' + escHtml(f.name) + '</td>'
-          + '<td style="color:var(--ink)">' + escHtml(val || '—') + '</td></tr>';
+        var val = escHtml(f.value || '');
+        return '<tr>'
+          + '<td style="color:var(--muted);white-space:nowrap;padding-right:16px;vertical-align:middle;font-size:13px">' + escHtml(f.name) + '</td>'
+          + '<td style="vertical-align:middle"><input class="fru-inp" style="' + _fruInputStyle + '"'
+          + ' data-area="' + escHtml(f.area||'') + '" data-index="' + (f.index||0) + '" data-name="' + escHtml(f.name) + '"'
+          + ' data-original="' + val + '" value="' + val + '" oninput="fruChanged(this)"></td>'
+          + '<td class="fru-act" style="display:none;white-space:nowrap;padding-left:6px;vertical-align:middle">'
+          + '<button style="' + _fruActBtnStyle + 'color:var(--ok-fg,green);margin-right:3px" title="Save" onclick="fruSave(this)">✓</button>'
+          + '<button style="' + _fruActBtnStyle + 'color:var(--crit-fg,#9f3a38)" title="Cancel" onclick="fruCancel(this)">✗</button>'
+          + '<span class="fru-msg" style="font-size:11px;margin-left:5px;color:var(--muted)"></span>'
+          + '</td></tr>';
       }).join('');
-      document.getElementById('fru-table').innerHTML = '<table style="width:100%">' + rows + '</table>';
-      fruDirtyCheck();
+      document.getElementById('fru-table').innerHTML = '<table style="width:100%;border-collapse:collapse">' + rows + '</table>';
     })
-    .catch(function(e) {
-      document.getElementById('fru-status').textContent = 'Error: ' + e.message;
-      document.getElementById('fru-status').style.color = 'var(--crit-fg)';
-    });
+    .catch(function(e) { status.textContent = 'Error: '+e.message; status.style.color='var(--crit-fg)'; });
 }
 function escHtml(s) {
-  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
 }
-function fruDirtyCheck() {
-  var inputs = document.querySelectorAll('.fru-input');
-  var changed = 0;
-  inputs.forEach(function(el) { if (el.value !== el.dataset.original) changed++; });
-  var row = document.getElementById('fru-save-row');
-  var btn = document.getElementById('fru-save-btn');
-  if (changed > 0) {
-    row.style.display = '';
-    btn.textContent = 'Save (' + changed + ' changed)';
-  } else {
-    row.style.display = 'none';
-  }
+function fruChanged(inp) {
+  inp.closest('tr').querySelector('.fru-act').style.display = inp.value !== inp.dataset.original ? '' : 'none';
 }
-function fruSave() {
-  var inputs = document.querySelectorAll('.fru-input');
-  var changes = [];
-  inputs.forEach(function(el) {
-    if (el.value !== el.dataset.original) {
-      changes.push({area: el.dataset.area, index: parseInt(el.dataset.index, 10), name: el.dataset.name, value: el.value});
-    }
-  });
-  if (!changes.length) return;
-  document.getElementById('fru-save-btn').disabled = true;
-  document.getElementById('fru-save-msg').textContent = 'Saving...';
-  fetch('/api/tools/ipmi-fru/write', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({changes: changes})})
-    .then(function(r) {
-      if (!r.ok) return r.json().then(function(e) { throw new Error(e.error || r.statusText); });
-      return r.json();
-    })
-    .then(function(d) {
-      var taskId = d.task_id;
-      document.getElementById('fru-save-msg').textContent = 'Task ' + taskId + ' queued…';
-      var poll = setInterval(function() {
-        fetch('/api/tasks', {cache:'no-store'}).then(function(r) { return r.json(); }).then(function(tasks) {
-          var t = Array.isArray(tasks) ? tasks.find(function(x) { return x.id === taskId; }) : null;
-          if (!t) return;
-          if (t.status === 'done') {
+function fruCancel(btn) {
+  var row = btn.closest('tr');
+  var inp = row.querySelector('.fru-inp');
+  inp.value = inp.dataset.original;
+  row.querySelector('.fru-act').style.display = 'none';
+  row.querySelector('.fru-msg').textContent = '';
+}
+function fruSave(btn) {
+  var row = btn.closest('tr');
+  var inp = row.querySelector('.fru-inp');
+  var msg = row.querySelector('.fru-msg');
+  var cancelBtn = row.querySelectorAll('.fru-act button')[1];
+  btn.disabled = true; cancelBtn.disabled = true;
+  msg.textContent = '…'; msg.style.color = 'var(--muted)';
+  fetch('/api/tools/ipmi-fru/write', {method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({changes:[{area:inp.dataset.area, index:parseInt(inp.dataset.index,10), name:inp.dataset.name, value:inp.value}]})})
+    .then(function(r){return r.json().then(function(d){if(!r.ok)throw new Error(d.error||r.statusText);return d;});})
+    .then(function(d){
+      var poll = setInterval(function(){
+        fetch('/api/tasks',{cache:'no-store'}).then(function(r){return r.json();}).then(function(tasks){
+          var t = Array.isArray(tasks)?tasks.find(function(x){return x.id===d.task_id;}):null;
+          if(!t) return;
+          if(t.status==='done'){
             clearInterval(poll);
-            document.getElementById('fru-save-msg').textContent = 'Done — backup saved to fru-backups/.';
-            document.getElementById('fru-save-btn').disabled = false;
-            inputs.forEach(function(el) { el.dataset.original = el.value; });
-            fruDirtyCheck();
-          } else if (t.status === 'failed') {
+            inp.dataset.original = inp.value;
+            row.querySelector('.fru-act').style.display = 'none';
+            msg.textContent = '';
+          } else if(t.status==='failed'||t.status==='cancelled'){
             clearInterval(poll);
-            document.getElementById('fru-save-msg').textContent = 'Failed: ' + (t.error || 'unknown error');
-            document.getElementById('fru-save-btn').disabled = false;
+            msg.textContent = t.error||t.status; msg.style.color='var(--crit-fg)';
+            btn.disabled=false; cancelBtn.disabled=false;
           }
         });
-      }, 1500);
+      },1500);
     })
-    .catch(function(e) {
-      document.getElementById('fru-save-msg').textContent = 'Error: ' + e.message;
-      document.getElementById('fru-save-btn').disabled = false;
-    });
+    .catch(function(e){ msg.textContent='Error: '+e.message; msg.style.color='var(--crit-fg)'; btn.disabled=false; cancelBtn.disabled=false; });
 }
 </script>`
 }