From 7010ba7cb8a130f76fb80577387077b26d3da48c Mon Sep 17 00:00:00 2001
From: Me Here <me@here>
Date: Sun, 24 May 2026 18:01:55 -0500
Subject: [PATCH] Move live status into the display under the BPM (drop bottom
 status line)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 index.html | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 4d97f7d..18a2690 100644
--- a/index.html
+++ b/index.html
@@ -55,7 +55,8 @@
   .card h2 { font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin:0 0 14px; }
   .display { background:#0a0d11; border:1px solid #000; border-radius:8px; padding:8px 14px; text-align:center; box-shadow:inset 0 2px 10px rgba(0,0,0,.7); }
   .display .big { font-family:"Courier New",monospace; font-weight:700; font-size:40px; color:#ffd166; letter-spacing:3px; text-shadow:0 0 12px rgba(255,209,102,.5); }
-  .display .ctx { font-family:"Courier New",monospace; font-size:12px; color:#4dd0e1; height:15px; }
+  .display .ctx { font-family:"Courier New",monospace; font-size:12px; color:#4dd0e1; min-height:15px; line-height:1.3; }
+  .display .ctx.muted-cue { color:#ffb454; }
   .knob { margin-bottom:10px; }
   .knob label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; }
   .knob label b { color:#fff; font-variant-numeric:tabular-nums; }
@@ -223,10 +224,8 @@
   <div id="meters"></div>
   <div style="margin-top:10px"><button class="add" id="addMeterBtn">+ Add meter</button></div>
 
-  <!-- (presets moved into the Transport card; set lists live in the slide-out tray) -->
-
-  <div style="height:14px"></div>
-  <div class="sub" id="statusLine">Stopped.</div>
+  <!-- (presets moved into the Transport card; set lists live in the slide-out tray;
+        status now shows under the BPM in the display) -->
 </div>
 
   <!-- Set-list panel: docked beside the metronome; drawer on narrow screens -->
@@ -940,21 +939,24 @@ function drawLoop() {
   requestAnimationFrame(drawLoop);
 }
 
-function updateCtx() {
-  ctxDisplay.textContent = meters.length ? `${meters.length} meter${meters.length > 1 ? "s" : ""}` : "no meters";
-}
+// Status shows in the display, under the BPM. Stopped → meter count; running →
+// bar + trainer/ramp flags (kept short for the narrow display column).
 function updateStatus() {
-  if (!state.running) { statusLine.textContent = meters.length ? "Stopped." : "Add a meter to begin."; return; }
+  if (!state.running) {
+    ctxDisplay.textContent = meters.length ? (meters.length + " meter" + (meters.length > 1 ? "s" : "") + " · ready") : "no meters";
+    ctxDisplay.classList.remove("muted-cue");
+    return;
+  }
   const mbpb = masterBeatsPerBar();
   const barIndex = Math.floor(Math.max(0, masterBeat - 1) / mbpb);
-  let s = `Running · bar ${barIndex + 1} · ${meters.map((m) => m.groups.join("+")).join("  vs  ")}`;
-  if (trainer.on) {
-    const muted = isMutedAt(audioCtx.currentTime);
-    s += muted ? "  —  TRAINER: muted (count!)" : "  —  TRAINER: playing";
-  }
-  if (ramp.on) s += `  —  ramp ${ramp.amount >= 0 ? "+" : ""}${ramp.amount}/${ramp.everyBars} bars`;
-  statusLine.textContent = s;
+  const muted = trainer.on && isMutedAt(audioCtx.currentTime);
+  let s = "▶ bar " + (barIndex + 1);
+  if (trainer.on) s += muted ? " · mute — count!" : " · play";
+  if (ramp.on) s += " · ramp";
+  ctxDisplay.textContent = s;
+  ctxDisplay.classList.toggle("muted-cue", muted);
 }
+function updateCtx() { updateStatus(); }
 
 /* =========================================================================
    UI WIRING