From a500bc559e753b5501147a10bd3f279302bde54a Mon Sep 17 00:00:00 2001
From: Jens Ahrensfeld <jens@jayfield.org>
Date: Sun, 28 Jun 2026 09:34:21 +0200
Subject: [PATCH] Browser GUI: add step and total countdown to header

Shows remaining time for the current step and the entire sud in large
accent-coloured monospace text to the right of the transport buttons,
matching the per-step plate colour. Hidden until a step is active.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SH2D4LRuCnhLSzoYerAfJX
---
 web/app.js     | 25 +++++++++++++++++++++++++
 web/index.html |  4 ++++
 web/style.css  | 29 +++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+)

diff --git a/web/app.js b/web/app.js
index c5f6136..b2af1a6 100644
--- a/web/app.js
+++ b/web/app.js
@@ -270,6 +270,31 @@ function updateStepPlates() {
 			plate.energy.textContent = (i in energyByStep) ? `Energy ${energyByStep[i].toFixed(0)} Wh` : 'Energy —';
 		}
 	});
+	updateHeaderCountdown();
+}
+
+function updateHeaderCountdown() {
+	const currentElapsed = (elapsed !== null) ? elapsed : 0;
+	const n = sudSchedule.length;
+	let stepText = '--:--';
+	let totalText = '--:--';
+	let visible = false;
+	if (n > 0 && sudStepIndex !== null) {
+		visible = true;
+		let endT = forecastStepStarts[sudStepIndex + 1];
+		if (endT === undefined && sudStepIndex === n - 1 && forecastFinished) {
+			endT = forecastFinalT;
+		}
+		if (endT !== undefined) {
+			stepText = formatDuration(Math.max(0, endT - currentElapsed));
+		}
+		if (forecastFinalT !== null && elapsed !== null) {
+			totalText = formatDuration(Math.max(0, forecastFinalT - currentElapsed));
+		}
+	}
+	document.getElementById('hdr-step-remaining').textContent = stepText;
+	document.getElementById('hdr-total-remaining').textContent = totalText;
+	document.getElementById('header-countdown').classList.toggle('hidden', !visible);
 }
 
 // --- Stirrer visualization ---
diff --git a/web/index.html b/web/index.html
index f2cd21e..f51a187 100644
--- a/web/index.html
+++ b/web/index.html
@@ -19,6 +19,10 @@
 		<button id="btn-sud-start" class="transport-btn transport-start" title="Start / Resume">&#9654;</button>
 		<button id="btn-sud-pause" class="transport-btn transport-pause" title="Pause">&#9646;&#9646;</button>
 		<button id="btn-sud-stop"  class="transport-btn transport-stop"  title="Stop">&#9632;</button>
+		<span id="header-countdown" class="hidden">
+			<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">step</span><span id="hdr-step-remaining">--:--</span></span>
+			<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">total</span><span id="hdr-total-remaining">--:--</span></span>
+		</span>
 	</span>
 </header>
 
diff --git a/web/style.css b/web/style.css
index 7017980..c6ec37e 100644
--- a/web/style.css
+++ b/web/style.css
@@ -84,6 +84,35 @@ header#connection-bar {
     border-left: 1px solid var(--border);
 }
 
+/* --- Header countdown --- */
+
+#header-countdown {
+    display: flex;
+    flex-direction: column;
+    gap: 0.05em;
+    padding-left: 0.8em;
+    border-left: 1px solid var(--border);
+}
+.hdr-cdown-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0.35em;
+}
+.hdr-cdown-lbl {
+    font-size: 0.65em;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    width: 2.8em;
+}
+#hdr-step-remaining,
+#hdr-total-remaining {
+    font-family: 'Courier New', 'Lucida Console', monospace;
+    font-weight: bold;
+    font-size: 1.35em;
+    color: var(--accent);
+}
+
 /* --- Transport buttons (circular, coloured) --- */
 
 .transport-btn {