From 13d3d304afdbbef53c3b5425a77d97e1fc7bdf89 Mon Sep 17 00:00:00 2001
From: Eetu Rantanen <eeturantanen.dev@gmail.com>
Date: Fri, 10 Jul 2026 15:09:03 +0300
Subject: [PATCH 01/11] add dev-preview scaffolding and dependencies

---
 .gitignore                       |  1 +
 package.json                     |  3 +++
 scripts/dev-preview/constants.js | 40 ++++++++++++++++++++++++++++++++
 scripts/dev-preview/index.js     |  2 ++
 4 files changed, 46 insertions(+)
 create mode 100644 scripts/dev-preview/constants.js
 create mode 100644 scripts/dev-preview/index.js

diff --git a/.gitignore b/.gitignore
index 4b5b6746381..b43392c4538 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+/.dev-preview
 /.idea/
 /node_modules
 /lua/output
diff --git a/package.json b/package.json
index e0130280365..f4f4f9f5090 100644
--- a/package.json
+++ b/package.json
@@ -7,11 +7,13 @@
 		"@playwright/test": "^1.61.1",
 		"@stylistic/stylelint-plugin": "^2.1.2",
 		"@typescript-eslint/eslint-plugin": "^8.56.1",
+		"chokidar": "^4.0.3",
 		"eslint": "9.x.x",
 		"eslint-config-wikimedia": "0.32.3",
 		"eslint-plugin-jsdoc": "^62.6.0",
 		"eslint-plugin-vue": "10.6.x",
 		"globals": "^17.3.0",
+		"http-mitm-proxy": "^1.1.0",
 		"jest": "^30.2.0",
 		"jest-environment-jsdom": "^30.2.0",
 		"jest-junit": "^16.0.0",
@@ -33,6 +35,7 @@
 		]
 	},
 	"scripts": {
+		"dev": "node scripts/dev-preview/index.js",
 		"lint": "npm run lint:js && npm run lint:scss",
 		"lint:ci": "npm run lint:js && npm run lint:scss:ci",
 		"lint:js": "eslint --fix",
diff --git a/scripts/dev-preview/constants.js b/scripts/dev-preview/constants.js
new file mode 100644
index 00000000000..cd478c7368f
--- /dev/null
+++ b/scripts/dev-preview/constants.js
@@ -0,0 +1,40 @@
+const path = require( 'path' );
+
+const repoRoot = path.resolve( __dirname, '..', '..' );
+
+const DEV_DIR = path.join( repoRoot, '.dev-preview' );
+
+module.exports = {
+	REPO_ROOT: repoRoot,
+	OUTPUT_CSS: path.join( repoRoot, 'lua', 'output', 'css', 'main.css' ),
+	OUTPUT_JS: path.join( repoRoot, 'lua', 'output', 'js', 'main.js' ),
+	DEV_DIR,
+	PROFILE_DIR: path.join( DEV_DIR, 'profile' ),
+	CA_DIR: path.join( DEV_DIR, 'ca' ),
+	DEFAULT_PORT: 8081,
+	WATCH_GLOBS: [ 'stylesheets/**/*.scss', 'javascript/**/*.js' ],
+	// First existing entry wins. LP_DEV_BROWSER env overrides all of this.
+	BROWSER_CANDIDATES: {
+		linux: [
+			'/usr/bin/google-chrome',
+			'/usr/bin/google-chrome-stable',
+			'/usr/bin/chromium',
+			'/usr/bin/chromium-browser',
+			'/usr/bin/brave-browser',
+			'/opt/brave-bin/brave',
+			'/usr/bin/microsoft-edge'
+		],
+		darwin: [
+			'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+			'/Applications/Chromium.app/Contents/MacOS/Chromium',
+			'/Applications/Brave Browser.app/Contents/MacOS/Brave Browser',
+			'/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge'
+		],
+		win32: [
+			'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+			'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
+			'C:\\Program Files\\BraveSoftware\\Brave-Browser\\Application\\brave.exe',
+			'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe'
+		]
+	}
+};
diff --git a/scripts/dev-preview/index.js b/scripts/dev-preview/index.js
new file mode 100644
index 00000000000..babae77d81a
--- /dev/null
+++ b/scripts/dev-preview/index.js
@@ -0,0 +1,2 @@
+console.log( 'dev-preview: not yet implemented' );
+process.exit( 0 );

From 94852f9b1fa0612345663455e2b084908ef80223 Mon Sep 17 00:00:00 2001
From: Eetu Rantanen <eeturantanen.dev@gmail.com>
Date: Fri, 10 Jul 2026 15:11:19 +0300
Subject: [PATCH 02/11] add dev-preview request classifier

---
 scripts/dev-preview/classify.js | 42 +++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 scripts/dev-preview/classify.js

diff --git a/scripts/dev-preview/classify.js b/scripts/dev-preview/classify.js
new file mode 100644
index 00000000000..736a8ffe4fa
--- /dev/null
+++ b/scripts/dev-preview/classify.js
@@ -0,0 +1,42 @@
+// Classify a proxied request URL into the local asset we should serve, or
+// 'passthrough' to forward it to the real server untouched.
+function classifyRequest( rawUrl ) {
+	let parsed;
+	try {
+		parsed = new URL( rawUrl );
+	} catch ( e ) {
+		return 'passthrough';
+	}
+
+	const host = parsed.hostname.toLowerCase();
+	const isLiquipedia = host === 'liquipedia.net' || host.endsWith( '.liquipedia.net' );
+	if ( !isLiquipedia || !parsed.pathname.endsWith( '/commons/load.php' ) ) {
+		return 'passthrough';
+	}
+
+	// The LakesideView skin needs runtime theme vars we cannot compile locally.
+	if ( ( parsed.searchParams.get( 'skin' ) || '' ) === 'lakesideview' ) {
+		return 'passthrough';
+	}
+
+	const only = parsed.searchParams.get( 'only' );
+	if ( only === 'styles' ) {
+		return 'styles';
+	}
+	if ( only === 'scripts' ) {
+		return 'scripts';
+	}
+	return 'passthrough';
+}
+
+function contentTypeFor( kind ) {
+	if ( kind === 'styles' ) {
+		return 'text/css; charset=utf-8';
+	}
+	if ( kind === 'scripts' ) {
+		return 'text/javascript; charset=utf-8';
+	}
+	throw new Error( `No content type for kind: ${ kind }` );
+}
+
+module.exports = { classifyRequest, contentTypeFor };

From 904594a1c990d7f101fe054e5b1c8368a1453c00 Mon Sep 17 00:00:00 2001
From: Eetu Rantanen <eeturantanen.dev@gmail.com>
Date: Fri, 10 Jul 2026 15:13:37 +0300
Subject: [PATCH 03/11] add dev-preview pac generation

---
 scripts/dev-preview/pac.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 scripts/dev-preview/pac.js

diff --git a/scripts/dev-preview/pac.js b/scripts/dev-preview/pac.js
new file mode 100644
index 00000000000..af5bc0cec76
--- /dev/null
+++ b/scripts/dev-preview/pac.js
@@ -0,0 +1,19 @@
+// Route only *.liquipedia.net through the local proxy; everything else DIRECT
+// so the contributor's normal browsing is untouched.
+function buildPac( port ) {
+	return [
+		'function FindProxyForURL( url, host ) {',
+		'\tif ( dnsDomainIs( host, "liquipedia.net" ) || shExpMatch( host, "*.liquipedia.net" ) ) {',
+		`\t\treturn "PROXY 127.0.0.1:${ port }";`,
+		'\t}',
+		'\treturn "DIRECT";',
+		'}'
+	].join( '\n' );
+}
+
+function pacDataUrl( port ) {
+	const encoded = encodeURIComponent( buildPac( port ) );
+	return `data:application/x-ns-proxy-autoconfig,${ encoded }`;
+}
+
+module.exports = { buildPac, pacDataUrl };

From 985eb22b3495e8d88860210f9b58db06e65e69a8 Mon Sep 17 00:00:00 2001
From: Eetu Rantanen <eeturantanen.dev@gmail.com>
Date: Fri, 10 Jul 2026 15:17:13 +0300
Subject: [PATCH 04/11] fix dev-preview pac domain match

---
 scripts/dev-preview/pac.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/scripts/dev-preview/pac.js b/scripts/dev-preview/pac.js
index af5bc0cec76..93102c042b1 100644
--- a/scripts/dev-preview/pac.js
+++ b/scripts/dev-preview/pac.js
@@ -1,9 +1,12 @@
-// Route only *.liquipedia.net through the local proxy; everything else DIRECT
-// so the contributor's normal browsing is untouched.
 function buildPac( port ) {
+	// Apex + subdomains only. shExpMatch( '*.liquipedia.net' ) needs a dot
+	// before the suffix, so it rejects lookalikes like notliquipedia.net;
+	// the explicit apex check covers the bare domain. (Do NOT use
+	// dnsDomainIs( host, 'liquipedia.net' ) — it is a plain suffix match and
+	// would route notliquipedia.net through the proxy.)
 	return [
 		'function FindProxyForURL( url, host ) {',
-		'\tif ( dnsDomainIs( host, "liquipedia.net" ) || shExpMatch( host, "*.liquipedia.net" ) ) {',
+		'\tif ( host === "liquipedia.net" || shExpMatch( host, "*.liquipedia.net" ) ) {',
 		`\t\treturn "PROXY 127.0.0.1:${ port }";`,
 		'\t}',
 		'\treturn "DIRECT";',

From f5072523fe597602ea87b9548fcb82f6b0c3ecbe Mon Sep 17 00:00:00 2001
From: Eetu Rantanen <eeturantanen.dev@gmail.com>
Date: Fri, 10 Jul 2026 15:19:09 +0300
Subject: [PATCH 05/11] add dev-preview browser detection and launch

---
 scripts/dev-preview/browser.js | 38 ++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 scripts/dev-preview/browser.js

diff --git a/scripts/dev-preview/browser.js b/scripts/dev-preview/browser.js
new file mode 100644
index 00000000000..39dd9ff1f6b
--- /dev/null
+++ b/scripts/dev-preview/browser.js
@@ -0,0 +1,38 @@
+const { spawn } = require( 'child_process' );
+const fs = require( 'fs' );
+const { BROWSER_CANDIDATES } = require( './constants.js' );
+
+// Pure: pick the browser binary. LP_DEV_BROWSER wins; otherwise first existing
+// candidate for the platform. Returns null if none found.
+function detectBrowser( { env, platform, existsSync } ) {
+	const override = env.LP_DEV_BROWSER;
+	if ( override ) {
+		return existsSync( override ) ? override : null;
+	}
+	const candidates = BROWSER_CANDIDATES[ platform ] || [];
+	for ( const candidate of candidates ) {
+		if ( existsSync( candidate ) ) {
+			return candidate;
+		}
+	}
+	return null;
+}
+
+// Thin shell: spawn the browser detached-but-tracked so we can kill it on teardown.
+// --disable-quic is required: HTTP/3 bypasses the HTTP proxy entirely.
+function launchBrowser( { browserPath, profileDir, pacUrl, url } ) {
+	const args = [
+		`--user-data-dir=${ profileDir }`,
+		`--proxy-pac-url=${ pacUrl }`,
+		'--ignore-certificate-errors',
+		'--test-type',
+		'--disable-quic',
+		'--no-first-run',
+		'--no-default-browser-check',
+		'--new-window',
+		url
+	];
+	return spawn( browserPath, args, { stdio: 'ignore' } );
+}
+
+module.exports = { detectBrowser, launchBrowser, defaultExistsSync: fs.existsSync };

From d47087fb31c4e791f19be793e0a19f3d766ebc58 Mon Sep 17 00:00:00 2001
From: Eetu Rantanen <eeturantanen.dev@gmail.com>
Date: Fri, 10 Jul 2026 15:21:39 +0300
Subject: [PATCH 06/11] add dev-preview refresh client

---
 scripts/dev-preview/refresh-client.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 scripts/dev-preview/refresh-client.js

diff --git a/scripts/dev-preview/refresh-client.js b/scripts/dev-preview/refresh-client.js
new file mode 100644
index 00000000000..a69d0b9bd2d
--- /dev/null
+++ b/scripts/dev-preview/refresh-client.js
@@ -0,0 +1,17 @@
+// Appended to the JS bundle we serve on only=scripts. No <script> tags — it is
+// concatenated into executable JS. Every Liquipedia page loads this bundle via
+// load.php, so appending here avoids rewriting HTML response bodies.
+const REFRESH_CLIENT = `
+;(function () {
+	'use strict';
+	function check() {
+		fetch( '/__lp_dev_rebuild_check__', { cache: 'no-store' } )
+			.then( function ( r ) { return r.ok ? r.json() : null; } )
+			.then( function ( d ) { if ( d && d.reload ) { location.reload(); } } )
+			.catch( function () {} );
+	}
+	setInterval( check, 2000 );
+}());
+`;
+
+module.exports = { REFRESH_CLIENT };

From fe00970a87839b533e8692e9543ed8538f2af199 Mon Sep 17 00:00:00 2001
From: Eetu Rantanen <eeturantanen.dev@gmail.com>
Date: Fri, 10 Jul 2026 15:37:03 +0300
Subject: [PATCH 07/11] add dev-preview mitm proxy

---
 scripts/dev-preview/proxy.js | 81 ++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 scripts/dev-preview/proxy.js

diff --git a/scripts/dev-preview/proxy.js b/scripts/dev-preview/proxy.js
new file mode 100644
index 00000000000..6e0c4057fd6
--- /dev/null
+++ b/scripts/dev-preview/proxy.js
@@ -0,0 +1,81 @@
+const fs = require( 'fs' );
+const { Proxy } = require( 'http-mitm-proxy' );
+const { classifyRequest, contentTypeFor } = require( './classify.js' );
+const { REFRESH_CLIENT } = require( './refresh-client.js' );
+const { OUTPUT_CSS, OUTPUT_JS, CA_DIR } = require( './constants.js' );
+
+const REBUILD_PATH = '/__lp_dev_rebuild_check__';
+
+function readOrNull( file ) {
+	try {
+		return fs.readFileSync( file, 'utf8' );
+	} catch ( e ) {
+		return null;
+	}
+}
+
+function serve( res, body, contentType ) {
+	res.writeHead( 200, {
+		'Content-Type': contentType,
+		'Cache-Control': 'no-store'
+	} );
+	res.end( body );
+}
+
+function startProxy( { port, state } ) {
+	const proxy = new Proxy();
+
+	proxy.onError( ( ctx, err ) => {
+		console.error( `[proxy] ${ err && err.message ? err.message : err }` );
+	} );
+
+	proxy.onRequest( ( ctx, callback ) => {
+		const req = ctx.clientToProxyRequest;
+		const host = req.headers.host || '';
+		const res = ctx.proxyToClientResponse;
+
+		// Rebuild-check endpoint (fetched relative to liquipedia.net origin).
+		if ( req.url.startsWith( REBUILD_PATH ) ) {
+			const reload = state.needsReload === true;
+			state.needsReload = false;
+			serve( res, JSON.stringify( { reload } ), 'application/json; charset=utf-8' );
+			return;
+		}
+
+		const kind = classifyRequest( `https://${ host }${ req.url }` );
+		if ( kind === 'styles' ) {
+			const css = readOrNull( OUTPUT_CSS );
+			if ( css !== null ) {
+				serve( res, css, contentTypeFor( 'styles' ) );
+				return;
+			}
+		} else if ( kind === 'scripts' ) {
+			const js = readOrNull( OUTPUT_JS );
+			if ( js !== null ) {
+				serve( res, js + '\n' + REFRESH_CLIENT, contentTypeFor( 'scripts' ) );
+				return;
+			}
+		}
+
+		// passthrough, or local file missing → forward untouched.
+		callback();
+	} );
+
+	return new Promise( ( resolve, reject ) => {
+		// Force IPv4 loopback: http-mitm-proxy's internal per-hostname HTTPS
+		// tunnel dials out via a hardcoded 0.0.0.0 (which the OS resolves as
+		// 127.0.0.1). If host defaults to 'localhost' and that resolves to
+		// ::1 first (common on modern Linux), the internal server binds
+		// IPv6-only and the tunnel connect fails with ECONNREFUSED.
+		proxy.listen( { host: '127.0.0.1', port, sslCaDir: CA_DIR }, ( err ) => {
+			if ( err ) {
+				reject( err );
+				return;
+			}
+			console.log( `[proxy] listening on 127.0.0.1:${ port }` );
+			resolve( { stop: () => proxy.close() } );
+		} );
+	} );
+}
+
+module.exports = { startProxy, REBUILD_PATH };

From c6b39eb45107ab250c0701c38f025a96d9880646 Mon Sep 17 00:00:00 2001
From: Eetu Rantanen <eeturantanen.dev@gmail.com>
Date: Fri, 10 Jul 2026 15:46:30 +0300
Subject: [PATCH 08/11] add dev-preview file watcher

---
 scripts/dev-preview/watch.js | 77 ++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 scripts/dev-preview/watch.js

diff --git a/scripts/dev-preview/watch.js b/scripts/dev-preview/watch.js
new file mode 100644
index 00000000000..c4d1424911f
--- /dev/null
+++ b/scripts/dev-preview/watch.js
@@ -0,0 +1,77 @@
+const { execFile } = require( 'child_process' );
+const chokidar = require( 'chokidar' );
+const { WATCH_GLOBS, REPO_ROOT } = require( './constants.js' );
+
+const npmCmd = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+
+// chokidar v4 dropped glob-string support (watches literal paths only), so
+// WATCH_GLOBS entries like 'stylesheets/**/*.scss' must be reduced to their
+// base directory ('stylesheets') before being handed to chokidar.watch().
+function globBaseDir( pattern ) {
+	const base = [];
+	for ( const segment of pattern.split( '/' ) ) {
+		if ( segment.includes( '*' ) ) {
+			break;
+		}
+		base.push( segment );
+	}
+	return base.join( '/' ) || '.';
+}
+
+function runBuild( script ) {
+	return new Promise( ( resolve ) => {
+		execFile( npmCmd, [ 'run', script ], { cwd: REPO_ROOT }, ( err, stdout, stderr ) => {
+			if ( err ) {
+				console.error( `[watch] ${ script } failed:\n${ stderr || stdout }` );
+				resolve( false );
+				return;
+			}
+			resolve( true );
+		} );
+	} );
+}
+
+function startWatcher( { state } ) {
+	let timer = null;
+	let pending = { css: false, js: false };
+
+	function schedule( kind ) {
+		pending[ kind ] = true;
+		if ( timer ) {
+			clearTimeout( timer );
+		}
+		timer = setTimeout( async () => {
+			timer = null;
+			const todo = pending;
+			pending = { css: false, js: false };
+			let built = false;
+			if ( todo.css && await runBuild( 'build:css' ) ) {
+				built = true;
+			}
+			if ( todo.js && await runBuild( 'build:js' ) ) {
+				built = true;
+			}
+			if ( built ) {
+				state.needsReload = true;
+				console.log( '[watch] rebuilt — browser will reload' );
+			}
+		}, 300 );
+	}
+
+	const watchDirs = [ ...new Set( WATCH_GLOBS.map( globBaseDir ) ) ];
+	const watcher = chokidar.watch( watchDirs, {
+		cwd: REPO_ROOT,
+		ignoreInitial: true
+	} );
+	watcher.on( 'change', ( file ) => {
+		if ( file.endsWith( '.scss' ) ) {
+			schedule( 'css' );
+		} else if ( file.endsWith( '.js' ) ) {
+			schedule( 'js' );
+		}
+	} );
+
+	return { stop: () => watcher.close() };
+}
+
+module.exports = { startWatcher };

From 08536d3e5b2dbaa1a325c05f87bf3759205cd144 Mon Sep 17 00:00:00 2001
From: Eetu Rantanen <eeturantanen.dev@gmail.com>
Date: Fri, 10 Jul 2026 15:55:27 +0300
Subject: [PATCH 09/11] add dev-preview orchestrator

---
 scripts/dev-preview/index.js | 92 +++++++++++++++++++++++++++++++++++-
 1 file changed, 90 insertions(+), 2 deletions(-)

diff --git a/scripts/dev-preview/index.js b/scripts/dev-preview/index.js
index babae77d81a..91e7b501835 100644
--- a/scripts/dev-preview/index.js
+++ b/scripts/dev-preview/index.js
@@ -1,2 +1,90 @@
-console.log( 'dev-preview: not yet implemented' );
-process.exit( 0 );
+const fs = require( 'fs' );
+const { execFileSync } = require( 'child_process' );
+const { startProxy } = require( './proxy.js' );
+const { startWatcher } = require( './watch.js' );
+const { detectBrowser, launchBrowser, defaultExistsSync } = require( './browser.js' );
+const { pacDataUrl } = require( './pac.js' );
+const {
+	REPO_ROOT, DEV_DIR, PROFILE_DIR, DEFAULT_PORT
+} = require( './constants.js' );
+
+const npmCmd = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+
+function fail( message ) {
+	console.error( `[dev] ${ message }` );
+	process.exit( 1 );
+}
+
+async function main() {
+	const args = process.argv.slice( 2 );
+	const port = Number( process.env.LP_DEV_PORT ) || DEFAULT_PORT;
+
+	if ( args.includes( '--clean' ) ) {
+		fs.rmSync( PROFILE_DIR, { recursive: true, force: true } );
+		console.log( '[dev] wiped browser profile' );
+	}
+	fs.mkdirSync( DEV_DIR, { recursive: true } );
+
+	// Fail fast: find a browser before doing anything expensive.
+	const browserPath = detectBrowser( {
+		env: process.env,
+		platform: process.platform,
+		existsSync: defaultExistsSync
+	} );
+	if ( !browserPath ) {
+		fail( 'No Chromium-family browser found. Set LP_DEV_BROWSER to a chrome/chromium/brave/edge binary.' );
+	}
+
+	// Initial build so assets exist on first page load.
+	try {
+		console.log( '[dev] initial build...' );
+		execFileSync( npmCmd, [ 'run', 'build' ], { cwd: REPO_ROOT, stdio: 'inherit' } );
+	} catch ( e ) {
+		fail( 'Initial build failed (see output above).' );
+	}
+
+	const state = { needsReload: false };
+
+	let proxy;
+	try {
+		proxy = await startProxy( { port, state } );
+	} catch ( e ) {
+		fail( `Could not start proxy on port ${ port } (${ e.message }). Set LP_DEV_PORT to another port.` );
+	}
+
+	const watcher = startWatcher( { state } );
+
+	const browser = launchBrowser( {
+		browserPath,
+		profileDir: PROFILE_DIR,
+		pacUrl: pacDataUrl( port ),
+		url: 'https://liquipedia.net'
+	} );
+	console.log( `[dev] launched ${ browserPath }` );
+	console.log( '[dev] edit .scss/.js and the browser reloads. Ctrl-C to stop.' );
+
+	let closing = false;
+	function teardown() {
+		if ( closing ) {
+			return;
+		}
+		closing = true;
+		console.log( '\n[dev] shutting down...' );
+		try {
+			watcher.stop();
+		} catch ( e ) { /* ignore */ }
+		try {
+			proxy.stop();
+		} catch ( e ) { /* ignore */ }
+		try {
+			browser.kill();
+		} catch ( e ) { /* ignore */ }
+		process.exit( 0 );
+	}
+
+	process.on( 'SIGINT', teardown );
+	process.on( 'SIGTERM', teardown );
+	browser.on( 'exit', teardown );
+}
+
+main();

From e84dc59317a76406f060b89498c445817f47d62f Mon Sep 17 00:00:00 2001
From: Eetu Rantanen <eeturantanen.dev@gmail.com>
Date: Fri, 10 Jul 2026 15:58:09 +0300
Subject: [PATCH 10/11] document local asset preview

---
 README.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/README.md b/README.md
index 74287267068..96d303fff35 100644
--- a/README.md
+++ b/README.md
@@ -150,6 +150,33 @@ To test your changes in action, you can run the GitHub Action called "Personal D
 To check the workflow progress from the CLI, you can run:
 `gh run list --workflow="deploy test.yml"`
 
+#### Local asset preview (CSS/JS)
+
+`npm run dev` opens a browser rendering liquipedia.net with your locally-built
+CSS and JS injected, and auto-reloads it whenever you save a `.scss` or `.js`
+file. Any editor works — there is no editor integration to configure.
+
+Requirements: a Chromium-family browser (Chrome, Chromium, Brave, or Edge) and
+`npm install` already run.
+
+```bash
+npm run dev
+```
+
+- Edit a `.scss` or `.js` file and save — the browser reloads automatically.
+- Press Ctrl-C to stop the proxy, watcher, and browser.
+
+Environment overrides:
+
+- `LP_DEV_BROWSER` — absolute path to a browser binary if auto-detection fails.
+- `LP_DEV_PORT` — proxy port (default 8081).
+- `npm run dev -- --clean` — wipe the throwaway browser profile before starting.
+
+**This previews CSS/JS only.** Lua modules render server-side and cannot be
+previewed locally — use the dev-wiki deploy flow for those. This tool launches a
+dedicated, disposable browser profile that ignores certificate errors and proxies
+only `*.liquipedia.net`; your normal browser and browsing are untouched.
+
 ## Support
 
 If you encounter any issues or have questions, feel free to open an issue on GitHub or reach out to the Liquipedia community for support.

From d9152af7e5dee867ad4ead8a92e240421453bd0d Mon Sep 17 00:00:00 2001
From: Eetu Rantanen <eeturantanen.dev@gmail.com>
Date: Fri, 10 Jul 2026 16:03:43 +0300
Subject: [PATCH 11/11] harden dev-preview poller, watcher, and browser launch

---
 README.md                             | 3 ++-
 scripts/dev-preview/index.js          | 4 ++++
 scripts/dev-preview/refresh-client.js | 2 ++
 scripts/dev-preview/watch.js          | 7 +++++--
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 96d303fff35..b9d86ebfcd3 100644
--- a/README.md
+++ b/README.md
@@ -175,7 +175,8 @@ Environment overrides:
 **This previews CSS/JS only.** Lua modules render server-side and cannot be
 previewed locally — use the dev-wiki deploy flow for those. This tool launches a
 dedicated, disposable browser profile that ignores certificate errors and proxies
-only `*.liquipedia.net`; your normal browser and browsing are untouched.
+only `*.liquipedia.net`; your normal browser and browsing are untouched. Because
+certificate validation is disabled in this profile, avoid browsing other sites in it.
 
 ## Support
 
diff --git a/scripts/dev-preview/index.js b/scripts/dev-preview/index.js
index 91e7b501835..6fa8b3c25f8 100644
--- a/scripts/dev-preview/index.js
+++ b/scripts/dev-preview/index.js
@@ -85,6 +85,10 @@ async function main() {
 	process.on( 'SIGINT', teardown );
 	process.on( 'SIGTERM', teardown );
 	browser.on( 'exit', teardown );
+	browser.on( 'error', ( e ) => {
+		console.error( `[dev] browser process error: ${ e.message }` );
+		teardown();
+	} );
 }
 
 main();
diff --git a/scripts/dev-preview/refresh-client.js b/scripts/dev-preview/refresh-client.js
index a69d0b9bd2d..1339d74cfbb 100644
--- a/scripts/dev-preview/refresh-client.js
+++ b/scripts/dev-preview/refresh-client.js
@@ -4,6 +4,8 @@
 const REFRESH_CLIENT = `
 ;(function () {
 	'use strict';
+	if ( window.__lpDevRefresh ) { return; }
+	window.__lpDevRefresh = true;
 	function check() {
 		fetch( '/__lp_dev_rebuild_check__', { cache: 'no-store' } )
 			.then( function ( r ) { return r.ok ? r.json() : null; } )
diff --git a/scripts/dev-preview/watch.js b/scripts/dev-preview/watch.js
index c4d1424911f..88a366b65be 100644
--- a/scripts/dev-preview/watch.js
+++ b/scripts/dev-preview/watch.js
@@ -63,13 +63,16 @@ function startWatcher( { state } ) {
 		cwd: REPO_ROOT,
 		ignoreInitial: true
 	} );
-	watcher.on( 'change', ( file ) => {
+	function onFileEvent( file ) {
 		if ( file.endsWith( '.scss' ) ) {
 			schedule( 'css' );
 		} else if ( file.endsWith( '.js' ) ) {
 			schedule( 'js' );
 		}
-	} );
+	}
+	watcher.on( 'change', onFileEvent );
+	watcher.on( 'add', onFileEvent );
+	watcher.on( 'unlink', onFileEvent );
 
 	return { stop: () => watcher.close() };
 }