From 2c75090e5db657e9fb2c41c64517f9a4257470ab Mon Sep 17 00:00:00 2001
From: Mark Boas <markb@happyworm.com>
Date: Tue, 28 Jul 2026 17:13:02 +0200
Subject: [PATCH 1/2] Reset caption track on transcribe/regenerate so a prior
 clip's cue can't linger (#356/#287)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The <video> and its <track id="hyperplayer-vtt"> are reused across media swaps.
Left in 'showing' mode, Chromium keeps the previous media's active cue painted
after track.src is reassigned, so a freshly transcribed clip shows its captions
on top of the old clip's line — the recurring "double captions" of #356/#287.

The Recents/file-load path (renderTranscript) already fixed this via
resetCaptionTrack, which removes the stale <track> and inserts a fresh empty one.
But every transcription client dispatches hyperaudioGenerateCaptionsFromTranscript,
and that handler reused the existing track and only reassigned .src — the exact
stale-paint pattern the reset was written to prevent. So the load path was clean
while the transcribe path kept regressing.

Reset the track in hyperaudioGenerateCaptionsFromTranscript, the from-scratch
regenerate entry point. Scoped there deliberately: the live-edit sanitise path
calls generateCaptionsFromTranscript directly and must not reset, or every
keystroke would swap the track and churn the caption paint. caption.js re-looks-up
the track by id, so the fresh same-id element is fully compatible, and
generateCaptionsFromTranscript restores showing/hidden mode afterward.

Adds an e2e regression test that drives two consecutive regenerations and asserts
the track is torn down and rebuilt (fresh element, one track / TextTrack); it
fails on the pre-fix reused-track behaviour.

Cache-bust editor-core.js?v=0.8.8 and bump the app version marker to 0.8.8.
---
 __TEST__/e2e/caption-track-reset.spec.mjs | 63 +++++++++++++++++++++++
 index.html                                |  4 +-
 js/editor-core.js                         | 13 ++++-
 3 files changed, 77 insertions(+), 3 deletions(-)
 create mode 100644 __TEST__/e2e/caption-track-reset.spec.mjs

diff --git a/__TEST__/e2e/caption-track-reset.spec.mjs b/__TEST__/e2e/caption-track-reset.spec.mjs
new file mode 100644
index 0000000..e87ecea
--- /dev/null
+++ b/__TEST__/e2e/caption-track-reset.spec.mjs
@@ -0,0 +1,63 @@
+// #356/#287 regression — the "double captions" bug that kept coming back.
+//
+// The <video> and its <track id="hyperplayer-vtt"> are reused across media
+// swaps. Left in 'showing' mode, Chromium keeps the PREVIOUS media's active cue
+// painted after track.src is reassigned, so a freshly transcribed clip shows its
+// captions on top of the old clip's line. The load path (renderTranscript) was
+// fixed by resetCaptionTrack — removing the stale <track> and inserting a fresh
+// empty one — but the transcribe/regenerate path (hyperaudioGenerateCaptions-
+// FromTranscript) reused the track and only reassigned .src, so the bug survived
+// on every second transcription.
+//
+// This drives the from-scratch regenerate entry point twice (what each
+// transcription client dispatches) and asserts the caption <track> is torn down
+// and rebuilt each time: a fresh element, and never more than one track /
+// TextTrack. On the pre-fix code the element was reused, so `sameElement` is true
+// and the stale cue can linger — this test fails there.
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/index.html');
+  await page.waitForSelector('#hypertranscript [data-m]');
+});
+
+test('regenerating captions resets the <track>, so a prior cue cannot linger (#356/#287)', async ({ page }) => {
+  const result = await page.evaluate(() => {
+    const video = document.getElementById('hyperplayer');
+
+    // First transcription: a non-audio src (so captions go 'showing', not the
+    // mp3/m4a 'hidden' branch) plus a two-word transcript, then regenerate.
+    video.src = 'data:video/mp4;base64,';
+    document.getElementById('hypertranscript').innerHTML =
+      '<article><section><p>' +
+      '<span data-m="0" data-d="500">Alpha </span>' +
+      '<span data-m="500" data-d="500">alpha </span></p></section></article>';
+    document.dispatchEvent(new CustomEvent('hyperaudioGenerateCaptionsFromTranscript'));
+
+    const firstTrack = document.getElementById('hyperplayer-vtt');
+    firstTrack.dataset.gen = 'A';                        // stamp the gen-A element
+    const trackCountAfterA = video.querySelectorAll('track').length;
+
+    // Second transcription: new media + a different transcript, regenerate again.
+    video.src = 'data:video/mp4;base64,';
+    document.getElementById('hypertranscript').innerHTML =
+      '<article><section><p>' +
+      '<span data-m="0" data-d="500">Bravo </span></p></section></article>';
+    document.dispatchEvent(new CustomEvent('hyperaudioGenerateCaptionsFromTranscript'));
+
+    const secondTrack = document.getElementById('hyperplayer-vtt');
+    return {
+      trackCountAfterA,
+      trackCountAfterB: video.querySelectorAll('track').length,
+      textTrackCount: video.textTracks.length,
+      sameElement: secondTrack === firstTrack,          // pre-fix: true (reused)
+      stampSurvived: secondTrack.dataset.gen === 'A',   // pre-fix: true (reused)
+    };
+  });
+
+  expect(result.trackCountAfterA).toBe(1);              // exactly one track after gen A
+  expect(result.trackCountAfterB).toBe(1);             // no track accumulation
+  expect(result.textTrackCount).toBe(1);               // no stale TextTrack left behind
+  expect(result.sameElement).toBe(false);              // the fix: fresh element each regenerate
+  expect(result.stampSurvived).toBe(false);
+});
diff --git a/index.html b/index.html
index b17e6ea..58ce396 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="version" content="0.8.7">
+  <meta name="version" content="0.8.8">
   <title>Hyperaudio Lite Editor</title>
   <link rel="apple-touch-icon" href="images/icon-192x192.png">
   <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
@@ -965,7 +965,7 @@ <h3 class="font-bold text-lg">Caption Regeneration </h3>
   <script src="js/hyperaudio-lite-extension.js?v=0.7.2"></script>
   <script src="js/caption.js?v=0.8.6"></script>
   <script src="js/transcript-serializer.js?v=0.8.5"></script>
-  <script src="js/editor-core.js?v=0.8.6"></script>
+  <script src="js/editor-core.js?v=0.8.8"></script>
 
 
   <import-deepgram-json></import-deepgram-json>
diff --git a/js/editor-core.js b/js/editor-core.js
index 6114cdd..8c568b4 100644
--- a/js/editor-core.js
+++ b/js/editor-core.js
@@ -782,7 +782,18 @@
 
   function hyperaudioGenerateCaptionsFromTranscript() {
     let sourceMedia = document.querySelector("#hyperplayer").src;
-    let track = document.querySelector('#hyperplayer-vtt');
+
+    // Tear down the previous media's caption <track> before regenerating. A fresh
+    // transcription reuses the same <video>/<track>; left in 'showing' mode the old
+    // track keeps the PREVIOUS media's cue painted, so the new captions render on
+    // top of the stale line (the "double captions" of #356/#287). The Recents-load
+    // path already resets via resetCaptionTrack (storage.js) — the transcribe /
+    // regenerate path must too. Fall back to the existing track if storage.js is
+    // absent. (Note: this is the from-scratch entry point; the live-edit sanitise
+    // path calls generateCaptionsFromTranscript directly and must NOT reset here,
+    // or every keystroke would swap the track and churn the caption paint.)
+    let track = (typeof resetCaptionTrack === 'function' && resetCaptionTrack())
+      || document.querySelector('#hyperplayer-vtt');
 
     populateCaptionEditor(generateCaptionsFromTranscript(getTranscriptData(), sourceMedia, track));
   }

From fcc323cb342b162da59347b45ac873710bfe3fdc Mon Sep 17 00:00:00 2001
From: Mark Boas <markb@happyworm.com>
Date: Tue, 28 Jul 2026 17:30:29 +0200
Subject: [PATCH 2/2] Flush stale ::cue paint after caption regenerate so a
 prior clip's captions don't linger (#356/#287)

Resetting the <track> element (previous commit) drops the old cue's DATA, but on
a PAUSED video the browser never re-composites its native caption overlay, so the
previous cue's PIXELS stay stranded on screen under the new captions. The load
path avoids this because loading new media forces a full video relayout; the
transcribe/regenerate path leaves the already-loaded video paused, so nothing
repaints the overlay.

After regenerating, toggle the caption track's display mode (hidden -> showing) to
force the overlay to rebuild, flushing the stale paint. Guarded to 'showing' so it
is a no-op for audio-only media (mp3/m4a are deliberately hidden) and harmless
during playback. Confirmed in-browser: the lingering caption is gone.

Extends the regression test to assert the toggle path settles back on 'showing'
(the native ::cue paint itself is not inspectable headlessly).

Cache-bust editor-core.js?v=0.8.9 and bump the app version marker to 0.8.9.
---
 __TEST__/e2e/caption-track-reset.spec.mjs |  6 ++++++
 index.html                                |  4 ++--
 js/editor-core.js                         | 15 +++++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/__TEST__/e2e/caption-track-reset.spec.mjs b/__TEST__/e2e/caption-track-reset.spec.mjs
index e87ecea..cceeaae 100644
--- a/__TEST__/e2e/caption-track-reset.spec.mjs
+++ b/__TEST__/e2e/caption-track-reset.spec.mjs
@@ -52,6 +52,7 @@ test('regenerating captions resets the <track>, so a prior cue cannot linger (#3
       textTrackCount: video.textTracks.length,
       sameElement: secondTrack === firstTrack,          // pre-fix: true (reused)
       stampSurvived: secondTrack.dataset.gen === 'A',   // pre-fix: true (reused)
+      finalMode: video.textTracks[0] && video.textTracks[0].mode,
     };
   });
 
@@ -60,4 +61,9 @@ test('regenerating captions resets the <track>, so a prior cue cannot linger (#3
   expect(result.textTrackCount).toBe(1);               // no stale TextTrack left behind
   expect(result.sameElement).toBe(false);              // the fix: fresh element each regenerate
   expect(result.stampSurvived).toBe(false);
+  // The ::cue ghost-flush toggles mode hidden→showing; it must settle back on
+  // 'showing' (the flush is a no-op if the track ends up hidden). The stale-paint
+  // itself is native ::cue rendering and not inspectable headlessly — this guards
+  // that the toggle path doesn't leave captions disabled.
+  expect(result.finalMode).toBe('showing');
 });
diff --git a/index.html b/index.html
index 58ce396..ef86667 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="version" content="0.8.8">
+  <meta name="version" content="0.8.9">
   <title>Hyperaudio Lite Editor</title>
   <link rel="apple-touch-icon" href="images/icon-192x192.png">
   <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
@@ -965,7 +965,7 @@ <h3 class="font-bold text-lg">Caption Regeneration </h3>
   <script src="js/hyperaudio-lite-extension.js?v=0.7.2"></script>
   <script src="js/caption.js?v=0.8.6"></script>
   <script src="js/transcript-serializer.js?v=0.8.5"></script>
-  <script src="js/editor-core.js?v=0.8.8"></script>
+  <script src="js/editor-core.js?v=0.8.9"></script>
 
 
   <import-deepgram-json></import-deepgram-json>
diff --git a/js/editor-core.js b/js/editor-core.js
index 8c568b4..a66e85c 100644
--- a/js/editor-core.js
+++ b/js/editor-core.js
@@ -796,6 +796,21 @@
       || document.querySelector('#hyperplayer-vtt');
 
     populateCaptionEditor(generateCaptionsFromTranscript(getTranscriptData(), sourceMedia, track));
+
+    // Swapping the <track> element drops the old cue's DATA, but a PAUSED video
+    // won't re-composite its native caption overlay on its own — so the previous
+    // cue's PIXELS stay stranded on screen under the new captions (the remaining
+    // half of #356/#287; the load path avoids it because loading new media forces
+    // a full video relayout, which the transcribe path never triggers). Toggling
+    // the track's display mode forces the overlay to rebuild, flushing the stale
+    // ::cue paint. Only meaningful while the intended mode is 'showing' — mp3/m4a
+    // are deliberately 'hidden' by generateCaptionsFromTranscript, nothing to flush.
+    const player = document.getElementById('hyperplayer');
+    const captionTrack = player && player.textTracks[0];
+    if (captionTrack && captionTrack.mode === 'showing') {
+      captionTrack.mode = 'hidden';
+      captionTrack.mode = 'showing';
+    }
   }
 
   function generateCaptionsFromTranscript(hypertranscript, sourceMedia, track) {