diff --git a/web/src/lib/utils/base-event-manager.svelte.ts b/web/src/lib/utils/base-event-manager.svelte.ts
index 511207698..8a17a3402 100644
--- a/web/src/lib/utils/base-event-manager.svelte.ts
+++ b/web/src/lib/utils/base-event-manager.svelte.ts
@@ -15,7 +15,8 @@ const nextId = () => count++;
 const noop = () => {};
 
 export class BaseEventManager<Events extends EventsBase> {
-  #callbacks: EventItem<Events>[] = $state.raw([]);
+  #callbacks: EventItem<Events>[] = [];
+  #changeCount = $state(0); // make hasListeners reactive while keeping #callbacks plain JS
 
   on(subscriptions: EventMap<Events>): () => void {
     const cleanups = Object.entries(subscriptions).map(([event, callback]) =>
@@ -36,13 +37,19 @@ export class BaseEventManager<Events extends EventsBase> {
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const item = { id: nextId(), event, callback } as EventItem<Events, any>;
-    this.#callbacks = [...this.#callbacks, item];
+    this.#callbacks.push(item);
+    this.markChanged();
 
     return () => {
       this.#callbacks = this.#callbacks.filter((current) => current.id !== item.id);
+      this.markChanged();
     };
   }
 
+  private markChanged() {
+    this.#changeCount++;
+  }
+
   emit<T extends keyof Events>(event: T, ...params: Events[T]) {
     const listeners = this.getListeners(event);
     for (const listener of listeners) {
@@ -51,6 +58,8 @@ export class BaseEventManager<Events extends EventsBase> {
   }
 
   hasListeners<T extends keyof Events>(event: T) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    this.#changeCount;
     return this.#callbacks.some((item) => item.event === event);
   }