green-screen-react 0.4.0 → 1.0.0

package/dist/index.js

@@ -111,15 +111,40 @@ var RestAdapter = class {
 };
 
 // src/adapters/WebSocketAdapter.ts
-var WebSocketAdapter = class {
+var import_meta = {};
+var WebSocketAdapter = class _WebSocketAdapter {
   constructor(options = {}) {
     this.ws = null;
     this.screen = null;
     this.status = { connected: false, status: "disconnected" };
-    this.pendingResolvers = /* @__PURE__ */ new Map();
+    this.pendingScreenResolver = null;
+    this.pendingConnectResolver = null;
+    this.connectingPromise = null;
     this.screenListeners = /* @__PURE__ */ new Set();
     this.statusListeners = /* @__PURE__ */ new Set();
-    this.workerUrl = (options.workerUrl || "http://localhost:3001").replace(/\/+$/, "");
+    this._sessionId = null;
+    this.workerUrl = (options.workerUrl || _WebSocketAdapter.detectEnvUrl() || "http://localhost:3001").replace(/\/+$/, "");
+  }
+  static detectEnvUrl() {
+    try {
+      if (typeof import_meta !== "undefined" && import_meta.env) {
+        const env = import_meta.env;
+        return env.VITE_GREEN_SCREEN_URL || env.VITE_WORKER_URL || void 0;
+      }
+    } catch {
+    }
+    try {
+      const p = typeof globalThis !== "undefined" && globalThis.process;
+      if (p && p.env) {
+        return p.env.NEXT_PUBLIC_GREEN_SCREEN_URL || p.env.REACT_APP_GREEN_SCREEN_URL || void 0;
+      }
+    } catch {
+    }
+    return void 0;
+  }
+  /** The proxy-side session ID (available after connect or reattach) */
+  get sessionId() {
+    return this._sessionId;
   }
   /** Subscribe to real-time screen updates */
   onScreen(listener) {
@@ -150,24 +175,13 @@ var WebSocketAdapter = class {
     }
     return new Promise((resolve) => {
       const timeout = setTimeout(() => {
+        this.pendingConnectResolver = null;
         resolve({ success: false, error: "Connection timeout" });
       }, 3e4);
-      const onMessage = (event) => {
-        try {
-          const msg = JSON.parse(event.data);
-          if (msg.type === "connected") {
-            clearTimeout(timeout);
-            this.ws?.removeEventListener("message", onMessage);
-            resolve({ success: true });
-          } else if (msg.type === "error") {
-            clearTimeout(timeout);
-            this.ws?.removeEventListener("message", onMessage);
-            resolve({ success: false, error: msg.message });
-          }
-        } catch {
-        }
+      this.pendingConnectResolver = (result) => {
+        clearTimeout(timeout);
+        resolve(result);
       };
-      this.ws?.addEventListener("message", onMessage);
       this.wsSend({
         type: "connect",
         host: config.host,
@@ -178,9 +192,29 @@ var WebSocketAdapter = class {
       });
     });
   }
+  /**
+   * Reattach to an existing proxy session (e.g. after page reload).
+   * The proxy keeps the TCP connection alive; this just reconnects the
+   * WebSocket and receives the current screen.
+   */
+  async reattach(sessionId) {
+    await this.ensureWebSocket();
+    return new Promise((resolve) => {
+      const timeout = setTimeout(() => {
+        this.pendingConnectResolver = null;
+        resolve({ success: false, error: "Reattach timeout" });
+      }, 1e4);
+      this.pendingConnectResolver = (result) => {
+        clearTimeout(timeout);
+        resolve(result);
+      };
+      this.wsSend({ type: "reattach", sessionId });
+    });
+  }
   async disconnect() {
     this.wsSend({ type: "disconnect" });
     this.status = { connected: false, status: "disconnected" };
+    this._sessionId = null;
     if (this.ws) {
       this.ws.close();
       this.ws = null;
@@ -190,7 +224,7 @@ var WebSocketAdapter = class {
   async reconnect() {
     return { success: false, error: "Use disconnect() then connect() instead" };
   }
-  /** Close the WebSocket without sending disconnect */
+  /** Close the WebSocket without sending disconnect (session stays alive on proxy) */
   dispose() {
     if (this.ws) {
       this.ws.close();
@@ -199,7 +233,8 @@ var WebSocketAdapter = class {
   }
   async ensureWebSocket() {
     if (this.ws && this.ws.readyState === WebSocket.OPEN) return;
-    return new Promise((resolve, reject) => {
+    if (this.connectingPromise) return this.connectingPromise;
+    this.connectingPromise = new Promise((resolve, reject) => {
       const wsUrl = this.workerUrl.replace(/^http/, "ws") + "/ws";
       this.ws = new WebSocket(wsUrl);
       this.ws.onopen = () => resolve();
@@ -215,39 +250,61 @@ var WebSocketAdapter = class {
         this.status = { connected: false, status: "disconnected" };
         for (const listener of this.statusListeners) listener(this.status);
       };
+    }).finally(() => {
+      this.connectingPromise = null;
     });
+    return this.connectingPromise;
   }
   handleMessage(msg) {
     switch (msg.type) {
-      case "screen":
+      case "screen": {
         this.screen = msg.data;
         for (const listener of this.screenListeners) listener(msg.data);
-        const screenResolver = this.pendingResolvers.get("screen");
-        if (screenResolver) {
-          this.pendingResolvers.delete("screen");
-          screenResolver(msg.data);
+        if (this.pendingScreenResolver) {
+          const resolver = this.pendingScreenResolver;
+          this.pendingScreenResolver = null;
+          resolver(msg.data);
         }
         break;
+      }
       case "status":
         this.status = msg.data;
         for (const listener of this.statusListeners) listener(msg.data);
         break;
-      case "error":
-        const errorResolver = this.pendingResolvers.get("screen");
-        if (errorResolver) {
-          this.pendingResolvers.delete("screen");
-          errorResolver(null);
+      case "connected":
+        this._sessionId = msg.sessionId ?? null;
+        if (this.pendingConnectResolver) {
+          const resolver = this.pendingConnectResolver;
+          this.pendingConnectResolver = null;
+          resolver({ success: true });
+        }
+        break;
+      case "error": {
+        if (this.pendingConnectResolver) {
+          const resolver = this.pendingConnectResolver;
+          this.pendingConnectResolver = null;
+          resolver({ success: false, error: msg.message });
+        } else if (this.pendingScreenResolver) {
+          const resolver = this.pendingScreenResolver;
+          this.pendingScreenResolver = null;
+          resolver(null);
         }
         break;
+      }
     }
   }
   sendAndWaitForScreen(msg) {
     return new Promise((resolve) => {
+      if (this.pendingScreenResolver) {
+        const old = this.pendingScreenResolver;
+        this.pendingScreenResolver = null;
+        old(this.screen);
+      }
       const timeout = setTimeout(() => {
-        this.pendingResolvers.delete("screen");
+        this.pendingScreenResolver = null;
         resolve({ success: true, ...this.screenToResult() });
       }, 5e3);
-      this.pendingResolvers.set("screen", (screen) => {
+      this.pendingScreenResolver = (screen) => {
         clearTimeout(timeout);
         if (screen) {
           resolve({
@@ -260,7 +317,7 @@ var WebSocketAdapter = class {
         } else {
           resolve({ success: false, error: "No screen data received" });
         }
-      });
+      };
       this.wsSend(msg);
     });
   }
@@ -891,20 +948,23 @@ var PROTOCOL_OPTIONS = [
   { value: "vt", label: "VT220" },
   { value: "hp6530", label: "HP 6530 (NonStop)" }
 ];
-function InlineSignIn({ defaultProtocol, loading, error, onConnect }) {
+function InlineSignIn({ defaultProtocol, loading: externalLoading, error, onConnect }) {
   const [host, setHost] = (0, import_react4.useState)("");
   const [port, setPort] = (0, import_react4.useState)("");
   const [selectedProtocol, setSelectedProtocol] = (0, import_react4.useState)(defaultProtocol);
   const [username, setUsername] = (0, import_react4.useState)("");
   const [password, setPassword] = (0, import_react4.useState)("");
+  const [submitted, setSubmitted] = (0, import_react4.useState)(false);
+  const loading = externalLoading || submitted;
   const handleSubmit = (e) => {
     e.preventDefault();
+    setSubmitted(true);
     onConnect({
       host,
-      port: port ? parseInt(port, 10) : void 0,
+      port: port ? parseInt(port, 10) : 23,
       protocol: selectedProtocol,
-      username,
-      password
+      ...username.trim() ? { username: username.trim() } : {},
+      ...password ? { password } : {}
     });
   };
   const inputStyle = {
@@ -927,6 +987,16 @@ function InlineSignIn({ defaultProtocol, loading, error, onConnect }) {
     color: "var(--gs-muted, #94a3b8)",
     fontFamily: "var(--gs-font)"
   };
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "gs-signin", style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RefreshIcon, { size: 28, className: "gs-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "11px", letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--gs-muted)", fontFamily: "var(--gs-font)" }, children: [
+        "Connecting to ",
+        host || "host",
+        "..."
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleSubmit, className: "gs-signin", children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { textAlign: "center", marginBottom: "16px" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TerminalIcon, { size: 28 }),
@@ -934,7 +1004,10 @@ function InlineSignIn({ defaultProtocol, loading, error, onConnect }) {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "gs-signin-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: labelStyle, children: "Host" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: labelStyle, children: [
+          "Host ",
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "#ef4444" }, children: "*" })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { style: inputStyle, value: host, onChange: (e) => setHost(e.target.value), placeholder: "192.168.1.100", required: true, autoFocus: true })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { width: "72px" }, children: [
@@ -943,22 +1016,25 @@ function InlineSignIn({ defaultProtocol, loading, error, onConnect }) {
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: labelStyle, children: "Protocol" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: labelStyle, children: [
+        "Protocol ",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "#ef4444" }, children: "*" })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("select", { style: { ...inputStyle, appearance: "none" }, value: selectedProtocol, onChange: (e) => setSelectedProtocol(e.target.value), children: PROTOCOL_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value)) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: labelStyle, children: "Username" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { style: inputStyle, value: username, onChange: (e) => setUsername(e.target.value), required: true, autoComplete: "username" })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { style: inputStyle, value: username, onChange: (e) => setUsername(e.target.value), autoComplete: "username" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: labelStyle, children: "Password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { style: inputStyle, type: "password", value: password, onChange: (e) => setPassword(e.target.value), required: true, autoComplete: "current-password" })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { style: inputStyle, type: "password", value: password, onChange: (e) => setPassword(e.target.value), autoComplete: "current-password" })
     ] }),
     error && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { color: "#FF6B00", fontSize: "11px", fontFamily: "var(--gs-font)", display: "flex", alignItems: "center", gap: "6px" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AlertTriangleIcon, { size: 12 }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: error })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", disabled: loading || !host || !username || !password, className: "gs-signin-btn", children: loading ? "Connecting..." : "Connect" })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", disabled: !host, className: "gs-signin-btn", children: "Connect" })
   ] });
 }
 
@@ -977,6 +1053,7 @@ var noopAdapter = {
 function GreenScreenTerminal({
   adapter: externalAdapter,
   baseUrl,
+  workerUrl,
   protocol,
   protocolProfile: customProfile,
   screenData: externalScreenData,
@@ -992,6 +1069,8 @@ function GreenScreenTerminal({
   inlineSignIn = true,
   defaultProtocol: signInDefaultProtocol,
   onSignIn,
+  autoSignedIn,
+  autoFocusDisabled = false,
   bootLoader,
   headerRight,
   overlay,
@@ -1007,11 +1086,16 @@ function GreenScreenTerminal({
     () => baseUrl ? new RestAdapter({ baseUrl }) : null,
     [baseUrl]
   );
+  const workerUrlAdapter = (0, import_react5.useMemo)(
+    () => workerUrl ? new WebSocketAdapter({ workerUrl }) : null,
+    [workerUrl]
+  );
   const defaultWsAdapter = (0, import_react5.useMemo)(
-    () => !externalAdapter && !baseUrl ? new WebSocketAdapter() : null,
-    [externalAdapter, baseUrl]
+    () => !externalAdapter && !baseUrl && !workerUrl ? new WebSocketAdapter() : null,
+    [externalAdapter, baseUrl, workerUrl]
   );
-  const adapter = externalAdapter ?? baseUrlAdapter ?? internalAdapter ?? defaultWsAdapter ?? noopAdapter;
+  const adapter = externalAdapter ?? baseUrlAdapter ?? workerUrlAdapter ?? internalAdapter ?? defaultWsAdapter ?? noopAdapter;
+  const isUsingDefaultAdapter = adapter === defaultWsAdapter;
   const shouldPoll = pollInterval > 0 && !externalScreenData;
   const { data: polledScreenData, error: screenError } = useTerminalScreen(adapter, pollInterval, shouldPoll);
   const { sendText: _sendText, sendKey: _sendKey } = useTerminalInput(adapter);
@@ -1038,6 +1122,12 @@ function GreenScreenTerminal({
   const sendKey = (0, import_react5.useCallback)(async (key) => _sendKey(key), [_sendKey]);
   const [inputText, setInputText] = (0, import_react5.useState)("");
   const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
+  const [showSignInHint, setShowSignInHint] = (0, import_react5.useState)(false);
+  const prevAutoSignedIn = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
+    if (autoSignedIn && !prevAutoSignedIn.current) setShowSignInHint(true);
+    prevAutoSignedIn.current = !!autoSignedIn;
+  }, [autoSignedIn]);
   const terminalRef = (0, import_react5.useRef)(null);
   const inputRef = (0, import_react5.useRef)(null);
   const [syncedCursor, setSyncedCursor] = (0, import_react5.useState)(null);
@@ -1047,6 +1137,7 @@ function GreenScreenTerminal({
     if (prevRawContentRef.current && newContent && newContent !== prevRawContentRef.current) {
       setSyncedCursor(null);
       setInputText("");
+      if (showSignInHint) setShowSignInHint(false);
     }
     prevRawContentRef.current = newContent;
   }, [rawScreenData?.content]);
@@ -1094,17 +1185,34 @@ function GreenScreenTerminal({
       if (reconnectTimeoutRef.current) clearTimeout(reconnectTimeoutRef.current);
     };
   }, [connStatus?.connected, autoReconnectAttempt, isAutoReconnecting, reconnecting, reconnect, autoReconnectEnabled, maxAttempts, onNotification]);
+  const [connecting, setConnecting] = (0, import_react5.useState)(false);
+  const [signInError, setSignInError] = (0, import_react5.useState)(null);
   const handleSignIn = (0, import_react5.useCallback)(async (config) => {
-    onSignIn?.(config);
-    if (!externalAdapter && !baseUrlAdapter) {
-      const port = config.port ? `:${config.port}` : "";
-      const newAdapter = new RestAdapter({ baseUrl: `http://${config.host}${port}` });
-      setInternalAdapter(newAdapter);
-      await newAdapter.connect(config);
+    if (onSignIn) {
+      onSignIn(config);
       return;
     }
-    await connect(config);
+    setConnecting(true);
+    setSignInError(null);
+    try {
+      if (!externalAdapter && !baseUrlAdapter) {
+        const port = config.port ? `:${config.port}` : "";
+        const newAdapter = new RestAdapter({ baseUrl: `http://${config.host}${port}` });
+        setInternalAdapter(newAdapter);
+        await newAdapter.connect(config);
+        if (config.username && config.password) setShowSignInHint(true);
+        return;
+      }
+      await connect(config);
+      if (config.username && config.password) setShowSignInHint(true);
+    } catch (err) {
+      setSignInError(err instanceof Error ? err.message : String(err));
+      setConnecting(false);
+    }
   }, [connect, onSignIn, externalAdapter, baseUrlAdapter]);
+  (0, import_react5.useEffect)(() => {
+    if (connecting && screenData?.content) setConnecting(false);
+  }, [connecting, screenData?.content]);
   const [showBootLoader, setShowBootLoader] = (0, import_react5.useState)(bootLoader !== false);
   const [bootFadingOut, setBootFadingOut] = (0, import_react5.useState)(false);
   (0, import_react5.useEffect)(() => {
@@ -1115,6 +1223,35 @@ function GreenScreenTerminal({
       return () => clearTimeout(timer);
     }
   }, [screenData?.content, showBootLoader]);
+  const FOCUS_STORAGE_KEY = "gs-terminal-focused";
+  (0, import_react5.useEffect)(() => {
+    if (!autoFocusDisabled && !readOnly) {
+      try {
+        if (localStorage.getItem(FOCUS_STORAGE_KEY) === "true") {
+          setIsFocused(true);
+        }
+      } catch {
+      }
+    }
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    if (autoFocusDisabled) return;
+    try {
+      localStorage.setItem(FOCUS_STORAGE_KEY, String(isFocused));
+    } catch {
+    }
+  }, [isFocused, autoFocusDisabled]);
+  (0, import_react5.useEffect)(() => {
+    if (isFocused) inputRef.current?.focus();
+  }, [isFocused]);
+  const hadScreenData = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
+    if (screenData?.content && !hadScreenData.current && !autoFocusDisabled && !readOnly) {
+      hadScreenData.current = true;
+      setIsFocused(true);
+    }
+    if (!screenData?.content) hadScreenData.current = false;
+  }, [screenData?.content, autoFocusDisabled, readOnly]);
   (0, import_react5.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (terminalRef.current && !terminalRef.current.contains(event.target)) setIsFocused(false);
@@ -1265,7 +1402,7 @@ function GreenScreenTerminal({
     const highlightedFields = fields.filter((f) => f.row === rowIndex && f.is_protected && f.is_highlighted);
     const reverseFields = fields.filter((f) => f.row === rowIndex && f.is_protected && f.is_reverse);
     const allRowFields = [...inputFields, ...highlightedFields, ...reverseFields];
-    if (allRowFields.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: renderTextWithUnderlines(line, `r${rowIndex}`) });
+    if (allRowFields.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: line });
     const sorted = [...allRowFields].sort((a, b) => a.col - b.col);
     const segs = [];
     let lastEnd = 0;
@@ -1273,21 +1410,24 @@ function GreenScreenTerminal({
     sorted.forEach((field, idx) => {
       const fs = field.col;
       const fe = Math.min(field.col + field.length, cols);
-      if (fs > lastEnd) segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: renderTextWithUnderlines(line.substring(lastEnd, fs), `r${rowIndex}p${idx}`) }, `t${idx}`));
+      if (fs > lastEnd) segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: line.substring(lastEnd, fs) }, `t${idx}`));
       const fc = line.substring(fs, fe);
       if (field.is_input) {
-        const w = field.length >= 30 ? Math.max(field.length, 40) : field.length;
-        segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gs-input-field", style: { borderBottom: "2px solid var(--gs-green, #10b981)", display: "inline-block", minWidth: `${w}ch` }, children: fc }, `f${idx}`));
+        const fieldWidth = Math.min(field.length, cols - fs);
+        const fieldClass = showSignInHint ? "gs-confirmed-field" : field.is_underscored ? "gs-input-field" : void 0;
+        segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: fieldClass || void 0, style: { display: "inline-block", width: `${fieldWidth}ch`, overflow: "hidden" }, children: fc }, `f${idx}`));
       } else if (field.is_reverse) {
         segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "#ef4444", fontWeight: "bold" }, children: fc }, `v${idx}`));
-      } else {
+      } else if (field.is_highlighted) {
         segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "var(--gs-white, #FFFFFF)" }, children: fc }, `h${idx}`));
+      } else {
+        segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: fc }, `h${idx}`));
       }
       lastEnd = fe;
     });
-    if (lastEnd < line.length) segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: renderTextWithUnderlines(line.substring(lastEnd), `r${rowIndex}e`) }, "te"));
+    if (lastEnd < line.length) segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: line.substring(lastEnd) }, "te"));
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: segs });
-  }, [renderTextWithUnderlines, screenData?.cols, profile.defaultCols]);
+  }, [renderTextWithUnderlines, screenData?.cols, profile.defaultCols, showSignInHint]);
   const renderScreen = () => {
     if (showBootLoader && !screenData?.content) {
       if (bootLoader === false) return null;
@@ -1297,11 +1437,15 @@ function GreenScreenTerminal({
     if (bootFadingOut && screenData?.content) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "gs-fade-in", children: renderScreenContent() });
     if (!screenData?.content) {
       if (inlineSignIn && !connStatus?.connected) {
-        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.jsx)(InlineSignIn, { defaultProtocol: signInDefaultProtocol || protocol || "tn5250", loading: reconnecting, error: connectError, onConnect: handleSignIn }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: "100%", height: `${(screenData?.rows || profile.defaultRows) * 21}px`, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InlineSignIn, { defaultProtocol: signInDefaultProtocol || protocol || "tn5250", loading: connecting || reconnecting, error: signInError || connectError, onConnect: handleSignIn }) });
       }
       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: "#808080" }, children: connStatus?.connected ? "Waiting for screen data..." : "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" })
+        ] })
       ] }) });
     }
     return renderScreenContent();
@@ -1316,8 +1460,7 @@ function GreenScreenTerminal({
     const fields = screenData.fields || [];
     const ROW_HEIGHT = 21;
     const cursor = getCursorPos();
-    const hasInputFields = fields.some((f) => f.is_input);
-    const hasCursor = screenData.cursor_row !== void 0 && screenData.cursor_col !== void 0 && (hasInputFields || screenData.cursor_row !== 0 || screenData.cursor_col !== 0);
+    const hasCursor = screenData.cursor_row !== void 0 && screenData.cursor_col !== void 0;
     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) => {
         let displayLine = line;
@@ -1328,9 +1471,10 @@ function GreenScreenTerminal({
         const headerSegments = index === 0 ? profile.colors.parseHeaderRow(displayLine) : null;
         return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: headerSegments ? "" : profile.colors.getRowColorClass(index, displayLine, termRows), style: { height: `${ROW_HEIGHT}px`, lineHeight: `${ROW_HEIGHT}px`, whiteSpace: "pre", position: "relative" }, children: [
           headerSegments ? headerSegments.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: seg.colorClass, children: seg.text }, i)) : renderRowWithFields(displayLine, index, fields),
-          hasCursor && index === cursor.row && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gs-cursor", style: { position: "absolute", left: `${cursor.col}ch`, width: "1ch", height: `${ROW_HEIGHT}px`, top: 0, pointerEvents: "none" } })
+          hasCursor && !showSignInHint && index === cursor.row && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gs-cursor", style: { position: "absolute", left: `${cursor.col}ch`, width: "1ch", height: `${ROW_HEIGHT}px`, top: 0, pointerEvents: "none" } })
         ] }, index);
       }),
+      showSignInHint && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "gs-signin-hint", children: "Signed in \u2014 press Enter to continue" }),
       screenData.cursor_row !== void 0 && screenData.cursor_col !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { position: "absolute", bottom: 0, right: 0, fontFamily: "var(--gs-font)", fontSize: "10px", color: "var(--gs-green, #10b981)", pointerEvents: "none", opacity: 0.6 }, children: [
         String(screenData.cursor_row + 1).padStart(2, "0"),
         "/",