green-screen-react 1.1.2 → 1.1.3

package/dist/index.mjs

@@ -1069,7 +1069,9 @@ function GreenScreenTerminal({
   autoSignedIn,
   autoFocusDisabled = false,
   bootLoader,
+  bootLoaderReady,
   headerRight,
+  statusActions,
   overlay,
   onNotification,
   onScreenChange,
@@ -1118,13 +1120,14 @@ function GreenScreenTerminal({
   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);
+  const prevScreenContentForEdits = useRef4(void 0);
   useEffect4(() => {
-    if (rawScreenData?.screen_signature && rawScreenData.screen_signature !== prevScreenSigForEdits.current) {
-      prevScreenSigForEdits.current = rawScreenData.screen_signature;
+    const content = rawScreenData?.content;
+    if (content && content !== prevScreenContentForEdits.current) {
+      prevScreenContentForEdits.current = content;
       setOptimisticEdits([]);
     }
-  }, [rawScreenData?.screen_signature]);
+  }, [rawScreenData?.content]);
   const [inputText, setInputText] = useState5("");
   const [isFocused, setIsFocused] = useState5(false);
   const [showSignInHint, setShowSignInHint] = useState5(false);
@@ -1222,13 +1225,15 @@ function GreenScreenTerminal({
   const [showBootLoader, setShowBootLoader] = useState5(bootLoader !== false);
   const [bootFadingOut, setBootFadingOut] = useState5(false);
   useEffect4(() => {
-    if (screenData?.content && showBootLoader) {
+    if (!showBootLoader) return;
+    const shouldDismiss = bootLoaderReady !== void 0 ? bootLoaderReady : !!screenData?.content;
+    if (shouldDismiss) {
       setBootFadingOut(true);
       setShowBootLoader(false);
       const timer = setTimeout(() => setBootFadingOut(false), 400);
       return () => clearTimeout(timer);
     }
-  }, [screenData?.content, showBootLoader]);
+  }, [screenData?.content, showBootLoader, bootLoaderReady]);
   const FOCUS_STORAGE_KEY = "gs-terminal-focused";
   useEffect4(() => {
     if (!autoFocusDisabled && !readOnly) {
@@ -1463,7 +1468,7 @@ function GreenScreenTerminal({
       }
       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" }),
+        /* @__PURE__ */ jsx4("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__ */ 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" })
@@ -1484,7 +1489,7 @@ function GreenScreenTerminal({
     const cursor = getCursorPos();
     const hasCursor = screenData.cursor_row !== void 0 && screenData.cursor_col !== void 0;
     const cursorInInputField = hasCursor && fields.some(
-      (f) => f.is_input && f.row === cursor.row && cursor.col >= f.col && cursor.col < f.col + f.length
+      (f) => f.is_input && !f.is_non_display && f.row === cursor.row && cursor.col >= f.col && cursor.col < f.col + f.length
     );
     return /* @__PURE__ */ jsxs4("div", { style: { fontFamily: "var(--gs-font)", fontSize: "13px", position: "relative", width: `${cols}ch` }, children: [
       rows.map((line, index) => {
@@ -1546,8 +1551,9 @@ function GreenScreenTerminal({
         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) } }),
-        connStatus && (connStatus.connected ? /* @__PURE__ */ jsx4(WifiIcon, { size: 12, style: { color: "var(--gs-green, #10b981)" } }) : /* @__PURE__ */ jsx4(WifiOffIcon, { size: 12, style: { color: "#FF6B00" } })),
+        connStatus?.status && connStatus.status !== "loading" && /* @__PURE__ */ jsx4(KeyIcon, { size: 12, style: { color: getStatusColor(connStatus.status) } }),
+        connStatus && connStatus.status !== "loading" && (connStatus.connected ? /* @__PURE__ */ jsx4(WifiIcon, { size: 12, style: { color: "var(--gs-green, #10b981)" } }) : /* @__PURE__ */ jsx4(WifiOffIcon, { size: 12, style: { color: "#FF6B00" } })),
+        statusActions,
         onMinimize && /* @__PURE__ */ jsx4("button", { onClick: (e) => {
           e.stopPropagation();
           onMinimize();
@@ -1569,7 +1575,7 @@ function GreenScreenTerminal({
         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: [
+        connStatus && connStatus.status !== "loading" && /* @__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: [
@@ -1581,6 +1587,7 @@ function GreenScreenTerminal({
           /* @__PURE__ */ jsx4(KeyIcon, { size: 12, style: { color: getStatusColor(connStatus.status) } }),
           connStatus.username && /* @__PURE__ */ jsx4("span", { className: "gs-host", children: connStatus.username })
         ] }),
+        statusActions,
         /* @__PURE__ */ jsx4("button", { onClick: (e) => {
           e.stopPropagation();
           setShowShortcuts((s) => !s);
@@ -1640,7 +1647,8 @@ function GreenScreenTerminal({
           ] }),
           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__ */ jsx4("span", { children: isAutoReconnecting || reconnecting ? "Reconnecting..." : connStatus?.status === "connecting" ? "Connecting..." : "Disconnected" }),
+            connStatus.error && !isAutoReconnecting && !reconnecting && /* @__PURE__ */ jsx4("span", { style: { fontSize: "0.75em", opacity: 0.7, maxWidth: "80%", textAlign: "center", wordBreak: "break-word" }, children: connStatus.error })
           ] }),
           /* @__PURE__ */ jsx4(
             "input",