@imperosoft/cris-webui-components 1.4.0 → 1.5.0

package/dist/index.js

@@ -1134,6 +1134,7 @@ function CrisOfflinePage({
   });
   const processorHost = processorHostProp ?? (typeof window !== "undefined" ? window.location.hostname : "localhost");
   const isError = connectionStatus === "error" || hasSeenError && connectionStatus !== "connected";
+  const isWsTransport = (0, import_cris_webui_ch5_core6.getActiveTransport)() === "ws";
   (0, import_react3.useEffect)(() => {
     if (connectionStatus === "error") {
       setHasSeenError(true);
@@ -1182,6 +1183,7 @@ function CrisOfflinePage({
     return () => clearTimeout(timer);
   }, [retryCountdown, retryConnection]);
   (0, import_react3.useEffect)(() => {
+    if (isWsTransport) return;
     if (isError && isDeployedOnProcessor && loginRedirectDelay > 0 && !returnedFromLogin) {
       const timer = setTimeout(() => {
         try {
@@ -1192,7 +1194,7 @@ function CrisOfflinePage({
       }, loginRedirectDelay);
       return () => clearTimeout(timer);
     }
-  }, [isError, isDeployedOnProcessor, loginUrl, loginRedirectDelay, returnedFromLogin]);
+  }, [isError, isDeployedOnProcessor, loginUrl, loginRedirectDelay, returnedFromLogin, isWsTransport]);
   const envInfo = {
     userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "N/A",
     hasCrComLib: typeof window !== "undefined" && typeof window.CrComLib !== "undefined",
@@ -1213,9 +1215,9 @@ function CrisOfflinePage({
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `cris-offline-page absolute inset-0 bg-gray-900 flex flex-col items-center justify-center overflow-auto py-8 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-center max-w-4xl px-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mb-8", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `w-16 h-16 mx-auto rounded-full flex items-center justify-center ${isError ? "bg-red-500/20" : "bg-yellow-500/20"}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `w-8 h-8 rounded-full ${isError ? "bg-red-500" : "bg-yellow-500 animate-pulse"}` }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { className: "text-2xl font-bold text-white mb-2", children: isError ? isTimeoutError ? "Processor Unreachable" : "Connection Error" : "Connecting..." }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-400", children: isError ? isDeployedOnProcessor ? returnedFromLogin ? "Connection failed after login. Please try again." : "Redirecting to login page..." : isTimeoutError ? "Could not connect to the processor. Check the IP address and network connection." : "WebSocket connection failed. SSL certificate may need to be accepted." : "Establishing connection to control system" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `px-4 py-2 rounded-full text-sm font-medium ${isError ? "bg-red-500/20 text-red-400" : "bg-yellow-500/20 text-yellow-400"}`, children: isError ? isTimeoutError ? "Connection Timeout" : isDevMode ? "Dev Mode - Auth Error" : isVC4 ? "VC4 - Not Authorized" : "Auth Error" : "Connecting" }) }),
-    isError && !isDeployedOnProcessor && isTimeoutError && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-[2em] bg-orange-500/10 border border-orange-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-400", children: isError ? isWsTransport ? "Control system is not responding. Reconnecting automatically..." : isDeployedOnProcessor ? returnedFromLogin ? "Connection failed after login. Please try again." : "Redirecting to login page..." : isTimeoutError ? "Could not connect to the processor. Check the IP address and network connection." : "WebSocket connection failed. SSL certificate may need to be accepted." : "Establishing connection to control system" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `px-4 py-2 rounded-full text-sm font-medium ${isError ? "bg-red-500/20 text-red-400" : "bg-yellow-500/20 text-yellow-400"}`, children: isError ? isWsTransport ? "Reconnecting" : isTimeoutError ? "Connection Timeout" : isDevMode ? "Dev Mode - Auth Error" : isVC4 ? "VC4 - Not Authorized" : "Auth Error" : "Connecting" }) }),
+    isError && !isWsTransport && !isDeployedOnProcessor && isTimeoutError && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-[2em] bg-orange-500/10 border border-orange-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-orange-400 font-medium", style: { fontSize: "1.2em", marginBottom: "1em" }, children: [
         "The processor at ",
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-white", children: processorHost }),
@@ -1236,7 +1238,24 @@ function CrisOfflinePage({
         }
       ) })
     ] }),
-    isError && !isDeployedOnProcessor && !isTimeoutError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-[2em] bg-blue-500/10 border border-blue-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: retryCountdown !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-center", style: { overflow: "visible" }, children: [
+    isError && isWsTransport && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-[2em] bg-orange-500/10 border border-orange-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-orange-400 font-medium", style: { fontSize: "1.2em", marginBottom: "1em" }, children: [
+        "The control system at ",
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-white", children: processorHost }),
+        " is not responding."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-400", style: { fontSize: "1em", marginBottom: "1em" }, children: "It may be restarting (e.g. a program update). The connection retries automatically." }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex gap-[1em] justify-center", style: { overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          onClick: retryConnection,
+          className: "bg-orange-600 hover:bg-orange-500 text-white font-medium rounded-xl transition-colors",
+          style: { padding: "1em 2em", fontSize: "1.2em", whiteSpace: "nowrap", overflow: "visible" },
+          children: "Retry Now"
+        }
+      ) })
+    ] }),
+    isError && !isWsTransport && !isDeployedOnProcessor && !isTimeoutError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-[2em] bg-blue-500/10 border border-blue-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: retryCountdown !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-center", style: { overflow: "visible" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-blue-400 font-medium", style: { fontSize: "1.4em", marginBottom: "1em" }, children: [
         "Retrying connection in ",
         retryCountdown,
@@ -1275,7 +1294,7 @@ function CrisOfflinePage({
       ] }),
       certPageOpened && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-400", style: { fontSize: "1em", marginTop: "1em" }, children: "Connection will auto-retry when you return to this page." })
     ] }) }),
-    isError && isDeployedOnProcessor && returnedFromLogin && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-[2em] bg-red-500/10 border border-red-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: [
+    isError && !isWsTransport && isDeployedOnProcessor && returnedFromLogin && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-[2em] bg-red-500/10 border border-red-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-red-400 font-medium", style: { fontSize: "1.2em", marginBottom: "1em" }, children: "Connection failed after authentication." }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-400", style: { fontSize: "1em", marginBottom: "1em" }, children: "This may be due to an expired session or WebSocket connection issue." }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-[1em] justify-center flex-wrap", style: { overflow: "visible" }, children: [