Remove overly verbose comments

packages/web_ui/src/components/App.tsx

@@ -34,10 +34,8 @@ function PluginsChangedCard() {
 		<Card>
 			<h1>Reload required</h1>
 			<Paragraph>
-				The plugins the controller is running have changed since this page was opened. Plugin code,
-				messages and config fields are loaded once when the page starts and cannot be swapped out
-				while it runs, so this page has been stopped to keep it from acting on plugins that are no
-				longer there.
+				The plugins the controller is running have changed since this page was opened.
+				So the page has been closed and must be reloaded to continue functioning as expected.
 			</Paragraph>
 			<Button type="primary" onClick={() => window.location.reload()}>Reload</Button>
 		</Card>
@@ -91,9 +89,8 @@ export default function App(props: AppProps) {
 		};
 	}, [token, props.control]);
 
-	// The controller reports the plugins it is running in the handshake it
-	// sends on every connection, so restarting it to install, enable or
-	// disable a plugin, or into recovery mode, is caught on reconnect.
+	// The controller reports the plugins it is running in the handshake
+	// This is used to detect when plugins change and a restart is required
 	useEffect(() => {
 		function onHello(data: any) {
 			if (pluginSetKey(data.plugins) !== props.control.pluginSetKey) {

packages/web_ui/src/components/PluginsPage.tsx

@@ -88,11 +88,6 @@ export default function PluginsPage() {
 						if (!plugin.meta.enabled) {
 							return <><InfoCircleFilled style={{ color: "#1668dc" }} /> Disabled on controller</>;
 						}
-						// Plugins are loaded once when the page starts, so one the
-						// controller has picked up since then was never attempted
-						// rather than attempted and failed. A plugin the controller
-						// cannot serve at all is excluded before it gets that far,
-						// and is a real error.
 						if (!plugin.meta.web.error && !control.pluginInfos.has(plugin.meta.name)) {
 							return <><InfoCircleFilled style={{ color: "#1668dc" }} /> Reload page to load</>;
 						}
@@ -100,7 +95,7 @@ export default function PluginsPage() {
 							return <><CloseCircleFilled style={{ color: "#dc4446" }} /> Error loading module</>;
 						}
 						if (plugin.package.version !== plugin.meta.version) {
-							return "Version missmatched";
+							return <><CloseCircleFilled style={{ color: "#dc4446" }} /> Version mis-matched</>;
 						}
 						return plugin.package.version;
 					},

packages/web_ui/src/util/pluginSet.ts

@@ -1,7 +1,8 @@
 import type { PluginWebApi } from "@clusterio/lib";
 
 /**
- * Canonical key for a set of plugins loaded on the controller
+ * Canonical key for a set of plugins loaded on the controller.
+ * It is assumed that all plugins provided are currently loaded.
  *
  * @param plugins - name to version mapping of loaded plugins.
  * @returns value comparable with === against another key.
@@ -17,9 +18,6 @@ export function pluginSetKey(plugins: Record<string, string>) {
  * @returns value comparable with === against a key from the handshake.
  */
 export function loadedPluginSetKey(pluginList: PluginWebApi[]) {
-	// The handshake reports the plugins the controller is running, so
-	// compare against loaded rather than enabled, which also takes the
-	// config into account and only applies from the next restart.
 	return pluginSetKey(Object.fromEntries(
 		pluginList.filter(plugin => plugin.loaded).map(plugin => [plugin.name, plugin.version])
 	));