green-screen-react 1.1.2 → 1.1.3

package/dist/index.d.mts

@@ -118,8 +118,14 @@ interface GreenScreenTerminalProps {
     autoFocusDisabled?: boolean;
     /** Custom boot loader element, or false to disable */
     bootLoader?: React.ReactNode | false;
+    /** When true, dismiss the boot loader. If provided, overrides the default
+     *  "dismiss when screen data arrives" behavior. Use to keep the boot loader
+     *  visible during sign-in, startup command execution, etc. */
+    bootLoaderReady?: boolean;
     /** Content for the right side of the header */
     headerRight?: React.ReactNode;
+    /** Content rendered after the connection status groups (WiFi+host, Key+username) */
+    statusActions?: React.ReactNode;
     /** Overlay content (e.g. "Extracting..." state) */
     overlay?: React.ReactNode;
     /** Callback for notifications (replaces toast) */
@@ -146,7 +152,7 @@ interface GreenScreenTerminalProps {
  *
  * Supports: TN5250 (IBM i), TN3270 (z/OS), VT (OpenVMS/Pick), HP 6530 (NonStop)
  */
-declare function GreenScreenTerminal({ adapter: externalAdapter, baseUrl, workerUrl, protocol, protocolProfile: customProfile, screenData: externalScreenData, connectionStatus: externalStatus, readOnly, pollInterval, autoReconnect: autoReconnectEnabled, maxReconnectAttempts: maxAttempts, embedded, showHeader, typingAnimation, typingBudgetMs, inlineSignIn, defaultProtocol: signInDefaultProtocol, onSignIn, autoSignedIn, autoFocusDisabled, bootLoader, headerRight, overlay, onNotification, onScreenChange, onMinimize, className, style, }: GreenScreenTerminalProps): react_jsx_runtime.JSX.Element;
+declare function GreenScreenTerminal({ adapter: externalAdapter, baseUrl, workerUrl, protocol, protocolProfile: customProfile, screenData: externalScreenData, connectionStatus: externalStatus, readOnly, pollInterval, autoReconnect: autoReconnectEnabled, maxReconnectAttempts: maxAttempts, embedded, showHeader, typingAnimation, typingBudgetMs, inlineSignIn, defaultProtocol: signInDefaultProtocol, onSignIn, autoSignedIn, autoFocusDisabled, bootLoader, bootLoaderReady, headerRight, statusActions, overlay, onNotification, onScreenChange, onMinimize, className, style, }: GreenScreenTerminalProps): react_jsx_runtime.JSX.Element;
 
 interface TerminalBootLoaderProps {
     /** Text to display during boot animation */

package/dist/index.d.ts

@@ -118,8 +118,14 @@ interface GreenScreenTerminalProps {
     autoFocusDisabled?: boolean;
     /** Custom boot loader element, or false to disable */
     bootLoader?: React.ReactNode | false;
+    /** When true, dismiss the boot loader. If provided, overrides the default
+     *  "dismiss when screen data arrives" behavior. Use to keep the boot loader
+     *  visible during sign-in, startup command execution, etc. */
+    bootLoaderReady?: boolean;
     /** Content for the right side of the header */
     headerRight?: React.ReactNode;
+    /** Content rendered after the connection status groups (WiFi+host, Key+username) */
+    statusActions?: React.ReactNode;
     /** Overlay content (e.g. "Extracting..." state) */
     overlay?: React.ReactNode;
     /** Callback for notifications (replaces toast) */
@@ -146,7 +152,7 @@ interface GreenScreenTerminalProps {
  *
  * Supports: TN5250 (IBM i), TN3270 (z/OS), VT (OpenVMS/Pick), HP 6530 (NonStop)
  */
-declare function GreenScreenTerminal({ adapter: externalAdapter, baseUrl, workerUrl, protocol, protocolProfile: customProfile, screenData: externalScreenData, connectionStatus: externalStatus, readOnly, pollInterval, autoReconnect: autoReconnectEnabled, maxReconnectAttempts: maxAttempts, embedded, showHeader, typingAnimation, typingBudgetMs, inlineSignIn, defaultProtocol: signInDefaultProtocol, onSignIn, autoSignedIn, autoFocusDisabled, bootLoader, headerRight, overlay, onNotification, onScreenChange, onMinimize, className, style, }: GreenScreenTerminalProps): react_jsx_runtime.JSX.Element;
+declare function GreenScreenTerminal({ adapter: externalAdapter, baseUrl, workerUrl, protocol, protocolProfile: customProfile, screenData: externalScreenData, connectionStatus: externalStatus, readOnly, pollInterval, autoReconnect: autoReconnectEnabled, maxReconnectAttempts: maxAttempts, embedded, showHeader, typingAnimation, typingBudgetMs, inlineSignIn, defaultProtocol: signInDefaultProtocol, onSignIn, autoSignedIn, autoFocusDisabled, bootLoader, bootLoaderReady, headerRight, statusActions, overlay, onNotification, onScreenChange, onMinimize, className, style, }: GreenScreenTerminalProps): react_jsx_runtime.JSX.Element;
 
 interface TerminalBootLoaderProps {
     /** Text to display during boot animation */

package/dist/index.js

@@ -1120,7 +1120,9 @@ function GreenScreenTerminal({
   autoSignedIn,
   autoFocusDisabled = false,
   bootLoader,
+  bootLoaderReady,
   headerRight,
+  statusActions,
   overlay,
   onNotification,
   onScreenChange,
@@ -1169,13 +1171,14 @@ function GreenScreenTerminal({
   const sendText = (0, import_react5.useCallback)(async (text) => _sendText(text), [_sendText]);
   const sendKey = (0, import_react5.useCallback)(async (key) => _sendKey(key), [_sendKey]);
   const [optimisticEdits, setOptimisticEdits] = (0, import_react5.useState)([]);
-  const prevScreenSigForEdits = (0, import_react5.useRef)(void 0);
+  const prevScreenContentForEdits = (0, import_react5.useRef)(void 0);
   (0, import_react5.useEffect)(() => {
-    if (rawScreenData?.screen_signature && rawScreenData.screen_signature !== prevScreenSigForEdits.current) {
-      prevScreenSigForEdits.current = rawScreenData.screen_signature;
+    const content = rawScreenData?.content;
+    if (content && content !== prevScreenContentForEdits.current) {
+      prevScreenContentForEdits.current = content;
       setOptimisticEdits([]);
     }
-  }, [rawScreenData?.screen_signature]);
+  }, [rawScreenData?.content]);
   const [inputText, setInputText] = (0, import_react5.useState)("");
   const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
   const [showSignInHint, setShowSignInHint] = (0, import_react5.useState)(false);
@@ -1273,13 +1276,15 @@ function GreenScreenTerminal({
   const [showBootLoader, setShowBootLoader] = (0, import_react5.useState)(bootLoader !== false);
   const [bootFadingOut, setBootFadingOut] = (0, import_react5.useState)(false);
   (0, import_react5.useEffect)(() => {
-    if (screenData?.content && showBootLoader) {
+    if (!showBootLoader) return;
+    const shouldDismiss = bootLoaderReady !== void 0 ? bootLoaderReady : !!screenData?.content;
+    if (shouldDismiss) {
       setBootFadingOut(true);
       setShowBootLoader(false);
       const timer = setTimeout(() => setBootFadingOut(false), 400);
       return () => clearTimeout(timer);
     }
-  }, [screenData?.content, showBootLoader]);
+  }, [screenData?.content, showBootLoader, bootLoaderReady]);
   const FOCUS_STORAGE_KEY = "gs-terminal-focused";
   (0, import_react5.useEffect)(() => {
     if (!autoFocusDisabled && !readOnly) {
@@ -1514,7 +1519,7 @@ function GreenScreenTerminal({
       }
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: `${screenData?.cols || profile.defaultCols}ch`, height: `${(screenData?.rows || profile.defaultRows) * 21}px`, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { textAlign: "center" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#808080", marginBottom: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TerminalIcon, { size: 40 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { fontFamily: "var(--gs-font)", fontSize: "12px", color: "#808080" }, children: connStatus?.connected ? "Waiting for screen data..." : "Not connected" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { fontFamily: "var(--gs-font)", fontSize: "12px", color: connStatus?.status === "connecting" ? "#f59e0b" : connStatus?.status === "loading" ? "#94a3b8" : "#808080" }, children: connStatus?.connected ? "Waiting for screen data..." : connStatus?.status === "connecting" ? "Connecting..." : connStatus?.status === "loading" ? "Loading..." : "Not connected" }),
         !connStatus?.connected && isUsingDefaultAdapter && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { style: { fontFamily: "var(--gs-font)", fontSize: "11px", color: "#606060", marginTop: "8px" }, children: [
           "Start the proxy: ",
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { color: "#10b981" }, children: "npx green-screen-proxy --mock" })
@@ -1535,7 +1540,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.row === cursor.row && cursor.col >= f.col && cursor.col < f.col + f.length
+      (f) => f.is_input && !f.is_non_display && f.row === cursor.row && cursor.col >= f.col && cursor.col < f.col + f.length
     );
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontFamily: "var(--gs-font)", fontSize: "13px", position: "relative", width: `${cols}ch` }, children: [
       rows.map((line, index) => {
@@ -1597,8 +1602,9 @@ function GreenScreenTerminal({
         screenData?.insert_mode && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gs-badge-ins", children: "INS" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "gs-header-right", children: [
-        connStatus?.status && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(KeyIcon, { size: 12, style: { color: getStatusColor(connStatus.status) } }),
-        connStatus && (connStatus.connected ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WifiIcon, { size: 12, style: { color: "var(--gs-green, #10b981)" } }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WifiOffIcon, { size: 12, style: { color: "#FF6B00" } })),
+        connStatus?.status && connStatus.status !== "loading" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(KeyIcon, { size: 12, style: { color: getStatusColor(connStatus.status) } }),
+        connStatus && connStatus.status !== "loading" && (connStatus.connected ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WifiIcon, { size: 12, style: { color: "var(--gs-green, #10b981)" } }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WifiOffIcon, { size: 12, style: { color: "#FF6B00" } })),
+        statusActions,
         onMinimize && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: (e) => {
           e.stopPropagation();
           onMinimize();
@@ -1620,7 +1626,7 @@ function GreenScreenTerminal({
         screenData?.insert_mode && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gs-badge-ins", children: "INS" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "gs-header-right", children: [
-        connStatus && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "gs-status-group", children: connStatus.connected ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        connStatus && connStatus.status !== "loading" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "gs-status-group", children: connStatus.connected ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WifiIcon, { size: 12, style: { color: "var(--gs-green, #10b981)" } }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gs-host", children: connStatus.host })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
@@ -1632,6 +1638,7 @@ function GreenScreenTerminal({
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(KeyIcon, { size: 12, style: { color: getStatusColor(connStatus.status) } }),
           connStatus.username && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gs-host", children: connStatus.username })
         ] }),
+        statusActions,
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: (e) => {
           e.stopPropagation();
           setShowShortcuts((s) => !s);
@@ -1691,7 +1698,8 @@ function GreenScreenTerminal({
           ] }),
           connStatus && !connStatus.connected && screenData && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "gs-overlay", children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WifiOffIcon, { size: 28 }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: isAutoReconnecting || reconnecting ? "Reconnecting..." : "Disconnected" })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: isAutoReconnecting || reconnecting ? "Reconnecting..." : connStatus?.status === "connecting" ? "Connecting..." : "Disconnected" }),
+            connStatus.error && !isAutoReconnecting && !reconnecting && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "0.75em", opacity: 0.7, maxWidth: "80%", textAlign: "center", wordBreak: "break-word" }, children: connStatus.error })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "input",