feat: task queue, UI overhaul, burn tests, install-to-RAM

- Task queue: all SAT/audit jobs enqueue and run one-at-a-time; tasks persist past page navigation; new Tasks page with cancel/priority/log stream - UI: consolidate nav (Validate, Burn, Tasks, Tools); Audit becomes modal; Dashboard hardware summary badges + split metrics charts (load/temp/power); Tools page consolidates network, services, install, support bundle - AMD GPU: acceptance test and stress burn cards; GPU presence API greys out irrelevant SAT cards automatically - Burn tests: Memory Stress (stress-ng --vm), SAT Stress (stressapptest) - Install to RAM: copies squashfs to /dev/shm, re-associates loop devices via LOOP_CHANGE_FD ioctl so live media can be ejected - Charts: relative time axis (0 = now, negative left) - memtester: LimitMEMLOCK=infinity in bee-web.service; empty output → UNSUPPORTED - SAT overlay applied dynamically on every /audit.json serve - MIME panic guard for LiveCD ramdisk I/O errors - ISO: add memtest86+, stressapptest packages; memtest86+ GRUB entry; disable screensaver/DPMS in bee-openbox-session - Unknown SAT status severity = 1 (does not override OK) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-28 21:15:11 +03:00
parent 911745e4da
commit 0a98ed8ae9
22 changed files with 1964 additions and 326 deletions
--- a/audit/internal/webui/pages.go
+++ b/audit/internal/webui/pages.go
@@ -84,17 +84,13 @@ tbody tr:hover td{background:rgba(0,0,0,.03)}
 }

 func layoutNav(active string) string {
-	items := []struct{ id, label, href string }{
-		{"dashboard", "Dashboard", "/"},
-		{"viewer", "Audit Snapshot", "/viewer"},
-		{"metrics", "Metrics", "/metrics"},
-		{"tests", "Acceptance Tests", "/tests"},
-		{"burn-in", "Burn-in", "/burn-in"},
-		{"network", "Network", "/network"},
-		{"services", "Services", "/services"},
-		{"export", "Export", "/export"},
-		{"tools", "Tools", "/tools"},
-		{"install", "Install to Disk", "/install"},
+	items := []struct{ id, label, href, onclick string }{
+		{"dashboard", "Dashboard", "/", ""},
+		{"audit", "Audit", "#", "openAuditModal();return false;"},
+		{"validate", "Validate", "/validate", ""},
+		{"burn", "Burn", "/burn", ""},
+		{"tasks", "Tasks", "/tasks", ""},
+		{"tools", "Tools", "/tools", ""},
 	}
 	var b strings.Builder
 	b.WriteString(`<aside class="sidebar">`)
@@ -105,8 +101,13 @@ func layoutNav(active string) string {
 		if item.id == active {
 			cls += " active"
 		}
-		b.WriteString(fmt.Sprintf(`<a class="%s" href="%s">%s</a>`,
-			cls, item.href, item.label))
+		if item.onclick != "" {
+			b.WriteString(fmt.Sprintf(`<a class="%s" href="%s" onclick="%s">%s</a>`,
+				cls, item.href, item.onclick, item.label))
+		} else {
+			b.WriteString(fmt.Sprintf(`<a class="%s" href="%s">%s</a>`,
+				cls, item.href, item.label))
+		}
 	}
 	b.WriteString(`</nav></aside>`)
 	return b.String()
@@ -120,18 +121,35 @@ func renderPage(page string, opts HandlerOptions) string {
 		pageID = "dashboard"
 		title = "Dashboard"
 		body = renderDashboard(opts)
+	case "validate":
+		pageID = "validate"
+		title = "Validate"
+		body = renderValidate()
+	case "burn":
+		pageID = "burn"
+		title = "Burn"
+		body = renderBurn()
+	case "tasks":
+		pageID = "tasks"
+		title = "Tasks"
+		body = renderTasks()
+	case "tools":
+		pageID = "tools"
+		title = "Tools"
+		body = renderTools()
+	// Legacy routes kept accessible but not in nav
 	case "metrics":
 		pageID = "metrics"
 		title = "Live Metrics"
 		body = renderMetrics()
 	case "tests":
-		pageID = "tests"
+		pageID = "validate"
 		title = "Acceptance Tests"
-		body = renderTests()
+		body = renderValidate()
 	case "burn-in":
-		pageID = "burn-in"
+		pageID = "burn"
 		title = "Burn-in Tests"
-		body = renderBurnIn()
+		body = renderBurn()
 	case "network":
 		pageID = "network"
 		title = "Network"
@@ -144,10 +162,6 @@ func renderPage(page string, opts HandlerOptions) string {
 		pageID = "export"
 		title = "Export"
 		body = renderExport(opts.ExportDir)
-	case "tools":
-		pageID = "tools"
-		title = "Tools"
-		body = renderTools()
 	case "install":
 		pageID = "install"
 		title = "Install to Disk"
@@ -162,48 +176,158 @@ func renderPage(page string, opts HandlerOptions) string {
 		layoutNav(pageID) +
 		`<div class="main"><div class="topbar"><h1>` + html.EscapeString(title) + `</h1></div><div class="content">` +
 		body +
-		`</div></div></body></html>`
+		`</div></div>` +
+		renderAuditModal() +
+		`</body></html>`
 }

 // ── Dashboard ─────────────────────────────────────────────────────────────────

 func renderDashboard(opts HandlerOptions) string {
 	var b strings.Builder
-	b.WriteString(`<div class="grid2">`)
-	// Left: health summary
-	b.WriteString(`<div>`)
+	b.WriteString(renderHardwareSummaryCard(opts))
 	b.WriteString(renderHealthCard(opts))
-	b.WriteString(`</div>`)
-	// Right: quick actions
-	b.WriteString(`<div>`)
-	b.WriteString(`<div class="card"><div class="card-head">Quick Actions</div><div class="card-body">`)
-	b.WriteString(`<a class="btn btn-primary" href="/export/support.tar.gz" style="display:block;margin-bottom:10px">⬇ Download Support Bundle</a>`)
-	b.WriteString(`<a class="btn btn-secondary" href="/audit.json" style="display:block;margin-bottom:10px" target="_blank">📄 Open audit.json</a>`)
-	b.WriteString(`<a class="btn btn-secondary" href="/export/" style="display:block">📁 Browse Export Files</a>`)
-	b.WriteString(`<div style="margin-top:14px"><button class="btn btn-secondary" onclick="runAudit()">▶ Re-run Audit</button></div>`)
-	b.WriteString(`</div></div>`)
-	b.WriteString(`</div>`)
-	b.WriteString(`</div>`)
-	// Audit run output div
-	b.WriteString(`<div id="audit-output" style="display:none" class="card"><div class="card-head">Audit Output</div><div class="card-body"><div id="audit-terminal" class="terminal"></div></div></div>`)
-
-	b.WriteString(`<script>
-function runAudit() {
-  document.getElementById('audit-output').style.display='block';
-  const term = document.getElementById('audit-terminal');
-  term.textContent = 'Starting audit...\n';
-  fetch('/api/audit/run', {method:'POST'})
-    .then(r => r.json())
-    .then(d => {
-      const es = new EventSource('/api/audit/stream?job_id=' + d.job_id);
-      es.onmessage = e => { term.textContent += e.data + '\n'; term.scrollTop = term.scrollHeight; };
-      es.addEventListener('done', e => { es.close(); term.textContent += (e.data ? '\\nERROR: ' + e.data : '\\nDone.') + '\n'; location.reload(); });
-    });
-}
-</script>`)
+	b.WriteString(renderMetrics())
 	return b.String()
 }

+func renderHardwareSummaryCard(opts HandlerOptions) string {
+	data, err := loadSnapshot(opts.AuditPath)
+	if err != nil {
+		return `<div class="card"><div class="card-head">Hardware Summary</div><div class="card-body"><span class="badge badge-unknown">No audit data</span></div></div>`
+	}
+	// Parse just enough fields for the summary banner
+	var snap struct {
+		Summary struct {
+			CPU     struct{ Model string }
+			Memory  struct{ TotalGB float64 }
+			Storage []struct{ Device, Model, Size string }
+			GPUs    []struct{ Model string }
+			PSUs    []struct{ Model string }
+		}
+		Network struct {
+			Interfaces []struct {
+				Name  string
+				IPv4  []string
+				State string
+			}
+		}
+	}
+	// Try to extract top-level fields loosely
+	var raw map[string]json.RawMessage
+	if err := json.Unmarshal(data, &raw); err != nil {
+		return `<div class="card"><div class="card-head">Hardware Summary</div><div class="card-body"><span class="badge badge-err">Parse error</span></div></div>`
+	}
+	_ = snap
+
+	// Also load runtime-health for badges
+	type componentHealth struct {
+		FailCount int `json:"fail_count"`
+		WarnCount int `json:"warn_count"`
+	}
+	type healthSummary struct {
+		CPU     componentHealth `json:"cpu"`
+		Memory  componentHealth `json:"memory"`
+		Storage componentHealth `json:"storage"`
+		GPU     componentHealth `json:"gpu"`
+		PSU     componentHealth `json:"psu"`
+		Network componentHealth `json:"network"`
+	}
+	var health struct {
+		HardwareHealth healthSummary `json:"hardware_health"`
+	}
+	if hdata, herr := loadSnapshot(filepath.Join(opts.ExportDir, "runtime-health.json")); herr == nil {
+		_ = json.Unmarshal(hdata, &health)
+	}
+
+	badge := func(h componentHealth) string {
+		if h.FailCount > 0 {
+			return `<span class="badge badge-err">FAIL</span>`
+		}
+		if h.WarnCount > 0 {
+			return `<span class="badge badge-warn">WARN</span>`
+		}
+		return `<span class="badge badge-ok">OK</span>`
+	}
+
+	// Extract readable strings from raw JSON
+	getString := func(key string) string {
+		v, ok := raw[key]
+		if !ok {
+			return ""
+		}
+		var s string
+		if err := json.Unmarshal(v, &s); err == nil {
+			return s
+		}
+		return ""
+	}
+
+	cpuModel := getString("cpu_model")
+	memStr := getString("memory_summary")
+	gpuSummary := getString("gpu_summary")
+
+	var b strings.Builder
+	b.WriteString(`<div class="card"><div class="card-head">Hardware Summary</div><div class="card-body">`)
+	b.WriteString(`<table style="width:auto">`)
+	writeRow := func(label, value, badgeHTML string) {
+		b.WriteString(fmt.Sprintf(`<tr><td style="padding:6px 14px 6px 0;font-weight:700;white-space:nowrap">%s</td><td style="padding:6px 0">%s</td><td style="padding:6px 0 6px 12px">%s</td></tr>`,
+			html.EscapeString(label), html.EscapeString(value), badgeHTML))
+	}
+	if cpuModel != "" {
+		writeRow("CPU", cpuModel, badge(health.HardwareHealth.CPU))
+	} else {
+		writeRow("CPU", "—", badge(health.HardwareHealth.CPU))
+	}
+	if memStr != "" {
+		writeRow("Memory", memStr, badge(health.HardwareHealth.Memory))
+	} else {
+		writeRow("Memory", "—", badge(health.HardwareHealth.Memory))
+	}
+	if gpuSummary != "" {
+		writeRow("GPU", gpuSummary, badge(health.HardwareHealth.GPU))
+	} else {
+		writeRow("GPU", "—", badge(health.HardwareHealth.GPU))
+	}
+	writeRow("Storage", "—", badge(health.HardwareHealth.Storage))
+	writeRow("PSU", "—", badge(health.HardwareHealth.PSU))
+	b.WriteString(`</table>`)
+	b.WriteString(`</div></div>`)
+	return b.String()
+}
+
+func renderAuditModal() string {
+	return `<div id="audit-modal-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;align-items:center;justify-content:center">
+  <div style="background:#fff;border-radius:6px;padding:24px;min-width:480px;max-width:700px;position:relative">
+    <div style="font-weight:700;font-size:16px;margin-bottom:16px">Audit</div>
+    <div style="margin-bottom:12px;display:flex;gap:8px">
+      <button class="btn btn-primary" onclick="auditModalRun()">&#9654; Re-run Audit</button>
+      <a class="btn btn-secondary" href="/audit.json" download>&#8595; Download</a>
+      <a class="btn btn-secondary" href="/viewer" target="_blank">Open Viewer</a>
+    </div>
+    <div id="audit-modal-terminal" class="terminal" style="display:none;max-height:300px"></div>
+    <button class="btn btn-secondary btn-sm" onclick="closeAuditModal()" style="position:absolute;top:12px;right:12px">&#10005;</button>
+  </div>
+</div>
+<script>
+function openAuditModal() {
+  document.getElementById('audit-modal-overlay').style.display='flex';
+}
+function closeAuditModal() {
+  document.getElementById('audit-modal-overlay').style.display='none';
+}
+function auditModalRun() {
+  const term = document.getElementById('audit-modal-terminal');
+  term.style.display='block'; term.textContent='Starting...\n';
+  fetch('/api/audit/run',{method:'POST'}).then(r=>r.json()).then(d=>{
+    const es=new EventSource('/api/tasks/'+d.task_id+'/stream');
+    es.onmessage=e=>{term.textContent+=e.data+'\n';term.scrollTop=term.scrollHeight;};
+    es.addEventListener('done',e=>{es.close();term.textContent+=(e.data?'\nERROR: '+e.data:'\nDone.')+'\n';});
+  });
+}
+</script>`
+}
+
 func renderHealthCard(opts HandlerOptions) string {
 	data, err := loadSnapshot(filepath.Join(opts.ExportDir, "runtime-health.json"))
 	if err != nil {
@@ -239,12 +363,26 @@ func renderHealthCard(opts HandlerOptions) string {
 // ── Metrics ───────────────────────────────────────────────────────────────────

 func renderMetrics() string {
-	return `<p style="color:var(--muted);font-size:13px;margin-bottom:16px">Live metrics — updated every 2 seconds. Charts use go-analyze/charts (grafana theme).</p>
+	return `<p style="color:var(--muted);font-size:13px;margin-bottom:16px">Live metrics — updated every 2 seconds.</p>

 <div class="card" style="margin-bottom:16px">
-  <div class="card-head">Server</div>
+  <div class="card-head">Server — Load</div>
  <div class="card-body" style="padding:8px">
-    <img id="chart-server" src="/api/metrics/chart/server.svg" style="width:100%;display:block;border-radius:6px" alt="Server metrics">
+    <img id="chart-server-load" src="/api/metrics/chart/server-load.svg" style="width:100%;display:block;border-radius:6px" alt="CPU/Mem load">
+  </div>
+</div>
+
+<div class="card" style="margin-bottom:16px">
+  <div class="card-head">Server — Temperature</div>
+  <div class="card-body" style="padding:8px">
+    <img id="chart-server-temp" src="/api/metrics/chart/server-temp.svg" style="width:100%;display:block;border-radius:6px" alt="CPU temperature">
+  </div>
+</div>
+
+<div class="card" style="margin-bottom:16px">
+  <div class="card-head">Server — Power</div>
+  <div class="card-body" style="padding:8px">
+    <img id="chart-server-power" src="/api/metrics/chart/server-power.svg" style="width:100%;display:block;border-radius:6px" alt="System power">
    <div id="sys-table" style="margin-top:8px;font-size:12px"></div>
  </div>
 </div>
@@ -256,12 +394,16 @@ let knownGPUs = [];

 function refreshCharts() {
  const t = '?t=' + Date.now();
-  const srv = document.getElementById('chart-server');
-  if (srv) srv.src = srv.src.split('?')[0] + t;
-  knownGPUs.forEach(idx => {
-    const el = document.getElementById('chart-gpu-' + idx);
+  ['chart-server-load','chart-server-temp','chart-server-power'].forEach(id => {
+    const el = document.getElementById(id);
    if (el) el.src = el.src.split('?')[0] + t;
  });
+  knownGPUs.forEach(idx => {
+    ['load','temp','power'].forEach(kind => {
+      const el = document.getElementById('chart-gpu-' + idx + '-' + kind);
+      if (el) el.src = el.src.split('?')[0] + t;
+    });
+  });
 }
 setInterval(refreshCharts, 2000);

@@ -276,10 +418,19 @@ es.addEventListener('metrics', e => {
    const div = document.createElement('div');
    div.className = 'card';
    div.style.marginBottom = '16px';
-    div.innerHTML = '<div class="card-head">GPU ' + g.index + '</div>' +
+    div.innerHTML =
+      '<div class="card-head">GPU ' + g.index + ' — Load</div>' +
      '<div class="card-body" style="padding:8px">' +
-      '<img id="chart-gpu-' + g.index + '" src="/api/metrics/chart/gpu/' + g.index + '.svg" style="width:100%;display:block;border-radius:6px" alt="GPU ' + g.index + '">' +
-      '<div id="gpu-table-' + g.index + '" style="margin-top:8px;font-size:12px"></div>' +
+        '<img id="chart-gpu-' + g.index + '-load" src="/api/metrics/chart/gpu/' + g.index + '-load.svg" style="width:100%;display:block;border-radius:6px" alt="GPU ' + g.index + ' load">' +
+      '</div>' +
+      '<div class="card-head">GPU ' + g.index + ' — Temperature</div>' +
+      '<div class="card-body" style="padding:8px">' +
+        '<img id="chart-gpu-' + g.index + '-temp" src="/api/metrics/chart/gpu/' + g.index + '-temp.svg" style="width:100%;display:block;border-radius:6px" alt="GPU ' + g.index + ' temp">' +
+      '</div>' +
+      '<div class="card-head">GPU ' + g.index + ' — Power</div>' +
+      '<div class="card-body" style="padding:8px">' +
+        '<img id="chart-gpu-' + g.index + '-power" src="/api/metrics/chart/gpu/' + g.index + '-power.svg" style="width:100%;display:block;border-radius:6px" alt="GPU ' + g.index + ' power">' +
+        '<div id="gpu-table-' + g.index + '" style="margin-top:8px;font-size:12px"></div>' +
      '</div>';
    document.getElementById('gpu-charts').appendChild(div);
  });
@@ -309,15 +460,27 @@ es.onerror = () => {};
 </script>`
 }

-// ── Acceptance Tests ──────────────────────────────────────────────────────────
+// ── Validate (Acceptance Tests) ───────────────────────────────────────────────

-func renderTests() string {
-	return `<p style="color:var(--muted);font-size:13px;margin-bottom:16px">Run hardware acceptance tests and view results.</p>
-<div class="grid2">
+func renderValidate() string {
+	return `<div class="alert alert-info" style="margin-bottom:16px"><strong>Non-destructive:</strong> Validate tests collect diagnostics only. They do not write to disks, do not run sustained load, and do not increment hardware wear counters.</div>
+<p style="color:var(--muted);font-size:13px;margin-bottom:16px">Tasks continue in the background — view progress in <a href="/tasks">Tasks</a>.</p>
+
+<div class="card" style="margin-bottom:16px">
+  <div class="card-head">Run All Tests</div>
+  <div class="card-body" style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
+    <div class="form-row" style="margin:0"><label style="margin-right:6px">Cycles</label><input type="number" id="sat-cycles" value="1" min="1" max="100" style="width:70px;display:inline-block"></div>
+    <button class="btn btn-primary" onclick="runAllSAT()">&#9654; Run All</button>
+    <span id="sat-all-status" style="font-size:12px;color:var(--muted)"></span>
+  </div>
+</div>
+
+<div class="grid3">
 ` + renderSATCard("nvidia", "NVIDIA GPU", `<div class="form-row"><label>Diag Level</label><select id="sat-nvidia-level"><option value="1">Level 1 — Quick</option><option value="2">Level 2 — Standard</option><option value="3">Level 3 — Extended</option><option value="4">Level 4 — Full</option></select></div>`) +
 		renderSATCard("memory", "Memory", "") +
 		renderSATCard("storage", "Storage", "") +
 		renderSATCard("cpu", "CPU", `<div class="form-row"><label>Duration (seconds)</label><input type="number" id="sat-cpu-dur" value="60" min="10"></div>`) +
+		renderSATCard("amd", "AMD GPU", "") +
 		`</div>
 <div id="sat-output" style="display:none;margin-top:16px" class="card">
  <div class="card-head">Test Output <span id="sat-title"></span></div>
@@ -326,82 +489,175 @@ func renderTests() string {
 <script>
 let satES = null;
 function runSAT(target) {
-  if (satES) satES.close();
+  if (satES) { satES.close(); satES = null; }
  const body = {};
  if (target === 'nvidia') body.diag_level = parseInt(document.getElementById('sat-nvidia-level').value)||1;
  if (target === 'cpu') body.duration = parseInt(document.getElementById('sat-cpu-dur').value)||60;
  document.getElementById('sat-output').style.display='block';
  document.getElementById('sat-title').textContent = '— ' + target;
  const term = document.getElementById('sat-terminal');
-  term.textContent = 'Starting ' + target + ' test...\n';
-  fetch('/api/sat/'+target+'/run', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)})
+  term.textContent = 'Enqueuing ' + target + ' test...\n';
+  return fetch('/api/sat/'+target+'/run', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)})
    .then(r => r.json())
    .then(d => {
-      satES = new EventSource('/api/sat/stream?job_id='+d.job_id);
+      term.textContent += 'Task ' + d.task_id + ' queued. Streaming log...\n';
+      satES = new EventSource('/api/tasks/'+d.task_id+'/stream');
      satES.onmessage = e => { term.textContent += e.data+'\n'; term.scrollTop=term.scrollHeight; };
-      satES.addEventListener('done', e => { satES.close(); term.textContent += (e.data ? '\nERROR: '+e.data : '\nCompleted.')+'\n'; });
+      satES.addEventListener('done', e => { satES.close(); satES=null; term.textContent += (e.data ? '\nERROR: '+e.data : '\nCompleted.')+'\n'; });
    });
 }
+function runAllSAT() {
+  const cycles = Math.max(1, parseInt(document.getElementById('sat-cycles').value)||1);
+  const targets = ['nvidia','memory','storage','cpu','amd'];
+  const total = targets.length * cycles;
+  let enqueued = 0;
+  const status = document.getElementById('sat-all-status');
+  status.textContent = 'Enqueuing...';
+  const enqueueNext = (cycle, idx) => {
+    if (cycle >= cycles) { status.textContent = 'Enqueued '+total+' tasks.'; return; }
+    if (idx >= targets.length) { enqueueNext(cycle+1, 0); return; }
+    const target = targets[idx];
+    const btn = document.getElementById('sat-btn-' + target);
+    if (btn && btn.disabled) { enqueueNext(cycle, idx+1); return; }
+    const body = {};
+    if (target === 'nvidia') body.diag_level = parseInt(document.getElementById('sat-nvidia-level').value)||1;
+    if (target === 'cpu') body.duration = parseInt(document.getElementById('sat-cpu-dur').value)||60;
+    fetch('/api/sat/'+target+'/run', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)})
+      .then(r=>r.json()).then(()=>{
+        enqueued++;
+        status.textContent = 'Enqueued '+enqueued+'/'+total+'...';
+        enqueueNext(cycle, idx+1);
+      });
+  };
+  enqueueNext(0, 0);
+}
+</script>
+<script>
+fetch('/api/gpu/presence').then(r=>r.json()).then(gp => {
+    if (!gp.nvidia) disableSATCard('nvidia', 'No NVIDIA GPU detected');
+    if (!gp.amd) disableSATCard('amd', 'No AMD GPU detected');
+});
+function disableSATCard(id, reason) {
+    const btn = document.getElementById('sat-btn-' + id);
+    if (!btn) return;
+    btn.disabled = true;
+    btn.title = reason;
+    btn.style.opacity = '0.4';
+    const card = btn.closest('.card');
+    if (card) {
+        let note = card.querySelector('.sat-unavail');
+        if (!note) {
+            note = document.createElement('p');
+            note.className = 'sat-unavail';
+            note.style.cssText = 'color:var(--muted);font-size:12px;margin-top:6px';
+            btn.parentNode.insertBefore(note, btn.nextSibling);
+        }
+        note.textContent = reason;
+    }
+}
 </script>`
 }

 func renderSATCard(id, label, extra string) string {
-	return fmt.Sprintf(`<div class="card"><div class="card-head">%s</div><div class="card-body">%s<button class="btn btn-primary" onclick="runSAT('%s')">▶ Run Test</button></div></div>`,
-		label, extra, id)
+	return fmt.Sprintf(`<div class="card"><div class="card-head">%s</div><div class="card-body">%s<button id="sat-btn-%s" class="btn btn-primary" onclick="runSAT('%s')">▶ Run Test</button></div></div>`,
+		label, extra, id, id)
 }

-// ── Burn-in ───────────────────────────────────────────────────────────────────
+// ── Burn ──────────────────────────────────────────────────────────────────────

-func renderBurnIn() string {
-	return `<p style="color:var(--muted);font-size:13px;margin-bottom:16px">Long-running GPU and system stress tests. Check <a href="/metrics" style="color:var(--accent)">Metrics</a> page for live telemetry.</p>
-<div class="grid2">
-<div class="card"><div class="card-head">GPU Platform Stress</div><div class="card-body">
+func renderBurn() string {
+	return `<div class="alert alert-warn" style="margin-bottom:16px"><strong>&#9888; Warning:</strong> Stress tests on this page run hardware at maximum load. Repeated or prolonged use may reduce hardware lifespan (storage endurance, GPU wear). Use only when necessary.</div>
+<p style="color:var(--muted);font-size:13px;margin-bottom:16px">Tasks continue in the background — view progress in <a href="/tasks">Tasks</a>.</p>
+<div class="grid3">
+<div class="card"><div class="card-head">NVIDIA GPU Stress</div><div class="card-body">
 <div class="form-row"><label>Duration</label><select id="bi-dur"><option value="600">10 minutes</option><option value="3600">1 hour</option><option value="28800">8 hours</option><option value="86400">24 hours</option></select></div>
-<button class="btn btn-primary" onclick="runBurnIn('nvidia')">▶ Start GPU Stress</button>
+<button id="sat-btn-nvidia" class="btn btn-primary" onclick="runBurnIn('nvidia')">&#9654; Start NVIDIA Stress</button>
 </div></div>
 <div class="card"><div class="card-head">CPU Stress</div><div class="card-body">
 <div class="form-row"><label>Duration (seconds)</label><input type="number" id="bi-cpu-dur" value="300" min="60"></div>
-<button class="btn btn-primary" onclick="runBurnIn('cpu')">▶ Start CPU Stress</button>
+<button class="btn btn-primary" onclick="runBurnIn('cpu')">&#9654; Start CPU Stress</button>
+</div></div>
+<div class="card"><div class="card-head">AMD GPU Stress</div><div class="card-body">
+<p style="color:var(--muted);font-size:12px;margin-bottom:8px">Requires ROCm tools (rocm-bandwidth-test). Missing tools reported as UNSUPPORTED.</p>
+<button id="sat-btn-amd-stress" class="btn btn-primary" onclick="runBurnIn('amd-stress')">&#9654; Start AMD Stress</button>
+</div></div>
+<div class="card"><div class="card-head">Memory Stress</div><div class="card-body">
+<p style="color:var(--muted);font-size:12px;margin-bottom:8px">stress-ng --vm writes and verifies memory patterns across all of RAM. Env: <code>BEE_VM_STRESS_SECONDS</code> (default 300), <code>BEE_VM_STRESS_SIZE_MB</code> (default 80%).</p>
+<button class="btn btn-primary" onclick="runBurnIn('memory-stress')">&#9654; Start Memory Stress</button>
+</div></div>
+<div class="card"><div class="card-head">SAT Stress (stressapptest)</div><div class="card-body">
+<p style="color:var(--muted);font-size:12px;margin-bottom:8px">Google stressapptest saturates CPU, memory and cache buses simultaneously. Env: <code>BEE_SAT_STRESS_SECONDS</code> (default 300), <code>BEE_SAT_STRESS_MB</code> (default auto).</p>
+<button class="btn btn-primary" onclick="runBurnIn('sat-stress')">&#9654; Start SAT Stress</button>
 </div></div>
 </div>
 <div id="bi-output" style="display:none;margin-top:16px" class="card">
-  <div class="card-head">Output</div>
+  <div class="card-head">Output <span id="bi-title"></span></div>
  <div class="card-body"><div id="bi-terminal" class="terminal"></div></div>
 </div>
 <script>
 let biES = null;
 function runBurnIn(target) {
-  if (biES) biES.close();
+  if (biES) { biES.close(); biES = null; }
  const body = {};
  if (target === 'nvidia') body.duration = parseInt(document.getElementById('bi-dur').value)||600;
  if (target === 'cpu') body.duration = parseInt(document.getElementById('bi-cpu-dur').value)||300;
  document.getElementById('bi-output').style.display='block';
+  document.getElementById('bi-title').textContent = '— ' + target;
  const term = document.getElementById('bi-terminal');
-  term.textContent = 'Starting ' + target + ' burn-in...\n';
+  term.textContent = 'Enqueuing ' + target + ' stress...\n';
  fetch('/api/sat/'+target+'/run', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)})
    .then(r => r.json())
    .then(d => {
-      biES = new EventSource('/api/sat/stream?job_id='+d.job_id);
+      term.textContent += 'Task ' + d.task_id + ' queued.\n';
+      biES = new EventSource('/api/tasks/'+d.task_id+'/stream');
      biES.onmessage = e => { term.textContent += e.data+'\n'; term.scrollTop=term.scrollHeight; };
-      biES.addEventListener('done', e => { biES.close(); term.textContent += (e.data ? '\nERROR: '+e.data : '\nCompleted.')+'\n'; });
+      biES.addEventListener('done', e => { biES.close(); biES=null; term.textContent += (e.data ? '\nERROR: '+e.data : '\nCompleted.')+'\n'; });
    });
 }
+</script>
+<script>
+fetch('/api/gpu/presence').then(r=>r.json()).then(gp => {
+    if (!gp.nvidia) disableSATCard('nvidia', 'No NVIDIA GPU detected');
+    if (!gp.amd) disableSATCard('amd-stress', 'No AMD GPU detected');
+});
+function disableSATCard(id, reason) {
+    const btn = document.getElementById('sat-btn-' + id);
+    if (!btn) return;
+    btn.disabled = true;
+    btn.title = reason;
+    btn.style.opacity = '0.4';
+    const card = btn.closest('.card');
+    if (card) {
+        let note = card.querySelector('.sat-unavail');
+        if (!note) {
+            note = document.createElement('p');
+            note.className = 'sat-unavail';
+            note.style.cssText = 'color:var(--muted);font-size:12px;margin-top:6px';
+            btn.parentNode.insertBefore(note, btn.nextSibling);
+        }
+        note.textContent = reason;
+    }
+}
 </script>`
 }

 // ── Network ───────────────────────────────────────────────────────────────────

-func renderNetwork() string {
-	return `<div class="card"><div class="card-head">Network Interfaces</div><div class="card-body">
+// renderNetworkInline returns the network UI without a wrapping card (for embedding in Tools).
+func renderNetworkInline() string {
+	return `<div id="net-pending" style="display:none" class="alert alert-warn">
+<strong>&#9888; Network change applied.</strong> Reverting in <span id="net-countdown">60</span>s unless confirmed.
+<button class="btn btn-primary btn-sm" style="margin-left:8px" onclick="confirmNetChange()">Confirm</button>
+<button class="btn btn-secondary btn-sm" style="margin-left:4px" onclick="rollbackNetChange()">Rollback</button>
+</div>
 <div id="iface-table"><p style="color:var(--muted);font-size:13px">Loading...</p></div>
-</div></div>
-<div class="grid2">
-<div class="card"><div class="card-head">DHCP</div><div class="card-body">
+<div class="grid2" style="margin-top:16px">
+<div><div style="font-weight:700;font-size:13px;margin-bottom:8px">DHCP</div>
 <div class="form-row"><label>Interface (leave empty for all)</label><input type="text" id="dhcp-iface" placeholder="eth0"></div>
-<button class="btn btn-primary" onclick="runDHCP()">▶ Run DHCP</button>
+<button class="btn btn-primary" onclick="runDHCP()">&#9654; Run DHCP</button>
 <div id="dhcp-out" style="margin-top:10px;font-size:12px;color:var(--ok-fg)"></div>
-</div></div>
-<div class="card"><div class="card-head">Static IPv4</div><div class="card-body">
+</div>
+<div><div style="font-weight:700;font-size:13px;margin-bottom:8px">Static IPv4</div>
 <div class="form-row"><label>Interface</label><input type="text" id="st-iface" placeholder="eth0"></div>
 <div class="form-row"><label>Address</label><input type="text" id="st-addr" placeholder="192.168.1.100"></div>
 <div class="form-row"><label>Prefix length</label><input type="text" id="st-prefix" placeholder="24"></div>
@@ -409,19 +665,52 @@ func renderNetwork() string {
 <div class="form-row"><label>DNS (comma-separated)</label><input type="text" id="st-dns" placeholder="8.8.8.8,8.8.4.4"></div>
 <button class="btn btn-primary" onclick="setStatic()">Apply Static IP</button>
 <div id="static-out" style="margin-top:10px;font-size:12px;color:var(--ok-fg)"></div>
-</div></div>
+</div>
 </div>
 <script>
+var _netCountdownTimer = null;
 function loadNetwork() {
  fetch('/api/network').then(r=>r.json()).then(d => {
    const rows = (d.interfaces||[]).map(i =>
-      '<tr><td>'+i.Name+'</td><td><span class="badge '+(i.State==='up'?'badge-ok':'badge-warn')+'">'+i.State+'</span></td><td>'+(i.IPv4||[]).join(', ')+'</td></tr>'
+      '<tr><td>'+i.Name+'</td>' +
+      '<td style="cursor:pointer" onclick="toggleIface(\''+i.Name+'\',\''+i.State+'\')" title="Click to toggle"><span class="badge '+(i.State==='up'?'badge-ok':'badge-warn')+'">'+i.State+'</span></td>' +
+      '<td>'+(i.IPv4||[]).join(', ')+'</td></tr>'
    ).join('');
    document.getElementById('iface-table').innerHTML =
-      '<table><tr><th>Interface</th><th>State</th><th>Addresses</th></tr>'+rows+'</table>' +
+      '<table><tr><th>Interface</th><th>State (click to toggle)</th><th>Addresses</th></tr>'+rows+'</table>' +
      (d.default_route ? '<p style="font-size:12px;color:var(--muted);margin-top:8px">Default route: '+d.default_route+'</p>' : '');
  });
 }
+function toggleIface(iface, currentState) {
+  fetch('/api/network/toggle',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({iface:iface})})
+    .then(r=>r.json()).then(d => {
+      if (d.error) { alert('Error: '+d.error); return; }
+      loadNetwork();
+      showNetPending(d.rollback_in || 60);
+    });
+}
+function showNetPending(secs) {
+  const el = document.getElementById('net-pending');
+  el.style.display = 'block';
+  if (_netCountdownTimer) clearInterval(_netCountdownTimer);
+  let remaining = secs;
+  document.getElementById('net-countdown').textContent = remaining;
+  _netCountdownTimer = setInterval(function() {
+    remaining--;
+    document.getElementById('net-countdown').textContent = remaining;
+    if (remaining <= 0) { clearInterval(_netCountdownTimer); _netCountdownTimer=null; el.style.display='none'; loadNetwork(); }
+  }, 1000);
+}
+function confirmNetChange() {
+  if (_netCountdownTimer) { clearInterval(_netCountdownTimer); _netCountdownTimer=null; }
+  document.getElementById('net-pending').style.display='none';
+  fetch('/api/network/confirm',{method:'POST'});
+}
+function rollbackNetChange() {
+  if (_netCountdownTimer) { clearInterval(_netCountdownTimer); _netCountdownTimer=null; }
+  document.getElementById('net-pending').style.display='none';
+  fetch('/api/network/rollback',{method:'POST'}).then(()=>loadNetwork());
+}
 function runDHCP() {
  const iface = document.getElementById('dhcp-iface').value.trim();
  fetch('/api/network/dhcp',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({interface:iface||'all'})})
@@ -447,13 +736,17 @@ loadNetwork();
 </script>`
 }

+func renderNetwork() string {
+	return `<div class="card"><div class="card-head">Network Interfaces</div><div class="card-body">` +
+		renderNetworkInline() +
+		`</div></div>`
+}
+
 // ── Services ──────────────────────────────────────────────────────────────────

-func renderServices() string {
-	return `<div class="card"><div class="card-head">Bee Services <button class="btn btn-sm btn-secondary" onclick="loadServices()" style="margin-left:auto">↻ Refresh</button></div>
-<div class="card-body">
+func renderServicesInline() string {
+	return `<div style="display:flex;justify-content:flex-end;margin-bottom:8px"><button class="btn btn-sm btn-secondary" onclick="loadServices()">&#8635; Refresh</button></div>
 <div id="svc-table"><p style="color:var(--muted);font-size:13px">Loading...</p></div>
-</div></div>
 <div id="svc-out" style="display:none;margin-top:8px" class="card">
  <div class="card-head">Output</div>
  <div class="card-body" style="padding:10px"><div id="svc-terminal" class="terminal" style="max-height:150px"></div></div>
@@ -497,6 +790,12 @@ loadServices();
 </script>`
 }

+func renderServices() string {
+	return `<div class="card"><div class="card-head">Bee Services</div><div class="card-body">` +
+		renderServicesInline() +
+		`</div></div>`
+}
+
 // ── Export ────────────────────────────────────────────────────────────────────

 func renderExport(exportDir string) string {
@@ -546,14 +845,56 @@ func listExportFiles(exportDir string) ([]string, error) {
 // ── Tools ─────────────────────────────────────────────────────────────────────

 func renderTools() string {
-	return `<div class="card"><div class="card-head">Tool Check <button class="btn btn-sm btn-secondary" onclick="checkTools()" style="margin-left:auto">↻ Check</button></div>
-<div class="card-body"><div id="tools-table"><p style="color:var(--muted);font-size:13px">Click Check to verify installed tools.</p></div></div></div>
+	return `<div class="card" style="margin-bottom:16px">
+  <div class="card-head">Install to RAM</div>
+  <div class="card-body">
+    <p id="ram-status-text" style="color:var(--muted);font-size:13px;margin-bottom:8px">Checking...</p>
+    <button id="ram-install-btn" class="btn btn-primary" onclick="installToRAM()" style="display:none">&#9654; Copy to RAM</button>
+  </div>
+</div>
+<script>
+fetch('/api/system/ram-status').then(r=>r.json()).then(d=>{
+  const txt = document.getElementById('ram-status-text');
+  const btn = document.getElementById('ram-install-btn');
+  if (d.in_ram) {
+    txt.textContent = '✓ Running from RAM — installation media can be safely disconnected.';
+    txt.style.color = 'var(--ok, green)';
+  } else {
+    txt.textContent = 'Live media is mounted from installation device. Copy to RAM to allow media removal.';
+    btn.style.display = '';
+  }
+});
+function installToRAM() {
+  document.getElementById('ram-install-btn').disabled = true;
+  fetch('/api/system/install-to-ram', {method:'POST'}).then(r=>r.json()).then(d=>{
+    window.location.href = '/tasks#' + d.task_id;
+  });
+}
+</script>
+
+<div class="card"><div class="card-head">Support Bundle</div><div class="card-body">
+<p style="font-size:13px;color:var(--muted);margin-bottom:12px">Downloads a tar.gz archive of all audit files, SAT results, and logs.</p>
+<a class="btn btn-primary" href="/export/support.tar.gz">&#8595; Download Support Bundle</a>
+</div></div>
+
+<div class="card"><div class="card-head">Tool Check <button class="btn btn-sm btn-secondary" onclick="checkTools()" style="margin-left:auto">&#8635; Check</button></div>
+<div class="card-body"><div id="tools-table"><p style="color:var(--muted);font-size:13px">Checking...</p></div></div></div>
+
+<div class="card"><div class="card-head">Network</div><div class="card-body">` +
+		renderNetworkInline() + `</div></div>
+
+<div class="card"><div class="card-head">Services</div><div class="card-body">` +
+		renderServicesInline() + `</div></div>
+
+<div class="card"><div class="card-head">Install to Disk</div><div class="card-body">` +
+		renderInstallInline() + `</div></div>
+
 <script>
 function checkTools() {
  document.getElementById('tools-table').innerHTML = '<p style="color:var(--muted);font-size:13px">Checking...</p>';
  fetch('/api/tools/check').then(r=>r.json()).then(tools => {
    const rows = tools.map(t =>
-      '<tr><td>'+t.Name+'</td><td><span class="badge '+(t.OK ? 'badge-ok' : 'badge-err')+'">'+(t.OK ? '✓ '+t.Path : '✗ missing')+'</span></td></tr>'
+      '<tr><td>'+t.Name+'</td><td><span class="badge '+(t.OK ? 'badge-ok' : 'badge-err')+'">'+(t.OK ? '&#10003; '+t.Path : '&#10007; missing')+'</span></td></tr>'
    ).join('');
    document.getElementById('tools-table').innerHTML =
      '<table><tr><th>Tool</th><th>Status</th></tr>'+rows+'</table>';
@@ -565,11 +906,8 @@ checkTools();

 // ── Install to Disk ──────────────────────────────────────────────────────────

-func renderInstall() string {
+func renderInstallInline() string {
 	return `
-<div class="card">
-  <div class="card-head">Install Live System to Disk</div>
-  <div class="card-body">
    <div class="alert alert-warn" style="margin-bottom:16px">
      <strong>Warning:</strong> Installing will <strong>completely erase</strong> the selected
      disk and write the live system onto it. All existing data on the target disk will be lost.
@@ -767,6 +1105,107 @@ installRefreshDisks();
 `
 }

+func renderInstall() string {
+	return `<div class="card"><div class="card-head">Install Live System to Disk</div><div class="card-body">` +
+		renderInstallInline() +
+		`</div></div>`
+}
+
+// ── Tasks ─────────────────────────────────────────────────────────────────────
+
+func renderTasks() string {
+	return `<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
+<button class="btn btn-danger btn-sm" onclick="cancelAll()">Cancel All</button>
+<span style="font-size:12px;color:var(--muted)">Tasks run one at a time. Logs persist after navigation.</span>
+</div>
+<div class="card">
+<div id="tasks-table"><p style="color:var(--muted);font-size:13px;padding:16px">Loading...</p></div>
+</div>
+<div id="task-log-section" style="display:none;margin-top:16px" class="card">
+  <div class="card-head">Logs — <span id="task-log-title"></span>
+    <button class="btn btn-sm btn-secondary" onclick="closeTaskLog()" style="margin-left:auto">&#10005;</button>
+  </div>
+  <div class="card-body"><div id="task-log-terminal" class="terminal" style="max-height:500px"></div></div>
+</div>
+<script>
+var _taskLogES = null;
+var _taskRefreshTimer = null;
+
+function loadTasks() {
+  fetch('/api/tasks').then(r=>r.json()).then(tasks => {
+    if (!tasks || tasks.length === 0) {
+      document.getElementById('tasks-table').innerHTML = '<p style="color:var(--muted);font-size:13px;padding:16px">No tasks.</p>';
+      return;
+    }
+    const rows = tasks.map(t => {
+      const dur = t.started_at ? formatDur(t.started_at, t.done_at) : '';
+      const statusClass = {running:'badge-ok',pending:'badge-unknown',done:'badge-ok',failed:'badge-err',cancelled:'badge-unknown'}[t.status]||'badge-unknown';
+      const statusLabel = {running:'&#9654; running',pending:'pending',done:'&#10003; done',failed:'&#10007; failed',cancelled:'cancelled'}[t.status]||t.status;
+      let actions = '<button class="btn btn-sm btn-secondary" onclick="viewLog(\''+t.id+'\',\''+escHtml(t.name)+'\')">Logs</button>';
+      if (t.status === 'running' || t.status === 'pending') {
+        actions += ' <button class="btn btn-sm btn-danger" onclick="cancelTask(\''+t.id+'\')">Cancel</button>';
+      }
+      if (t.status === 'pending') {
+        actions += ' <button class="btn btn-sm btn-secondary" onclick="setPriority(\''+t.id+'\',1)" title="Increase priority">&#8679;</button>';
+        actions += ' <button class="btn btn-sm btn-secondary" onclick="setPriority(\''+t.id+'\',-1)" title="Decrease priority">&#8681;</button>';
+      }
+      return '<tr><td>'+escHtml(t.name)+'</td>' +
+        '<td><span class="badge '+statusClass+'">'+statusLabel+'</span></td>' +
+        '<td style="font-size:12px;color:var(--muted)">'+fmtTime(t.created_at)+'</td>' +
+        '<td style="font-size:12px;color:var(--muted)">'+dur+'</td>' +
+        '<td>'+t.priority+'</td>' +
+        '<td>'+actions+'</td></tr>';
+    }).join('');
+    document.getElementById('tasks-table').innerHTML =
+      '<table><tr><th>Name</th><th>Status</th><th>Created</th><th>Duration</th><th>Priority</th><th>Actions</th></tr>'+rows+'</table>';
+  });
+}
+
+function escHtml(s) { return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+function fmtTime(s) { if (!s) return ''; try { return new Date(s).toLocaleTimeString(); } catch(e){ return s; } }
+function formatDur(start, end) {
+  try {
+    const s = new Date(start), e = end ? new Date(end) : new Date();
+    const sec = Math.round((e-s)/1000);
+    if (sec < 60) return sec+'s';
+    const m = Math.floor(sec/60), ss = sec%60;
+    return m+'m '+ss+'s';
+  } catch(e){ return ''; }
+}
+
+function cancelTask(id) {
+  fetch('/api/tasks/'+id+'/cancel',{method:'POST'}).then(()=>loadTasks());
+}
+function cancelAll() {
+  fetch('/api/tasks/cancel-all',{method:'POST'}).then(()=>loadTasks());
+}
+function setPriority(id, delta) {
+  fetch('/api/tasks/'+id+'/priority',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({delta:delta})})
+    .then(()=>loadTasks());
+}
+function viewLog(id, name) {
+  if (_taskLogES) { _taskLogES.close(); _taskLogES = null; }
+  document.getElementById('task-log-section').style.display = '';
+  document.getElementById('task-log-title').textContent = name;
+  const term = document.getElementById('task-log-terminal');
+  term.textContent = 'Connecting...\n';
+  _taskLogES = new EventSource('/api/tasks/'+id+'/stream');
+  _taskLogES.onmessage = e => { term.textContent += e.data+'\n'; term.scrollTop=term.scrollHeight; };
+  _taskLogES.addEventListener('done', e => {
+    _taskLogES.close(); _taskLogES=null;
+    term.textContent += (e.data ? '\nERROR: '+e.data : '\nDone.')+'\n';
+  });
+}
+function closeTaskLog() {
+  if (_taskLogES) { _taskLogES.close(); _taskLogES=null; }
+  document.getElementById('task-log-section').style.display='none';
+}
+
+loadTasks();
+_taskRefreshTimer = setInterval(loadTasks, 2000);
+</script>`
+}
+
 func renderExportIndex(exportDir string) (string, error) {
 	entries, err := listExportFiles(exportDir)
 	if err != nil {