checkpoint -- fg/focus

src/main.tsx

@@ -1603,9 +1603,11 @@ class CmdInput extends React.Component<{}, {}> {
         let infoMsg = inputModel.infoMsg.get();
         let hasInfo = (infoMsg != null);
         let remoteShow = (infoMsg != null && !isBlank(infoMsg.ptyremoteid));
+        let focusVal = model.getFocusedLine();
         return (
-            <div className={cn("box cmd-input has-background-black", {"has-info": infoShow}, {"has-history": historyShow}, {"has-remote": remoteShow})}>
-                <div onClick={this.onInfoToggle} className="input-minmax-control">
+            <div className={cn("cmd-input has-background-black", {"has-info": infoShow}, {"has-history": historyShow}, {"has-remote": remoteShow})}>
+                <div key="focus" className={cn("focus-indicator", {"active": focusVal && focusVal.cmdInputFocus})}/>
+                <div key="minmax" onClick={this.onInfoToggle} className="input-minmax-control">
                     <If condition={infoShow || historyShow}>
                         <i className="fa fa-chevron-down"/>
                     </If>
@@ -1617,13 +1619,13 @@ class CmdInput extends React.Component<{}, {}> {
                     <div className="cmd-input-grow-spacer"></div>
                     <HistoryInfo/>
                 </If>
-                <InfoMsg/>
-                <div className="cmd-input-context">
+                <InfoMsg key="infomsg"/>
+                <div key="prompt" className="cmd-input-context">
                     <div className="has-text-white">
                         <Prompt rptr={rptr} rstate={remoteState}/>
                     </div>
                 </div>
-                <div className="cmd-input-field field has-addons">
+                <div key="input" className="cmd-input-field field has-addons">
                     <div className="control cmd-quick-context">
                         <div className="button is-static">{remoteStr}</div>
                     </div>

src/sh2.less

@@ -380,6 +380,12 @@ html, body, #main {
     }
 }
 
+.line.line-selected {
+    &.line-focused {
+        outline-left: 3px solid blue;
+    }
+}
+
 .line.line-cmd {
     flex-direction: column;
     scroll-margin-bottom: 20px;
@@ -637,11 +643,26 @@ body .xterm .xterm-viewport {
     display: flex;
     flex-direction: column;
     position: relative;
+    padding: 20px 20px 20px 20px;
 
     &.has-info {
         padding-top: 5px;
     }
 
+    .focus-indicator {
+        position: absolute;
+        background-color: #666;
+        width: 5px;
+        border-radius: 3px;
+        height: 90%;
+        top: 5%;
+        left: 4px;
+
+        &.active {
+            background-color: @tab-blue;
+        }
+    }
+
     &.has-history {
         padding-top: 5px;
         height: max(300px, 40%);

src/types.ts

@@ -92,6 +92,7 @@ type RemoteType = {
     mshellversion : string,
     needsmshellupgrade : boolean,
     waitingforpassword : boolean,
+    local : boolean,
     remove? : boolean,
 };