feat(ui): add upgrade status badge in the header

b0bbywan · claude · b0bbywan · commit 7e7ce3974889 · 2026-06-16T13:52:56.000+02:00
Show a status badge next to the title/hostname reflecting the detector
result from GET /upgrade: "à jour", "maj dispo" (update available), or
"vérifier" when no detection has run. The last-check time (checked_at,
passed through verbatim by the backend) is surfaced in the tooltip.

Clicking re-runs detection (POST /upgrade/check); the fresh result lands
via a new section-upgrade SSE fragment, wired from upgrade.info. The SSE
connection is hoisted to &lt;body&gt; so the header badge receives updates.

Co-Authored-By: Claude Opus 4.8 &lt;noreply@anthropic.com&gt;
diff --git a/ui/client.go b/ui/client.go
@@ -226,6 +226,17 @@ func (c *APIClient) GetServices() ([]ServiceView, error) {
 	return convertServices(raw), nil
 }
 
+// GetUpgrade returns the detector status from /upgrade. The endpoint yields
+// JSON null when no detection has run; that decodes to a zero status (Known()
+// is then false), which the badge renders as a neutral "check" prompt.
+func (c *APIClient) GetUpgrade() (*UpgradeStatus, error) {
+	var v UpgradeStatus
+	if err := c.get("/upgrade", &v); err != nil {
+		return nil, err
+	}
+	return &v, nil
+}
+
 func convertServices(raw []Service) []ServiceView {
 	views := make([]ServiceView, 0, len(raw))
 	for _, s := range raw {
diff --git a/ui/handler.go b/ui/handler.go
@@ -134,6 +134,16 @@ func (h *Handler) Dashboard(w http.ResponseWriter, r *http.Request) {
 		}
 	}
 
+	if serverInfo.Backends.Upgrade {
+		logger.Debug("[ui] → API GET /upgrade")
+		if upgradeStatus, err := h.client.GetUpgrade(); err == nil {
+			data.Upgrade = upgradeStatus
+			logger.Debug("[ui] ← API /upgrade: available=%v", upgradeStatus.UpgradeAvailable)
+		} else {
+			logger.Warn("[ui] Failed to fetch upgrade status: %v", err)
+		}
+	}
+
 	// Render template
 	if err := h.tmpl.ExecuteTemplate(w, "dashboard", data); err != nil {
 		logger.Error("[ui] Template execution failed: %v", err)
@@ -217,6 +227,25 @@ func (h *Handler) BluetoothSection(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+// UpgradeSection renders just the upgrade badge (for HTMX updates)
+func (h *Handler) UpgradeSection(w http.ResponseWriter, r *http.Request) {
+	logger.Debug("[ui] %s %s (HTMX section refresh)", r.Method, r.URL.Path)
+
+	logger.Debug("[ui] → API GET /upgrade")
+	status, err := h.client.GetUpgrade()
+	if err != nil {
+		logger.Error("[ui] Failed to fetch upgrade status: %v", err)
+		http.Error(w, "Failed to load upgrade status", http.StatusInternalServerError)
+		return
+	}
+	logger.Debug("[ui] ← API /upgrade: available=%v", status.UpgradeAvailable)
+
+	if err := h.tmpl.ExecuteTemplate(w, "section-upgrade", status); err != nil {
+		logger.Error("[ui] Template execution failed: %v", err)
+		http.Error(w, "Failed to render section", http.StatusInternalServerError)
+	}
+}
+
 // sseSection maps an event type to the SSE event name and the section data fetcher.
 type sseSection struct {
 	name    string
@@ -243,11 +272,27 @@ func fetchBluetooth(h *Handler) (string, any, error) {
 	return "section-bluetooth", status, err
 }
 
+func fetchUpgrade(h *Handler) (string, any, error) {
+	status, err := h.client.GetUpgrade()
+	return "section-upgrade", status, err
+}
+
+func fetchUpgradeRing(h *Handler) (string, any, error) {
+	status, err := h.client.GetUpgrade()
+	var run *UpgradeRun
+	if status != nil {
+		run = status.Run
+	}
+	return "upgrade-ring", run, err
+}
+
 var (
-	mprisSection     = &sseSection{name: "section-mpris", fetchFn: fetchMPRIS}
-	audioSection     = &sseSection{name: "section-audio", fetchFn: fetchAudio}
-	systemdSection   = &sseSection{name: "section-systemd", fetchFn: fetchSystemd}
-	bluetoothSection = &sseSection{name: "section-bluetooth", fetchFn: fetchBluetooth}
+	mprisSection       = &sseSection{name: "section-mpris", fetchFn: fetchMPRIS}
+	audioSection       = &sseSection{name: "section-audio", fetchFn: fetchAudio}
+	systemdSection     = &sseSection{name: "section-systemd", fetchFn: fetchSystemd}
+	bluetoothSection   = &sseSection{name: "section-bluetooth", fetchFn: fetchBluetooth}
+	upgradeSection     = &sseSection{name: "section-upgrade", fetchFn: fetchUpgrade}
+	upgradeRingSection = &sseSection{name: "upgrade-progress", fetchFn: fetchUpgradeRing}
 
 	eventToSection = map[string]*sseSection{
 		events.TypePlayerUpdated: mprisSection,
@@ -266,6 +311,8 @@ var (
 
 		events.TypeServiceUpdated:   systemdSection,
 		events.TypeBluetoothUpdated: bluetoothSection,
+		events.TypeUpgradeInfo:      upgradeSection,
+		events.TypeUpgradeProgress:  upgradeRingSection,
 	}
 )
 
diff --git a/ui/routes.go b/ui/routes.go
@@ -24,6 +24,7 @@ func (h *Handler) RegisterRoutes(mux *http.ServeMux) {
 	mux.HandleFunc("/ui/sections/audio", h.AudioSection)
 	mux.HandleFunc("/ui/sections/systemd", h.SystemdSection)
 	mux.HandleFunc("/ui/sections/bluetooth", h.BluetoothSection)
+	mux.HandleFunc("/ui/sections/upgrade", h.UpgradeSection)
 
 	// Static assets with ETag support (embed.FS has no useful Last-Modified)
 	mux.Handle("/ui/static/", etagHandler(http.StripPrefix("/ui/", http.FileServer(http.FS(staticFS)))))
diff --git a/ui/styles/input.css b/ui/styles/input.css
@@ -58,6 +58,24 @@ button.htmx-request {
 	vertical-align: middle;
 }
 
+/* Upgrade progress ring (circumference 100; fill via stroke-dashoffset) */
+.upgrade-ring {
+	transform: rotate(-90deg);
+}
+.upgrade-ring-track {
+	fill: none;
+	stroke: currentColor;
+	stroke-opacity: 0.2;
+	stroke-width: 4;
+}
+.upgrade-ring-fill {
+	fill: none;
+	stroke: currentColor;
+	stroke-width: 4;
+	stroke-dasharray: 100;
+	stroke-linecap: round;
+}
+
 /* Volume & seek sliders */
 .volume-slider,
 .seek-slider {
diff --git a/ui/templates/base.gohtml b/ui/templates/base.gohtml
@@ -20,7 +20,7 @@
 
 </head>
 
-<body class="min-h-screen bg-zinc-900 text-zinc-100">
+<body class="min-h-screen bg-zinc-900 text-zinc-100" hx-ext="sse" sse-connect="/ui/events">
 	<!-- Responsive sticky header -->
 	<header class="sticky top-0 z-10 border-b border-zinc-800 bg-zinc-900/95 backdrop-blur">
 		<div class="mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8">
@@ -39,6 +39,11 @@
 						</p>
 						{{ end }}
 					</div>
+					{{ if and .ServerInfo .ServerInfo.Backends.Upgrade }}
+					<div sse-swap="section-upgrade" hx-swap="innerHTML">
+						{{ template "section-upgrade" .Upgrade }}
+					</div>
+					{{ end }}
 				</div>
 
 				<!-- Centre slot: PWA promo + transient toasts, naturally centred between title and right block -->
diff --git a/ui/templates/components/icons.gohtml b/ui/templates/components/icons.gohtml
@@ -37,3 +37,7 @@
 {{ define "icon-repeat" }}<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg>{{ end }}
 
 {{ define "icon-repeat-one" }}<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/><path d="M11 10h1v4"/></svg>{{ end }}
+
+{{ define "icon-check" }}<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>{{ end }}
+
+{{ define "icon-arrow-up" }}<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>{{ end }}
diff --git a/ui/templates/components/upgrade_badge.gohtml b/ui/templates/components/upgrade_badge.gohtml
@@ -0,0 +1,49 @@
+{{/*
+	Upgrade status badge for the header. Data is *ui.UpgradeStatus (may be nil).
+	State is icon + colour, no text label. Click installs (POST /upgrade/start,
+	confirmed) when available, else re-runs detection (POST /upgrade/check).
+	While running, the ring is its own sse-swap target updated by upgrade-ring.
+*/}}
+{{ define "section-upgrade" }}
+{{- $checked := .CheckedAtLabel -}}
+{{- if .Running -}}
+	<span class="inline-flex items-center rounded-full bg-gold/10 p-1.5 text-gold [&_svg]:h-4 [&_svg]:w-4"
+	      title="Upgrading…{{ with .Run.Step }} {{ . }}{{ end }}"
+	      sse-swap="upgrade-progress" hx-swap="innerHTML">
+		{{ template "upgrade-ring" .Run }}
+	</span>
+{{- else if .Known -}}
+	{{- if .UpgradeAvailable -}}
+	<button hx-post="/upgrade/start" hx-swap="none"
+	        hx-confirm="Upgrade to {{ .Latest }}?"
+	        class="inline-flex items-center rounded-full bg-gold/10 p-1.5 text-gold transition hover:bg-gold/20 [&_svg]:h-4 [&_svg]:w-4"
+	        title="Upgrade available: {{ .Latest }}{{ if $checked }} · checked {{ $checked }}{{ end }}">
+		{{ template "icon-arrow-up" }}
+	</button>
+	{{- else -}}
+	<button hx-post="/upgrade/check" hx-swap="none"
+	        class="inline-flex items-center rounded-full bg-zinc-700/50 p-1.5 text-zinc-400 transition hover:bg-zinc-700 [&_svg]:h-4 [&_svg]:w-4"
+	        title="Up to date{{ if $checked }} · checked {{ $checked }}{{ end }}">
+		{{ template "icon-check" }}
+	</button>
+	{{- end -}}
+{{- else -}}
+	<button hx-post="/upgrade/check" hx-swap="none"
+	        class="inline-flex items-center rounded-full bg-zinc-700/50 p-1.5 text-zinc-400 transition hover:bg-zinc-700 [&_svg]:h-4 [&_svg]:w-4"
+	        title="Check for upgrades">
+		{{ template "icon-rotate-cw" }}
+	</button>
+{{- end -}}
+{{ end }}
+
+{{/* Progress ring; data is *ui.UpgradeRun (may be nil). Spinner until a percent is streamed. */}}
+{{ define "upgrade-ring" }}
+{{- if .HasPercent -}}
+<svg class="upgrade-ring" viewBox="0 0 36 36">
+	<circle class="upgrade-ring-track" cx="18" cy="18" r="15.915"/>
+	<circle class="upgrade-ring-fill" cx="18" cy="18" r="15.915" stroke-dashoffset="{{ .RingOffset }}"/>
+</svg>
+{{- else -}}
+<span class="spinner"></span>
+{{- end -}}
+{{ end }}
diff --git a/ui/templates/pages/dashboard.gohtml b/ui/templates/pages/dashboard.gohtml
@@ -2,7 +2,7 @@
 {{- $g1 := or .ServerInfo.Backends.Bluetooth .ServerInfo.Backends.PulseAudio -}}
 {{- $g2 := .ServerInfo.Backends.MPRIS -}}
 {{- $g3 := .ServerInfo.Backends.Systemd -}}
-<div hx-ext="sse" sse-connect="/ui/events" class="grid gap-4{{ if or (and $g1 $g2) (and $g1 $g3) (and $g2 $g3) }} sm:grid-cols-2{{ end }}{{ if and $g1 $g2 $g3 }} lg:grid-cols-3{{ end }}">
+<div class="grid gap-4{{ if or (and $g1 $g2) (and $g1 $g3) (and $g2 $g3) }} sm:grid-cols-2{{ end }}{{ if and $g1 $g2 $g3 }} lg:grid-cols-3{{ end }}">
 	{{ if or .ServerInfo.Backends.Bluetooth .ServerInfo.Backends.PulseAudio }}
 	<div class="min-w-0 flex flex-col gap-4">
 		{{ if .ServerInfo.Backends.Bluetooth }}
diff --git a/ui/types.go b/ui/types.go
@@ -30,9 +30,61 @@ type Backends struct {
 	Power      bool `json:"power"`
 	PulseAudio bool `json:"pulseaudio"`
 	Systemd    bool `json:"systemd"`
+	Upgrade    bool `json:"upgrade"`
 	Zeroconf   bool `json:"zeroconf"`
 }
 
+// UpgradeStatus is the GET /upgrade payload: the detector's contract fields plus
+// the live run state. Free detector fields ride under "extra" server-side and
+// are unused here. Latest is empty when no detection has run yet.
+type UpgradeStatus struct {
+	Current          string      `json:"current"`
+	Latest           string      `json:"latest"`
+	UpgradeAvailable bool        `json:"upgrade_available"`
+	CheckedAt        time.Time   `json:"checked_at"`
+	Run              *UpgradeRun `json:"run"`
+}
+
+// UpgradeRun is the live progress of an in-flight upgrade; nil unless one runs.
+// Percent is nil until the script streams it (e.g. after an odio-api restart
+// mid-run), which the badge shows as an indeterminate ring.
+type UpgradeRun struct {
+	State   string `json:"state"`
+	Percent *int   `json:"percent"`
+	Step    string `json:"step"`
+}
+
+func (r *UpgradeRun) HasPercent() bool { return r != nil && r.Percent != nil }
+
+func (r *UpgradeRun) PercentValue() int {
+	if !r.HasPercent() {
+		return 0
+	}
+	return *r.Percent
+}
+
+// RingOffset is the stroke-dashoffset for a circumference-100 ring.
+func (r *UpgradeRun) RingOffset() int { return 100 - r.PercentValue() }
+
+// Known reports whether a detection result is available to display.
+func (u *UpgradeStatus) Known() bool {
+	return u != nil && u.Latest != ""
+}
+
+// Running reports whether an upgrade is in flight.
+func (u *UpgradeStatus) Running() bool {
+	return u != nil && u.Run != nil && u.Run.State == "running"
+}
+
+// CheckedAtLabel is the last-check time for the badge tooltip, in local time,
+// or empty when no detection has run.
+func (u *UpgradeStatus) CheckedAtLabel() string {
+	if u == nil || u.CheckedAt.IsZero() {
+		return ""
+	}
+	return u.CheckedAt.Local().Format("02 Jan 2006, 15:04")
+}
+
 // PlayerCapabilities represents what transport actions a player supports
 type PlayerCapabilities struct {
 	CanPlay       bool `json:"can_play"`
@@ -144,6 +196,7 @@ type DashboardView struct {
 	AudioData  *AudioData
 	Services   []ServiceView
 	Bluetooth  *BluetoothView
+	Upgrade    *UpgradeStatus
 }
 
 // PlayerView is a view-optimized version of Player for templates
