Address code review findings

- Escape JSON output with JSON_HEX_TAG to prevent XSS via </script>
  in query text.
- Add timeout to shadow root polling (max 10 seconds).
- Debounce MutationObserver to reduce overhead during re-renders.
- Add missing await on toBeVisible() in QM 3.x test.
- Add toPass() retry for SQLite toggle check in QM 4.0 test.
- Document QM source reference for admin bar query filtering.

Author: JanJakes

packages/plugin-sqlite-database-integration/integrations/query-monitor/collector.php

@@ -77,11 +77,11 @@ public function output() {
 			return;
 		}
 
-		// Re-index: QM's collector may skip some $wpdb->queries entries
-		// (e.g., admin bar queries), so we need to map our indices to
-		// match the rows QM actually renders. QM iterates $wpdb->queries
-		// sequentially and skips entries containing 'wp_admin_bar' in the
-		// stack trace. We replicate that filtering here.
+		// Re-index: QM's DB queries collector skips $wpdb->queries entries
+		// where the stack trace contains 'wp_admin_bar'. We replicate that
+		// filtering to align our row indices with QM's rendered rows.
+		// See: QM_Collector_DB_Queries::process_db_object() in QM's
+		// collectors/db_queries.php.
 		global $wpdb;
 		$mapped    = array();
 		$row_index = 0;
@@ -97,9 +97,11 @@ public function output() {
 		}
 
 		// Output JSON data for the JS module.
+		// JSON_HEX_TAG escapes < and > to \u003C and \u003E, preventing
+		// a literal "</script>" in query text from breaking out of the tag.
 		printf(
 			'<script type="application/json" id="qm-sqlite-data">%s</script>',
-			wp_json_encode( $mapped )
+			wp_json_encode( $mapped, JSON_HEX_TAG )
 		);
 
 		// Output the JS module inline.

packages/plugin-sqlite-database-integration/integrations/query-monitor/query-monitor-sqlite.js

@@ -115,8 +115,13 @@
 			injectSQLiteInfo( shadowRoot );
 
 			// Observe for future renders (panel switches, re-renders).
+			// Debounce to avoid excessive work during rapid Preact re-renders.
+			var debounceTimer;
 			var observer = new MutationObserver( function() {
-				injectSQLiteInfo( shadowRoot );
+				clearTimeout( debounceTimer );
+				debounceTimer = setTimeout( function() {
+					injectSQLiteInfo( shadowRoot );
+				}, 100 );
 			} );
 			observer.observe( shadowRoot, { childList: true, subtree: true } );
 		}
@@ -128,10 +133,13 @@
 			// detect attachShadow(), so we poll. QM's module script is deferred
 			// and attaches the shadow root on DOMContentLoaded, which may fire
 			// after our inline script's DOMContentLoaded handler.
+			var pollCount = 0;
 			var pollInterval = setInterval( function() {
 				if ( container.shadowRoot ) {
 					clearInterval( pollInterval );
 					onShadowReady( container.shadowRoot );
+				} else if ( ++pollCount > 200 ) {
+					clearInterval( pollInterval );
 				}
 			}, 50 );
 		}

tests/e2e/specs/query-monitor-plugin.test.js

@@ -75,14 +75,17 @@ test.describe( 'Query Monitor plugin', () => {
 		} ).toPass();
 
 		// Click the SQLite toggle button for the first query row.
-		await container.evaluate( ( el ) => {
-			const shadow = el.shadowRoot;
-			const toggle = shadow.querySelector( '.qm-sqlite-toggle' );
-			if ( ! toggle ) {
-				throw new Error( 'SQLite toggle button not found' );
-			}
-			toggle.click();
-		} );
+		// The toggle is injected by a debounced MutationObserver, so retry.
+		await expect( async () => {
+			await container.evaluate( ( el ) => {
+				const shadow = el.shadowRoot;
+				const toggle = shadow.querySelector( '.qm-sqlite-toggle' );
+				if ( ! toggle ) {
+					throw new Error( 'SQLite toggle button not found' );
+				}
+				toggle.click();
+			} );
+		} ).toPass();
 
 		// Verify the SQLite query is displayed.
 		await expect( async () => {
@@ -129,7 +132,7 @@ test.describe( 'Query Monitor plugin', () => {
 
 		// Check that the query is logged with SQLite information.
 		await sqlCell.getByLabel( 'Toggle SQLite queries' ).click();
-		expect(
+		await expect(
 			page
 				.locator( '.qm-sqlite-query', {
 					hasText: