green-screen-react 1.0.2 → 1.1.0

package/dist/index.mjs

@@ -49,6 +49,9 @@ var RestAdapter = class {
   async sendKey(key) {
     return this.request("POST", "/send-key", { key });
   }
+  async setCursor(row, col) {
+    return this.request("POST", "/set-cursor", { row, col });
+  }
   async connect(config) {
     return this.request("POST", "/connect", config);
   }
@@ -117,6 +120,9 @@ var WebSocketAdapter = class _WebSocketAdapter {
   async sendKey(key) {
     return this.sendAndWaitForScreen({ type: "key", key });
   }
+  async setCursor(row, col) {
+    return this.sendAndWaitForScreen({ type: "setCursor", row, col });
+  }
   async connect(config) {
     await this.ensureWebSocket();
     if (!config) {
@@ -137,7 +143,8 @@ var WebSocketAdapter = class _WebSocketAdapter {
         port: config.port,
         protocol: config.protocol,
         username: config.username,
-        password: config.password
+        password: config.password,
+        terminalType: config.terminalType
       });
     });
   }
@@ -216,6 +223,19 @@ var WebSocketAdapter = class _WebSocketAdapter {
         }
         break;
       }
+      case "cursor": {
+        if (this.pendingScreenResolver) {
+          const resolver = this.pendingScreenResolver;
+          this.pendingScreenResolver = null;
+          resolver({
+            cursor_row: msg.data.cursor_row,
+            cursor_col: msg.data.cursor_col,
+            content: this.screen?.content ?? "",
+            screen_signature: this.screen?.screen_signature ?? ""
+          });
+        }
+        break;
+      }
       case "status":
         this.status = msg.data;
         for (const listener of this.statusListeners) listener(msg.data);
@@ -886,6 +906,11 @@ var RefreshIcon = ({ size = 12, className }) => /* @__PURE__ */ jsxs2("svg", { w
   /* @__PURE__ */ jsx2("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })
 ] });
 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 HelpIcon = ({ 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("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx2("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+  /* @__PURE__ */ jsx2("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+] });
 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
@@ -897,12 +922,26 @@ var PROTOCOL_OPTIONS = [
   { value: "vt", label: "VT220" },
   { value: "hp6530", label: "HP 6530 (NonStop)" }
 ];
+var TERMINAL_TYPE_OPTIONS = {
+  tn5250: [
+    { value: "IBM-3179-2", label: "24 \xD7 80 (Standard)" },
+    { value: "IBM-3477-FC", label: "27 \xD7 132 (Wide)" }
+  ],
+  tn3270: [
+    { value: "IBM-3278-2", label: "24 \xD7 80 (Model 2)" },
+    { value: "IBM-3278-3", label: "32 \xD7 80 (Model 3)" },
+    { value: "IBM-3278-4", label: "43 \xD7 80 (Model 4)" },
+    { value: "IBM-3278-5", label: "27 \xD7 132 (Model 5)" }
+  ]
+};
 function InlineSignIn({ defaultProtocol, loading: externalLoading, error, onConnect }) {
   const [host, setHost] = useState4("");
   const [port, setPort] = useState4("");
   const [selectedProtocol, setSelectedProtocol] = useState4(defaultProtocol);
+  const [terminalType, setTerminalType] = useState4("");
   const [username, setUsername] = useState4("");
   const [password, setPassword] = useState4("");
+  const termTypeOptions = TERMINAL_TYPE_OPTIONS[selectedProtocol];
   const [submitted, setSubmitted] = useState4(false);
   const loading = externalLoading || submitted;
   const handleSubmit = (e) => {
@@ -913,7 +952,8 @@ function InlineSignIn({ defaultProtocol, loading: externalLoading, error, onConn
       port: port ? parseInt(port, 10) : 23,
       protocol: selectedProtocol,
       ...username.trim() ? { username: username.trim() } : {},
-      ...password ? { password } : {}
+      ...password ? { password } : {},
+      ...terminalType ? { terminalType } : {}
     });
   };
   const inputStyle = {
@@ -969,7 +1009,14 @@ function InlineSignIn({ defaultProtocol, loading: externalLoading, error, onConn
         "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__ */ jsx3("select", { style: { ...inputStyle, appearance: "none" }, value: selectedProtocol, onChange: (e) => {
+        setSelectedProtocol(e.target.value);
+        setTerminalType("");
+      }, children: PROTOCOL_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value)) })
+    ] }),
+    termTypeOptions && termTypeOptions.length > 1 && /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx3("label", { style: labelStyle, children: "Screen Size" }),
+      /* @__PURE__ */ jsx3("select", { style: { ...inputStyle, appearance: "none" }, value: terminalType || termTypeOptions[0].value, onChange: (e) => setTerminalType(e.target.value), children: termTypeOptions.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value)) })
     ] }),
     /* @__PURE__ */ jsxs3("div", { children: [
       /* @__PURE__ */ jsx3("label", { style: labelStyle, children: "Username" }),
@@ -995,6 +1042,7 @@ var noopAdapter = {
   getStatus: async () => ({ connected: false, status: "disconnected" }),
   sendText: async () => noopResult,
   sendKey: async () => noopResult,
+  setCursor: async () => noopResult,
   connect: async () => noopResult,
   disconnect: async () => noopResult,
   reconnect: async () => noopResult
@@ -1013,7 +1061,7 @@ function GreenScreenTerminal({
   maxReconnectAttempts: maxAttempts = 5,
   embedded = false,
   showHeader = true,
-  typingAnimation = true,
+  typingAnimation = false,
   typingBudgetMs = 60,
   inlineSignIn = true,
   defaultProtocol: signInDefaultProtocol,
@@ -1069,9 +1117,18 @@ function GreenScreenTerminal({
   }, [screenData, onScreenChange]);
   const sendText = useCallback3(async (text) => _sendText(text), [_sendText]);
   const sendKey = useCallback3(async (key) => _sendKey(key), [_sendKey]);
+  const [optimisticEdits, setOptimisticEdits] = useState5([]);
+  const prevScreenSigForEdits = useRef4(void 0);
+  useEffect4(() => {
+    if (rawScreenData?.screen_signature && rawScreenData.screen_signature !== prevScreenSigForEdits.current) {
+      prevScreenSigForEdits.current = rawScreenData.screen_signature;
+      setOptimisticEdits([]);
+    }
+  }, [rawScreenData?.screen_signature]);
   const [inputText, setInputText] = useState5("");
   const [isFocused, setIsFocused] = useState5(false);
   const [showSignInHint, setShowSignInHint] = useState5(false);
+  const [showShortcuts, setShowShortcuts] = useState5(false);
   const prevAutoSignedIn = useRef4(false);
   useEffect4(() => {
     if (autoSignedIn && !prevAutoSignedIn.current) setShowSignInHint(true);
@@ -1214,11 +1271,38 @@ function GreenScreenTerminal({
       inputRef.current?.blur();
     }
   }, [readOnly, isFocused]);
-  const handleTerminalClick = useCallback3(() => {
+  const screenContentRef = useRef4(null);
+  const charWidthRef = useRef4(0);
+  const handleTerminalClick = useCallback3((e) => {
     if (readOnly) return;
     setIsFocused(true);
     inputRef.current?.focus();
-  }, [readOnly]);
+    const contentEl = screenContentRef.current;
+    if (!contentEl || !screenData?.fields) return;
+    if (!charWidthRef.current) {
+      const span = document.createElement("span");
+      span.style.cssText = "position:absolute;visibility:hidden;font:inherit;white-space:pre";
+      span.textContent = "X";
+      contentEl.appendChild(span);
+      charWidthRef.current = span.getBoundingClientRect().width;
+      contentEl.removeChild(span);
+    }
+    const rect = contentEl.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const ROW_HEIGHT = 21;
+    const charWidth = charWidthRef.current;
+    if (!charWidth) return;
+    const clickedRow = Math.floor(y / ROW_HEIGHT);
+    const clickedCol = Math.floor(x / charWidth);
+    if (clickedRow < 0 || clickedRow >= (screenData.rows || 24) || clickedCol < 0 || clickedCol >= (screenData.cols || 80)) return;
+    setSyncedCursor({ row: clickedRow, col: clickedCol });
+    adapter.setCursor?.(clickedRow, clickedCol).then((r) => {
+      if (r?.cursor_row !== void 0) {
+        setSyncedCursor({ row: r.cursor_row, col: r.cursor_col });
+      }
+    });
+  }, [readOnly, screenData, adapter]);
   const getCurrentField = useCallback3(() => {
     const fields = screenData?.fields || [];
     const cursorRow = syncedCursor?.row ?? screenData?.cursor_row ?? 0;
@@ -1228,12 +1312,6 @@ function GreenScreenTerminal({
     }
     return null;
   }, [screenData, syncedCursor]);
-  const canTypeMore = useCallback3((additionalChars = 1) => {
-    const currentField = getCurrentField();
-    if (!currentField) return true;
-    const cursorCol = (syncedCursor?.col ?? screenData?.cursor_col ?? 0) + inputText.length;
-    return cursorCol + additionalChars <= currentField.col + currentField.length;
-  }, [getCurrentField, syncedCursor, screenData, inputText]);
   const handleKeyDown = async (e) => {
     if (readOnly) {
       e.preventDefault();
@@ -1245,19 +1323,22 @@ function GreenScreenTerminal({
       inputRef.current?.blur();
       return;
     }
-    if (e.key === "Backspace") {
+    if (e.ctrlKey && e.key === "r") {
       e.preventDefault();
-      if (inputText.length > 0) {
-        setInputText((prev) => prev.slice(0, -1));
-      } else {
-        const keyResult = await sendKey("BACKSPACE");
-        if (keyResult.cursor_row !== void 0) setSyncedCursor({ row: keyResult.cursor_row, col: keyResult.cursor_col });
-      }
+      const kr = await sendKey("RESET");
+      if (kr.cursor_row !== void 0) setSyncedCursor({ row: kr.cursor_row, col: kr.cursor_col });
+      return;
+    }
+    if (e.ctrlKey && e.key === "Enter") {
+      e.preventDefault();
+      const kr = await sendKey("FIELD_EXIT");
+      if (kr.cursor_row !== void 0) setSyncedCursor({ row: kr.cursor_row, col: kr.cursor_col });
       return;
     }
     const keyMap = {
       Enter: "ENTER",
       Tab: "TAB",
+      Backspace: "BACKSPACE",
       Delete: "DELETE",
       ArrowUp: "UP",
       ArrowDown: "DOWN",
@@ -1273,11 +1354,6 @@ function GreenScreenTerminal({
       e.preventDefault();
       const fKey = e.key.toUpperCase();
       if (/^F([1-9]|1[0-9]|2[0-4])$/.test(fKey)) {
-        if (inputText) {
-          const r = await sendText(inputText);
-          setInputText("");
-          if (r.cursor_row !== void 0) setSyncedCursor({ row: r.cursor_row, col: r.cursor_col });
-        }
         const kr = await sendKey(fKey);
         if (kr.cursor_row !== void 0) setSyncedCursor({ row: kr.cursor_row, col: kr.cursor_col });
         return;
@@ -1285,11 +1361,6 @@ function GreenScreenTerminal({
     }
     if (keyMap[e.key]) {
       e.preventDefault();
-      if (inputText) {
-        const r = await sendText(inputText);
-        setInputText("");
-        if (r.cursor_row !== void 0) setSyncedCursor({ row: r.cursor_row, col: r.cursor_col });
-      }
       const kr = await sendKey(keyMap[e.key]);
       if (kr.cursor_row !== void 0) setSyncedCursor({ row: kr.cursor_row, col: kr.cursor_col });
     }
@@ -1300,30 +1371,28 @@ function GreenScreenTerminal({
       return;
     }
     const newText = e.target.value;
-    if (newText.includes("\n")) {
-      const textToSend = newText.replace("\n", "");
-      if (textToSend) {
-        const r = await sendText(textToSend);
-        if (r.cursor_row !== void 0) setSyncedCursor({ row: r.cursor_row, col: r.cursor_col });
+    if (newText.length > inputText.length) {
+      const newChars = newText.substring(inputText.length);
+      const curRow = syncedCursor?.row ?? screenData?.cursor_row ?? 0;
+      const curCol = syncedCursor?.col ?? screenData?.cursor_col ?? 0;
+      const edits = [];
+      for (let i = 0; i < newChars.length; i++) {
+        edits.push({ row: curRow, col: curCol + i, ch: newChars[i] });
       }
-      const kr = await sendKey("ENTER");
-      if (kr.cursor_row !== void 0) setSyncedCursor({ row: kr.cursor_row, col: kr.cursor_col });
-      setInputText("");
-      e.target.value = "";
-    } else {
-      const charsToAdd = newText.length - inputText.length;
-      if (charsToAdd > 0 && !canTypeMore(charsToAdd)) {
-        e.target.value = inputText;
-        return;
-      }
-      setInputText(newText);
+      setOptimisticEdits((prev) => [...prev, ...edits]);
+      setSyncedCursor({ row: curRow, col: curCol + newChars.length });
+      sendText(newChars).then((r) => {
+        if (r.cursor_row !== void 0) setSyncedCursor({ row: r.cursor_row, col: r.cursor_col });
+      });
     }
+    setInputText("");
+    e.target.value = "";
   };
   const termCols = screenData?.cols || profile.defaultCols;
   const getCursorPos = () => {
     if (animatedCursorPos) return animatedCursorPos;
     let cursorRow = syncedCursor?.row ?? screenData?.cursor_row ?? 0;
-    let cursorCol = (syncedCursor?.col ?? screenData?.cursor_col ?? 0) + inputText.length;
+    let cursorCol = syncedCursor?.col ?? screenData?.cursor_col ?? 0;
     while (cursorCol >= termCols) {
       cursorCol -= termCols;
       cursorRow += 1;
@@ -1350,7 +1419,8 @@ function GreenScreenTerminal({
     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];
+    const colorFields = fields.filter((f) => f.row === rowIndex && f.is_protected && f.color && !f.is_highlighted && !f.is_reverse);
+    const allRowFields = [...inputFields, ...highlightedFields, ...reverseFields, ...colorFields];
     if (allRowFields.length === 0) return /* @__PURE__ */ jsx4("span", { children: line });
     const sorted = [...allRowFields].sort((a, b) => a.col - b.col);
     const segs = [];
@@ -1361,12 +1431,15 @@ function GreenScreenTerminal({
       const fe = Math.min(field.col + field.length, cols);
       if (fs > lastEnd) segs.push(/* @__PURE__ */ jsx4("span", { children: line.substring(lastEnd, fs) }, `t${idx}`));
       const fc = line.substring(fs, fe);
+      const colorVar = field.color ? `var(--gs-${field.color}, var(--gs-green))` : void 0;
       if (field.is_input) {
         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}`));
+        segs.push(/* @__PURE__ */ jsx4("span", { className: fieldClass || void 0, style: { display: "inline-block", width: `${fieldWidth}ch`, overflow: "hidden", color: colorVar }, children: fc }, `f${idx}`));
       } else if (field.is_reverse) {
-        segs.push(/* @__PURE__ */ jsx4("span", { style: { color: "#ef4444", fontWeight: "bold" }, children: fc }, `v${idx}`));
+        segs.push(/* @__PURE__ */ jsx4("span", { style: { color: colorVar || "var(--gs-red, #FF5555)", fontWeight: "bold" }, children: fc }, `v${idx}`));
+      } else if (colorVar) {
+        segs.push(/* @__PURE__ */ jsx4("span", { style: { color: colorVar }, children: fc }, `h${idx}`));
       } else if (field.is_highlighted) {
         segs.push(/* @__PURE__ */ jsx4("span", { style: { color: "var(--gs-white, #FFFFFF)" }, children: fc }, `h${idx}`));
       } else {
@@ -1410,17 +1483,24 @@ function GreenScreenTerminal({
     const ROW_HEIGHT = 21;
     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
+    );
     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) {
-          const baseCol = syncedCursor?.col ?? screenData.cursor_col ?? 0;
-          displayLine = (line.substring(0, baseCol) + inputText + line.substring(baseCol + inputText.length)).substring(0, cols).padEnd(cols, " ");
+        const rowEdits = optimisticEdits.filter((e) => e.row === index);
+        if (rowEdits.length > 0) {
+          const chars = displayLine.split("");
+          for (const edit of rowEdits) {
+            if (edit.col >= 0 && edit.col < chars.length) chars[edit.col] = edit.ch;
+          }
+          displayLine = chars.join("");
         }
         const headerSegments = index === 0 ? profile.colors.parseHeaderRow(displayLine) : null;
         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" } })
+          cursorInInputField && !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);
       }),
       showSignInHint && /* @__PURE__ */ jsx4("div", { className: "gs-signin-hint", children: "Signed in \u2014 press Enter to continue" }),
@@ -1461,7 +1541,9 @@ function GreenScreenTerminal({
         /* @__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__ */ jsx4("span", { className: "gs-hint", children: readOnly ? "Read-only" : isFocused ? "ESC to exit focus" : "Click to control" }),
+        screenData?.keyboard_locked && /* @__PURE__ */ jsx4("span", { className: "gs-badge-lock", children: "X II" }),
+        screenData?.insert_mode && /* @__PURE__ */ jsx4("span", { className: "gs-badge-ins", children: "INS" })
       ] }),
       /* @__PURE__ */ jsxs4("div", { className: "gs-header-right", children: [
         connStatus?.status && /* @__PURE__ */ jsx4(KeyIcon, { size: 12, style: { color: getStatusColor(connStatus.status) } }),
@@ -1470,6 +1552,10 @@ function GreenScreenTerminal({
           e.stopPropagation();
           onMinimize();
         }, className: "gs-btn-icon", title: "Minimize terminal", children: /* @__PURE__ */ jsx4(MinimizeIcon, {}) }),
+        /* @__PURE__ */ jsx4("button", { onClick: (e) => {
+          e.stopPropagation();
+          setShowShortcuts((s) => !s);
+        }, className: "gs-btn-icon", title: "Keyboard shortcuts", children: /* @__PURE__ */ jsx4(HelpIcon, { size: 12 }) }),
         headerRight
       ] })
     ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
@@ -1478,7 +1564,9 @@ function GreenScreenTerminal({
         /* @__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__ */ jsx4("span", { className: "gs-hint", children: readOnly ? "Read-only mode" : isFocused ? "ESC to exit focus" : "Click terminal to control" }),
+        screenData?.keyboard_locked && /* @__PURE__ */ jsx4("span", { className: "gs-badge-lock", children: "X II" }),
+        screenData?.insert_mode && /* @__PURE__ */ jsx4("span", { className: "gs-badge-ins", children: "INS" })
       ] }),
       /* @__PURE__ */ jsxs4("div", { className: "gs-header-right", children: [
         connStatus && /* @__PURE__ */ jsx4("div", { className: "gs-status-group", children: connStatus.connected ? /* @__PURE__ */ jsxs4(Fragment, { children: [
@@ -1493,6 +1581,10 @@ function GreenScreenTerminal({
           /* @__PURE__ */ jsx4(KeyIcon, { size: 12, style: { color: getStatusColor(connStatus.status) } }),
           connStatus.username && /* @__PURE__ */ jsx4("span", { className: "gs-host", children: connStatus.username })
         ] }),
+        /* @__PURE__ */ jsx4("button", { onClick: (e) => {
+          e.stopPropagation();
+          setShowShortcuts((s) => !s);
+        }, className: "gs-btn-icon", title: "Keyboard shortcuts", children: /* @__PURE__ */ jsx4(HelpIcon, { size: 12 }) }),
         headerRight
       ] })
     ] }) }),
@@ -1508,8 +1600,44 @@ function GreenScreenTerminal({
             /* @__PURE__ */ jsx4(AlertTriangleIcon, { size: 14 }),
             /* @__PURE__ */ jsx4("span", { children: String(screenError) })
           ] }),
-          /* @__PURE__ */ jsx4("div", { className: "gs-screen-content", children: renderScreen() }),
+          /* @__PURE__ */ jsx4("div", { ref: screenContentRef, className: "gs-screen-content", children: renderScreen() }),
           overlay,
+          showShortcuts && /* @__PURE__ */ jsxs4("div", { className: "gs-shortcuts-panel", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "gs-shortcuts-header", children: [
+              /* @__PURE__ */ jsx4("span", { children: "Keyboard Shortcuts" }),
+              /* @__PURE__ */ jsx4("button", { className: "gs-btn-icon", onClick: () => setShowShortcuts(false), style: { pointerEvents: "auto" }, children: "\xD7" })
+            ] }),
+            /* @__PURE__ */ jsx4("table", { className: "gs-shortcuts-table", children: /* @__PURE__ */ jsxs4("tbody", { children: [
+              /* @__PURE__ */ jsxs4("tr", { children: [
+                /* @__PURE__ */ jsx4("td", { className: "gs-shortcut-key", children: "Ctrl+Enter" }),
+                /* @__PURE__ */ jsx4("td", { children: "Field Exit" })
+              ] }),
+              /* @__PURE__ */ jsxs4("tr", { children: [
+                /* @__PURE__ */ jsx4("td", { className: "gs-shortcut-key", children: "Ctrl+R" }),
+                /* @__PURE__ */ jsx4("td", { children: "Reset" })
+              ] }),
+              /* @__PURE__ */ jsxs4("tr", { children: [
+                /* @__PURE__ */ jsx4("td", { className: "gs-shortcut-key", children: "Insert" }),
+                /* @__PURE__ */ jsx4("td", { children: "Insert / Overwrite" })
+              ] }),
+              /* @__PURE__ */ jsxs4("tr", { children: [
+                /* @__PURE__ */ jsx4("td", { className: "gs-shortcut-key", children: "Page Up" }),
+                /* @__PURE__ */ jsx4("td", { children: "Roll Down" })
+              ] }),
+              /* @__PURE__ */ jsxs4("tr", { children: [
+                /* @__PURE__ */ jsx4("td", { className: "gs-shortcut-key", children: "Page Down" }),
+                /* @__PURE__ */ jsx4("td", { children: "Roll Up" })
+              ] }),
+              /* @__PURE__ */ jsxs4("tr", { children: [
+                /* @__PURE__ */ jsx4("td", { className: "gs-shortcut-key", children: "Click" }),
+                /* @__PURE__ */ jsx4("td", { children: "Focus / Position cursor" })
+              ] }),
+              /* @__PURE__ */ jsxs4("tr", { children: [
+                /* @__PURE__ */ jsx4("td", { className: "gs-shortcut-key", children: "Escape" }),
+                /* @__PURE__ */ jsx4("td", { children: "Exit focus mode" })
+              ] })
+            ] }) })
+          ] }),
           connStatus && !connStatus.connected && screenData && /* @__PURE__ */ jsxs4("div", { className: "gs-overlay", children: [
             /* @__PURE__ */ jsx4(WifiOffIcon, { size: 28 }),
             /* @__PURE__ */ jsx4("span", { children: isAutoReconnecting || reconnecting ? "Reconnecting..." : "Disconnected" })
@@ -1522,7 +1650,7 @@ function GreenScreenTerminal({
               value: inputText,
               onChange: handleInput,
               onKeyDown: handleKeyDown,
-              style: { position: "absolute", opacity: 0, pointerEvents: "none" },
+              style: { position: "absolute", opacity: 0, pointerEvents: "none", fontSize: "13px", lineHeight: "21px", fontFamily: "var(--gs-font)", padding: 0, border: "none", height: "21px" },
               autoComplete: "off",
               autoCorrect: "off",
               autoCapitalize: "off",