From 05c670eef9eb65e130f76b3d1e606f6e57396bab Mon Sep 17 00:00:00 2001
From: Reinier van der Leer <pwuts@agpt.co>
Date: Thu, 17 Apr 2025 16:11:09 +0200
Subject: [PATCH] fix(frontend/library): Prevent execution updates mixing
 between library agents (#9835)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

If the websocket doesn't disconnect when the user switches to viewing a
different agent, they aren't unsubscribed. If execution updates *from a
different agent* are adopted into the page state, that can cause
crashes.

### Changes 🏗️

- Filter incoming execution updates by `graph_id`

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [ ] I have tested my changes according to the test plan:
- Go to an agent and initiate a run that will take a while (long enough
to navigate to a different agent)
  - Navigate: Library -> [another agent]
- [ ] Runs from the first agent don't show up in the runs list of the
other agent
---
 .../frontend/src/app/library/agents/[id]/page.tsx             | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/autogpt_platform/frontend/src/app/library/agents/[id]/page.tsx b/autogpt_platform/frontend/src/app/library/agents/[id]/page.tsx
index a5da0f0158..f6df916a44 100644
--- a/autogpt_platform/frontend/src/app/library/agents/[id]/page.tsx
+++ b/autogpt_platform/frontend/src/app/library/agents/[id]/page.tsx
@@ -145,6 +145,8 @@ export default function AgentRunsPage(): React.ReactElement {
     const detachExecUpdateHandler = api.onWebSocketMessage(
       "graph_execution_event",
       (data) => {
+        if (data.graph_id != agent?.graph_id) return;
+
         setAgentRuns((prev) => {
           const index = prev.findIndex((run) => run.id === data.id);
           if (index === -1) {
@@ -163,7 +165,7 @@ export default function AgentRunsPage(): React.ReactElement {
     return () => {
       detachExecUpdateHandler();
     };
-  }, [api, selectedView.id]);
+  }, [api, agent?.graph_id, selectedView.id]);
 
   // load selectedRun based on selectedView
   useEffect(() => {