From b2dbd890d9b9b723b33edfea7d2b56adeb56f082 Mon Sep 17 00:00:00 2001
From: Etienne Lescot <etiennelescot@gmail.com>
Date: Thu, 30 Jul 2026 10:24:21 +0200
Subject: [PATCH 1/3] chore(perf): la sonde distingue le scrub timeline du
 scrub barre de progression
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Les deux chemins n'ont rien à voir, et la sonde les confondait — ou plutôt, elle ne
voyait que le premier : `setUiProbeScrubbing` n'était appelé que depuis
`V4Timeline.startScrub`. Un scrub via la barre de progression atterrissait donc dans les
buckets `repos` ou `preview`, ce qui pollue silencieusement toute mesure où l'utilisateur
touche la barre — y compris le `repos@N` qui a servi à juger l'accumulation au fil des
bascules de clip.

Les états deviennent `scrub-tl` et `scrub-bar` (et leurs variantes `+preview`). Les
mélanger reviendrait à moyenner deux populations différentes, exactement le biais que
cette sonde existe pour éviter — c'est déjà arrivé une fois avec le franchissement de
clip, où l'écart avait été attribué à un changement de code qui n'y était pour rien.

Ce commit ne change AUCUN comportement : il ne fait qu'étiqueter, pour que le correctif
d'alignement qui suit soit jugeable sur un avant/après plutôt que sur une impression.
---
 src/components/ai-edition/TransportBar.tsx |  7 +++
 src/lib/ai-edition/perf/uiFrameProbe.ts    | 52 ++++++++++++++++------
 2 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/components/ai-edition/TransportBar.tsx b/src/components/ai-edition/TransportBar.tsx
index fa017ff13..b8c1047fa 100644
--- a/src/components/ai-edition/TransportBar.tsx
+++ b/src/components/ai-edition/TransportBar.tsx
@@ -1,6 +1,7 @@
 import { Pause, Play, SkipBack, SkipForward } from "lucide-react";
 import { memo } from "react";
 import { useScopedT } from "@/contexts/I18nContext";
+import { setUiProbeScrubbing } from "@/lib/ai-edition/perf/uiFrameProbe";
 import type { AxcutClip } from "@/lib/ai-edition/schema";
 import { useProjectStore } from "@/lib/ai-edition/store/projectStore";
 import styles from "./NewEditorShell.module.css";
@@ -97,6 +98,12 @@ export const TransportBar = memo(function TransportBar({
 					step={0.01}
 					value={inputValue}
 					onChange={(e) => onSeek(Number(e.target.value))}
+					// Sonde de fluidité (diagnostic) : marque la fenêtre de drag comme
+					// venant de la BARRE, pour ne pas la confondre avec un drag de timeline —
+					// les deux empruntent des chemins de code différents.
+					onPointerDown={() => setUiProbeScrubbing(true, "bar")}
+					onPointerUp={() => setUiProbeScrubbing(false, "bar")}
+					onPointerCancel={() => setUiProbeScrubbing(false, "bar")}
 					className={styles.scrubInput}
 					aria-label={te("transport.seekVideo")}
 				/>
diff --git a/src/lib/ai-edition/perf/uiFrameProbe.ts b/src/lib/ai-edition/perf/uiFrameProbe.ts
index abfc69c94..8fb2adb31 100644
--- a/src/lib/ai-edition/perf/uiFrameProbe.ts
+++ b/src/lib/ai-edition/perf/uiFrameProbe.ts
@@ -21,7 +21,13 @@
  * qu'on ne le demande pas — aucun coût en usage normal.
  */
 
-type BaseState = "repos" | "preview" | "scrub" | "scrub+preview";
+type BaseState =
+	| "repos"
+	| "preview"
+	| "scrub-tl"
+	| "scrub-tl+preview"
+	| "scrub-bar"
+	| "scrub-bar+preview";
 /** L'état porte le suffixe `@N` = nombre de bascules de clip déjà vues. Voir
  *  `noteUiProbeClipSwitch` : sans cette séparation, deux mesures ne sont pas comparables. */
 type ProbeState = string;
@@ -36,7 +42,19 @@ let rafHandle = 0;
 let lastTs = 0;
 /** Frames de preview peintes depuis le dernier tick — dit si la preview travaille. */
 let previewFramesSinceTick = 0;
-let scrubbing = false;
+/**
+ * D'OÙ vient le scrub en cours.
+ *
+ * Les deux chemins n'ont rien à voir : la timeline écrit la tête de lecture directement
+ * dans le DOM et coalesce son écriture au store en rAF ; la barre de progression, elle,
+ * écrit au store à chaque événement ET repose un `seekTarget` — un état de la RACINE de
+ * l'éditeur — ce qui re-render tout et déclenche un seek du `<video>` par mouvement de
+ * souris. Les mélanger sous une même étiquette `scrub` reviendrait à moyenner deux
+ * populations différentes, exactement le biais que cette sonde existe pour éviter.
+ */
+type ScrubSource = "timeline" | "bar";
+
+let scrubbing: ScrubSource | null = null;
 /** Bascules de clip vues depuis le démarrage de la sonde. Sépare les états. */
 let clipSwitches = 0;
 
@@ -48,8 +66,8 @@ export function noteUiProbePreviewFrame(): void {
 }
 
 /** Appelé par la timeline à l'entrée et à la sortie d'un drag de tête de lecture. */
-export function setUiProbeScrubbing(active: boolean): void {
-	scrubbing = active;
+export function setUiProbeScrubbing(active: boolean, source: ScrubSource = "timeline"): void {
+	scrubbing = active ? source : null;
 }
 
 /**
@@ -87,14 +105,15 @@ function bucketFor(state: ProbeState): Bucket {
 
 function currentState(): ProbeState {
 	const previewActive = previewFramesSinceTick > 0;
-	const base: BaseState =
-		scrubbing && previewActive
-			? "scrub+preview"
-			: scrubbing
-				? "scrub"
-				: previewActive
-					? "preview"
-					: "repos";
+	// La source du scrub fait partie de l'étiquette : `scrub-tl` et `scrub-bar` sont deux
+	// chemins de code distincts, les confondre masquerait précisément l'écart qu'on cherche.
+	const base: BaseState = scrubbing
+		? previewActive
+			? `scrub-${scrubbing === "timeline" ? "tl" : "bar"}+preview`
+			: `scrub-${scrubbing === "timeline" ? "tl" : "bar"}`
+		: previewActive
+			? "preview"
+			: "repos";
 	return `${base}@${clipSwitches}`;
 }
 
@@ -112,7 +131,14 @@ function summarize() {
 	// Trié par état puis par nombre de bascules, pour que « avant / après le 1er
 	// changement de clip » se lisent l'un sous l'autre.
 	const states = [...buckets.keys()].sort((a, b) => {
-		const order = ["repos", "preview", "scrub", "scrub+preview"];
+		const order = [
+			"repos",
+			"preview",
+			"scrub-tl",
+			"scrub-tl+preview",
+			"scrub-bar",
+			"scrub-bar+preview",
+		];
 		const [ba, na] = a.split("@");
 		const [bb, nb] = b.split("@");
 		return order.indexOf(ba) - order.indexOf(bb) || Number(na) - Number(nb);

From 6eff6b971c865417d3474b0e0376035da08a94fe Mon Sep 17 00:00:00 2001
From: Etienne Lescot <etiennelescot@gmail.com>
Date: Thu, 30 Jul 2026 10:30:52 +0200
Subject: [PATCH 2/3] perf(transport): coalescer le drag de la barre de
 progression en rAF
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`onChange` d'un `<input type="range">` se déclenche à la cadence du POINTEUR — 125 à
1000 Hz selon la souris — et appelait `onSeek` à chacun. Or `onSeek` est `handleSeek`
(NewEditorShell), qui écrit au store ET repose un `seekTarget` neuf dans l'état de la
RACINE de l'éditeur : chaque appel re-rend tout l'arbre (timeline, waveforms, preview,
inspecteur) et fait poser `<video>.currentTime`, un vrai seek média.

La timeline fait exactement les mêmes appels, mais coalescés en rAF — ~60 par seconde au
lieu de jusqu'à 1000. C'est cette seule différence de cadence qui séparait les deux
chemins, et elle explique le constat d'usage : « ça rame plus avec la barre qu'avec la
timeline ».

Ce commit ne fait que rétablir la parité : même travail, cadence d'écran, plus un commit
de la dernière position au relâchement (sans lui, le mouvement entre le dernier rAF et le
`pointerup` serait perdu et la tête s'arrêterait un cran avant le doigt). `pointercancel`
et `blur` ferment aussi le drag — un pointeur capturé puis interrompu ne produit pas de
`pointerup`.

Délibérément PAS « ne poser le seekTarget qu'au relâchement », bien que ce soit tentant :
ce serait un comportement DIFFÉRENT de la timeline, où le `<video>` suit pendant le drag.
La divergence entre deux chemins censés faire la même chose est précisément ce qui a
produit les bugs de cette zone.

Vérifié : tsc, 69/69 tests src/components/ai-edition. Trois tests ajoutés, dont la nature
diffère et mérite d'être dite — un seul échoue sans ce correctif (la coalescence, vérifié
en retirant le patch) ; les deux autres passent avant comme après et servent
d'équivalence : ils garantissent que le commit final au relâchement et le saut clavier
immédiat ne sont pas cassés au passage.

NON vérifié : le gain ressenti. La sonde étiquette désormais `scrub-bar` séparément de
`scrub-tl` (commit précédent), donc l'avant/après est mesurable — il reste à le mesurer.
---
 .../ai-edition/TransportBar.test.tsx          | 124 +++++++++++++++++-
 src/components/ai-edition/TransportBar.tsx    |  94 +++++++++++--
 2 files changed, 209 insertions(+), 9 deletions(-)

diff --git a/src/components/ai-edition/TransportBar.test.tsx b/src/components/ai-edition/TransportBar.test.tsx
index fa155430d..1e9f5bd93 100644
--- a/src/components/ai-edition/TransportBar.test.tsx
+++ b/src/components/ai-edition/TransportBar.test.tsx
@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom";
-import { act, cleanup, render, screen } from "@testing-library/react";
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { I18nProvider } from "@/contexts/I18nContext";
 import { useProjectStore } from "@/lib/ai-edition/store/projectStore";
@@ -92,3 +92,125 @@ describe("TransportBar reads the playhead from the store", () => {
 		expect(screen.getByText("0:04.5")).toBeInTheDocument();
 	});
 });
+
+describe("le drag de la barre de progression est coalescé en rAF", () => {
+	beforeEach(() => {
+		useProjectStore.setState({ currentTimeSec: 0 });
+	});
+
+	afterEach(() => {
+		cleanup();
+		vi.clearAllMocks();
+		vi.unstubAllGlobals();
+	});
+
+	/** rAF piloté à la main : les callbacks ne partent que sur `flush()`, ce qui permet de
+	 *  compter ce qui se passe DANS une frame — impossible avec le vrai rAF en test. */
+	function stubRaf() {
+		const pending: FrameRequestCallback[] = [];
+		vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+			pending.push(cb);
+			return pending.length;
+		});
+		vi.stubGlobal("cancelAnimationFrame", () => {});
+		return () => {
+			const due = pending.splice(0, pending.length);
+			for (const cb of due) cb(0);
+		};
+	}
+
+	// C'est LE défaut que ce chemin avait : `onChange` d'un `<input type="range">` se
+	// déclenche à la cadence du pointeur (jusqu'à 1000 Hz) et appelait `onSeek` à chaque
+	// fois. Or `onSeek` repose un `seekTarget` dans l'état de la racine de l'éditeur, donc
+	// re-rend tout et fait poser `<video>.currentTime`. La timeline fait les mêmes appels
+	// mais une fois par frame ; ce test verrouille cette parité.
+	it("n'émet qu'un seul seek par frame, quel que soit le nombre d'événements", () => {
+		const flush = stubRaf();
+		const onSeek = vi.fn();
+		render(
+			<I18nProvider>
+				<TransportBar
+					playing={false}
+					overrideTimeSec={null}
+					clips={clips}
+					onTogglePlay={noop}
+					onPrevClip={noop}
+					onNextClip={noop}
+					onSeek={onSeek}
+				/>
+			</I18nProvider>,
+		);
+		const input = screen.getByLabelText(/seek/i) as HTMLInputElement;
+
+		act(() => {
+			fireEvent.pointerDown(input);
+		});
+		// Dix mouvements dans la même frame : un seul seek doit en sortir, et c'est le
+		// DERNIER qui compte — sans quoi la tête accuserait un retard permanent.
+		act(() => {
+			for (const value of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) {
+				fireEvent.change(input, { target: { value: String(value) } });
+			}
+		});
+		expect(onSeek).not.toHaveBeenCalled();
+
+		act(() => flush());
+		expect(onSeek).toHaveBeenCalledTimes(1);
+		expect(onSeek).toHaveBeenLastCalledWith(10);
+	});
+
+	// Le mouvement compris entre le dernier rAF et le relâchement serait perdu sans commit
+	// final : la tête s'arrêterait un cran avant le doigt.
+	it("pose la dernière position au relâchement", () => {
+		stubRaf();
+		const onSeek = vi.fn();
+		render(
+			<I18nProvider>
+				<TransportBar
+					playing={false}
+					overrideTimeSec={null}
+					clips={clips}
+					onTogglePlay={noop}
+					onPrevClip={noop}
+					onNextClip={noop}
+					onSeek={onSeek}
+				/>
+			</I18nProvider>,
+		);
+		const input = screen.getByLabelText(/seek/i) as HTMLInputElement;
+
+		act(() => {
+			fireEvent.pointerDown(input);
+			fireEvent.change(input, { target: { value: "7" } });
+			fireEvent.pointerUp(input);
+		});
+		expect(onSeek).toHaveBeenCalledWith(7);
+	});
+
+	// Hors drag il n'y a rien à coalescer : une flèche du clavier est un saut unique et
+	// doit prendre effet immédiatement, sans attendre une frame.
+	it("applique immédiatement un changement hors drag", () => {
+		stubRaf();
+		const onSeek = vi.fn();
+		render(
+			<I18nProvider>
+				<TransportBar
+					playing={false}
+					overrideTimeSec={null}
+					clips={clips}
+					onTogglePlay={noop}
+					onPrevClip={noop}
+					onNextClip={noop}
+					onSeek={onSeek}
+				/>
+			</I18nProvider>,
+		);
+		const input = screen.getByLabelText(/seek/i) as HTMLInputElement;
+
+		act(() => {
+			fireEvent.change(input, { target: { value: "3" } });
+		});
+		expect(onSeek).toHaveBeenCalledTimes(1);
+		expect(onSeek).toHaveBeenCalledWith(3);
+	});
+});
diff --git a/src/components/ai-edition/TransportBar.tsx b/src/components/ai-edition/TransportBar.tsx
index b8c1047fa..36dfea782 100644
--- a/src/components/ai-edition/TransportBar.tsx
+++ b/src/components/ai-edition/TransportBar.tsx
@@ -1,5 +1,5 @@
 import { Pause, Play, SkipBack, SkipForward } from "lucide-react";
-import { memo } from "react";
+import { memo, useCallback, useEffect, useRef } from "react";
 import { useScopedT } from "@/contexts/I18nContext";
 import { setUiProbeScrubbing } from "@/lib/ai-edition/perf/uiFrameProbe";
 import type { AxcutClip } from "@/lib/ai-edition/schema";
@@ -48,6 +48,77 @@ export const TransportBar = memo(function TransportBar({
 	);
 	// ponytail: mirrors Preview's old clamp so the CSS thumb and the native
 	// range thumb stay in sync when there's no clip yet.
+	// ── Drag de la barre : même cadence que le drag de la timeline ──────────────────
+	//
+	// L'`onChange` d'un `<input type="range">` se déclenche à la cadence du POINTEUR — 125 à
+	// 1000 Hz selon la souris — et appelait `onSeek` à chacun. Or `onSeek` est `handleSeek`,
+	// qui écrit au store ET repose un `seekTarget` neuf dans l'état de `NewEditorShell`, la
+	// racine : chaque appel re-rend tout l'éditeur et fait poser `<video>.currentTime`, un
+	// vrai seek média.
+	//
+	// La timeline fait exactement les mêmes appels, mais les coalesce en rAF — donc ~60 fois
+	// par seconde au lieu de jusqu'à 1000. C'est cette seule différence de cadence qui
+	// sépare les deux chemins, et elle explique l'écart de fluidité remonté en usage.
+	//
+	// On ne fait donc rien de plus que rétablir la parité : même travail, cadence d'écran.
+	// Délibérément PAS « ne poser le seekTarget qu'au relâchement » — ce serait un
+	// comportement différent de la timeline, où le `<video>` suit pendant le drag, et
+	// divergence entre deux chemins censés faire la même chose est précisément ce qui a
+	// produit les bugs de cette zone.
+	const rafRef = useRef(0);
+	const pendingRef = useRef<number | null>(null);
+	const draggingRef = useRef(false);
+
+	useEffect(() => {
+		return () => {
+			if (rafRef.current !== 0) {
+				cancelAnimationFrame(rafRef.current);
+			}
+		};
+	}, []);
+
+	const handleInputChange = useCallback(
+		(value: number) => {
+			// Hors drag (flèches du clavier, clic simple sur la piste) : rien à coalescer,
+			// c'est un saut unique et il doit prendre effet tout de suite.
+			if (!draggingRef.current) {
+				onSeek(value);
+				return;
+			}
+			pendingRef.current = value;
+			if (rafRef.current !== 0) {
+				return;
+			}
+			rafRef.current = requestAnimationFrame(() => {
+				rafRef.current = 0;
+				const pending = pendingRef.current;
+				if (pending !== null) {
+					onSeek(pending);
+				}
+			});
+		},
+		[onSeek],
+	);
+
+	const endDrag = useCallback(() => {
+		if (!draggingRef.current) {
+			return;
+		}
+		draggingRef.current = false;
+		setUiProbeScrubbing(false, "bar");
+		if (rafRef.current !== 0) {
+			cancelAnimationFrame(rafRef.current);
+			rafRef.current = 0;
+		}
+		// Pose la dernière position : sans ce commit, le mouvement compris entre le dernier
+		// rAF et le relâchement serait perdu et la tête s'arrêterait un cran avant le doigt.
+		const pending = pendingRef.current;
+		if (pending !== null) {
+			pendingRef.current = null;
+			onSeek(pending);
+		}
+	}, [onSeek]);
+
 	const inputMax = virtualDurationSec || 1;
 	const inputValue = Math.min(Math.max(currentTimeSec, 0), inputMax);
 	const progress = (inputValue / inputMax) * 100;
@@ -97,13 +168,20 @@ export const TransportBar = memo(function TransportBar({
 					max={inputMax}
 					step={0.01}
 					value={inputValue}
-					onChange={(e) => onSeek(Number(e.target.value))}
-					// Sonde de fluidité (diagnostic) : marque la fenêtre de drag comme
-					// venant de la BARRE, pour ne pas la confondre avec un drag de timeline —
-					// les deux empruntent des chemins de code différents.
-					onPointerDown={() => setUiProbeScrubbing(true, "bar")}
-					onPointerUp={() => setUiProbeScrubbing(false, "bar")}
-					onPointerCancel={() => setUiProbeScrubbing(false, "bar")}
+					onChange={(e) => handleInputChange(Number(e.target.value))}
+					onPointerDown={() => {
+						draggingRef.current = true;
+						// Sonde de fluidité (diagnostic) : marque la fenêtre de drag comme
+						// venant de la BARRE, pour ne pas la confondre avec un drag de
+						// timeline — les deux empruntent des chemins de code différents.
+						setUiProbeScrubbing(true, "bar");
+					}}
+					onPointerUp={endDrag}
+					// `pointercancel` et `blur` ferment aussi le drag : un pointeur capturé
+					// puis interrompu (geste système, perte de focus) ne produit pas de
+					// `pointerup`, et la dernière position resterait alors non confirmée.
+					onPointerCancel={endDrag}
+					onBlur={endDrag}
 					className={styles.scrubInput}
 					aria-label={te("transport.seekVideo")}
 				/>

From a29458d3a0a9e9009616fb07133a9a9dbe48789d Mon Sep 17 00:00:00 2001
From: Etienne Lescot <etiennelescot@gmail.com>
Date: Thu, 30 Jul 2026 10:50:40 +0200
Subject: [PATCH 3/3] =?UTF-8?q?perf(transport):=20=C3=A9crire=20le=20curse?=
 =?UTF-8?q?ur=20de=20la=20barre=20directement=20dans=20le=20DOM=20pendant?=
 =?UTF-8?q?=20un=20drag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dernière différence de parité identifiable entre les deux chemins de scrub.

Le remplissage (`scrubProgress`) et le curseur (`scrubThumb`) n'étaient positionnés que
par React, depuis `progress` dérivé du store — donc en retard d'un commit à chaque
mouvement. La tête de lecture de la timeline, elle, est écrite directement dans le DOM
(`playheadElRef.style.left`) et colle au pointeur. Même patron appliqué ici, pour la même
raison : la position que l'utilisateur VOIT ne doit pas attendre un rendu.

React continue de les positionner hors drag, et au rendu suivant pendant le drag avec une
valeur au pire vieille d'une frame puisque le rAF du commit précédent écrit au store à
60 Hz. Les deux écritures convergent donc au lieu de se contredire — c'est la condition
qui manquait quand un throttle mal placé avait fait diverger position React et position
DOM plus tôt dans cette série.

Mesuré avec la sonde, pondéré par le nombre d'échantillons, avant ce commit :
`scrub-tl` ≈ 6–8 % de frames > 25 ms contre `scrub-bar` ≈ 12,6 %. L'écart ressenti était
donc réel et mesurable ; ce commit s'attaque à ce qu'il en reste après la coalescence.

Un piège rencontré en écrivant ce correctif, corrigé avant commit : le bloc utilisait
`inputMax` dans les dépendances d'un `useCallback` déclaré AVANT lui — la liste de deps
étant évaluée au rendu, c'était une ReferenceError par TDZ à chaque montage. Le bloc est
désormais placé après les déclarations qu'il consomme.

Vérifié : tsc, 70/70 tests src/components/ai-edition. Un test ajouté, et il échoue bien
sans ce correctif (vérifié en retirant le patch) : il constate que le visuel bouge AVANT
tout vidage de rAF, donc sans passer par React.

NON vérifié : le gain mesuré de ce commit précis. À faire avec `scrub-bar` sur la sonde.
---
 .../ai-edition/TransportBar.test.tsx          | 44 ++++++++++++++++++-
 src/components/ai-edition/TransportBar.tsx    | 40 ++++++++++++++---
 2 files changed, 77 insertions(+), 7 deletions(-)

diff --git a/src/components/ai-edition/TransportBar.test.tsx b/src/components/ai-edition/TransportBar.test.tsx
index 1e9f5bd93..517f94d97 100644
--- a/src/components/ai-edition/TransportBar.test.tsx
+++ b/src/components/ai-edition/TransportBar.test.tsx
@@ -112,7 +112,9 @@ describe("le drag de la barre de progression est coalescé en rAF", () => {
 			pending.push(cb);
 			return pending.length;
 		});
-		vi.stubGlobal("cancelAnimationFrame", () => {});
+		vi.stubGlobal("cancelAnimationFrame", () => {
+			// rien à annuler : `flush()` ne rejoue que ce qui reste en attente
+		});
 		return () => {
 			const due = pending.splice(0, pending.length);
 			for (const cb of due) cb(0);
@@ -213,4 +215,44 @@ describe("le drag de la barre de progression est coalescé en rAF", () => {
 		expect(onSeek).toHaveBeenCalledTimes(1);
 		expect(onSeek).toHaveBeenCalledWith(3);
 	});
+
+	// Le remplissage et le curseur étaient positionnés uniquement par React depuis le store,
+	// donc en retard d'un commit à chaque mouvement — alors que la tête de lecture de la
+	// timeline, elle, est écrite directement dans le DOM et colle au pointeur. Ce test
+	// verrouille la parité : le visuel bouge AVANT le rAF, donc sans attendre React.
+	it("déplace le curseur dans le DOM avant tout rendu React", () => {
+		stubRaf();
+		const onSeek = vi.fn();
+		const { container } = render(
+			<I18nProvider>
+				<TransportBar
+					playing={false}
+					overrideTimeSec={null}
+					clips={clips}
+					onTogglePlay={noop}
+					onPrevClip={noop}
+					onNextClip={noop}
+					onSeek={onSeek}
+				/>
+			</I18nProvider>,
+		);
+		const input = screen.getByLabelText(/seek/i) as HTMLInputElement;
+		// Les deux éléments décorés : le remplissage (largeur) et le curseur (position).
+		const styled = Array.from(container.querySelectorAll("div")).filter(
+			(el) => el.style.width !== "" || el.style.left !== "",
+		);
+		expect(styled.length).toBeGreaterThanOrEqual(2);
+
+		act(() => {
+			fireEvent.pointerDown(input);
+			// La moitié de la durée (clip de 30 s) → 50 %.
+			fireEvent.change(input, { target: { value: "15" } });
+		});
+
+		// Aucun rAF n'a été vidé, donc aucune écriture au store et aucun rendu React : ce qui
+		// a bougé ne peut venir que de l'écriture DOM directe.
+		expect(onSeek).not.toHaveBeenCalled();
+		const moved = styled.filter((el) => el.style.width === "50%" || el.style.left === "50%");
+		expect(moved.length).toBeGreaterThanOrEqual(2);
+	});
 });
diff --git a/src/components/ai-edition/TransportBar.tsx b/src/components/ai-edition/TransportBar.tsx
index 36dfea782..3096c37d5 100644
--- a/src/components/ai-edition/TransportBar.tsx
+++ b/src/components/ai-edition/TransportBar.tsx
@@ -48,6 +48,10 @@ export const TransportBar = memo(function TransportBar({
 	);
 	// ponytail: mirrors Preview's old clamp so the CSS thumb and the native
 	// range thumb stay in sync when there's no clip yet.
+	const inputMax = virtualDurationSec || 1;
+	const inputValue = Math.min(Math.max(currentTimeSec, 0), inputMax);
+	const progress = (inputValue / inputMax) * 100;
+
 	// ── Drag de la barre : même cadence que le drag de la timeline ──────────────────
 	//
 	// L'`onChange` d'un `<input type="range">` se déclenche à la cadence du POINTEUR — 125 à
@@ -68,6 +72,20 @@ export const TransportBar = memo(function TransportBar({
 	const rafRef = useRef(0);
 	const pendingRef = useRef<number | null>(null);
 	const draggingRef = useRef(false);
+	// Remplissage et curseur de la barre, écrits DIRECTEMENT pendant un drag.
+	//
+	// Même patron que `playheadElRef` dans V4Timeline, et pour la même raison : la position
+	// que l'utilisateur voit ne doit pas attendre un rendu React. Ces deux éléments étaient
+	// positionnés uniquement depuis `progress`, dérivé du store — donc en retard d'un commit
+	// à chaque mouvement, alors que la tête de lecture de la timeline, elle, colle au
+	// pointeur. C'est la dernière différence de parité entre les deux chemins que j'aie pu
+	// identifier dans le code.
+	//
+	// React continue de les positionner hors drag (et au rendu suivant pendant le drag, avec
+	// une valeur au pire vieille d'une frame puisque le rAF écrit au store à 60 Hz) : les
+	// deux écritures convergent au lieu de se contredire.
+	const progressElRef = useRef<HTMLDivElement | null>(null);
+	const thumbElRef = useRef<HTMLDivElement | null>(null);
 
 	useEffect(() => {
 		return () => {
@@ -86,6 +104,15 @@ export const TransportBar = memo(function TransportBar({
 				return;
 			}
 			pendingRef.current = value;
+			// Visuel d'abord, sans passer par React : latence nulle, comme la tête de lecture
+			// de la timeline. `inputMax` est déjà borné à 1 minimum, pas de division par zéro.
+			const pct = Math.min(100, Math.max(0, (value / inputMax) * 100));
+			if (progressElRef.current) {
+				progressElRef.current.style.width = `${pct}%`;
+			}
+			if (thumbElRef.current) {
+				thumbElRef.current.style.left = `${pct}%`;
+			}
 			if (rafRef.current !== 0) {
 				return;
 			}
@@ -97,7 +124,7 @@ export const TransportBar = memo(function TransportBar({
 				}
 			});
 		},
-		[onSeek],
+		[onSeek, inputMax],
 	);
 
 	const endDrag = useCallback(() => {
@@ -119,10 +146,6 @@ export const TransportBar = memo(function TransportBar({
 		}
 	}, [onSeek]);
 
-	const inputMax = virtualDurationSec || 1;
-	const inputValue = Math.min(Math.max(currentTimeSec, 0), inputMax);
-	const progress = (inputValue / inputMax) * 100;
-
 	return (
 		<div className={styles.transport} role="toolbar" aria-label={te("transport.playbackControls")}>
 			<button
@@ -160,7 +183,11 @@ export const TransportBar = memo(function TransportBar({
 			</span>
 			<div className={styles.scrubBar}>
 				<div className={styles.scrubTrack}>
-					<div className={styles.scrubProgress} style={{ width: `${progress}%` }} />
+					<div
+						ref={progressElRef}
+						className={styles.scrubProgress}
+						style={{ width: `${progress}%` }}
+					/>
 				</div>
 				<input
 					type="range"
@@ -186,6 +213,7 @@ export const TransportBar = memo(function TransportBar({
 					aria-label={te("transport.seekVideo")}
 				/>
 				<div
+					ref={thumbElRef}
 					className={styles.scrubThumb}
 					style={{
 						left: `${progress}%`,