chore: move AgentMetadata to OWWS

Parkreiner · Parkreiner · commit b1d572f86395 · 2025-02-24T22:03:02.000Z
diff --git a/site/src/modules/resources/AgentMetadata.tsx b/site/src/modules/resources/AgentMetadata.tsx
@@ -17,6 +17,7 @@ import {
 	useState,
 } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+import type { OneWayWebSocket } from "utils/OneWayWebSocket";
 
 type ItemStatus = "stale" | "valid" | "loading";
 
@@ -48,41 +49,47 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({
 }) => {
 	const [metadata, setMetadata] = useState<
 		WorkspaceAgentMetadata[] | undefined
-	>(undefined);
+	>(storybookMetadata);
 
 	useEffect(() => {
+		// Even though we're using storybookMetadata as the initial value of the
+		// `metadata` state, we can't sync on `metadata` itself. If we did, the
+		// moment we update the state with a new event, we would re-trigger the
+		// effect and immediately destroy the connection
 		if (storybookMetadata !== undefined) {
-			setMetadata(storybookMetadata);
 			return;
 		}
 
-		let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
+		let timeoutId: number | undefined = undefined;
+		let latestSocket: OneWayWebSocket | undefined = undefined;
 
-		const connect = (): (() => void) => {
-			const source = watchAgentMetadata(agent.id);
+		const createNewConnection = () => {
+			const socket = watchAgentMetadata(agent.id);
+			latestSocket = socket;
 
-			source.onerror = (e) => {
+			socket.addEventListener("error", (e) => {
 				console.error("received error in watch stream", e);
 				setMetadata(undefined);
-				source.close();
+				socket.close();
 
-				timeout = setTimeout(() => {
-					connect();
-				}, 3000);
-			};
+				timeoutId = window.setTimeout(() => {
+					createNewConnection();
+				}, 3_000);
+			});
 
-			source.addEventListener("data", (e) => {
-				const data = JSON.parse(e.data);
-				setMetadata(data);
+			socket.addEventListener("message", (e) => {
+				try {
+					const data = JSON.parse(e.data);
+					setMetadata(data);
+				} catch (err) {}
 			});
-			return () => {
-				if (timeout !== undefined) {
-					clearTimeout(timeout);
-				}
-				source.close();
-			};
 		};
-		return connect();
+
+		createNewConnection();
+		return () => {
+			window.clearTimeout(timeoutId);
+			latestSocket?.close();
+		};
 	}, [agent.id, storybookMetadata]);
 
 	if (metadata === undefined) {
