green-screen-react 1.1.3 → 1.2.0

package/dist/index.js

@@ -102,6 +102,14 @@ var RestAdapter = class {
   async setCursor(row, col) {
     return this.request("POST", "/set-cursor", { row, col });
   }
+  async readMdt(modifiedOnly = true) {
+    const qs = modifiedOnly ? "" : "?includeUnmodified=1";
+    const resp = await this.request(
+      "GET",
+      `/read-mdt${qs}`
+    );
+    return resp?.fields ?? [];
+  }
   async connect(config) {
     return this.request("POST", "/connect", config);
   }
@@ -122,9 +130,12 @@ var WebSocketAdapter = class _WebSocketAdapter {
     this.status = { connected: false, status: "disconnected" };
     this.pendingScreenResolver = null;
     this.pendingConnectResolver = null;
+    this.pendingMdtResolver = null;
     this.connectingPromise = null;
     this.screenListeners = /* @__PURE__ */ new Set();
     this.statusListeners = /* @__PURE__ */ new Set();
+    this.sessionLostListeners = /* @__PURE__ */ new Set();
+    this.sessionResumedListeners = /* @__PURE__ */ new Set();
     this._sessionId = null;
     this.workerUrl = (options.workerUrl || _WebSocketAdapter.detectEnvUrl() || "http://localhost:3001").replace(/\/+$/, "");
   }
@@ -159,6 +170,22 @@ var WebSocketAdapter = class _WebSocketAdapter {
     this.statusListeners.add(listener);
     return () => this.statusListeners.delete(listener);
   }
+  /**
+   * Subscribe to session-lost notifications. Fires when the proxy detects
+   * that the server-side session has terminated (host TCP drop, idle
+   * timeout, explicit destroy). Integrators use this to prompt a reconnect
+   * or swap to a "session expired" UI without relying on error-string
+   * matching.
+   */
+  onSessionLost(listener) {
+    this.sessionLostListeners.add(listener);
+    return () => this.sessionLostListeners.delete(listener);
+  }
+  /** Subscribe to session-resumed notifications (fires after a successful `reattach`). */
+  onSessionResumed(listener) {
+    this.sessionResumedListeners.add(listener);
+    return () => this.sessionResumedListeners.delete(listener);
+  }
   async getScreen() {
     return this.screen;
   }
@@ -174,6 +201,25 @@ var WebSocketAdapter = class _WebSocketAdapter {
   async setCursor(row, col) {
     return this.sendAndWaitForScreen({ type: "setCursor", row, col });
   }
+  async readMdt(modifiedOnly = true) {
+    await this.ensureWebSocket();
+    return new Promise((resolve) => {
+      if (this.pendingMdtResolver) {
+        const old = this.pendingMdtResolver;
+        this.pendingMdtResolver = null;
+        old([]);
+      }
+      const timeout = setTimeout(() => {
+        this.pendingMdtResolver = null;
+        resolve([]);
+      }, 5e3);
+      this.pendingMdtResolver = (fields) => {
+        clearTimeout(timeout);
+        resolve(fields);
+      };
+      this.wsSend({ type: "readMdt", modifiedOnly });
+    });
+  }
   async connect(config) {
     await this.ensureWebSocket();
     if (!config) {
@@ -287,6 +333,22 @@ var WebSocketAdapter = class _WebSocketAdapter {
         }
         break;
       }
+      case "mdt": {
+        if (this.pendingMdtResolver) {
+          const resolver = this.pendingMdtResolver;
+          this.pendingMdtResolver = null;
+          resolver(msg.data?.fields ?? []);
+        }
+        break;
+      }
+      case "session.lost": {
+        for (const listener of this.sessionLostListeners) listener(msg.sessionId, msg.status);
+        break;
+      }
+      case "session.resumed": {
+        for (const listener of this.sessionResumedListeners) listener(msg.sessionId);
+        break;
+      }
       case "status":
         this.status = msg.data;
         for (const listener of this.statusListeners) listener(msg.data);
@@ -957,10 +1019,15 @@ var RefreshIcon = ({ size = 12, className }) => /* @__PURE__ */ (0, import_jsx_r
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: s, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+var KeyboardIcon = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2", ry: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "6", y1: "10", x2: "6", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "10", y1: "10", x2: "10", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "14", y1: "10", x2: "14", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "18", y1: "10", x2: "18", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "6", y1: "14", x2: "6", y2: "14" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "18", y1: "14", x2: "18", y2: "14" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "10", y1: "14", x2: "14", y2: "14" })
 ] });
 var MinimizeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 14h6v6M3 21l7-7M20 10h-6V4M21 3l-7 7" }) });
 
@@ -1085,8 +1152,201 @@ function InlineSignIn({ defaultProtocol, loading: externalLoading, error, onConn
   ] });
 }
 
+// src/utils/attribute.ts
+function decodeAttrByte(byte) {
+  const type = byte & 7;
+  const colorGroup = byte & 24;
+  const highIntensity = (byte & 2) !== 0;
+  let color = "green";
+  switch (colorGroup) {
+    case 0:
+      color = highIntensity ? "white" : "green";
+      break;
+    case 8:
+      color = "red";
+      break;
+    // red stays red at HI
+    case 16:
+      color = highIntensity ? "yellow" : "turquoise";
+      break;
+    case 24:
+      color = highIntensity ? "blue" : "pink";
+      break;
+  }
+  const nonDisplay = type === 7;
+  const underscore = type === 4 || type === 5 || type === 6;
+  const reverse = type === 5;
+  const columnSeparator = type === 1 || type === 3;
+  const hiTypeBit = type === 2 || type === 3 || type === 6;
+  return {
+    color,
+    highIntensity: highIntensity || hiTypeBit,
+    underscore,
+    reverse,
+    blink: false,
+    // 5250 has no base-attr blink; blink comes from WEA highlight
+    nonDisplay,
+    columnSeparator
+  };
+}
+function decodeExtColor(byte) {
+  switch (byte & 15) {
+    case 0:
+      return "green";
+    case 1:
+      return "blue";
+    case 2:
+      return "red";
+    case 3:
+      return "pink";
+    case 4:
+      return "turquoise";
+    case 5:
+      return "yellow";
+    case 6:
+      return "white";
+    case 7:
+      return void 0;
+    // default — inherit
+    // Reverse-image pairs: distinct tokens so themes can override
+    case 8:
+      return "green";
+    // reverse green → typically same color, background flip
+    case 9:
+      return "blue";
+    case 10:
+      return "red";
+    case 11:
+      return "pink";
+    case 12:
+      return "turquoise";
+    case 13:
+      return "yellow";
+    case 14:
+      return "white";
+    case 15:
+      return void 0;
+    default:
+      return void 0;
+  }
+}
+function extColorIsReverse(byte) {
+  const v = byte & 15;
+  return v >= 8 && v <= 14;
+}
+function decodeExtHighlight(byte) {
+  return {
+    underscore: (byte & 1) !== 0,
+    reverse: (byte & 2) !== 0,
+    blink: (byte & 4) !== 0,
+    columnSeparator: (byte & 8) !== 0
+  };
+}
+function cssVarForColor(color) {
+  if (!color) return "var(--gs-green, #10b981)";
+  return `var(--gs-${color}, var(--gs-green, #10b981))`;
+}
+
+// src/utils/validation.ts
+function filterFieldChar(field, ch, isLastPosition = false) {
+  let out = ch;
+  if (field.monocase) {
+    out = out.toUpperCase();
+  }
+  const cp = out.charCodeAt(0);
+  const isAsciiLetter = cp >= 65 && cp <= 90 || cp >= 97 && cp <= 122;
+  const isAsciiDigit = cp >= 48 && cp <= 57;
+  switch (field.shift_type) {
+    case "alpha_only": {
+      if (isAsciiLetter || out === "," || out === "-" || out === "." || out === " ") return out;
+      return null;
+    }
+    case "numeric_only": {
+      if (isAsciiDigit || out === "-" || out === "+" || out === "," || out === "." || out === " ") return out;
+      return null;
+    }
+    case "digits_only": {
+      if (isAsciiDigit) return out;
+      return null;
+    }
+    case "signed_num": {
+      if (isAsciiDigit) return out;
+      if (isLastPosition && (out === "-" || out === "+")) return out;
+      return null;
+    }
+    case "katakana": {
+      if (cp >= 65377 && cp <= 65439 || isAsciiDigit || out === " ") return out;
+      return null;
+    }
+    case "alpha":
+    case "numeric_shift":
+    case "io":
+    case void 0:
+    default:
+      return out;
+  }
+}
+function filterFieldInput(field, input, startOffset) {
+  let out = "";
+  let rejected = false;
+  for (let i = 0; i < input.length; i++) {
+    const pos = startOffset + i;
+    const isLast = pos === field.length - 1;
+    const transformed = filterFieldChar(field, input[i], isLast);
+    if (transformed === null) {
+      rejected = true;
+    } else {
+      out += transformed;
+    }
+  }
+  return { out, rejected };
+}
+function validateMod10(value) {
+  const digits = value.replace(/\D/g, "");
+  if (digits.length < 2) return true;
+  let sum = 0;
+  let alt = false;
+  for (let i = digits.length - 1; i >= 0; i--) {
+    let d = digits.charCodeAt(i) - 48;
+    if (alt) {
+      d *= 2;
+      if (d > 9) d -= 9;
+    }
+    sum += d;
+    alt = !alt;
+  }
+  return sum % 10 === 0;
+}
+function validateMod11(value) {
+  const digits = value.replace(/\D/g, "");
+  if (digits.length < 2) return true;
+  const body = digits.slice(0, -1);
+  const check = digits.charCodeAt(digits.length - 1) - 48;
+  let sum = 0;
+  let weight = 2;
+  for (let i = body.length - 1; i >= 0; i--) {
+    sum += (body.charCodeAt(i) - 48) * weight;
+    weight++;
+    if (weight > 7) weight = 2;
+  }
+  const remainder = sum % 11;
+  const expected = remainder === 0 ? 0 : 11 - remainder;
+  return expected === check;
+}
+
 // src/components/GreenScreenTerminal.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function aidByteToKeyName(aid) {
+  if (aid === 241) return "ENTER";
+  if (aid === 243) return "HELP";
+  if (aid === 244) return "PAGEUP";
+  if (aid === 245) return "PAGEDOWN";
+  if (aid === 246) return "PRINT";
+  if (aid === 189) return "CLEAR";
+  if (aid >= 49 && aid <= 60) return `F${aid - 48}`;
+  if (aid >= 177 && aid <= 188) return `F${aid - 176 + 12}`;
+  return null;
+}
 var noopResult = { success: false, error: "No adapter configured" };
 var noopAdapter = {
   getScreen: async () => null,
@@ -1117,7 +1377,6 @@ function GreenScreenTerminal({
   inlineSignIn = true,
   defaultProtocol: signInDefaultProtocol,
   onSignIn,
-  autoSignedIn,
   autoFocusDisabled = false,
   bootLoader,
   bootLoaderReady,
@@ -1127,6 +1386,7 @@ function GreenScreenTerminal({
   onNotification,
   onScreenChange,
   onMinimize,
+  showShortcutsButton = true,
   className,
   style
 }) {
@@ -1181,13 +1441,7 @@ function GreenScreenTerminal({
   }, [rawScreenData?.content]);
   const [inputText, setInputText] = (0, import_react5.useState)("");
   const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
-  const [showSignInHint, setShowSignInHint] = (0, import_react5.useState)(false);
   const [showShortcuts, setShowShortcuts] = (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);
@@ -1197,7 +1451,6 @@ function GreenScreenTerminal({
     if (prevRawContentRef.current && newContent && newContent !== prevRawContentRef.current) {
       setSyncedCursor(null);
       setInputText("");
-      if (showSignInHint) setShowSignInHint(false);
     }
     prevRawContentRef.current = newContent;
   }, [rawScreenData?.content]);
@@ -1260,11 +1513,9 @@ function GreenScreenTerminal({
         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);
@@ -1352,13 +1603,25 @@ function GreenScreenTerminal({
     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;
+    const clickedField = screenData.fields.find(
+      (f) => f.row === clickedRow && clickedCol >= f.col && clickedCol < f.col + f.length
+    );
+    const ptrAid = clickedField && clickedField.pointer_aid;
+    if (ptrAid) {
+      const keyName = aidByteToKeyName(ptrAid);
+      if (keyName) {
+        setSyncedCursor({ row: clickedRow, col: clickedCol });
+        adapter.setCursor?.(clickedRow, clickedCol).then(() => sendKey(keyName));
+        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]);
+  }, [readOnly, screenData, adapter, sendKey]);
   const getCurrentField = (0, import_react5.useCallback)(() => {
     const fields = screenData?.fields || [];
     const cursorRow = syncedCursor?.row ?? screenData?.cursor_row ?? 0;
@@ -1368,6 +1631,31 @@ function GreenScreenTerminal({
     }
     return null;
   }, [screenData, syncedCursor]);
+  const readFieldValue = (0, import_react5.useCallback)((field) => {
+    if (!screenData?.content) return "";
+    const lines = screenData.content.split("\n");
+    const line = lines[field.row] || "";
+    return line.substring(field.col, field.col + field.length).replace(/\s+$/, "");
+  }, [screenData?.content]);
+  const [validationError, setValidationError] = (0, import_react5.useState)(null);
+  const runSelfCheck = (0, import_react5.useCallback)(() => {
+    const fields = screenData?.fields || [];
+    for (const f of fields) {
+      if (!f.is_input) continue;
+      const val = readFieldValue(f);
+      if (!val) continue;
+      if (f.self_check_mod10 && !validateMod10(val)) {
+        setValidationError(`Invalid check digit (MOD10) in field at row ${f.row + 1}, col ${f.col + 1}`);
+        return false;
+      }
+      if (f.self_check_mod11 && !validateMod11(val)) {
+        setValidationError(`Invalid check digit (MOD11) in field at row ${f.row + 1}, col ${f.col + 1}`);
+        return false;
+      }
+    }
+    setValidationError(null);
+    return true;
+  }, [screenData?.fields, readFieldValue]);
   const handleKeyDown = async (e) => {
     if (readOnly) {
       e.preventDefault();
@@ -1406,18 +1694,19 @@ function GreenScreenTerminal({
       End: "END",
       Insert: "INSERT"
     };
-    if (e.key.startsWith("F") && e.key.length <= 3) {
+    if (/^F([1-9]|1[0-9]|2[0-4])$/.test(e.key)) {
       e.preventDefault();
-      const fKey = e.key.toUpperCase();
-      if (/^F([1-9]|1[0-9]|2[0-4])$/.test(fKey)) {
-        const kr = await sendKey(fKey);
-        if (kr.cursor_row !== void 0) setSyncedCursor({ row: kr.cursor_row, col: kr.cursor_col });
-        return;
-      }
+      if (!runSelfCheck()) return;
+      const kr = await sendKey(e.key);
+      if (kr.cursor_row !== void 0) setSyncedCursor({ row: kr.cursor_row, col: kr.cursor_col });
+      return;
     }
     if (keyMap[e.key]) {
       e.preventDefault();
-      const kr = await sendKey(keyMap[e.key]);
+      const k = keyMap[e.key];
+      const isSubmit = k === "ENTER" || k === "PAGEUP" || k === "PAGEDOWN";
+      if (isSubmit && !runSelfCheck()) return;
+      const kr = await sendKey(k);
       if (kr.cursor_row !== void 0) setSyncedCursor({ row: kr.cursor_row, col: kr.cursor_col });
     }
   };
@@ -1428,18 +1717,32 @@ function GreenScreenTerminal({
     }
     const newText = e.target.value;
     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] });
+      let newChars = newText.substring(inputText.length);
+      const curField = getCurrentField();
+      if (curField && (curField.shift_type || curField.monocase)) {
+        const curColAbs = syncedCursor?.col ?? screenData?.cursor_col ?? 0;
+        const startOffset = Math.max(0, curColAbs - curField.col);
+        const { out, rejected } = filterFieldInput(curField, newChars, startOffset);
+        if (rejected) {
+          const what = curField.shift_type === "digits_only" || curField.shift_type === "numeric_only" || curField.shift_type === "signed_num" ? "digits only" : curField.shift_type === "alpha_only" ? "letters only" : curField.shift_type === "katakana" ? "katakana only" : "character not allowed";
+          setValidationError(`Field accepts ${what}`);
+          setTimeout(() => setValidationError(null), 1500);
+        }
+        newChars = out;
+      }
+      if (newChars.length > 0) {
+        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] });
+        }
+        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 });
+        });
       }
-      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 = "";
@@ -1471,41 +1774,156 @@ function GreenScreenTerminal({
     if (lastIndex < text.length) segments.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: text.substring(lastIndex) }, `${keyPrefix}-e`));
     return segments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: segments }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: text });
   }, []);
-  const renderRowWithFields = (0, import_react5.useCallback)((line, rowIndex, fields) => {
+  const renderRowWithFields = (0, import_react5.useCallback)((line, rowIndex, fields, cursorRow, cursorCol) => {
     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 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__ */ (0, import_jsx_runtime4.jsx)("span", { children: line });
+    const cols = screenData?.cols || profile.defaultCols;
+    const extAttrs = screenData?.ext_attrs;
+    const dbcsCont = screenData?.dbcs_cont;
+    const dbcsContSet = dbcsCont && dbcsCont.length > 0 ? new Set(dbcsCont) : null;
+    const hasExtOnRow = !!extAttrs && (() => {
+      for (let c = 0; c < cols; c++) {
+        if (extAttrs[rowIndex * cols + c]) return true;
+      }
+      return false;
+    })();
+    const hasDbcsOnRow = !!dbcsContSet && (() => {
+      for (let c = 0; c < cols; c++) {
+        if (dbcsContSet.has(rowIndex * cols + c)) return true;
+      }
+      return false;
+    })();
+    if (allRowFields.length === 0 && !hasExtOnRow && !hasDbcsOnRow) 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;
-    const cols = screenData?.cols || profile.defaultCols;
+    const renderPlainRun = (runStart, runEnd, keyPrefix) => {
+      if (runStart >= runEnd) return;
+      if (!hasExtOnRow && !hasDbcsOnRow) {
+        segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: line.substring(runStart, runEnd) }, keyPrefix));
+        return;
+      }
+      let pos = runStart;
+      while (pos < runEnd) {
+        const addr = rowIndex * cols + pos;
+        const ext = extAttrs?.[addr];
+        const isContCell = dbcsContSet?.has(addr);
+        if (isContCell) {
+          segs.push(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "span",
+              {
+                style: { display: "inline-block", width: "1ch" },
+                "aria-hidden": "true"
+              },
+              `${keyPrefix}-dc${pos}`
+            )
+          );
+          pos++;
+          continue;
+        }
+        if (ext) {
+          const color = ext.color !== void 0 ? decodeExtColor(ext.color) : void 0;
+          const colorReverse = ext.color !== void 0 && extColorIsReverse(ext.color);
+          const hl = ext.highlight !== void 0 ? decodeExtHighlight(ext.highlight) : void 0;
+          const style2 = {};
+          if (color) style2.color = cssVarForColor(color);
+          if (colorReverse) {
+            style2.background = cssVarForColor(color);
+            style2.color = "#000";
+          }
+          if (hl?.reverse) {
+            style2.background = "currentColor";
+            style2.color = "#000";
+          }
+          if (hl?.underscore) style2.textDecoration = "underline";
+          if (hl?.blink) style2.animation = "gs-blink 1s steps(2, start) infinite";
+          segs.push(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: style2, children: line[pos] }, `${keyPrefix}-x${pos}`)
+          );
+          pos++;
+          continue;
+        }
+        let runEndPlain = pos + 1;
+        while (runEndPlain < runEnd) {
+          const a = rowIndex * cols + runEndPlain;
+          if (extAttrs?.[a] || dbcsContSet?.has(a)) break;
+          runEndPlain++;
+        }
+        segs.push(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: line.substring(pos, runEndPlain) }, `${keyPrefix}-p${pos}`)
+        );
+        pos = runEndPlain;
+      }
+    };
     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: line.substring(lastEnd, fs) }, `t${idx}`));
+      if (fs > lastEnd) renderPlainRun(lastEnd, fs, `t${idx}`);
       const fc = line.substring(fs, fe);
-      const colorVar = field.color ? `var(--gs-${field.color}, var(--gs-green))` : void 0;
+      const cursorInField = cursorRow === field.row && cursorCol >= fs && cursorCol < field.col + field.length;
+      const entryAttr = cursorInField && field.highlight_entry_attr !== void 0 ? decodeAttrByte(field.highlight_entry_attr) : null;
+      const baseColor = entryAttr?.color ?? field.color;
+      const colorVar = baseColor ? cssVarForColor(baseColor) : void 0;
+      const fieldStyle = {};
+      if (colorVar) fieldStyle.color = colorVar;
+      if (entryAttr?.reverse) {
+        fieldStyle.background = "currentColor";
+        fieldStyle.color = "#000";
+      }
+      if (entryAttr?.underscore) fieldStyle.textDecoration = "underline";
+      if (entryAttr?.highIntensity) fieldStyle.fontWeight = "bold";
+      const isPassword = field.is_non_display;
+      const displayText = isPassword ? " ".repeat(fc.length) : fc;
       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__ */ (0, import_jsx_runtime4.jsx)("span", { className: fieldClass || void 0, style: { display: "inline-block", width: `${fieldWidth}ch`, overflow: "hidden", color: colorVar }, children: fc }, `f${idx}`));
+        const fieldClass = field.is_underscored ? "gs-input-field" : void 0;
+        const extra = [];
+        if (field.is_dbcs) extra.push("gs-dbcs-field");
+        if (cursorInField) extra.push("gs-field-active");
+        const composedClass = [fieldClass, ...extra].filter(Boolean).join(" ") || void 0;
+        segs.push(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: composedClass,
+              style: {
+                display: "inline-block",
+                width: `${fieldWidth}ch`,
+                overflow: "hidden",
+                ...fieldStyle
+              },
+              children: displayText
+            },
+            `f${idx}`
+          )
+        );
       } else if (field.is_reverse) {
-        segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: colorVar || "var(--gs-red, #FF5555)", fontWeight: "bold" }, children: fc }, `v${idx}`));
-      } else if (colorVar) {
-        segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: colorVar }, children: fc }, `h${idx}`));
+        segs.push(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              style: { color: colorVar || "var(--gs-red, #FF5555)", fontWeight: "bold", ...fieldStyle },
+              children: displayText
+            },
+            `v${idx}`
+          )
+        );
+      } else if (colorVar || entryAttr) {
+        segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: fieldStyle, children: displayText }, `h${idx}`));
       } else if (field.is_highlighted) {
-        segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "var(--gs-white, #FFFFFF)" }, children: fc }, `h${idx}`));
+        segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "var(--gs-white, #FFFFFF)" }, children: displayText }, `h${idx}`));
       } else {
-        segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: fc }, `h${idx}`));
+        segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: displayText }, `h${idx}`));
       }
       lastEnd = fe;
     });
-    if (lastEnd < line.length) segs.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: line.substring(lastEnd) }, "te"));
+    if (lastEnd < line.length) renderPlainRun(lastEnd, line.length, "te");
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: segs });
-  }, [renderTextWithUnderlines, screenData?.cols, profile.defaultCols, showSignInHint]);
+  }, [renderTextWithUnderlines, screenData, profile.defaultCols]);
   const renderScreen = () => {
     if (showBootLoader && !screenData?.content) {
       if (bootLoader === false) return null;
@@ -1522,7 +1940,7 @@ function GreenScreenTerminal({
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { fontFamily: "var(--gs-font)", fontSize: "12px", color: connStatus?.status === "connecting" ? "#f59e0b" : connStatus?.status === "loading" ? "#94a3b8" : "#808080" }, children: connStatus?.connected ? "Waiting for screen data..." : connStatus?.status === "connecting" ? "Connecting..." : connStatus?.status === "loading" ? "Loading..." : "Not connected" }),
         !connStatus?.connected && isUsingDefaultAdapter && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { style: { fontFamily: "var(--gs-font)", fontSize: "11px", color: "#606060", marginTop: "8px" }, children: [
           "Start the proxy: ",
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { color: "#10b981" }, children: "npx green-screen-proxy --mock" })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: { color: "#10b981" }, children: "npx green-screen-proxy" })
         ] })
       ] }) });
     }
@@ -1555,11 +1973,33 @@ 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),
-          cursorInInputField && !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" } })
+          headerSegments ? headerSegments.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: seg.colorClass, children: seg.text }, i)) : renderRowWithFields(displayLine, index, fields, cursor.row, cursor.col),
+          cursorInInputField && 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" }),
+      validationError && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          role: "alert",
+          style: {
+            position: "absolute",
+            left: 0,
+            right: 0,
+            bottom: 0,
+            padding: "2px 6px",
+            background: "var(--gs-red, #FF5555)",
+            color: "#000",
+            fontFamily: "var(--gs-font)",
+            fontSize: "12px",
+            zIndex: 10
+          },
+          onClick: () => setValidationError(null),
+          children: [
+            validationError,
+            " \u2014 click to dismiss"
+          ]
+        }
+      ),
       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"),
         "/",
@@ -1590,6 +2030,15 @@ function GreenScreenTerminal({
         return "#64748b";
     }
   };
+  const handleShortcutSend = (0, import_react5.useCallback)(async (key) => {
+    if (readOnly) return;
+    const isSubmit = key === "ENTER" || key === "PAGEUP" || key === "PAGEDOWN" || /^F([1-9]|1[0-9]|2[0-4])$/.test(key);
+    if (isSubmit && !runSelfCheck()) return;
+    setIsFocused(true);
+    inputRef.current?.focus();
+    const kr = await sendKey(key);
+    if (kr.cursor_row !== void 0) setSyncedCursor({ row: kr.cursor_row, col: kr.cursor_col });
+  }, [readOnly, runSelfCheck, sendKey]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `gs-terminal ${isFocused ? "gs-terminal-focused" : ""} ${className || ""}`, style, children: [
     showHeader && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "gs-header", children: embedded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "gs-header-left", children: [
@@ -1609,10 +2058,10 @@ function GreenScreenTerminal({
           e.stopPropagation();
           onMinimize();
         }, className: "gs-btn-icon", title: "Minimize terminal", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MinimizeIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: (e) => {
+        showShortcutsButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: (e) => {
           e.stopPropagation();
           setShowShortcuts((s) => !s);
-        }, className: "gs-btn-icon", title: "Keyboard shortcuts", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HelpIcon, { size: 12 }) }),
+        }, className: "gs-btn-icon", title: "Keyboard shortcuts", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(KeyboardIcon, { size: 12 }) }),
         headerRight
       ] })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
@@ -1639,10 +2088,10 @@ function GreenScreenTerminal({
           connStatus.username && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "gs-host", children: connStatus.username })
         ] }),
         statusActions,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: (e) => {
+        showShortcutsButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: (e) => {
           e.stopPropagation();
           setShowShortcuts((s) => !s);
-        }, className: "gs-btn-icon", title: "Keyboard shortcuts", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HelpIcon, { size: 12 }) }),
+        }, className: "gs-btn-icon", title: "Keyboard shortcuts", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(KeyboardIcon, { size: 12 }) }),
         headerRight
       ] })
     ] }) }),
@@ -1663,29 +2112,47 @@ function GreenScreenTerminal({
           showShortcuts && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "gs-shortcuts-panel", children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "gs-shortcuts-header", children: [
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Keyboard Shortcuts" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "gs-btn-icon", onClick: () => setShowShortcuts(false), style: { pointerEvents: "auto" }, children: "\xD7" })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "gs-btn-icon", onClick: () => setShowShortcuts(false), children: "\xD7" })
             ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "gs-shortcuts-section-title", children: "Actions" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("table", { className: "gs-shortcuts-table", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { children: [
+              ["Enter", "Submit", "ENTER"],
+              ["Tab", "Next field", "TAB"],
+              ["Backspace", "Backspace", "BACKSPACE"],
+              ["Delete", "Delete", "DELETE"],
+              ["Insert", "Insert / Overwrite", "INSERT"],
+              ["Home", "Home", "HOME"],
+              ["End", "End", "END"],
+              ["Page Up", "Roll Down", "PAGEUP"],
+              ["Page Down", "Roll Up", "PAGEDOWN"],
+              ["Ctrl+Enter", "Field Exit", "FIELD_EXIT"],
+              ["Ctrl+R", "Reset", "RESET"],
+              ["\u2014", "Help", "HELP"],
+              ["\u2014", "Clear", "CLEAR"],
+              ["\u2014", "Print", "PRINT"]
+            ].map(([label, desc, key]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: "gs-shortcut-row", onClick: (e) => {
+              e.stopPropagation();
+              handleShortcutSend(key);
+            }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "gs-shortcut-key", children: label }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: desc })
+            ] }, key)) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "gs-shortcuts-section-title", children: "Function keys" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "gs-shortcuts-fkeys", children: Array.from({ length: 24 }, (_, i) => `F${i + 1}`).map((fk) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                className: "gs-shortcut-fkey",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleShortcutSend(fk);
+                },
+                title: `Send ${fk}`,
+                children: fk
+              },
+              fk
+            )) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "gs-shortcuts-section-title", children: "Info" }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("table", { className: "gs-shortcuts-table", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tbody", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "gs-shortcut-key", children: "Ctrl+Enter" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: "Field Exit" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "gs-shortcut-key", children: "Ctrl+R" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: "Reset" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "gs-shortcut-key", children: "Insert" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: "Insert / Overwrite" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "gs-shortcut-key", children: "Page Up" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: "Roll Down" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "gs-shortcut-key", children: "Page Down" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: "Roll Up" })
-              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "gs-shortcut-key", children: "Click" }),
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: "Focus / Position cursor" })
@@ -1713,7 +2180,19 @@ function GreenScreenTerminal({
               autoComplete: "off",
               autoCorrect: "off",
               autoCapitalize: "off",
-              spellCheck: false
+              spellCheck: false,
+              lang: (() => {
+                const f = getCurrentField();
+                if (!f) return void 0;
+                if (f.is_dbcs || f.is_dbcs_either) return "ja";
+                return void 0;
+              })(),
+              inputMode: (() => {
+                const f = getCurrentField();
+                if (!f) return void 0;
+                if (f.is_dbcs) return "text";
+                return "text";
+              })()
             }
           )
         ]