Fix events from old connections showing in new connections

Events from previous WebSocket/gRPC connections and HTTP responses were
persisting in the store and displaying in new connections. Added filter
parameter to mergeModelsInStore that clears old events when switching
connections, plus render-time filtering as a safety net.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src-web/hooks/useHttpResponseEvents.ts

@@ -6,7 +6,7 @@ import {
   replaceModelsInStore,
 } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 
 export function useHttpResponseEvents(response: HttpResponse | null) {
   const allEvents = useAtomValue(httpResponseEventsAtom);
@@ -17,18 +17,13 @@ export function useHttpResponseEvents(response: HttpResponse | null) {
       return;
     }
 
-    // Use merge instead of replace to preserve events that came in via model_write
-    // while we were fetching from the database
+    // Fetch events from database, filtering out events from other responses and merging atomically
     invoke<HttpResponseEvent[]>('cmd_get_http_response_events', { responseId: response.id }).then(
-      (events) => mergeModelsInStore('http_response_event', events),
+      (events) =>
+        mergeModelsInStore('http_response_event', events, (e) => e.responseId === response.id),
     );
   }, [response?.id]);
 
-  // Filter events for the current response
-  const events = useMemo(
-    () => allEvents.filter((e) => e.responseId === response?.id),
-    [allEvents, response?.id],
-  );
-
+  const events = allEvents.filter((e) => e.responseId === response?.id);
   return { data: events, error: null, isLoading: false };
 }

src-web/hooks/usePinnedGrpcConnection.ts

@@ -7,7 +7,7 @@ import {
   replaceModelsInStore,
 } from '@yaakapp-internal/models';
 import { atom, useAtomValue } from 'jotai';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { atomWithKVStorage } from '../lib/atoms/atomWithKVStorage';
 import { activeRequestIdAtom } from './useActiveRequestId';
 
@@ -60,7 +60,7 @@ export const activeGrpcConnectionAtom = atom<GrpcConnection | null>((get) => {
 });
 
 export function useGrpcEvents(connectionId: string | null) {
-  const events = useAtomValue(grpcEventsAtom);
+  const allEvents = useAtomValue(grpcEventsAtom);
 
   useEffect(() => {
     if (connectionId == null) {
@@ -68,12 +68,14 @@ export function useGrpcEvents(connectionId: string | null) {
       return;
     }
 
-    // Use merge instead of replace to preserve events that came in via model_write
-    // while we were fetching from the database
-    invoke<GrpcEvent[]>('models_grpc_events', { connectionId }).then((events) => {
-      mergeModelsInStore('grpc_event', events);
-    });
+    // Fetch events from database, filtering out events from other connections and merging atomically
+    invoke<GrpcEvent[]>('models_grpc_events', { connectionId }).then((events) =>
+      mergeModelsInStore('grpc_event', events, (e) => e.connectionId === connectionId),
+    );
   }, [connectionId]);
 
-  return events;
+  return useMemo(
+    () => allEvents.filter((e) => e.connectionId === connectionId),
+    [allEvents, connectionId],
+  );
 }

src-web/hooks/usePinnedWebsocketConnection.ts

@@ -7,7 +7,7 @@ import {
   websocketEventsAtom,
 } from '@yaakapp-internal/models';
 import { atom, useAtomValue } from 'jotai';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { atomWithKVStorage } from '../lib/atoms/atomWithKVStorage';
 import { jotaiStore } from '../lib/jotai';
 import { activeRequestIdAtom } from './useActiveRequestId';
@@ -47,7 +47,7 @@ export function setPinnedWebsocketConnectionId(id: string | null) {
 }
 
 export function useWebsocketEvents(connectionId: string | null) {
-  const events = useAtomValue(websocketEventsAtom);
+  const allEvents = useAtomValue(websocketEventsAtom);
 
   useEffect(() => {
     if (connectionId == null) {
@@ -55,12 +55,14 @@ export function useWebsocketEvents(connectionId: string | null) {
       return;
     }
 
-    // Use merge instead of replace to preserve events that came in via model_write
-    // while we were fetching from the database
-    invoke<WebsocketEvent[]>('models_websocket_events', { connectionId }).then(
-      (events) => mergeModelsInStore('websocket_event', events),
+    // Fetch events from database, filtering out events from other connections and merging atomically
+    invoke<WebsocketEvent[]>('models_websocket_events', { connectionId }).then((events) =>
+      mergeModelsInStore('websocket_event', events, (e) => e.connectionId === connectionId),
     );
   }, [connectionId]);
 
-  return events;
+  return useMemo(
+    () => allEvents.filter((e) => e.connectionId === connectionId),
+    [allEvents, connectionId],
+  );
 }