Canvas: Add Reload button on Monitoring page

Change-Id: I593d9068870bcd5f0d43680af4a08d814a18a2a9
diff --git a/apps/canvas/front/src/lib/state.ts b/apps/canvas/front/src/lib/state.ts
index df658af..c86199f 100644
--- a/apps/canvas/front/src/lib/state.ts
+++ b/apps/canvas/front/src/lib/state.ts
@@ -476,6 +476,8 @@
 	height: number;
 };
 
+let refreshEnvIntervalId: number | null = null;
+
 export type AppState = {
 	projectId: string | undefined;
 	mode: "edit" | "deploy";
@@ -577,6 +579,54 @@
 		});
 	};
 
+	const startRefreshEnvInterval = () => {
+		if (refreshEnvIntervalId) {
+			clearInterval(refreshEnvIntervalId);
+		}
+		if (get().projectId && typeof document !== "undefined" && document.visibilityState === "visible") {
+			console.log("Starting refreshEnv interval for project:", get().projectId);
+			refreshEnvIntervalId = setInterval(async () => {
+				if (get().projectId && typeof document !== "undefined" && document.visibilityState === "visible") {
+					console.log("Interval: Calling refreshEnv for project:", get().projectId);
+					await get().refreshEnv();
+				} else if (refreshEnvIntervalId) {
+					console.log(
+						"Interval: Conditions not met (project removed or tab hidden), stopping interval from inside.",
+					);
+					clearInterval(refreshEnvIntervalId);
+					refreshEnvIntervalId = null;
+				}
+			}, 5000) as unknown as number;
+		} else {
+			console.log(
+				"Not starting refreshEnv interval. Project ID:",
+				get().projectId,
+				"Visibility:",
+				typeof document !== "undefined" ? document.visibilityState : "SSR",
+			);
+		}
+	};
+
+	const stopRefreshEnvInterval = () => {
+		if (refreshEnvIntervalId) {
+			console.log("Stopping refreshEnv interval for project:", get().projectId);
+			clearInterval(refreshEnvIntervalId);
+			refreshEnvIntervalId = null;
+		}
+	};
+
+	if (typeof document !== "undefined") {
+		document.addEventListener("visibilitychange", () => {
+			if (document.visibilityState === "visible") {
+				console.log("Tab became visible, attempting to start refreshEnv interval.");
+				startRefreshEnvInterval();
+			} else {
+				console.log("Tab became hidden, stopping refreshEnv interval.");
+				stopRefreshEnvInterval();
+			}
+		});
+	}
+
 	const injectNetworkNodes = () => {
 		const newNetworks = get().env.networks.filter(
 			(x) => !get().nodes.some((n) => n.type === "network" && n.data.domain === x.domain),
@@ -896,7 +946,6 @@
 		refreshEnv: async () => {
 			const projectId = get().projectId;
 			let env: Env = defaultEnv;
-
 			try {
 				if (projectId) {
 					const response = await fetch(`/api/project/${projectId}/env`);
@@ -916,7 +965,6 @@
 				if (JSON.stringify(get().env) !== JSON.stringify(env)) {
 					set({ env });
 					injectNetworkNodes();
-
 					if (env.integrations.github) {
 						set({ githubService: new GitHubServiceImpl(projectId!) });
 					} else {
@@ -929,9 +977,11 @@
 			set({ mode });
 		},
 		setProject: async (projectId) => {
-			if (projectId === get().projectId) {
+			const currentProjectId = get().projectId;
+			if (projectId === currentProjectId) {
 				return;
 			}
+			stopRefreshEnvInterval();
 			set({
 				projectId,
 			});
@@ -943,10 +993,13 @@
 					set({ mode: "edit" });
 				}
 				restoreSaved();
+				startRefreshEnvInterval();
 			} else {
 				set({
 					nodes: [],
 					edges: [],
+					env: defaultEnv,
+					githubService: null,
 				});
 			}
 		},