update to show remote pty in remoteshow window

src/main.tsx

@@ -14,6 +14,11 @@ import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, ScreenWi
 
 dayjs.extend(localizedFormat)
 
+const CellHeightPx = 16;
+const CellWidthPx = 8;
+const RemotePtyRows = 10;
+const RemotePtyCols = 80;
+
 type InterObsValue = {
     sessionid : string,
     windowid : string,
@@ -343,11 +348,9 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
             );
         }
         let termLoaded = this.termLoaded.get();
-        let cellHeightPx = 16;
-        let cellWidthPx = 8;
-        let termWidth = Math.max(Math.trunc((width - 20)/cellWidthPx), 10);
+        let termWidth = Math.max(Math.trunc((width - 20)/CellWidthPx), 10);
         let usedRows = sw.getUsedRows(cmd, width);
-        let totalHeight = cellHeightPx * usedRows;
+        let totalHeight = CellHeightPx * usedRows;
         let remote = model.getRemote(cmd.remoteId);
         let status = cmd.getStatus();
         let termOpts = cmd.getTermOpts();
@@ -679,6 +682,14 @@ class InfoMsg extends React.Component<{}, {}> {
         }
         return s.substr(slashIdx+1);
     }
+
+    @boundMethod
+    clickTermBlock(e : any) {
+        let inputModel = GlobalModel.inputModel;
+        if (inputModel.remoteTermWrap != null) {
+            inputModel.remoteTermWrap.terminal.focus();
+        }
+    }
     
     render() {
         let model = GlobalModel;
@@ -688,6 +699,9 @@ class InfoMsg extends React.Component<{}, {}> {
         let line : string = null;
         let istr : string = null;
         let idx : number = 0;
+        let ptyRemoteId = (infoMsg == null ? null : infoMsg.ptyremoteid);
+        let isTermFocused = (inputModel.remoteTermWrap == null ? false : inputModel.remoteTermWrap.isFocused.get());
+        console.log("ptyremoteid", ptyRemoteId);
         return (
             <div className="cmd-input-info" style={{display: (infoShow ? "block" : "none")}}>
                 <If condition={infoMsg && infoMsg.infotitle != null}>
@@ -707,6 +721,12 @@ class InfoMsg extends React.Component<{}, {}> {
                         </For>
                     </div>
                 </If>
+                <div className={cn("terminal-wrapper", {"focus": isTermFocused})} style={{overflowY: "hidden", display: (ptyRemoteId == null ? "none" : "block"), width: CellWidthPx*RemotePtyCols}}>
+                    <If condition={!isTermFocused}>
+                        <div className="term-block" onClick={this.clickTermBlock}></div>
+                    </If>
+                    <div className="terminal" id="term-remote" data-remoteid={ptyRemoteId} style={{height: CellHeightPx*RemotePtyRows}}></div>
+                </div>
                 <If condition={infoMsg && infoMsg.infocomps != null && infoMsg.infocomps.length > 0}>
                     <div className="info-comps">
                         <For each="istr" index="idx" of={infoMsg.infocomps}>

src/model.ts

@@ -11,6 +11,8 @@ import {WSControl} from "./ws";
 var GlobalUser = "sawka";
 const DefaultCellWidth = 8;
 const DefaultCellHeight = 16;
+const RemotePtyRows = 10; // also in main.tsx
+const RemotePtyCols = 80;
 
 function widthToCols(width : number) : number {
     let cols = Math.trunc((width - 25) / DefaultCellWidth) - 1;
@@ -635,8 +637,6 @@ class InputModel {
     
     infoMsg : OV<InfoType> = mobx.observable.box(null);
     infoTimeoutId : any = null;
-
-    ptyRemoteId : OV<string> = mobx.observable.box(null);
     remoteTermWrap : TermWrap;
 
     constructor() {
@@ -668,6 +668,14 @@ class InputModel {
         }
     }
 
+    getPtyRemoteId() : string {
+        let info = this.infoMsg.get();
+        if (info == null || isBlank(info.ptyremoteid)) {
+            return null;
+        }
+        return info.ptyremoteid;
+    }
+
     hasFocus() : boolean {
         let mainInputElem = document.getElementById("main-cmd-input");
         if (document.activeElement == mainInputElem) {
@@ -994,6 +1002,7 @@ class InputModel {
         this._clearInfoTimeout();
         mobx.action(() => {
             this.infoMsg.set(info);
+            this.syncTermWrap();
             if (info == null) {
                 this.infoShow.set(false);
             }
@@ -1041,6 +1050,7 @@ class InputModel {
             this.infoShow.set(false);
             if (setNull) {
                 this.infoMsg.set(null);
+                this.syncTermWrap();
             }
         })();
     }
@@ -1093,10 +1103,40 @@ class InputModel {
             this.resetHistory();
             this.dropModHistory(false);
             this.infoMsg.set(null);
+            this.syncTermWrap();
             this._clearInfoTimeout();
         })();
     }
 
+    termKeyHandler(e : any) : void {
+        console.log("term-remote key", e);
+    }
+
+    syncTermWrap() : void {
+        let infoMsg = this.infoMsg.get();
+        let remoteId = (infoMsg == null ? null : infoMsg.ptyremoteid);
+        let curTermRemoteId = (this.remoteTermWrap == null ? null : this.remoteTermWrap.termContext.remoteId);
+        if (remoteId == curTermRemoteId) {
+            return;
+        }
+        if (this.remoteTermWrap != null) {
+            this.remoteTermWrap.dispose();
+            this.remoteTermWrap = null;
+            console.log("dispose termwrap");
+        }
+        if (remoteId != null) {
+            let elem = document.getElementById("term-remote");
+            if (elem == null) {
+                console.log("ERROR null term-remote element");
+            }
+            else {
+                let termOpts = {rows: RemotePtyRows, cols: RemotePtyCols, flexrows: false, maxptysize: 64*1024};
+                this.remoteTermWrap = new TermWrap(elem, {remoteId: remoteId}, RemotePtyRows, termOpts, null, this.termKeyHandler.bind(this));
+                console.log("make termwrap", this.remoteTermWrap);
+            }
+        }
+    }
+
     getCurLine() : string {
         let model = GlobalModel;
         let hidx = this.historyIndex.get();
@@ -1418,7 +1458,7 @@ class Model {
             }
             else {
                 // remote update
-                let activeRemoteId = this.inputModel.ptyRemoteId.get();
+                let activeRemoteId = this.inputModel.getPtyRemoteId();
                 if (activeRemoteId != ptyMsg.remoteid || this.inputModel.remoteTermWrap == null) {
                     return;
                 }

src/sh2.less

@@ -409,6 +409,18 @@ html, body, #main {
     }
 }
 
+.cmd-input-info {
+    .terminal-wrapper {
+        background-color: #000;
+        padding: 2px 10px 5px 4px;
+        margin: 5px 5px 10px 5px;
+        box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3);
+        &.focus {
+            box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.3);
+        }
+    }
+}
+
 .line {
     padding: 10px 5px 5px 5px;
     margin: 0px 5px 5px 5px;

src/term.ts

@@ -63,9 +63,14 @@ class TermWrap {
             this.atRowMax = true;
             this.usedRows = mobx.observable.box(termOpts.rows);
         }
-        let cols = Math.trunc((winSize.width - 25) / DefaultCellWidth) - 1;
-        cols = boundInt(cols, MinTermCols, MaxTermCols);
-        this.termSize = {rows: termOpts.rows, cols: cols};
+        if (winSize == null) {
+            this.termSize = {rows: termOpts.rows, cols: termOpts.cols};
+        }
+        else {
+            let cols = Math.trunc((winSize.width - 25) / DefaultCellWidth) - 1;
+            cols = boundInt(cols, MinTermCols, MaxTermCols);
+            this.termSize = {rows: termOpts.rows, cols: cols};
+        }
         this.terminal = new Terminal({rows: this.termSize.rows, cols: this.termSize.cols, fontSize: 14, theme: {foreground: "#d3d7cf"}});
         this.terminal._core._inputHandler._parser.setErrorHandler((state) => {
             this.numParseErrors++;

src/types.ts

@@ -270,6 +270,7 @@ type InfoType = {
     infocomps? : string[],
     infocompsmore? : boolean,
     timeoutms? : number,
+    ptyremoteid? : string,
 };
 
 type HistoryQueryOpts = {