green-screen-react 1.2.2 → 1.2.3

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/GreenScreenTerminal.tsx
-import { useState as useState5, useEffect as useEffect4, useRef as useRef4, useCallback as useCallback3, useMemo as useMemo2 } from "react";
+import { useState as useState5, useEffect as useEffect5, useRef as useRef4, useCallback as useCallback3, useMemo as useMemo2 } from "react";
 
 // src/adapters/RestAdapter.ts
 var RestAdapter = class {
@@ -80,6 +80,7 @@ var WebSocketAdapter = class _WebSocketAdapter {
     this.pendingScreenResolver = null;
     this.pendingConnectResolver = null;
     this.pendingMdtResolver = null;
+    this.disconnectAckResolver = null;
     this.connectingPromise = null;
     this.screenListeners = /* @__PURE__ */ new Set();
     this.statusListeners = /* @__PURE__ */ new Set();
@@ -214,7 +215,19 @@ var WebSocketAdapter = class _WebSocketAdapter {
     });
   }
   async disconnect() {
+    const acked = new Promise((resolve) => {
+      const timer = setTimeout(resolve, 3e3);
+      this.disconnectAckResolver = () => {
+        clearTimeout(timer);
+        resolve();
+      };
+    });
     this.wsSend({ type: "disconnect" });
+    try {
+      await acked;
+    } finally {
+      this.disconnectAckResolver = null;
+    }
     this.status = { connected: false, status: "disconnected" };
     this._sessionId = null;
     if (this.ws) {
@@ -270,6 +283,14 @@ var WebSocketAdapter = class _WebSocketAdapter {
         break;
       }
       case "cursor": {
+        if (this.screen) {
+          this.screen = {
+            ...this.screen,
+            cursor_row: msg.data.cursor_row,
+            cursor_col: msg.data.cursor_col
+          };
+          for (const listener of this.screenListeners) listener(this.screen);
+        }
         if (this.pendingScreenResolver) {
           const resolver = this.pendingScreenResolver;
           this.pendingScreenResolver = null;
@@ -310,6 +331,13 @@ var WebSocketAdapter = class _WebSocketAdapter {
           resolver({ success: true });
         }
         break;
+      case "disconnected":
+        if (this.disconnectAckResolver) {
+          const resolver = this.disconnectAckResolver;
+          this.disconnectAckResolver = null;
+          resolver();
+        }
+        break;
       case "error": {
         if (this.pendingConnectResolver) {
           const resolver = this.pendingConnectResolver;
@@ -981,8 +1009,27 @@ var KeyboardIcon = ({ size = 14 }) => /* @__PURE__ */ jsxs2("svg", { width: size
 var MinimizeIcon = () => /* @__PURE__ */ jsx2("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx2("path", { d: "M4 14h6v6M3 21l7-7M20 10h-6V4M21 3l-7 7" }) });
 
 // src/components/InlineSignIn.tsx
-import { useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var STORAGE_KEY = "green-screen:inline-signin";
+function loadStored() {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function saveStored(value) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
+  } catch {
+  }
+}
 var PROTOCOL_OPTIONS = [
   { value: "tn5250", label: "TN5250 (IBM i)" },
   { value: "tn3270", label: "TN3270 (Mainframe)" },
@@ -1002,12 +1049,22 @@ var TERMINAL_TYPE_OPTIONS = {
   ]
 };
 function InlineSignIn({ defaultProtocol, loading: externalLoading, error, onConnect }) {
-  const [host, setHost] = useState4("");
-  const [port, setPort] = useState4("");
-  const [selectedProtocol, setSelectedProtocol] = useState4(defaultProtocol);
-  const [terminalType, setTerminalType] = useState4("");
-  const [username, setUsername] = useState4("");
+  const stored = loadStored();
+  const [host, setHost] = useState4(stored.host ?? "");
+  const [port, setPort] = useState4(stored.port ?? "");
+  const [selectedProtocol, setSelectedProtocol] = useState4(stored.protocol ?? defaultProtocol);
+  const [terminalType, setTerminalType] = useState4(stored.terminalType ?? "");
+  const [username, setUsername] = useState4(stored.username ?? "");
   const [password, setPassword] = useState4("");
+  useEffect4(() => {
+    saveStored({
+      host,
+      port,
+      protocol: selectedProtocol,
+      terminalType,
+      username
+    });
+  }, [host, port, selectedProtocol, terminalType, username]);
   const termTypeOptions = TERMINAL_TYPE_OPTIONS[selectedProtocol];
   const [submitted, setSubmitted] = useState4(false);
   const loading = externalLoading || submitted;
@@ -1285,6 +1342,22 @@ function validateMod11(value) {
 
 // src/components/GreenScreenTerminal.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function isBlankContent(content) {
+  if (!content) return true;
+  for (let i = 0; i < content.length; i++) {
+    const ch = content.charCodeAt(i);
+    if (ch !== 32 && ch !== 9 && ch !== 10 && ch !== 13 && ch !== 0 && ch !== 160) {
+      return false;
+    }
+  }
+  return true;
+}
+function formatBusyClock(ms) {
+  const sec = Math.floor(ms / 1e3);
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
 function aidByteToKeyName(aid) {
   if (aid === 241) return "ENTER";
   if (aid === 243) return "HELP";
@@ -1359,7 +1432,33 @@ function GreenScreenTerminal({
   const { data: polledScreenData, error: screenError } = useTerminalScreen(adapter, pollInterval, shouldPoll);
   const { sendText: _sendText, sendKey: _sendKey } = useTerminalInput(adapter);
   const { connect, reconnect, loading: reconnecting, error: connectError } = useTerminalConnection(adapter);
-  const rawScreenData = externalScreenData ?? polledScreenData;
+  const incomingScreenData = externalScreenData ?? polledScreenData;
+  const lastContentfulRef = useRef4(null);
+  useEffect5(() => {
+    if (incomingScreenData && !isBlankContent(incomingScreenData.content)) {
+      lastContentfulRef.current = incomingScreenData;
+    }
+  }, [incomingScreenData]);
+  const isBlankLocked = !!(incomingScreenData && incomingScreenData.keyboard_locked && isBlankContent(incomingScreenData.content));
+  const rawScreenData = useMemo2(() => {
+    if (isBlankLocked && lastContentfulRef.current) {
+      return { ...lastContentfulRef.current, keyboard_locked: true };
+    }
+    return incomingScreenData;
+  }, [incomingScreenData, isBlankLocked]);
+  const BUSY_OVERLAY_DELAY_MS = 600;
+  const [lockElapsedMs, setLockElapsedMs] = useState5(0);
+  useEffect5(() => {
+    if (!isBlankLocked) {
+      setLockElapsedMs(0);
+      return;
+    }
+    const start = Date.now();
+    setLockElapsedMs(0);
+    const id = setInterval(() => setLockElapsedMs(Date.now() - start), 250);
+    return () => clearInterval(id);
+  }, [isBlankLocked]);
+  const showBusyOverlay = isBlankLocked && lockElapsedMs >= BUSY_OVERLAY_DELAY_MS;
   const connStatus = externalStatus ?? (rawScreenData ? { connected: true, status: "authenticated" } : { connected: false, status: "disconnected" });
   const { displayedContent, animatedCursorPos } = useTypingAnimation(
     rawScreenData?.content,
@@ -1371,7 +1470,7 @@ function GreenScreenTerminal({
     return { ...rawScreenData, content: displayedContent };
   }, [rawScreenData, displayedContent]);
   const prevScreenSigRef = useRef4(void 0);
-  useEffect4(() => {
+  useEffect5(() => {
     if (screenData && onScreenChange && screenData.screen_signature !== prevScreenSigRef.current) {
       prevScreenSigRef.current = screenData.screen_signature;
       onScreenChange(screenData);
@@ -1381,7 +1480,7 @@ function GreenScreenTerminal({
   const sendKey = useCallback3(async (key) => _sendKey(key), [_sendKey]);
   const [optimisticEdits, setOptimisticEdits] = useState5([]);
   const prevScreenContentForEdits = useRef4(void 0);
-  useEffect4(() => {
+  useEffect5(() => {
     const content = rawScreenData?.content;
     if (content && content !== prevScreenContentForEdits.current) {
       prevScreenContentForEdits.current = content;
@@ -1395,7 +1494,7 @@ function GreenScreenTerminal({
   const inputRef = useRef4(null);
   const [syncedCursor, setSyncedCursor] = useState5(null);
   const prevRawContentRef = useRef4("");
-  useEffect4(() => {
+  useEffect5(() => {
     const newContent = rawScreenData?.content || "";
     if (prevRawContentRef.current && newContent && newContent !== prevRawContentRef.current) {
       setSyncedCursor(null);
@@ -1408,10 +1507,10 @@ function GreenScreenTerminal({
   const reconnectTimeoutRef = useRef4(null);
   const wasConnectedRef = useRef4(false);
   const isConnectedRef = useRef4(false);
-  useEffect4(() => {
+  useEffect5(() => {
     isConnectedRef.current = connStatus?.connected ?? false;
   }, [connStatus?.connected]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!autoReconnectEnabled) return;
     const isConnected = connStatus?.connected;
     if (isConnected) {
@@ -1470,12 +1569,12 @@ function GreenScreenTerminal({
       setConnecting(false);
     }
   }, [connect, onSignIn, externalAdapter, baseUrlAdapter]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (connecting && screenData?.content) setConnecting(false);
   }, [connecting, screenData?.content]);
   const [showBootLoader, setShowBootLoader] = useState5(bootLoader !== false);
   const [bootFadingOut, setBootFadingOut] = useState5(false);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!showBootLoader) return;
     const shouldDismiss = bootLoaderReady !== void 0 ? bootLoaderReady : !!screenData?.content;
     if (shouldDismiss) {
@@ -1486,7 +1585,7 @@ function GreenScreenTerminal({
     }
   }, [screenData?.content, showBootLoader, bootLoaderReady]);
   const FOCUS_STORAGE_KEY = "gs-terminal-focused";
-  useEffect4(() => {
+  useEffect5(() => {
     if (!autoFocusDisabled && !readOnly) {
       try {
         if (localStorage.getItem(FOCUS_STORAGE_KEY) === "true") {
@@ -1496,32 +1595,32 @@ function GreenScreenTerminal({
       }
     }
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (autoFocusDisabled) return;
     try {
       localStorage.setItem(FOCUS_STORAGE_KEY, String(isFocused));
     } catch {
     }
   }, [isFocused, autoFocusDisabled]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isFocused) inputRef.current?.focus();
   }, [isFocused]);
   const hadScreenData = useRef4(false);
-  useEffect4(() => {
+  useEffect5(() => {
     if (screenData?.content && !hadScreenData.current && !autoFocusDisabled && !readOnly) {
       hadScreenData.current = true;
       setIsFocused(true);
     }
     if (!screenData?.content) hadScreenData.current = false;
   }, [screenData?.content, autoFocusDisabled, readOnly]);
-  useEffect4(() => {
+  useEffect5(() => {
     const handleClickOutside = (event) => {
       if (terminalRef.current && !terminalRef.current.contains(event.target)) setIsFocused(false);
     };
     if (isFocused) document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isFocused]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (readOnly && isFocused) {
       setIsFocused(false);
       inputRef.current?.blur();
@@ -1907,7 +2006,7 @@ function GreenScreenTerminal({
     const cursor = getCursorPos();
     const hasCursor = screenData.cursor_row !== void 0 && screenData.cursor_col !== void 0;
     const cursorInInputField = hasCursor && fields.some(
-      (f) => f.is_input && !f.is_non_display && f.row === cursor.row && cursor.col >= f.col && cursor.col < f.col + f.length
+      (f) => f.is_input && f.row === cursor.row && cursor.col >= f.col && cursor.col < f.col + f.length
     );
     return /* @__PURE__ */ jsxs4("div", { style: { fontFamily: "var(--gs-font)", fontSize: "13px", position: "relative", width: `${cols}ch` }, children: [
       rows.map((line, index) => {
@@ -2117,6 +2216,14 @@ function GreenScreenTerminal({
             /* @__PURE__ */ jsx4("span", { children: isAutoReconnecting || reconnecting ? "Reconnecting..." : connStatus?.status === "connecting" ? "Connecting..." : "Disconnected" }),
             connStatus.error && !isAutoReconnecting && !reconnecting && /* @__PURE__ */ jsx4("span", { style: { fontSize: "0.75em", opacity: 0.7, maxWidth: "80%", textAlign: "center", wordBreak: "break-word" }, children: connStatus.error })
           ] }),
+          showBusyOverlay && connStatus?.connected && /* @__PURE__ */ jsxs4("div", { className: "gs-busy-overlay", role: "status", "aria-live": "polite", children: [
+            /* @__PURE__ */ jsx4(RefreshIcon, { size: 22, className: "gs-spin" }),
+            /* @__PURE__ */ jsxs4("span", { className: "gs-busy-clock", children: [
+              "X CLOCK\xA0\xA0",
+              formatBusyClock(lockElapsedMs)
+            ] }),
+            /* @__PURE__ */ jsx4("span", { className: "gs-busy-hint", children: "Waiting for host\u2026" })
+          ] }),
           /* @__PURE__ */ jsx4(
             "input",
             {