webui: firmware — SSE progress, auto-reboot, URL history

Replace browser-side HTMX polling with a Go SSE endpoint that polls
RESTCONF internally and streams rendered HTML fragments.  This fixes
the "Could not fetch firmware status" crash that occurred when the
RESTCONF server timed out during an upgrade.

- GET /firmware/progress: streams fw-progress-body fragments as SSE;
  events: progress (update), done (success/failure), reboot (auto-reboot)
- Go server polls every second with change detection to suppress
  redundant frames; RESTCONF timeouts leave Installer nil so the
  template renders "Installing..." without crashing
- Auto-reboot checkbox: triggers a reboot after successful install;
  JS handles the reboot SSE event and shows the reboot overlay
- URL history datalist: remembers the last 10 firmware URLs in
  localStorage and offers them as autocomplete suggestions
- Install complete / failed: persistent card replaces the progress
  bar with a green check or red X; includes Reboot to activate button
  when auto-reboot was not selected
- Reboot overlay: simplify to a fixed 4 s initial grace period before
  polling (avoids fast-reboot race where sawDown was never set);
  5 s DeviceStatus timeout keeps polls snappy; window.location.replace
  avoids stale firmware history entries
- Server-side guard: clears Installing flag when installer is already
  Done so navigating back to /firmware?installing=1 after a reboot
  does not re-open the SSE card or trigger a second reboot
- color-scheme: light/dark on .light/.dark fixes native checkbox
  rendering in forced-theme mode

Signed-off-by: Joachim Wiberg <troglobit@gmail.com>

Author: troglobit

src/webui/internal/handlers/system.go

@@ -3,10 +3,14 @@
 package handlers
 
 import (
+	"bytes"
+	"context"
 	"fmt"
 	"html/template"
 	"log"
 	"net/http"
+	"strings"
+	"time"
 
 	"github.com/kernelkit/webui/internal/restconf"
 )
@@ -19,9 +23,12 @@ type SystemHandler struct {
 
 // DeviceStatus returns 200 if the RESTCONF device is reachable, 502 otherwise.
 // Used by the reboot spinner to detect when the device goes down and comes back.
+// A short timeout keeps the poll snappy during the reboot window.
 func (h *SystemHandler) DeviceStatus(w http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 5*time.Second)
+	defer cancel()
 	var target struct{}
-	err := h.RC.Get(r.Context(), "/data/ietf-system:system-state/platform", &target)
+	err := h.RC.Get(ctx, "/data/ietf-system:system-state/platform", &target)
 	if err != nil {
 		w.WriteHeader(http.StatusBadGateway)
 		return
@@ -43,7 +50,7 @@ func (h *SystemHandler) Reboot(w http.ResponseWriter, r *http.Request) {
 	fmt.Fprint(w, rebootSpinnerHTML)
 }
 
-const rebootSpinnerHTML = `<div class="reboot-overlay" data-timeout="120000" data-interval="2000">
+const rebootSpinnerHTML = `<div class="reboot-overlay">
   <div class="reboot-spinner"></div>
   <p class="reboot-message">Rebooting&hellip;</p>
   <p class="reboot-status" id="reboot-status">Waiting for device to shut down&hellip;</p>
@@ -118,6 +125,8 @@ type firmwareData struct {
 	BootOrder    []string
 	Slots        []slotEntry
 	Installer    *installerEntry
+	Installing   bool // install was triggered this session; keep card visible during RAUC phase gaps
+	AutoReboot   bool
 	Error        string
 	Message      string
 }
@@ -136,13 +145,17 @@ type installerEntry struct {
 	Message    string
 	LastError  string
 	Active     bool
+	Done       bool // idle after an install ran (percentage>0 or error set)
+	Success    bool // Done with no error
 }
 
 // Firmware renders the firmware overview page (GET /firmware).
 func (h *SystemHandler) Firmware(w http.ResponseWriter, r *http.Request) {
 	data := firmwareData{
-		PageData: newPageData(r, "firmware", "Firmware"),
-		Message:  r.URL.Query().Get("msg"),
+		PageData:   newPageData(r, "firmware", "Firmware"),
+		Message:    r.URL.Query().Get("msg"),
+		Installing: r.URL.Query().Get("installing") == "1",
+		AutoReboot: r.URL.Query().Get("auto-reboot") == "1",
 	}
 
 	var sw fwSoftwareWrapper
@@ -177,13 +190,11 @@ func (h *SystemHandler) Firmware(w http.ResponseWriter, r *http.Request) {
 			})
 		}
 
-		inst := sw.SystemState.Software.Installer
-		data.Installer = &installerEntry{
-			Operation:  inst.Operation,
-			Percentage: inst.Progress.Percentage,
-			Message:    inst.Progress.Message,
-			LastError:  inst.LastError,
-			Active:     inst.Operation != "" && inst.Operation != "idle",
+		data.Installer = newInstallerEntry(sw.SystemState.Software.Installer)
+		// Don't re-open the SSE progress card for an already-finished install
+		// (e.g. user navigating back to /firmware?installing=1 after reboot).
+		if data.Installer.Done {
+			data.Installing = false
 		}
 	}
 
@@ -224,6 +235,118 @@ func (h *SystemHandler) FirmwareInstall(w http.ResponseWriter, r *http.Request)
 		return
 	}
 
-	w.Header().Set("HX-Redirect", "/firmware?msg=Install+started")
+	target := "/firmware?installing=1"
+	if r.FormValue("auto-reboot") == "1" {
+		target += "&auto-reboot=1"
+	}
+	w.Header().Set("HX-Redirect", target)
 	w.WriteHeader(http.StatusNoContent)
 }
+
+// FirmwareProgress streams installer status as SSE so the Go server does the
+// polling and the browser just receives rendered HTML fragments.
+// GET /firmware/progress
+func (h *SystemHandler) FirmwareProgress(w http.ResponseWriter, r *http.Request) {
+	flusher, ok := w.(http.Flusher)
+	if !ok {
+		http.Error(w, "streaming not supported", http.StatusInternalServerError)
+		return
+	}
+
+	autoReboot := r.URL.Query().Get("auto-reboot") == "1"
+
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("X-Accel-Buffering", "no")
+	w.WriteHeader(http.StatusOK)
+	flusher.Flush()
+
+	ticker := time.NewTicker(time.Second)
+	defer ticker.Stop()
+
+	var lastKey string // change-detection: suppress redundant SSE frames
+
+	for {
+		select {
+		case <-r.Context().Done():
+			return
+		case <-ticker.C:
+			data := h.installerSnapshot(r, autoReboot)
+
+			// Build a cheap key for change detection; skip frames with identical state.
+			var key string
+			if data.Installer != nil {
+				key = fmt.Sprintf("%s|%d|%s|%s", data.Installer.Operation, data.Installer.Percentage, data.Installer.Message, data.Installer.LastError)
+			}
+			if key == lastKey && key != "" {
+				continue
+			}
+			lastKey = key
+
+			var buf bytes.Buffer
+			if err := h.Template.ExecuteTemplate(&buf, "fw-progress-body", data); err != nil {
+				log.Printf("firmware progress template: %v", err)
+				continue
+			}
+
+			// SSE data must not contain raw newlines; collapse to spaces.
+			line := strings.ReplaceAll(buf.String(), "\n", " ")
+
+			eventName := "progress"
+			if data.Installer != nil && data.Installer.Done {
+				if autoReboot && data.Installer.Success {
+					eventName = "reboot"
+				} else {
+					eventName = "done"
+				}
+			}
+
+			fmt.Fprintf(w, "event: %s\ndata: %s\n\n", eventName, line)
+			flusher.Flush()
+
+			if data.Installer != nil && data.Installer.Done {
+				return
+			}
+		}
+	}
+}
+
+// installerSnapshot fetches the current installer state from RESTCONF and
+// builds the template data for the fw-progress-body fragment.
+func (h *SystemHandler) installerSnapshot(r *http.Request, autoReboot bool) firmwareProgressData {
+	data := firmwareProgressData{
+		AutoReboot: autoReboot,
+	}
+
+	var sw fwSoftwareWrapper
+	if err := h.RC.Get(r.Context(), "/data/ietf-system:system-state", &sw); err != nil {
+		// RESTCONF temporarily unavailable during upgrade — leave Installer nil
+		// so the template renders an indeterminate "Installing…" state.
+		log.Printf("firmware progress poll: %v", err)
+		return data
+	}
+
+	data.Installer = newInstallerEntry(sw.SystemState.Software.Installer)
+	return data
+}
+
+// newInstallerEntry converts a raw YANG installer state to the template-facing struct.
+func newInstallerEntry(inst fwInstallerState) *installerEntry {
+	idle := inst.Operation == "" || inst.Operation == "idle"
+	done := idle && (inst.Progress.Percentage > 0 || inst.LastError != "")
+	return &installerEntry{
+		Operation:  inst.Operation,
+		Percentage: inst.Progress.Percentage,
+		Message:    inst.Progress.Message,
+		LastError:  inst.LastError,
+		Active:     !idle,
+		Done:       done,
+		Success:    done && inst.LastError == "",
+	}
+}
+
+// firmwareProgressData is the template data for the fw-progress-body fragment.
+type firmwareProgressData struct {
+	AutoReboot bool
+	Installer  *installerEntry
+}

src/webui/internal/server/server.go

@@ -168,6 +168,7 @@ func New(
 	mux.HandleFunc("GET /firewall", fw.Overview)
 	mux.HandleFunc("GET /keystore", ks.Overview)
 	mux.HandleFunc("GET /firmware", sys.Firmware)
+	mux.HandleFunc("GET /firmware/progress", sys.FirmwareProgress)
 	mux.HandleFunc("POST /firmware/install", sys.FirmwareInstall)
 	mux.HandleFunc("POST /reboot", sys.Reboot)
 	mux.HandleFunc("GET /device-status", sys.DeviceStatus)

src/webui/static/css/style.css

@@ -88,6 +88,7 @@
 
 /* Manual Dark Mode Toggle */
 .dark {
+  color-scheme: dark;
   --bg:            var(--slate-900);
   --surface:       var(--slate-800);
   --fg:            var(--slate-100);
@@ -106,6 +107,7 @@
 
 /* Force Light Mode (override system dark preference) */
 .light {
+  color-scheme: light;
   --bg:            var(--slate-50);
   --surface:       #ffffff;
   --fg:            var(--slate-900);
@@ -1525,12 +1527,36 @@ details.fw-hint[open] summary::before { transform: rotate(90deg); }
   font-size: 0.875rem;
 }
 
-.firmware-form { display: flex; gap: 1rem; align-items: flex-end; }
-.firmware-form .form-group { flex: 1; margin-bottom: 0; }
+.firmware-form .form-group { margin-bottom: 0.75rem; }
+.firmware-form .fw-checkbox-row { margin-bottom: 0.75rem; }
 
-.badge-neutral {
+.fw-checkbox-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--fg-muted);
+  cursor: pointer;
+  user-select: none;
+}
+.fw-checkbox-row input[type="checkbox"] { accent-color: var(--primary); cursor: pointer; }
+
+.fw-result {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+.fw-result svg { flex-shrink: 0; }
+.fw-result-ok { color: var(--success); }
+.fw-result-err { color: var(--danger); }
+.fw-result-body { display: flex; flex-direction: column; }
+.fw-result-actions { margin-top: 1rem; }
+
+/* Compact pill badges used in the firmware slot list and boot-order row. */
+.fw-install-grid .badge-neutral {
   background: var(--slate-200);
-  color: var(--slate-600);
   font-size: 0.65rem;
   font-weight: 600;
   padding: 0.15em 0.5em;
@@ -1540,9 +1566,11 @@ details.fw-hint[open] summary::before { transform: rotate(90deg); }
   vertical-align: middle;
 }
 @media (prefers-color-scheme: dark) {
-  .badge-neutral { background: var(--slate-700); color: var(--slate-300); }
+  .fw-install-grid .badge-neutral { background: var(--slate-700); color: var(--slate-300); }
 }
-.dark .badge-neutral { background: var(--slate-700); color: var(--slate-300); }
+.dark .fw-install-grid .badge-neutral { background: var(--slate-700); color: var(--slate-300); }
+
+.progress-bar-wrap--flush { margin-top: 0; }
 
 .progress-bar-wrap {
   background: var(--slate-200);