Add activity log system for provisioning lifecycle visibility

Hosts stuck in states like pxe_ready had zero visibility into why.
This adds a persistent activity log that records every meaningful
step (state transitions, PXE events, cluster join stages, failures)
and surfaces it on the host detail page with live SSE updates.
Includes a stuck-detection warning banner when a host sits in
pxe_ready for >10 minutes with no iPXE request.

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

internal/web/static/app.css

@@ -391,6 +391,48 @@ main {
 .progress-text { font-size: 0.825rem; color: var(--text); font-weight: 500; }
 .progress-detail { font-size: 0.775rem; color: var(--text-secondary); }
 
+/* === STUCK WARNING === */
+.stuck-warning {
+  background: var(--amber-bg);
+  color: var(--amber);
+  border: 1px solid var(--amber-border);
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-sm);
+  margin-bottom: 1rem;
+  font-size: 0.825rem;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+/* === ACTIVITY LOG === */
+.activity-log { max-height: 400px; overflow-y: auto; }
+.log-entry {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  padding: 0.4rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.825rem;
+}
+.log-entry:last-child { border-bottom: none; }
+.log-time {
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  min-width: 3.5rem;
+  flex-shrink: 0;
+}
+.log-source {
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  min-width: 5rem;
+  flex-shrink: 0;
+}
+.log-msg { color: var(--text); }
+.log-warn .log-msg { color: var(--amber); }
+.log-error .log-msg { color: var(--red); font-weight: 500; }
+
 /* === UTILITY === */
 .inline { display: inline; }
 

internal/web/static/app.js

@@ -10,6 +10,24 @@
     es.addEventListener('host.state_changed', function() {
       window.location.reload();
     });
+    es.addEventListener('activity.logged', function(e) {
+      var data;
+      try { data = JSON.parse(e.data); } catch(_) { return; }
+      var logDiv = document.getElementById('activity-log');
+      if (!logDiv) return;
+      var hostId = logDiv.getAttribute('data-host-id');
+      if (String(data.host_id) !== hostId) return;
+      var empty = logDiv.querySelector('.empty');
+      if (empty) empty.remove();
+      var entry = document.createElement('div');
+      entry.className = 'log-entry log-' + data.level;
+      var t = new Date(data.created_at);
+      var ts = t.getHours().toString().padStart(2,'0') + ':' + t.getMinutes().toString().padStart(2,'0');
+      entry.innerHTML = '<span class="log-time">' + ts + '</span>' +
+        '<span class="log-source">' + data.source + '</span>' +
+        '<span class="log-msg">' + data.message + '</span>';
+      logDiv.insertBefore(entry, logDiv.firstChild);
+    });
     es.onerror = function() {
       dot.className = 'led led-red';
       es.close();