feat: Implement in-app service worker update notification

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

webclient/src/App.js

@@ -19,6 +19,7 @@ function App() {
 	const [theme, setTheme] = useState(localStorage.getItem('theme') || '');
 	const cache = useRef({});
 	const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement);
+	const [waitingWorker, setWaitingWorker] = useState(null);
 
 	const updateCache = useCallback((key, value) => {
 		cache.current[key] = value;
@@ -44,6 +45,14 @@ function App() {
 		localStorage.setItem('theme', 'red');
 	};
 
+	useEffect(() => {
+		const onSWUpdate = e => {
+			setWaitingWorker(e.detail.waiting);
+		};
+		window.addEventListener('swUpdate', onSWUpdate);
+		return () => window.removeEventListener('swUpdate', onSWUpdate);
+	}, []);
+
 	useEffect(() => {
 		if (Object.keys(cache.current).length === 0) {
 			localForage.iterate((value, key) => {
@@ -90,6 +99,19 @@ function App() {
 
 	return (
 		<div className={theme}>
+			{waitingWorker &&
+				<div style={{padding: 10, backgroundColor: '#ffffcc', color: '#000'}}>
+					A new version is available.{' '}
+					<button onClick={() => {
+						waitingWorker.postMessage({ type: 'SKIP_WAITING' });
+						navigator.serviceWorker.addEventListener('controllerchange', () => {
+							window.location.reload();
+						});
+					}}>
+						Refresh
+					</button>
+				</div>
+			}
 			<Router>
 				<div className='container menu'>
 					<p>