fix(site): only attempt to watch containers when agent connected (#18873)

This PR ensures we do not attempt to call `containers/watch` on the
agent _before_ it is connected.

site/src/modules/resources/useAgentContainers.test.tsx

@@ -193,4 +193,22 @@ describe("useAgentContainers", () => {
 		displayErrorSpy.mockRestore();
 		watchAgentContainersSpy.mockRestore();
 	});
+
+	it("does not establish WebSocket connection when agent is not connected", () => {
+		const watchAgentContainersSpy = jest.spyOn(API, "watchAgentContainers");
+
+		const disconnectedAgent = {
+			...MockWorkspaceAgent,
+			status: "disconnected" as const,
+		};
+
+		const { result } = renderHook(() => useAgentContainers(disconnectedAgent), {
+			wrapper: createWrapper(),
+		});
+
+		expect(watchAgentContainersSpy).not.toHaveBeenCalled();
+		expect(result.current).toBeUndefined();
+
+		watchAgentContainersSpy.mockRestore();
+	});
 });

site/src/modules/resources/useAgentContainers.ts

@@ -31,6 +31,10 @@ export function useAgentContainers(
 	);
 
 	useEffect(() => {
+		if (agent.status !== "connected") {
+			return;
+		}
+
 		const socket = watchAgentContainers(agent.id);
 
 		socket.addEventListener("message", (event) => {
@@ -53,7 +57,7 @@ export function useAgentContainers(
 		});
 
 		return () => socket.close();
-	}, [agent.id, updateDevcontainersCache]);
+	}, [agent.id, agent.status, updateDevcontainersCache]);
 
 	return devcontainers;
 }