green-screen-react 0.3.0 → 1.0.0

package/dist/index.mjs

@@ -1,7 +1,292 @@
 // src/components/GreenScreenTerminal.tsx
-import { useState as useState4, useEffect as useEffect4, useRef as useRef4, useCallback as useCallback3, useMemo as useMemo2 } from "react";
+import { useState as useState5, useEffect as useEffect4, useRef as useRef4, useCallback as useCallback3, useMemo as useMemo2 } from "react";
 
-// src/hooks/useTN5250.ts
+// src/adapters/RestAdapter.ts
+var RestAdapter = class {
+  constructor(options) {
+    this.baseUrl = options.baseUrl.replace(/\/+$/, "");
+    this.staticHeaders = options.headers || {};
+    this.getHeaders = options.getHeaders;
+  }
+  async buildHeaders() {
+    const dynamic = this.getHeaders ? await this.getHeaders() : {};
+    return {
+      "Content-Type": "application/json",
+      ...this.staticHeaders,
+      ...dynamic
+    };
+  }
+  async request(method, path, body) {
+    const headers = await this.buildHeaders();
+    const response = await fetch(`${this.baseUrl}${path}`, {
+      method,
+      headers,
+      body: body ? JSON.stringify(body) : void 0
+    });
+    if (!response.ok) {
+      const detail = await response.json().catch(() => ({}));
+      throw new Error(detail?.detail || `HTTP ${response.status}`);
+    }
+    return response.json();
+  }
+  async getScreen() {
+    try {
+      return await this.request("GET", "/screen");
+    } catch (e) {
+      const message = e instanceof Error ? e.message : String(e);
+      if (message.includes("503") || message.includes("404")) {
+        return null;
+      }
+      throw e;
+    }
+  }
+  async getStatus() {
+    return this.request("GET", "/status");
+  }
+  async sendText(text) {
+    return this.request("POST", "/send-text", { text });
+  }
+  async sendKey(key) {
+    return this.request("POST", "/send-key", { key });
+  }
+  async connect(config) {
+    return this.request("POST", "/connect", config);
+  }
+  async disconnect() {
+    return this.request("POST", "/disconnect");
+  }
+  async reconnect() {
+    return this.request("POST", "/reconnect");
+  }
+};
+
+// src/adapters/WebSocketAdapter.ts
+var WebSocketAdapter = class _WebSocketAdapter {
+  constructor(options = {}) {
+    this.ws = null;
+    this.screen = null;
+    this.status = { connected: false, status: "disconnected" };
+    this.pendingScreenResolver = null;
+    this.pendingConnectResolver = null;
+    this.connectingPromise = null;
+    this.screenListeners = /* @__PURE__ */ new Set();
+    this.statusListeners = /* @__PURE__ */ new Set();
+    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) {
+    this.screenListeners.add(listener);
+    return () => this.screenListeners.delete(listener);
+  }
+  /** Subscribe to status changes */
+  onStatus(listener) {
+    this.statusListeners.add(listener);
+    return () => this.statusListeners.delete(listener);
+  }
+  async getScreen() {
+    return this.screen;
+  }
+  async getStatus() {
+    return this.status;
+  }
+  async sendText(text) {
+    return this.sendAndWaitForScreen({ type: "text", text });
+  }
+  async sendKey(key) {
+    return this.sendAndWaitForScreen({ type: "key", key });
+  }
+  async connect(config) {
+    await this.ensureWebSocket();
+    if (!config) {
+      return { success: false, error: "ConnectConfig required" };
+    }
+    return new Promise((resolve) => {
+      const timeout = setTimeout(() => {
+        this.pendingConnectResolver = null;
+        resolve({ success: false, error: "Connection timeout" });
+      }, 3e4);
+      this.pendingConnectResolver = (result) => {
+        clearTimeout(timeout);
+        resolve(result);
+      };
+      this.wsSend({
+        type: "connect",
+        host: config.host,
+        port: config.port,
+        protocol: config.protocol,
+        username: config.username,
+        password: config.password
+      });
+    });
+  }
+  /**
+   * 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;
+    }
+    return { success: true };
+  }
+  async reconnect() {
+    return { success: false, error: "Use disconnect() then connect() instead" };
+  }
+  /** Close the WebSocket without sending disconnect (session stays alive on proxy) */
+  dispose() {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+  async ensureWebSocket() {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) return;
+    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();
+      this.ws.onerror = () => reject(new Error("WebSocket connection failed"));
+      this.ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          this.handleMessage(msg);
+        } catch {
+        }
+      };
+      this.ws.onclose = () => {
+        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": {
+        this.screen = msg.data;
+        for (const listener of this.screenListeners) listener(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 "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.pendingScreenResolver = null;
+        resolve({ success: true, ...this.screenToResult() });
+      }, 5e3);
+      this.pendingScreenResolver = (screen) => {
+        clearTimeout(timeout);
+        if (screen) {
+          resolve({
+            success: true,
+            cursor_row: screen.cursor_row,
+            cursor_col: screen.cursor_col,
+            content: screen.content,
+            screen_signature: screen.screen_signature
+          });
+        } else {
+          resolve({ success: false, error: "No screen data received" });
+        }
+      };
+      this.wsSend(msg);
+    });
+  }
+  screenToResult() {
+    if (!this.screen) return {};
+    return {
+      cursor_row: this.screen.cursor_row,
+      cursor_col: this.screen.cursor_col,
+      content: this.screen.content,
+      screen_signature: this.screen.screen_signature
+    };
+  }
+  wsSend(data) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(data));
+    }
+  }
+};
+
+// src/hooks/useTerminal.ts
 import { useState, useCallback, useEffect, useRef } from "react";
 function useTerminalConnection(adapter) {
   const [status, setStatus] = useState(null);
@@ -122,9 +407,6 @@ function useTerminalInput(adapter) {
   }, [adapter]);
   return { loading, error, sendText, sendKey };
 }
-var useTN5250Connection = useTerminalConnection;
-var useTN5250Screen = useTerminalScreen;
-var useTN5250Terminal = useTerminalInput;
 
 // src/hooks/useTypingAnimation.ts
 import { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2, useMemo } from "react";
@@ -572,8 +854,8 @@ function TerminalBootLoader({
   );
 }
 
-// src/components/GreenScreenTerminal.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+// src/components/Icons.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var TerminalIcon = ({ size = 14 }) => /* @__PURE__ */ jsxs2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ jsx2("polyline", { points: "4 17 10 11 4 5" }),
   /* @__PURE__ */ jsx2("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
@@ -605,26 +887,33 @@ var RefreshIcon = ({ size = 12, className }) => /* @__PURE__ */ jsxs2("svg", { w
 ] });
 var KeyIcon = ({ size = 12, style: s }) => /* @__PURE__ */ jsx2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: s, children: /* @__PURE__ */ jsx2("path", { d: "M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" }) });
 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 { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var PROTOCOL_OPTIONS = [
   { value: "tn5250", label: "TN5250 (IBM i)" },
   { value: "tn3270", label: "TN3270 (Mainframe)" },
   { 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] = useState4("");
   const [port, setPort] = useState4("");
   const [selectedProtocol, setSelectedProtocol] = useState4(defaultProtocol);
   const [username, setUsername] = useState4("");
   const [password, setPassword] = useState4("");
+  const [submitted, setSubmitted] = useState4(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 = {
@@ -647,42 +936,73 @@ function InlineSignIn({ defaultProtocol, loading, error, onConnect }) {
     color: "var(--gs-muted, #94a3b8)",
     fontFamily: "var(--gs-font)"
   };
-  return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "gs-signin", children: [
-    /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center", marginBottom: "16px" }, children: [
-      /* @__PURE__ */ jsx2(TerminalIcon, { size: 28 }),
-      /* @__PURE__ */ jsx2("div", { style: { fontSize: "11px", letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--gs-muted)", marginTop: "8px" }, children: "Connect to Host" })
+  if (loading) {
+    return /* @__PURE__ */ jsxs3("div", { className: "gs-signin", style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px" }, children: [
+      /* @__PURE__ */ jsx3(RefreshIcon, { size: 28, className: "gs-spin" }),
+      /* @__PURE__ */ jsxs3("div", { style: { fontSize: "11px", letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--gs-muted)", fontFamily: "var(--gs-font)" }, children: [
+        "Connecting to ",
+        host || "host",
+        "..."
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className: "gs-signin", children: [
+    /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center", marginBottom: "16px" }, children: [
+      /* @__PURE__ */ jsx3(TerminalIcon, { size: 28 }),
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: "11px", letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--gs-muted)", marginTop: "8px" }, children: "Connect to Host" })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "gs-signin-row", children: [
-      /* @__PURE__ */ jsxs2("div", { style: { flex: 1 }, children: [
-        /* @__PURE__ */ jsx2("label", { style: labelStyle, children: "Host" }),
-        /* @__PURE__ */ jsx2("input", { style: inputStyle, value: host, onChange: (e) => setHost(e.target.value), placeholder: "192.168.1.100", required: true, autoFocus: true })
+    /* @__PURE__ */ jsxs3("div", { className: "gs-signin-row", children: [
+      /* @__PURE__ */ jsxs3("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsxs3("label", { style: labelStyle, children: [
+          "Host ",
+          /* @__PURE__ */ jsx3("span", { style: { color: "#ef4444" }, children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx3("input", { style: inputStyle, value: host, onChange: (e) => setHost(e.target.value), placeholder: "192.168.1.100", required: true, autoFocus: true })
       ] }),
-      /* @__PURE__ */ jsxs2("div", { style: { width: "72px" }, children: [
-        /* @__PURE__ */ jsx2("label", { style: labelStyle, children: "Port" }),
-        /* @__PURE__ */ jsx2("input", { style: inputStyle, value: port, onChange: (e) => setPort(e.target.value), placeholder: "23", type: "number", min: "1", max: "65535" })
+      /* @__PURE__ */ jsxs3("div", { style: { width: "72px" }, children: [
+        /* @__PURE__ */ jsx3("label", { style: labelStyle, children: "Port" }),
+        /* @__PURE__ */ jsx3("input", { style: inputStyle, value: port, onChange: (e) => setPort(e.target.value), placeholder: "23", type: "number", min: "1", max: "65535" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { children: [
-      /* @__PURE__ */ jsx2("label", { style: labelStyle, children: "Protocol" }),
-      /* @__PURE__ */ jsx2("select", { style: { ...inputStyle, appearance: "none" }, value: selectedProtocol, onChange: (e) => setSelectedProtocol(e.target.value), children: PROTOCOL_OPTIONS.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value)) })
+    /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsxs3("label", { style: labelStyle, children: [
+        "Protocol ",
+        /* @__PURE__ */ jsx3("span", { style: { color: "#ef4444" }, children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx3("select", { style: { ...inputStyle, appearance: "none" }, value: selectedProtocol, onChange: (e) => setSelectedProtocol(e.target.value), children: PROTOCOL_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value)) })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { children: [
-      /* @__PURE__ */ jsx2("label", { style: labelStyle, children: "Username" }),
-      /* @__PURE__ */ jsx2("input", { style: inputStyle, value: username, onChange: (e) => setUsername(e.target.value), required: true, autoComplete: "username" })
+    /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx3("label", { style: labelStyle, children: "Username" }),
+      /* @__PURE__ */ jsx3("input", { style: inputStyle, value: username, onChange: (e) => setUsername(e.target.value), autoComplete: "username" })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { children: [
-      /* @__PURE__ */ jsx2("label", { style: labelStyle, children: "Password" }),
-      /* @__PURE__ */ jsx2("input", { style: inputStyle, type: "password", value: password, onChange: (e) => setPassword(e.target.value), required: true, autoComplete: "current-password" })
+    /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx3("label", { style: labelStyle, children: "Password" }),
+      /* @__PURE__ */ jsx3("input", { style: inputStyle, type: "password", value: password, onChange: (e) => setPassword(e.target.value), autoComplete: "current-password" })
     ] }),
-    error && /* @__PURE__ */ jsxs2("div", { style: { color: "#FF6B00", fontSize: "11px", fontFamily: "var(--gs-font)", display: "flex", alignItems: "center", gap: "6px" }, children: [
-      /* @__PURE__ */ jsx2(AlertTriangleIcon, { size: 12 }),
-      /* @__PURE__ */ jsx2("span", { children: error })
+    error && /* @__PURE__ */ jsxs3("div", { style: { color: "#FF6B00", fontSize: "11px", fontFamily: "var(--gs-font)", display: "flex", alignItems: "center", gap: "6px" }, children: [
+      /* @__PURE__ */ jsx3(AlertTriangleIcon, { size: 12 }),
+      /* @__PURE__ */ jsx3("span", { children: error })
     ] }),
-    /* @__PURE__ */ jsx2("button", { type: "submit", disabled: loading || !host || !username || !password, className: "gs-signin-btn", children: loading ? "Connecting..." : "Connect" })
+    /* @__PURE__ */ jsx3("button", { type: "submit", disabled: !host, className: "gs-signin-btn", children: "Connect" })
   ] });
 }
+
+// src/components/GreenScreenTerminal.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var noopResult = { success: false, error: "No adapter configured" };
+var noopAdapter = {
+  getScreen: async () => null,
+  getStatus: async () => ({ connected: false, status: "disconnected" }),
+  sendText: async () => noopResult,
+  sendKey: async () => noopResult,
+  connect: async () => noopResult,
+  disconnect: async () => noopResult,
+  reconnect: async () => noopResult
+};
 function GreenScreenTerminal({
-  adapter,
+  adapter: externalAdapter,
+  baseUrl,
+  workerUrl,
   protocol,
   protocolProfile: customProfile,
   screenData: externalScreenData,
@@ -695,9 +1015,11 @@ function GreenScreenTerminal({
   showHeader = true,
   typingAnimation = true,
   typingBudgetMs = 60,
-  inlineSignIn = false,
+  inlineSignIn = true,
   defaultProtocol: signInDefaultProtocol,
   onSignIn,
+  autoSignedIn,
+  autoFocusDisabled = false,
   bootLoader,
   headerRight,
   overlay,
@@ -708,6 +1030,21 @@ function GreenScreenTerminal({
   style
 }) {
   const profile = customProfile ?? getProtocolProfile(protocol);
+  const [internalAdapter, setInternalAdapter] = useState5(null);
+  const baseUrlAdapter = useMemo2(
+    () => baseUrl ? new RestAdapter({ baseUrl }) : null,
+    [baseUrl]
+  );
+  const workerUrlAdapter = useMemo2(
+    () => workerUrl ? new WebSocketAdapter({ workerUrl }) : null,
+    [workerUrl]
+  );
+  const defaultWsAdapter = useMemo2(
+    () => !externalAdapter && !baseUrl && !workerUrl ? new WebSocketAdapter() : null,
+    [externalAdapter, baseUrl, workerUrl]
+  );
+  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);
@@ -732,22 +1069,29 @@ function GreenScreenTerminal({
   }, [screenData, onScreenChange]);
   const sendText = useCallback3(async (text) => _sendText(text), [_sendText]);
   const sendKey = useCallback3(async (key) => _sendKey(key), [_sendKey]);
-  const [inputText, setInputText] = useState4("");
-  const [isFocused, setIsFocused] = useState4(false);
+  const [inputText, setInputText] = useState5("");
+  const [isFocused, setIsFocused] = useState5(false);
+  const [showSignInHint, setShowSignInHint] = useState5(false);
+  const prevAutoSignedIn = useRef4(false);
+  useEffect4(() => {
+    if (autoSignedIn && !prevAutoSignedIn.current) setShowSignInHint(true);
+    prevAutoSignedIn.current = !!autoSignedIn;
+  }, [autoSignedIn]);
   const terminalRef = useRef4(null);
   const inputRef = useRef4(null);
-  const [syncedCursor, setSyncedCursor] = useState4(null);
+  const [syncedCursor, setSyncedCursor] = useState5(null);
   const prevRawContentRef = useRef4("");
   useEffect4(() => {
     const newContent = rawScreenData?.content || "";
     if (prevRawContentRef.current && newContent && newContent !== prevRawContentRef.current) {
       setSyncedCursor(null);
       setInputText("");
+      if (showSignInHint) setShowSignInHint(false);
     }
     prevRawContentRef.current = newContent;
   }, [rawScreenData?.content]);
-  const [autoReconnectAttempt, setAutoReconnectAttempt] = useState4(0);
-  const [isAutoReconnecting, setIsAutoReconnecting] = useState4(false);
+  const [autoReconnectAttempt, setAutoReconnectAttempt] = useState5(0);
+  const [isAutoReconnecting, setIsAutoReconnecting] = useState5(false);
   const reconnectTimeoutRef = useRef4(null);
   const wasConnectedRef = useRef4(false);
   const isConnectedRef = useRef4(false);
@@ -790,12 +1134,36 @@ function GreenScreenTerminal({
       if (reconnectTimeoutRef.current) clearTimeout(reconnectTimeoutRef.current);
     };
   }, [connStatus?.connected, autoReconnectAttempt, isAutoReconnecting, reconnecting, reconnect, autoReconnectEnabled, maxAttempts, onNotification]);
+  const [connecting, setConnecting] = useState5(false);
+  const [signInError, setSignInError] = useState5(null);
   const handleSignIn = useCallback3(async (config) => {
-    onSignIn?.(config);
-    await connect(config);
-  }, [connect, onSignIn]);
-  const [showBootLoader, setShowBootLoader] = useState4(bootLoader !== false);
-  const [bootFadingOut, setBootFadingOut] = useState4(false);
+    if (onSignIn) {
+      onSignIn(config);
+      return;
+    }
+    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]);
+  useEffect4(() => {
+    if (connecting && screenData?.content) setConnecting(false);
+  }, [connecting, screenData?.content]);
+  const [showBootLoader, setShowBootLoader] = useState5(bootLoader !== false);
+  const [bootFadingOut, setBootFadingOut] = useState5(false);
   useEffect4(() => {
     if (screenData?.content && showBootLoader) {
       setBootFadingOut(true);
@@ -804,6 +1172,35 @@ function GreenScreenTerminal({
       return () => clearTimeout(timer);
     }
   }, [screenData?.content, showBootLoader]);
+  const FOCUS_STORAGE_KEY = "gs-terminal-focused";
+  useEffect4(() => {
+    if (!autoFocusDisabled && !readOnly) {
+      try {
+        if (localStorage.getItem(FOCUS_STORAGE_KEY) === "true") {
+          setIsFocused(true);
+        }
+      } catch {
+      }
+    }
+  }, []);
+  useEffect4(() => {
+    if (autoFocusDisabled) return;
+    try {
+      localStorage.setItem(FOCUS_STORAGE_KEY, String(isFocused));
+    } catch {
+    }
+  }, [isFocused, autoFocusDisabled]);
+  useEffect4(() => {
+    if (isFocused) inputRef.current?.focus();
+  }, [isFocused]);
+  const hadScreenData = useRef4(false);
+  useEffect4(() => {
+    if (screenData?.content && !hadScreenData.current && !autoFocusDisabled && !readOnly) {
+      hadScreenData.current = true;
+      setIsFocused(true);
+    }
+    if (!screenData?.content) hadScreenData.current = false;
+  }, [screenData?.content, autoFocusDisabled, readOnly]);
   useEffect4(() => {
     const handleClickOutside = (event) => {
       if (terminalRef.current && !terminalRef.current.contains(event.target)) setIsFocused(false);
@@ -940,21 +1337,21 @@ function GreenScreenTerminal({
     let match;
     let segmentIndex = 0;
     while ((match = underscoreRegex.exec(text)) !== null) {
-      if (match.index > lastIndex) segments.push(/* @__PURE__ */ jsx2("span", { children: text.substring(lastIndex, match.index) }, `${keyPrefix}-t-${segmentIndex}`));
+      if (match.index > lastIndex) segments.push(/* @__PURE__ */ jsx4("span", { children: text.substring(lastIndex, match.index) }, `${keyPrefix}-t-${segmentIndex}`));
       const count = match[0].length;
-      segments.push(/* @__PURE__ */ jsx2("span", { style: { borderBottom: "1px solid var(--gs-green, #10b981)", display: "inline-block", width: `${count}ch` }, children: " ".repeat(count) }, `${keyPrefix}-u-${segmentIndex}`));
+      segments.push(/* @__PURE__ */ jsx4("span", { style: { borderBottom: "1px solid var(--gs-green, #10b981)", display: "inline-block", width: `${count}ch` }, children: " ".repeat(count) }, `${keyPrefix}-u-${segmentIndex}`));
       lastIndex = match.index + match[0].length;
       segmentIndex++;
     }
-    if (lastIndex < text.length) segments.push(/* @__PURE__ */ jsx2("span", { children: text.substring(lastIndex) }, `${keyPrefix}-e`));
-    return segments.length > 0 ? /* @__PURE__ */ jsx2(Fragment, { children: segments }) : /* @__PURE__ */ jsx2(Fragment, { children: text });
+    if (lastIndex < text.length) segments.push(/* @__PURE__ */ jsx4("span", { children: text.substring(lastIndex) }, `${keyPrefix}-e`));
+    return segments.length > 0 ? /* @__PURE__ */ jsx4(Fragment, { children: segments }) : /* @__PURE__ */ jsx4(Fragment, { children: text });
   }, []);
   const renderRowWithFields = useCallback3((line, rowIndex, fields) => {
     const inputFields = fields.filter((f) => f.row === rowIndex && f.is_input);
     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__ */ jsx2("span", { children: renderTextWithUnderlines(line, `r${rowIndex}`) });
+    if (allRowFields.length === 0) return /* @__PURE__ */ jsx4("span", { children: line });
     const sorted = [...allRowFields].sort((a, b) => a.col - b.col);
     const segs = [];
     let lastEnd = 0;
@@ -962,35 +1359,42 @@ 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__ */ jsx2("span", { children: renderTextWithUnderlines(line.substring(lastEnd, fs), `r${rowIndex}p${idx}`) }, `t${idx}`));
+      if (fs > lastEnd) segs.push(/* @__PURE__ */ jsx4("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__ */ jsx2("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__ */ jsx4("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__ */ jsx2("span", { style: { color: "#ef4444", fontWeight: "bold" }, children: fc }, `v${idx}`));
+        segs.push(/* @__PURE__ */ jsx4("span", { style: { color: "#ef4444", fontWeight: "bold" }, children: fc }, `v${idx}`));
+      } else if (field.is_highlighted) {
+        segs.push(/* @__PURE__ */ jsx4("span", { style: { color: "var(--gs-white, #FFFFFF)" }, children: fc }, `h${idx}`));
       } else {
-        segs.push(/* @__PURE__ */ jsx2("span", { style: { color: "var(--gs-white, #FFFFFF)" }, children: fc }, `h${idx}`));
+        segs.push(/* @__PURE__ */ jsx4("span", { children: fc }, `h${idx}`));
       }
       lastEnd = fe;
     });
-    if (lastEnd < line.length) segs.push(/* @__PURE__ */ jsx2("span", { children: renderTextWithUnderlines(line.substring(lastEnd), `r${rowIndex}e`) }, "te"));
-    return /* @__PURE__ */ jsx2(Fragment, { children: segs });
-  }, [renderTextWithUnderlines, screenData?.cols, profile.defaultCols]);
+    if (lastEnd < line.length) segs.push(/* @__PURE__ */ jsx4("span", { children: line.substring(lastEnd) }, "te"));
+    return /* @__PURE__ */ jsx4(Fragment, { children: segs });
+  }, [renderTextWithUnderlines, screenData?.cols, profile.defaultCols, showSignInHint]);
   const renderScreen = () => {
     if (showBootLoader && !screenData?.content) {
       if (bootLoader === false) return null;
-      if (bootLoader) return /* @__PURE__ */ jsx2(Fragment, { children: bootLoader });
-      return /* @__PURE__ */ jsx2(TerminalBootLoader, { brandText: profile.bootText });
+      if (bootLoader) return /* @__PURE__ */ jsx4(Fragment, { children: bootLoader });
+      return /* @__PURE__ */ jsx4(TerminalBootLoader, { brandText: profile.bootText });
     }
-    if (bootFadingOut && screenData?.content) return /* @__PURE__ */ jsx2("div", { className: "gs-fade-in", children: renderScreenContent() });
+    if (bootFadingOut && screenData?.content) return /* @__PURE__ */ jsx4("div", { className: "gs-fade-in", children: renderScreenContent() });
     if (!screenData?.content) {
       if (inlineSignIn && !connStatus?.connected) {
-        return /* @__PURE__ */ jsx2("div", { style: { width: `${screenData?.cols || profile.defaultCols}ch`, height: `${(screenData?.rows || profile.defaultRows) * 21}px`, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx2(InlineSignIn, { defaultProtocol: signInDefaultProtocol || protocol || "tn5250", loading: reconnecting, error: connectError, onConnect: handleSignIn }) });
+        return /* @__PURE__ */ jsx4("div", { style: { width: "100%", height: `${(screenData?.rows || profile.defaultRows) * 21}px`, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx4(InlineSignIn, { defaultProtocol: signInDefaultProtocol || protocol || "tn5250", loading: connecting || reconnecting, error: signInError || connectError, onConnect: handleSignIn }) });
       }
-      return /* @__PURE__ */ jsx2("div", { style: { width: `${screenData?.cols || profile.defaultCols}ch`, height: `${(screenData?.rows || profile.defaultRows) * 21}px`, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center" }, children: [
-        /* @__PURE__ */ jsx2("div", { style: { color: "#808080", marginBottom: "12px" }, children: /* @__PURE__ */ jsx2(TerminalIcon, { size: 40 }) }),
-        /* @__PURE__ */ jsx2("p", { style: { fontFamily: "var(--gs-font)", fontSize: "12px", color: "#808080" }, children: connStatus?.connected ? "Waiting for screen data..." : "Not connected" })
+      return /* @__PURE__ */ jsx4("div", { style: { width: `${screenData?.cols || profile.defaultCols}ch`, height: `${(screenData?.rows || profile.defaultRows) * 21}px`, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs4("div", { style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx4("div", { style: { color: "#808080", marginBottom: "12px" }, children: /* @__PURE__ */ jsx4(TerminalIcon, { size: 40 }) }),
+        /* @__PURE__ */ jsx4("p", { style: { fontFamily: "var(--gs-font)", fontSize: "12px", color: "#808080" }, children: connStatus?.connected ? "Waiting for screen data..." : "Not connected" }),
+        !connStatus?.connected && isUsingDefaultAdapter && /* @__PURE__ */ jsxs4("p", { style: { fontFamily: "var(--gs-font)", fontSize: "11px", color: "#606060", marginTop: "8px" }, children: [
+          "Start the proxy: ",
+          /* @__PURE__ */ jsx4("code", { style: { color: "#10b981" }, children: "npx green-screen-proxy --mock" })
+        ] })
       ] }) });
     }
     return renderScreenContent();
@@ -1005,9 +1409,8 @@ 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);
-    return /* @__PURE__ */ jsxs2("div", { style: { fontFamily: "var(--gs-font)", fontSize: "13px", position: "relative", width: `${cols}ch` }, children: [
+    const hasCursor = screenData.cursor_row !== void 0 && screenData.cursor_col !== void 0;
+    return /* @__PURE__ */ jsxs4("div", { style: { fontFamily: "var(--gs-font)", fontSize: "13px", position: "relative", width: `${cols}ch` }, children: [
       rows.map((line, index) => {
         let displayLine = line;
         if (hasCursor && index === cursor.row && inputText && !animatedCursorPos) {
@@ -1015,12 +1418,13 @@ function GreenScreenTerminal({
           displayLine = (line.substring(0, baseCol) + inputText + line.substring(baseCol + inputText.length)).substring(0, cols).padEnd(cols, " ");
         }
         const headerSegments = index === 0 ? profile.colors.parseHeaderRow(displayLine) : null;
-        return /* @__PURE__ */ jsxs2("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__ */ jsx2("span", { className: seg.colorClass, children: seg.text }, i)) : renderRowWithFields(displayLine, index, fields),
-          hasCursor && index === cursor.row && /* @__PURE__ */ jsx2("span", { className: "gs-cursor", style: { position: "absolute", left: `${cursor.col}ch`, width: "1ch", height: `${ROW_HEIGHT}px`, top: 0, pointerEvents: "none" } })
+        return /* @__PURE__ */ jsxs4("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__ */ jsx4("span", { className: seg.colorClass, children: seg.text }, i)) : renderRowWithFields(displayLine, index, fields),
+          hasCursor && !showSignInHint && index === cursor.row && /* @__PURE__ */ jsx4("span", { className: "gs-cursor", style: { position: "absolute", left: `${cursor.col}ch`, width: "1ch", height: `${ROW_HEIGHT}px`, top: 0, pointerEvents: "none" } })
         ] }, index);
       }),
-      screenData.cursor_row !== void 0 && screenData.cursor_col !== void 0 && /* @__PURE__ */ jsxs2("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: [
+      showSignInHint && /* @__PURE__ */ jsx4("div", { className: "gs-signin-hint", children: "Signed in \u2014 press Enter to continue" }),
+      screenData.cursor_row !== void 0 && screenData.cursor_col !== void 0 && /* @__PURE__ */ jsxs4("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"),
         "/",
         String(screenData.cursor_col + 1).padStart(3, "0")
@@ -1050,49 +1454,49 @@ function GreenScreenTerminal({
         return "#64748b";
     }
   };
-  return /* @__PURE__ */ jsxs2("div", { className: `gs-terminal ${isFocused ? "gs-terminal-focused" : ""} ${className || ""}`, style, children: [
-    showHeader && /* @__PURE__ */ jsx2("div", { className: "gs-header", children: embedded ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsxs2("span", { className: "gs-header-left", children: [
-        /* @__PURE__ */ jsx2(TerminalIcon, { size: 14 }),
-        /* @__PURE__ */ jsx2("span", { children: "TERMINAL" }),
-        isFocused && /* @__PURE__ */ jsx2("span", { className: "gs-badge-focused", children: "FOCUSED" }),
-        screenData?.timestamp && /* @__PURE__ */ jsx2("span", { className: "gs-timestamp", children: new Date(screenData.timestamp).toLocaleTimeString() }),
-        /* @__PURE__ */ jsx2("span", { className: "gs-hint", children: readOnly ? "Read-only" : isFocused ? "ESC to exit focus" : "Click to control" })
+  return /* @__PURE__ */ jsxs4("div", { className: `gs-terminal ${isFocused ? "gs-terminal-focused" : ""} ${className || ""}`, style, children: [
+    showHeader && /* @__PURE__ */ jsx4("div", { className: "gs-header", children: embedded ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsxs4("span", { className: "gs-header-left", children: [
+        /* @__PURE__ */ jsx4(TerminalIcon, { size: 14 }),
+        /* @__PURE__ */ jsx4("span", { children: "TERMINAL" }),
+        isFocused && /* @__PURE__ */ jsx4("span", { className: "gs-badge-focused", children: "FOCUSED" }),
+        screenData?.timestamp && /* @__PURE__ */ jsx4("span", { className: "gs-timestamp", children: new Date(screenData.timestamp).toLocaleTimeString() }),
+        /* @__PURE__ */ jsx4("span", { className: "gs-hint", children: readOnly ? "Read-only" : isFocused ? "ESC to exit focus" : "Click to control" })
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "gs-header-right", children: [
-        connStatus?.status && /* @__PURE__ */ jsx2(KeyIcon, { size: 12, style: { color: getStatusColor(connStatus.status) } }),
-        connStatus && (connStatus.connected ? /* @__PURE__ */ jsx2(WifiIcon, { size: 12, style: { color: "var(--gs-green, #10b981)" } }) : /* @__PURE__ */ jsx2(WifiOffIcon, { size: 12, style: { color: "#FF6B00" } })),
-        onMinimize && /* @__PURE__ */ jsx2("button", { onClick: (e) => {
+      /* @__PURE__ */ jsxs4("div", { className: "gs-header-right", children: [
+        connStatus?.status && /* @__PURE__ */ jsx4(KeyIcon, { size: 12, style: { color: getStatusColor(connStatus.status) } }),
+        connStatus && (connStatus.connected ? /* @__PURE__ */ jsx4(WifiIcon, { size: 12, style: { color: "var(--gs-green, #10b981)" } }) : /* @__PURE__ */ jsx4(WifiOffIcon, { size: 12, style: { color: "#FF6B00" } })),
+        onMinimize && /* @__PURE__ */ jsx4("button", { onClick: (e) => {
           e.stopPropagation();
           onMinimize();
-        }, className: "gs-btn-icon", title: "Minimize terminal", children: /* @__PURE__ */ jsx2(MinimizeIcon, {}) }),
+        }, className: "gs-btn-icon", title: "Minimize terminal", children: /* @__PURE__ */ jsx4(MinimizeIcon, {}) }),
         headerRight
       ] })
-    ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsxs2("span", { className: "gs-header-left", children: [
-        /* @__PURE__ */ jsx2(TerminalIcon, { size: 14 }),
-        /* @__PURE__ */ jsx2("span", { children: profile.headerLabel }),
-        isFocused && /* @__PURE__ */ jsx2("span", { className: "gs-badge-focused", children: "FOCUSED" }),
-        screenData?.timestamp && /* @__PURE__ */ jsx2("span", { className: "gs-timestamp", children: new Date(screenData.timestamp).toLocaleTimeString() }),
-        /* @__PURE__ */ jsx2("span", { className: "gs-hint", children: readOnly ? "Read-only mode" : isFocused ? "ESC to exit focus" : "Click terminal to control" })
+    ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsxs4("span", { className: "gs-header-left", children: [
+        /* @__PURE__ */ jsx4(TerminalIcon, { size: 14 }),
+        /* @__PURE__ */ jsx4("span", { children: profile.headerLabel }),
+        isFocused && /* @__PURE__ */ jsx4("span", { className: "gs-badge-focused", children: "FOCUSED" }),
+        screenData?.timestamp && /* @__PURE__ */ jsx4("span", { className: "gs-timestamp", children: new Date(screenData.timestamp).toLocaleTimeString() }),
+        /* @__PURE__ */ jsx4("span", { className: "gs-hint", children: readOnly ? "Read-only mode" : isFocused ? "ESC to exit focus" : "Click terminal to control" })
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "gs-header-right", children: [
-        connStatus && /* @__PURE__ */ jsx2("div", { className: "gs-status-group", children: connStatus.connected ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2(WifiIcon, { size: 12, style: { color: "var(--gs-green, #10b981)" } }),
-          /* @__PURE__ */ jsx2("span", { className: "gs-host", children: connStatus.host })
-        ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2(WifiOffIcon, { size: 12, style: { color: "#FF6B00" } }),
-          /* @__PURE__ */ jsx2("span", { className: "gs-disconnected-text", children: isAutoReconnecting || reconnecting ? `RECONNECTING${autoReconnectAttempt > 0 ? ` (${autoReconnectAttempt}/${maxAttempts})` : "..."}` : autoReconnectAttempt >= maxAttempts ? "DISCONNECTED (auto-retry exhausted)" : "DISCONNECTED" }),
-          /* @__PURE__ */ jsx2("button", { onClick: handleReconnect, disabled: reconnecting || isAutoReconnecting, className: "gs-btn-icon", title: "Reconnect", children: /* @__PURE__ */ jsx2(RefreshIcon, { size: 12, className: reconnecting || isAutoReconnecting ? "gs-spin" : "" }) })
+      /* @__PURE__ */ jsxs4("div", { className: "gs-header-right", children: [
+        connStatus && /* @__PURE__ */ jsx4("div", { className: "gs-status-group", children: connStatus.connected ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx4(WifiIcon, { size: 12, style: { color: "var(--gs-green, #10b981)" } }),
+          /* @__PURE__ */ jsx4("span", { className: "gs-host", children: connStatus.host })
+        ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx4(WifiOffIcon, { size: 12, style: { color: "#FF6B00" } }),
+          /* @__PURE__ */ jsx4("span", { className: "gs-disconnected-text", children: isAutoReconnecting || reconnecting ? `RECONNECTING${autoReconnectAttempt > 0 ? ` (${autoReconnectAttempt}/${maxAttempts})` : "..."}` : autoReconnectAttempt >= maxAttempts ? "DISCONNECTED (auto-retry exhausted)" : "DISCONNECTED" }),
+          /* @__PURE__ */ jsx4("button", { onClick: handleReconnect, disabled: reconnecting || isAutoReconnecting, className: "gs-btn-icon", title: "Reconnect", children: /* @__PURE__ */ jsx4(RefreshIcon, { size: 12, className: reconnecting || isAutoReconnecting ? "gs-spin" : "" }) })
         ] }) }),
-        connStatus?.status && /* @__PURE__ */ jsxs2("div", { className: "gs-status-group", children: [
-          /* @__PURE__ */ jsx2(KeyIcon, { size: 12, style: { color: getStatusColor(connStatus.status) } }),
-          connStatus.username && /* @__PURE__ */ jsx2("span", { className: "gs-host", children: connStatus.username })
+        connStatus?.status && /* @__PURE__ */ jsxs4("div", { className: "gs-status-group", children: [
+          /* @__PURE__ */ jsx4(KeyIcon, { size: 12, style: { color: getStatusColor(connStatus.status) } }),
+          connStatus.username && /* @__PURE__ */ jsx4("span", { className: "gs-host", children: connStatus.username })
         ] }),
         headerRight
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx2("div", { className: "gs-body", children: /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsx4("div", { className: "gs-body", children: /* @__PURE__ */ jsxs4(
       "div",
       {
         ref: terminalRef,
@@ -1100,17 +1504,17 @@ function GreenScreenTerminal({
         className: `gs-screen ${embedded ? "gs-screen-embedded" : ""}`,
         style: !embedded ? { width: `calc(${screenData?.cols || profile.defaultCols}ch + 24px)`, fontSize: (screenData?.cols ?? profile.defaultCols) > 80 ? "11px" : "13px", fontFamily: "var(--gs-font)" } : void 0,
         children: [
-          screenError != null && /* @__PURE__ */ jsxs2("div", { className: "gs-error-banner", children: [
-            /* @__PURE__ */ jsx2(AlertTriangleIcon, { size: 14 }),
-            /* @__PURE__ */ jsx2("span", { children: String(screenError) })
+          screenError != null && /* @__PURE__ */ jsxs4("div", { className: "gs-error-banner", children: [
+            /* @__PURE__ */ jsx4(AlertTriangleIcon, { size: 14 }),
+            /* @__PURE__ */ jsx4("span", { children: String(screenError) })
           ] }),
-          /* @__PURE__ */ jsx2("div", { className: "gs-screen-content", children: renderScreen() }),
+          /* @__PURE__ */ jsx4("div", { className: "gs-screen-content", children: renderScreen() }),
           overlay,
-          connStatus && !connStatus.connected && screenData && /* @__PURE__ */ jsxs2("div", { className: "gs-overlay", children: [
-            /* @__PURE__ */ jsx2(WifiOffIcon, { size: 28 }),
-            /* @__PURE__ */ jsx2("span", { children: isAutoReconnecting || reconnecting ? "Reconnecting..." : "Disconnected" })
+          connStatus && !connStatus.connected && screenData && /* @__PURE__ */ jsxs4("div", { className: "gs-overlay", children: [
+            /* @__PURE__ */ jsx4(WifiOffIcon, { size: 28 }),
+            /* @__PURE__ */ jsx4("span", { children: isAutoReconnecting || reconnecting ? "Reconnecting..." : "Disconnected" })
           ] }),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx4(
             "input",
             {
               ref: inputRef,
@@ -1130,66 +1534,6 @@ function GreenScreenTerminal({
     ) })
   ] });
 }
-var TN5250Terminal = GreenScreenTerminal;
-
-// src/adapters/RestAdapter.ts
-var RestAdapter = class {
-  constructor(options) {
-    this.baseUrl = options.baseUrl.replace(/\/+$/, "");
-    this.staticHeaders = options.headers || {};
-    this.getHeaders = options.getHeaders;
-  }
-  async buildHeaders() {
-    const dynamic = this.getHeaders ? await this.getHeaders() : {};
-    return {
-      "Content-Type": "application/json",
-      ...this.staticHeaders,
-      ...dynamic
-    };
-  }
-  async request(method, path, body) {
-    const headers = await this.buildHeaders();
-    const response = await fetch(`${this.baseUrl}${path}`, {
-      method,
-      headers,
-      body: body ? JSON.stringify(body) : void 0
-    });
-    if (!response.ok) {
-      const detail = await response.json().catch(() => ({}));
-      throw new Error(detail?.detail || `HTTP ${response.status}`);
-    }
-    return response.json();
-  }
-  async getScreen() {
-    try {
-      return await this.request("GET", "/screen");
-    } catch (e) {
-      const message = e instanceof Error ? e.message : String(e);
-      if (message.includes("503") || message.includes("404")) {
-        return null;
-      }
-      throw e;
-    }
-  }
-  async getStatus() {
-    return this.request("GET", "/status");
-  }
-  async sendText(text) {
-    return this.request("POST", "/send-text", { text });
-  }
-  async sendKey(key) {
-    return this.request("POST", "/send-key", { key });
-  }
-  async connect(config) {
-    return this.request("POST", "/connect", config);
-  }
-  async disconnect() {
-    return this.request("POST", "/disconnect");
-  }
-  async reconnect() {
-    return this.request("POST", "/reconnect");
-  }
-};
 
 // src/utils/rendering.ts
 function getRowColorClass(rowIndex, rowContent) {
@@ -1199,10 +1543,18 @@ function parseHeaderRow(line) {
   return getProtocolProfile("tn5250").colors.parseHeaderRow(line);
 }
 export {
+  AlertTriangleIcon,
   GreenScreenTerminal,
+  InlineSignIn,
+  KeyIcon,
+  MinimizeIcon,
+  RefreshIcon,
   RestAdapter,
-  TN5250Terminal,
   TerminalBootLoader,
+  TerminalIcon,
+  WebSocketAdapter,
+  WifiIcon,
+  WifiOffIcon,
   getProtocolProfile,
   getRowColorClass,
   hp6530Profile,
@@ -1211,9 +1563,6 @@ export {
   positionToRowCol,
   tn3270Profile,
   tn5250Profile,
-  useTN5250Connection,
-  useTN5250Screen,
-  useTN5250Terminal,
   useTerminalConnection,
   useTerminalInput,
   useTerminalScreen,