From 83a58f1a581917fa8bdd9867905d5f778dc34ced Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 18 Jun 2026 17:43:04 +0200
Subject: [PATCH 1/3] refac

---
 .../src/lib/components/Sidebar.svelte         |  93 +++++++-----
 .../src/lib/components/chat/ChatPanel.svelte  |  22 +--
 cptr/frontend/src/lib/stores/chat.ts          | 143 +++++++++---------
 cptr/frontend/src/lib/stores/socket.svelte.ts |  40 ++++-
 cptr/frontend/src/routes/+layout.svelte       |  43 ++++--
 5 files changed, 195 insertions(+), 146 deletions(-)

diff --git a/cptr/frontend/src/lib/components/Sidebar.svelte b/cptr/frontend/src/lib/components/Sidebar.svelte
index 07226343..90aee35b 100644
--- a/cptr/frontend/src/lib/components/Sidebar.svelte
+++ b/cptr/frontend/src/lib/components/Sidebar.svelte
@@ -10,7 +10,7 @@
 		sidebarWidth,
 		appVersion,
 		showChangelog,
-		showSearch,
+		showSearch
 	} from '$lib/stores';
 	import Sortable from 'sortablejs';
 	import Icon from './Icon.svelte';
@@ -41,6 +41,7 @@
 	let menuButtonEl: HTMLButtonElement | undefined = $state();
 	let wsListEl: HTMLDivElement | undefined = $state();
 	let sortable: Sortable | null = null;
+	let unbindSocketListener: (() => void) | null = null;
 
 	// ── Per-workspace chat history ──────────────────────────────
 	let expandedWorkspaces = $state<Set<string>>(new Set());
@@ -119,7 +120,13 @@
 	// Socket listener for chat events — invalidate cache when chats update
 	const seenChatIds = new Set<string>();
 
-	function handleChatEvent(data: { chat_id: string; done?: boolean; title?: string; delta?: string; workspace?: string }) {
+	function handleChatEvent(data: {
+		chat_id: string;
+		done?: boolean;
+		title?: string;
+		delta?: string;
+		workspace?: string;
+	}) {
 		// Re-fetch on done, title update, or first event of a new chat
 		const isNew = !seenChatIds.has(data.chat_id);
 		seenChatIds.add(data.chat_id);
@@ -237,23 +244,13 @@
 		}
 
 		// Bind socket listener for chat cache invalidation
-		const tryBind = () => {
-			const socket = socketStore.getSocket();
-			if (!socket) {
-				setTimeout(tryBind, 200);
-				return;
-			}
-			socket.on('events:chat', handleChatEvent);
-		};
-		tryBind();
+		unbindSocketListener = socketStore.on('events:chat', handleChatEvent);
 	});
 
 	onDestroy(() => {
 		sortable?.destroy();
-		const socket = socketStore.getSocket();
-		if (socket) {
-			socket.off('events:chat', handleChatEvent);
-		}
+		unbindSocketListener?.();
+		unbindSocketListener = null;
 	});
 </script>
 
@@ -307,26 +304,31 @@
 				<span class="flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
 					>{$t('search.search')}</span
 				>
-				<KeyPill text={searchShortcut} class="ml-auto shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-100" />
+				<KeyPill
+					text={searchShortcut}
+					class="ml-auto shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-100"
+				/>
 			</button>
 		</div>
 
 		<!-- Automations (only when chat/LLM backend is available) -->
 		{#if $chatEnabled}
-		<div class="px-1.5 shrink-0">
-			<a
-				href="/automations"
-				class="flex items-center gap-1.5 w-full h-7 px-2 rounded-lg text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-100 no-underline"
-				onclick={(e) => {
-					e.preventDefault();
-					goto('/automations');
-					if (typeof window !== 'undefined' && window.innerWidth < 768) sidebarOpen.set(false);
-				}}
-			>
-				<Icon name="clock" size={14} />
-				<span class="flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap">{$t('automations.title')}</span>
-			</a>
-		</div>
+			<div class="px-1.5 shrink-0">
+				<a
+					href="/automations"
+					class="flex items-center gap-1.5 w-full h-7 px-2 rounded-lg text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-100 no-underline"
+					onclick={(e) => {
+						e.preventDefault();
+						goto('/automations');
+						if (typeof window !== 'undefined' && window.innerWidth < 768) sidebarOpen.set(false);
+					}}
+				>
+					<Icon name="clock" size={14} />
+					<span class="flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
+						>{$t('automations.title')}</span
+					>
+				</a>
+			</div>
 		{/if}
 
 		<!-- Workspace section header -->
@@ -349,10 +351,12 @@
 				{@const chats = wsChatsCache.get(ws.path)}
 				{@const isLoading = wsChatsLoading.has(ws.path)}
 				<div class="ws-item">
-					<div class="group flex items-center gap-1 w-full h-7 px-2 rounded-lg text-xs font-medium transition-colors duration-100
+					<div
+						class="group flex items-center gap-1 w-full h-7 px-2 rounded-lg text-xs font-medium transition-colors duration-100
 						{ws.path === currentPath
-						? 'bg-gray-200/50 text-gray-900 dark:bg-white/8 dark:text-white'
-						: 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'}">
+							? 'bg-gray-200/50 text-gray-900 dark:bg-white/8 dark:text-white'
+							: 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'}"
+					>
 						<a
 							href="/?workspace={encodeURIComponent(ws.path)}"
 							class="flex items-center gap-1 flex-1 min-w-0 no-underline text-inherit"
@@ -372,7 +376,10 @@
 									aria-label={isExpanded ? $t('sidebar.collapse') : $t('sidebar.addWorkspace')}
 								>
 									<span class="ws-icon-folder"><Icon name="folder" size={14} /></span>
-									<span class="ws-icon-chevron" style="transform: rotate({isExpanded ? '90deg' : '0deg'})">
+									<span
+										class="ws-icon-chevron"
+										style="transform: rotate({isExpanded ? '90deg' : '0deg'})"
+									>
 										<Icon name="chevron-right" size={11} />
 									</span>
 								</span>
@@ -422,10 +429,7 @@
 										onclick={() => handleSidebarChatClick(chat.id, ws.path, chat.title)}
 									/>
 								{/each}
-								<button
-									class="ws-chat-show-more"
-									onclick={() => handleShowMoreChats(ws.path)}
-								>
+								<button class="ws-chat-show-more" onclick={() => handleShowMoreChats(ws.path)}>
 									{$t('sidebar.showMore')}
 								</button>
 							{:else if chats}
@@ -443,8 +447,6 @@
 			{/if}
 		</div>
 
-
-
 		<!-- Settings and profile footer pinned to the bottom -->
 		<div class="relative px-1 pb-0.5 shrink-0">
 			<button
@@ -495,7 +497,12 @@
 					]
 				: []),
 			...($session ? [{ divider: true, label: '', onclick: () => {} }] : []),
-			{ label: $t('sidebar.settings'), icon: 'settings', shortcut: formatChord($keybindings.openSettings), onclick: openSettings },
+			{
+				label: $t('sidebar.settings'),
+				icon: 'settings',
+				shortcut: formatChord($keybindings.openSettings),
+				onclick: openSettings
+			},
 			{ divider: true, label: '', onclick: () => {} },
 			{ label: $t('sidebar.logOut'), icon: 'log-out', onclick: logout }
 		]}
@@ -617,7 +624,9 @@
 		align-items: center;
 		justify-content: center;
 		opacity: 0;
-		transition: opacity 0.1s, transform 0.1s;
+		transition:
+			opacity 0.1s,
+			transform 0.1s;
 		color: #9ca3af;
 	}
 
diff --git a/cptr/frontend/src/lib/components/chat/ChatPanel.svelte b/cptr/frontend/src/lib/components/chat/ChatPanel.svelte
index 7e822ac2..db99d9a7 100644
--- a/cptr/frontend/src/lib/components/chat/ChatPanel.svelte
+++ b/cptr/frontend/src/lib/components/chat/ChatPanel.svelte
@@ -104,6 +104,7 @@
 	const ttsPreparedAudio = new Map<string, PreparedTtsAudio>();
 	const TTS_AUDIO_CACHE_LIMIT_BYTES = 20 * 1024 * 1024;
 	const TTS_MAX_PREFETCH = 2;
+	let unbindSocketListeners: (() => void) | null = null;
 
 	onMount(() => {
 		if (initialChatId || typeof sessionStorage === 'undefined') return;
@@ -500,25 +501,18 @@
 			loadPreviousChats();
 		}
 
-		const tryBind = () => {
-			const socket = socketStore.getSocket();
-			if (!socket) {
-				setTimeout(tryBind, 100);
-				return;
-			}
-			socket.on('events:chat', handleSocketEvent);
-			socket.on('connect', handleReconnect);
+		const offChat = socketStore.on('events:chat', handleSocketEvent);
+		const offConnect = socketStore.on('connect', handleReconnect);
+		unbindSocketListeners = () => {
+			offChat();
+			offConnect();
 		};
-		tryBind();
 	});
 
 	onDestroy(() => {
 		stopTtsPlayback();
-		const socket = socketStore.getSocket();
-		if (socket) {
-			socket.off('events:chat', handleSocketEvent);
-			socket.off('connect', handleReconnect);
-		}
+		unbindSocketListeners?.();
+		unbindSocketListeners = null;
 		if (landingRefreshTimer) clearTimeout(landingRefreshTimer);
 		// Don't clear streamingChatTabs here -- the global listener in
 		// chat.ts handles cleanup when the "done" event arrives, so the
diff --git a/cptr/frontend/src/lib/stores/chat.ts b/cptr/frontend/src/lib/stores/chat.ts
index 5230a2b3..cbc57bff 100644
--- a/cptr/frontend/src/lib/stores/chat.ts
+++ b/cptr/frontend/src/lib/stores/chat.ts
@@ -36,7 +36,9 @@ let globalListenerBound = false;
 
 /** Whether browser notifications are enabled (persisted to localStorage). */
 export const notificationsEnabled = writable<boolean>(
-	typeof localStorage !== 'undefined' ? localStorage.getItem('notificationsEnabled') === 'true' : false
+	typeof localStorage !== 'undefined'
+		? localStorage.getItem('notificationsEnabled') === 'true'
+		: false
 );
 notificationsEnabled.subscribe((v) => {
 	if (typeof localStorage !== 'undefined') localStorage.setItem('notificationsEnabled', String(v));
@@ -53,85 +55,76 @@ notificationSound.subscribe((v) => {
 export function bindGlobalChatListener() {
 	if (globalListenerBound) return;
 
-	const tryBind = () => {
-		const socket = socketStore.getSocket();
-		if (!socket) {
-			setTimeout(tryBind, 200);
-			return;
-		}
+	socketStore.on(
+		'events:chat',
+		(data: {
+			chat_id: string;
+			done?: boolean;
+			title?: string;
+			content?: string;
+			workspace?: string;
+		}) => {
+			if (!data.done) return;
+
+			// Clear streaming indicator for the tab
+			const tabId = chatToTab.get(data.chat_id);
+			if (tabId) {
+				streamingChatTabs.update((s) => {
+					const next = new Set(s);
+					next.delete(tabId);
+					return next;
+				});
+			}
 
-		socket.on(
-			'events:chat',
-			(data: {
-				chat_id: string;
-				done?: boolean;
-				title?: string;
-				content?: string;
-				workspace?: string;
-			}) => {
-				if (!data.done) return;
-
-				// Clear streaming indicator for the tab
-				const tabId = chatToTab.get(data.chat_id);
-				if (tabId) {
-					streamingChatTabs.update((s) => {
-						const next = new Set(s);
-						next.delete(tabId);
-						return next;
-					});
-				}
-
-				// ── Notifications ──────────────────────────────────
-				// Skip if user is actively viewing this chat
-				const currentTab = get(activeTab);
-				const isViewingThisChat =
-					!document.hidden &&
-					currentTab?.type === 'chat' &&
-					currentTab?.path === data.chat_id;
-
-				if (isViewingThisChat) return;
-
-				const wsLabel = data.workspace ? `[${data.workspace}] ` : '';
-				const title = `${wsLabel}${data.title || 'Chat'}`;
-				const body = data.content || '';
-
-				// In-app toast
-				import('$lib/components/NotificationToast.svelte').then((mod) => {
-					const chatId = data.chat_id;
-					const toastId = toast.custom(mod.default, {
-						componentProps: {
-							title,
-							content: body,
-							onClick: async () => {
-								const { goto } = await import('$app/navigation');
-								const wsParam = data.workspace ? `workspace=${encodeURIComponent(data.workspace)}&` : '';
-								await goto(`/?${wsParam}chatId=${encodeURIComponent(chatId)}`);
-								toast.dismiss(toastId);
-							},
-							onclose: () => {
-								toast.dismiss(toastId);
-							}
+			// ── Notifications ──────────────────────────────────
+			// Skip if user is actively viewing this chat
+			const currentTab = get(activeTab);
+			const isViewingThisChat =
+				!document.hidden && currentTab?.type === 'chat' && currentTab?.path === data.chat_id;
+
+			if (isViewingThisChat) return;
+
+			const wsLabel = data.workspace ? `[${data.workspace}] ` : '';
+			const title = `${wsLabel}${data.title || 'Chat'}`;
+			const body = data.content || '';
+
+			// In-app toast
+			import('$lib/components/NotificationToast.svelte').then((mod) => {
+				const chatId = data.chat_id;
+				const toastId = toast.custom(mod.default, {
+					componentProps: {
+						title,
+						content: body,
+						onClick: async () => {
+							const { goto } = await import('$app/navigation');
+							const wsParam = data.workspace
+								? `workspace=${encodeURIComponent(data.workspace)}&`
+								: '';
+							await goto(`/?${wsParam}chatId=${encodeURIComponent(chatId)}`);
+							toast.dismiss(toastId);
 						},
-						duration: 10000,
-						unstyled: true
-					});
+						onclose: () => {
+							toast.dismiss(toastId);
+						}
+					},
+					duration: 10000,
+					unstyled: true
 				});
-
-				// Browser notification (only when tab is hidden)
-				if (document.hidden && get(notificationsEnabled)) {
-					try {
-						new Notification(`${title} • cptr`, {
-							body: body.slice(0, 200),
-							icon: '/favicon.png'
-						});
-					} catch {}
-				}
+			});
+
+			// Browser notification (only when tab is hidden)
+			if (document.hidden && get(notificationsEnabled)) {
+				try {
+					new Notification(`${title} • cptr`, {
+						body: body.slice(0, 200),
+						icon: '/favicon.png'
+					});
+				} catch {}
 			}
-		);
+		}
+	);
 
-		globalListenerBound = true;
-	};
-	tryBind();
+	globalListenerBound = true;
 }
 
 export interface ChatModel {
diff --git a/cptr/frontend/src/lib/stores/socket.svelte.ts b/cptr/frontend/src/lib/stores/socket.svelte.ts
index 9d8b5302..f6891fa3 100644
--- a/cptr/frontend/src/lib/stores/socket.svelte.ts
+++ b/cptr/frontend/src/lib/stores/socket.svelte.ts
@@ -9,13 +9,24 @@ import { io, type Socket } from 'socket.io-client';
 
 let socket: Socket | null = null;
 let _connected = $state(false);
+type SocketHandler = (...args: any[]) => void;
+const registeredListeners = new Map<string, Set<SocketHandler>>();
+
+function bindRegisteredListeners(currentSocket: Socket) {
+	for (const [event, handlers] of registeredListeners) {
+		for (const handler of handlers) {
+			currentSocket.on(event, handler);
+		}
+	}
+}
 
 function connect() {
 	if (socket) return;
 	socket = io({
 		reconnection: true,
 		reconnectionDelay: 1000,
-		withCredentials: true
+		withCredentials: true,
+		transports: ['websocket', 'polling']
 	});
 
 	socket.on('connect', () => {
@@ -25,6 +36,8 @@ function connect() {
 	socket.on('disconnect', () => {
 		_connected = false;
 	});
+
+	bindRegisteredListeners(socket);
 }
 
 function disconnect() {
@@ -39,10 +52,35 @@ function getSocket(): Socket | null {
 	return socket;
 }
 
+function on(event: string, handler: SocketHandler): () => void {
+	let handlers = registeredListeners.get(event);
+	if (!handlers) {
+		handlers = new Set();
+		registeredListeners.set(event, handlers);
+	}
+	const wasRegistered = handlers.has(handler);
+	handlers.add(handler);
+	if (socket && !wasRegistered) {
+		socket.on(event, handler);
+	}
+	return () => off(event, handler);
+}
+
+function off(event: string, handler: SocketHandler) {
+	const handlers = registeredListeners.get(event);
+	handlers?.delete(handler);
+	if (handlers?.size === 0) {
+		registeredListeners.delete(event);
+	}
+	socket?.off(event, handler);
+}
+
 export const socketStore = {
 	connect,
 	disconnect,
 	getSocket,
+	on,
+	off,
 	get connected() {
 		return _connected;
 	}
diff --git a/cptr/frontend/src/routes/+layout.svelte b/cptr/frontend/src/routes/+layout.svelte
index 47a87ab7..64071ce3 100644
--- a/cptr/frontend/src/routes/+layout.svelte
+++ b/cptr/frontend/src/routes/+layout.svelte
@@ -51,6 +51,8 @@
 	let showSetup = $state(false);
 	let connectionToast: string | number | undefined;
 	let applyingServiceWorkerUpdate = false;
+	let lastGitRefreshFsTick = 0;
+	let gitRefreshTimer: ReturnType<typeof setTimeout> | null = null;
 	const BROWSER_SW_CLEANUP_RELOAD = 'cptr:pwa:browser-sw-cleanup-reload';
 
 	// Auth state
@@ -269,7 +271,9 @@
 	async function clearCptrCaches() {
 		if (!('caches' in window)) return;
 		const keys = await caches.keys();
-		await Promise.all(keys.filter((key) => key.startsWith('cptr-')).map((key) => caches.delete(key)));
+		await Promise.all(
+			keys.filter((key) => key.startsWith('cptr-')).map((key) => caches.delete(key))
+		);
 	}
 
 	function isCptrWorker(registration: ServiceWorkerRegistration) {
@@ -375,11 +379,17 @@
 
 	// Keep git decorations fresh after filesystem changes.
 	$effect(() => {
-		const _tick = systemEvents.fsTick;
+		const tick = systemEvents.fsTick;
 		const ws = $currentWorkspace;
-		if (_tick > 0 && ws && gitStatusStore.isRepo && systemEvents.isRelevantFsChange(ws.path)) {
+		if (tick === 0 || tick === lastGitRefreshFsTick || !ws) return;
+		lastGitRefreshFsTick = tick;
+		if (!systemEvents.isRelevantFsChange(ws.path)) return;
+
+		if (gitRefreshTimer) clearTimeout(gitRefreshTimer);
+		gitRefreshTimer = setTimeout(() => {
+			gitRefreshTimer = null;
 			gitStatusStore.refresh({ force: true });
-		}
+		}, 250);
 	});
 
 	// Sync isGitRepo flag from centralized store
@@ -395,13 +405,15 @@
 		href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=JetBrains+Mono:wght@400;500&display=swap"
 		rel="stylesheet"
 	/>
-	<title>{$activeTab && $activeTab.type !== 'files'
-		? $currentWorkspace
-			? `${$activeTab.label} / ${$currentWorkspace.name} / cptr`
-			: `${$activeTab.label} / cptr`
-		: $currentWorkspace
-			? `${$currentWorkspace.name} / cptr`
-			: 'cptr'}</title>
+	<title
+		>{$activeTab && $activeTab.type !== 'files'
+			? $currentWorkspace
+				? `${$activeTab.label} / ${$currentWorkspace.name} / cptr`
+				: `${$activeTab.label} / cptr`
+			: $currentWorkspace
+				? `${$currentWorkspace.name} / cptr`
+				: 'cptr'}</title
+	>
 	<meta name="description" content={$t('app.tagline')} />
 </svelte:head>
 
@@ -422,7 +434,11 @@
 		onauth={handleAuth}
 	/>
 {:else if $stateLoaded && showSetup}
-	<SetupWizard oncomplete={() => { showSetup = false; }} />
+	<SetupWizard
+		oncomplete={() => {
+			showSetup = false;
+		}}
+	/>
 {:else if $stateLoaded}
 	<div
 		class="h-screen max-h-[100dvh] flex overflow-hidden font-sans antialiased text-gray-900 bg-white dark:text-gray-100 dark:bg-black"
@@ -478,7 +494,6 @@
 	closeButton
 	richColors
 	toastOptions={{
-		style:
-			'font-size: 12px; font-family: var(--font-sans); border-radius: 8px;'
+		style: 'font-size: 12px; font-family: var(--font-sans); border-radius: 8px;'
 	}}
 />

From e160df2918d587b7344d3e521ea442d2b0a2648f Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 18 Jun 2026 17:43:14 +0200
Subject: [PATCH 2/3] refac

---
 cptr/frontend/src/lib/stores/socket.svelte.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/cptr/frontend/src/lib/stores/socket.svelte.ts b/cptr/frontend/src/lib/stores/socket.svelte.ts
index f6891fa3..646385ec 100644
--- a/cptr/frontend/src/lib/stores/socket.svelte.ts
+++ b/cptr/frontend/src/lib/stores/socket.svelte.ts
@@ -26,7 +26,8 @@ function connect() {
 		reconnection: true,
 		reconnectionDelay: 1000,
 		withCredentials: true,
-		transports: ['websocket', 'polling']
+		transports: ['websocket', 'polling'],
+		tryAllTransports: true
 	});
 
 	socket.on('connect', () => {

From eff2fe7bbfcaf179d720e9592e501cfaff84bb60 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 18 Jun 2026 17:45:50 +0200
Subject: [PATCH 3/3] refac

---
 CHANGELOG.md   | 11 +++++++++++
 pyproject.toml |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index be2bca13..fc87a5ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.5] - 2026-06-18
+
+### Fixed
+
+- 🔌 **Socket events no longer missed on slow connections.** Components that listen for real-time updates (sidebar chat list, chat panel, notifications) previously relied on polling to check if the socket was ready. If the socket connected slowly or reconnected, events could be silently dropped. Listeners are now registered centrally and automatically re-attached whenever the connection comes back.
+- 🔄 **WebSocket connection is more resilient.** The socket now prefers a direct WebSocket connection and falls back to polling only when needed, reducing latency and improving reliability on unstable networks.
+
+### Changed
+
+- 📂 **Git status refreshes are debounced.** Rapid filesystem changes (like saving multiple files at once) no longer trigger a flood of git status checks. Updates are batched with a short delay so the UI stays responsive.
+
 ## [0.5.4] - 2026-06-18
 
 ### Added
diff --git a/pyproject.toml b/pyproject.toml
index 378f8934..2d4a250c 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "cptr"
-version = "0.5.4"
+version = "0.5.5"
 description = "Your computer, from anywhere. Code, manage, and control your machine from the web."
 license = {file = "LICENSE"}
 readme = "README.md"