bug fixes, and performance improvements, and drawer

app/composables/useUserEvents.ts

@@ -1,11 +1,14 @@
 export const useUserEvents = () => {
     const eventSource = ref<EventSource | null>(null);
+    const agents = useState<AgentWithTopics[]>("agents_state", () => []);
     const isConnected = useState('userEvents:connected', () => false);
     const lastEventTimestamp = useState<number>('userEvents:lastTimestamp', () => 0);
 
     const reconnectAttempts = ref(0);
     const connectionStartTime = ref<number>(0);
     const pendingReconnect = ref<NodeJS.Timeout | null>(null);
+    let reconciliationTimer: ReturnType<typeof setInterval> | undefined;
+    let reconciling = false;
 
     const BASE_DELAY = 1000;
     const MAX_DELAY = 30000;
@@ -50,7 +53,6 @@ export const useUserEvents = () => {
         cleanup();
 
         connectionStartTime.value = Date.now();
-        reconnectAttempts.value = 0;
 
         const source = new EventSource('/api/events');
         eventSource.value = source;
@@ -59,6 +61,7 @@ export const useUserEvents = () => {
             console.log('User events connected');
             isConnected.value = true;
             reconnectAttempts.value = 0;
+            void reconcile();
         };
 
         source.onerror = () => {
@@ -164,20 +167,48 @@ export const useUserEvents = () => {
     };
 
     const reconcile = async () => {
-        console.log('Reconciling user state...');
-        const { data } = await useFetch<AgentWithTopics[]>('/api/agents');
-        if (data.value) {
-            const { agents } = await useAgents();
-            agents.value = data.value;
+        if (reconciling) {
+            return;
+        }
+        reconciling = true;
+        try {
+            agents.value = await $fetch<AgentWithTopics[]>("/api/agents");
+        } catch (error) {
+            console.error("Failed to reconcile topics:", error);
+        } finally {
+            reconciling = false;
         }
     };
 
+    const resume = () => {
+        if (document.visibilityState !== "visible") {
+            return;
+        }
+        if (!isConnected.value) {
+            reconnectAttempts.value = 0;
+            void connect();
+        }
+        void reconcile();
+    };
+
     onMounted(() => {
-        connect();
+        void connect();
+        document.addEventListener("visibilitychange", resume);
+        window.addEventListener("online", resume);
+        window.addEventListener("pageshow", resume);
+        reconciliationTimer = setInterval(() => {
+            if (document.visibilityState === "visible" && agents.value.some(agent => agent.topics.some(topic => topic.renaming))) {
+                void reconcile();
+            }
+        }, 15000);
     });
 
     onBeforeUnmount(() => {
         cleanup();
+        clearInterval(reconciliationTimer);
+        document.removeEventListener("visibilitychange", resume);
+        window.removeEventListener("online", resume);
+        window.removeEventListener("pageshow", resume);
     });
 
     return {