From b2c31945609ace49500babe9ce26ad5082ed3ee1 Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Wed, 23 Sep 2026 14:11:43 +0100
Subject: [PATCH 1/4] Stop the click's panel looking live while the click is
 off

With the click track switched off, two things in its own panel went on saying
otherwise (#655). Grid stayed lit with the beat grid editor still open, and
the count-in kept the tint that marks it as armed, though a count-in counts
into the click and does not play without it. The reporter read both as
settings that would still take effect, which is the fair reading.

The count-in tint now requires the click to be on as well as a length to be
chosen. Only the tint follows the click: the length stays in the select, so
switching the click back on brings the count-in back as it was.

The grid editor is a click-track tool. It edits the beats the click plays, the
live click and the exported one, and it is only available while there is a
metronome. So switching the click off closes it, from the button or the K
shortcut, and opening it with the click off switches the click on, the same
way choosing a vocal mode switches vocals on. Closing the editor leaves the
click alone: Done means finished editing, not stop the click.

beatgridUi already imports from transport, so the editor subscribes to the
toggle through onMetronomeToggle rather than transport importing back into
it. toggleMetronome is the one path every on and off goes through.

The existing count-in test asserted the armed tint with the click off, which
is the state #655 reports as wrong. It now switches the click on first. The
five new tests fail against main and pass here.
---
 static/js/beatgridUi.js        | 11 +++-
 static/js/transport.js         | 30 ++++++++++-
 tests/e2e/click-track.spec.mjs | 92 +++++++++++++++++++++++++++++++++-
 3 files changed, 130 insertions(+), 3 deletions(-)

diff --git a/static/js/beatgridUi.js b/static/js/beatgridUi.js
index da6ab59d..ea3b655f 100644
--- a/static/js/beatgridUi.js
+++ b/static/js/beatgridUi.js
@@ -13,7 +13,7 @@ import {
   undoBeatGrid, redoBeatGrid, resetBeatGrid, canUndo, canRedo,
   barLengthAt, setBarLengthAt, getBeats,
 } from "./beatgrid.js";
-import { applyMetronomeAccent } from "./transport.js";
+import { applyMetronomeAccent, toggleMetronome, onMetronomeToggle } from "./transport.js";
 
 const TOOL_BTNS = [
   ["bg-tool-move", "move", "Drag a beat to retime the region. Alt-drag moves one beat."],
@@ -56,6 +56,12 @@ export function toggleBeatGridEditor(force) {
   if (!bgToolbar) return;
   const next = force === undefined ? !isBeatGridEditing() : !!force;
   if (next && !_available) return;
+  // The editor is a click-track tool: it edits the beats the click plays, and
+  // the way to check an edit is to hear it. So opening it switches the click
+  // on, the same way choosing a vocal mode switches vocals on, and switching
+  // the click off closes it (see wireBeatGridUi). Otherwise Grid could stay
+  // lit inside the panel of a feature that is off (#655).
+  if (next) toggleMetronome(true);
   setBeatGridEditing(next);
   bgToolbar.classList.toggle("hidden", !next);
   // The Grid button is a press-to-open toggle like the click and count-in
@@ -101,6 +107,9 @@ export function wireBeatGridUi() {
   });
 
   metroEditBtn?.addEventListener("click", () => toggleBeatGridEditor());
+  onMetronomeToggle((on) => {
+    if (!on && isBeatGridEditing()) toggleBeatGridEditor(false);
+  });
 
   bgUndoBtn?.addEventListener("click", () => { undoBeatGrid(); syncBeatGridButtons(); });
   bgRedoBtn?.addEventListener("click", () => { redoBeatGrid(); syncBeatGridButtons(); });
diff --git a/static/js/transport.js b/static/js/transport.js
index 3b610a9c..9d99cbba 100644
--- a/static/js/transport.js
+++ b/static/js/transport.js
@@ -1239,7 +1239,25 @@ function _renderCountIn() {
   metroCountInEl.value = String(metronomeCountInBars);
   // The wrap carries the "on" tint the toggle button used to, so the panel
   // still shows at a glance that a count-in is armed.
-  metroCountInEl.parentElement?.classList.toggle("active", metronomeCountInBars > 0);
+  //
+  // Armed means it will play, and a count-in counts into the click, so with
+  // the click off it will not (#655). The length the user chose stays in the
+  // select, so switching the click back on brings the count-in back as it was;
+  // only the tint that claims it is live follows the click.
+  metroCountInEl.parentElement?.classList.toggle(
+    "active",
+    metronomeEnabled && metronomeCountInBars > 0,
+  );
+}
+
+// Things that have to follow the click on and off but live in modules this
+// one cannot import without a cycle: the beat grid editor imports from here.
+const _metronomeListeners = new Set();
+
+/** Calls `fn(on)` whenever the click track is switched on or off. */
+export function onMetronomeToggle(fn) {
+  _metronomeListeners.add(fn);
+  return () => _metronomeListeners.delete(fn);
 }
 
 export function toggleMetronome(force) {
@@ -1250,6 +1268,16 @@ export function toggleMetronome(force) {
   metroBtn.setAttribute("aria-pressed", on ? "true" : "false");
   metronome?.setEnabled(on);
   _saveMetroPrefs();
+  // Everything in the click's own panel that shows a live state has to agree
+  // with the click. The count-in is here; the grid editor listens.
+  _renderCountIn();
+  for (const fn of _metronomeListeners) {
+    try {
+      fn(on);
+    } catch (e) {
+      console.warn("[metronome] toggle listener failed:", e);
+    }
+  }
 }
 
 /**
diff --git a/tests/e2e/click-track.spec.mjs b/tests/e2e/click-track.spec.mjs
index 75d6772a..cbf9a31f 100644
--- a/tests/e2e/click-track.spec.mjs
+++ b/tests/e2e/click-track.spec.mjs
@@ -7,7 +7,7 @@
 // though it covered them. The first test is the one that would have caught it.
 
 import { test, expect } from "@playwright/test";
-import { openStudio, waitForClickTrack } from "./helpers.mjs";
+import { openStudio, waitForClickTrack, openClickOptions } from "./helpers.mjs";
 
 const metro = (page) => ({
   toggle: page.locator("#t-metro"),
@@ -60,6 +60,8 @@ test.describe("click track", () => {
     // moved to the wrapper with it.
     await metro(page).countIn.selectOption("3");
     await expect(metro(page).countIn).toHaveValue("3");
+    // Armed means it will play, and it only plays into the click (#655).
+    await metro(page).toggle.click();
     await expect(page.locator("#t-metro-countin").locator("xpath=..")).toHaveClass(/active/);
 
     await openStudio(page, { tauri: true });
@@ -174,6 +176,94 @@ test.describe("click track", () => {
     await expect(ui.note).toContainText("accenting 4/4 from the detected downbeat");
   });
 
+  // #655: with the click off, nothing in its panel may look live. The count-in
+  // and the grid editor were both still lit after the click was switched off,
+  // which read as though they would do something they would not.
+  test("the count-in stops looking armed while the click is off", async ({ page }) => {
+    await openStudio(page, { tauri: true });
+    await waitForClickTrack(page);
+    const ui = metro(page);
+    const wrap = page.locator("#t-metro-countin").locator("xpath=..");
+
+    // The toggle sits outside the options popover, so pressing it closes the
+    // popover when the options are folded; open it again before reaching in.
+    await ui.toggle.click();
+    await openClickOptions(page);
+    await ui.countIn.selectOption("2");
+    await expect(wrap).toHaveClass(/active/);
+
+    await ui.toggle.click();
+    await expect(wrap).not.toHaveClass(/active/);
+    // Only the tint follows the click. The length is a setting and stays, so
+    // switching the click back on brings the count-in back as it was.
+    await expect(ui.countIn).toHaveValue("2");
+
+    await ui.toggle.click();
+    await expect(wrap).toHaveClass(/active/);
+  });
+
+  test("switching the click off closes the grid editor", async ({ page }) => {
+    await openStudio(page, { tauri: true });
+    await waitForClickTrack(page);
+    const ui = metro(page);
+    const toolbar = page.locator("#beatgrid-toolbar");
+
+    await ui.grid.click();
+    await expect(toolbar).not.toHaveClass(/hidden/);
+
+    await ui.toggle.click();
+    await expect(ui.toggle).toHaveAttribute("aria-pressed", "false");
+    await expect(toolbar).toHaveClass(/hidden/);
+    await expect(ui.grid).not.toHaveClass(/active/);
+    await expect(ui.grid).toHaveAttribute("aria-pressed", "false");
+  });
+
+  test("the K shortcut closes it too", async ({ page }) => {
+    // The shortcut and the button are two ways into the same toggle, and the
+    // editor has to follow both.
+    await openStudio(page, { tauri: true });
+    await waitForClickTrack(page);
+    const ui = metro(page);
+    const toolbar = page.locator("#beatgrid-toolbar");
+
+    await ui.grid.click();
+    await expect(toolbar).not.toHaveClass(/hidden/);
+
+    await page.locator("body").press("k");
+    await expect(ui.toggle).toHaveAttribute("aria-pressed", "false");
+    await expect(toolbar).toHaveClass(/hidden/);
+  });
+
+  test("opening the grid editor with the click off switches the click on", async ({ page }) => {
+    // The editor edits the beats the click plays, and the way to check an edit
+    // is to hear it. Opening it while the click is off would light Grid inside
+    // the panel of a feature that is off, so it asks for the click as well.
+    await openStudio(page, { tauri: true });
+    await waitForClickTrack(page);
+    const ui = metro(page);
+    await expect(ui.toggle).toHaveAttribute("aria-pressed", "false");
+
+    await ui.grid.click();
+
+    await expect(page.locator("#beatgrid-toolbar")).not.toHaveClass(/hidden/);
+    await expect(ui.toggle).toHaveAttribute("aria-pressed", "true");
+    await expect(ui.grid).toHaveClass(/active/);
+  });
+
+  test("closing the grid editor leaves the click as it was", async ({ page }) => {
+    // Only the click can close the editor, not the other way round: Done is
+    // "finished editing", not "stop the click".
+    await openStudio(page, { tauri: true });
+    await waitForClickTrack(page);
+    const ui = metro(page);
+
+    await ui.grid.click();
+    await page.locator("#bg-done").click();
+
+    await expect(ui.grid).not.toHaveClass(/active/);
+    await expect(ui.toggle).toHaveAttribute("aria-pressed", "true");
+  });
+
   test("Grid opens and closes the beat-grid editor", async ({ page }) => {
     await openStudio(page, { tauri: true });
     await waitForClickTrack(page);

From 4c7e0b4d0a2b0f5f0944c537bedd33bd01583969 Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Wed, 23 Sep 2026 15:24:02 +0100
Subject: [PATCH 2/4] Show the click track toggle as its icon alone

The on/off button carried a fixed label, ON, in every language. It never
changed, so with the click off it still said ON and only the missing gold
highlight said otherwise (#681). It turned up in the screenshots taken to
check #655, which is the same complaint about a different control.

Making it say OFF would have put the state on the button twice, in the word
and in the highlight, and the word is the less reliable of the two: on a label
"ON" reads as a state and as a command to switch on equally well. The
highlight is already unambiguous and is how the rest of that row shows state.
The #655 reporter suggested exactly this, a metronome icon alone, and it gives
width back to a row that already folds its options away when narrow.

The button keeps its accessible name and tooltip, "Click track (K)", so a
screen reader and a hover lose nothing. It is square like the volume button
beside it rather than a narrower pill. The Grid button shares the class and
keeps its label, so the change is a modifier on this button only. The
click.on key has nothing left to label and is gone from all ten tables.
---
 static/css/daw.css             |  7 +++++++
 static/index.html              |  7 +++++--
 static/js/i18n.js              | 10 ----------
 tests/e2e/click-track.spec.mjs | 21 +++++++++++++++++++++
 4 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/static/css/daw.css b/static/css/daw.css
index 71ab4f1c..f0f16e67 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -2877,6 +2877,13 @@ input, textarea { font-family: inherit; }
   background: rgba(232,200,64,0.18); border-color: rgba(232,200,64,0.55); color: var(--accent);
 }
 .click-metro-icon { flex-shrink: 0; }
+/* The on/off toggle is the icon alone (#681), square like the volume button
+   beside it. The Grid button shares the class above and keeps its label. */
+.click-toggle-btn.click-toggle-icon {
+  width: 34px;
+  padding: 0;
+  justify-content: center;
+}
 
 /* Beat grid editor: canvas overlay + toolbar */
 .beatgrid-canvas {
diff --git a/static/index.html b/static/index.html
index 42640ef5..fbe7695c 100644
--- a/static/index.html
+++ b/static/index.html
@@ -851,11 +851,14 @@
           <div class="footer-group footer-group-click" id="t-metro-wrap">
             <span class="footer-group-label" data-i18n="click.group">Click track</span>
             <div class="footer-group-body">
-              <button class="click-toggle-btn" id="t-metro" type="button" title="Click track (K)" aria-label="Click track" data-i18n-title="click.toggleTitle" data-i18n-aria-label="click.toggleAria" aria-pressed="false" disabled>
+              <!-- The icon alone (#681). It used to carry the word ON, which never
+                   changed, so with the click off it still said ON. The gold
+                   highlight is the state; the name is in the aria-label and the
+                   tooltip. -->
+              <button class="click-toggle-btn click-toggle-icon" id="t-metro" type="button" title="Click track (K)" aria-label="Click track" data-i18n-title="click.toggleTitle" data-i18n-aria-label="click.toggleAria" aria-pressed="false" disabled>
                 <svg class="click-metro-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                   <path d="M9 3h6l4 18H5z"/><path d="M15.5 9 8 15"/>
                 </svg>
-                <span data-i18n="click.on">ON</span>
               </button>
               <!-- Beside the on/off pill rather than among the options: how
                    loud the click is belongs with whether it is running, and it
diff --git a/static/js/i18n.js b/static/js/i18n.js
index 795ee246..7f8b62dc 100644
--- a/static/js/i18n.js
+++ b/static/js/i18n.js
@@ -435,7 +435,6 @@ const en = {
   "click.toggleTitle": "Click track (K)",
   "click.toggleAria": "Click track",
   "click.unavailableAria": "Click track unavailable",
-  "click.on": "ON",
   "click.optionsAria": "Click track options",
   "click.countIn": "Count-in",
   "click.countInTitle": "Bars of click before the song starts when you press play",
@@ -1052,7 +1051,6 @@ const pl = {
   "click.toggleTitle": "Metronom (K)",
   "click.toggleAria": "Metronom",
   "click.unavailableAria": "Metronom niedostępny",
-  "click.on": "WŁ.",
   "click.optionsAria": "Opcje metronomu",
   "click.countIn": "Odliczanie",
   "click.countInTitle": "Takty metronomu przed rozpoczęciem utworu po naciśnięciu odtwarzania",
@@ -1660,7 +1658,6 @@ const ja = {
   "click.toggleTitle": "クリックトラック (K)",
   "click.toggleAria": "クリックトラック",
   "click.unavailableAria": "クリックトラック利用不可",
-  "click.on": "オン",
   "click.optionsAria": "クリックトラックオプション",
   "click.countIn": "カウントイン",
   "click.countInTitle": "再生を押すと曲が始まる前に鳴らすクリックの小節数",
@@ -2244,7 +2241,6 @@ const zhHans = {
   "click.toggleTitle": "节拍器 (K)",
   "click.toggleAria": "节拍器",
   "click.unavailableAria": "节拍器不可用",
-  "click.on": "开启",
   "click.optionsAria": "节拍器选项",
   "click.countIn": "预备拍",
   "click.countInTitle": "按下播放后,在歌曲开始前的节拍小节数",
@@ -2829,7 +2825,6 @@ const de = {
   "click.toggleTitle": "Click-Track (K)",
   "click.toggleAria": "Click-Track",
   "click.unavailableAria": "Click-Track nicht verfügbar",
-  "click.on": "EIN",
   "click.optionsAria": "Click-Track-Optionen",
   "click.countIn": "Vorzähler",
   "click.countInTitle": "Takte Click, bevor der Song bei Wiedergabe beginnt",
@@ -3424,7 +3419,6 @@ const pt = {
   "click.toggleTitle": "Clique de referência (K)",
   "click.toggleAria": "Clique de referência",
   "click.unavailableAria": "Clique de referência indisponível",
-  "click.on": "LIGADO",
   "click.optionsAria": "Opções do clique de referência",
   "click.countIn": "Contagem",
   "click.countInTitle": "Compassos de clique antes de a música começar ao pressionar reproduzir",
@@ -4020,7 +4014,6 @@ const id = {
   "click.toggleTitle": "Click track (K)",
   "click.toggleAria": "Click track",
   "click.unavailableAria": "Click track tidak tersedia",
-  "click.on": "AKTIF",
   "click.optionsAria": "Opsi click track",
   "click.countIn": "Hitungan awal",
   "click.countInTitle": "Birama klik sebelum lagu dimulai saat menekan putar",
@@ -4605,7 +4598,6 @@ const fr = {
   "click.toggleTitle": "Métronome (K)",
   "click.toggleAria": "Métronome",
   "click.unavailableAria": "Métronome indisponible",
-  "click.on": "ACTIVÉ",
   "click.optionsAria": "Options du métronome",
   "click.countIn": "Décompte",
   "click.countInTitle": "Mesures de décompte avant le début du morceau lors de la lecture",
@@ -5319,7 +5311,6 @@ const es = {
   "click.toggleTitle": "Click (K)",
   "click.toggleAria": "Click",
   "click.unavailableAria": "Click no disponible",
-  "click.on": "SÍ",
   "click.optionsAria": "Opciones del click",
   "click.countIn": "Cuenta de entrada",
   "click.countInTitle": "Compases de click antes de que empiece la canción al pulsar reproducir",
@@ -5936,7 +5927,6 @@ const ko = {
   "click.toggleTitle": "클릭 트랙 (K)",
   "click.toggleAria": "클릭 트랙",
   "click.unavailableAria": "클릭 트랙을 쓸 수 없음",
-  "click.on": "켜기",
   "click.optionsAria": "클릭 트랙 옵션",
   "click.countIn": "카운트인",
   "click.countInTitle": "재생을 누르면 곡이 시작하기 전에 울릴 클릭 마디 수",
diff --git a/tests/e2e/click-track.spec.mjs b/tests/e2e/click-track.spec.mjs
index cbf9a31f..29d02e39 100644
--- a/tests/e2e/click-track.spec.mjs
+++ b/tests/e2e/click-track.spec.mjs
@@ -52,6 +52,27 @@ test.describe("click track", () => {
     await expect(ui.toggle).toHaveAttribute("aria-pressed", "false");
   });
 
+  test("the on/off button is the icon alone, and still says what it is", async ({ page }) => {
+    // It used to carry the word ON, which never changed, so with the click off
+    // it still read ON (#681). The highlight is the state now. The name moved
+    // nowhere: it was always in aria-label and the tooltip, which is what a
+    // screen reader and a hover use.
+    await openStudio(page, { tauri: true });
+    await waitForClickTrack(page);
+    const ui = metro(page);
+
+    await expect(ui.toggle).toHaveText("");
+    await expect(ui.toggle).toHaveAccessibleName("Click track");
+    await expect(ui.toggle).toHaveAttribute("title", "Click track (K)");
+
+    // Square, and the same size as the volume button beside it.
+    const box = await ui.toggle.boundingBox();
+    const vol = await page.locator("#t-metro-vol-btn").boundingBox();
+    expect(Math.round(box.width)).toBe(Math.round(box.height));
+    expect(Math.round(box.width)).toBe(Math.round(vol.width));
+    expect(Math.round(box.height)).toBe(Math.round(vol.height));
+  });
+
   test("the count-in length is chosen from the select and survives a reload", async ({ page }) => {
     await openStudio(page, { tauri: true });
     await waitForClickTrack(page);

From 3b73a3fb7a7d1629c396f9bcf10180464625299a Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Wed, 23 Sep 2026 16:19:30 +0100
Subject: [PATCH 3/4] Keep the count-in armed while the click is off

b2c3194 took the count-in's armed tint away whenever the click track was off,
on the grounds that a count-in counts into the click and does not play
without it. That was wrong. The count-in is built to play on its own: the
metronome's playCountIn is documented as independent of the running click,
"so a count-in can precede a clean (click-off) playback", and _armCountIn says
the same.

It seemed not to because of a separate fault, fixed in the next commit: only
the first play of a track ever counted in, with the click on or off. The #655
reporter switched the click off, played again, heard no count-in, and read it
as the two being tied together. So did I, in the reply on that issue.

With that fixed, un-tinting it would say a count-in is not armed when it is
about to play. The tint is back to meaning a length is chosen. The grid editor
still follows the click, since that one really is a click tool.
---
 static/js/transport.js         | 18 +++++-------------
 tests/e2e/click-track.spec.mjs | 25 +++++++------------------
 2 files changed, 12 insertions(+), 31 deletions(-)

diff --git a/static/js/transport.js b/static/js/transport.js
index 9d99cbba..1507a5d0 100644
--- a/static/js/transport.js
+++ b/static/js/transport.js
@@ -1238,16 +1238,9 @@ function _renderCountIn() {
   if (!metroCountInEl) return;
   metroCountInEl.value = String(metronomeCountInBars);
   // The wrap carries the "on" tint the toggle button used to, so the panel
-  // still shows at a glance that a count-in is armed.
-  //
-  // Armed means it will play, and a count-in counts into the click, so with
-  // the click off it will not (#655). The length the user chose stays in the
-  // select, so switching the click back on brings the count-in back as it was;
-  // only the tint that claims it is live follows the click.
-  metroCountInEl.parentElement?.classList.toggle(
-    "active",
-    metronomeEnabled && metronomeCountInBars > 0,
-  );
+  // still shows at a glance that a count-in is armed. Armed whether or not the
+  // running click is on: the count-in plays on its own (see _armCountIn).
+  metroCountInEl.parentElement?.classList.toggle("active", metronomeCountInBars > 0);
 }
 
 // Things that have to follow the click on and off but live in modules this
@@ -1268,9 +1261,8 @@ export function toggleMetronome(force) {
   metroBtn.setAttribute("aria-pressed", on ? "true" : "false");
   metronome?.setEnabled(on);
   _saveMetroPrefs();
-  // Everything in the click's own panel that shows a live state has to agree
-  // with the click. The count-in is here; the grid editor listens.
-  _renderCountIn();
+  // The grid editor follows the click; see beatgridUi. The count-in does not,
+  // because it plays with the click off as well as on.
   for (const fn of _metronomeListeners) {
     try {
       fn(on);
diff --git a/tests/e2e/click-track.spec.mjs b/tests/e2e/click-track.spec.mjs
index 29d02e39..4cf3248e 100644
--- a/tests/e2e/click-track.spec.mjs
+++ b/tests/e2e/click-track.spec.mjs
@@ -7,7 +7,7 @@
 // though it covered them. The first test is the one that would have caught it.
 
 import { test, expect } from "@playwright/test";
-import { openStudio, waitForClickTrack, openClickOptions } from "./helpers.mjs";
+import { openStudio, waitForClickTrack } from "./helpers.mjs";
 
 const metro = (page) => ({
   toggle: page.locator("#t-metro"),
@@ -81,8 +81,6 @@ test.describe("click track", () => {
     // moved to the wrapper with it.
     await metro(page).countIn.selectOption("3");
     await expect(metro(page).countIn).toHaveValue("3");
-    // Armed means it will play, and it only plays into the click (#655).
-    await metro(page).toggle.click();
     await expect(page.locator("#t-metro-countin").locator("xpath=..")).toHaveClass(/active/);
 
     await openStudio(page, { tauri: true });
@@ -197,30 +195,21 @@ test.describe("click track", () => {
     await expect(ui.note).toContainText("accenting 4/4 from the detected downbeat");
   });
 
-  // #655: with the click off, nothing in its panel may look live. The count-in
-  // and the grid editor were both still lit after the click was switched off,
-  // which read as though they would do something they would not.
-  test("the count-in stops looking armed while the click is off", async ({ page }) => {
+  // #655: the grid editor was still open and lit after the click was switched
+  // off. It is a click tool, so it follows the click. The count-in does not:
+  // it plays with the click off, so it stays armed (count-in-replay.spec.mjs).
+  test("the count-in stays armed when the click is switched off", async ({ page }) => {
     await openStudio(page, { tauri: true });
     await waitForClickTrack(page);
     const ui = metro(page);
     const wrap = page.locator("#t-metro-countin").locator("xpath=..");
 
-    // The toggle sits outside the options popover, so pressing it closes the
-    // popover when the options are folded; open it again before reaching in.
-    await ui.toggle.click();
-    await openClickOptions(page);
     await ui.countIn.selectOption("2");
-    await expect(wrap).toHaveClass(/active/);
-
     await ui.toggle.click();
-    await expect(wrap).not.toHaveClass(/active/);
-    // Only the tint follows the click. The length is a setting and stays, so
-    // switching the click back on brings the count-in back as it was.
-    await expect(ui.countIn).toHaveValue("2");
-
     await ui.toggle.click();
+    await expect(ui.toggle).toHaveAttribute("aria-pressed", "false");
     await expect(wrap).toHaveClass(/active/);
+    await expect(ui.countIn).toHaveValue("2");
   });
 
   test("switching the click off closes the grid editor", async ({ page }) => {

From 62cba477b0d7cde3ee7f8889ebca90f408ecccc6 Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Wed, 23 Sep 2026 16:19:31 +0100
Subject: [PATCH 4/4] Count in on every play, not only the first

A count-in only ever played on the first press of play for a track. After a
stop, a pause or the end of the track it was handed its clicks and every one
of them was already in the past, which Web Audio drops without a sound. With
the click on or off. It is what the #655 reporter heard as "the count-in does
not work with the click off": their second play.

The count-in is placed against the engine's clock for the start it precedes,
and it was placed as soon as play() returned. The streaming engine, which is
the default, only sets that clock once the chunk it starts from is decoded,
and chunks behind the playhead are evicted, so Stop and play again goes back
to a chunk that is gone and takes the fetch path. The clicks were then placed
against the previous start's clock. Measured: on the second play the audio
clock was at 4.20 while the clicks mapped to 0.21 through 1.71.

Its own comment said the count-in "only takes effect on the common
cached-chunk-0 path" and that chunk 0 is "virtually always already cached".
True for the first play of a track, and for no play after it.

play() now resolves when the engine's clock describes the new start: true
once it is scheduled, false if the start was abandoned, paused first or the
fetch failed. Both engines keep that contract; the buffered one always
resolves at once. The count-in waits for it, holds the metronome that existed
when it was armed rather than whatever the live binding points at by then,
and is dropped if a pause or Stop overtook it. A count-in lead is honoured on
the fetch path too, not only the cached one.

The streaming engine also did not do what the buffered one does at the end of
a track: play from the end starts again from the top. The transport places the
count-in on that assumption, so after the end it led into 0 while the audio
started at the end. It now resets the same way.

Six new tests play, end the first play three different ways, with the click
on and off, and play again. A seventh holds the chunk download open to show a
count-in waiting on its start is dropped by a pause. All seven fail against
main.
---
 static/js/audioEngine.js           |   8 ++-
 static/js/chunkedAudioEngine.js    |  41 ++++++++---
 static/js/transport.js             |  30 ++++++--
 tests/e2e/count-in-replay.spec.mjs | 110 +++++++++++++++++++++++++++++
 4 files changed, 173 insertions(+), 16 deletions(-)
 create mode 100644 tests/e2e/count-in-replay.spec.mjs

diff --git a/static/js/audioEngine.js b/static/js/audioEngine.js
index 1487944c..0100ac06 100644
--- a/static/js/audioEngine.js
+++ b/static/js/audioEngine.js
@@ -293,8 +293,13 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) {
   // ctx time; the count-in clicks (negative source time) map into `[now, when]`
   // through the same sourceTimeToCtxTime the metronome uses, so they stay locked
   // to the audio. See transport.togglePlayPause + metronome.playCountIn.
+  //
+  // Resolves true once that mapping describes this start, false if nothing was
+  // started. Here that is always before play() returns, but the streaming
+  // engine can only say so after a fetch, and callers are written against the
+  // promise so the two engines keep one contract.
   function play(leadIn = 0) {
-    if (playing || destroyed || !tracks.size) return;
+    if (playing || destroyed || !tracks.size) return Promise.resolve(false);
     // Safari: resume the context fire-and-forget within the user-gesture tick.
     if (ctx.state === "suspended") ctx.resume().catch(() => {});
     let off = startOffset;
@@ -304,6 +309,7 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) {
     startSources(off, when);
     playing = true;
     tickLoop.schedule();
+    return Promise.resolve(true);
   }
 
   function pause() {
diff --git a/static/js/chunkedAudioEngine.js b/static/js/chunkedAudioEngine.js
index 8b33d891..4a03d45d 100644
--- a/static/js/chunkedAudioEngine.js
+++ b/static/js/chunkedAudioEngine.js
@@ -644,9 +644,27 @@ export function createChunkedAudioEngine(stems, { onTime, onEnded, context } = {
   // (see the sync/async branch below); by the time count-in can even be
   // armed the track has been loaded long enough that chunk 0 is virtually
   // always already cached.
+  //
+  // That last assumption held for the first play and not after it. Chunks
+  // behind the playhead are evicted, so Stop and play again goes back to a
+  // chunk that is gone and takes the fetch path, where the mapping is only
+  // set once the fetch lands. The count-in was being scheduled straight after
+  // play() returned, against the previous start's mapping, which put every
+  // click in the past, and Web Audio drops those silently (#655).
+  //
+  // So play() resolves true once sourceTimeToCtxTime describes this start,
+  // and false if the start was abandoned (paused first, or the fetch failed).
+  // The count-in waits for it, and a count-in lead is honoured on either path.
   function play(leadIn = 0) {
-    if (playing || destroyed) return;
+    if (playing || destroyed) return Promise.resolve(false);
     if (ctx.state === "suspended") ctx.resume().catch(() => {});
+    // Play from the end starts again from the top, as the buffered engine's
+    // play() does. The transport places a count-in on that assumption; without
+    // this the count-in led into 0 while the audio started at the end.
+    if (_startOffset >= _duration) {
+      _startOffset = 0;
+      _scheduledTo = 0;
+    }
     playing = true;
 
     const chunkIdx = Math.floor(_startOffset / CHUNK_SEC);
@@ -658,7 +676,7 @@ export function createChunkedAudioEngine(stems, { onTime, onEnded, context } = {
     // keeps 50 ms headroom since a fetch/decode just finished. A count-in's
     // lead overrides either when it asks for more room than that.
     const startWith = (buffers, lead) => {
-      if (!playing || destroyed) return;
+      if (!playing || destroyed) return false;
       _resetProcessor();
       const when = ctx.currentTime + Math.max(lead, countInLead);
       _startCtxTime = when;
@@ -668,21 +686,22 @@ export function createChunkedAudioEngine(stems, { onTime, onEnded, context } = {
       _epoch++; // mapping is valid from here; see isClockReady
       _fetchChunk(chunkIdx + 1); // pre-fetch next chunk
       tickLoop.schedule();
+      return true;
     };
 
     // chunk 0 is pre-decoded during ready(), so the sync path is the hot path.
     const hit = _cache.get(chunkIdx);
     if (hit?.result) {
-      startWith(hit.result, 0.01);
-    } else {
-      _fetchChunk(chunkIdx)
-        .then((buffers) => startWith(buffers, 0.05))
-        .catch((e) => {
-          console.warn("[chunked] play fetch failed:", e);
-          playing = false;
-          _audioStarted = false;
-        });
+      return Promise.resolve(startWith(hit.result, 0.01));
     }
+    return _fetchChunk(chunkIdx)
+      .then((buffers) => startWith(buffers, 0.05))
+      .catch((e) => {
+        console.warn("[chunked] play fetch failed:", e);
+        playing = false;
+        _audioStarted = false;
+        return false;
+      });
   }
 
   function pause() {
diff --git a/static/js/transport.js b/static/js/transport.js
index 1507a5d0..07e76dcb 100644
--- a/static/js/transport.js
+++ b/static/js/transport.js
@@ -491,6 +491,15 @@ function _currentGrid() {
   return null;
 }
 
+// Bumped by every pause and stop, so a count-in still waiting for its start
+// to be scheduled knows it has been overtaken and does not sound afterwards.
+let _countInGeneration = 0;
+
+function _dropCountIn() {
+  _countInGeneration++;
+  metronome?.cancelCountIn?.();
+}
+
 // Arm a count-in when it is enabled and the engine + grid can support one.
 // Starts the audio late (engine.play(leadIn)) and schedules the count clicks in
 // the gap, whether or not the running click is on. Returns true when it took
@@ -510,8 +519,21 @@ function _armCountIn(eng, startPos) {
   // Clicks sit in source time, leading into the start position: the last lands
   // one beat before the audio, so the song enters on the next downbeat.
   const sourceClicks = clicks.map((c) => ({ time: startPos - leadIn + c.offset, accent: c.accent }));
-  eng.play(leadIn); // sets the (future) clock the clicks are scheduled against
-  metronome.playCountIn(sourceClicks);
+  // The clicks can only be placed once the engine's clock describes this
+  // start, and on the streaming engine that can be after a fetch. Scheduling
+  // them as soon as play() returned used the previous start's clock and put
+  // every one in the past, so only the first play of a track ever counted in
+  // (#655). Wait for the start, and drop the count-in if a pause or stop got
+  // there first.
+  // The metronome is held as it is now: if the track changes while the start
+  // is still waiting, the live binding points at the next track's click, and
+  // this one's clicks belong to this one. A destroyed metronome ignores them.
+  const generation = ++_countInGeneration;
+  const clickTrack = metronome;
+  eng.play(leadIn).then((started) => {
+    if (!started || generation !== _countInGeneration) return;
+    clickTrack.playCountIn(sourceClicks);
+  });
   return true;
 }
 
@@ -521,7 +543,7 @@ export function togglePlayPause() {
   if (!tx) return;
   if (tx.isPlaying()) {
     tx.pause();
-    metronome?.cancelCountIn?.(); // drop a count-in if paused before the audio enters
+    _dropCountIn(); // drop a count-in if paused before the audio enters
     // The engine emits no play/pause events (the multitrack stays silent), so
     // the play-button visual that the ws "pause" handler normally toggles must
     // be driven here directly.
@@ -557,7 +579,7 @@ export function stopTransport() {
   const tx = eng ?? multitrack;
   if (!tx) return;
   tx.pause();
-  metronome?.cancelCountIn?.(); // a count-in in progress must not outlive Stop
+  _dropCountIn(); // a count-in in progress must not outlive Stop
   tx.setTime(loopEnabled ? loopStart : 0); // engine: setTime → onTime → stop visual
   if (eng) playBtn.classList.remove("playing");
 }
diff --git a/tests/e2e/count-in-replay.spec.mjs b/tests/e2e/count-in-replay.spec.mjs
new file mode 100644
index 00000000..a899f448
--- /dev/null
+++ b/tests/e2e/count-in-replay.spec.mjs
@@ -0,0 +1,110 @@
+// A count-in plays on every press of play, not only the first.
+//
+// It used to play once per track. The count-in is placed against the engine's
+// clock for the start it precedes, and it was placed as soon as play() had
+// returned. On the streaming engine, which is the default, that clock is only
+// set once the chunk to start from is decoded, and chunks behind the playhead
+// are evicted. So the first play started from a cached chunk and counted in,
+// and every play after a stop, a pause or the end of the track took the fetch
+// path, placed its clicks against the previous start's clock, and put every
+// one of them in the past, where Web Audio drops them without a sound (#655).
+//
+// It plays with the click track off as well as on. The #655 reporter read the
+// silence as the count-in being tied to the click; it was this.
+//
+// What is measured is where each click lands against the audio clock at the
+// moment it is handed over: a click scheduled in the past never sounds.
+import { test, expect } from "@playwright/test";
+import { openStudio, waitForClickTrack } from "./helpers.mjs";
+
+async function setUp(page, { click }) {
+  await page.setViewportSize({ width: 1900, height: 1000 });
+  await openStudio(page, { tauri: true });
+  await waitForClickTrack(page);
+  await page.locator("#t-metro-countin").selectOption("1");
+  if (click) await page.locator("#t-metro").click();
+  // Record every count-in the metronome is handed: how many clicks, and how
+  // many of them are still ahead of the audio clock.
+  await page.evaluate(async () => {
+    const st = await import("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/js/state.js");
+    window.__countIns = [];
+    const m = st.metronome;
+    const handOver = m.playCountIn.bind(m);
+    m.playCountIn = (clicks) => {
+      const eng = st.audioEngine;
+      const now = eng.audioContext.currentTime;
+      window.__countIns.push({
+        clicks: clicks.length,
+        ahead: clicks.filter((c) => eng.sourceTimeToCtxTime(c.time) > now).length,
+      });
+      return handOver(clicks);
+    };
+  });
+}
+
+const countIns = (page) => page.evaluate(() => window.__countIns);
+const play = (page) => page.keyboard.press("Space");
+
+// Each case plays, does something that ends the first play, and plays again.
+const endings = {
+  "a pause": async (page) => {
+    await play(page);
+    await page.waitForTimeout(400);
+  },
+  "Stop": async (page) => {
+    await page.locator("#t-stop").click();
+    await page.waitForTimeout(400);
+  },
+  "the end of the track": async (page) => {
+    // The fixture is 6 seconds, after a 2 second lead-in.
+    await page.waitForTimeout(6000);
+  },
+};
+
+for (const click of [true, false]) {
+  for (const [after, end] of Object.entries(endings)) {
+    test(`it counts in again after ${after}, with the click ${click ? "on" : "off"}`, async ({ page }) => {
+      await setUp(page, { click });
+
+      await play(page);
+      await page.waitForTimeout(3500);
+      await end(page);
+      await play(page);
+      await expect.poll(async () => (await countIns(page)).length).toBe(2);
+
+      const [first, second] = await countIns(page);
+      expect(first.clicks).toBeGreaterThan(0);
+      expect(first.ahead).toBe(first.clicks);
+      // The bug: the second was handed over with every click already past.
+      expect(second.ahead).toBe(second.clicks);
+    });
+  }
+}
+
+test("a pause before the start drops a count-in that is still waiting", async ({ page }) => {
+  // The count-in waits for the engine to schedule its start, which after a
+  // Stop means waiting for a chunk to download. A pause that gets there first
+  // must not leave the count-in to sound afterwards into a stopped track.
+  await setUp(page, { click: false });
+  await play(page);
+  await page.waitForTimeout(3500);
+  await page.locator("#t-stop").click();
+
+  // Hold the next chunk download open, as a slow connection would.
+  let release;
+  const held = new Promise((r) => { release = r; });
+  await page.route("**/stems/*.wav", async (route) => {
+    await held;
+    await route.continue();
+  });
+
+  await play(page); // waits on the download
+  await page.waitForTimeout(200);
+  await play(page); // and is paused before it lands
+  release();
+  await page.waitForTimeout(1500);
+
+  // Only the first play's count-in: the waiting one was dropped.
+  expect((await countIns(page)).length).toBe(1);
+  expect(await page.evaluate(async () => (await import("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/js/state.js")).audioEngine.isPlaying())).toBe(false);
+});