diff --git a/forge.config.js b/forge.config.js
index 1e2d745a..63d12edd 100644
--- a/forge.config.js
+++ b/forge.config.js
@@ -1,9 +1,9 @@
 var AllowedFirstParts = {
     "package.json": true,
-    "dist": true,
-    "static": true,
-    "node_modules": true,
-    "bin": true,
+    dist: true,
+    static: true,
+    node_modules: true,
+    bin: true,
 };
 
 var AllowedNodeModules = {
@@ -39,7 +39,6 @@ function ignoreFn(path) {
         if (!AllowedNodeModules[nodeModule]) {
             return true;
         }
-        
     }
     return false;
 }
@@ -75,19 +74,19 @@ module.exports = {
     rebuildConfig: {},
     makers: [
         {
-            name: '@electron-forge/maker-squirrel',
+            name: "@electron-forge/maker-squirrel",
             config: {},
         },
         {
-            name: '@electron-forge/maker-zip',
-            platforms: ['darwin'],
+            name: "@electron-forge/maker-zip",
+            platforms: ["darwin"],
         },
         {
-            name: '@electron-forge/maker-deb',
+            name: "@electron-forge/maker-deb",
             config: {},
         },
         {
-            name: '@electron-forge/maker-rpm',
+            name: "@electron-forge/maker-rpm",
             config: {},
         },
     ],
diff --git a/src/bookmarks.tsx b/src/bookmarks.tsx
index c7c9c7db..af7b2ae2 100644
--- a/src/bookmarks.tsx
+++ b/src/bookmarks.tsx
@@ -1,48 +1,48 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import {v4 as uuidv4} from "uuid";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import { v4 as uuidv4 } from "uuid";
 import dayjs from "dayjs";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
 import cn from "classnames";
-import type {BookmarkType} from "./types";
-import {GlobalModel, GlobalCommandRunner} from "./model";
-import {CmdStrCode, Markdown} from "./elements";
+import type { BookmarkType } from "./types";
+import { GlobalModel, GlobalCommandRunner } from "./model";
+import { CmdStrCode, Markdown } from "./elements";
 
 @mobxReact.observer
-class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
+class Bookmark extends React.Component<{ bookmark: BookmarkType }, {}> {
     @boundMethod
-    handleDeleteClick() : void {
-        let {bookmark} = this.props;
+    handleDeleteClick(): void {
+        let { bookmark } = this.props;
         let model = GlobalModel.bookmarksModel;
         model.handleDeleteBookmark(bookmark.bookmarkid);
     }
 
     @boundMethod
-    handleEditClick() : void {
-        let {bookmark} = this.props;
+    handleEditClick(): void {
+        let { bookmark } = this.props;
         let model = GlobalModel.bookmarksModel;
         model.handleEditBookmark(bookmark.bookmarkid);
     }
 
     @boundMethod
-    handleEditCancel() : void {
+    handleEditCancel(): void {
         let model = GlobalModel.bookmarksModel;
         model.cancelEdit();
         return;
     }
 
     @boundMethod
-    handleEditUpdate() : void {
+    handleEditUpdate(): void {
         let model = GlobalModel.bookmarksModel;
         model.confirmEdit();
         return;
     }
 
     @boundMethod
-    handleDescChange(e : any) : void {
+    handleDescChange(e: any): void {
         let model = GlobalModel.bookmarksModel;
         mobx.action(() => {
             model.tempDesc.set(e.target.value);
@@ -50,7 +50,7 @@ class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
     }
 
     @boundMethod
-    handleCmdChange(e : any) : void {
+    handleCmdChange(e: any): void {
         let model = GlobalModel.bookmarksModel;
         mobx.action(() => {
             model.tempCmd.set(e.target.value);
@@ -58,57 +58,76 @@ class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
     }
 
     @boundMethod
-    handleClick() : void {
-        let {bookmark} = this.props;
+    handleClick(): void {
+        let { bookmark } = this.props;
         let model = GlobalModel.bookmarksModel;
         model.selectBookmark(bookmark.bookmarkid);
     }
 
     @boundMethod
-    handleUse() : void {
-        let {bookmark} = this.props;
+    handleUse(): void {
+        let { bookmark } = this.props;
         let model = GlobalModel.bookmarksModel;
         model.useBookmark(bookmark.bookmarkid);
     }
 
     @boundMethod
-    clickCopy() : void {
+    clickCopy(): void {
         let bm = this.props.bookmark;
         let model = GlobalModel.bookmarksModel;
         model.handleCopyBookmark(bm.bookmarkid);
     }
-    
+
     render() {
         let bm = this.props.bookmark;
         let model = GlobalModel.bookmarksModel;
-        let isSelected = (model.activeBookmark.get() == bm.bookmarkid);
+        let isSelected = model.activeBookmark.get() == bm.bookmarkid;
         let markdown = bm.description ?? "";
         let hasDesc = markdown != "";
-        let isEditing = (model.editingBookmark.get() == bm.bookmarkid);
-        let isCopied = mobx.computed(() => (model.copiedIndicator.get() == bm.bookmarkid)).get();
+        let isEditing = model.editingBookmark.get() == bm.bookmarkid;
+        let isCopied = mobx.computed(() => model.copiedIndicator.get() == bm.bookmarkid).get();
         if (isEditing) {
             return (
-                <div data-bookmarkid={bm.bookmarkid} className={cn("bookmark focus-parent is-editing", {"pending-delete": model.pendingDelete.get() == bm.bookmarkid})}>
-                    <div className={cn("focus-indicator", {"active": isSelected})}/>
+                <div
+                    data-bookmarkid={bm.bookmarkid}
+                    className={cn("bookmark focus-parent is-editing", {
+                        "pending-delete": model.pendingDelete.get() == bm.bookmarkid,
+                    })}
+                >
+                    <div className={cn("focus-indicator", { active: isSelected })} />
                     <div className="bookmark-edit">
                         <div className="field">
                             <label className="label">Description (markdown)</label>
                             <div className="control">
-                                <textarea className="textarea mono-font" rows={6} value={model.tempDesc.get()} onChange={this.handleDescChange}/>
+                                <textarea
+                                    className="textarea mono-font"
+                                    rows={6}
+                                    value={model.tempDesc.get()}
+                                    onChange={this.handleDescChange}
+                                />
                             </div>
                         </div>
                         <div className="field">
                             <label className="label">Command</label>
                             <div className="control">
-                                <textarea className="textarea mono-font" rows={3} value={model.tempCmd.get()} onChange={this.handleCmdChange}/>
+                                <textarea
+                                    className="textarea mono-font"
+                                    rows={3}
+                                    value={model.tempCmd.get()}
+                                    onChange={this.handleCmdChange}
+                                />
                             </div>
                         </div>
                         <div className="field is-grouped">
                             <div className="control">
-                                <button className="button is-link" onClick={this.handleEditUpdate}>Update</button>
+                                <button className="button is-link" onClick={this.handleEditUpdate}>
+                                    Update
+                                </button>
                             </div>
                             <div className="control">
-                                <button className="button" onClick={this.handleEditCancel}>Cancel</button>
+                                <button className="button" onClick={this.handleEditCancel}>
+                                    Cancel
+                                </button>
                             </div>
                         </div>
                     </div>
@@ -116,18 +135,34 @@ class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
             );
         }
         return (
-            <div className={cn("bookmark focus-parent", {"pending-delete": model.pendingDelete.get() == bm.bookmarkid})} onClick={this.handleClick}>
-                <div className={cn("focus-indicator", {"active": isSelected})}/>
+            <div
+                className={cn("bookmark focus-parent", {
+                    "pending-delete": model.pendingDelete.get() == bm.bookmarkid,
+                })}
+                onClick={this.handleClick}
+            >
+                <div className={cn("focus-indicator", { active: isSelected })} />
                 <div className="bookmark-id-div">{bm.bookmarkid.substr(0, 8)}</div>
                 <div className="bookmark-content">
                     <If condition={hasDesc}>
-                        <Markdown text={markdown}/>
+                        <Markdown text={markdown} />
                     </If>
-                    <CmdStrCode cmdstr={bm.cmdstr} onUse={this.handleUse} onCopy={this.clickCopy} isCopied={isCopied} fontSize="large" limitHeight={false}/>
+                    <CmdStrCode
+                        cmdstr={bm.cmdstr}
+                        onUse={this.handleUse}
+                        onCopy={this.clickCopy}
+                        isCopied={isCopied}
+                        fontSize="large"
+                        limitHeight={false}
+                    />
                 </div>
                 <div className="bookmark-controls">
-                    <div className="bookmark-control" onClick={this.handleEditClick}><i className="fa-sharp fa-solid fa-pen"/></div>
-                    <div className="bookmark-control" onClick={this.handleDeleteClick}><i className="fa-sharp fa-solid fa-trash"/></div>
+                    <div className="bookmark-control" onClick={this.handleEditClick}>
+                        <i className="fa-sharp fa-solid fa-pen" />
+                    </div>
+                    <div className="bookmark-control" onClick={this.handleDeleteClick}>
+                        <i className="fa-sharp fa-solid fa-trash" />
+                    </div>
                 </div>
             </div>
         );
@@ -137,44 +172,53 @@ class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
 @mobxReact.observer
 class BookmarksView extends React.Component<{}, {}> {
     @boundMethod
-    closeView() : void {
+    closeView(): void {
         GlobalModel.bookmarksModel.closeView();
     }
-    
+
     render() {
-        let isHidden = (GlobalModel.activeMainView.get() != "bookmarks");
+        let isHidden = GlobalModel.activeMainView.get() != "bookmarks";
         if (isHidden) {
             return null;
         }
         let bookmarks = GlobalModel.bookmarksModel.bookmarks;
-        let idx : number = 0;
-        let bookmark : BookmarkType = null;
+        let idx: number = 0;
+        let bookmark: BookmarkType = null;
         return (
-            <div className={cn("bookmarks-view", "alt-view", {"is-hidden": isHidden})}>
-                <div className="close-button" onClick={this.closeView}><i className="fa-sharp fa-solid fa-xmark"></i></div>
+            <div className={cn("bookmarks-view", "alt-view", { "is-hidden": isHidden })}>
+                <div className="close-button" onClick={this.closeView}>
+                    <i className="fa-sharp fa-solid fa-xmark"></i>
+                </div>
                 <div className="alt-title">
-                    <i className="fa-sharp fa-solid fa-bookmark" style={{marginRight: 10}}/>
+                    <i className="fa-sharp fa-solid fa-bookmark" style={{ marginRight: 10 }} />
                     BOOKMARKS
                 </div>
                 <div className="bookmarks-list">
                     <For index="idx" each="bookmark" of={bookmarks}>
-                        <Bookmark key={bookmark.bookmarkid} bookmark={bookmark}/>
+                        <Bookmark key={bookmark.bookmarkid} bookmark={bookmark} />
                     </For>
                     <If condition={bookmarks.length == 0}>
                         <div className="no-content">
-                            No Bookmarks.<br/>
-                            Use the <i className="fa-sharp fa-solid fa-bookmark"/> icon on commands to add your first bookmark.
+                            No Bookmarks.
+                            <br />
+                            Use the <i className="fa-sharp fa-solid fa-bookmark" /> icon on commands to add your first
+                            bookmark.
                         </div>
                     </If>
                 </div>
                 <If condition={bookmarks.length > 0}>
                     <div className="alt-help">
                         <div className="help-entry">
-                            [Enter] to Use Bookmark<br/>
-                            [Backspace/Delete]x2 or <i className="fa-sharp fa-solid fa-trash"/> to Delete<br/>
-                            [Arrow Up]/[Arrow Down]/[PageUp]/[PageDown] to Move in List<br/>
-                            [e] or <i className="fa-sharp fa-solid fa-pen"/> to Edit<br/>
-                            [c] or <i className="fa-sharp fa-regular fa-copy"/> to Copy<br/>
+                            [Enter] to Use Bookmark
+                            <br />
+                            [Backspace/Delete]x2 or <i className="fa-sharp fa-solid fa-trash" /> to Delete
+                            <br />
+                            [Arrow Up]/[Arrow Down]/[PageUp]/[PageDown] to Move in List
+                            <br />
+                            [e] or <i className="fa-sharp fa-solid fa-pen" /> to Edit
+                            <br />
+                            [c] or <i className="fa-sharp fa-regular fa-copy" /> to Copy
+                            <br />
                         </div>
                     </div>
                 </If>
@@ -183,4 +227,4 @@ class BookmarksView extends React.Component<{}, {}> {
     }
 }
 
-export {BookmarksView};
+export { BookmarksView };
diff --git a/src/cmdinput.less b/src/cmdinput.less
index fd6ce8ef..89239b80 100644
--- a/src/cmdinput.less
+++ b/src/cmdinput.less
@@ -1,4 +1,5 @@
-.cmd-input-info, .cmd-history {
+.cmd-input-info,
+.cmd-history {
     &::-webkit-scrollbar {
         background-color: #777;
         width: 5px;
@@ -15,7 +16,7 @@
     font-weight: normal;
     font-size: 12px;
     color: @term-white;
-    
+
     .message-content {
         position: absolute;
         display: none;
@@ -41,7 +42,7 @@
             overflow: hidden;
         }
     }
-    
+
     &:hover {
         .message-content {
             display: flex;
@@ -95,7 +96,7 @@
         }
 
         .remote-name {
-            .mono-font(14px)
+            .mono-font(14px);
         }
     }
 
@@ -121,7 +122,7 @@
 
     .cmd-input-field {
         position: relative;
-        
+
         .cmd-input-control {
             line-height: 0;
         }
@@ -141,7 +142,8 @@
             resize: none;
             overflow-wrap: anywhere;
 
-            &:active, &:focus {
+            &:active,
+            &:focus {
                 border-color: white !important;
             }
 
@@ -259,7 +261,7 @@
         flex-shrink: 1;
         overflow-y: auto;
         margin-bottom: 5px;
-        
+
         .info-msg {
             .mono-font(14px, 400);
             color: @soft-blue;
@@ -289,7 +291,7 @@
             flex-wrap: wrap;
             padding-bottom: 5px;
             .mono-font(14px, 400);
-            
+
             .info-comp {
                 min-width: 200px;
                 color: @term-white;
@@ -317,8 +319,9 @@
                     color: white;
                     font-weight: bold;
                 }
-                
-                th, td {
+
+                th,
+                td {
                     padding: 3px 8px 3px 8px;
                 }
 
@@ -341,7 +344,8 @@
                 color: @term-cyan;
             }
 
-            .info-error, .info-msg {
+            .info-error,
+            .info-msg {
                 margin-top: 5px;
                 padding: 5px;
             }
@@ -354,7 +358,7 @@
                     white-space: pre;
                     width: 120px;
                 }
-                
+
                 .remote-field-val {
                     white-space: pre;
                     display: flex;
@@ -386,7 +390,9 @@
                     }
 
                     &.text-input {
-                        input[type=text], input[type=number], input[type=password] {
+                        input[type="text"],
+                        input[type="number"],
+                        input[type="password"] {
                             background-color: black;
                             color: white;
                             width: 200px;
@@ -394,7 +400,7 @@
                     }
 
                     &.checkbox-input {
-                        input[type=checkbox] {
+                        input[type="checkbox"] {
                             position: relative;
                             top: 3px;
                         }
diff --git a/src/comps.less b/src/comps.less
index 915afd58..3416f2c8 100644
--- a/src/comps.less
+++ b/src/comps.less
@@ -49,7 +49,7 @@
         min-width: 100px;
         overflow: auto;
         border-left: 1px solid #777;
-        
+
         code {
             flex-shrink: 0;
             min-width: 100px;
@@ -66,7 +66,7 @@
         position: relative;
         display: block;
         visibility: hidden;
-        
+
         .inner-copy {
             position: absolute;
             bottom: -1px;
@@ -92,7 +92,7 @@
 
 .terminal-wrapper {
     position: relative;
-    
+
     .term-block {
         position: absolute;
         top: 0;
@@ -126,7 +126,7 @@
             width: 5px;
             height: 5px;
         }
-        
+
         &::-webkit-scrollbar-thumb {
             background: white;
         }
@@ -138,7 +138,7 @@
             width: 5px;
             height: 5px;
         }
-        
+
         &::-webkit-scrollbar-thumb {
             background: #555;
         }
@@ -206,7 +206,8 @@ body .xterm .xterm-viewport {
     }
 }
 
-.button.is-plain, .button.is-prompt-cancel {
+.button.is-plain,
+.button.is-prompt-cancel {
     background-color: #222;
     color: @term-white;
 
@@ -238,7 +239,7 @@ body .xterm .xterm-viewport {
     .mono-font(10px);
     display: flex;
     flex-direction: row;
-    
+
     .hint-item {
         padding: 0px 5px 0px 5px;
         border-radius: 0 0 3px 3px;
@@ -252,7 +253,7 @@ body .xterm .xterm-viewport {
     .hint-item.color-green {
         color: black;
         background-color: @tab-green;
-        
+
         &:hover {
             color: white;
         }
@@ -263,11 +264,11 @@ body .xterm .xterm-viewport {
         background-color: @tab-green;
         cursor: default;
     }
-    
+
     .hint-item.color-white {
         color: black;
         background-color: @term-white;
-        
+
         &:hover {
             background-color: @term-bright-white;
         }
@@ -282,7 +283,7 @@ body .xterm .xterm-viewport {
     .hint-item.color-blue {
         color: black;
         background-color: @tab-blue;
-        
+
         &:hover {
             color: white;
         }
@@ -426,11 +427,11 @@ body .xterm .xterm-viewport {
     div:nth-child(1) {
         animation-delay: -0.45s;
     }
-    
+
     div:nth-child(2) {
         animation-delay: -0.3s;
     }
-    
+
     div:nth-child(3) {
         animation-delay: -0.15s;
     }
@@ -457,19 +458,20 @@ body .xterm .xterm-viewport {
     background-color: #171717;
     outline: 2px solid #171717;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
         color: @term-white;
         background-color: #333;
         outline: 2px solid #333;
     }
-    
+
     &.connect-button {
         color: @term-green;
         &:hover {
             color: @term-green;
         }
     }
-    
+
     &.disconnect-button {
         color: @term-red;
         &:hover {
@@ -499,7 +501,8 @@ body .xterm .xterm-viewport {
     }
 
     &.disabled-button {
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
             outline: none;
             background-color: #171717;
         }
@@ -521,12 +524,13 @@ body .xterm .xterm-viewport {
         display: block;
         background-color: #666 !important;
     }
-    
-    &.active, &.active.selected {
+
+    &.active,
+    &.active.selected {
         display: block;
         background-color: @tab-blue !important;
     }
-    
+
     &.active.selected.fg-focus {
         display: block;
         background-color: @tab-green !important;
@@ -540,7 +544,7 @@ body .xterm .xterm-viewport {
 
 #main .term-prompt {
     font-size: 14px;
-    
+
     i {
         margin-right: 3px;
     }
@@ -561,7 +565,7 @@ body .xterm .xterm-viewport {
 
     .term-prompt-remote {
         color: @term-bright-green;
-        
+
         &.color-green {
             color: @term-bright-green;
         }
@@ -611,18 +615,19 @@ body .xterm .xterm-viewport {
     top: -3px;
     color: #c4a000;
 
-    &.status-init, &.status-disconnected {
+    &.status-init,
+    &.status-disconnected {
         color: #c4a000;
     }
 
     &.status-connecting {
         color: #c4a000;
     }
-    
+
     &.status-connected {
         color: #4e9a06;
     }
-    
+
     &.status-error {
         color: #cc0000;
     }
diff --git a/src/dbops.ts b/src/dbops.ts
index fe45b611..50d2819f 100644
--- a/src/dbops.ts
+++ b/src/dbops.ts
@@ -1,4 +1,4 @@
-import {sprintf} from "sprintf-js";
-import {Database} from "better-sqlite3";
+import { sprintf } from "sprintf-js";
+import { Database } from "better-sqlite3";
 
 let DB = new Database();
diff --git a/src/elements.tsx b/src/elements.tsx
index c54a22f0..7beb658d 100644
--- a/src/elements.tsx
+++ b/src/elements.tsx
@@ -1,31 +1,41 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import cn from "classnames";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
-import type {RemoteType} from "./types";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
+import type { RemoteType } from "./types";
 
 type OV<V> = mobx.IObservableValue<V>;
 
-function renderCmdText(text : string) : any {
+function renderCmdText(text: string): any {
     return <span>&#x2318;{text}</span>;
 }
 
-class CmdStrCode extends React.Component<{cmdstr : string, onUse : () => void, onCopy : () => void, isCopied : boolean, fontSize : "normal" | "large", limitHeight : boolean}, {}> {
+class CmdStrCode extends React.Component<
+    {
+        cmdstr: string;
+        onUse: () => void;
+        onCopy: () => void;
+        isCopied: boolean;
+        fontSize: "normal" | "large";
+        limitHeight: boolean;
+    },
+    {}
+> {
     @boundMethod
-    handleUse(e : any) {
+    handleUse(e: any) {
         e.stopPropagation();
         if (this.props.onUse != null) {
-            this.props.onUse()
+            this.props.onUse();
         }
     }
 
     @boundMethod
-    handleCopy(e : any) {
+    handleCopy(e: any) {
         e.stopPropagation();
         if (this.props.onCopy != null) {
             this.props.onCopy();
@@ -33,21 +43,23 @@ class CmdStrCode extends React.Component<{cmdstr : string, onUse : () => void, o
     }
 
     render() {
-        let {isCopied, cmdstr, fontSize, limitHeight} = this.props;
+        let { isCopied, cmdstr, fontSize, limitHeight } = this.props;
         return (
-            <div className={cn("cmdstr-code", {"is-large": (fontSize == "large")}, {"limit-height": limitHeight})}>
+            <div className={cn("cmdstr-code", { "is-large": fontSize == "large" }, { "limit-height": limitHeight })}>
                 <If condition={isCopied}>
                     <div key="copied" className="copied-indicator">
                         <div>copied</div>
                     </div>
                 </If>
-                <div key="use" className="use-button" title="Use Command" onClick={this.handleUse}><i className="fa-sharp fa-solid fa-check"/></div>
+                <div key="use" className="use-button" title="Use Command" onClick={this.handleUse}>
+                    <i className="fa-sharp fa-solid fa-check" />
+                </div>
                 <div key="code" className="code-div">
                     <code>{cmdstr}</code>
                 </div>
                 <div key="copy" className="copy-control">
                     <div className="inner-copy" onClick={this.handleCopy}>
-                        <i title="copy" className="fa-sharp fa-regular fa-copy"/>
+                        <i title="copy" className="fa-sharp fa-regular fa-copy" />
                     </div>
                 </div>
             </div>
@@ -55,27 +67,27 @@ class CmdStrCode extends React.Component<{cmdstr : string, onUse : () => void, o
     }
 }
 
-class Toggle extends React.Component<{checked : boolean, onChange : (value : boolean) => void}, {}> {
+class Toggle extends React.Component<{ checked: boolean; onChange: (value: boolean) => void }, {}> {
     @boundMethod
-    handleChange(e : any) : void {
-        let {onChange} = this.props;
+    handleChange(e: any): void {
+        let { onChange } = this.props;
         if (onChange != null) {
             onChange(e.target.checked);
         }
     }
-    
+
     render() {
         return (
             <label className="checkbox-toggle">
-                <input type="checkbox" checked={this.props.checked} onChange={this.handleChange}/>
-                <span className="slider"/>
+                <input type="checkbox" checked={this.props.checked} onChange={this.handleChange} />
+                <span className="slider" />
             </label>
         );
     }
 }
 
 @mobxReact.observer
-class RemoteStatusLight extends React.Component<{remote : RemoteType}, {}> {
+class RemoteStatusLight extends React.Component<{ remote: RemoteType }, {}> {
     render() {
         let remote = this.props.remote;
         let status = "error";
@@ -84,24 +96,32 @@ class RemoteStatusLight extends React.Component<{remote : RemoteType}, {}> {
             status = remote.status;
             wfp = remote.waitingforpassword;
         }
-        let icon = "fa-sharp fa-solid fa-circle"
+        let icon = "fa-sharp fa-solid fa-circle";
         if (status == "connecting") {
-            icon = (wfp ? "fa-sharp fa-solid fa-key" : "fa-sharp fa-solid fa-rotate");
+            icon = wfp ? "fa-sharp fa-solid fa-key" : "fa-sharp fa-solid fa-rotate";
         }
-        return (
-            <i className={cn("remote-status", icon, "status-" + status)}/>
-        );
+        return <i className={cn("remote-status", icon, "status-" + status)} />;
     }
 }
 
 @mobxReact.observer
-class InlineSettingsTextEdit extends React.Component<{text : string, value : string, onChange : (val : string) => void, maxLength : number, placeholder : string, showIcon? : boolean}, {}> {
-    isEditing : OV<boolean> = mobx.observable.box(false, {name: "inlineedit-isEditing"});
-    tempText : OV<string>;
-    shouldFocus : boolean = false;
-    inputRef : React.RefObject<any> = React.createRef();
+class InlineSettingsTextEdit extends React.Component<
+    {
+        text: string;
+        value: string;
+        onChange: (val: string) => void;
+        maxLength: number;
+        placeholder: string;
+        showIcon?: boolean;
+    },
+    {}
+> {
+    isEditing: OV<boolean> = mobx.observable.box(false, { name: "inlineedit-isEditing" });
+    tempText: OV<string>;
+    shouldFocus: boolean = false;
+    inputRef: React.RefObject<any> = React.createRef();
 
-    componentDidUpdate() : void {
+    componentDidUpdate(): void {
         if (this.shouldFocus) {
             this.shouldFocus = false;
             if (this.inputRef.current != null) {
@@ -111,14 +131,14 @@ class InlineSettingsTextEdit extends React.Component<{text : string, value : str
     }
 
     @boundMethod
-    handleChangeText(e : any) : void {
+    handleChangeText(e: any): void {
         mobx.action(() => {
             this.tempText.set(e.target.value);
         })();
     }
 
     @boundMethod
-    confirmChange() : void {
+    confirmChange(): void {
         mobx.action(() => {
             let newText = this.tempText.get();
             this.isEditing.set(false);
@@ -128,7 +148,7 @@ class InlineSettingsTextEdit extends React.Component<{text : string, value : str
     }
 
     @boundMethod
-    cancelChange() : void {
+    cancelChange(): void {
         mobx.action(() => {
             this.isEditing.set(false);
             this.tempText = null;
@@ -136,7 +156,7 @@ class InlineSettingsTextEdit extends React.Component<{text : string, value : str
     }
 
     @boundMethod
-    handleKeyDown(e : any) : void {
+    handleKeyDown(e: any): void {
         if (e.code == "Enter") {
             e.preventDefault();
             e.stopPropagation();
@@ -153,36 +173,64 @@ class InlineSettingsTextEdit extends React.Component<{text : string, value : str
     }
 
     @boundMethod
-    clickEdit() : void {
+    clickEdit(): void {
         mobx.action(() => {
             this.isEditing.set(true);
             this.shouldFocus = true;
-            this.tempText = mobx.observable.box(this.props.value, {name: "inlineedit-tempText"});
+            this.tempText = mobx.observable.box(this.props.value, { name: "inlineedit-tempText" });
         })();
     }
-    
+
     render() {
         if (this.isEditing.get()) {
             return (
                 <div className={cn("settings-input inline-edit", "edit-active")}>
                     <div className="field has-addons">
                         <div className="control">
-                            <input ref={this.inputRef} className="input" type="text" onKeyDown={this.handleKeyDown} placeholder={this.props.placeholder} onChange={this.handleChangeText} value={this.tempText.get()} maxLength={this.props.maxLength}/>
+                            <input
+                                ref={this.inputRef}
+                                className="input"
+                                type="text"
+                                onKeyDown={this.handleKeyDown}
+                                placeholder={this.props.placeholder}
+                                onChange={this.handleChangeText}
+                                value={this.tempText.get()}
+                                maxLength={this.props.maxLength}
+                            />
                         </div>
                         <div className="control">
-                            <div onClick={this.cancelChange} title="Cancel (Esc)" className="button is-prompt-danger is-outlined is-small"><span className="icon is-small"><i className="fa-sharp fa-solid fa-xmark"/></span></div>
+                            <div
+                                onClick={this.cancelChange}
+                                title="Cancel (Esc)"
+                                className="button is-prompt-danger is-outlined is-small"
+                            >
+                                <span className="icon is-small">
+                                    <i className="fa-sharp fa-solid fa-xmark" />
+                                </span>
+                            </div>
                         </div>
                         <div className="control">
-                            <div onClick={this.confirmChange} title="Confirm (Enter)" className="button is-prompt-green is-outlined is-small"><span className="icon is-small"><i className="fa-sharp fa-solid fa-check"/></span></div>
+                            <div
+                                onClick={this.confirmChange}
+                                title="Confirm (Enter)"
+                                className="button is-prompt-green is-outlined is-small"
+                            >
+                                <span className="icon is-small">
+                                    <i className="fa-sharp fa-solid fa-check" />
+                                </span>
+                            </div>
                         </div>
                     </div>
                 </div>
             );
-        }
-        else {
+        } else {
             return (
                 <div onClick={this.clickEdit} className={cn("settings-input inline-edit", "edit-not-active")}>
-                    {this.props.text}<If condition={this.props.showIcon}> <i className="fa-sharp fa-solid fa-pen"/></If>
+                    {this.props.text}
+                    <If condition={this.props.showIcon}>
+                        {" "}
+                        <i className="fa-sharp fa-solid fa-pen" />
+                    </If>
                 </div>
             );
         }
@@ -190,16 +238,16 @@ class InlineSettingsTextEdit extends React.Component<{text : string, value : str
 }
 
 @mobxReact.observer
-class InfoMessage extends React.Component<{width : number, children : React.ReactNode}> {
+class InfoMessage extends React.Component<{ width: number; children: React.ReactNode }> {
     render() {
         return (
             <div className="info-message">
                 <div className="message-icon">
-                    <i className="fa-sharp fa-solid fa-circle-info"/>
+                    <i className="fa-sharp fa-solid fa-circle-info" />
                 </div>
-                <div className="message-content" style={{width: this.props.width}}>
+                <div className="message-content" style={{ width: this.props.width }}>
                     <div className="info-icon">
-                        <i className="fa-sharp fa-solid fa-circle-info"/>
+                        <i className="fa-sharp fa-solid fa-circle-info" />
                     </div>
                     <div className="info-children">{this.props.children}</div>
                 </div>
@@ -208,25 +256,25 @@ class InfoMessage extends React.Component<{width : number, children : React.Reac
     }
 }
 
-function LinkRenderer(props : any) : any {
+function LinkRenderer(props: any): any {
     let newUrl = "https://extern?" + encodeURIComponent(props.href);
-    return <a href={newUrl} target="_blank">{props.children}</a>
-}
-
-function HeaderRenderer(props : any, hnum : number) : any {
     return (
-        <div className={cn("title", "is-" + hnum)}>{props.children}</div>
+        <a href={newUrl} target="_blank">
+            {props.children}
+        </a>
     );
 }
 
-function CodeRenderer(props : any) : any {
-    return (
-        <code className={cn({"inline": props.inline})}>{props.children}</code>
-    );
+function HeaderRenderer(props: any, hnum: number): any {
+    return <div className={cn("title", "is-" + hnum)}>{props.children}</div>;
+}
+
+function CodeRenderer(props: any): any {
+    return <code className={cn({ inline: props.inline })}>{props.children}</code>;
 }
 
 @mobxReact.observer
-class Markdown extends React.Component<{text : string, style? : any, extraClassName? : string}, {}> {
+class Markdown extends React.Component<{ text: string; style?: any; extraClassName?: string }, {}> {
     render() {
         let text = this.props.text;
         let markdownComponents = {
@@ -241,16 +289,16 @@ class Markdown extends React.Component<{text : string, style? : any, extraClassN
         };
         return (
             <div className={cn("markdown content", this.props.extraClassName)} style={this.props.style}>
-                <ReactMarkdown children={text} remarkPlugins={[remarkGfm]} components={markdownComponents}/>
+                <ReactMarkdown children={text} remarkPlugins={[remarkGfm]} components={markdownComponents} />
             </div>
         );
     }
 }
 
 @mobxReact.observer
-class SettingsError extends React.Component<{errorMessage : OV<string>}, {}> {
+class SettingsError extends React.Component<{ errorMessage: OV<string> }, {}> {
     @boundMethod
-    dismissError() : void {
+    dismissError(): void {
         mobx.action(() => {
             this.props.errorMessage.set(null);
         })();
@@ -263,11 +311,22 @@ class SettingsError extends React.Component<{errorMessage : OV<string>}, {}> {
         return (
             <div className="settings-field settings-error">
                 <div>Error: {this.props.errorMessage.get()}</div>
-                <div className="flex-spacer"/>
-                <div onClick={this.dismissError} className="error-dismiss"><i className="fa-sharp fa-solid fa-xmark"/></div>
+                <div className="flex-spacer" />
+                <div onClick={this.dismissError} className="error-dismiss">
+                    <i className="fa-sharp fa-solid fa-xmark" />
+                </div>
             </div>
         );
     }
 }
 
-export {CmdStrCode, Toggle, renderCmdText, RemoteStatusLight, InlineSettingsTextEdit, InfoMessage, Markdown, SettingsError};
+export {
+    CmdStrCode,
+    Toggle,
+    renderCmdText,
+    RemoteStatusLight,
+    InlineSettingsTextEdit,
+    InfoMessage,
+    Markdown,
+    SettingsError,
+};
diff --git a/src/emain.ts b/src/emain.ts
index 8709f613..06fc40a7 100644
--- a/src/emain.ts
+++ b/src/emain.ts
@@ -3,12 +3,12 @@ import * as path from "path";
 import * as fs from "fs";
 import fetch from "node-fetch";
 import * as child_process from "node:child_process";
-import {debounce} from "throttle-debounce";
-import {handleJsonFetchResponse} from "./util";
+import { debounce } from "throttle-debounce";
+import { handleJsonFetchResponse } from "./util";
 import * as winston from "winston";
 import * as util from "util";
-import {sprintf} from "sprintf-js";
-import {v4 as uuidv4} from "uuid";
+import { sprintf } from "sprintf-js";
+import { v4 as uuidv4 } from "uuid";
 
 const PromptAppPathVarName = "PROMPT_APP_PATH";
 const PromptDevVarName = "PROMPT_DEV";
@@ -16,10 +16,10 @@ const AuthKeyFile = "prompt.authkey";
 const DevServerEndpoint = "http://127.0.0.1:8090";
 const ProdServerEndpoint = "http://127.0.0.1:1619";
 
-let isDev = (process.env[PromptDevVarName] != null);
+let isDev = process.env[PromptDevVarName] != null;
 let scHome = getPromptHomeDir();
 ensureDir(scHome);
-let DistDir = (isDev ? "dist-dev" : "dist");
+let DistDir = isDev ? "dist-dev" : "dist";
 let GlobalAuthKey = "";
 let instanceId = uuidv4();
 let oldConsoleLog = console.log;
@@ -31,18 +31,16 @@ let wasInFg = true;
 let unamePlatform = process.platform;
 let unameArch = process.arch;
 if (unameArch == "x64") {
-    unameArch = "amd64"
+    unameArch = "amd64";
 }
 let logger;
 let loggerConfig = {
     level: "info",
     format: winston.format.combine(
-        winston.format.timestamp({format: "YYYY-MM-DD HH:mm:ss"}),
-        winston.format.printf(info => `${info.timestamp} ${info.message}`),
+        winston.format.timestamp({ format: "YYYY-MM-DD HH:mm:ss" }),
+        winston.format.printf((info) => `${info.timestamp} ${info.message}`)
     ),
-    transports: [
-        new winston.transports.File({filename: path.join(scHome, "prompt-app.log"), level: "info"}),
-    ],
+    transports: [new winston.transports.File({ filename: path.join(scHome, "prompt-app.log"), level: "info" })],
 };
 if (isDev) {
     loggerConfig.transports.push(new winston.transports.Console());
@@ -51,18 +49,25 @@ logger = winston.createLogger(loggerConfig);
 function log(...msg) {
     try {
         logger.info(util.format(...msg));
-    }
-    catch (e) {
+    } catch (e) {
         oldConsoleLog(...msg);
     }
 }
 console.log = log;
-console.log(sprintf("prompt-app starting, PROMPT_HOME=%s, apppath=%s arch=%s/%s", scHome, getAppBasePath(), unamePlatform, unameArch));
+console.log(
+    sprintf(
+        "prompt-app starting, PROMPT_HOME=%s, apppath=%s arch=%s/%s",
+        scHome,
+        getAppBasePath(),
+        unamePlatform,
+        unameArch
+    )
+);
 if (isDev) {
     console.log("prompt-app PROMPT_DEV set");
 }
 let app = electron.app;
-app.setName((isDev ? "Prompt (Dev)" : "Prompt"));
+app.setName(isDev ? "Prompt (Dev)" : "Prompt");
 let localServerProc = null;
 let localServerShouldRestart = false;
 
@@ -78,7 +83,7 @@ function getPromptHomeDir() {
         if (homeDir == null) {
             homeDir = "/";
         }
-        scHome = path.join(homeDir, (isDev ? "prompt-dev" : "prompt"));
+        scHome = path.join(homeDir, isDev ? "prompt-dev" : "prompt");
     }
     return scHome;
 }
@@ -116,7 +121,7 @@ function getLocalServerCwd() {
 }
 
 function ensureDir(dir) {
-    fs.mkdirSync(dir, {recursive: true, mode: 0o700});
+    fs.mkdirSync(dir, { recursive: true, mode: 0o700 });
 }
 
 function readAuthKey() {
@@ -124,7 +129,7 @@ function readAuthKey() {
     let authKeyFileName = path.join(homeDir, AuthKeyFile);
     if (!fs.existsSync(authKeyFileName)) {
         let authKeyStr = String(uuidv4());
-        fs.writeFileSync(authKeyFileName, authKeyStr, {mode: 0o600});
+        fs.writeFileSync(authKeyFileName, authKeyStr, { mode: 0o600 });
         return authKeyStr;
     }
     let authKeyData = fs.readFileSync(authKeyFileName);
@@ -141,10 +146,7 @@ let menuTemplate = [
     },
     {
         label: "File",
-        submenu: [
-            {role: "close"},
-            {role: "forceReload"},
-        ],
+        submenu: [{ role: "close" }, { role: "forceReload" }],
     },
     {
         role: "editMenu",
@@ -162,11 +164,11 @@ electron.Menu.setApplicationMenu(menu);
 
 let MainWindow = null;
 
-function getMods(input : any) {
-    return {meta: input.meta, shift: input.shift, ctrl: input.control, alt: input.alt};
+function getMods(input: any) {
+    return { meta: input.meta, shift: input.shift, ctrl: input.control, alt: input.alt };
 }
 
-function shNavHandler(event : any, url : any) {
+function shNavHandler(event: any, url: any) {
     console.log("navigation", url);
     event.preventDefault();
 }
@@ -181,9 +183,9 @@ function createMainWindow(clientData) {
         webPreferences: {
             preload: path.join(getAppBasePath(), DistDir, "preload.js"),
         },
-        backgroundColor: '#000',
+        backgroundColor: "#000",
     });
-    let indexHtml = (isDev ? "index-dev.html" : "index.html");
+    let indexHtml = isDev ? "index-dev.html" : "index.html";
     win.loadFile(path.join(getAppBasePath(), "static", indexHtml));
     win.webContents.on("before-input-event", (e, input) => {
         if (win.isFocused()) {
@@ -202,11 +204,10 @@ function createMainWindow(clientData) {
             e.preventDefault();
             if (!input.alt) {
                 win.webContents.send("i-cmd", mods);
-            }
-            else {
+            } else {
                 win.webContents.toggleDevTools();
             }
-            
+
             return;
         }
         if (input.code == "KeyR" && input.meta) {
@@ -255,18 +256,24 @@ function createMainWindow(clientData) {
                 return;
             }
             e.preventDefault();
-            win.webContents.send("digit-cmd", {digit: digitNum}, mods);
+            win.webContents.send("digit-cmd", { digit: digitNum }, mods);
         }
         if ((input.code == "BracketRight" || input.code == "BracketLeft") && input.meta) {
-            let rel = (input.code == "BracketRight" ? 1 : -1);
-            win.webContents.send("bracket-cmd", {relative: rel}, mods);
+            let rel = input.code == "BracketRight" ? 1 : -1;
+            win.webContents.send("bracket-cmd", { relative: rel }, mods);
             e.preventDefault();
             return;
         }
     });
     win.webContents.on("will-navigate", shNavHandler);
-    win.on("resized", debounce(400, (e) => mainResizeHandler(e, win)));
-    win.on("moved", debounce(400, (e) => mainResizeHandler(e, win)));
+    win.on(
+        "resized",
+        debounce(400, (e) => mainResizeHandler(e, win))
+    );
+    win.on(
+        "moved",
+        debounce(400, (e) => mainResizeHandler(e, win))
+    );
     win.on("focus", () => {
         wasInFg = true;
         wasActive = true;
@@ -278,13 +285,11 @@ function createMainWindow(clientData) {
         e.preventDefault();
         if (url.startsWith("https://docs.getprompt.dev/")) {
             electron.shell.openExternal(url);
-        }
-        else if (url.startsWith("https://discord.gg/")) {
+        } else if (url.startsWith("https://discord.gg/")) {
             electron.shell.openExternal(url);
-        }
-        else if (url.startsWith("https://extern/?")) {
+        } else if (url.startsWith("https://extern/?")) {
             let qmark = url.indexOf("?");
-            let param = url.substr(qmark+1);
+            let param = url.substr(qmark + 1);
             let newUrl = decodeURIComponent(param);
             electron.shell.openExternal(newUrl);
         }
@@ -298,18 +303,20 @@ function mainResizeHandler(e, win) {
     }
     let bounds = win.getBounds();
     console.log("resize/move", win.getBounds());
-    let winSize = {width: bounds.width, height: bounds.height, top: bounds.y, left: bounds.x};
+    let winSize = { width: bounds.width, height: bounds.height, top: bounds.y, left: bounds.x };
     let url = getBaseHostPort() + "/api/set-winsize";
     let fetchHeaders = getFetchHeaders();
-    fetch(url, {method: "post", body: JSON.stringify(winSize), headers: fetchHeaders}).then((resp) => handleJsonFetchResponse(url, resp)).catch((err) => {
-        console.log("error setting winsize", err)
-    });
+    fetch(url, { method: "post", body: JSON.stringify(winSize), headers: fetchHeaders })
+        .then((resp) => handleJsonFetchResponse(url, resp))
+        .catch((err) => {
+            console.log("error setting winsize", err);
+        });
 }
 
 function calcBounds(clientData) {
     let primaryDisplay = electron.screen.getPrimaryDisplay();
     let pdBounds = primaryDisplay.bounds;
-    let size = {x: 50, y: 50, width: pdBounds.width-150, height: pdBounds.height-150};
+    let size = { x: 50, y: 50, width: pdBounds.width - 150, height: pdBounds.height - 150 };
     if (clientData != null && clientData.winsize != null && clientData.winsize.width > 0) {
         let cwinSize = clientData.winsize;
         if (cwinSize.width > 0) {
@@ -346,8 +353,8 @@ function calcBounds(clientData) {
     return size;
 }
 
-app.on('window-all-closed', () => {
-    if (process.platform !== 'darwin') app.quit()
+app.on("window-all-closed", () => {
+    if (process.platform !== "darwin") app.quit();
 });
 
 electron.ipcMain.on("get-id", (event) => {
@@ -366,7 +373,7 @@ electron.ipcMain.on("get-authkey", (event) => {
 });
 
 electron.ipcMain.on("local-server-status", (event) => {
-    event.returnValue = (localServerProc != null);
+    event.returnValue = localServerProc != null;
     return;
 });
 
@@ -375,8 +382,7 @@ electron.ipcMain.on("restart-server", (event) => {
         localServerProc.kill();
         localServerShouldRestart = true;
         return;
-    }
-    else {
+    } else {
         runLocalServer();
     }
     event.returnValue = true;
@@ -391,9 +397,9 @@ electron.ipcMain.on("reload-window", (event) => {
     return;
 });
 
-function getContextMenu() : any {
+function getContextMenu(): any {
     let menu = new electron.Menu();
-    let menuItem = new electron.MenuItem({label: "Testing", click: () => console.log("click testing!")});
+    let menuItem = new electron.MenuItem({ label: "Testing", click: () => console.log("click testing!") });
     menu.append(menuItem);
     return menu;
 }
@@ -404,32 +410,35 @@ function getFetchHeaders() {
     };
 }
 
-async function getClientDataPoll(loopNum : number) {
-    let lastTime = (loopNum >= 6);
+async function getClientDataPoll(loopNum: number) {
+    let lastTime = loopNum >= 6;
     let cdata = await getClientData(!lastTime, loopNum);
     if (lastTime || cdata != null) {
         return cdata;
     }
     await sleep(1000);
-    return getClientDataPoll(loopNum+1);
+    return getClientDataPoll(loopNum + 1);
 }
 
-function getClientData(willRetry : boolean, retryNum : number) {
+function getClientData(willRetry: boolean, retryNum: number) {
     let url = getBaseHostPort() + "/api/get-client-data";
     let fetchHeaders = getFetchHeaders();
-    return fetch(url, {headers: fetchHeaders}).then((resp) => handleJsonFetchResponse(url, resp)).then((data) => {
-        if (data == null) {
+    return fetch(url, { headers: fetchHeaders })
+        .then((resp) => handleJsonFetchResponse(url, resp))
+        .then((data) => {
+            if (data == null) {
+                return null;
+            }
+            return data.data;
+        })
+        .catch((err) => {
+            if (willRetry) {
+                console.log("error getting client-data from local-server, will retry", "(" + retryNum + ")");
+                return null;
+            }
+            console.log("error getting client-data from local-server, failed: ", err);
             return null;
-        }
-        return data.data;
-    }).catch((err) => {
-        if (willRetry) {
-            console.log("error getting client-data from local-server, will retry", "(" + retryNum + ")");
-            return null;
-        }
-        console.log("error getting client-data from local-server, failed: ", err);
-        return null;
-    });
+        });
 }
 
 function sendLSSC() {
@@ -479,23 +488,23 @@ function runLocalServer() {
     });
     proc.on("error", (e) => {
         console.log("error running local-server", e);
-    })
-    proc.stdout.on("data", output => {
+    });
+    proc.stdout.on("data", (output) => {
         return;
     });
-    proc.stderr.on("data", output => {
+    proc.stderr.on("data", (output) => {
         return;
     });
     return rtnPromise;
 }
 
-electron.ipcMain.on("context-screen", (event, {screenId}, {x, y}) => {
+electron.ipcMain.on("context-screen", (event, { screenId }, { x, y }) => {
     console.log("context-screen", screenId);
     let menu = getContextMenu();
-    menu.popup({x, y});
+    menu.popup({ x, y });
 });
 
-electron.ipcMain.on("context-editmenu", (event, {x, y}, opts) => {
+electron.ipcMain.on("context-editmenu", (event, { x, y }, opts) => {
     if (opts == null) {
         opts = {};
     }
@@ -503,22 +512,21 @@ electron.ipcMain.on("context-editmenu", (event, {x, y}, opts) => {
     let menu = new electron.Menu();
     let menuItem = null;
     if (opts.showCut) {
-        menuItem = new electron.MenuItem({label: "Cut", role: "cut"});
+        menuItem = new electron.MenuItem({ label: "Cut", role: "cut" });
         menu.append(menuItem);
     }
-    menuItem = new electron.MenuItem({label: "Copy", role: "copy"});
+    menuItem = new electron.MenuItem({ label: "Copy", role: "copy" });
     menu.append(menuItem);
-    menuItem = new electron.MenuItem({label: "Paste", role: "paste"});
+    menuItem = new electron.MenuItem({ label: "Paste", role: "paste" });
     menu.append(menuItem);
-    menu.popup({x, y});
+    menu.popup({ x, y });
 });
 
 async function createMainWindowWrap() {
     let clientData = null;
     try {
         clientData = await getClientDataPoll(1);
-    }
-    catch (e) {
+    } catch (e) {
         console.log("error getting local-server clientdata", e.toString());
     }
     MainWindow = createMainWindow(clientData);
@@ -532,14 +540,16 @@ async function sleep(ms) {
 }
 
 function logActiveState() {
-    let activeState = {fg: wasInFg, active: wasActive, open: true};
+    let activeState = { fg: wasInFg, active: wasActive, open: true };
     let url = getBaseHostPort() + "/api/log-active-state";
     let fetchHeaders = getFetchHeaders();
-    fetch(url, {method: "post", body: JSON.stringify(activeState), headers: fetchHeaders}).then((resp) => handleJsonFetchResponse(url, resp)).catch((err) => {
-        console.log("error logging active state", err)
-    });
+    fetch(url, { method: "post", body: JSON.stringify(activeState), headers: fetchHeaders })
+        .then((resp) => handleJsonFetchResponse(url, resp))
+        .catch((err) => {
+            console.log("error logging active state", err);
+        });
     // for next iteration
-    wasInFg = (MainWindow != null && MainWindow.isFocused());
+    wasInFg = MainWindow != null && MainWindow.isFocused();
     wasActive = false;
 }
 
@@ -561,17 +571,15 @@ function runActiveTimer() {
     GlobalAuthKey = readAuthKey();
     try {
         await runLocalServer();
-    }
-    catch (e) {
+    } catch (e) {
         console.log(e.toString());
     }
     setTimeout(runActiveTimer, 5000); // start active timer, wait 5s just to be safe
     await app.whenReady();
     await createMainWindowWrap();
-    app.on('activate', () => {
+    app.on("activate", () => {
         if (electron.BrowserWindow.getAllWindows().length === 0) {
             createMainWindowWrap().then();
         }
-    })
+    });
 })();
-
diff --git a/src/fullrenderer.tsx b/src/fullrenderer.tsx
index b80fb4da..7338968f 100644
--- a/src/fullrenderer.tsx
+++ b/src/fullrenderer.tsx
@@ -1,37 +1,60 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
-import type {RendererModelInitializeParams, TermOptsType, RendererContext, RendererOpts, SimpleBlobRendererComponent, RendererModelContainerApi, RendererPluginType, PtyDataType, RendererModel, RendererOptsUpdate, LineType, TermContextUnion, RendererContainerType} from "./types";
-import {PacketDataBuffer} from "./ptydata";
-import {debounce, throttle} from "throttle-debounce";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
+import type {
+    RendererModelInitializeParams,
+    TermOptsType,
+    RendererContext,
+    RendererOpts,
+    SimpleBlobRendererComponent,
+    RendererModelContainerApi,
+    RendererPluginType,
+    PtyDataType,
+    RendererModel,
+    RendererOptsUpdate,
+    LineType,
+    TermContextUnion,
+    RendererContainerType,
+} from "./types";
+import { PacketDataBuffer } from "./ptydata";
+import { debounce, throttle } from "throttle-debounce";
 
 type OV<V> = mobx.IObservableValue<V>;
 type CV<V> = mobx.IComputedValue<V>;
 
 @mobxReact.observer
-class FullRenderer extends React.Component<{rendererContainer : RendererContainerType, lineId : string, plugin : RendererPluginType, onHeightChange : () => void, initParams : RendererModelInitializeParams}, {}> {
-    model : RendererModel;
-    wrapperDivRef : React.RefObject<any> = React.createRef();
-    rszObs : ResizeObserver;
-    updateHeight_debounced : (newHeight : number) => void;
+class FullRenderer extends React.Component<
+    {
+        rendererContainer: RendererContainerType;
+        lineId: string;
+        plugin: RendererPluginType;
+        onHeightChange: () => void;
+        initParams: RendererModelInitializeParams;
+    },
+    {}
+> {
+    model: RendererModel;
+    wrapperDivRef: React.RefObject<any> = React.createRef();
+    rszObs: ResizeObserver;
+    updateHeight_debounced: (newHeight: number) => void;
 
-    constructor(props : any) {
+    constructor(props: any) {
         super(props);
-        let {rendererContainer, lineId, plugin, initParams} = this.props;
+        let { rendererContainer, lineId, plugin, initParams } = this.props;
         this.model = plugin.modelCtor();
         this.model.initialize(initParams);
         rendererContainer.registerRenderer(lineId, this.model);
         this.updateHeight_debounced = debounce(1000, this.updateHeight.bind(this));
     }
 
-    updateHeight(newHeight : number) : void {
+    updateHeight(newHeight: number): void {
         this.model.updateHeight(newHeight);
     }
 
-    handleResize(entries : ResizeObserverEntry[]) : void {
+    handleResize(entries: ResizeObserverEntry[]): void {
         if (this.props.onHeightChange) {
             this.props.onHeightChange();
         }
@@ -51,13 +74,13 @@ class FullRenderer extends React.Component<{rendererContainer : RendererContaine
         this.rszObs = new ResizeObserver(this.handleResize.bind(this));
         this.rszObs.observe(this.wrapperDivRef.current);
     }
-    
+
     componentDidMount() {
         this.checkRszObs();
     }
 
     componentWillUnmount() {
-        let {rendererContainer, lineId} = this.props;
+        let { rendererContainer, lineId } = this.props;
         rendererContainer.unloadRenderer(lineId);
         if (this.rszObs != null) {
             this.rszObs.disconnect();
@@ -70,20 +93,17 @@ class FullRenderer extends React.Component<{rendererContainer : RendererContaine
     }
 
     render() {
-        let {plugin} = this.props;
+        let { plugin } = this.props;
         let Comp = plugin.fullComponent;
         if (Comp == null) {
-            <div ref={this.wrapperDivRef}>
-                (no component found in plugin)
-            </div>
+            <div ref={this.wrapperDivRef}>(no component found in plugin)</div>;
         }
         return (
             <div ref={this.wrapperDivRef}>
-                <Comp model={this.model}/>
+                <Comp model={this.model} />
             </div>
         );
     }
 }
 
-export {FullRenderer};
-
+export { FullRenderer };
diff --git a/src/history.tsx b/src/history.tsx
index 9b22911d..e4216c11 100644
--- a/src/history.tsx
+++ b/src/history.tsx
@@ -1,44 +1,42 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
-import {GlobalModel, GlobalCommandRunner, Cmd} from "./model";
-import {HistoryItem, RemotePtrType, LineType, CmdDataType} from "./types";
+import { GlobalModel, GlobalCommandRunner, Cmd } from "./model";
+import { HistoryItem, RemotePtrType, LineType, CmdDataType } from "./types";
 import dayjs from "dayjs";
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import {Line} from "./linecomps";
-import {CmdStrCode} from "./elements";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import { Line } from "./linecomps";
+import { CmdStrCode } from "./elements";
 
-dayjs.extend(customParseFormat)
-dayjs.extend(localizedFormat)
+dayjs.extend(customParseFormat);
+dayjs.extend(localizedFormat);
 
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
-type OMap<K,V> = mobx.ObservableMap<K,V>;
+type OMap<K, V> = mobx.ObservableMap<K, V>;
 type CV<V> = mobx.IComputedValue<V>;
 
-function isBlank(s : string) {
-    return (s == null || s == "");
+function isBlank(s: string) {
+    return s == null || s == "";
 }
 
-function getHistoryViewTs(nowDate : Date, ts : number) : string {
+function getHistoryViewTs(nowDate: Date, ts: number): string {
     let itemDate = new Date(ts);
     if (nowDate.getFullYear() != itemDate.getFullYear()) {
         return dayjs(itemDate).format("M/D/YY");
-    }
-    else if (nowDate.getMonth() != itemDate.getMonth() || nowDate.getDate() != itemDate.getDate()) {
+    } else if (nowDate.getMonth() != itemDate.getMonth() || nowDate.getDate() != itemDate.getDate()) {
         return dayjs(itemDate).format("MMM D");
-    }
-    else {
+    } else {
         return dayjs(itemDate).format("h:mm A");
     }
 }
 
-function formatRemoteName(rnames : Record<string, string>, rptr : RemotePtrType) : string {
+function formatRemoteName(rnames: Record<string, string>, rptr: RemotePtrType): string {
     if (rptr == null || isBlank(rptr.remoteid)) {
         return "";
     }
@@ -52,7 +50,7 @@ function formatRemoteName(rnames : Record<string, string>, rptr : RemotePtrType)
     return "[" + rname + "]";
 }
 
-function formatSSName(snames : Record<string, string>, scrnames : Record<string, string>, item : HistoryItem) : string {
+function formatSSName(snames: Record<string, string>, scrnames: Record<string, string>, item: HistoryItem): string {
     if (isBlank(item.sessionid)) {
         return "";
     }
@@ -65,7 +63,7 @@ function formatSSName(snames : Record<string, string>, scrnames : Record<string,
     return sessionName;
 }
 
-function formatSessionName(snames : Record<string, string>, sessionId : string) : string {
+function formatSessionName(snames: Record<string, string>, sessionId: string): string {
     if (isBlank(sessionId)) {
         return "";
     }
@@ -78,15 +76,15 @@ function formatSessionName(snames : Record<string, string>, sessionId : string)
 
 @mobxReact.observer
 class HistoryView extends React.Component<{}, {}> {
-    tableRef : React.RefObject<any> = React.createRef();
-    tableWidth : OV<number> = mobx.observable.box(0, {name: "tableWidth"});
-    tableRszObs : ResizeObserver;
-    sessionDropdownActive : OV<boolean> = mobx.observable.box(false, {name: "sessionDropdownActive"});
-    remoteDropdownActive : OV<boolean> = mobx.observable.box(false, {name: "remoteDropdownActive"});
-    copiedItemId : OV<string> = mobx.observable.box(null, {name: "copiedItemId"});
-    
+    tableRef: React.RefObject<any> = React.createRef();
+    tableWidth: OV<number> = mobx.observable.box(0, { name: "tableWidth" });
+    tableRszObs: ResizeObserver;
+    sessionDropdownActive: OV<boolean> = mobx.observable.box(false, { name: "sessionDropdownActive" });
+    remoteDropdownActive: OV<boolean> = mobx.observable.box(false, { name: "remoteDropdownActive" });
+    copiedItemId: OV<string> = mobx.observable.box(null, { name: "copiedItemId" });
+
     @boundMethod
-    clickCloseHandler() : void {
+    clickCloseHandler(): void {
         GlobalModel.historyViewModel.closeView();
     }
 
@@ -101,14 +99,14 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    changeSearchText(e : any) {
+    changeSearchText(e: any) {
         mobx.action(() => {
             GlobalModel.historyViewModel.searchText.set(e.target.value);
         })();
     }
 
     @boundMethod
-    searchKeyDown(e : any) {
+    searchKeyDown(e: any) {
         if (e.code == "Enter") {
             e.preventDefault();
             GlobalModel.historyViewModel.submitSearch();
@@ -117,13 +115,12 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    handleSelect(historyId : string) {
+    handleSelect(historyId: string) {
         let hvm = GlobalModel.historyViewModel;
         mobx.action(() => {
             if (hvm.selectedItems.get(historyId)) {
                 hvm.selectedItems.delete(historyId);
-            }
-            else {
+            } else {
                 hvm.selectedItems.set(historyId, true);
             }
         })();
@@ -137,9 +134,8 @@ class HistoryView extends React.Component<{}, {}> {
             if (numSelected > 0) {
                 hvm.selectedItems.clear();
                 return;
-            }
-            else {
-                for (let i=0; i<hvm.items.length; i++) {
+            } else {
+                for (let i = 0; i < hvm.items.length; i++) {
                     hvm.selectedItems.set(hvm.items[i].historyid, true);
                 }
             }
@@ -152,11 +148,10 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    activateItem(historyId : string) {
+    activateItem(historyId: string) {
         if (GlobalModel.historyViewModel.activeItem.get() == historyId) {
             GlobalModel.historyViewModel.setActiveItem(null);
-        }
-        else {
+        } else {
             GlobalModel.historyViewModel.setActiveItem(historyId);
         }
     }
@@ -192,7 +187,7 @@ class HistoryView extends React.Component<{}, {}> {
         this.checkWidth();
     }
 
-    searchFromTsInputValue() : string {
+    searchFromTsInputValue(): string {
         let hvm = GlobalModel.historyViewModel;
         let fromDate = hvm.searchFromDate.get();
         if (fromDate == null) {
@@ -202,7 +197,7 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    handleFromTsChange(e : any) : void {
+    handleFromTsChange(e: any): void {
         let hvm = GlobalModel.historyViewModel;
         let newDate = e.target.value;
         let today = dayjs().format("YYYY-MM-DD");
@@ -215,7 +210,7 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    toggleSessionDropdown() : void {
+    toggleSessionDropdown(): void {
         mobx.action(() => {
             this.sessionDropdownActive.set(!this.sessionDropdownActive.get());
             if (this.sessionDropdownActive.get()) {
@@ -225,7 +220,7 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    clickLimitSession(sessionId : string) : void {
+    clickLimitSession(sessionId: string): void {
         let hvm = GlobalModel.historyViewModel;
         mobx.action(() => {
             this.sessionDropdownActive.set(false);
@@ -234,7 +229,7 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    toggleRemoteDropdown() : void {
+    toggleRemoteDropdown(): void {
         mobx.action(() => {
             this.remoteDropdownActive.set(!this.remoteDropdownActive.get());
             if (this.remoteDropdownActive.get()) {
@@ -244,7 +239,7 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    clickLimitRemote(remoteId : string) : void {
+    clickLimitRemote(remoteId: string): void {
         let hvm = GlobalModel.historyViewModel;
         mobx.action(() => {
             this.remoteDropdownActive.set(false);
@@ -253,7 +248,7 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    toggleShowMeta() : void {
+    toggleShowMeta(): void {
         let hvm = GlobalModel.historyViewModel;
         mobx.action(() => {
             hvm.setSearchShowMeta(!hvm.searchShowMeta.get());
@@ -261,7 +256,7 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    toggleFilterCmds() : void {
+    toggleFilterCmds(): void {
         let hvm = GlobalModel.historyViewModel;
         mobx.action(() => {
             hvm.setSearchFilterCmds(!hvm.searchFilterCmds.get());
@@ -269,13 +264,13 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    resetAllFilters() : void {
+    resetAllFilters(): void {
         let hvm = GlobalModel.historyViewModel;
         hvm.resetAllFilters();
     }
 
     @boundMethod
-    handleCopy(item : HistoryItem) : void {
+    handleCopy(item: HistoryItem): void {
         if (isBlank(item.cmdstr)) {
             return;
         }
@@ -291,7 +286,7 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    handleUse(item : HistoryItem) : void {
+    handleUse(item: HistoryItem): void {
         if (isBlank(item.cmdstr)) {
             return;
         }
@@ -301,15 +296,15 @@ class HistoryView extends React.Component<{}, {}> {
             setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
         })();
     }
-    
+
     render() {
-        let isHidden = (GlobalModel.activeMainView.get() != "history");
+        let isHidden = GlobalModel.activeMainView.get() != "history";
         if (isHidden) {
             return null;
         }
         let hvm = GlobalModel.historyViewModel;
-        let idx : number = 0;
-        let item : HistoryItem = null;
+        let idx: number = 0;
+        let item: HistoryItem = null;
         let items = hvm.items.slice();
         let nowDate = new Date();
         let snames = GlobalModel.getSessionNames();
@@ -327,34 +322,47 @@ class HistoryView extends React.Component<{}, {}> {
         }
         let activeItemId = hvm.activeItem.get();
         let activeItem = hvm.getHistoryItemById(activeItemId);
-        let activeLine : LineType = null;
+        let activeLine: LineType = null;
         if (activeItem != null) {
             activeLine = hvm.getLineById(activeItem.lineid);
         }
         let sessionIds = Object.keys(snames);
-        let sessionId : string = null;
+        let sessionId: string = null;
         let remoteIds = Object.keys(rnames);
-        let remoteId : string = null;
+        let remoteId: string = null;
         return (
-            <div className={cn("history-view", "alt-view", {"is-hidden": isHidden})}>
+            <div className={cn("history-view", "alt-view", { "is-hidden": isHidden })}>
                 <div className="header">
-                    <div className="history-title">
-                        HISTORY
-                    </div>
+                    <div className="history-title">HISTORY</div>
                     <div className="history-search">
                         <div className="main-search field">
                             <p className="control has-icons-left">
-                                <input className="input" type="text" placeholder="Exact String Search" value={hvm.searchText.get()} onChange={this.changeSearchText} onKeyDown={this.searchKeyDown}/>
+                                <input
+                                    className="input"
+                                    type="text"
+                                    placeholder="Exact String Search"
+                                    value={hvm.searchText.get()}
+                                    onChange={this.changeSearchText}
+                                    onKeyDown={this.searchKeyDown}
+                                />
                                 <span className="icon is-small is-left">
-                                    <i className="fa-sharp fa-solid fa-search"/>
+                                    <i className="fa-sharp fa-solid fa-search" />
                                 </span>
                             </p>
                         </div>
                         <div className="advanced-search">
-                            <div className={cn("dropdown", "session-dropdown", {"is-active": this.sessionDropdownActive.get()})}>
+                            <div
+                                className={cn("dropdown", "session-dropdown", {
+                                    "is-active": this.sessionDropdownActive.get(),
+                                })}
+                            >
                                 <div className="dropdown-trigger">
                                     <button onClick={this.toggleSessionDropdown} className="button is-small is-dark">
-                                        <span>{hvm.searchSessionId.get() == null ? "Limit Session" : formatSessionName(snames, hvm.searchSessionId.get())}</span>
+                                        <span>
+                                            {hvm.searchSessionId.get() == null
+                                                ? "Limit Session"
+                                                : formatSessionName(snames, hvm.searchSessionId.get())}
+                                        </span>
                                         <span className="icon is-small">
                                             <i className="fa-sharp fa-regular fa-angle-down" aria-hidden="true"></i>
                                         </span>
@@ -362,17 +370,37 @@ class HistoryView extends React.Component<{}, {}> {
                                 </div>
                                 <div className="dropdown-menu" role="menu">
                                     <div className="dropdown-content has-background-black-ter">
-                                        <div onClick={() => this.clickLimitSession(null) } key="all" className="dropdown-item">(all sessions)</div>
+                                        <div
+                                            onClick={() => this.clickLimitSession(null)}
+                                            key="all"
+                                            className="dropdown-item"
+                                        >
+                                            (all sessions)
+                                        </div>
                                         <For each="sessionId" of={sessionIds}>
-                                            <div onClick={() => this.clickLimitSession(sessionId) } key={sessionId} className="dropdown-item">#{snames[sessionId]}</div>
+                                            <div
+                                                onClick={() => this.clickLimitSession(sessionId)}
+                                                key={sessionId}
+                                                className="dropdown-item"
+                                            >
+                                                #{snames[sessionId]}
+                                            </div>
                                         </For>
                                     </div>
                                 </div>
                             </div>
-                            <div className={cn("dropdown", "remote-dropdown", {"is-active": this.remoteDropdownActive.get()})}>
+                            <div
+                                className={cn("dropdown", "remote-dropdown", {
+                                    "is-active": this.remoteDropdownActive.get(),
+                                })}
+                            >
                                 <div className="dropdown-trigger">
                                     <button onClick={this.toggleRemoteDropdown} className="button is-small is-dark">
-                                        <span>{hvm.searchRemoteId.get() == null ? "Limit Remote" : formatRemoteName(rnames, {remoteid: hvm.searchRemoteId.get()})}</span>
+                                        <span>
+                                            {hvm.searchRemoteId.get() == null
+                                                ? "Limit Remote"
+                                                : formatRemoteName(rnames, { remoteid: hvm.searchRemoteId.get() })}
+                                        </span>
                                         <span className="icon is-small">
                                             <i className="fa-sharp fa-regular fa-angle-down" aria-hidden="true"></i>
                                         </span>
@@ -380,26 +408,64 @@ class HistoryView extends React.Component<{}, {}> {
                                 </div>
                                 <div className="dropdown-menu" role="menu">
                                     <div className="dropdown-content has-background-black-ter">
-                                        <div onClick={() => this.clickLimitRemote(null) } key="all" className="dropdown-item">(all remotes)</div>
+                                        <div
+                                            onClick={() => this.clickLimitRemote(null)}
+                                            key="all"
+                                            className="dropdown-item"
+                                        >
+                                            (all remotes)
+                                        </div>
                                         <For each="remoteId" of={remoteIds}>
-                                            <div onClick={() => this.clickLimitRemote(remoteId) } key={remoteId} className="dropdown-item">[{rnames[remoteId]}]</div>
+                                            <div
+                                                onClick={() => this.clickLimitRemote(remoteId)}
+                                                key={remoteId}
+                                                className="dropdown-item"
+                                            >
+                                                [{rnames[remoteId]}]
+                                            </div>
                                         </For>
                                     </div>
                                 </div>
                             </div>
                             <div className="allow-meta search-checkbox">
-                                <div className="checkbox-container"><input onChange={this.toggleShowMeta} type="checkbox" checked={hvm.searchShowMeta.get()}/></div>
-                                <div onClick={this.toggleShowMeta} className="checkbox-text">Show MetaCmds</div>
-                            </div>
-                            <div className="fromts">
-                                <div onClick={this.toggleShowMeta} className="fromts-text">From:&nbsp;</div>
-                                <div>
-                                    <input type="date" onChange={this.handleFromTsChange} value={this.searchFromTsInputValue()} className="input is-small"/>
+                                <div className="checkbox-container">
+                                    <input
+                                        onChange={this.toggleShowMeta}
+                                        type="checkbox"
+                                        checked={hvm.searchShowMeta.get()}
+                                    />
+                                </div>
+                                <div onClick={this.toggleShowMeta} className="checkbox-text">
+                                    Show MetaCmds
                                 </div>
                             </div>
-                            <div className="filter-cmds search-checkbox" title="Filter common commands like 'ls' and 'cd' from the results">
-                                <div className="checkbox-container"><input onChange={this.toggleFilterCmds} type="checkbox" checked={hvm.searchFilterCmds.get()}/></div>
-                                <div onClick={this.toggleFilterCmds} className="checkbox-text">Filter Cmds</div>
+                            <div className="fromts">
+                                <div onClick={this.toggleShowMeta} className="fromts-text">
+                                    From:&nbsp;
+                                </div>
+                                <div>
+                                    <input
+                                        type="date"
+                                        onChange={this.handleFromTsChange}
+                                        value={this.searchFromTsInputValue()}
+                                        className="input is-small"
+                                    />
+                                </div>
+                            </div>
+                            <div
+                                className="filter-cmds search-checkbox"
+                                title="Filter common commands like 'ls' and 'cd' from the results"
+                            >
+                                <div className="checkbox-container">
+                                    <input
+                                        onChange={this.toggleFilterCmds}
+                                        type="checkbox"
+                                        checked={hvm.searchFilterCmds.get()}
+                                    />
+                                </div>
+                                <div onClick={this.toggleFilterCmds} className="checkbox-text">
+                                    Filter Cmds
+                                </div>
                             </div>
                             <div onClick={this.resetAllFilters} className="reset-button">
                                 Reset All
@@ -407,26 +473,49 @@ class HistoryView extends React.Component<{}, {}> {
                         </div>
                     </div>
                     <div className="close-div">
-                        <i onClick={this.clickCloseHandler} className="fa-sharp fa-solid fa-xmark"/>
+                        <i onClick={this.clickCloseHandler} className="fa-sharp fa-solid fa-xmark" />
                     </div>
                 </div>
-                <div className={cn("control-bar", "is-top", {"is-hidden": (items.length == 0)})}>
+                <div className={cn("control-bar", "is-top", { "is-hidden": items.length == 0 })}>
                     <div className="control-checkbox" onClick={this.handleControlCheckbox}>
-                        <i className={controlCheckboxIcon} title="Toggle Selection"/>
+                        <i className={controlCheckboxIcon} title="Toggle Selection" />
                     </div>
-                    <div className={cn("control-button delete-button", {"is-disabled": (numSelected == 0)}, {"is-active": hvm.deleteActive.get()})} onClick={this.handleClickDelete}>
-                        <i className="fa-sharp fa-solid fa-trash" title="Purge Selected Items"/> <span>Delete Items</span>
+                    <div
+                        className={cn(
+                            "control-button delete-button",
+                            { "is-disabled": numSelected == 0 },
+                            { "is-active": hvm.deleteActive.get() }
+                        )}
+                        onClick={this.handleClickDelete}
+                    >
+                        <i className="fa-sharp fa-solid fa-trash" title="Purge Selected Items" />{" "}
+                        <span>Delete Items</span>
+                    </div>
+                    <div className="spacer" />
+                    <div className="showing-text">
+                        Showing {offset + 1}-{offset + items.length}
+                    </div>
+                    <div
+                        className={cn("showing-btn", { "is-disabled": offset == 0 })}
+                        onClick={offset != 0 ? this.handlePrev : null}
+                    >
+                        <i className="fa-sharp fa-solid fa-chevron-left" />
+                    </div>
+                    <div className="btn-spacer" />
+                    <div
+                        className={cn("showing-btn", { "is-disabled": !hasMore })}
+                        onClick={hasMore ? this.handleNext : null}
+                    >
+                        <i className="fa-sharp fa-solid fa-chevron-right" />
                     </div>
-                    <div className="spacer"/>
-                    <div className="showing-text">Showing {offset+1}-{offset+items.length}</div>
-                    <div className={cn("showing-btn", {"is-disabled": (offset == 0)})} onClick={(offset != 0 ? this.handlePrev : null)}><i className="fa-sharp fa-solid fa-chevron-left"/></div>
-                    <div className="btn-spacer"/>
-                    <div className={cn("showing-btn", {"is-disabled": !hasMore})} onClick={hasMore ? this.handleNext : null}><i className="fa-sharp fa-solid fa-chevron-right"/></div>
                 </div>
                 <table className="history-table" cellSpacing="0" cellPadding="0" border={0} ref={this.tableRef}>
                     <tbody>
                         <For index="idx" each="item" of={items}>
-                            <tr key={item.historyid} className={cn("history-item", {"is-selected": hvm.selectedItems.get(item.historyid)})}>
+                            <tr
+                                key={item.historyid}
+                                className={cn("history-item", { "is-selected": hvm.selectedItems.get(item.historyid) })}
+                            >
                                 <td className="selectbox" onClick={() => this.handleSelect(item.historyid)}>
                                     <If condition={hvm.selectedItems.get(item.historyid)}>
                                         <i className="fa-sharp fa-regular fa-square-check"></i>
@@ -435,38 +524,55 @@ class HistoryView extends React.Component<{}, {}> {
                                         <i className="fa-sharp fa-regular fa-square"></i>
                                     </If>
                                 </td>
-                                <td className="bookmark" style={{display: "none"}}>
-                                    <i className="fa-sharp fa-regular fa-bookmark"/>
-                                </td>
-                                <td className="ts">
-                                    {getHistoryViewTs(nowDate, item.ts)}
-                                </td>
-                                <td className="session">
-                                    {formatSSName(snames, scrnames, item)}
-                                </td>
-                                <td className="remote">
-                                    {formatRemoteName(rnames, item.remote)}
+                                <td className="bookmark" style={{ display: "none" }}>
+                                    <i className="fa-sharp fa-regular fa-bookmark" />
                                 </td>
+                                <td className="ts">{getHistoryViewTs(nowDate, item.ts)}</td>
+                                <td className="session">{formatSSName(snames, scrnames, item)}</td>
+                                <td className="remote">{formatRemoteName(rnames, item.remote)}</td>
                                 <td className="cmdstr" onClick={() => this.activateItem(item.historyid)}>
-                                    <CmdStrCode cmdstr={item.cmdstr} onUse={() => this.handleUse(item)} onCopy={() => this.handleCopy(item)} isCopied={this.copiedItemId.get() == item.historyid} fontSize="normal" limitHeight={true}/>
+                                    <CmdStrCode
+                                        cmdstr={item.cmdstr}
+                                        onUse={() => this.handleUse(item)}
+                                        onCopy={() => this.handleCopy(item)}
+                                        isCopied={this.copiedItemId.get() == item.historyid}
+                                        fontSize="normal"
+                                        limitHeight={true}
+                                    />
                                 </td>
                             </tr>
                             <If condition={activeItemId == item.historyid}>
                                 <tr className="active-history-item">
                                     <td colSpan={6}>
-                                        <LineContainer key={activeItemId} historyId={activeItemId} width={this.tableWidth.get()}/>
+                                        <LineContainer
+                                            key={activeItemId}
+                                            historyId={activeItemId}
+                                            width={this.tableWidth.get()}
+                                        />
                                     </td>
                                 </tr>
                             </If>
                         </For>
                     </tbody>
                 </table>
-                <div className={cn("control-bar", {"is-hidden": (items.length == 0 || !hasMore)})}>
-                    <div className="spacer"/>
-                    <div className="showing-text">Showing {offset+1}-{offset+items.length}</div>
-                    <div className={cn("showing-btn", {"is-disabled": (offset == 0)})} onClick={(offset != 0 ? this.handlePrev : null)}><i className="fa-sharp fa-solid fa-chevron-left"/></div>
-                    <div className="btn-spacer"/>
-                    <div className={cn("showing-btn", {"is-disabled": !hasMore})} onClick={hasMore ? this.handleNext : null}><i className="fa-sharp fa-solid fa-chevron-right"/></div>
+                <div className={cn("control-bar", { "is-hidden": items.length == 0 || !hasMore })}>
+                    <div className="spacer" />
+                    <div className="showing-text">
+                        Showing {offset + 1}-{offset + items.length}
+                    </div>
+                    <div
+                        className={cn("showing-btn", { "is-disabled": offset == 0 })}
+                        onClick={offset != 0 ? this.handlePrev : null}
+                    >
+                        <i className="fa-sharp fa-solid fa-chevron-left" />
+                    </div>
+                    <div className="btn-spacer" />
+                    <div
+                        className={cn("showing-btn", { "is-disabled": !hasMore })}
+                        onClick={hasMore ? this.handleNext : null}
+                    >
+                        <i className="fa-sharp fa-solid fa-chevron-right" />
+                    </div>
                 </div>
                 <If condition={items.length == 0}>
                     <div className="no-items">
@@ -475,7 +581,8 @@ class HistoryView extends React.Component<{}, {}> {
                 </If>
                 <div className="alt-help">
                     <div className="help-entry">
-                        [Esc] to Close<br/>
+                        [Esc] to Close
+                        <br />
                     </div>
                 </div>
             </div>
@@ -483,14 +590,14 @@ class HistoryView extends React.Component<{}, {}> {
     }
 }
 
-class LineContainer extends React.Component<{historyId : string, width : number}, {}> {
-    line : LineType;
-    cmd : Cmd;
-    historyItem : HistoryItem;
-    visible : OV<boolean> = mobx.observable.box(true);
-    overrideCollapsed : OV<boolean> = mobx.observable.box(false);
-    
-    constructor(props : any) {
+class LineContainer extends React.Component<{ historyId: string; width: number }, {}> {
+    line: LineType;
+    cmd: Cmd;
+    historyItem: HistoryItem;
+    visible: OV<boolean> = mobx.observable.box(true);
+    overrideCollapsed: OV<boolean> = mobx.observable.box(false);
+
+    constructor(props: any) {
         super(props);
         let hvm = GlobalModel.historyViewModel;
         this.historyItem = hvm.getHistoryItemById(props.historyId);
@@ -502,7 +609,7 @@ class LineContainer extends React.Component<{historyId : string, width : number}
     }
 
     @boundMethod
-    handleHeightChange(lineNum : number, newHeight : number, oldHeight : number) : void {
+    handleHeightChange(lineNum: number, newHeight: number, oldHeight: number): void {
         return;
     }
 
@@ -515,14 +622,18 @@ class LineContainer extends React.Component<{historyId : string, width : number}
         GlobalModel.historyViewModel.closeView();
         GlobalCommandRunner.lineView(screen.sessionId, screen.screenId, this.line.linenum);
     }
-    
+
     render() {
         let hvm = GlobalModel.historyViewModel;
         if (this.historyItem == null || this.props.width == 0) {
             return null;
         }
         if (this.line == null) {
-            return <div className="line-container no-line"><div>[no line data]</div></div>;
+            return (
+                <div className="line-container no-line">
+                    <div>[no line data]</div>
+                </div>
+            );
         }
         let width = this.props.width;
         width = width - 50;
@@ -541,17 +652,29 @@ class LineContainer extends React.Component<{historyId : string, width : number}
             <div className="line-container">
                 <If condition={canViewInContext}>
                     <div className="line-context">
-                        <div title="View in Context" className="vic-btn" onClick={this.viewInContext}><i className="fa-sharp fa-solid fa-right"/> {ssStr}</div>
+                        <div title="View in Context" className="vic-btn" onClick={this.viewInContext}>
+                            <i className="fa-sharp fa-solid fa-right" /> {ssStr}
+                        </div>
                     </div>
                 </If>
                 <If condition={session == null}>
-                    <div className="no-line-context"/>
+                    <div className="no-line-context" />
                 </If>
-                <Line screen={hvm.specialLineContainer} line={this.line} width={width} staticRender={false} visible={this.visible} onHeightChange={this.handleHeightChange} overrideCollapsed={this.overrideCollapsed} topBorder={false} renderMode="normal" noSelect={true}/>
+                <Line
+                    screen={hvm.specialLineContainer}
+                    line={this.line}
+                    width={width}
+                    staticRender={false}
+                    visible={this.visible}
+                    onHeightChange={this.handleHeightChange}
+                    overrideCollapsed={this.overrideCollapsed}
+                    topBorder={false}
+                    renderMode="normal"
+                    noSelect={true}
+                />
             </div>
         );
     }
 }
 
-
-export {HistoryView};
+export { HistoryView };
diff --git a/src/linecomps.tsx b/src/linecomps.tsx
index fd25f50e..7d8d986d 100644
--- a/src/linecomps.tsx
+++ b/src/linecomps.tsx
@@ -5,41 +5,22 @@ import { sprintf } from "sprintf-js";
 import { boundMethod } from "autobind-decorator";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
-import {
-  If,
-  For,
-  When,
-  Otherwise,
-  Choose,
-} from "tsx-control-statements/components";
-import {
-  GlobalModel,
-  GlobalCommandRunner,
-  Session,
-  Cmd,
-  ScreenLines,
-  Screen,
-  getTermPtyData,
-} from "./model";
-import {
-  windowWidthToCols,
-  windowHeightToRows,
-  termHeightFromRows,
-  termWidthFromCols,
-} from "./textmeasure";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
+import { GlobalModel, GlobalCommandRunner, Session, Cmd, ScreenLines, Screen, getTermPtyData } from "./model";
+import { windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols } from "./textmeasure";
 import type {
-  LineType,
-  CmdDataType,
-  RemoteType,
-  RemotePtrType,
-  RenderModeType,
-  RendererContext,
-  RendererOpts,
-  SimpleBlobRendererComponent,
-  RendererPluginType,
-  LineHeightChangeCallbackType,
-  RendererModelInitializeParams,
-  RendererModel,
+    LineType,
+    CmdDataType,
+    RemoteType,
+    RemotePtrType,
+    RenderModeType,
+    RendererContext,
+    RendererOpts,
+    SimpleBlobRendererComponent,
+    RendererPluginType,
+    LineHeightChangeCallbackType,
+    RendererModelInitializeParams,
+    RendererModel,
 } from "./types";
 import cn from "classnames";
 import { TermWrap } from "./term";
@@ -59,1194 +40,1079 @@ type OArr<V> = mobx.IObservableArray<V>;
 type OMap<K, V> = mobx.ObservableMap<K, V>;
 
 type RendererComponentProps = {
-  screen: LineContainerModel;
-  line: LineType;
-  width: number;
-  staticRender: boolean;
-  visible: OV<boolean>;
-  onHeightChange: LineHeightChangeCallbackType;
-  collapsed: boolean;
+    screen: LineContainerModel;
+    line: LineType;
+    width: number;
+    staticRender: boolean;
+    visible: OV<boolean>;
+    onHeightChange: LineHeightChangeCallbackType;
+    collapsed: boolean;
 };
 type RendererComponentType = {
-  new (props: RendererComponentProps): React.Component<
-    RendererComponentProps,
-    {}
-  >;
+    new (props: RendererComponentProps): React.Component<RendererComponentProps, {}>;
 };
 
 function getShortVEnv(venvDir: string): string {
-  if (isBlank(venvDir)) {
-    return "";
-  }
-  let lastSlash = venvDir.lastIndexOf("/");
-  if (lastSlash == -1) {
-    return venvDir;
-  }
-  return venvDir.substr(lastSlash + 1);
+    if (isBlank(venvDir)) {
+        return "";
+    }
+    let lastSlash = venvDir.lastIndexOf("/");
+    if (lastSlash == -1) {
+        return venvDir;
+    }
+    return venvDir.substr(lastSlash + 1);
 }
 
-function makeFullRemoteRef(
-  ownerName: string,
-  remoteRef: string,
-  name: string
-): string {
-  if (isBlank(ownerName) && isBlank(name)) {
-    return remoteRef;
-  }
-  if (!isBlank(ownerName) && isBlank(name)) {
-    return ownerName + ":" + remoteRef;
-  }
-  if (isBlank(ownerName) && !isBlank(name)) {
-    return remoteRef + ":" + name;
-  }
-  return ownerName + ":" + remoteRef + ":" + name;
+function makeFullRemoteRef(ownerName: string, remoteRef: string, name: string): string {
+    if (isBlank(ownerName) && isBlank(name)) {
+        return remoteRef;
+    }
+    if (!isBlank(ownerName) && isBlank(name)) {
+        return ownerName + ":" + remoteRef;
+    }
+    if (isBlank(ownerName) && !isBlank(name)) {
+        return remoteRef + ":" + name;
+    }
+    return ownerName + ":" + remoteRef + ":" + name;
 }
 
 function getRemoteStr(rptr: RemotePtrType): string {
-  if (rptr == null || isBlank(rptr.remoteid)) {
-    return "(invalid remote)";
-  }
-  let username = isBlank(rptr.ownerid)
-    ? null
-    : GlobalModel.resolveUserIdToName(rptr.ownerid);
-  let remoteRef = GlobalModel.resolveRemoteIdToRef(rptr.remoteid);
-  let fullRef = makeFullRemoteRef(username, remoteRef, rptr.name);
-  return fullRef;
+    if (rptr == null || isBlank(rptr.remoteid)) {
+        return "(invalid remote)";
+    }
+    let username = isBlank(rptr.ownerid) ? null : GlobalModel.resolveUserIdToName(rptr.ownerid);
+    let remoteRef = GlobalModel.resolveRemoteIdToRef(rptr.remoteid);
+    let fullRef = makeFullRemoteRef(username, remoteRef, rptr.name);
+    return fullRef;
 }
 
 function replaceHomePath(path: string, homeDir: string): string {
-  if (path == homeDir) {
-    return "~";
-  }
-  if (path.startsWith(homeDir + "/")) {
-    return "~" + path.substr(homeDir.length);
-  }
-  return path;
+    if (path == homeDir) {
+        return "~";
+    }
+    if (path.startsWith(homeDir + "/")) {
+        return "~" + path.substr(homeDir.length);
+    }
+    return path;
 }
 
 function getCwdStr(remote: RemoteType, state: Record<string, string>): string {
-  if (state == null || isBlank(state.cwd)) {
-    return "~";
-  }
-  let cwd = state.cwd;
-  if (remote && remote.remotevars.home) {
-    cwd = replaceHomePath(cwd, remote.remotevars.home);
-  }
-  return cwd;
+    if (state == null || isBlank(state.cwd)) {
+        return "~";
+    }
+    let cwd = state.cwd;
+    if (remote && remote.remotevars.home) {
+        cwd = replaceHomePath(cwd, remote.remotevars.home);
+    }
+    return cwd;
 }
 
 @mobxReact.observer
-class LineAvatar extends React.Component<
-  { line: LineType; cmd: Cmd; onRightClick?: (e: any) => void },
-  {}
-> {
-  render() {
-    let { line, cmd } = this.props;
-    let lineNumStr = (line.linenumtemp ? "~" : "") + String(line.linenum);
-    let status = cmd != null ? cmd.getStatus() : "done";
-    let rtnstate = cmd != null ? cmd.getRtnState() : false;
-    let isComment = line.linetype == "text";
-    return (
-      <div
-        onContextMenu={this.props.onRightClick}
-        className={cn(
-          "avatar",
-          "num-" + lineNumStr.length,
-          "status-" + status,
-          { ephemeral: line.ephemeral },
-          { rtnstate: rtnstate }
-        )}
-      >
-        {lineNumStr}
-        <If condition={status == "hangup" || status == "error"}>
-          <i className="fa-sharp fa-solid fa-triangle-exclamation status-icon" />
-        </If>
-        <If condition={status == "detached"}>
-          <i className="fa-sharp fa-solid fa-rotate status-icon" />
-        </If>
-        <If condition={isComment}>
-          <i className="fa-sharp fa-solid fa-comment comment-icon" />
-        </If>
-      </div>
-    );
-  }
+class LineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRightClick?: (e: any) => void }, {}> {
+    render() {
+        let { line, cmd } = this.props;
+        let lineNumStr = (line.linenumtemp ? "~" : "") + String(line.linenum);
+        let status = cmd != null ? cmd.getStatus() : "done";
+        let rtnstate = cmd != null ? cmd.getRtnState() : false;
+        let isComment = line.linetype == "text";
+        return (
+            <div
+                onContextMenu={this.props.onRightClick}
+                className={cn(
+                    "avatar",
+                    "num-" + lineNumStr.length,
+                    "status-" + status,
+                    { ephemeral: line.ephemeral },
+                    { rtnstate: rtnstate }
+                )}
+            >
+                {lineNumStr}
+                <If condition={status == "hangup" || status == "error"}>
+                    <i className="fa-sharp fa-solid fa-triangle-exclamation status-icon" />
+                </If>
+                <If condition={status == "detached"}>
+                    <i className="fa-sharp fa-solid fa-rotate status-icon" />
+                </If>
+                <If condition={isComment}>
+                    <i className="fa-sharp fa-solid fa-comment comment-icon" />
+                </If>
+            </div>
+        );
+    }
 }
 
 @mobxReact.observer
-class SmallLineAvatar extends React.Component<
-  { line: LineType; cmd: Cmd; onRightClick?: (e: any) => void },
-  {}
-> {
-  render() {
-    let { line, cmd } = this.props;
-    let lineNumStr = (line.linenumtemp ? "~" : "#") + String(line.linenum);
-    let status = cmd != null ? cmd.getStatus() : "done";
-    let rtnstate = cmd != null ? cmd.getRtnState() : false;
-    let exitcode = cmd != null ? cmd.getExitCode() : 0;
-    let isComment = line.linetype == "text";
-    let icon: string = null;
-    let iconTitle = null;
-    let iconColor = "auto";
-    if (isComment) {
-      icon = "fa-comment";
-      iconTitle = "comment";
-    } else if (status == "done") {
-      icon = exitcode === 0 ? "fa-check" : "fa-xmark";
-      iconTitle = exitcode === 0 ? "success" : "fail";
-      iconColor = exitcode === 0 ? "auto" : "red";
-    } else if (status == "hangup" || status == "error") {
-      icon = "fa-triangle-exclamation";
-      iconTitle = status;
-      iconColor = "yellow";
-    } else if (status == "running" || "detached") {
-      icon = "fa-rotate";
-      iconTitle = "running";
-    } else {
-      icon = "fa-square-question";
-      iconTitle = "unknown";
+class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRightClick?: (e: any) => void }, {}> {
+    render() {
+        let { line, cmd } = this.props;
+        let lineNumStr = (line.linenumtemp ? "~" : "#") + String(line.linenum);
+        let status = cmd != null ? cmd.getStatus() : "done";
+        let rtnstate = cmd != null ? cmd.getRtnState() : false;
+        let exitcode = cmd != null ? cmd.getExitCode() : 0;
+        let isComment = line.linetype == "text";
+        let icon: string = null;
+        let iconTitle = null;
+        let iconColor = "auto";
+        if (isComment) {
+            icon = "fa-comment";
+            iconTitle = "comment";
+        } else if (status == "done") {
+            icon = exitcode === 0 ? "fa-check" : "fa-xmark";
+            iconTitle = exitcode === 0 ? "success" : "fail";
+            iconColor = exitcode === 0 ? "auto" : "red";
+        } else if (status == "hangup" || status == "error") {
+            icon = "fa-triangle-exclamation";
+            iconTitle = status;
+            iconColor = "yellow";
+        } else if (status == "running" || "detached") {
+            icon = "fa-rotate";
+            iconTitle = "running";
+        } else {
+            icon = "fa-square-question";
+            iconTitle = "unknown";
+        }
+        return (
+            <div
+                onContextMenu={this.props.onRightClick}
+                className={cn("simple-line-status", "status-" + status, rtnstate ? "has-rtnstate" : null)}
+            >
+                <span className="linenum">{lineNumStr}</span>
+                <i title={iconTitle} className={cn("fa-sharp fa-solid", icon)} style={{ color: iconColor }} />
+            </div>
+        );
     }
-    return (
-      <div
-        onContextMenu={this.props.onRightClick}
-        className={cn(
-          "simple-line-status",
-          "status-" + status,
-          rtnstate ? "has-rtnstate" : null
-        )}
-      >
-        <span className="linenum">{lineNumStr}</span>
-        <i
-          title={iconTitle}
-          className={cn("fa-sharp fa-solid", icon)}
-          style={{ color: iconColor }}
-        />
-      </div>
-    );
-  }
 }
 
 @mobxReact.observer
 class LineCmd extends React.Component<
-  {
-    screen: LineContainerModel;
-    line: LineType;
-    width: number;
-    staticRender: boolean;
-    visible: OV<boolean>;
-    onHeightChange: LineHeightChangeCallbackType;
-    topBorder: boolean;
-    renderMode: RenderModeType;
-    overrideCollapsed: OV<boolean>;
-    noSelect?: boolean;
-    showHints?: boolean;
-  },
-  {}
+    {
+        screen: LineContainerModel;
+        line: LineType;
+        width: number;
+        staticRender: boolean;
+        visible: OV<boolean>;
+        onHeightChange: LineHeightChangeCallbackType;
+        topBorder: boolean;
+        renderMode: RenderModeType;
+        overrideCollapsed: OV<boolean>;
+        noSelect?: boolean;
+        showHints?: boolean;
+    },
+    {}
 > {
-  lineRef: React.RefObject<any> = React.createRef();
-  cmdTextRef: React.RefObject<any> = React.createRef();
-  rtnStateDiff: mobx.IObservableValue<string> = mobx.observable.box(null, {
-    name: "linecmd-rtn-state-diff",
-  });
-  rtnStateDiffFetched: boolean = false;
-  lastHeight: number;
-  isOverflow: OV<boolean> = mobx.observable.box(false, {
-    name: "line-overflow",
-  });
-  isMinimised: OV<boolean> = mobx.observable.box(false, {
-    name: "line-minimised",
-  });
-  isCmdExpanded: OV<boolean> = mobx.observable.box(false, {
-    name: "cmd-expanded",
-  });
-
-  constructor(props) {
-    super(props);
-  }
-
-  checkStateDiffLoad(): void {
-    let { screen, line, staticRender, visible } = this.props;
-    if (staticRender) {
-      return;
-    }
-    if (!visible.get()) {
-      if (this.rtnStateDiffFetched) {
-        this.rtnStateDiffFetched = false;
-        this.setRtnStateDiff(null);
-      }
-      return;
-    }
-    let cmd = screen.getCmd(line);
-    if (cmd == null || !cmd.getRtnState() || this.rtnStateDiffFetched) {
-      return;
-    }
-    if (cmd.getStatus() != "done") {
-      return;
-    }
-    this.fetchRtnStateDiff();
-  }
-
-  fetchRtnStateDiff(): void {
-    if (this.rtnStateDiffFetched) {
-      return;
-    }
-    let { line } = this.props;
-    this.rtnStateDiffFetched = true;
-    let usp = new URLSearchParams({
-      linenum: String(line.linenum),
-      screenid: line.screenid,
-      lineid: line.lineid,
+    lineRef: React.RefObject<any> = React.createRef();
+    cmdTextRef: React.RefObject<any> = React.createRef();
+    rtnStateDiff: mobx.IObservableValue<string> = mobx.observable.box(null, {
+        name: "linecmd-rtn-state-diff",
     });
-    let url = GlobalModel.getBaseHostPort() + "/api/rtnstate?" + usp.toString();
-    let fetchHeaders = GlobalModel.getFetchHeaders();
-    fetch(url, { headers: fetchHeaders })
-      .then((resp) => {
-        if (!resp.ok) {
-          throw new Error(
-            sprintf(
-              "Bad fetch response for /api/rtnstate: %d %s",
-              resp.status,
-              resp.statusText
-            )
-          );
+    rtnStateDiffFetched: boolean = false;
+    lastHeight: number;
+    isOverflow: OV<boolean> = mobx.observable.box(false, {
+        name: "line-overflow",
+    });
+    isMinimised: OV<boolean> = mobx.observable.box(false, {
+        name: "line-minimised",
+    });
+    isCmdExpanded: OV<boolean> = mobx.observable.box(false, {
+        name: "cmd-expanded",
+    });
+
+    constructor(props) {
+        super(props);
+    }
+
+    checkStateDiffLoad(): void {
+        let { screen, line, staticRender, visible } = this.props;
+        if (staticRender) {
+            return;
         }
-        return resp.text();
-      })
-      .then((text) => {
-        this.setRtnStateDiff(text ?? "");
-      })
-      .catch((err) => {
-        this.setRtnStateDiff("ERROR " + err.toString());
-      });
-  }
-
-  setRtnStateDiff(val: string): void {
-    mobx.action(() => {
-      this.rtnStateDiff.set(val);
-    })();
-  }
-
-  componentDidMount() {
-    this.componentDidUpdate(null, null, null);
-    this.checkCmdText();
-  }
-
-  @boundMethod
-  handleExpandCmd(): void {
-    mobx.action(() => {
-      this.isCmdExpanded.set(true);
-    })();
-  }
-
-  renderCmdText(cmd: Cmd): any {
-    if (cmd == null) {
-      return (
-        <div className="metapart-mono cmdtext">
-          <span className="term-bright-green">(cmd not found)</span>
-        </div>
-      );
-    }
-    if (this.isCmdExpanded.get()) {
-      return (
-        <React.Fragment>
-          <div key="meta2" className="meta meta-line2">
-            <div className="metapart-mono cmdtext">
-              <Prompt rptr={cmd.remote} festate={cmd.getRemoteFeState()} />
-            </div>
-          </div>
-          <div key="meta3" className="meta meta-line3 cmdtext-expanded-wrapper">
-            <div className="cmdtext-expanded">
-              {lineutil.getFullCmdText(cmd.getCmdStr())}
-            </div>
-          </div>
-        </React.Fragment>
-      );
-    }
-    let isMultiLine = lineutil.isMultiLineCmdText(cmd.getCmdStr());
-    return (
-      <div key="meta2" className="meta meta-line2" ref={this.cmdTextRef}>
-        <div className="metapart-mono cmdtext">
-          <Prompt rptr={cmd.remote} festate={cmd.getRemoteFeState()} />
-          <span> </span>
-          <span>{lineutil.getSingleLineCmdText(cmd.getCmdStr())}</span>
-        </div>
-        <If condition={this.isOverflow.get() || isMultiLine}>
-          <div className="cmdtext-overflow" onClick={this.handleExpandCmd}>
-            ...&#x25BC;
-          </div>
-        </If>
-      </div>
-    );
-  }
-
-  // TODO: this might not be necessary anymore because we're using this.lastHeight
-  getSnapshotBeforeUpdate(prevProps, prevState): { height: number } {
-    let elem = this.lineRef.current;
-    if (elem == null) {
-      return { height: 0 };
-    }
-    return { height: elem.offsetHeight };
-  }
-
-  componentDidUpdate(prevProps, prevState, snapshot: { height: number }): void {
-    this.handleHeightChange();
-    this.checkStateDiffLoad();
-    this.checkCmdText();
-  }
-
-  checkCmdText() {
-    let metaElem = this.cmdTextRef.current;
-    if (metaElem == null || metaElem.childNodes.length == 0) {
-      return;
-    }
-    let metaElemWidth = metaElem.offsetWidth;
-    if (metaElemWidth == 0) {
-      return;
-    }
-    let metaChild = metaElem.firstChild;
-    if (metaChild == null) {
-      return;
-    }
-    let children = metaChild.childNodes;
-    let childWidth = 0;
-    for (let i = 0; i < children.length; i++) {
-      let ch = children[i];
-      childWidth += ch.offsetWidth;
-    }
-    let isOverflow = childWidth > metaElemWidth;
-    if (isOverflow && isOverflow != this.isOverflow.get()) {
-      mobx.action(() => {
-        this.isOverflow.set(isOverflow);
-      })();
-    }
-  }
-
-  @boundMethod
-  handleHeightChange() {
-    if (this.props.onHeightChange == null) {
-      return;
-    }
-    let { line } = this.props;
-    let curHeight = 0;
-    let elem = this.lineRef.current;
-    if (elem != null) {
-      curHeight = elem.offsetHeight;
-    }
-    if (this.lastHeight == curHeight) {
-      return;
-    }
-    let lastHeight = this.lastHeight;
-    this.lastHeight = curHeight;
-    this.props.onHeightChange(line.linenum, curHeight, lastHeight);
-    // console.log("line height change: ", line.linenum, lastHeight, "=>", curHeight);
-  }
-
-  @boundMethod
-  handleClick() {
-    let { line, noSelect } = this.props;
-    if (noSelect) {
-      return;
-    }
-    let sel = window.getSelection();
-    if (this.lineRef.current != null) {
-      let selText = sel.toString();
-      if (
-        sel.anchorNode != null &&
-        this.lineRef.current.contains(sel.anchorNode) &&
-        !isBlank(selText)
-      ) {
-        return;
-      }
-    }
-    GlobalCommandRunner.screenSelectLine(String(line.linenum), "cmd");
-  }
-
-  @boundMethod
-  clickStar() {
-    let { line } = this.props;
-    if (!line.star || line.star == 0) {
-      GlobalCommandRunner.lineStar(line.lineid, 1);
-    } else {
-      GlobalCommandRunner.lineStar(line.lineid, 0);
-    }
-  }
-
-  @boundMethod
-  clickPin() {
-    let { line } = this.props;
-    if (!line.pinned) {
-      GlobalCommandRunner.linePin(line.lineid, true);
-    } else {
-      GlobalCommandRunner.linePin(line.lineid, false);
-    }
-  }
-
-  @boundMethod
-  clickBookmark() {
-    let { line } = this.props;
-    GlobalCommandRunner.lineBookmark(line.lineid);
-  }
-
-  @boundMethod
-  clickMinimise() {
-    this.isMinimised.set(!this.isMinimised.get());
-  }
-
-  @boundMethod
-  handleResizeButton() {
-    console.log("resize button");
-  }
-
-  getIsHidePrompt(): boolean {
-    let { line } = this.props;
-    let rendererPlugin: RendererPluginType = null;
-    let isNoneRenderer = line.renderer == "none";
-    if (
-      !isBlank(line.renderer) &&
-      line.renderer != "terminal" &&
-      !isNoneRenderer
-    ) {
-      rendererPlugin = PluginModel.getRendererPluginByName(line.renderer);
-    }
-    let hidePrompt = rendererPlugin != null && rendererPlugin.hidePrompt;
-    return hidePrompt;
-  }
-
-  getTerminalRendererHeight(cmd: Cmd): number {
-    let { screen, line, width, topBorder, renderMode } = this.props;
-    // header is 36px tall, padding+border = 6px
-    // zero-terminal is 0px
-    // terminal-wrapper overhead is 11px (margin/padding)
-    // inner-height, if zero-lines => 42
-    //               else: 53+(lines*lineheight)
-    let height = 36 + 6; // height of zero height terminal
-    let usedRows = screen.getUsedRows(
-      lineutil.getRendererContext(line),
-      line,
-      cmd,
-      width
-    );
-    if (usedRows > 0) {
-      height =
-        36 +
-        6 +
-        11 +
-        termHeightFromRows(usedRows, GlobalModel.termFontSize.get());
-    }
-    return height;
-  }
-
-  @boundMethod
-  onAvatarRightClick(e: any): void {
-    let { line, noSelect } = this.props;
-    if (noSelect) {
-      return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-    if (line != null) {
-      mobx.action(() => {
-        GlobalModel.lineSettingsModal.set(line.linenum);
-      })();
-    }
-  }
-
-  renderSimple() {
-    let { screen, line, topBorder } = this.props;
-    let cmd = screen.getCmd(line);
-    let height: number = 0;
-    if (isBlank(line.renderer) || line.renderer == "terminal") {
-      height = this.getTerminalRendererHeight(cmd);
-    } else {
-      // header is 16px tall with hide-prompt, 36px otherwise
-      let { screen, line, width } = this.props;
-      let hidePrompt = this.getIsHidePrompt();
-      let usedRows = screen.getUsedRows(
-        lineutil.getRendererContext(line),
-        line,
-        cmd,
-        width
-      );
-      height = (hidePrompt ? 16 + 6 : 36 + 6) + usedRows;
-    }
-    let formattedTime = lineutil.getLineDateTimeStr(line.ts);
-    let mainDivCn = cn("line", "line-cmd", "line-simple", {
-      "top-border": topBorder,
-    });
-    return (
-      <div
-        className={mainDivCn}
-        ref={this.lineRef}
-        data-lineid={line.lineid}
-        data-linenum={line.linenum}
-        data-screenid={line.screenid}
-        style={{ height: height }}
-      >
-        <SmallLineAvatar line={line} cmd={cmd} />
-        <div className="ts">{formattedTime}</div>
-      </div>
-    );
-  }
-
-  @boundMethod
-  handleLineSettings(e: any): void {
-    e.preventDefault();
-    e.stopPropagation();
-    let { line } = this.props;
-    if (line != null) {
-      mobx.action(() => {
-        GlobalModel.lineSettingsModal.set(line.linenum);
-      })();
-    }
-  }
-
-  renderMeta1(cmd: Cmd) {
-    let { line } = this.props;
-    let termOpts = cmd.getTermOpts();
-    let formattedTime = lineutil.getLineDateTimeStr(line.ts);
-    let renderer = line.renderer;
-    return (
-      <div key="meta1" className="meta meta-line1">
-        <SmallLineAvatar line={line} cmd={cmd} />
-        <div className="ts">{formattedTime}</div>
-        <div>&nbsp;</div>
-        <If condition={!isBlank(renderer) && renderer != "terminal"}>
-          <div className="renderer">
-            <i className="fa-sharp fa-solid fa-fill" />
-            {renderer}&nbsp;
-          </div>
-        </If>
-        <div className="termopts">
-          ({termOpts.rows}x{termOpts.cols})
-        </div>
-        <div className="settings" onClick={this.handleLineSettings}>
-          <i className="fa-sharp fa-solid fa-gear" />
-        </div>
-      </div>
-    );
-  }
-
-  getRendererOpts(cmd: Cmd): RendererOpts {
-    let { screen } = this.props;
-    return {
-      maxSize: screen.getMaxContentSize(),
-      idealSize: screen.getIdealContentSize(),
-      termOpts: cmd.getTermOpts(),
-      termFontSize: GlobalModel.termFontSize.get(),
-    };
-  }
-
-  makeRendererModelInitializeParams(): RendererModelInitializeParams {
-    let { screen, line } = this.props;
-    let context = lineutil.getRendererContext(line);
-    let cmd = screen.getCmd(line); // won't be null
-    let savedHeight = screen.getContentHeight(context);
-    if (savedHeight == null) {
-      if (line.contentheight != null && line.contentheight != -1) {
-        savedHeight = line.contentheight;
-      } else {
-        savedHeight = 0;
-      }
-    }
-    let api = {
-      saveHeight: (height: number) => {
-        screen.setContentHeight(lineutil.getRendererContext(line), height);
-      },
-      onFocusChanged: (focus: boolean) => {
-        screen.setTermFocus(line.linenum, focus);
-      },
-      dataHandler: (data: string, model: RendererModel) => {
-        cmd.handleDataFromRenderer(data, model);
-      },
-    };
-    return {
-      context: context,
-      isDone: !cmd.isRunning(),
-      savedHeight: savedHeight,
-      opts: this.getRendererOpts(cmd),
-      ptyDataSource: getTermPtyData,
-      api: api,
-      rawCmd: cmd.getAsWebCmd(line.lineid),
-    };
-  }
-
-  render() {
-    let { screen, line, width, staticRender, visible, topBorder, renderMode } =
-      this.props;
-    let model = GlobalModel;
-    let lineid = line.lineid;
-    let isVisible = visible.get();
-    if (staticRender || !isVisible) {
-      return this.renderSimple();
-    }
-    let formattedTime = lineutil.getLineDateTimeStr(line.ts);
-    let cmd = screen.getCmd(line);
-    if (cmd == null) {
-      return (
-        <div
-          className="line line-invalid"
-          ref={this.lineRef}
-          data-lineid={line.lineid}
-          data-linenum={line.linenum}
-          data-screenid={line.screenid}
-        >
-          [cmd not found '{line.lineid}']
-        </div>
-      );
-    }
-    let status = cmd.getStatus();
-    let lineNumStr = (line.linenumtemp ? "~" : "") + String(line.linenum);
-    let isSelected = mobx
-      .computed(() => screen.getSelectedLine() == line.linenum, {
-        name: "computed-isSelected",
-      })
-      .get();
-    let isPhysicalFocused = mobx
-      .computed(() => screen.getIsFocused(line.linenum), {
-        name: "computed-getIsFocused",
-      })
-      .get();
-    let isFocused = mobx
-      .computed(
-        () => {
-          let screenFocusType = screen.getFocusType();
-          return isPhysicalFocused && screenFocusType == "cmd";
-        },
-        { name: "computed-isFocused" }
-      )
-      .get();
-    let isStatic = staticRender;
-    let isRunning = cmd.isRunning();
-    let isExpanded = this.isCmdExpanded.get();
-    let rsdiff = this.rtnStateDiff.get();
-    // console.log("render", "#" + line.linenum, termHeight, usedRows, cmd.getStatus(), (this.rtnStateDiff.get() != null), (!cmd.isRunning() ? "cmd-done" : "running"));
-    let mainDivCn = cn(
-      "line",
-      "line-cmd",
-      { focus: isFocused },
-      { "cmd-done": !isRunning },
-      { "has-rtnstate": cmd.getRtnState() },
-      { "top-border": topBorder }
-    );
-    let rendererPlugin: RendererPluginType = null;
-    let isNoneRenderer = line.renderer == "none";
-    if (
-      !isBlank(line.renderer) &&
-      line.renderer != "terminal" &&
-      !isNoneRenderer
-    ) {
-      rendererPlugin = PluginModel.getRendererPluginByName(line.renderer);
-    }
-    let rendererType = lineutil.getRendererType(line);
-    let hidePrompt = rendererPlugin != null && rendererPlugin.hidePrompt;
-    return (
-      <div
-        className={mainDivCn}
-        ref={this.lineRef}
-        onClick={this.handleClick}
-        data-lineid={line.lineid}
-        data-linenum={line.linenum}
-        data-screenid={line.screenid}
-      >
-        <div
-          key="focus"
-          className={cn(
-            "focus-indicator",
-            { selected: isSelected },
-            { active: isSelected && isFocused }
-          )}
-        />
-        <div
-          key="header"
-          className={cn(
-            "line-header",
-            { "is-expanded": isExpanded },
-            { "hide-prompt": hidePrompt }
-          )}
-        >
-          <div key="meta" className="meta-wrap">
-            {this.renderMeta1(cmd)}
-            <If condition={!hidePrompt}>{this.renderCmdText(cmd)}</If>
-          </div>
-          <div
-            key="pin"
-            title="Pin"
-            className={cn("line-icon", { active: line.pinned })}
-            onClick={this.clickPin}
-            style={{ display: "none" }}
-          >
-            <i className="fa-sharp fa-solid fa-thumbtack" />
-          </div>
-          <div
-            key="bookmark"
-            title="Bookmark"
-            className={cn("line-icon", "line-bookmark")}
-            onClick={this.clickBookmark}
-          >
-            <i className="fa-sharp fa-regular fa-bookmark" />
-          </div>
-          <div
-            key="minimise"
-            title={`${this.isMinimised.get() ? "Maximise" : "Minimise"}`}
-            className={cn("line-icon", "line-minimise")}
-            onClick={this.clickMinimise}
-          >
-            <i
-              className={`fa-sharp fa-regular ${
-                this.isMinimised.get() ? "fa-plus-circle" : "fa-minus-circle"
-              }`}
-            />
-          </div>
-        </div>
-        <If condition={!this.isMinimised.get()}>
-          <If condition={rendererPlugin == null && !isNoneRenderer}>
-            <TerminalRenderer
-              screen={screen}
-              line={line}
-              width={width}
-              staticRender={staticRender}
-              visible={visible}
-              onHeightChange={this.handleHeightChange}
-              collapsed={false}
-            />
-          </If>
-          <If
-            condition={
-              rendererPlugin != null && rendererPlugin.rendererType == "simple"
+        if (!visible.get()) {
+            if (this.rtnStateDiffFetched) {
+                this.rtnStateDiffFetched = false;
+                this.setRtnStateDiff(null);
             }
-          >
-            <SimpleBlobRenderer
-              rendererContainer={screen}
-              lineId={line.lineid}
-              plugin={rendererPlugin}
-              onHeightChange={this.handleHeightChange}
-              initParams={this.makeRendererModelInitializeParams()}
-            />
-          </If>
-          <If
-            condition={
-              rendererPlugin != null && rendererPlugin.rendererType == "full"
-            }
-          >
-            <FullRenderer
-              rendererContainer={screen}
-              lineId={line.lineid}
-              plugin={rendererPlugin}
-              onHeightChange={this.handleHeightChange}
-              initParams={this.makeRendererModelInitializeParams()}
-            />
-          </If>
-          <If condition={cmd.getRtnState()}>
-            <div
-              key="rtnstate"
-              className="cmd-rtnstate"
-              style={{
-                visibility: cmd.getStatus() == "done" ? "visible" : "hidden",
-              }}
-            >
-              <If condition={rsdiff == null || rsdiff == ""}>
-                <div className="cmd-rtnstate-label">state unchanged</div>
-                <div className="cmd-rtnstate-sep"></div>
-              </If>
-              <If condition={rsdiff != null && rsdiff != ""}>
-                <div className="cmd-rtnstate-label">new state</div>
-                <div className="cmd-rtnstate-sep"></div>
-                <div className="cmd-rtnstate-diff">
-                  {this.rtnStateDiff.get()}
+            return;
+        }
+        let cmd = screen.getCmd(line);
+        if (cmd == null || !cmd.getRtnState() || this.rtnStateDiffFetched) {
+            return;
+        }
+        if (cmd.getStatus() != "done") {
+            return;
+        }
+        this.fetchRtnStateDiff();
+    }
+
+    fetchRtnStateDiff(): void {
+        if (this.rtnStateDiffFetched) {
+            return;
+        }
+        let { line } = this.props;
+        this.rtnStateDiffFetched = true;
+        let usp = new URLSearchParams({
+            linenum: String(line.linenum),
+            screenid: line.screenid,
+            lineid: line.lineid,
+        });
+        let url = GlobalModel.getBaseHostPort() + "/api/rtnstate?" + usp.toString();
+        let fetchHeaders = GlobalModel.getFetchHeaders();
+        fetch(url, { headers: fetchHeaders })
+            .then((resp) => {
+                if (!resp.ok) {
+                    throw new Error(
+                        sprintf("Bad fetch response for /api/rtnstate: %d %s", resp.status, resp.statusText)
+                    );
+                }
+                return resp.text();
+            })
+            .then((text) => {
+                this.setRtnStateDiff(text ?? "");
+            })
+            .catch((err) => {
+                this.setRtnStateDiff("ERROR " + err.toString());
+            });
+    }
+
+    setRtnStateDiff(val: string): void {
+        mobx.action(() => {
+            this.rtnStateDiff.set(val);
+        })();
+    }
+
+    componentDidMount() {
+        this.componentDidUpdate(null, null, null);
+        this.checkCmdText();
+    }
+
+    @boundMethod
+    handleExpandCmd(): void {
+        mobx.action(() => {
+            this.isCmdExpanded.set(true);
+        })();
+    }
+
+    renderCmdText(cmd: Cmd): any {
+        if (cmd == null) {
+            return (
+                <div className="metapart-mono cmdtext">
+                    <span className="term-bright-green">(cmd not found)</span>
                 </div>
-              </If>
+            );
+        }
+        if (this.isCmdExpanded.get()) {
+            return (
+                <React.Fragment>
+                    <div key="meta2" className="meta meta-line2">
+                        <div className="metapart-mono cmdtext">
+                            <Prompt rptr={cmd.remote} festate={cmd.getRemoteFeState()} />
+                        </div>
+                    </div>
+                    <div key="meta3" className="meta meta-line3 cmdtext-expanded-wrapper">
+                        <div className="cmdtext-expanded">{lineutil.getFullCmdText(cmd.getCmdStr())}</div>
+                    </div>
+                </React.Fragment>
+            );
+        }
+        let isMultiLine = lineutil.isMultiLineCmdText(cmd.getCmdStr());
+        return (
+            <div key="meta2" className="meta meta-line2" ref={this.cmdTextRef}>
+                <div className="metapart-mono cmdtext">
+                    <Prompt rptr={cmd.remote} festate={cmd.getRemoteFeState()} />
+                    <span> </span>
+                    <span>{lineutil.getSingleLineCmdText(cmd.getCmdStr())}</span>
+                </div>
+                <If condition={this.isOverflow.get() || isMultiLine}>
+                    <div className="cmdtext-overflow" onClick={this.handleExpandCmd}>
+                        ...&#x25BC;
+                    </div>
+                </If>
             </div>
-          </If>
-          <If
-            condition={isSelected && !isFocused && rendererType == "terminal"}
-          >
-            <div className="cmd-hints">
-              <div className="hint-item color-nohover-white">
-                focus line ({renderCmdText("L")})
-              </div>
+        );
+    }
+
+    // TODO: this might not be necessary anymore because we're using this.lastHeight
+    getSnapshotBeforeUpdate(prevProps, prevState): { height: number } {
+        let elem = this.lineRef.current;
+        if (elem == null) {
+            return { height: 0 };
+        }
+        return { height: elem.offsetHeight };
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot: { height: number }): void {
+        this.handleHeightChange();
+        this.checkStateDiffLoad();
+        this.checkCmdText();
+    }
+
+    checkCmdText() {
+        let metaElem = this.cmdTextRef.current;
+        if (metaElem == null || metaElem.childNodes.length == 0) {
+            return;
+        }
+        let metaElemWidth = metaElem.offsetWidth;
+        if (metaElemWidth == 0) {
+            return;
+        }
+        let metaChild = metaElem.firstChild;
+        if (metaChild == null) {
+            return;
+        }
+        let children = metaChild.childNodes;
+        let childWidth = 0;
+        for (let i = 0; i < children.length; i++) {
+            let ch = children[i];
+            childWidth += ch.offsetWidth;
+        }
+        let isOverflow = childWidth > metaElemWidth;
+        if (isOverflow && isOverflow != this.isOverflow.get()) {
+            mobx.action(() => {
+                this.isOverflow.set(isOverflow);
+            })();
+        }
+    }
+
+    @boundMethod
+    handleHeightChange() {
+        if (this.props.onHeightChange == null) {
+            return;
+        }
+        let { line } = this.props;
+        let curHeight = 0;
+        let elem = this.lineRef.current;
+        if (elem != null) {
+            curHeight = elem.offsetHeight;
+        }
+        if (this.lastHeight == curHeight) {
+            return;
+        }
+        let lastHeight = this.lastHeight;
+        this.lastHeight = curHeight;
+        this.props.onHeightChange(line.linenum, curHeight, lastHeight);
+        // console.log("line height change: ", line.linenum, lastHeight, "=>", curHeight);
+    }
+
+    @boundMethod
+    handleClick() {
+        let { line, noSelect } = this.props;
+        if (noSelect) {
+            return;
+        }
+        let sel = window.getSelection();
+        if (this.lineRef.current != null) {
+            let selText = sel.toString();
+            if (sel.anchorNode != null && this.lineRef.current.contains(sel.anchorNode) && !isBlank(selText)) {
+                return;
+            }
+        }
+        GlobalCommandRunner.screenSelectLine(String(line.linenum), "cmd");
+    }
+
+    @boundMethod
+    clickStar() {
+        let { line } = this.props;
+        if (!line.star || line.star == 0) {
+            GlobalCommandRunner.lineStar(line.lineid, 1);
+        } else {
+            GlobalCommandRunner.lineStar(line.lineid, 0);
+        }
+    }
+
+    @boundMethod
+    clickPin() {
+        let { line } = this.props;
+        if (!line.pinned) {
+            GlobalCommandRunner.linePin(line.lineid, true);
+        } else {
+            GlobalCommandRunner.linePin(line.lineid, false);
+        }
+    }
+
+    @boundMethod
+    clickBookmark() {
+        let { line } = this.props;
+        GlobalCommandRunner.lineBookmark(line.lineid);
+    }
+
+    @boundMethod
+    clickMinimise() {
+        this.isMinimised.set(!this.isMinimised.get());
+    }
+
+    @boundMethod
+    handleResizeButton() {
+        console.log("resize button");
+    }
+
+    getIsHidePrompt(): boolean {
+        let { line } = this.props;
+        let rendererPlugin: RendererPluginType = null;
+        let isNoneRenderer = line.renderer == "none";
+        if (!isBlank(line.renderer) && line.renderer != "terminal" && !isNoneRenderer) {
+            rendererPlugin = PluginModel.getRendererPluginByName(line.renderer);
+        }
+        let hidePrompt = rendererPlugin != null && rendererPlugin.hidePrompt;
+        return hidePrompt;
+    }
+
+    getTerminalRendererHeight(cmd: Cmd): number {
+        let { screen, line, width, topBorder, renderMode } = this.props;
+        // header is 36px tall, padding+border = 6px
+        // zero-terminal is 0px
+        // terminal-wrapper overhead is 11px (margin/padding)
+        // inner-height, if zero-lines => 42
+        //               else: 53+(lines*lineheight)
+        let height = 36 + 6; // height of zero height terminal
+        let usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
+        if (usedRows > 0) {
+            height = 36 + 6 + 11 + termHeightFromRows(usedRows, GlobalModel.termFontSize.get());
+        }
+        return height;
+    }
+
+    @boundMethod
+    onAvatarRightClick(e: any): void {
+        let { line, noSelect } = this.props;
+        if (noSelect) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        if (line != null) {
+            mobx.action(() => {
+                GlobalModel.lineSettingsModal.set(line.linenum);
+            })();
+        }
+    }
+
+    renderSimple() {
+        let { screen, line, topBorder } = this.props;
+        let cmd = screen.getCmd(line);
+        let height: number = 0;
+        if (isBlank(line.renderer) || line.renderer == "terminal") {
+            height = this.getTerminalRendererHeight(cmd);
+        } else {
+            // header is 16px tall with hide-prompt, 36px otherwise
+            let { screen, line, width } = this.props;
+            let hidePrompt = this.getIsHidePrompt();
+            let usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
+            height = (hidePrompt ? 16 + 6 : 36 + 6) + usedRows;
+        }
+        let formattedTime = lineutil.getLineDateTimeStr(line.ts);
+        let mainDivCn = cn("line", "line-cmd", "line-simple", {
+            "top-border": topBorder,
+        });
+        return (
+            <div
+                className={mainDivCn}
+                ref={this.lineRef}
+                data-lineid={line.lineid}
+                data-linenum={line.linenum}
+                data-screenid={line.screenid}
+                style={{ height: height }}
+            >
+                <SmallLineAvatar line={line} cmd={cmd} />
+                <div className="ts">{formattedTime}</div>
             </div>
-          </If>
-        </If>
-      </div>
-    );
-  }
+        );
+    }
+
+    @boundMethod
+    handleLineSettings(e: any): void {
+        e.preventDefault();
+        e.stopPropagation();
+        let { line } = this.props;
+        if (line != null) {
+            mobx.action(() => {
+                GlobalModel.lineSettingsModal.set(line.linenum);
+            })();
+        }
+    }
+
+    renderMeta1(cmd: Cmd) {
+        let { line } = this.props;
+        let termOpts = cmd.getTermOpts();
+        let formattedTime = lineutil.getLineDateTimeStr(line.ts);
+        let renderer = line.renderer;
+        return (
+            <div key="meta1" className="meta meta-line1">
+                <SmallLineAvatar line={line} cmd={cmd} />
+                <div className="ts">{formattedTime}</div>
+                <div>&nbsp;</div>
+                <If condition={!isBlank(renderer) && renderer != "terminal"}>
+                    <div className="renderer">
+                        <i className="fa-sharp fa-solid fa-fill" />
+                        {renderer}&nbsp;
+                    </div>
+                </If>
+                <div className="termopts">
+                    ({termOpts.rows}x{termOpts.cols})
+                </div>
+                <div className="settings" onClick={this.handleLineSettings}>
+                    <i className="fa-sharp fa-solid fa-gear" />
+                </div>
+            </div>
+        );
+    }
+
+    getRendererOpts(cmd: Cmd): RendererOpts {
+        let { screen } = this.props;
+        return {
+            maxSize: screen.getMaxContentSize(),
+            idealSize: screen.getIdealContentSize(),
+            termOpts: cmd.getTermOpts(),
+            termFontSize: GlobalModel.termFontSize.get(),
+        };
+    }
+
+    makeRendererModelInitializeParams(): RendererModelInitializeParams {
+        let { screen, line } = this.props;
+        let context = lineutil.getRendererContext(line);
+        let cmd = screen.getCmd(line); // won't be null
+        let savedHeight = screen.getContentHeight(context);
+        if (savedHeight == null) {
+            if (line.contentheight != null && line.contentheight != -1) {
+                savedHeight = line.contentheight;
+            } else {
+                savedHeight = 0;
+            }
+        }
+        let api = {
+            saveHeight: (height: number) => {
+                screen.setContentHeight(lineutil.getRendererContext(line), height);
+            },
+            onFocusChanged: (focus: boolean) => {
+                screen.setTermFocus(line.linenum, focus);
+            },
+            dataHandler: (data: string, model: RendererModel) => {
+                cmd.handleDataFromRenderer(data, model);
+            },
+        };
+        return {
+            context: context,
+            isDone: !cmd.isRunning(),
+            savedHeight: savedHeight,
+            opts: this.getRendererOpts(cmd),
+            ptyDataSource: getTermPtyData,
+            api: api,
+            rawCmd: cmd.getAsWebCmd(line.lineid),
+        };
+    }
+
+    render() {
+        let { screen, line, width, staticRender, visible, topBorder, renderMode } = this.props;
+        let model = GlobalModel;
+        let lineid = line.lineid;
+        let isVisible = visible.get();
+        if (staticRender || !isVisible) {
+            return this.renderSimple();
+        }
+        let formattedTime = lineutil.getLineDateTimeStr(line.ts);
+        let cmd = screen.getCmd(line);
+        if (cmd == null) {
+            return (
+                <div
+                    className="line line-invalid"
+                    ref={this.lineRef}
+                    data-lineid={line.lineid}
+                    data-linenum={line.linenum}
+                    data-screenid={line.screenid}
+                >
+                    [cmd not found '{line.lineid}']
+                </div>
+            );
+        }
+        let status = cmd.getStatus();
+        let lineNumStr = (line.linenumtemp ? "~" : "") + String(line.linenum);
+        let isSelected = mobx
+            .computed(() => screen.getSelectedLine() == line.linenum, {
+                name: "computed-isSelected",
+            })
+            .get();
+        let isPhysicalFocused = mobx
+            .computed(() => screen.getIsFocused(line.linenum), {
+                name: "computed-getIsFocused",
+            })
+            .get();
+        let isFocused = mobx
+            .computed(
+                () => {
+                    let screenFocusType = screen.getFocusType();
+                    return isPhysicalFocused && screenFocusType == "cmd";
+                },
+                { name: "computed-isFocused" }
+            )
+            .get();
+        let isStatic = staticRender;
+        let isRunning = cmd.isRunning();
+        let isExpanded = this.isCmdExpanded.get();
+        let rsdiff = this.rtnStateDiff.get();
+        // console.log("render", "#" + line.linenum, termHeight, usedRows, cmd.getStatus(), (this.rtnStateDiff.get() != null), (!cmd.isRunning() ? "cmd-done" : "running"));
+        let mainDivCn = cn(
+            "line",
+            "line-cmd",
+            { focus: isFocused },
+            { "cmd-done": !isRunning },
+            { "has-rtnstate": cmd.getRtnState() },
+            { "top-border": topBorder }
+        );
+        let rendererPlugin: RendererPluginType = null;
+        let isNoneRenderer = line.renderer == "none";
+        if (!isBlank(line.renderer) && line.renderer != "terminal" && !isNoneRenderer) {
+            rendererPlugin = PluginModel.getRendererPluginByName(line.renderer);
+        }
+        let rendererType = lineutil.getRendererType(line);
+        let hidePrompt = rendererPlugin != null && rendererPlugin.hidePrompt;
+        return (
+            <div
+                className={mainDivCn}
+                ref={this.lineRef}
+                onClick={this.handleClick}
+                data-lineid={line.lineid}
+                data-linenum={line.linenum}
+                data-screenid={line.screenid}
+            >
+                <div
+                    key="focus"
+                    className={cn("focus-indicator", { selected: isSelected }, { active: isSelected && isFocused })}
+                />
+                <div
+                    key="header"
+                    className={cn("line-header", { "is-expanded": isExpanded }, { "hide-prompt": hidePrompt })}
+                >
+                    <div key="meta" className="meta-wrap">
+                        {this.renderMeta1(cmd)}
+                        <If condition={!hidePrompt}>{this.renderCmdText(cmd)}</If>
+                    </div>
+                    <div
+                        key="pin"
+                        title="Pin"
+                        className={cn("line-icon", { active: line.pinned })}
+                        onClick={this.clickPin}
+                        style={{ display: "none" }}
+                    >
+                        <i className="fa-sharp fa-solid fa-thumbtack" />
+                    </div>
+                    <div
+                        key="bookmark"
+                        title="Bookmark"
+                        className={cn("line-icon", "line-bookmark")}
+                        onClick={this.clickBookmark}
+                    >
+                        <i className="fa-sharp fa-regular fa-bookmark" />
+                    </div>
+                    <div
+                        key="minimise"
+                        title={`${this.isMinimised.get() ? "Maximise" : "Minimise"}`}
+                        className={cn("line-icon", "line-minimise")}
+                        onClick={this.clickMinimise}
+                    >
+                        <i
+                            className={`fa-sharp fa-regular ${
+                                this.isMinimised.get() ? "fa-plus-circle" : "fa-minus-circle"
+                            }`}
+                        />
+                    </div>
+                </div>
+                <If condition={!this.isMinimised.get()}>
+                    <If condition={rendererPlugin == null && !isNoneRenderer}>
+                        <TerminalRenderer
+                            screen={screen}
+                            line={line}
+                            width={width}
+                            staticRender={staticRender}
+                            visible={visible}
+                            onHeightChange={this.handleHeightChange}
+                            collapsed={false}
+                        />
+                    </If>
+                    <If condition={rendererPlugin != null && rendererPlugin.rendererType == "simple"}>
+                        <SimpleBlobRenderer
+                            rendererContainer={screen}
+                            lineId={line.lineid}
+                            plugin={rendererPlugin}
+                            onHeightChange={this.handleHeightChange}
+                            initParams={this.makeRendererModelInitializeParams()}
+                        />
+                    </If>
+                    <If condition={rendererPlugin != null && rendererPlugin.rendererType == "full"}>
+                        <FullRenderer
+                            rendererContainer={screen}
+                            lineId={line.lineid}
+                            plugin={rendererPlugin}
+                            onHeightChange={this.handleHeightChange}
+                            initParams={this.makeRendererModelInitializeParams()}
+                        />
+                    </If>
+                    <If condition={cmd.getRtnState()}>
+                        <div
+                            key="rtnstate"
+                            className="cmd-rtnstate"
+                            style={{
+                                visibility: cmd.getStatus() == "done" ? "visible" : "hidden",
+                            }}
+                        >
+                            <If condition={rsdiff == null || rsdiff == ""}>
+                                <div className="cmd-rtnstate-label">state unchanged</div>
+                                <div className="cmd-rtnstate-sep"></div>
+                            </If>
+                            <If condition={rsdiff != null && rsdiff != ""}>
+                                <div className="cmd-rtnstate-label">new state</div>
+                                <div className="cmd-rtnstate-sep"></div>
+                                <div className="cmd-rtnstate-diff">{this.rtnStateDiff.get()}</div>
+                            </If>
+                        </div>
+                    </If>
+                    <If condition={isSelected && !isFocused && rendererType == "terminal"}>
+                        <div className="cmd-hints">
+                            <div className="hint-item color-nohover-white">focus line ({renderCmdText("L")})</div>
+                        </div>
+                    </If>
+                </If>
+            </div>
+        );
+    }
 }
 
 @mobxReact.observer
 class Line extends React.Component<
-  {
-    screen: LineContainerModel;
-    line: LineType;
-    width: number;
-    staticRender: boolean;
-    visible: OV<boolean>;
-    onHeightChange: LineHeightChangeCallbackType;
-    overrideCollapsed: OV<boolean>;
-    topBorder: boolean;
-    renderMode: RenderModeType;
-    noSelect?: boolean;
-  },
-  {}
+    {
+        screen: LineContainerModel;
+        line: LineType;
+        width: number;
+        staticRender: boolean;
+        visible: OV<boolean>;
+        onHeightChange: LineHeightChangeCallbackType;
+        overrideCollapsed: OV<boolean>;
+        topBorder: boolean;
+        renderMode: RenderModeType;
+        noSelect?: boolean;
+    },
+    {}
 > {
-  render() {
-    let line = this.props.line;
-    if (line.archived) {
-      return null;
+    render() {
+        let line = this.props.line;
+        if (line.archived) {
+            return null;
+        }
+        if (line.linetype == "text") {
+            return <LineText {...this.props} />;
+        }
+        if (line.linetype == "cmd" || line.linetype == "openai") {
+            return <LineCmd {...this.props} />;
+        }
+        return <div className="line line-invalid">[invalid line type '{line.linetype}']</div>;
     }
-    if (line.linetype == "text") {
-      return <LineText {...this.props} />;
-    }
-    if (line.linetype == "cmd" || line.linetype == "openai") {
-      return <LineCmd {...this.props} />;
-    }
-    return (
-      <div className="line line-invalid">
-        [invalid line type '{line.linetype}']
-      </div>
-    );
-  }
 }
 
 @mobxReact.observer
-class Prompt extends React.Component<
-  { rptr: RemotePtrType; festate: Record<string, string> },
-  {}
-> {
-  render() {
-    let rptr = this.props.rptr;
-    if (rptr == null || isBlank(rptr.remoteid)) {
-      return <span className={cn("term-prompt", "color-green")}>&nbsp;</span>;
+class Prompt extends React.Component<{ rptr: RemotePtrType; festate: Record<string, string> }, {}> {
+    render() {
+        let rptr = this.props.rptr;
+        if (rptr == null || isBlank(rptr.remoteid)) {
+            return <span className={cn("term-prompt", "color-green")}>&nbsp;</span>;
+        }
+        let remote = GlobalModel.getRemote(this.props.rptr.remoteid);
+        let remoteStr = getRemoteStr(rptr);
+        let festate = this.props.festate ?? {};
+        let cwd = getCwdStr(remote, festate);
+        let isRoot = false;
+        if (remote && remote.remotevars) {
+            if (remote.remotevars["sudo"] || remote.remotevars["bestuser"] == "root") {
+                isRoot = true;
+            }
+        }
+        let remoteColorClass = isRoot ? "color-red" : "color-green";
+        if (remote && remote.remoteopts && remote.remoteopts.color) {
+            remoteColorClass = "color-" + remote.remoteopts.color;
+        }
+        // TESTING cwd shortening with triple colon character
+        // if (cwd.startsWith("~/work/gopath/src/github.com/scripthaus-dev")) {
+        //     cwd = cwd.replace("~/work/gopath/src/github.com/scripthaus-dev", "\u22EEscripthaus-dev");
+        // }
+        let remoteTitle: string = null;
+        if (remote && remote.remotecanonicalname) {
+            remoteTitle = "connected to " + remote.remotecanonicalname;
+        }
+        let cwdElem = (
+            <span title="current directory" className="term-prompt-cwd">
+                <i className="fa-solid fa-sharp fa-folder-open" />
+                {cwd}
+            </span>
+        );
+        let remoteElem = (
+            <span title={remoteTitle} className={cn("term-prompt-remote", remoteColorClass)}>
+                [{remoteStr}]{" "}
+            </span>
+        );
+        let rootIndicatorElem = <span className="term-prompt-end">{isRoot ? "#" : "$"}</span>;
+        let branchElem = null;
+        let pythonElem = null;
+        if (!isBlank(festate["PROMPTVAR_GITBRANCH"])) {
+            let branchName = festate["PROMPTVAR_GITBRANCH"];
+            branchElem = (
+                <span title="current git branch" className="term-prompt-branch">
+                    <i className="fa-sharp fa-solid fa-code-branch" />
+                    {branchName}{" "}
+                </span>
+            );
+        }
+        if (!isBlank(festate["VIRTUAL_ENV"])) {
+            let venvDir = festate["VIRTUAL_ENV"];
+            let venv = getShortVEnv(venvDir);
+            pythonElem = (
+                <span title="python venv" className="term-prompt-python">
+                    <i className="fa-brands fa-python" />
+                    {venv}{" "}
+                </span>
+            );
+        }
+        return (
+            <span className="term-prompt">
+                {remoteElem} {pythonElem}
+                {branchElem}
+                {cwdElem} {rootIndicatorElem}
+            </span>
+        );
     }
-    let remote = GlobalModel.getRemote(this.props.rptr.remoteid);
-    let remoteStr = getRemoteStr(rptr);
-    let festate = this.props.festate ?? {};
-    let cwd = getCwdStr(remote, festate);
-    let isRoot = false;
-    if (remote && remote.remotevars) {
-      if (
-        remote.remotevars["sudo"] ||
-        remote.remotevars["bestuser"] == "root"
-      ) {
-        isRoot = true;
-      }
-    }
-    let remoteColorClass = isRoot ? "color-red" : "color-green";
-    if (remote && remote.remoteopts && remote.remoteopts.color) {
-      remoteColorClass = "color-" + remote.remoteopts.color;
-    }
-    // TESTING cwd shortening with triple colon character
-    // if (cwd.startsWith("~/work/gopath/src/github.com/scripthaus-dev")) {
-    //     cwd = cwd.replace("~/work/gopath/src/github.com/scripthaus-dev", "\u22EEscripthaus-dev");
-    // }
-    let remoteTitle: string = null;
-    if (remote && remote.remotecanonicalname) {
-      remoteTitle = "connected to " + remote.remotecanonicalname;
-    }
-    let cwdElem = (
-      <span title="current directory" className="term-prompt-cwd">
-        <i className="fa-solid fa-sharp fa-folder-open" />
-        {cwd}
-      </span>
-    );
-    let remoteElem = (
-      <span
-        title={remoteTitle}
-        className={cn("term-prompt-remote", remoteColorClass)}
-      >
-        [{remoteStr}]{" "}
-      </span>
-    );
-    let rootIndicatorElem = (
-      <span className="term-prompt-end">{isRoot ? "#" : "$"}</span>
-    );
-    let branchElem = null;
-    let pythonElem = null;
-    if (!isBlank(festate["PROMPTVAR_GITBRANCH"])) {
-      let branchName = festate["PROMPTVAR_GITBRANCH"];
-      branchElem = (
-        <span title="current git branch" className="term-prompt-branch">
-          <i className="fa-sharp fa-solid fa-code-branch" />
-          {branchName}{" "}
-        </span>
-      );
-    }
-    if (!isBlank(festate["VIRTUAL_ENV"])) {
-      let venvDir = festate["VIRTUAL_ENV"];
-      let venv = getShortVEnv(venvDir);
-      pythonElem = (
-        <span title="python venv" className="term-prompt-python">
-          <i className="fa-brands fa-python" />
-          {venv}{" "}
-        </span>
-      );
-    }
-    return (
-      <span className="term-prompt">
-        {remoteElem} {pythonElem}
-        {branchElem}
-        {cwdElem} {rootIndicatorElem}
-      </span>
-    );
-  }
 }
 
 @mobxReact.observer
 class LineText extends React.Component<
-  {
-    screen: LineContainerModel;
-    line: LineType;
-    renderMode: RenderModeType;
-    topBorder: boolean;
-    noSelect?: boolean;
-  },
-  {}
+    {
+        screen: LineContainerModel;
+        line: LineType;
+        renderMode: RenderModeType;
+        topBorder: boolean;
+        noSelect?: boolean;
+    },
+    {}
 > {
-  @boundMethod
-  clickHandler() {
-    let { line, noSelect } = this.props;
-    if (noSelect) {
-      return;
+    @boundMethod
+    clickHandler() {
+        let { line, noSelect } = this.props;
+        if (noSelect) {
+            return;
+        }
+        GlobalCommandRunner.screenSelectLine(String(line.linenum));
     }
-    GlobalCommandRunner.screenSelectLine(String(line.linenum));
-  }
 
-  @boundMethod
-  onAvatarRightClick(e: any): void {
-    let { line, noSelect } = this.props;
-    if (noSelect) {
-      return;
+    @boundMethod
+    onAvatarRightClick(e: any): void {
+        let { line, noSelect } = this.props;
+        if (noSelect) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        if (line != null) {
+            mobx.action(() => {
+                GlobalModel.lineSettingsModal.set(line.linenum);
+            })();
+        }
     }
-    e.preventDefault();
-    e.stopPropagation();
-    if (line != null) {
-      mobx.action(() => {
-        GlobalModel.lineSettingsModal.set(line.linenum);
-      })();
-    }
-  }
 
-  render() {
-    let { screen, line, topBorder, renderMode } = this.props;
-    let formattedTime = lineutil.getLineDateTimeStr(line.ts);
-    let isSelected = mobx
-      .computed(() => screen.getSelectedLine() == line.linenum, {
-        name: "computed-isSelected",
-      })
-      .get();
-    let isFocused = mobx
-      .computed(() => screen.getFocusType() == "cmd", {
-        name: "computed-isFocused",
-      })
-      .get();
-    let mainClass = cn("line", "line-text", "focus-parent", {
-      "top-border": topBorder,
-    });
-    return (
-      <div
-        className={mainClass}
-        data-lineid={line.lineid}
-        data-linenum={line.linenum}
-        data-screenid={line.screenid}
-        onClick={this.clickHandler}
-      >
-        <div
-          className={cn(
-            "focus-indicator",
-            { selected: isSelected },
-            { active: isSelected && isFocused }
-          )}
-        />
-        <div className="line-content">
-          <div className="meta">
-            <SmallLineAvatar
-              line={line}
-              cmd={null}
-              onRightClick={this.onAvatarRightClick}
-            />
-            <div className="ts">{formattedTime}</div>
-          </div>
-          <div className="text">{line.text}</div>
-        </div>
-      </div>
-    );
-  }
+    render() {
+        let { screen, line, topBorder, renderMode } = this.props;
+        let formattedTime = lineutil.getLineDateTimeStr(line.ts);
+        let isSelected = mobx
+            .computed(() => screen.getSelectedLine() == line.linenum, {
+                name: "computed-isSelected",
+            })
+            .get();
+        let isFocused = mobx
+            .computed(() => screen.getFocusType() == "cmd", {
+                name: "computed-isFocused",
+            })
+            .get();
+        let mainClass = cn("line", "line-text", "focus-parent", {
+            "top-border": topBorder,
+        });
+        return (
+            <div
+                className={mainClass}
+                data-lineid={line.lineid}
+                data-linenum={line.linenum}
+                data-screenid={line.screenid}
+                onClick={this.clickHandler}
+            >
+                <div className={cn("focus-indicator", { selected: isSelected }, { active: isSelected && isFocused })} />
+                <div className="line-content">
+                    <div className="meta">
+                        <SmallLineAvatar line={line} cmd={null} onRightClick={this.onAvatarRightClick} />
+                        <div className="ts">{formattedTime}</div>
+                    </div>
+                    <div className="text">{line.text}</div>
+                </div>
+            </div>
+        );
+    }
 }
 
 @mobxReact.observer
 class TerminalRenderer extends React.Component<
-  {
-    screen: LineContainerModel;
-    line: LineType;
-    width: number;
-    staticRender: boolean;
-    visible: OV<boolean>;
-    onHeightChange: () => void;
-    collapsed: boolean;
-  },
-  {}
+    {
+        screen: LineContainerModel;
+        line: LineType;
+        width: number;
+        staticRender: boolean;
+        visible: OV<boolean>;
+        onHeightChange: () => void;
+        collapsed: boolean;
+    },
+    {}
 > {
-  termLoaded: mobx.IObservableValue<boolean> = mobx.observable.box(false, {
-    name: "linecmd-term-loaded",
-  });
-  elemRef: React.RefObject<any> = React.createRef();
-  termRef: React.RefObject<any> = React.createRef();
+    termLoaded: mobx.IObservableValue<boolean> = mobx.observable.box(false, {
+        name: "linecmd-term-loaded",
+    });
+    elemRef: React.RefObject<any> = React.createRef();
+    termRef: React.RefObject<any> = React.createRef();
 
-  constructor(props) {
-    super(props);
-  }
+    constructor(props) {
+        super(props);
+    }
 
-  componentDidMount() {
-    this.componentDidUpdate(null, null, null);
-  }
+    componentDidMount() {
+        this.componentDidUpdate(null, null, null);
+    }
 
-  componentWillUnmount() {
-    if (this.termLoaded.get()) {
-      this.unloadTerminal(true);
+    componentWillUnmount() {
+        if (this.termLoaded.get()) {
+            this.unloadTerminal(true);
+        }
     }
-  }
 
-  getSnapshotBeforeUpdate(prevProps, prevState): { height: number } {
-    let elem = this.elemRef.current;
-    if (elem == null) {
-      return { height: 0 };
+    getSnapshotBeforeUpdate(prevProps, prevState): { height: number } {
+        let elem = this.elemRef.current;
+        if (elem == null) {
+            return { height: 0 };
+        }
+        return { height: elem.offsetHeight };
     }
-    return { height: elem.offsetHeight };
-  }
 
-  componentDidUpdate(prevProps, prevState, snapshot: { height: number }): void {
-    if (this.props.onHeightChange == null) {
-      return;
+    componentDidUpdate(prevProps, prevState, snapshot: { height: number }): void {
+        if (this.props.onHeightChange == null) {
+            return;
+        }
+        let { line } = this.props;
+        let curHeight = 0;
+        let elem = this.elemRef.current;
+        if (elem != null) {
+            curHeight = elem.offsetHeight;
+        }
+        if (snapshot == null) {
+            snapshot = { height: 0 };
+        }
+        if (snapshot.height != curHeight) {
+            this.props.onHeightChange();
+            // console.log("term-render height change: ", line.linenum, snapshot.height, "=>", curHeight);
+        }
+        this.checkLoad();
     }
-    let { line } = this.props;
-    let curHeight = 0;
-    let elem = this.elemRef.current;
-    if (elem != null) {
-      curHeight = elem.offsetHeight;
-    }
-    if (snapshot == null) {
-      snapshot = { height: 0 };
-    }
-    if (snapshot.height != curHeight) {
-      this.props.onHeightChange();
-      // console.log("term-render height change: ", line.linenum, snapshot.height, "=>", curHeight);
-    }
-    this.checkLoad();
-  }
 
-  checkLoad(): void {
-    let { line, staticRender, visible, collapsed } = this.props;
-    if (staticRender) {
-      return;
+    checkLoad(): void {
+        let { line, staticRender, visible, collapsed } = this.props;
+        if (staticRender) {
+            return;
+        }
+        let vis = visible && visible.get() && !collapsed;
+        let curVis = this.termLoaded.get();
+        if (vis && !curVis) {
+            this.loadTerminal();
+        } else if (!vis && curVis) {
+            this.unloadTerminal(false);
+        }
     }
-    let vis = visible && visible.get() && !collapsed;
-    let curVis = this.termLoaded.get();
-    if (vis && !curVis) {
-      this.loadTerminal();
-    } else if (!vis && curVis) {
-      this.unloadTerminal(false);
-    }
-  }
 
-  loadTerminal(): void {
-    let { screen, line } = this.props;
-    let model = GlobalModel;
-    let cmd = screen.getCmd(line);
-    if (cmd == null) {
-      return;
+    loadTerminal(): void {
+        let { screen, line } = this.props;
+        let model = GlobalModel;
+        let cmd = screen.getCmd(line);
+        if (cmd == null) {
+            return;
+        }
+        let termElem = this.termRef.current;
+        if (termElem == null) {
+            console.log("cannot load terminal, no term elem found", line);
+            return;
+        }
+        screen.loadTerminalRenderer(termElem, line, cmd, this.props.width);
+        mobx.action(() => this.termLoaded.set(true))();
     }
-    let termElem = this.termRef.current;
-    if (termElem == null) {
-      console.log("cannot load terminal, no term elem found", line);
-      return;
-    }
-    screen.loadTerminalRenderer(termElem, line, cmd, this.props.width);
-    mobx.action(() => this.termLoaded.set(true))();
-  }
 
-  unloadTerminal(unmount: boolean): void {
-    let { screen, line } = this.props;
-    screen.unloadRenderer(line.lineid);
-    if (!unmount) {
-      mobx.action(() => this.termLoaded.set(false))();
-      let termElem = this.termRef.current;
-      if (termElem != null) {
-        termElem.replaceChildren();
-      }
+    unloadTerminal(unmount: boolean): void {
+        let { screen, line } = this.props;
+        screen.unloadRenderer(line.lineid);
+        if (!unmount) {
+            mobx.action(() => this.termLoaded.set(false))();
+            let termElem = this.termRef.current;
+            if (termElem != null) {
+                termElem.replaceChildren();
+            }
+        }
     }
-  }
 
-  @boundMethod
-  clickTermBlock(e: any) {
-    let { screen, line } = this.props;
-    let model = GlobalModel;
-    let termWrap = screen.getTermWrap(line.lineid);
-    if (termWrap != null) {
-      termWrap.giveFocus();
+    @boundMethod
+    clickTermBlock(e: any) {
+        let { screen, line } = this.props;
+        let model = GlobalModel;
+        let termWrap = screen.getTermWrap(line.lineid);
+        if (termWrap != null) {
+            termWrap.giveFocus();
+        }
     }
-  }
 
-  render() {
-    let { screen, line, width, staticRender, visible, collapsed } = this.props;
-    let isVisible = visible.get(); // for reaction
-    let isPhysicalFocused = mobx
-      .computed(() => screen.getIsFocused(line.linenum), {
-        name: "computed-getIsFocused",
-      })
-      .get();
-    let isFocused = mobx
-      .computed(
-        () => {
-          let screenFocusType = screen.getFocusType();
-          return isPhysicalFocused && screenFocusType == "cmd";
-        },
-        { name: "computed-isFocused" }
-      )
-      .get();
-    let cmd = screen.getCmd(line); // will not be null
-    let usedRows = screen.getUsedRows(
-      lineutil.getRendererContext(line),
-      line,
-      cmd,
-      width
-    );
-    let termHeight = termHeightFromRows(
-      usedRows,
-      GlobalModel.termFontSize.get()
-    );
-    let termLoaded = this.termLoaded.get();
-    return (
-      <div
-        ref={this.elemRef}
-        key="term-wrap"
-        className={cn(
-          "terminal-wrapper",
-          { focus: isFocused },
-          { "cmd-done": !cmd.isRunning() },
-          { "zero-height": termHeight == 0 },
-          { collapsed: collapsed }
-        )}
-      >
-        <If condition={!isFocused}>
-          <div
-            key="term-block"
-            className="term-block"
-            onClick={this.clickTermBlock}
-          ></div>
-        </If>
-        <div
-          key="term-connectelem"
-          className="terminal-connectelem"
-          ref={this.termRef}
-          data-lineid={line.lineid}
-          style={{ height: termHeight }}
-        ></div>
-        <If condition={!termLoaded}>
-          <div key="term-loading" className="terminal-loading-message">
-            ...
-          </div>
-        </If>
-      </div>
-    );
-  }
+    render() {
+        let { screen, line, width, staticRender, visible, collapsed } = this.props;
+        let isVisible = visible.get(); // for reaction
+        let isPhysicalFocused = mobx
+            .computed(() => screen.getIsFocused(line.linenum), {
+                name: "computed-getIsFocused",
+            })
+            .get();
+        let isFocused = mobx
+            .computed(
+                () => {
+                    let screenFocusType = screen.getFocusType();
+                    return isPhysicalFocused && screenFocusType == "cmd";
+                },
+                { name: "computed-isFocused" }
+            )
+            .get();
+        let cmd = screen.getCmd(line); // will not be null
+        let usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
+        let termHeight = termHeightFromRows(usedRows, GlobalModel.termFontSize.get());
+        let termLoaded = this.termLoaded.get();
+        return (
+            <div
+                ref={this.elemRef}
+                key="term-wrap"
+                className={cn(
+                    "terminal-wrapper",
+                    { focus: isFocused },
+                    { "cmd-done": !cmd.isRunning() },
+                    { "zero-height": termHeight == 0 },
+                    { collapsed: collapsed }
+                )}
+            >
+                <If condition={!isFocused}>
+                    <div key="term-block" className="term-block" onClick={this.clickTermBlock}></div>
+                </If>
+                <div
+                    key="term-connectelem"
+                    className="terminal-connectelem"
+                    ref={this.termRef}
+                    data-lineid={line.lineid}
+                    style={{ height: termHeight }}
+                ></div>
+                <If condition={!termLoaded}>
+                    <div key="term-loading" className="terminal-loading-message">
+                        ...
+                    </div>
+                </If>
+            </div>
+        );
+    }
 }
 
 export { Line, Prompt };
diff --git a/src/lines.less b/src/lines.less
index 60527737..ebabbaf1 100644
--- a/src/lines.less
+++ b/src/lines.less
@@ -60,19 +60,20 @@
         .line-minimise:hover {
             color: white;
         }
-        
+
         .line-icon + .line-icon {
             margin-left: 5px;
         }
-        
+
         .line-icon.active {
             visibility: visible;
             display: block;
-            
-            i.fa-star, i.fa-thumb-tack {
+
+            i.fa-star,
+            i.fa-thumb-tack {
                 color: @term-bright-yellow;
             }
-            
+
             i.fa-bookmark {
                 color: @term-bright-blue;
             }
@@ -251,7 +252,7 @@
         &.rtnstate {
             border: 1px solid white;
         }
-        
+
         .status-icon {
             font-size: 8px;
             position: absolute;
@@ -341,8 +342,10 @@
             margin-top: 1px;
             margin-right: 10px;
         }
-        
-        .ts, .termopts, .renderer {
+
+        .ts,
+        .termopts,
+        .renderer {
             display: flex;
             color: #aaa;
             margin-top: 5px;
@@ -383,7 +386,7 @@
                 padding-right: 3px;
             }
         }
-        
+
         .metapart-mono {
             color: #ddd;
             margin-left: 8px;
@@ -391,7 +394,7 @@
             white-space: nowrap;
             .mono-font(14px);
         }
-        
+
         .cmdtext {
             color: #fff;
             font-size: 16px;
@@ -471,8 +474,9 @@
         color: #aaa;
     }
 
-    .line-sep::before, .line-sep::after {
-        content: '';
+    .line-sep::before,
+    .line-sep::after {
+        content: "";
         height: 2px;
         background-color: #ccc;
         flex-grow: 1;
diff --git a/src/linesview.tsx b/src/linesview.tsx
index 56184aa2..cbcec6f6 100644
--- a/src/linesview.tsx
+++ b/src/linesview.tsx
@@ -1,13 +1,13 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
 import cn from "classnames";
 import dayjs from "dayjs";
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import {debounce, throttle} from "throttle-debounce";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import { debounce, throttle } from "throttle-debounce";
 import * as T from "./types";
 import * as util from "./util";
 import * as lineutil from "./lineutil";
@@ -15,45 +15,57 @@ import * as lineutil from "./lineutil";
 dayjs.extend(localizedFormat);
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
-type OMap<K,V> = mobx.ObservableMap<K,V>;
+type OMap<K, V> = mobx.ObservableMap<K, V>;
 
 const LinesVisiblePadding = 500;
 
 type ScreenInterface = {
-    setAnchorFields(anchorLine : number, anchorOffset : number, reason : string) : void,
-    getSelectedLine() : number,
-    getAnchor() : {anchorLine : number, anchorOffset : number},
-}
+    setAnchorFields(anchorLine: number, anchorOffset: number, reason: string): void;
+    getSelectedLine(): number;
+    getAnchor(): { anchorLine: number; anchorOffset: number };
+};
 
 // <Line key={line.lineid} line={line} screen={screen} width={width} visible={this.visibleMap.get(lineNumStr)} staticRender={this.staticRender.get()} onHeightChange={this.onHeightChange} overrideCollapsed={this.collapsedMap.get(lineNumStr)} topBorder={topBorder} renderMode={renderMode}/>;
 
-type LineCompFactory = (props : T.LineFactoryProps) => JSX.Element;
+type LineCompFactory = (props: T.LineFactoryProps) => JSX.Element;
 
 @mobxReact.observer
-class LinesView extends React.Component<{screen : ScreenInterface, width : number, lines : T.LineInterface[], renderMode : T.RenderModeType, lineFactory : LineCompFactory}, {}> {
-    rszObs : ResizeObserver;
-    linesRef : React.RefObject<any>;
-    staticRender : OV<boolean> = mobx.observable.box(true, {name: "static-render"});
-    lastOffsetHeight : number = 0;
-    lastOffsetWidth : number = 0;
-    ignoreNextScroll : boolean = false;
-    visibleMap : Map<string, OV<boolean>>;  // linenum => OV<vis>
-    collapsedMap : Map<string, OV<boolean>>;  // linenum => OV<collapsed>
-    lastLinesLength : number = 0;
-    lastSelectedLine : number = 0;
+class LinesView extends React.Component<
+    {
+        screen: ScreenInterface;
+        width: number;
+        lines: T.LineInterface[];
+        renderMode: T.RenderModeType;
+        lineFactory: LineCompFactory;
+    },
+    {}
+> {
+    rszObs: ResizeObserver;
+    linesRef: React.RefObject<any>;
+    staticRender: OV<boolean> = mobx.observable.box(true, { name: "static-render" });
+    lastOffsetHeight: number = 0;
+    lastOffsetWidth: number = 0;
+    ignoreNextScroll: boolean = false;
+    visibleMap: Map<string, OV<boolean>>; // linenum => OV<vis>
+    collapsedMap: Map<string, OV<boolean>>; // linenum => OV<collapsed>
+    lastLinesLength: number = 0;
+    lastSelectedLine: number = 0;
 
-    computeAnchorLine_throttled : () => void;
-    computeVisibleMap_debounced : () => void;
+    computeAnchorLine_throttled: () => void;
+    computeVisibleMap_debounced: () => void;
 
     constructor(props) {
         super(props);
         this.linesRef = React.createRef();
-        this.computeAnchorLine_throttled = throttle(100, this.computeAnchorLine.bind(this), {noLeading: true, noTrailing: false});
+        this.computeAnchorLine_throttled = throttle(100, this.computeAnchorLine.bind(this), {
+            noLeading: true,
+            noTrailing: false,
+        });
         this.visibleMap = new Map();
         this.collapsedMap = new Map();
         this.computeVisibleMap_debounced = debounce(1000, this.computeVisibleMap.bind(this));
     }
-    
+
     @boundMethod
     scrollHandler() {
         let linesElem = this.linesRef.current;
@@ -74,8 +86,8 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
         this.computeAnchorLine_throttled(); // only do this when we're not ignoring the scroll
     }
 
-    computeAnchorLine() : void {
-        let {screen} = this.props;
+    computeAnchorLine(): void {
+        let { screen } = this.props;
         let linesElem = this.linesRef.current;
         if (linesElem == null) {
             screen.setAnchorFields(null, 0, "no-lines");
@@ -89,8 +101,8 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
         let scrollTop = linesElem.scrollTop;
         let height = linesElem.clientHeight;
         let containerBottom = scrollTop + height;
-        let anchorElem : HTMLElement = null;
-        for (let i=lineElemArr.length-1; i >= 0; i--) {
+        let anchorElem: HTMLElement = null;
+        for (let i = lineElemArr.length - 1; i >= 0; i--) {
             let lineElem = lineElemArr[i];
             let bottomPos = lineElem.offsetTop + lineElem.offsetHeight;
             if (anchorElem == null && (bottomPos <= containerBottom || lineElem.offsetTop <= scrollTop)) {
@@ -106,26 +118,26 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
         screen.setAnchorFields(anchorLineNum, anchorOffset, "computeAnchorLine");
     }
 
-    computeVisibleMap() : void {
+    computeVisibleMap(): void {
         let linesElem = this.linesRef.current;
         if (linesElem == null) {
             return;
         }
         if (linesElem.offsetParent == null) {
-            return;  // handles when parent is set to display:none (is-hidden)
+            return; // handles when parent is set to display:none (is-hidden)
         }
         let lineElemArr = linesElem.querySelectorAll(".line");
         if (lineElemArr == null) {
             return;
         }
         if (linesElem.clientHeight == 0) {
-            return;  // when linesElem is collapsed (or display:none)
+            return; // when linesElem is collapsed (or display:none)
         }
         let containerTop = linesElem.scrollTop - LinesVisiblePadding;
         let containerBot = linesElem.scrollTop + linesElem.clientHeight + LinesVisiblePadding;
         let newMap = new Map<string, boolean>();
         // console.log("computevismap", linesElem.scrollTop, linesElem.clientHeight, containerTop + "-" + containerBot);
-        for (let i=0; i<lineElemArr.length; i++) {
+        for (let i = 0; i < lineElemArr.length; i++) {
             let lineElem = lineElemArr[i];
             let lineTop = lineElem.offsetTop;
             let lineBot = lineElem.offsetTop + lineElem.offsetHeight;
@@ -134,7 +146,7 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
                 isVis = true;
             }
             if (lineBot >= containerTop && lineBot <= containerBot) {
-                isVis = true
+                isVis = true;
             }
             // console.log("line", lineElem.dataset.linenum, "top=" + lineTop, "bot=" + lineTop, isVis);
             let lineNumInt = parseInt(lineElem.dataset.linenum);
@@ -146,7 +158,7 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
             for (let [k, v] of newMap) {
                 let oldVal = this.visibleMap.get(k);
                 if (oldVal == null) {
-                    oldVal = mobx.observable.box(v, {name: "lines-vis-map"});
+                    oldVal = mobx.observable.box(v, { name: "lines-vis-map" });
                     this.visibleMap.set(k, oldVal);
                 }
                 if (oldVal.get() != v) {
@@ -161,11 +173,11 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
         })();
     }
 
-    printVisMap() : void {
+    printVisMap(): void {
         let visMap = this.visibleMap;
         let lines = this.props.lines;
-        let visLines : string[] = [];
-        for (let i=0; i<lines.length; i++) {
+        let visLines: string[] = [];
+        for (let i = 0; i < lines.length; i++) {
             let linenum = String(lines[i].linenum);
             if (visMap.get(linenum).get()) {
                 visLines.push(linenum);
@@ -174,18 +186,18 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
         console.log("vislines", visLines);
     }
 
-    restoreAnchorOffset(reason : string) : void {
-        let {lines} = this.props;
+    restoreAnchorOffset(reason: string): void {
+        let { lines } = this.props;
         let linesElem = this.linesRef.current;
         if (linesElem == null) {
             return;
         }
         let anchor = this.getAnchor();
-        let anchorElem = linesElem.querySelector(sprintf(".line[data-linenum=\"%d\"]", anchor.anchorLine));
+        let anchorElem = linesElem.querySelector(sprintf('.line[data-linenum="%d"]', anchor.anchorLine));
         if (anchorElem == null) {
             return;
         }
-        let isLastLine = (anchor.anchorIndex == lines.length-1);
+        let isLastLine = anchor.anchorIndex == lines.length - 1;
         let scrollTop = linesElem.scrollTop;
         let height = linesElem.clientHeight;
         let containerBottom = scrollTop + height;
@@ -203,17 +215,16 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
         }
     }
 
-    componentDidMount() : void {
-        let {screen, lines} = this.props;
+    componentDidMount(): void {
+        let { screen, lines } = this.props;
         let linesElem = this.linesRef.current;
         let anchor = this.getAnchor();
-        if (anchor.anchorIndex == lines.length-1) {
+        if (anchor.anchorIndex == lines.length - 1) {
             if (linesElem != null) {
                 linesElem.scrollTop = linesElem.scrollHeight;
             }
             this.computeAnchorLine();
-        }
-        else {
+        } else {
             this.restoreAnchorOffset("re-mount");
         }
         this.lastSelectedLine = screen.getSelectedLine();
@@ -225,21 +236,21 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
             this.rszObs.observe(linesElem);
         }
         mobx.action(() => {
-            this.staticRender.set(false)
+            this.staticRender.set(false);
             this.computeVisibleMap();
         })();
     }
 
-    getLineElem(lineNum : number) : HTMLElement {
+    getLineElem(lineNum: number): HTMLElement {
         let linesElem = this.linesRef.current;
         if (linesElem == null) {
             return null;
         }
-        let elem = linesElem.querySelector(sprintf(".line[data-linenum=\"%d\"]", lineNum));
+        let elem = linesElem.querySelector(sprintf('.line[data-linenum="%d"]', lineNum));
         return elem;
     }
 
-    getLineViewInfo(lineNum : number) : {height: number, topOffset: number, botOffset: number, anchorOffset: number} {
+    getLineViewInfo(lineNum: number): { height: number; topOffset: number; botOffset: number; anchorOffset: number } {
         let linesElem = this.linesRef.current;
         if (linesElem == null) {
             return null;
@@ -260,22 +271,20 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
         let lineBot = lineElem.offsetTop + lineElem.offsetHeight;
         if (lineTop < containerTop) {
             rtn.topOffset = lineTop - containerTop;
-        }
-        else if (lineTop > containerBot) {
+        } else if (lineTop > containerBot) {
             rtn.topOffset = lineTop - containerBot;
         }
         if (lineBot < containerTop) {
             rtn.botOffset = lineBot - containerTop;
-        }
-        else if (lineBot > containerBot) {
+        } else if (lineBot > containerBot) {
             rtn.botOffset = lineBot - containerBot;
         }
         rtn.anchorOffset = containerBot - lineBot;
         return rtn;
     }
 
-    updateSelectedLine() : void {
-        let {screen, lines} = this.props;
+    updateSelectedLine(): void {
+        let { screen, lines } = this.props;
         let linesElem = this.linesRef.current;
         if (linesElem == null) {
             return null;
@@ -288,45 +297,41 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
         this.setLineVisible(newLine, true);
         // console.log("update selected line", this.lastSelectedLine, "=>", newLine, sprintf("anchor=%d:%d", screen.anchorLine, screen.anchorOffset));
         let viewInfo = this.getLineViewInfo(newLine);
-        let isFirst = (lidx.index == 0);
-        let isLast = (lidx.index == lines.length-1);
-        let offsetDelta = (isLast ? 10 : (isFirst ? -28 : 0));
+        let isFirst = lidx.index == 0;
+        let isLast = lidx.index == lines.length - 1;
+        let offsetDelta = isLast ? 10 : isFirst ? -28 : 0;
         if (viewInfo == null) {
-            screen.setAnchorFields(newLine, 0+offsetDelta, "updateSelectedLine");
-        }
-        else if (viewInfo.botOffset > 0) {
+            screen.setAnchorFields(newLine, 0 + offsetDelta, "updateSelectedLine");
+        } else if (viewInfo.botOffset > 0) {
             linesElem.scrollTop = linesElem.scrollTop + viewInfo.botOffset + offsetDelta;
             this.ignoreNextScroll = true;
             screen.setAnchorFields(newLine, offsetDelta, "updateSelectedLine");
-        }
-        else if (viewInfo.topOffset < 0) {
+        } else if (viewInfo.topOffset < 0) {
             linesElem.scrollTop = linesElem.scrollTop + viewInfo.topOffset + offsetDelta;
             this.ignoreNextScroll = true;
             let newOffset = linesElem.clientHeight - viewInfo.height;
             screen.setAnchorFields(newLine, newOffset, "updateSelectedLine");
-        }
-        else {
+        } else {
             screen.setAnchorFields(newLine, viewInfo.anchorOffset, "updateSelectedLine");
         }
         // console.log("new anchor", screen.getAnchorStr());
     }
 
-    setLineVisible(lineNum : number, vis : boolean) : void {
+    setLineVisible(lineNum: number, vis: boolean): void {
         mobx.action(() => {
             let key = String(lineNum);
             let visObj = this.visibleMap.get(key);
             if (visObj == null) {
-                visObj = mobx.observable.box(true, {name: "lines-vis-map"});
+                visObj = mobx.observable.box(true, { name: "lines-vis-map" });
                 this.visibleMap.set(key, visObj);
-            }
-            else {
+            } else {
                 visObj.set(true);
             }
         })();
     }
 
-    componentDidUpdate(prevProps, prevState, snapshot) : void {
-        let {screen, lines} = this.props;
+    componentDidUpdate(prevProps, prevState, snapshot): void {
+        let { screen, lines } = this.props;
         if (screen.getSelectedLine() != this.lastSelectedLine) {
             this.updateSelectedLine();
             this.lastSelectedLine = screen.getSelectedLine();
@@ -335,13 +340,13 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
         }
     }
 
-    componentWillUnmount() : void {
+    componentWillUnmount(): void {
         if (this.rszObs != null) {
             this.rszObs.disconnect();
         }
     }
 
-    handleResize(entries : any) {
+    handleResize(entries: any) {
         let linesElem = this.linesRef.current;
         if (linesElem == null) {
             return;
@@ -359,7 +364,7 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
     }
 
     @boundMethod
-    onHeightChange(lineNum : number, newHeight : number, oldHeight : number) : void {
+    onHeightChange(lineNum: number, newHeight: number, oldHeight: number): void {
         if (oldHeight == null) {
             return;
         }
@@ -368,81 +373,87 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
         this.computeVisibleMap_debounced();
     }
 
-    hasTopBorder(lines : T.LineInterface[], idx : number) : boolean {
+    hasTopBorder(lines: T.LineInterface[], idx: number): boolean {
         if (idx == 0) {
             return false;
         }
         let curLineNumStr = String(lines[idx].linenum);
-        let prevLineNumStr = String(lines[idx-1].linenum);
+        let prevLineNumStr = String(lines[idx - 1].linenum);
         return !this.collapsedMap.get(curLineNumStr).get() || !this.collapsedMap.get(prevLineNumStr).get();
     }
 
-    getDateSepStr(lines : T.LineInterface[], idx : number, prevStr : string, todayStr : string, yesterdayStr : string) : string {
+    getDateSepStr(
+        lines: T.LineInterface[],
+        idx: number,
+        prevStr: string,
+        todayStr: string,
+        yesterdayStr: string
+    ): string {
         let curLineDate = new Date(lines[idx].ts);
         let curLineFormat = dayjs(curLineDate).format("ddd YYYY-MM-DD");
         if (idx == 0) {
-            return ;
+            return;
         }
         let prevLineDate = new Date(lines[idx].ts);
         let prevLineFormat = dayjs(prevLineDate).format("YYYY-MM-DD");
         return null;
     }
 
-    findClosestLineIndex(lineNum : number) : {line : T.LineInterface, index : number} {
-        let {lines} = this.props;
+    findClosestLineIndex(lineNum: number): { line: T.LineInterface; index: number } {
+        let { lines } = this.props;
         if (lines.length == 0) {
             throw new Error("invalid lines, cannot have 0 length in LinesView");
         }
         if (lineNum == null || lineNum == 0) {
-            return {line: lines[lines.length-1], index: lines.length-1};
+            return { line: lines[lines.length - 1], index: lines.length - 1 };
         }
         // todo: bsearch
         // lines is sorted by linenum
-        for (let idx=0; idx<lines.length; idx++) {
+        for (let idx = 0; idx < lines.length; idx++) {
             let line = lines[idx];
             if (line.linenum >= lineNum) {
-                return {line: line, index: idx};
+                return { line: line, index: idx };
             }
         }
-        return {line: lines[lines.length-1], index: lines.length-1};
+        return { line: lines[lines.length - 1], index: lines.length - 1 };
     }
 
-    getAnchor() : {anchorLine : number, anchorOffset : number, anchorIndex : number} {
-        let {screen, lines} = this.props;
+    getAnchor(): { anchorLine: number; anchorOffset: number; anchorIndex: number } {
+        let { screen, lines } = this.props;
         let anchor = screen.getAnchor();
         if (anchor.anchorLine == null || anchor.anchorLine == 0) {
-            return {anchorLine: lines[lines.length-1].linenum, anchorOffset: 0, anchorIndex: lines.length-1};
+            return { anchorLine: lines[lines.length - 1].linenum, anchorOffset: 0, anchorIndex: lines.length - 1 };
         }
         let lidx = this.findClosestLineIndex(anchor.anchorLine);
         if (lidx.line.linenum == anchor.anchorLine) {
-            return {anchorLine: anchor.anchorLine, anchorOffset: anchor.anchorOffset, anchorIndex: lidx.index};
+            return { anchorLine: anchor.anchorLine, anchorOffset: anchor.anchorOffset, anchorIndex: lidx.index };
         }
-        return {anchorLine: lidx.line.linenum, anchorOffset: 0, anchorIndex: lidx.index};
+        return { anchorLine: lidx.line.linenum, anchorOffset: 0, anchorIndex: lidx.index };
     }
     render() {
-        let {screen, width, lines, renderMode} = this.props;
-        let selectedLine = screen.getSelectedLine();  // for re-rendering
-        let line : T.LineInterface = null;
-        for (let i=0; i<lines.length; i++) {
+        let { screen, width, lines, renderMode } = this.props;
+        let selectedLine = screen.getSelectedLine(); // for re-rendering
+        let line: T.LineInterface = null;
+        for (let i = 0; i < lines.length; i++) {
             let key = String(lines[i].linenum);
             let visObs = this.visibleMap.get(key);
             if (visObs == null) {
-                this.visibleMap.set(key, mobx.observable.box(false, {name: "lines-vis-map"}));
+                this.visibleMap.set(key, mobx.observable.box(false, { name: "lines-vis-map" }));
             }
             let collObs = this.collapsedMap.get(key);
             if (collObs == null) {
-                this.collapsedMap.set(key, mobx.observable.box(false, {name: "lines-collapsed-map"}));
+                this.collapsedMap.set(key, mobx.observable.box(false, { name: "lines-collapsed-map" }));
             }
         }
-        let lineElements : any = [];
+        let lineElements: any = [];
         let todayStr = util.getTodayStr();
         let yesterdayStr = util.getYesterdayStr();
-        let prevDateStr : string = null;
+        let prevDateStr: string = null;
         let anchor = this.getAnchor();
-        let startIdx = util.boundInt(anchor.anchorIndex-50, 0, lines.length-1);
-        let endIdx = util.boundInt(anchor.anchorIndex+50, 0, lines.length-1);
+        let startIdx = util.boundInt(anchor.anchorIndex - 50, 0, lines.length - 1);
+        let endIdx = util.boundInt(anchor.anchorIndex + 50, 0, lines.length - 1);
         // console.log("render", anchor, "[" + startIdx + "," + endIdx + "]");
-        for (let idx=startIdx; idx <= endIdx; idx++) {
+        for (let idx = startIdx; idx <= endIdx; idx++) {
             let line = lines[idx];
             let lineNumStr = String(line.linenum);
             let dateSepStr = null;
@@ -452,10 +463,14 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
             }
             prevDateStr = curDateStr;
             if (dateSepStr != null) {
-                let sepElem = (<div key={"sep-" + line.lineid} className="line-sep">{dateSepStr}</div>);
+                let sepElem = (
+                    <div key={"sep-" + line.lineid} className="line-sep">
+                        {dateSepStr}
+                    </div>
+                );
                 lineElements.push(sepElem);
             }
-            let topBorder = (dateSepStr == null) && this.hasTopBorder(lines, idx);
+            let topBorder = dateSepStr == null && this.hasTopBorder(lines, idx);
             let lineProps = {
                 key: line.lineid,
                 line: line,
@@ -471,10 +486,7 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
             // let lineElem = <Line key={line.lineid} line={line} screen={screen} width={width} visible={this.visibleMap.get(lineNumStr)} staticRender={this.staticRender.get()} onHeightChange={this.onHeightChange} overrideCollapsed={this.collapsedMap.get(lineNumStr)} topBorder={topBorder} renderMode={renderMode}/>;
             lineElements.push(lineElem);
         }
-        let linesClass = cn(
-            "lines",
-            (renderMode == "normal" ? "lines-expanded" : "lines-collapsed"),
-        );
+        let linesClass = cn("lines", renderMode == "normal" ? "lines-expanded" : "lines-collapsed");
         return (
             <div key="lines" className={linesClass} onScroll={this.scrollHandler} ref={this.linesRef}>
                 <div className="lines-spacer"></div>
@@ -484,4 +496,4 @@ class LinesView extends React.Component<{screen : ScreenInterface, width : numbe
     }
 }
 
-export {LinesView};
+export { LinesView };
diff --git a/src/lineutil.ts b/src/lineutil.ts
index 9f92c9ff..e7a669ba 100644
--- a/src/lineutil.ts
+++ b/src/lineutil.ts
@@ -1,18 +1,18 @@
 import dayjs from "dayjs";
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import {isBlank, getDateStr} from "./util";
-import {LineType, WebLine, RendererContext} from "./types";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import { isBlank, getDateStr } from "./util";
+import { LineType, WebLine, RendererContext } from "./types";
 
-dayjs.extend(localizedFormat)
+dayjs.extend(localizedFormat);
 
-function getRendererType(line : LineType|WebLine) : "terminal" | "plugin" {
+function getRendererType(line: LineType | WebLine): "terminal" | "plugin" {
     if (isBlank(line.renderer) || line.renderer == "terminal") {
         return "terminal";
     }
     return "plugin";
 }
 
-function getLineDateStr(todayDate : string, yesterdayDate : string, ts : number) : string {
+function getLineDateStr(todayDate: string, yesterdayDate: string, ts: number): string {
     let lineDate = new Date(ts);
     let dateStr = getDateStr(lineDate);
     if (dateStr == todayDate) {
@@ -24,36 +24,34 @@ function getLineDateStr(todayDate : string, yesterdayDate : string, ts : number)
     return dateStr;
 }
 
-function getLineDateTimeStr(ts : number) : string {
+function getLineDateTimeStr(ts: number): string {
     let lineDate = new Date(ts);
     let nowDate = new Date();
-    
+
     if (nowDate.getFullYear() != lineDate.getFullYear()) {
         return dayjs(lineDate).format("ddd L LTS");
-    }
-    else if (nowDate.getMonth() != lineDate.getMonth() || nowDate.getDate() != lineDate.getDate()) {
-        let yesterdayDate = (new Date());
-        yesterdayDate.setDate(yesterdayDate.getDate()-1);
+    } else if (nowDate.getMonth() != lineDate.getMonth() || nowDate.getDate() != lineDate.getDate()) {
+        let yesterdayDate = new Date();
+        yesterdayDate.setDate(yesterdayDate.getDate() - 1);
         if (yesterdayDate.getMonth() == lineDate.getMonth() && yesterdayDate.getDate() == lineDate.getDate()) {
-            return "Yesterday " + dayjs(lineDate).format("LTS");;
+            return "Yesterday " + dayjs(lineDate).format("LTS");
         }
         return dayjs(lineDate).format("ddd L LTS");
-    }
-    else {
+    } else {
         return dayjs(lineDate).format("LTS");
     }
 }
 
-function isMultiLineCmdText(cmdText : string) : boolean {
+function isMultiLineCmdText(cmdText: string): boolean {
     if (cmdText == null) {
         return false;
     }
     cmdText = cmdText.trim();
     let nlIdx = cmdText.indexOf("\n");
-    return (nlIdx != -1);
+    return nlIdx != -1;
 }
 
-function getFullCmdText(cmdText : string) {
+function getFullCmdText(cmdText: string) {
     if (cmdText == null) {
         return "(none)";
     }
@@ -61,7 +59,7 @@ function getFullCmdText(cmdText : string) {
     return cmdText;
 }
 
-function getSingleLineCmdText(cmdText : string) {
+function getSingleLineCmdText(cmdText: string) {
     if (cmdText == null) {
         return "(none)";
     }
@@ -73,7 +71,7 @@ function getSingleLineCmdText(cmdText : string) {
     return cmdText;
 }
 
-function getRendererContext(line : LineType) : RendererContext {
+function getRendererContext(line: LineType): RendererContext {
     return {
         screenId: line.screenid,
         lineId: line.lineid,
@@ -81,7 +79,7 @@ function getRendererContext(line : LineType) : RendererContext {
     };
 }
 
-function getWebRendererContext(line : WebLine) : RendererContext {
+function getWebRendererContext(line: WebLine): RendererContext {
     return {
         screenId: line.screenid,
         lineId: line.lineid,
@@ -89,8 +87,18 @@ function getWebRendererContext(line : WebLine) : RendererContext {
     };
 }
 
-function cmdStatusIsRunning(status : string) : boolean {
+function cmdStatusIsRunning(status: string): boolean {
     return status == "running" || status == "detached";
 }
 
-export {getRendererType, getLineDateStr, getLineDateTimeStr, isMultiLineCmdText, getFullCmdText, getSingleLineCmdText, getRendererContext, getWebRendererContext, cmdStatusIsRunning};
+export {
+    getRendererType,
+    getLineDateStr,
+    getLineDateTimeStr,
+    isMultiLineCmdText,
+    getFullCmdText,
+    getSingleLineCmdText,
+    getRendererContext,
+    getWebRendererContext,
+    cmdStatusIsRunning,
+};
diff --git a/src/main.tsx b/src/main.tsx
index 89637fe0..32b7d6f4 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,30 +1,61 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
 import cn from "classnames";
-import {debounce, throttle} from "throttle-debounce";
-import {v4 as uuidv4} from "uuid";
+import { debounce, throttle } from "throttle-debounce";
+import { v4 as uuidv4 } from "uuid";
 import dayjs from "dayjs";
-import type {SessionDataType, LineType, CmdDataType, RemoteType, RemoteStateType, RemoteInstanceType, RemotePtrType, HistoryItem, HistoryQueryOpts, RemoteEditType, ContextMenuOpts, BookmarkType, RenderModeType, LineFactoryProps} from "./types";
+import type {
+    SessionDataType,
+    LineType,
+    CmdDataType,
+    RemoteType,
+    RemoteStateType,
+    RemoteInstanceType,
+    RemotePtrType,
+    HistoryItem,
+    HistoryQueryOpts,
+    RemoteEditType,
+    ContextMenuOpts,
+    BookmarkType,
+    RenderModeType,
+    LineFactoryProps,
+} from "./types";
 import type * as T from "./types";
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import {GlobalModel, GlobalCommandRunner, Session, Cmd, ScreenLines, Screen, riToRPtr, TabColors, RemoteColors} from "./model";
-import {windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols, getMonoFontSize} from "./textmeasure";
-import {isModKeyPress, boundInt, sortAndFilterRemotes, makeExternLink, isBlank, hasNoModifiers} from "./util";
-import {BookmarksView} from "./bookmarks";
-import {WebShareView} from "./webshare-client-view";
-import {HistoryView} from "./history";
-import {Line, Prompt} from "./linecomps";
-import {ScreenSettingsModal, SessionSettingsModal, LineSettingsModal, ClientSettingsModal} from "./settings";
-import {RemotesModal} from "./remotes";
-import {renderCmdText, RemoteStatusLight, Markdown} from "./elements";
-import {LinesView} from "./linesview";
-import {TosModal} from "./modals";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import {
+    GlobalModel,
+    GlobalCommandRunner,
+    Session,
+    Cmd,
+    ScreenLines,
+    Screen,
+    riToRPtr,
+    TabColors,
+    RemoteColors,
+} from "./model";
+import {
+    windowWidthToCols,
+    windowHeightToRows,
+    termHeightFromRows,
+    termWidthFromCols,
+    getMonoFontSize,
+} from "./textmeasure";
+import { isModKeyPress, boundInt, sortAndFilterRemotes, makeExternLink, isBlank, hasNoModifiers } from "./util";
+import { BookmarksView } from "./bookmarks";
+import { WebShareView } from "./webshare-client-view";
+import { HistoryView } from "./history";
+import { Line, Prompt } from "./linecomps";
+import { ScreenSettingsModal, SessionSettingsModal, LineSettingsModal, ClientSettingsModal } from "./settings";
+import { RemotesModal } from "./remotes";
+import { renderCmdText, RemoteStatusLight, Markdown } from "./elements";
+import { LinesView } from "./linesview";
+import { TosModal } from "./modals";
 
-dayjs.extend(localizedFormat)
+dayjs.extend(localizedFormat);
 
 const RemotePtyRows = 8;
 const RemotePtyCols = 80;
@@ -34,18 +65,18 @@ const TDots = "⋮";
 
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
-type OMap<K,V> = mobx.ObservableMap<K,V>;
+type OMap<K, V> = mobx.ObservableMap<K, V>;
 
 type VisType = "visible" | "";
 
 type InterObsValue = {
-    sessionid : string,
-    lineid : string,
-    visible : mobx.IObservableValue<boolean>,
-    timeoutid? : any,
+    sessionid: string;
+    lineid: string;
+    visible: mobx.IObservableValue<boolean>;
+    timeoutid?: any;
 };
 
-function scrollDiv(div : any, amt : number) {
+function scrollDiv(div: any, amt: number) {
     if (div == null) {
         return;
     }
@@ -53,20 +84,20 @@ function scrollDiv(div : any, amt : number) {
     if (newScrollTop < 0) {
         newScrollTop = 0;
     }
-    div.scrollTo({top: newScrollTop, behavior: "smooth"});
+    div.scrollTo({ top: newScrollTop, behavior: "smooth" });
 }
 
-function truncateWithTDots(str : string, maxLen : number) : string {
+function truncateWithTDots(str: string, maxLen: number): string {
     if (str == null) {
         return null;
     }
     if (str.length <= maxLen) {
         return str;
     }
-    return str.slice(0, maxLen-1) + TDots;
+    return str.slice(0, maxLen - 1) + TDots;
 }
 
-function pageSize(div : any) : number {
+function pageSize(div: any): number {
     if (div == null) {
         return 300;
     }
@@ -80,15 +111,15 @@ function pageSize(div : any) : number {
 }
 
 @mobxReact.observer
-class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
-    lastTab : boolean = false;
-    lastHistoryUpDown : boolean = false;
-    lastTabCurLine : mobx.IObservableValue<string> = mobx.observable.box(null);
-    lastFocusType : string = null;
-    mainInputRef : React.RefObject<any>;
-    historyInputRef : React.RefObject<any>;
-    controlRef : React.RefObject<any>;
-    lastHeight : number = 0;
+class TextAreaInput extends React.Component<{ onHeightChange: () => void }, {}> {
+    lastTab: boolean = false;
+    lastHistoryUpDown: boolean = false;
+    lastTabCurLine: mobx.IObservableValue<string> = mobx.observable.box(null);
+    lastFocusType: string = null;
+    mainInputRef: React.RefObject<any>;
+    historyInputRef: React.RefObject<any>;
+    controlRef: React.RefObject<any>;
+    lastHeight: number = 0;
 
     constructor(props) {
         super(props);
@@ -97,17 +128,16 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
         this.controlRef = React.createRef();
     }
 
-    setFocus() : void {
+    setFocus(): void {
         let inputModel = GlobalModel.inputModel;
         if (inputModel.historyShow.get()) {
             this.historyInputRef.current.focus();
-        }
-        else {
+        } else {
             this.mainInputRef.current.focus();
         }
     }
 
-    getTextAreaMaxCols() : number {
+    getTextAreaMaxCols(): number {
         let taElem = this.mainInputRef.current;
         if (taElem == null) {
             return 0;
@@ -121,7 +151,7 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
         return maxCols;
     }
 
-    checkHeight(shouldFire : boolean) : void {
+    checkHeight(shouldFire: boolean): void {
         let elem = this.controlRef.current;
         if (elem == null) {
             return;
@@ -172,14 +202,15 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
         this.checkHeight(true);
     }
 
-    getLinePos(elem : any) : {numLines : number, linePos : number} {
+    getLinePos(elem: any): { numLines: number; linePos: number } {
         let numLines = elem.value.split("\n").length;
         let linePos = elem.value.substr(0, elem.selectionStart).split("\n").length;
-        return {numLines, linePos};
+        return { numLines, linePos };
     }
 
-    @mobx.action @boundMethod
-    onKeyDown(e : any) {
+    @mobx.action
+    @boundMethod
+    onKeyDown(e: any) {
         mobx.action(() => {
             if (isModKeyPress(e)) {
                 return;
@@ -191,18 +222,29 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
             let curLine = inputModel.getCurLine();
 
             let lastTab = this.lastTab;
-            this.lastTab = (e.code == "Tab");
+            this.lastTab = e.code == "Tab";
             let lastHist = this.lastHistoryUpDown;
             this.lastHistoryUpDown = false;
-            
+
             if (e.code == "Tab") {
                 e.preventDefault();
                 if (lastTab) {
-                    GlobalModel.submitCommand("_compgen", null, [curLine], {"comppos": String(curLine.length), "compshow": "1", "nohist": "1"}, true);
+                    GlobalModel.submitCommand(
+                        "_compgen",
+                        null,
+                        [curLine],
+                        { comppos: String(curLine.length), compshow: "1", nohist: "1" },
+                        true
+                    );
                     return;
-                }
-                else {
-                    GlobalModel.submitCommand("_compgen", null, [curLine], {"comppos": String(curLine.length), "nohist": "1"}, true);
+                } else {
+                    GlobalModel.submitCommand(
+                        "_compgen",
+                        null,
+                        [curLine],
+                        { comppos: String(curLine.length), nohist: "1" },
+                        true
+                    );
                     return;
                 }
             }
@@ -217,8 +259,7 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
                             GlobalCommandRunner.screenSelectLine("E");
                         }
                         return;
-                    }
-                    else {
+                    } else {
                         setTimeout(() => GlobalModel.inputModel.uiSubmitCommand(), 0);
                         return;
                     }
@@ -315,7 +356,7 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
                 if (infoScroll) {
                     let div = document.querySelector(".cmd-input-info");
                     let amt = pageSize(div);
-                    scrollDiv(div, (e.code == "PageUp" ? -amt : amt));
+                    scrollDiv(div, e.code == "PageUp" ? -amt : amt);
                 }
             }
             // console.log(e.code, e.keyCode, e.key, event.which, ctrlMod, e);
@@ -323,14 +364,14 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
     }
 
     @boundMethod
-    onChange(e : any) {
+    onChange(e: any) {
         mobx.action(() => {
             GlobalModel.inputModel.setCurLine(e.target.value);
         })();
     }
 
     @boundMethod
-    onHistoryKeyDown(e : any) {
+    onHistoryKeyDown(e: any) {
         let inputModel = GlobalModel.inputModel;
         if (e.code == "Escape") {
             e.preventDefault();
@@ -352,14 +393,17 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
             inputModel.resetInput();
             return;
         }
-        if (e.code == "KeyR" && ((e.getModifierState("Meta") || e.getModifierState("Control")) && !e.getModifierState("Shift"))) {
+        if (
+            e.code == "KeyR" &&
+            (e.getModifierState("Meta") || e.getModifierState("Control")) &&
+            !e.getModifierState("Shift")
+        ) {
             e.preventDefault();
             let opts = mobx.toJS(inputModel.historyQueryOpts.get());
             if (opts.limitRemote) {
                 opts.limitRemote = false;
                 opts.limitRemoteInstance = false;
-            }
-            else {
+            } else {
                 opts.limitRemote = true;
                 opts.limitRemoteInstance = true;
             }
@@ -372,11 +416,9 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
             let htype = opts.queryType;
             if (htype == "screen") {
                 htype = "session";
-            }
-            else if (htype == "session") {
+            } else if (htype == "session") {
                 htype = "global";
-            }
-            else {
+            } else {
                 htype = "screen";
             }
             inputModel.setHistoryType(htype);
@@ -420,7 +462,7 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
         }
         let cutValue = value.substr(0, selStart);
         let restValue = value.substr(selStart);
-        let cmdLineUpdate = {cmdline: restValue, cursorpos: 0};
+        let cmdLineUpdate = { cmdline: restValue, cursorpos: 0 };
         console.log("ss", selStart, value, "[" + cutValue + "]", "[" + restValue + "]");
         navigator.clipboard.writeText(cutValue);
         GlobalModel.inputModel.updateCmdLine(cmdLineUpdate);
@@ -455,9 +497,9 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
         if (selStart > value.length) {
             return;
         }
-        let cutSpot = selStart-1;
+        let cutSpot = selStart - 1;
         let initial = true;
-        for (;cutSpot>=0; cutSpot--) {
+        for (; cutSpot >= 0; cutSpot--) {
             let ch = value[cutSpot];
             console.log(cutSpot, "[" + ch + "]");
             if (ch == " " && initial) {
@@ -472,8 +514,15 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
         let cutValue = value.slice(cutSpot, selStart);
         let prevValue = value.slice(0, cutSpot);
         let restValue = value.slice(selStart);
-        let cmdLineUpdate = {cmdline: prevValue + restValue, cursorpos: prevValue.length};
-        console.log("ss", selStart, value, "prev[" + prevValue + "]", "cut[" + cutValue + "]", "rest[" + restValue + "]");
+        let cmdLineUpdate = { cmdline: prevValue + restValue, cursorpos: prevValue.length };
+        console.log(
+            "ss",
+            selStart,
+            value,
+            "prev[" + prevValue + "]",
+            "cut[" + cutValue + "]",
+            "rest[" + restValue + "]"
+        );
         console.log("  ", cmdLineUpdate);
         navigator.clipboard.writeText(cutValue);
         GlobalModel.inputModel.updateCmdLine(cmdLineUpdate);
@@ -494,13 +543,13 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
                 return;
             }
             let newValue = value.substr(0, selStart) + clipText + value.substr(selEnd);
-            let cmdLineUpdate = {cmdline: newValue, cursorpos: selStart+clipText.length};
+            let cmdLineUpdate = { cmdline: newValue, cursorpos: selStart + clipText.length };
             GlobalModel.inputModel.updateCmdLine(cmdLineUpdate);
         });
     }
 
     @boundMethod
-    handleHistoryInput(e : any) {
+    handleHistoryInput(e: any) {
         let inputModel = GlobalModel.inputModel;
         mobx.action(() => {
             let opts = mobx.toJS(inputModel.historyQueryOpts.get());
@@ -510,7 +559,7 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
     }
 
     @boundMethod
-    handleMainFocus(e : any) {
+    handleMainFocus(e: any) {
         let inputModel = GlobalModel.inputModel;
         if (inputModel.historyShow.get()) {
             e.preventDefault();
@@ -523,7 +572,7 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
     }
 
     @boundMethod
-    handleMainBlur(e : any) {
+    handleMainBlur(e: any) {
         if (document.activeElement == this.mainInputRef.current) {
             return;
         }
@@ -531,7 +580,7 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
     }
 
     @boundMethod
-    handleHistoryFocus(e : any) {
+    handleHistoryFocus(e: any) {
         let inputModel = GlobalModel.inputModel;
         if (!inputModel.historyShow.get()) {
             e.preventDefault();
@@ -544,7 +593,7 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
     }
 
     @boundMethod
-    handleHistoryBlur(e : any) {
+    handleHistoryBlur(e: any) {
         if (document.activeElement == this.historyInputRef.current) {
             return;
         }
@@ -574,11 +623,37 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
         if (activeScreen != null) {
             activeScreen.focusType.get(); // for reaction
         }
-        let computedHeight = (displayLines*24)+14+2;  // 24 = height of line, 14 = padding, 2 = border
+        let computedHeight = displayLines * 24 + 14 + 2; // 24 = height of line, 14 = padding, 2 = border
         return (
             <div className="control cmd-input-control is-expanded" ref={this.controlRef}>
-                <textarea key="main" ref={this.mainInputRef} spellCheck="false" autoComplete="off" autoCorrect="off" id="main-cmd-input" onFocus={this.handleMainFocus} onBlur={this.handleMainBlur} style={{height: computedHeight, minHeight: computedHeight}} value={curLine} onKeyDown={this.onKeyDown} onChange={this.onChange} className={cn("textarea", {"display-disabled": disabled})}></textarea>
-                <input key="history" ref={this.historyInputRef} spellCheck="false" autoComplete="off" autoCorrect="off" className="history-input" type="text" onFocus={this.handleHistoryFocus} onKeyDown={this.onHistoryKeyDown} onChange={this.handleHistoryInput} value={inputModel.historyQueryOpts.get().queryStr}/>
+                <textarea
+                    key="main"
+                    ref={this.mainInputRef}
+                    spellCheck="false"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    id="main-cmd-input"
+                    onFocus={this.handleMainFocus}
+                    onBlur={this.handleMainBlur}
+                    style={{ height: computedHeight, minHeight: computedHeight }}
+                    value={curLine}
+                    onKeyDown={this.onKeyDown}
+                    onChange={this.onChange}
+                    className={cn("textarea", { "display-disabled": disabled })}
+                ></textarea>
+                <input
+                    key="history"
+                    ref={this.historyInputRef}
+                    spellCheck="false"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    className="history-input"
+                    type="text"
+                    onFocus={this.handleHistoryFocus}
+                    onKeyDown={this.onHistoryKeyDown}
+                    onChange={this.handleHistoryInput}
+                    value={inputModel.historyQueryOpts.get().queryStr}
+                />
             </div>
         );
     }
@@ -586,25 +661,25 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
 
 @mobxReact.observer
 class InfoMsg extends React.Component<{}, {}> {
-    getAfterSlash(s : string) : string {
+    getAfterSlash(s: string): string {
         if (s.startsWith("^/")) {
             return s.substr(1);
         }
         let slashIdx = s.lastIndexOf("/");
-        if (slashIdx == s.length-1) {
-            slashIdx = s.lastIndexOf("/", slashIdx-1);
+        if (slashIdx == s.length - 1) {
+            slashIdx = s.lastIndexOf("/", slashIdx - 1);
         }
         if (slashIdx == -1) {
             return s;
         }
-        return s.substr(slashIdx+1);
+        return s.substr(slashIdx + 1);
     }
 
-    hasSpace(s : string) : boolean {
+    hasSpace(s: string): boolean {
         return s.indexOf(" ") != -1;
     }
 
-    handleCompClick(s : string) : void {
+    handleCompClick(s: string): void {
         // TODO -> complete to this completion
     }
 
@@ -613,9 +688,9 @@ class InfoMsg extends React.Component<{}, {}> {
         let inputModel = model.inputModel;
         let infoMsg = inputModel.infoMsg.get();
         let infoShow = inputModel.infoShow.get();
-        let line : string = null;
-        let istr : string = null;
-        let idx : number = 0;
+        let line: string = null;
+        let istr: string = null;
+        let idx: number = 0;
         let titleStr = null;
         let remoteEditKey = "inforemoteedit";
         if (infoMsg != null) {
@@ -623,7 +698,7 @@ class InfoMsg extends React.Component<{}, {}> {
         }
         let activeScreen = model.getActiveScreen();
         return (
-            <div className="cmd-input-info" style={{display: (infoShow ? "block" : "none")}}>
+            <div className="cmd-input-info" style={{ display: infoShow ? "block" : "none" }}>
                 <If condition={infoMsg && infoMsg.infotitle != null}>
                     <div key="infotitle" className="info-title">
                         {titleStr}
@@ -632,16 +707,17 @@ class InfoMsg extends React.Component<{}, {}> {
                 <If condition={infoMsg && infoMsg.infomsg != null}>
                     <div key="infomsg" className="info-msg">
                         <If condition={infoMsg.infomsghtml}>
-                            <span dangerouslySetInnerHTML={{__html: infoMsg.infomsg}}/>
-                        </If>
-                        <If condition={!infoMsg.infomsghtml}>
-                            {infoMsg.infomsg}
+                            <span dangerouslySetInnerHTML={{ __html: infoMsg.infomsg }} />
                         </If>
+                        <If condition={!infoMsg.infomsghtml}>{infoMsg.infomsg}</If>
                     </div>
                 </If>
                 <If condition={infoMsg && infoMsg.websharelink && activeScreen != null}>
                     <div key="infomsg" className="info-msg">
-                        started sharing screen at <a target="_blank" href={makeExternLink(activeScreen.getWebShareUrl())}>[link]</a>
+                        started sharing screen at{" "}
+                        <a target="_blank" href={makeExternLink(activeScreen.getWebShareUrl())}>
+                            [link]
+                        </a>
                     </div>
                 </If>
                 <If condition={infoMsg && infoMsg.infolines != null}>
@@ -654,7 +730,15 @@ class InfoMsg extends React.Component<{}, {}> {
                 <If condition={infoMsg && infoMsg.infocomps != null && infoMsg.infocomps.length > 0}>
                     <div key="infocomps" className="info-comps">
                         <For each="istr" index="idx" of={infoMsg.infocomps}>
-                            <div onClick={() => this.handleCompClick(istr)} key={idx} className={cn("info-comp", {"has-space": this.hasSpace(istr)}, {"metacmd-comp": istr.startsWith("^")})}>
+                            <div
+                                onClick={() => this.handleCompClick(istr)}
+                                key={idx}
+                                className={cn(
+                                    "info-comp",
+                                    { "has-space": this.hasSpace(istr) },
+                                    { "metacmd-comp": istr.startsWith("^") }
+                                )}
+                            >
                                 {this.getAfterSlash(istr)}
                             </div>
                         </For>
@@ -677,10 +761,10 @@ class InfoMsg extends React.Component<{}, {}> {
 
 @mobxReact.observer
 class HistoryInfo extends React.Component<{}, {}> {
-    lastClickHNum : string = null;
-    lastClickTs : number = 0;
-    containingText : mobx.IObservableValue<string> = mobx.observable.box("");
-    
+    lastClickHNum: string = null;
+    lastClickTs: number = 0;
+    containingText: mobx.IObservableValue<string> = mobx.observable.box("");
+
     componentDidMount() {
         let inputModel = GlobalModel.inputModel;
         let hitem = inputModel.getHistorySelectedItem();
@@ -693,7 +777,7 @@ class HistoryInfo extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    handleItemClick(hitem : HistoryItem) {
+    handleItemClick(hitem: HistoryItem) {
         let inputModel = GlobalModel.inputModel;
         let selItem = inputModel.getHistorySelectedItem();
         if (this.lastClickHNum == hitem.historynum && selItem != null && selItem.historynum == hitem.historynum) {
@@ -713,35 +797,40 @@ class HistoryInfo extends React.Component<{}, {}> {
         }, 3000);
     }
 
-    renderRemote(hitem : HistoryItem) : any {
+    renderRemote(hitem: HistoryItem): any {
         if (hitem.remote == null || isBlank(hitem.remote.remoteid)) {
-            return sprintf("%-15s ", "")
+            return sprintf("%-15s ", "");
         }
         let r = GlobalModel.getRemote(hitem.remote.remoteid);
         if (r == null) {
-            return sprintf("%-15s ", "???")
+            return sprintf("%-15s ", "???");
         }
         let rname = "";
         if (!isBlank(r.remotealias)) {
             rname = r.remotealias;
-        }
-        else {
+        } else {
             rname = r.remotecanonicalname;
         }
         if (!isBlank(hitem.remote.name)) {
             rname = rname + ":" + hitem.remote.name;
         }
-        let rtn = sprintf("%-15s ", "[" + truncateWithTDots(rname, 13) + "]")
+        let rtn = sprintf("%-15s ", "[" + truncateWithTDots(rname, 13) + "]");
         return rtn;
     }
 
-    renderHInfoText(hitem : HistoryItem, opts : HistoryQueryOpts, isSelected : boolean, snames : Record<string, string>, scrNames : Record<string, string>) : string {
+    renderHInfoText(
+        hitem: HistoryItem,
+        opts: HistoryQueryOpts,
+        isSelected: boolean,
+        snames: Record<string, string>,
+        scrNames: Record<string, string>
+    ): string {
         let remoteStr = "";
         if (!opts.limitRemote) {
             remoteStr = this.renderRemote(hitem);
         }
-        let selectedStr = (isSelected ? "*" : " ");
-        let lineNumStr = (hitem.linenum > 0 ? "(" + hitem.linenum + ")" : "");
+        let selectedStr = isSelected ? "*" : " ";
+        let lineNumStr = hitem.linenum > 0 ? "(" + hitem.linenum + ")" : "";
         if (isBlank(opts.queryType) || opts.queryType == "screen") {
             return selectedStr + sprintf("%7s", lineNumStr) + " " + remoteStr;
         }
@@ -771,22 +860,49 @@ class HistoryInfo extends React.Component<{}, {}> {
                 }
             }
             let ssStr = sessionStr + screenStr;
-            return selectedStr + sprintf("%15s ", sessionStr) + " " + sprintf("%15s", screenStr) + sprintf("%7s", lineNumStr) + " " + remoteStr;
+            return (
+                selectedStr +
+                sprintf("%15s ", sessionStr) +
+                " " +
+                sprintf("%15s", screenStr) +
+                sprintf("%7s", lineNumStr) +
+                " " +
+                remoteStr
+            );
         }
         return "-";
     }
 
-    renderHItem(hitem : HistoryItem, opts : HistoryQueryOpts, isSelected : boolean, snames : Record<string, string>, scrNames : Record<string, string>) : any {
+    renderHItem(
+        hitem: HistoryItem,
+        opts: HistoryQueryOpts,
+        isSelected: boolean,
+        snames: Record<string, string>,
+        scrNames: Record<string, string>
+    ): any {
         let lines = hitem.cmdstr.split("\n");
-        let line : string = "";
+        let line: string = "";
         let idx = 0;
         let infoText = this.renderHInfoText(hitem, opts, isSelected, snames, scrNames);
         let infoTextSpacer = sprintf("%" + infoText.length + "s", "");
         return (
-            <div key={hitem.historynum} className={cn("history-item", {"is-selected": isSelected}, {"history-haderror": hitem.haderror}, "hnum-" + hitem.historynum)} onClick={() => this.handleItemClick(hitem)}>
-                <div className="history-line">{infoText} {lines[0]}</div>
+            <div
+                key={hitem.historynum}
+                className={cn(
+                    "history-item",
+                    { "is-selected": isSelected },
+                    { "history-haderror": hitem.haderror },
+                    "hnum-" + hitem.historynum
+                )}
+                onClick={() => this.handleItemClick(hitem)}
+            >
+                <div className="history-line">
+                    {infoText} {lines[0]}
+                </div>
                 <For each="line" index="idx" of={lines.slice(1)}>
-                    <div key={idx} className="history-line">{infoTextSpacer} {line}</div>
+                    <div key={idx} className="history-line">
+                        {infoTextSpacer} {line}
+                    </div>
                 </For>
             </div>
         );
@@ -799,19 +915,18 @@ class HistoryInfo extends React.Component<{}, {}> {
 
     render() {
         let inputModel = GlobalModel.inputModel;
-        let idx : number = 0;
+        let idx: number = 0;
         let selItem = inputModel.getHistorySelectedItem();
         let hitems = inputModel.getFilteredHistoryItems();
         hitems = hitems.slice().reverse();
-        let hitem : HistoryItem = null;
+        let hitem: HistoryItem = null;
         let opts = inputModel.historyQueryOpts.get();
-        let snames : Record<string, string> = {};
-        let scrNames : Record<string, string> = {};
+        let snames: Record<string, string> = {};
+        let scrNames: Record<string, string> = {};
         if (opts.queryType == "global") {
             scrNames = GlobalModel.getScreenNames();
             snames = GlobalModel.getSessionNames();
-        }
-        else if (opts.queryType == "session") {
+        } else if (opts.queryType == "session") {
             scrNames = GlobalModel.getScreenNames();
         }
         return (
@@ -825,16 +940,22 @@ class HistoryInfo extends React.Component<{}, {}> {
                     <div className="spacer"></div>
                     <div className="history-opt">[{opts.limitRemote ? "this" : "any"} remote &#x2318;R]</div>
                     <div className="grow-spacer"></div>
-                    <div className="history-clickable-opt" onClick={this.handleClose}>(ESC)</div>
+                    <div className="history-clickable-opt" onClick={this.handleClose}>
+                        (ESC)
+                    </div>
                     <div className="spacer"></div>
                 </div>
-                <div className={cn("history-items", {"show-remotes": !opts.limitRemote}, {"show-sessions": opts.queryType == "global"})}>
-                    <If condition={hitems.length == 0}>
-                        [no history]
-                    </If>
+                <div
+                    className={cn(
+                        "history-items",
+                        { "show-remotes": !opts.limitRemote },
+                        { "show-sessions": opts.queryType == "global" }
+                    )}
+                >
+                    <If condition={hitems.length == 0}>[no history]</If>
                     <If condition={hitems.length > 0}>
                         <For each="hitem" index="idx" of={hitems}>
-                            {this.renderHItem(hitem, opts, (hitem == selItem), snames, scrNames)}
+                            {this.renderHItem(hitem, opts, hitem == selItem, snames, scrNames)}
                         </For>
                     </If>
                 </div>
@@ -845,10 +966,10 @@ class HistoryInfo extends React.Component<{}, {}> {
 
 @mobxReact.observer
 class CmdInput extends React.Component<{}, {}> {
-    cmdInputRef : React.RefObject<any> = React.createRef();
-    
+    cmdInputRef: React.RefObject<any> = React.createRef();
+
     @boundMethod
-    onInfoToggle() : void {
+    onInfoToggle(): void {
         GlobalModel.inputModel.toggleInfoMsg();
         return;
     }
@@ -871,51 +992,50 @@ class CmdInput extends React.Component<{}, {}> {
         })();
     }
 
-    componentDidUpdate(prevProps, prevState, snapshot : {}) : void {
+    componentDidUpdate(prevProps, prevState, snapshot: {}): void {
         this.updateCmdInputHeight();
     }
 
     @boundMethod
-    handleInnerHeightUpdate() : void {
+    handleInnerHeightUpdate(): void {
         this.updateCmdInputHeight();
     }
 
     @boundMethod
-    clickFocusInputHint() : void {
+    clickFocusInputHint(): void {
         GlobalModel.inputModel.giveFocus();
     }
 
     @boundMethod
-    clickHistoryHint(e : any) : void {
+    clickHistoryHint(e: any): void {
         e.preventDefault();
         e.stopPropagation();
-        
+
         let inputModel = GlobalModel.inputModel;
         if (inputModel.historyShow.get()) {
             inputModel.resetHistory();
-        }
-        else {
+        } else {
             inputModel.openHistory();
         }
     }
 
     @boundMethod
-    clickConnectRemote(remoteId : string) : void {
+    clickConnectRemote(remoteId: string): void {
         GlobalCommandRunner.connectRemote(remoteId);
     }
-    
+
     render() {
         let model = GlobalModel;
         let inputModel = model.inputModel;
         let screen = GlobalModel.getActiveScreen();
-        let ri : RemoteInstanceType = null;
-        let rptr : RemotePtrType = null;
+        let ri: RemoteInstanceType = null;
+        let rptr: RemotePtrType = null;
         if (screen != null) {
             ri = screen.getCurRemoteInstance();
             rptr = screen.curRemote.get();
         }
-        let remote : RemoteType = null;
-        let feState : Record<string, string> = null;
+        let remote: RemoteType = null;
+        let feState: Record<string, string> = null;
         if (ri != null) {
             remote = GlobalModel.getRemote(ri.remoteid);
             feState = ri.festate;
@@ -923,55 +1043,88 @@ class CmdInput extends React.Component<{}, {}> {
         let infoShow = inputModel.infoShow.get();
         let historyShow = !infoShow && inputModel.historyShow.get();
         let infoMsg = inputModel.infoMsg.get();
-        let hasInfo = (infoMsg != null);
+        let hasInfo = infoMsg != null;
         let focusVal = inputModel.physicalInputFocused.get();
-        let inputMode : string = inputModel.inputMode.get();
-        let textAreaInputKey = (screen == null ? "null" : screen.screenId);
+        let inputMode: string = inputModel.inputMode.get();
+        let textAreaInputKey = screen == null ? "null" : screen.screenId;
         return (
-            <div ref={this.cmdInputRef} className={cn("cmd-input has-background-black", {"has-info": infoShow}, {"has-history": historyShow})}>
-                <div key="focus" className={cn("focus-indicator", {"active": focusVal})}/>
+            <div
+                ref={this.cmdInputRef}
+                className={cn(
+                    "cmd-input has-background-black",
+                    { "has-info": infoShow },
+                    { "has-history": historyShow }
+                )}
+            >
+                <div key="focus" className={cn("focus-indicator", { active: focusVal })} />
                 <div key="minmax" onClick={this.onInfoToggle} className="input-minmax-control">
                     <If condition={infoShow || historyShow}>
-                        <i className="fa-sharp fa-solid fa-chevron-down"/>
+                        <i className="fa-sharp fa-solid fa-chevron-down" />
                     </If>
                     <If condition={!(infoShow || historyShow) && hasInfo}>
-                        <i className="fa-sharp fa-solid fa-chevron-up"/>
+                        <i className="fa-sharp fa-solid fa-chevron-up" />
                     </If>
                 </div>
                 <If condition={historyShow}>
                     <div className="cmd-input-grow-spacer"></div>
-                    <HistoryInfo/>
+                    <HistoryInfo />
                 </If>
-                <InfoMsg key="infomsg"/>
+                <InfoMsg key="infomsg" />
                 <If condition={remote && remote.status != "connected"}>
                     <div className="remote-status-warning">
-                        WARNING:&nbsp;<span className="remote-name">[{GlobalModel.resolveRemoteIdToFullRef(remote.remoteid)}]</span>&nbsp;is {remote.status}
-                        <If condition={remote.status != "connecting"}><div className="button is-prompt-green is-outlined is-small" onClick={() => this.clickConnectRemote(remote.remoteid)}>connect now</div></If>
+                        WARNING:&nbsp;
+                        <span className="remote-name">[{GlobalModel.resolveRemoteIdToFullRef(remote.remoteid)}]</span>
+                        &nbsp;is {remote.status}
+                        <If condition={remote.status != "connecting"}>
+                            <div
+                                className="button is-prompt-green is-outlined is-small"
+                                onClick={() => this.clickConnectRemote(remote.remoteid)}
+                            >
+                                connect now
+                            </div>
+                        </If>
                     </div>
                 </If>
                 <div key="prompt" className="cmd-input-context">
                     <div className="has-text-white">
-                        <Prompt rptr={rptr} festate={feState}/>
+                        <Prompt rptr={rptr} festate={feState} />
                     </div>
                 </div>
-                <div key="input" className={cn("cmd-input-field field has-addons", (inputMode != null ? "inputmode-" + inputMode : null))}>
+                <div
+                    key="input"
+                    className={cn(
+                        "cmd-input-field field has-addons",
+                        inputMode != null ? "inputmode-" + inputMode : null
+                    )}
+                >
                     <If condition={inputMode != null}>
                         <div className="control cmd-quick-context">
                             <div className="button is-static">{inputMode}</div>
                         </div>
                     </If>
-                    <TextAreaInput key={textAreaInputKey} onHeightChange={this.handleInnerHeightUpdate}/>
+                    <TextAreaInput key={textAreaInputKey} onHeightChange={this.handleInnerHeightUpdate} />
                     <div className="control cmd-exec">
                         <div onClick={inputModel.uiSubmitCommand} className="button" title="Run Command">
                             <span className="icon">
-                                <i className="fa-sharp fa-solid fa-rocket"/>
+                                <i className="fa-sharp fa-solid fa-rocket" />
                             </span>
                         </div>
                     </div>
                     <div className="cmd-hints">
-                        <div onClick={inputModel.toggleExpandInput} className="hint-item color-white">{inputModel.inputExpanded.get() ? "shrink" : "expand"} input ({renderCmdText("E")})</div>
-                        <If condition={!focusVal}><div onClick={this.clickFocusInputHint} className="hint-item color-white">focus input ({renderCmdText("I")})</div></If>
-                        <If condition={focusVal}><div onMouseDown={this.clickHistoryHint} className="hint-item color-green"><i className={cn("fa-sharp fa-solid", (historyShow ? "fa-angle-down" : "fa-angle-up"))}/> {historyShow ? "close history (esc)" : "show history (ctrl-r)"}</div></If>
+                        <div onClick={inputModel.toggleExpandInput} className="hint-item color-white">
+                            {inputModel.inputExpanded.get() ? "shrink" : "expand"} input ({renderCmdText("E")})
+                        </div>
+                        <If condition={!focusVal}>
+                            <div onClick={this.clickFocusInputHint} className="hint-item color-white">
+                                focus input ({renderCmdText("I")})
+                            </div>
+                        </If>
+                        <If condition={focusVal}>
+                            <div onMouseDown={this.clickHistoryHint} className="hint-item color-green">
+                                <i className={cn("fa-sharp fa-solid", historyShow ? "fa-angle-down" : "fa-angle-up")} />{" "}
+                                {historyShow ? "close history (esc)" : "show history (ctrl-r)"}
+                            </div>
+                        </If>
                     </div>
                 </div>
             </div>
@@ -981,25 +1134,25 @@ class CmdInput extends React.Component<{}, {}> {
 
 // screen is not null
 @mobxReact.observer
-class ScreenWindowView extends React.Component<{screen : Screen}, {}> {
-    rszObs : any;
-    windowViewRef : React.RefObject<any>;
+class ScreenWindowView extends React.Component<{ screen: Screen }, {}> {
+    rszObs: any;
+    windowViewRef: React.RefObject<any>;
 
-    width : mobx.IObservableValue<number> = mobx.observable.box(0, {name: "sw-view-width"});
-    height : mobx.IObservableValue<number> = mobx.observable.box(0, {name: "sw-view-height"});
-    setSize_debounced : (width : number, height : number) => void;
+    width: mobx.IObservableValue<number> = mobx.observable.box(0, { name: "sw-view-width" });
+    height: mobx.IObservableValue<number> = mobx.observable.box(0, { name: "sw-view-height" });
+    setSize_debounced: (width: number, height: number) => void;
 
-    renderMode : OV<RenderModeType> = mobx.observable.box("normal", {name: "renderMode"});
-    shareCopied : OV<boolean> = mobx.observable.box(false, {name: "sw-shareCopied"});
+    renderMode: OV<RenderModeType> = mobx.observable.box("normal", { name: "renderMode" });
+    shareCopied: OV<boolean> = mobx.observable.box(false, { name: "sw-shareCopied" });
 
-    constructor(props : any) {
+    constructor(props: any) {
         super(props);
         this.setSize_debounced = debounce(1000, this.setSize.bind(this));
         this.windowViewRef = React.createRef();
     }
 
-    setSize(width : number, height : number) : void {
-        let {screen} = this.props;
+    setSize(width: number, height: number): void {
+        let { screen } = this.props;
         if (screen == null) {
             return;
         }
@@ -1009,7 +1162,7 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> {
         mobx.action(() => {
             this.width.set(width);
             this.height.set(height);
-            screen.screenSizeCallback({height: height, width: width});
+            screen.screenSizeCallback({ height: height, width: width });
         })();
     }
 
@@ -1030,7 +1183,7 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> {
         }
     }
 
-    handleResize(entries : any) {
+    handleResize(entries: any) {
         if (entries.length == 0) {
             return;
         }
@@ -1042,8 +1195,8 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> {
         })();
     }
 
-    getScreenLines() : ScreenLines {
-        let {screen} = this.props;
+    getScreenLines(): ScreenLines {
+        let { screen } = this.props;
         let win = GlobalModel.getScreenLinesById(screen.screenId);
         if (win == null) {
             win = GlobalModel.loadScreenLines(screen.screenId);
@@ -1051,8 +1204,8 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> {
         return win;
     }
 
-    getWindowViewStyle() : any {
-        return {position: "absolute", width: "100%", height: "100%", overflowX: "hidden"};
+    getWindowViewStyle(): any {
+        return { position: "absolute", width: "100%", height: "100%", overflowX: "hidden" };
     }
 
     @boundMethod
@@ -1063,12 +1216,17 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> {
         })();
     }
 
-    renderError(message : string, fade : boolean) {
-        let {screen} = this.props;
+    renderError(message: string, fade: boolean) {
+        let { screen } = this.props;
         return (
-            <div className="window-view" style={this.getWindowViewStyle()} ref={this.windowViewRef} data-screenid={screen.screenId}>
+            <div
+                className="window-view"
+                style={this.getWindowViewStyle()}
+                ref={this.windowViewRef}
+                data-screenid={screen.screenId}
+            >
                 <div key="lines" className="lines"></div>
-                <div key="window-empty" className={cn("window-empty", {"should-fade": fade})}>
+                <div key="window-empty" className={cn("window-empty", { "should-fade": fade })}>
                     <div>{message}</div>
                 </div>
             </div>
@@ -1076,8 +1234,8 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> {
     }
 
     @boundMethod
-    copyShareLink() : void {
-        let {screen} = this.props;
+    copyShareLink(): void {
+        let { screen } = this.props;
         let shareLink = screen.getWebShareUrl();
         if (shareLink == null) {
             return;
@@ -1090,29 +1248,27 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> {
             mobx.action(() => {
                 this.shareCopied.set(false);
             })();
-        }, 600)
+        }, 600);
     }
 
     @boundMethod
-    openScreenSettings() : void {
-        let {screen} = this.props;
+    openScreenSettings(): void {
+        let { screen } = this.props;
         mobx.action(() => {
-            GlobalModel.screenSettingsModal.set({sessionId: screen.sessionId, screenId: screen.screenId});
+            GlobalModel.screenSettingsModal.set({ sessionId: screen.sessionId, screenId: screen.screenId });
         })();
     }
 
     @boundMethod
-    buildLineComponent(lineProps : LineFactoryProps) : JSX.Element {
-        let {screen} = this.props;
-        let {line, ...restProps} = lineProps;
-        let realLine : LineType = (line as LineType);
-        return (
-            <Line key={realLine.lineid} screen={screen} line={realLine} {...restProps}/>
-        );
+    buildLineComponent(lineProps: LineFactoryProps): JSX.Element {
+        let { screen } = this.props;
+        let { line, ...restProps } = lineProps;
+        let realLine: LineType = line as LineType;
+        return <Line key={realLine.lineid} screen={screen} line={realLine} {...restProps} />;
     }
 
     render() {
-        let {screen} = this.props;
+        let { screen } = this.props;
         let win = this.getScreenLines();
         if (win == null || !win.loaded.get()) {
             return this.renderError("...", true);
@@ -1128,7 +1284,7 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> {
             return this.renderError("loading client data", true);
         }
         let idx = 0;
-        let line : LineType = null;
+        let line: LineType = null;
         let session = GlobalModel.getSessionById(screen.sessionId);
         let isActive = screen.isActive();
         let selectedLine = screen.getSelectedLine();
@@ -1136,44 +1292,63 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> {
         let renderMode = this.renderMode.get();
         return (
             <div className="window-view" style={this.getWindowViewStyle()} ref={this.windowViewRef}>
-                <div key="rendermode-tag" className={cn("rendermode-tag", {"is-active": isActive})} style={{display: "none"}}>
+                <div
+                    key="rendermode-tag"
+                    className={cn("rendermode-tag", { "is-active": isActive })}
+                    style={{ display: "none" }}
+                >
                     <div className="render-mode" onClick={this.toggleRenderMode}>
                         <If condition={renderMode == "normal"}>
-                            <i title="collapse" className="fa-sharp fa-solid fa-arrows-to-line"/>
+                            <i title="collapse" className="fa-sharp fa-solid fa-arrows-to-line" />
                         </If>
                         <If condition={renderMode == "collapsed"}>
-                            <i title="expand" className="fa-sharp fa-solid fa-arrows-from-line"/>
+                            <i title="expand" className="fa-sharp fa-solid fa-arrows-from-line" />
                         </If>
                     </div>
                 </div>
                 <If condition={screen.isWebShared()}>
                     <div key="share-tag" className="share-tag">
                         <If condition={this.shareCopied.get()}>
-                            <div className="copied-indicator"/>
+                            <div className="copied-indicator" />
                         </If>
-                        <div className="share-tag-title"><i title="archived" className="fa-sharp fa-solid fa-share-nodes"/> web shared</div>
+                        <div className="share-tag-title">
+                            <i title="archived" className="fa-sharp fa-solid fa-share-nodes" /> web shared
+                        </div>
                         <div className="share-tag-link">
                             <div className="button is-prompt-green is-outlined is-small" onClick={this.copyShareLink}>
                                 <span>copy link</span>
                                 <span className="icon">
-                                    <i className="fa-sharp fa-solid fa-copy"/>
+                                    <i className="fa-sharp fa-solid fa-copy" />
                                 </span>
                             </div>
-                            <div className="button is-prompt-green is-outlined is-small" onClick={this.openScreenSettings}>
+                            <div
+                                className="button is-prompt-green is-outlined is-small"
+                                onClick={this.openScreenSettings}
+                            >
                                 <span>open settings</span>
                                 <span className="icon">
-                                    <i className="fa-sharp fa-solid fa-cog"/>
+                                    <i className="fa-sharp fa-solid fa-cog" />
                                 </span>
                             </div>
                         </div>
                     </div>
                 </If>
                 <If condition={lines.length > 0}>
-                    <LinesView screen={screen} width={this.width.get()} lines={lines} renderMode={renderMode} lineFactory={this.buildLineComponent}/>
+                    <LinesView
+                        screen={screen}
+                        width={this.width.get()}
+                        lines={lines}
+                        renderMode={renderMode}
+                        lineFactory={this.buildLineComponent}
+                    />
                 </If>
                 <If condition={lines.length == 0}>
                     <div key="window-empty" className="window-empty">
-                        <div><code>[session="{session.name.get()}" screen="{screen.name.get()}"]</code></div>
+                        <div>
+                            <code>
+                                [session="{session.name.get()}" screen="{screen.name.get()}"]
+                            </code>
+                        </div>
                     </div>
                 </If>
             </div>
@@ -1182,47 +1357,43 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> {
 }
 
 @mobxReact.observer
-class ScreenView extends React.Component<{screen : Screen}, {}> {
+class ScreenView extends React.Component<{ screen: Screen }, {}> {
     render() {
-        let {screen} = this.props;
+        let { screen } = this.props;
         if (screen == null) {
-            return (
-                <div className="screen-view">
-                    (no screen found)
-                </div>
-            );
+            return <div className="screen-view">(no screen found)</div>;
         }
         let fontSize = GlobalModel.termFontSize.get();
         return (
             <div className="screen-view" data-screenid={screen.screenId}>
-                <ScreenWindowView key={screen.screenId + ":" + fontSize} screen={screen}/>
+                <ScreenWindowView key={screen.screenId + ":" + fontSize} screen={screen} />
             </div>
         );
     }
 }
 
 @mobxReact.observer
-class ScreenTabs extends React.Component<{session : Session}, {}> {
-    tabsRef : React.RefObject<any> = React.createRef();
-    lastActiveScreenId : string = null;
-    scrolling : OV<boolean> = mobx.observable.box(false, {name: "screentabs-scrolling"});
+class ScreenTabs extends React.Component<{ session: Session }, {}> {
+    tabsRef: React.RefObject<any> = React.createRef();
+    lastActiveScreenId: string = null;
+    scrolling: OV<boolean> = mobx.observable.box(false, { name: "screentabs-scrolling" });
 
-    stopScrolling_debounced : () => void;
+    stopScrolling_debounced: () => void;
 
-    constructor(props : any) {
+    constructor(props: any) {
         super(props);
         this.stopScrolling_debounced = debounce(1500, this.stopScrolling.bind(this));
     }
-    
+
     @boundMethod
     handleNewScreen() {
-        let {session} = this.props;
+        let { session } = this.props;
         GlobalCommandRunner.createNewScreen();
     }
 
     @boundMethod
-    handleSwitchScreen(screenId : string) {
-        let {session} = this.props;
+    handleSwitchScreen(screenId: string) {
+        let { session } = this.props;
         if (session == null) {
             return;
         }
@@ -1236,15 +1407,17 @@ class ScreenTabs extends React.Component<{session : Session}, {}> {
         GlobalCommandRunner.switchScreen(screenId);
     }
 
-    componentDidMount() : void {
+    componentDidMount(): void {
         this.componentDidUpdate();
     }
 
-    componentDidUpdate() : void {
-        let {session} = this.props;
+    componentDidUpdate(): void {
+        let { session } = this.props;
         let activeScreenId = session.activeScreenId.get();
         if (activeScreenId != this.lastActiveScreenId && this.tabsRef.current) {
-            let tabElem = this.tabsRef.current.querySelector(sprintf(".screen-tab[data-screenid=\"%s\"]", activeScreenId));
+            let tabElem = this.tabsRef.current.querySelector(
+                sprintf('.screen-tab[data-screenid="%s"]', activeScreenId)
+            );
             if (tabElem != null) {
                 tabElem.scrollIntoView();
             }
@@ -1252,7 +1425,7 @@ class ScreenTabs extends React.Component<{session : Session}, {}> {
         this.lastActiveScreenId = activeScreenId;
     }
 
-    stopScrolling() : void {
+    stopScrolling(): void {
         mobx.action(() => {
             this.scrolling.set(false);
         })();
@@ -1269,25 +1442,43 @@ class ScreenTabs extends React.Component<{session : Session}, {}> {
     }
 
     @boundMethod
-    openScreenSettings(e : any, screen : Screen) : void {
+    openScreenSettings(e: any, screen: Screen): void {
         e.preventDefault();
         e.stopPropagation();
         mobx.action(() => {
-            GlobalModel.screenSettingsModal.set({sessionId: screen.sessionId, screenId: screen.screenId});
+            GlobalModel.screenSettingsModal.set({ sessionId: screen.sessionId, screenId: screen.screenId });
         })();
     }
 
-    renderTab(screen : Screen, activeScreenId : string, index : number) : any {
+    renderTab(screen: Screen, activeScreenId: string, index: number): any {
         let tabIndex = null;
-        if (index+1 <= 9) {
-            tabIndex = (<div className="tab-index">{renderCmdText(String(index+1))}</div>);
+        if (index + 1 <= 9) {
+            tabIndex = <div className="tab-index">{renderCmdText(String(index + 1))}</div>;
         }
-        let settings = (<div onClick={(e) => this.openScreenSettings(e, screen)} title="Settings" className="tab-gear"><i className="fa-sharp fa-solid fa-gear"/></div>);
-        let archived = (screen.archived.get() ? (<i title="archived" className="fa-sharp fa-solid fa-box-archive"/>) : null);
+        let settings = (
+            <div onClick={(e) => this.openScreenSettings(e, screen)} title="Settings" className="tab-gear">
+                <i className="fa-sharp fa-solid fa-gear" />
+            </div>
+        );
+        let archived = screen.archived.get() ? (
+            <i title="archived" className="fa-sharp fa-solid fa-box-archive" />
+        ) : null;
 
-        let webShared = (screen.isWebShared() ? (<i title="shared to web" className="fa-sharp fa-solid fa-share-nodes web-share-icon"/>) : null);
+        let webShared = screen.isWebShared() ? (
+            <i title="shared to web" className="fa-sharp fa-solid fa-share-nodes web-share-icon" />
+        ) : null;
         return (
-            <div key={screen.screenId} data-screenid={screen.screenId} className={cn("screen-tab", {"is-active": activeScreenId == screen.screenId, "is-archived": screen.archived.get()}, "color-" + screen.getTabColor())} onClick={() => this.handleSwitchScreen(screen.screenId)} onContextMenu={(event) => this.openScreenSettings(event, screen)}>
+            <div
+                key={screen.screenId}
+                data-screenid={screen.screenId}
+                className={cn(
+                    "screen-tab",
+                    { "is-active": activeScreenId == screen.screenId, "is-archived": screen.archived.get() },
+                    "color-" + screen.getTabColor()
+                )}
+                onClick={() => this.handleSwitchScreen(screen.screenId)}
+                onContextMenu={(event) => this.openScreenSettings(event, screen)}
+            >
                 <div className="tab-name">
                     {archived}
                     {webShared}
@@ -1300,11 +1491,11 @@ class ScreenTabs extends React.Component<{session : Session}, {}> {
     }
 
     render() {
-        let {session} = this.props;
+        let { session } = this.props;
         if (session == null) {
             return null;
         }
-        let screen : Screen = null;
+        let screen: Screen = null;
         let index = 0;
         let showingScreens = [];
         let activeScreenId = session.activeScreenId.get();
@@ -1327,14 +1518,17 @@ class ScreenTabs extends React.Component<{session : Session}, {}> {
         });
         return (
             <div className="screen-tabs-container">
-                <div className={cn("screen-tabs", {"scrolling": this.scrolling.get()})} ref={this.tabsRef} onScroll={this.handleScroll}>
+                <div
+                    className={cn("screen-tabs", { scrolling: this.scrolling.get() })}
+                    ref={this.tabsRef}
+                    onScroll={this.handleScroll}
+                >
                     <For each="screen" index="index" of={showingScreens}>
                         {this.renderTab(screen, activeScreenId, index)}
                     </For>
                     <div key="new-screen" className="screen-tab new-screen" onClick={this.handleNewScreen}>
-                        <i className="fa-sharp fa-solid fa-plus"/>
+                        <i className="fa-sharp fa-solid fa-plus" />
                     </div>
-                    
                 </div>
                 <div className="cmd-hints">
                     <div className="hint-item color-green">move left {renderCmdText("[")}</div>
@@ -1359,13 +1553,13 @@ class SessionView extends React.Component<{}, {}> {
         if (cmdInputHeight == 0) {
             cmdInputHeight = 110;
         }
-        let isHidden = (GlobalModel.activeMainView.get() != "session");
+        let isHidden = GlobalModel.activeMainView.get() != "session";
         return (
-            <div className={cn("session-view", {"is-hidden": isHidden})} data-sessionid={session.sessionId}>
-                <ScreenView screen={activeScreen}/>
-                <ScreenTabs session={session}/>
-                <div style={{height: cmdInputHeight}}></div>
-                <CmdInput/>
+            <div className={cn("session-view", { "is-hidden": isHidden })} data-sessionid={session.sessionId}>
+                <ScreenView screen={activeScreen} />
+                <ScreenTabs session={session} />
+                <div style={{ height: cmdInputHeight }}></div>
+                <CmdInput />
             </div>
         );
     }
@@ -1373,7 +1567,7 @@ class SessionView extends React.Component<{}, {}> {
 
 @mobxReact.observer
 class MainSideBar extends React.Component<{}, {}> {
-    collapsed : mobx.IObservableValue<boolean> = mobx.observable.box(false);
+    collapsed: mobx.IObservableValue<boolean> = mobx.observable.box(false);
 
     @boundMethod
     toggleCollapsed() {
@@ -1382,7 +1576,7 @@ class MainSideBar extends React.Component<{}, {}> {
         })();
     }
 
-    handleSessionClick(sessionId : string) {
+    handleSessionClick(sessionId: string) {
         GlobalCommandRunner.switchSession(sessionId);
     }
 
@@ -1400,7 +1594,7 @@ class MainSideBar extends React.Component<{}, {}> {
         })();
     }
 
-    remoteDisplayName(remote : RemoteType) : any {
+    remoteDisplayName(remote: RemoteType): any {
         if (!isBlank(remote.remotealias)) {
             return (
                 <>
@@ -1409,20 +1603,20 @@ class MainSideBar extends React.Component<{}, {}> {
                 </>
             );
         }
-        return (<span>{remote.remotecanonicalname}</span>);
+        return <span>{remote.remotecanonicalname}</span>;
     }
 
-    clickRemote(remote : RemoteType) {
+    clickRemote(remote: RemoteType) {
         GlobalCommandRunner.showRemote(remote.remoteid);
     }
 
     @boundMethod
-    handleAddRemote() : void {
+    handleAddRemote(): void {
         GlobalCommandRunner.openCreateRemote();
     }
 
     @boundMethod
-    handleHistoryClick() : void {
+    handleHistoryClick(): void {
         if (GlobalModel.activeMainView.get() == "history") {
             mobx.action(() => {
                 GlobalModel.activeMainView.set("session");
@@ -1433,13 +1627,13 @@ class MainSideBar extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    handlePlaybookClick() : void {
+    handlePlaybookClick(): void {
         console.log("playbook click");
         return;
     }
 
     @boundMethod
-    handleBookmarksClick() : void {
+    handleBookmarksClick(): void {
         if (GlobalModel.activeMainView.get() == "bookmarks") {
             GlobalModel.showSessionView();
             return;
@@ -1448,7 +1642,7 @@ class MainSideBar extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    handleWebSharingClick() : void {
+    handleWebSharingClick(): void {
         if (GlobalModel.activeMainView.get() == "webshare") {
             GlobalModel.showSessionView();
             return;
@@ -1457,26 +1651,26 @@ class MainSideBar extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    handleWelcomeClick() : void {
+    handleWelcomeClick(): void {
         mobx.action(() => {
             GlobalModel.welcomeModalOpen.set(true);
         })();
     }
 
     @boundMethod
-    handleSettingsClick() : void {
+    handleSettingsClick(): void {
         mobx.action(() => {
             GlobalModel.clientSettingsModal.set(true);
         })();
     }
 
     @boundMethod
-    handleConnectionsClick() : void {
+    handleConnectionsClick(): void {
         GlobalModel.remotesModalModel.openModal();
     }
 
     @boundMethod
-    openSessionSettings(e : any, session : Session) : void {
+    openSessionSettings(e: any, session: Session): void {
         e.preventDefault();
         e.stopPropagation();
         mobx.action(() => {
@@ -1489,17 +1683,17 @@ class MainSideBar extends React.Component<{}, {}> {
         let activeSessionId = model.activeSessionId.get();
         let activeWindow = model.getScreenLinesForActiveScreen();
         let activeScreen = model.getActiveScreen();
-        let activeRemoteId : string = null;
+        let activeRemoteId: string = null;
         if (activeScreen != null) {
             let rptr = activeScreen.curRemote.get();
             if (rptr != null && !isBlank(rptr.remoteid)) {
                 activeRemoteId = rptr.remoteid;
             }
         }
-        let session : Session = null;
+        let session: Session = null;
         let remotes = model.remotes ?? [];
-        let remote : RemoteType = null;
-        let idx : number = 0;
+        let remote: RemoteType = null;
+        let idx: number = 0;
         remotes = sortAndFilterRemotes(remotes);
         let sessionList = [];
         for (let session of model.sessionList) {
@@ -1509,91 +1703,173 @@ class MainSideBar extends React.Component<{}, {}> {
         }
         let isCollapsed = this.collapsed.get();
         let mainView = GlobalModel.activeMainView.get();
-        let activePlaybookId : string = null;
+        let activePlaybookId: string = null;
         return (
-            <div className={cn("main-sidebar", {"collapsed": isCollapsed}, {"is-dev": GlobalModel.isDev})}>
+            <div className={cn("main-sidebar", { collapsed: isCollapsed }, { "is-dev": GlobalModel.isDev })}>
                 <div className="logo-header">
-                    <h1 className={cn("title", "prompt-logo-small", {"collapsed": isCollapsed}, {"is-dev": GlobalModel.isDev})}>
-                        {(isCollapsed ? "[p]" : "[prompt]")}
+                    <h1
+                        className={cn(
+                            "title",
+                            "prompt-logo-small",
+                            { collapsed: isCollapsed },
+                            { "is-dev": GlobalModel.isDev }
+                        )}
+                    >
+                        {isCollapsed ? "[p]" : "[prompt]"}
                     </h1>
                 </div>
                 <div className="collapse-container">
                     <div className="arrow-container" onClick={this.toggleCollapsed}>
-                        <If condition={!isCollapsed}><i className="fa-sharp fa-solid fa-angle-left"/></If>
-                        <If condition={isCollapsed}><i className="fa-sharp fa-solid fa-angle-right"/></If>
+                        <If condition={!isCollapsed}>
+                            <i className="fa-sharp fa-solid fa-angle-left" />
+                        </If>
+                        <If condition={isCollapsed}>
+                            <i className="fa-sharp fa-solid fa-angle-right" />
+                        </If>
                     </div>
                 </div>
                 <div className="menu">
-                    <p className="menu-label">
-                        Sessions
-                    </p>
+                    <p className="menu-label">Sessions</p>
                     <ul className="menu-list session-menu-list">
                         <If condition={!model.sessionListLoaded.get()}>
-                            <li className="menu-loading-message"><a>...</a></li>
+                            <li className="menu-loading-message">
+                                <a>...</a>
+                            </li>
                         </If>
                         <If condition={model.sessionListLoaded.get()}>
                             <For each="session" index="idx" of={sessionList}>
-                                <li key={session.sessionId}><a className={cn({"is-active": mainView == "session" && activeSessionId == session.sessionId})} onClick={() => this.handleSessionClick(session.sessionId)}>
-                                    <If condition={!session.archived.get()}>
-                                        <div className="session-num"><span className="hotkey">^⌘</span>{idx+1}</div>
-                                    </If>
-                                    <If condition={session.archived.get()}>
-                                        <div className="session-num"><i title="archived" className="fa-sharp fa-solid fa-box-archive"/></div>
-                                    </If>
-                                    <div>
-                                        {session.name.get()}
-                                    </div>
-                                    <div className="flex-spacer"/>
-                                    <div className="session-gear" onClick={(e) => this.openSessionSettings(e, session)}>
-                                        <i className="fa-sharp fa-solid fa-gear"/>
-                                    </div>
-                                </a></li>
+                                <li key={session.sessionId}>
+                                    <a
+                                        className={cn({
+                                            "is-active": mainView == "session" && activeSessionId == session.sessionId,
+                                        })}
+                                        onClick={() => this.handleSessionClick(session.sessionId)}
+                                    >
+                                        <If condition={!session.archived.get()}>
+                                            <div className="session-num">
+                                                <span className="hotkey">^⌘</span>
+                                                {idx + 1}
+                                            </div>
+                                        </If>
+                                        <If condition={session.archived.get()}>
+                                            <div className="session-num">
+                                                <i title="archived" className="fa-sharp fa-solid fa-box-archive" />
+                                            </div>
+                                        </If>
+                                        <div>{session.name.get()}</div>
+                                        <div className="flex-spacer" />
+                                        <div
+                                            className="session-gear"
+                                            onClick={(e) => this.openSessionSettings(e, session)}
+                                        >
+                                            <i className="fa-sharp fa-solid fa-gear" />
+                                        </div>
+                                    </a>
+                                </li>
                             </For>
-                            <li className="new-session"><a onClick={() => this.handleNewSession()}><i className="fa-sharp fa-solid fa-plus"/> New Session</a></li>
+                            <li className="new-session">
+                                <a onClick={() => this.handleNewSession()}>
+                                    <i className="fa-sharp fa-solid fa-plus" /> New Session
+                                </a>
+                            </li>
                         </If>
                     </ul>
-                    <ul className="menu-list" style={{marginTop: 20}}>
-                        <li className="menu-history"><a onClick={this.handleHistoryClick} className={cn({"is-active": (mainView == "history")})}><i className="fa-sharp fa-solid fa-clock"/> HISTORY <span className="hotkey">&#x2318;H</span></a></li>
+                    <ul className="menu-list" style={{ marginTop: 20 }}>
+                        <li className="menu-history">
+                            <a onClick={this.handleHistoryClick} className={cn({ "is-active": mainView == "history" })}>
+                                <i className="fa-sharp fa-solid fa-clock" /> HISTORY{" "}
+                                <span className="hotkey">&#x2318;H</span>
+                            </a>
+                        </li>
                     </ul>
                     <ul className="menu-list">
-                        <li className="menu-bookmarks"><a onClick={this.handleBookmarksClick} className={cn({"is-active": (mainView == "bookmarks")})}><i className="fa-sharp fa-solid fa-bookmark"/> BOOKMARKS <span className="hotkey">&#x2318;B</span></a></li>
+                        <li className="menu-bookmarks">
+                            <a
+                                onClick={this.handleBookmarksClick}
+                                className={cn({ "is-active": mainView == "bookmarks" })}
+                            >
+                                <i className="fa-sharp fa-solid fa-bookmark" /> BOOKMARKS{" "}
+                                <span className="hotkey">&#x2318;B</span>
+                            </a>
+                        </li>
                     </ul>
                     <ul className="menu-list">
-                        <li className="menu-websharing"><a onClick={this.handleWebSharingClick} className={cn({"is-active": (mainView == "webshare")})}><i className="fa-sharp fa-solid fa-share-nodes"/> WEB SHARING</a></li>
+                        <li className="menu-websharing">
+                            <a
+                                onClick={this.handleWebSharingClick}
+                                className={cn({ "is-active": mainView == "webshare" })}
+                            >
+                                <i className="fa-sharp fa-solid fa-share-nodes" /> WEB SHARING
+                            </a>
+                        </li>
                     </ul>
-                    <p className="menu-label display-none">
-                        Playbooks
-                    </p>
+                    <p className="menu-label display-none">Playbooks</p>
                     <ul className="menu-list display-none">
-                        <li key="default"><a onClick={this.handlePlaybookClick}><i className="fa-sharp fa-solid fa-file-lines"/> default</a></li>
-                        <li key="prompt-dev"><a onClick={this.handlePlaybookClick}><i className="fa-sharp fa-solid fa-file-lines"/> prompt-dev</a></li>
+                        <li key="default">
+                            <a onClick={this.handlePlaybookClick}>
+                                <i className="fa-sharp fa-solid fa-file-lines" /> default
+                            </a>
+                        </li>
+                        <li key="prompt-dev">
+                            <a onClick={this.handlePlaybookClick}>
+                                <i className="fa-sharp fa-solid fa-file-lines" /> prompt-dev
+                            </a>
+                        </li>
                     </ul>
                     <div className="spacer"></div>
                     <If condition={GlobalModel.debugScreen.get() && activeScreen != null}>
                         <div>
-                            focus={activeScreen.focusType.get()}<br/>
-            sline={activeScreen.getSelectedLine()}<br/>
-            termfocus={activeScreen.termLineNumFocus.get()}<br/>
+                            focus={activeScreen.focusType.get()}
+                            <br />
+                            sline={activeScreen.getSelectedLine()}
+                            <br />
+                            termfocus={activeScreen.termLineNumFocus.get()}
+                            <br />
                         </div>
                     </If>
-                    <ul className="menu-list" style={{display: "none"}}>
-                        <li className="menu-bookmarks"><a onClick={this.handleWelcomeClick} className={cn({"is-active": GlobalModel.welcomeModalOpen.get()})}><i className="fa-sharp fa-solid fa-door-open"/> WELCOME</a></li>
+                    <ul className="menu-list" style={{ display: "none" }}>
+                        <li className="menu-bookmarks">
+                            <a
+                                onClick={this.handleWelcomeClick}
+                                className={cn({ "is-active": GlobalModel.welcomeModalOpen.get() })}
+                            >
+                                <i className="fa-sharp fa-solid fa-door-open" /> WELCOME
+                            </a>
+                        </li>
                     </ul>
                     <ul className="menu-list">
-                        <li className="menu-settings"><a onClick={this.handleSettingsClick}><i className="fa-sharp fa-solid fa-cog"/> SETTINGS</a></li>
+                        <li className="menu-settings">
+                            <a onClick={this.handleSettingsClick}>
+                                <i className="fa-sharp fa-solid fa-cog" /> SETTINGS
+                            </a>
+                        </li>
                     </ul>
                     <p className="menu-label">
-                        <a onClick={() => this.clickLinks()}>LINKS <i className={cn("fa-sharp fa-solid", (GlobalModel.showLinks.get() ? "fa-angle-down" : "fa-angle-right"))}/></a>
+                        <a onClick={() => this.clickLinks()}>
+                            LINKS{" "}
+                            <i
+                                className={cn(
+                                    "fa-sharp fa-solid",
+                                    GlobalModel.showLinks.get() ? "fa-angle-down" : "fa-angle-right"
+                                )}
+                            />
+                        </a>
                     </p>
-                    <ul className="menu-list" style={{display: (GlobalModel.showLinks.get() ? null : "none")}}>
+                    <ul className="menu-list" style={{ display: GlobalModel.showLinks.get() ? null : "none" }}>
                         <li>
-                            <a target="_blank" href="https://docs.getprompt.dev/releasenotes"><i style={{width: 20}} className="fa-sharp fa-solid fa-notes"/> release notes</a>
+                            <a target="_blank" href="https://docs.getprompt.dev/releasenotes">
+                                <i style={{ width: 20 }} className="fa-sharp fa-solid fa-notes" /> release notes
+                            </a>
                         </li>
                         <li>
-                            <a target="_blank" href="https://docs.getprompt.dev/"><i style={{width: 20}} className="fa-sharp fa-solid fa-book"/> documentation</a>
+                            <a target="_blank" href="https://docs.getprompt.dev/">
+                                <i style={{ width: 20 }} className="fa-sharp fa-solid fa-book" /> documentation
+                            </a>
                         </li>
                         <li>
-                            <a target="_blank" href="https://discord.gg/XfvZ334gwU"><i style={{width: 20}} className="fa-brands fa-discord"/> discord</a>
+                            <a target="_blank" href="https://discord.gg/XfvZ334gwU">
+                                <i style={{ width: 20 }} className="fa-brands fa-discord" /> discord
+                            </a>
                         </li>
                     </ul>
                     <p className="menu-label">
@@ -1601,13 +1877,20 @@ class MainSideBar extends React.Component<{}, {}> {
                     </p>
                     <ul className="menu-list remotes-menu-list">
                         <For each="remote" of={remotes}>
-                            <li key={remote.remoteid} className={cn("remote-menu-item")}><a className={cn({"is-active": (remote.remoteid == activeRemoteId)})} onClick={() => this.clickRemote(remote)}>
-                                <RemoteStatusLight remote={remote}/>
-                                {this.remoteDisplayName(remote)}
-                            </a></li>
+                            <li key={remote.remoteid} className={cn("remote-menu-item")}>
+                                <a
+                                    className={cn({ "is-active": remote.remoteid == activeRemoteId })}
+                                    onClick={() => this.clickRemote(remote)}
+                                >
+                                    <RemoteStatusLight remote={remote} />
+                                    {this.remoteDisplayName(remote)}
+                                </a>
+                            </li>
                         </For>
                         <li key="add-remote" className="add-remote">
-                            <a onClick={() => this.handleAddRemote()}><i className="fa-sharp fa-solid fa-plus"/> Add Connection</a>
+                            <a onClick={() => this.handleAddRemote()}>
+                                <i className="fa-sharp fa-solid fa-plus" /> Add Connection
+                            </a>
                         </li>
                     </ul>
                     <div className="bottom-spacer"></div>
@@ -1619,9 +1902,9 @@ class MainSideBar extends React.Component<{}, {}> {
 
 @mobxReact.observer
 class DisconnectedModal extends React.Component<{}, {}> {
-    logRef : any = React.createRef();
-    showLog : mobx.IObservableValue<boolean> = mobx.observable.box(false)
-    
+    logRef: any = React.createRef();
+    showLog: mobx.IObservableValue<boolean> = mobx.observable.box(false);
+
     @boundMethod
     restartServer() {
         GlobalModel.restartLocalServer();
@@ -1645,16 +1928,16 @@ class DisconnectedModal extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    handleShowLog() : void {
+    handleShowLog(): void {
         mobx.action(() => {
             this.showLog.set(!this.showLog.get());
         })();
     }
-    
+
     render() {
         let model = GlobalModel;
-        let logLine : string = null;
-        let idx : number = 0;
+        let logLine: string = null;
+        let idx: number = 0;
         return (
             <div className="prompt-modal disconnected-modal modal is-active">
                 <div className="modal-background"></div>
@@ -1666,30 +1949,32 @@ class DisconnectedModal extends React.Component<{}, {}> {
                         <div className="inner-content">
                             <div className="ws-log" ref={this.logRef}>
                                 <For each="logLine" index="idx" of={GlobalModel.ws.wsLog}>
-                                    <div key={idx} className="ws-logline">{logLine}</div>
+                                    <div key={idx} className="ws-logline">
+                                        {logLine}
+                                    </div>
                                 </For>
                             </div>
                         </div>
                     </If>
                     <footer>
-                        <div className="footer-text-link" style={{marginLeft: 10}} onClick={this.handleShowLog}>
+                        <div className="footer-text-link" style={{ marginLeft: 10 }} onClick={this.handleShowLog}>
                             <If condition={!this.showLog.get()}>
-                                <i className="fa-sharp fa-solid fa-plus"/> Show Log
+                                <i className="fa-sharp fa-solid fa-plus" /> Show Log
                             </If>
                             <If condition={this.showLog.get()}>
-                                <i className="fa-sharp fa-solid fa-minus"/> Hide Log
+                                <i className="fa-sharp fa-solid fa-minus" /> Hide Log
                             </If>
                         </div>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
                         <button onClick={this.tryReconnect} className="button">
                             <span className="icon">
-                                <i className="fa-sharp fa-solid fa-rotate"/>
+                                <i className="fa-sharp fa-solid fa-rotate" />
                             </span>
                             <span>Try Reconnect</span>
                         </button>
-                        <button onClick={this.restartServer} className="button is-danger" style={{marginLeft: 10}}>
+                        <button onClick={this.restartServer} className="button is-danger" style={{ marginLeft: 10 }}>
                             <span className="icon">
-                                <i className="fa-sharp fa-solid fa-triangle-exclamation"/>
+                                <i className="fa-sharp fa-solid fa-triangle-exclamation" />
                             </span>
                             <span>Restart Server</span>
                         </button>
@@ -1726,7 +2011,7 @@ class ClientStopModal extends React.Component<{}, {}> {
                     <footer>
                         <button onClick={this.refreshClient} className="button">
                             <span className="icon">
-                                <i className="fa-sharp fa-solid fa-rotate"/>
+                                <i className="fa-sharp fa-solid fa-rotate" />
                             </span>
                             <span>Hard Refresh Client</span>
                         </button>
@@ -1741,7 +2026,12 @@ class ClientStopModal extends React.Component<{}, {}> {
 class LoadingSpinner extends React.Component<{}, {}> {
     render() {
         return (
-            <div className="loading-spinner"><div></div><div></div><div></div><div></div></div>
+            <div className="loading-spinner">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
         );
     }
 }
@@ -1749,15 +2039,15 @@ class LoadingSpinner extends React.Component<{}, {}> {
 @mobxReact.observer
 class AlertModal extends React.Component<{}, {}> {
     @boundMethod
-    closeModal() : void {
+    closeModal(): void {
         GlobalModel.cancelAlert();
     }
 
     @boundMethod
-    handleOK() : void {
+    handleOK(): void {
         GlobalModel.confirmAlert();
     }
-    
+
     render() {
         let message = GlobalModel.alertMessage.get();
         if (message == null) {
@@ -1767,16 +2057,18 @@ class AlertModal extends React.Component<{}, {}> {
         let isConfirm = message.confirm;
         return (
             <div className="modal prompt-modal is-active alert-modal">
-                <div className="modal-background"/>
+                <div className="modal-background" />
                 <div className="modal-content">
                     <header>
-                        <p className="modal-title"><i className="fa-sharp fa-solid fa-triangle-exclamation"/> {title}</p>
+                        <p className="modal-title">
+                            <i className="fa-sharp fa-solid fa-triangle-exclamation" /> {title}
+                        </p>
                         <div className="close-icon">
-                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times"/>
+                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times" />
                         </div>
                     </header>
                     <If condition={message.markdown}>
-                        <Markdown text={message.message} extraClassName="inner-content"/>
+                        <Markdown text={message.message} extraClassName="inner-content" />
                     </If>
                     <If condition={!message.markdown}>
                         <div className="inner-content content">
@@ -1785,11 +2077,17 @@ class AlertModal extends React.Component<{}, {}> {
                     </If>
                     <footer>
                         <If condition={isConfirm}>
-                            <div onClick={this.closeModal} className="button is-prompt-cancel is-outlined is-small">Cancel</div>
-                            <div onClick={this.handleOK} className="button is-prompt-green is-outlined is-small">OK</div>
+                            <div onClick={this.closeModal} className="button is-prompt-cancel is-outlined is-small">
+                                Cancel
+                            </div>
+                            <div onClick={this.handleOK} className="button is-prompt-green is-outlined is-small">
+                                OK
+                            </div>
                         </If>
                         <If condition={!isConfirm}>
-                            <div onClick={this.handleOK} className="button is-prompt-green is-small">OK</div>
+                            <div onClick={this.handleOK} className="button is-prompt-green is-small">
+                                OK
+                            </div>
                         </If>
                     </footer>
                 </div>
@@ -1800,40 +2098,40 @@ class AlertModal extends React.Component<{}, {}> {
 
 @mobxReact.observer
 class WelcomeModal extends React.Component<{}, {}> {
-    totalPages : number = 3;
-    pageNum : OV<number> = mobx.observable.box(1, {name: "welcome-pagenum"});
-    
+    totalPages: number = 3;
+    pageNum: OV<number> = mobx.observable.box(1, { name: "welcome-pagenum" });
+
     @boundMethod
-    closeModal() : void {
+    closeModal(): void {
         mobx.action(() => {
             GlobalModel.welcomeModalOpen.set(false);
         })();
     }
 
     @boundMethod
-    goNext() : void {
+    goNext(): void {
         mobx.action(() => {
             this.pageNum.set(this.pageNum.get() + 1);
         })();
     }
 
     @boundMethod
-    goPrev() : void {
+    goPrev(): void {
         mobx.action(() => {
             this.pageNum.set(this.pageNum.get() - 1);
         })();
     }
 
-    renderDot(num : number) : any {
+    renderDot(num: number): any {
         if (num == this.pageNum.get()) {
-            return <i key={String(num)} className="fa-sharp fa-solid fa-circle"/>;
+            return <i key={String(num)} className="fa-sharp fa-solid fa-circle" />;
         }
-        return <i key={String(num)} className="fa-sharp fa-regular fa-circle"/>;
+        return <i key={String(num)} className="fa-sharp fa-regular fa-circle" />;
     }
 
-    renderDots() : any {
-        let elems : any = [];
-        for (let i=1; i<=this.totalPages; i++) {
+    renderDots(): any {
+        let elems: any = [];
+        for (let i = 1; i <= this.totalPages; i++) {
             let elem = this.renderDot(i);
             elems.push(elem);
         }
@@ -1844,15 +2142,15 @@ class WelcomeModal extends React.Component<{}, {}> {
         let pageNum = this.pageNum.get();
         return (
             <div className={cn("modal welcome-modal prompt-modal is-active")}>
-                <div className="modal-background"/>
+                <div className="modal-background" />
                 <div className="modal-content">
                     <header>
                         <div className="modal-title">welcome to [prompt]</div>
                         <div className="close-icon">
-                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times"/>
+                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times" />
                         </div>
                     </header>
-                    <div className={cn("inner-content content", {"is-hidden": pageNum != 1})}>
+                    <div className={cn("inner-content content", { "is-hidden": pageNum != 1 })}>
                         <p>
                             Prompt is a new terminal to help save you time and keep your command-line life organized.
                             Here's a couple quick tips to get your started!
@@ -1862,24 +2160,22 @@ class WelcomeModal extends React.Component<{}, {}> {
                         <If condition={pageNum > 1}>
                             <button className={cn("button is-dark prev-button is-small")} onClick={this.goPrev}>
                                 <span className="icon is-small">
-                                    <i className="fa-sharp fa-regular fa-angle-left"/>
+                                    <i className="fa-sharp fa-regular fa-angle-left" />
                                 </span>
                                 <span>Prev</span>
                             </button>
                         </If>
                         <If condition={pageNum == 1}>
-                            <div className="prev-spacer"/>
+                            <div className="prev-spacer" />
                         </If>
-                        <div className="flex-spacer"/>
-                        <div className="dots">
-                            {this.renderDots()}
-                        </div>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
+                        <div className="dots">{this.renderDots()}</div>
+                        <div className="flex-spacer" />
                         <If condition={pageNum < this.totalPages}>
                             <button className="button is-dark next-button is-small" onClick={this.goNext}>
                                 <span>Next</span>
                                 <span className="icon is-small">
-                                    <i className="fa-sharp fa-regular fa-angle-right"/>
+                                    <i className="fa-sharp fa-regular fa-angle-right" />
                                 </span>
                             </button>
                         </If>
@@ -1897,14 +2193,14 @@ class WelcomeModal extends React.Component<{}, {}> {
 
 @mobxReact.observer
 class Main extends React.Component<{}, {}> {
-    dcWait : OV<boolean> = mobx.observable.box(false, {name: "dcWait"});
-    
-    constructor(props : any) {
+    dcWait: OV<boolean> = mobx.observable.box(false, { name: "dcWait" });
+
+    constructor(props: any) {
         super(props);
     }
 
     @boundMethod
-    handleContextMenu(e : any) {
+    handleContextMenu(e: any) {
         let isInNonTermInput = false;
         let activeElem = document.activeElement;
         if (activeElem != null && activeElem.nodeName == "TEXTAREA") {
@@ -1915,15 +2211,14 @@ class Main extends React.Component<{}, {}> {
         if (activeElem != null && activeElem.nodeName == "INPUT" && activeElem.getAttribute("type") == "text") {
             isInNonTermInput = true;
         }
-        let opts : ContextMenuOpts = {};
+        let opts: ContextMenuOpts = {};
         if (isInNonTermInput) {
             opts.showCut = true;
         }
         let sel = window.getSelection();
         if (!isBlank(sel.toString())) {
             GlobalModel.contextEditMenu(e, opts);
-        }
-        else {
+        } else {
             if (isInNonTermInput) {
                 GlobalModel.contextEditMenu(e, opts);
             }
@@ -1931,7 +2226,7 @@ class Main extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    updateDcWait(val : boolean) : void {
+    updateDcWait(val: boolean): void {
         mobx.action(() => {
             this.dcWait.set(val);
         })();
@@ -1953,15 +2248,15 @@ class Main extends React.Component<{}, {}> {
             return (
                 <div id="main" onContextMenu={this.handleContextMenu}>
                     <div className="main-content">
-                        <MainSideBar/>
-                        <div className="session-view"/>
+                        <MainSideBar />
+                        <div className="session-view" />
                     </div>
                     <If condition={dcWait}>
                         <If condition={disconnected}>
-                            <DisconnectedModal/>
+                            <DisconnectedModal />
                         </If>
                         <If condition={!disconnected && hasClientStop}>
-                            <ClientStopModal/>
+                            <ClientStopModal />
                         </If>
                     </If>
                 </div>
@@ -1973,38 +2268,41 @@ class Main extends React.Component<{}, {}> {
         return (
             <div id="main" onContextMenu={this.handleContextMenu}>
                 <div className="main-content">
-                    <MainSideBar/>
-                    <SessionView/>
-                    <HistoryView/>
-                    <BookmarksView/>
-                    <WebShareView/>
+                    <MainSideBar />
+                    <SessionView />
+                    <HistoryView />
+                    <BookmarksView />
+                    <WebShareView />
                 </div>
-                <AlertModal/>
+                <AlertModal />
                 <If condition={GlobalModel.needsTos()}>
-                    <TosModal/>
+                    <TosModal />
                 </If>
                 <If condition={GlobalModel.welcomeModalOpen.get()}>
-                    <WelcomeModal/>
+                    <WelcomeModal />
                 </If>
                 <If condition={screenSettingsModal != null}>
-                    <ScreenSettingsModal key={screenSettingsModal.sessionId + ":" + screenSettingsModal.screenId} sessionId={screenSettingsModal.sessionId} screenId={screenSettingsModal.screenId}/>
+                    <ScreenSettingsModal
+                        key={screenSettingsModal.sessionId + ":" + screenSettingsModal.screenId}
+                        sessionId={screenSettingsModal.sessionId}
+                        screenId={screenSettingsModal.screenId}
+                    />
                 </If>
                 <If condition={sessionSettingsModal != null}>
-                    <SessionSettingsModal key={sessionSettingsModal} sessionId={sessionSettingsModal}/>
+                    <SessionSettingsModal key={sessionSettingsModal} sessionId={sessionSettingsModal} />
                 </If>
                 <If condition={lineSettingsModal != null}>
-                    <LineSettingsModal key={String(lineSettingsModal)} linenum={lineSettingsModal}/>
+                    <LineSettingsModal key={String(lineSettingsModal)} linenum={lineSettingsModal} />
                 </If>
                 <If condition={clientSettingsModal}>
-                    <ClientSettingsModal/>
+                    <ClientSettingsModal />
                 </If>
                 <If condition={remotesModal}>
-                    <RemotesModal model={GlobalModel.remotesModalModel}/>
+                    <RemotesModal model={GlobalModel.remotesModalModel} />
                 </If>
             </div>
         );
     }
 }
 
-export {Main};
-
+export { Main };
diff --git a/src/modals.less b/src/modals.less
index 10a989aa..e8e277fa 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -4,7 +4,7 @@
     z-index: 105;
 
     .modal-background {
-        background-color: rgba(10,10,10,.6);
+        background-color: rgba(10, 10, 10, 0.6);
     }
 }
 
@@ -35,7 +35,7 @@
             background-color: black;
             height: 250px;
             overflow: auto;
-            
+
             .ws-logline {
                 .mono-font(12px);
                 color: @term-white;
@@ -66,7 +66,7 @@
 
 .modal.alert-modal {
     z-index: 205;
-    
+
     footer {
         justify-content: center;
 
@@ -171,7 +171,7 @@
     .modal-content {
         min-width: 850px;
     }
-    
+
     .inner-content {
         display: flex;
         flex-direction: row;
@@ -209,7 +209,7 @@
                         color: white;
                     }
                 }
-                
+
                 &:first-child {
                     border-top: 0;
                 }
@@ -291,9 +291,8 @@
                 i.fa-check {
                     color: @term-green;
                 }
-                
+
                 &.is-ok {
-                    
                 }
 
                 .message-row {
@@ -316,7 +315,7 @@
                 .update-auth-button {
                     visibility: hidden;
                 }
-                
+
                 &:hover {
                     .update-auth-button {
                         visibility: visible;
@@ -328,7 +327,8 @@
                 }
             }
 
-            &.auth-editing, &.create-remote {
+            &.auth-editing,
+            &.create-remote {
                 .settings-field.align-top {
                     align-items: flex-start;
 
@@ -366,11 +366,11 @@
                 .settings-input input {
                     width: 250px;
                 }
-                
+
                 .dropdown .dropdown-trigger button {
                     font-size: 12px;
                 }
-                
+
                 .dropdown .dropdown-item {
                     font-size: 12px;
                     padding: 5px 5px 5px 12px;
@@ -525,7 +525,7 @@
                 height: 20px;
             }
         }
-        
+
         input {
             padding: 4px;
             border-radius: 3px;
@@ -534,7 +534,7 @@
         .control {
             font-size: 12px;
         }
-        
+
         .tab-color-icon.color-green {
             color: desaturate(@tab-green, 30%);
         }
diff --git a/src/modals.tsx b/src/modals.tsx
index cff05392..b8294f72 100644
--- a/src/modals.tsx
+++ b/src/modals.tsx
@@ -1,25 +1,25 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
 import cn from "classnames";
-import {GlobalModel, GlobalCommandRunner} from "./model";
+import { GlobalModel, GlobalCommandRunner } from "./model";
 import * as util from "./util";
 
 type OV<V> = mobx.IObservableValue<V>;
 
 class TosModal extends React.Component<{}, {}> {
     @boundMethod
-    acceptTos() : void {
+    acceptTos(): void {
         GlobalCommandRunner.clientAcceptTos();
     }
-    
+
     render() {
         return (
             <div className={cn("modal tos-modal prompt-modal is-active")}>
-                <div className="modal-background"/>
+                <div className="modal-background" />
                 <div className="modal-content">
                     <header>
                         <div className="modal-title">Welcome to [prompt]</div>
@@ -29,20 +29,29 @@ class TosModal extends React.Component<{}, {}> {
                             <p>Thank you for downloading Prompt!</p>
                             <p>
                                 Prompt is a new terminal designed to help you save time and organize your command life.
-                                Prompt is currently in beta.  If you'd like to give feedback, run into problems, have questions,
-                                or need help, please join the Prompt <a target="_blank" href={util.makeExternLink("https://discord.gg/XfvZ334gwU")}>discord&nbsp;server</a>.
+                                Prompt is currently in beta. If you'd like to give feedback, run into problems, have
+                                questions, or need help, please join the Prompt{" "}
+                                <a target="_blank" href={util.makeExternLink("https://discord.gg/XfvZ334gwU")}>
+                                    discord&nbsp;server
+                                </a>
+                                .
                             </p>
                             <p>
-                                Prompt is free to use, no email or registration required (unless you're using the cloud features).
+                                Prompt is free to use, no email or registration required (unless you're using the cloud
+                                features).
                             </p>
                             <p>
-                                <a target="_blank" href={util.makeExternLink("https://www.getprompt.dev/tos.html")}>Full Terms of Service</a>
+                                <a target="_blank" href={util.makeExternLink("https://www.getprompt.dev/tos.html")}>
+                                    Full Terms of Service
+                                </a>
                             </p>
                         </div>
                     </div>
                     <footer>
-                        <div className="flex-spacer"/>
-                        <div onClick={this.acceptTos} className="button is-prompt-green is-outlined is-small">Accept Terms of Service</div>
+                        <div className="flex-spacer" />
+                        <div onClick={this.acceptTos} className="button is-prompt-green is-outlined is-small">
+                            Accept Terms of Service
+                        </div>
                     </footer>
                 </div>
             </div>
@@ -50,4 +59,4 @@ class TosModal extends React.Component<{}, {}> {
     }
 }
 
-export {TosModal};
+export { TosModal };
diff --git a/src/model.ts b/src/model.ts
index c3135376..db868b08 100644
--- a/src/model.ts
+++ b/src/model.ts
@@ -3,70 +3,70 @@ import { sprintf } from "sprintf-js";
 import { boundMethod } from "autobind-decorator";
 import { debounce } from "throttle-debounce";
 import {
-  handleJsonFetchResponse,
-  base64ToArray,
-  genMergeData,
-  genMergeDataMap,
-  genMergeSimpleData,
-  boundInt,
-  isModKeyPress,
+    handleJsonFetchResponse,
+    base64ToArray,
+    genMergeData,
+    genMergeDataMap,
+    genMergeSimpleData,
+    boundInt,
+    isModKeyPress,
 } from "./util";
 import { TermWrap } from "./term";
 import { v4 as uuidv4 } from "uuid";
 import type {
-  SessionDataType,
-  LineType,
-  RemoteType,
-  HistoryItem,
-  RemoteInstanceType,
-  RemotePtrType,
-  CmdDataType,
-  FeCmdPacketType,
-  TermOptsType,
-  RemoteStateType,
-  ScreenDataType,
-  ScreenOptsType,
-  PtyDataUpdateType,
-  ModelUpdateType,
-  UpdateMessage,
-  InfoType,
-  CmdLineUpdateType,
-  UIContextType,
-  HistoryInfoType,
-  HistoryQueryOpts,
-  FeInputPacketType,
-  TermWinSize,
-  RemoteInputPacketType,
-  ContextMenuOpts,
-  RendererContext,
-  RendererModel,
-  PtyDataType,
-  BookmarkType,
-  ClientDataType,
-  HistoryViewDataType,
-  AlertMessageType,
-  HistorySearchParams,
-  FocusTypeStrs,
-  ScreenLinesType,
-  HistoryTypeStrs,
-  RendererPluginType,
-  WindowSize,
-  WebShareOpts,
-  TermContextUnion,
-  RemoteEditType,
-  RemoteViewType,
-  CommandRtnType,
-  WebCmd,
-  WebRemote,
+    SessionDataType,
+    LineType,
+    RemoteType,
+    HistoryItem,
+    RemoteInstanceType,
+    RemotePtrType,
+    CmdDataType,
+    FeCmdPacketType,
+    TermOptsType,
+    RemoteStateType,
+    ScreenDataType,
+    ScreenOptsType,
+    PtyDataUpdateType,
+    ModelUpdateType,
+    UpdateMessage,
+    InfoType,
+    CmdLineUpdateType,
+    UIContextType,
+    HistoryInfoType,
+    HistoryQueryOpts,
+    FeInputPacketType,
+    TermWinSize,
+    RemoteInputPacketType,
+    ContextMenuOpts,
+    RendererContext,
+    RendererModel,
+    PtyDataType,
+    BookmarkType,
+    ClientDataType,
+    HistoryViewDataType,
+    AlertMessageType,
+    HistorySearchParams,
+    FocusTypeStrs,
+    ScreenLinesType,
+    HistoryTypeStrs,
+    RendererPluginType,
+    WindowSize,
+    WebShareOpts,
+    TermContextUnion,
+    RemoteEditType,
+    RemoteViewType,
+    CommandRtnType,
+    WebCmd,
+    WebRemote,
 } from "./types";
 import { WSControl } from "./ws";
 import {
-  measureText,
-  getMonoFontSize,
-  windowWidthToCols,
-  windowHeightToRows,
-  termWidthFromCols,
-  termHeightFromRows,
+    measureText,
+    getMonoFontSize,
+    windowWidthToCols,
+    windowHeightToRows,
+    termWidthFromCols,
+    termHeightFromRows,
 } from "./textmeasure";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -87,27 +87,8 @@ const DefaultTermFontSize = 12;
 const MinFontSize = 8;
 const MaxFontSize = 15;
 const InputChunkSize = 500;
-const RemoteColors = [
-  "red",
-  "green",
-  "yellow",
-  "blue",
-  "magenta",
-  "cyan",
-  "white",
-  "orange",
-];
-const TabColors = [
-  "red",
-  "green",
-  "yellow",
-  "blue",
-  "magenta",
-  "cyan",
-  "white",
-  "orange",
-  "black",
-];
+const RemoteColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange"];
+const TabColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange", "black"];
 
 // @ts-ignore
 const VERSION = __PROMPT_VERSION__;
@@ -115,41 +96,31 @@ const VERSION = __PROMPT_VERSION__;
 const BUILD = __PROMPT_BUILD__;
 
 type LineContainerModel = {
-  loadTerminalRenderer: (
-    elem: Element,
-    line: LineType,
-    cmd: Cmd,
-    width: number
-  ) => void;
-  registerRenderer: (lineId: string, renderer: RendererModel) => void;
-  unloadRenderer: (lineId: string) => void;
-  getIsFocused: (lineNum: number) => boolean;
-  getTermWrap: (lineId: string) => TermWrap;
-  getRenderer: (lineId: string) => RendererModel;
-  getFocusType: () => FocusTypeStrs;
-  getSelectedLine: () => number;
-  getCmd: (line: LineType) => Cmd;
-  setTermFocus: (lineNum: number, focus: boolean) => void;
-  getUsedRows: (
-    context: RendererContext,
-    line: LineType,
-    cmd: Cmd,
-    width: number
-  ) => number;
-  getContentHeight: (context: RendererContext) => number;
-  setContentHeight: (context: RendererContext, height: number) => void;
-  getMaxContentSize(): WindowSize;
-  getIdealContentSize(): WindowSize;
+    loadTerminalRenderer: (elem: Element, line: LineType, cmd: Cmd, width: number) => void;
+    registerRenderer: (lineId: string, renderer: RendererModel) => void;
+    unloadRenderer: (lineId: string) => void;
+    getIsFocused: (lineNum: number) => boolean;
+    getTermWrap: (lineId: string) => TermWrap;
+    getRenderer: (lineId: string) => RendererModel;
+    getFocusType: () => FocusTypeStrs;
+    getSelectedLine: () => number;
+    getCmd: (line: LineType) => Cmd;
+    setTermFocus: (lineNum: number, focus: boolean) => void;
+    getUsedRows: (context: RendererContext, line: LineType, cmd: Cmd, width: number) => number;
+    getContentHeight: (context: RendererContext) => number;
+    setContentHeight: (context: RendererContext, height: number) => void;
+    getMaxContentSize(): WindowSize;
+    getIdealContentSize(): WindowSize;
 };
 
 type SWLinePtr = {
-  line: LineType;
-  slines: ScreenLines;
-  screen: Screen;
+    line: LineType;
+    slines: ScreenLines;
+    screen: Screen;
 };
 
 function keyHasNoMods(e: any) {
-  return !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey;
+    return !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey;
 }
 
 type OV<V> = mobx.IObservableValue<V>;
@@ -158,4251 +129,3872 @@ type OMap<K, V> = mobx.ObservableMap<K, V>;
 type CV<V> = mobx.IComputedValue<V>;
 
 function isBlank(s: string) {
-  return s == null || s == "";
+    return s == null || s == "";
 }
 
 function remotePtrToString(rptr: RemotePtrType): string {
-  if (rptr == null || isBlank(rptr.remoteid)) {
-    return null;
-  }
-  if (isBlank(rptr.ownerid) && isBlank(rptr.name)) {
-    return rptr.remoteid;
-  }
-  if (!isBlank(rptr.ownerid) && isBlank(rptr.name)) {
-    return sprintf("@%s:%s", rptr.ownerid, rptr.remoteid);
-  }
-  if (isBlank(rptr.ownerid) && !isBlank(rptr.name)) {
-    return sprintf("%s:%s", rptr.remoteid, rptr.name);
-  }
-  return sprintf("@%s:%s:%s", rptr.ownerid, rptr.remoteid, rptr.name);
+    if (rptr == null || isBlank(rptr.remoteid)) {
+        return null;
+    }
+    if (isBlank(rptr.ownerid) && isBlank(rptr.name)) {
+        return rptr.remoteid;
+    }
+    if (!isBlank(rptr.ownerid) && isBlank(rptr.name)) {
+        return sprintf("@%s:%s", rptr.ownerid, rptr.remoteid);
+    }
+    if (isBlank(rptr.ownerid) && !isBlank(rptr.name)) {
+        return sprintf("%s:%s", rptr.remoteid, rptr.name);
+    }
+    return sprintf("@%s:%s:%s", rptr.ownerid, rptr.remoteid, rptr.name);
 }
 
 function riToRPtr(ri: RemoteInstanceType): RemotePtrType {
-  if (ri == null) {
-    return null;
-  }
-  return { ownerid: ri.remoteownerid, remoteid: ri.remoteid, name: ri.name };
+    if (ri == null) {
+        return null;
+    }
+    return { ownerid: ri.remoteownerid, remoteid: ri.remoteid, name: ri.name };
 }
 
 type KeyModsType = {
-  meta?: boolean;
-  ctrl?: boolean;
-  alt?: boolean;
-  shift?: boolean;
+    meta?: boolean;
+    ctrl?: boolean;
+    alt?: boolean;
+    shift?: boolean;
 };
 
 type ElectronApi = {
-  getId: () => string;
-  getIsDev: () => boolean;
-  getAuthKey: () => string;
-  getLocalServerStatus: () => boolean;
-  restartLocalServer: () => boolean;
-  reloadWindow: () => void;
-  onTCmd: (callback: (mods: KeyModsType) => void) => void;
-  onICmd: (callback: (mods: KeyModsType) => void) => void;
-  onLCmd: (callback: (mods: KeyModsType) => void) => void;
-  onHCmd: (callback: (mods: KeyModsType) => void) => void;
-  onMetaArrowUp: (callback: () => void) => void;
-  onMetaArrowDown: (callback: () => void) => void;
-  onMetaPageUp: (callback: () => void) => void;
-  onMetaPageDown: (callback: () => void) => void;
-  onBracketCmd: (
-    callback: (event: any, arg: { relative: number }, mods: KeyModsType) => void
-  ) => void;
-  onDigitCmd: (
-    callback: (event: any, arg: { digit: number }, mods: KeyModsType) => void
-  ) => void;
-  contextScreen: (
-    screenOpts: { screenId: string },
-    position: { x: number; y: number }
-  ) => void;
-  contextEditMenu: (
-    position: { x: number; y: number },
-    opts: ContextMenuOpts
-  ) => void;
-  onLocalServerStatusChange: (
-    callback: (status: boolean, pid: number) => void
-  ) => void;
+    getId: () => string;
+    getIsDev: () => boolean;
+    getAuthKey: () => string;
+    getLocalServerStatus: () => boolean;
+    restartLocalServer: () => boolean;
+    reloadWindow: () => void;
+    onTCmd: (callback: (mods: KeyModsType) => void) => void;
+    onICmd: (callback: (mods: KeyModsType) => void) => void;
+    onLCmd: (callback: (mods: KeyModsType) => void) => void;
+    onHCmd: (callback: (mods: KeyModsType) => void) => void;
+    onMetaArrowUp: (callback: () => void) => void;
+    onMetaArrowDown: (callback: () => void) => void;
+    onMetaPageUp: (callback: () => void) => void;
+    onMetaPageDown: (callback: () => void) => void;
+    onBracketCmd: (callback: (event: any, arg: { relative: number }, mods: KeyModsType) => void) => void;
+    onDigitCmd: (callback: (event: any, arg: { digit: number }, mods: KeyModsType) => void) => void;
+    contextScreen: (screenOpts: { screenId: string }, position: { x: number; y: number }) => void;
+    contextEditMenu: (position: { x: number; y: number }, opts: ContextMenuOpts) => void;
+    onLocalServerStatusChange: (callback: (status: boolean, pid: number) => void) => void;
 };
 
 function getApi(): ElectronApi {
-  return (window as any).api;
+    return (window as any).api;
 }
 
 // clean empty string
 function ces(s: string) {
-  if (s == "") {
-    return null;
-  }
-  return s;
+    if (s == "") {
+        return null;
+    }
+    return s;
 }
 
 class Cmd {
-  screenId: string;
-  remote: RemotePtrType;
-  lineId: string;
-  data: OV<CmdDataType>;
+    screenId: string;
+    remote: RemotePtrType;
+    lineId: string;
+    data: OV<CmdDataType>;
 
-  constructor(cmd: CmdDataType) {
-    this.screenId = cmd.screenid;
-    this.lineId = cmd.lineid;
-    this.remote = cmd.remote;
-    this.data = mobx.observable.box(cmd, { deep: false, name: "cmd-data" });
-  }
-
-  setCmd(cmd: CmdDataType) {
-    mobx.action(() => {
-      let origData = this.data.get();
-      this.data.set(cmd);
-      if (origData != null && cmd != null && origData.status != cmd.status) {
-        GlobalModel.cmdStatusUpdate(
-          this.screenId,
-          this.lineId,
-          origData.status,
-          cmd.status
-        );
-      }
-    })();
-  }
-
-  getAsWebCmd(lineid: string): WebCmd {
-    let cmd = this.data.get();
-    let remote = GlobalModel.getRemote(this.remote.remoteid);
-    let webRemote: WebRemote = null;
-    if (remote != null) {
-      webRemote = {
-        remoteid: cmd.remote.remoteid,
-        alias: remote.remotealias,
-        canonicalname: remote.remotecanonicalname,
-        name: this.remote.name,
-        homedir: remote.remotevars["home"],
-        isroot: !!remote.remotevars["isroot"],
-      };
+    constructor(cmd: CmdDataType) {
+        this.screenId = cmd.screenid;
+        this.lineId = cmd.lineid;
+        this.remote = cmd.remote;
+        this.data = mobx.observable.box(cmd, { deep: false, name: "cmd-data" });
     }
-    let webCmd: WebCmd = {
-      screenid: cmd.screenid,
-      lineid: lineid,
-      remote: webRemote,
-      status: cmd.status,
-      cmdstr: cmd.cmdstr,
-      rawcmdstr: cmd.rawcmdstr,
-      festate: cmd.festate,
-      termopts: cmd.termopts,
-      cmdpid: cmd.cmdpid,
-      remotepid: cmd.remotepid,
-      donets: cmd.donets,
-      exitcode: cmd.exitcode,
-      durationms: cmd.durationms,
-      rtnstate: cmd.rtnstate,
-      vts: 0,
-      rtnstatestr: null,
-    };
-    return webCmd;
-  }
 
-  getExitCode(): boolean {
-    return this.data.get().exitcode;
-  }
-
-  getRtnState(): boolean {
-    return this.data.get().rtnstate;
-  }
-
-  getStatus(): string {
-    return this.data.get().status;
-  }
-
-  getTermOpts(): TermOptsType {
-    return this.data.get().termopts;
-  }
-
-  getCmdStr(): string {
-    return this.data.get().cmdstr;
-  }
-
-  getRemoteFeState(): Record<string, string> {
-    return this.data.get().festate;
-  }
-
-  isRunning(): boolean {
-    let data = this.data.get();
-    return cmdStatusIsRunning(data.status);
-  }
-
-  handleData(data: string, termWrap: TermWrap): void {
-    // console.log("handle data", {data: data});
-    if (!this.isRunning()) {
-      return;
+    setCmd(cmd: CmdDataType) {
+        mobx.action(() => {
+            let origData = this.data.get();
+            this.data.set(cmd);
+            if (origData != null && cmd != null && origData.status != cmd.status) {
+                GlobalModel.cmdStatusUpdate(this.screenId, this.lineId, origData.status, cmd.status);
+            }
+        })();
     }
-    for (let pos = 0; pos < data.length; pos += InputChunkSize) {
-      let dataChunk = data.slice(pos, pos + InputChunkSize);
-      this.handleInputChunk(dataChunk);
-    }
-  }
 
-  handleDataFromRenderer(data: string, renderer: RendererModel): void {
-    // console.log("handle data", {data: data});
-    if (!this.isRunning()) {
-      return;
+    getAsWebCmd(lineid: string): WebCmd {
+        let cmd = this.data.get();
+        let remote = GlobalModel.getRemote(this.remote.remoteid);
+        let webRemote: WebRemote = null;
+        if (remote != null) {
+            webRemote = {
+                remoteid: cmd.remote.remoteid,
+                alias: remote.remotealias,
+                canonicalname: remote.remotecanonicalname,
+                name: this.remote.name,
+                homedir: remote.remotevars["home"],
+                isroot: !!remote.remotevars["isroot"],
+            };
+        }
+        let webCmd: WebCmd = {
+            screenid: cmd.screenid,
+            lineid: lineid,
+            remote: webRemote,
+            status: cmd.status,
+            cmdstr: cmd.cmdstr,
+            rawcmdstr: cmd.rawcmdstr,
+            festate: cmd.festate,
+            termopts: cmd.termopts,
+            cmdpid: cmd.cmdpid,
+            remotepid: cmd.remotepid,
+            donets: cmd.donets,
+            exitcode: cmd.exitcode,
+            durationms: cmd.durationms,
+            rtnstate: cmd.rtnstate,
+            vts: 0,
+            rtnstatestr: null,
+        };
+        return webCmd;
     }
-    for (let pos = 0; pos < data.length; pos += InputChunkSize) {
-      let dataChunk = data.slice(pos, pos + InputChunkSize);
-      this.handleInputChunk(dataChunk);
-    }
-  }
 
-  handleInputChunk(data: string): void {
-    let inputPacket: FeInputPacketType = {
-      type: "feinput",
-      ck: this.screenId + "/" + this.lineId,
-      remote: this.remote,
-      inputdata64: btoa(data),
-    };
-    GlobalModel.sendInputPacket(inputPacket);
-  }
+    getExitCode(): boolean {
+        return this.data.get().exitcode;
+    }
+
+    getRtnState(): boolean {
+        return this.data.get().rtnstate;
+    }
+
+    getStatus(): string {
+        return this.data.get().status;
+    }
+
+    getTermOpts(): TermOptsType {
+        return this.data.get().termopts;
+    }
+
+    getCmdStr(): string {
+        return this.data.get().cmdstr;
+    }
+
+    getRemoteFeState(): Record<string, string> {
+        return this.data.get().festate;
+    }
+
+    isRunning(): boolean {
+        let data = this.data.get();
+        return cmdStatusIsRunning(data.status);
+    }
+
+    handleData(data: string, termWrap: TermWrap): void {
+        // console.log("handle data", {data: data});
+        if (!this.isRunning()) {
+            return;
+        }
+        for (let pos = 0; pos < data.length; pos += InputChunkSize) {
+            let dataChunk = data.slice(pos, pos + InputChunkSize);
+            this.handleInputChunk(dataChunk);
+        }
+    }
+
+    handleDataFromRenderer(data: string, renderer: RendererModel): void {
+        // console.log("handle data", {data: data});
+        if (!this.isRunning()) {
+            return;
+        }
+        for (let pos = 0; pos < data.length; pos += InputChunkSize) {
+            let dataChunk = data.slice(pos, pos + InputChunkSize);
+            this.handleInputChunk(dataChunk);
+        }
+    }
+
+    handleInputChunk(data: string): void {
+        let inputPacket: FeInputPacketType = {
+            type: "feinput",
+            ck: this.screenId + "/" + this.lineId,
+            remote: this.remote,
+            inputdata64: btoa(data),
+        };
+        GlobalModel.sendInputPacket(inputPacket);
+    }
 }
 
 class Screen {
-  sessionId: string;
-  screenId: string;
-  screenIdx: OV<number>;
-  opts: OV<ScreenOptsType>;
-  name: OV<string>;
-  archived: OV<boolean>;
-  curRemote: OV<RemotePtrType>;
-  lastScreenSize: WindowSize;
-  lastCols: number;
-  lastRows: number;
-  selectedLine: OV<number>;
-  focusType: OV<FocusTypeStrs>;
-  anchor: OV<{ anchorLine: number; anchorOffset: number }>;
-  termLineNumFocus: OV<number>;
-  setAnchor_debounced: (anchorLine: number, anchorOffset: number) => void;
-  terminals: Record<string, TermWrap> = {}; // lineid => TermWrap
-  renderers: Record<string, RendererModel> = {}; // lineid => RendererModel
-  shareMode: OV<string>;
-  webShareOpts: OV<WebShareOpts>;
+    sessionId: string;
+    screenId: string;
+    screenIdx: OV<number>;
+    opts: OV<ScreenOptsType>;
+    name: OV<string>;
+    archived: OV<boolean>;
+    curRemote: OV<RemotePtrType>;
+    lastScreenSize: WindowSize;
+    lastCols: number;
+    lastRows: number;
+    selectedLine: OV<number>;
+    focusType: OV<FocusTypeStrs>;
+    anchor: OV<{ anchorLine: number; anchorOffset: number }>;
+    termLineNumFocus: OV<number>;
+    setAnchor_debounced: (anchorLine: number, anchorOffset: number) => void;
+    terminals: Record<string, TermWrap> = {}; // lineid => TermWrap
+    renderers: Record<string, RendererModel> = {}; // lineid => RendererModel
+    shareMode: OV<string>;
+    webShareOpts: OV<WebShareOpts>;
 
-  constructor(sdata: ScreenDataType) {
-    this.sessionId = sdata.sessionid;
-    this.screenId = sdata.screenid;
-    this.name = mobx.observable.box(sdata.name, { name: "screen-name" });
-    this.screenIdx = mobx.observable.box(sdata.screenidx, {
-      name: "screen-screenidx",
-    });
-    this.opts = mobx.observable.box(sdata.screenopts, { name: "screen-opts" });
-    this.archived = mobx.observable.box(!!sdata.archived, {
-      name: "screen-archived",
-    });
-    this.focusType = mobx.observable.box(sdata.focustype, {
-      name: "focusType",
-    });
-    this.selectedLine = mobx.observable.box(
-      sdata.selectedline == 0 ? null : sdata.selectedline,
-      { name: "selectedLine" }
-    );
-    this.setAnchor_debounced = debounce(1000, this.setAnchor.bind(this));
-    this.anchor = mobx.observable.box(
-      { anchorLine: sdata.selectedline, anchorOffset: 0 },
-      { name: "screen-anchor" }
-    );
-    this.termLineNumFocus = mobx.observable.box(0, {
-      name: "termLineNumFocus",
-    });
-    this.curRemote = mobx.observable.box(sdata.curremote, {
-      name: "screen-curRemote",
-    });
-    this.shareMode = mobx.observable.box(sdata.sharemode, {
-      name: "screen-shareMode",
-    });
-    this.webShareOpts = mobx.observable.box(sdata.webshareopts, {
-      name: "screen-webShareOpts",
-    });
-  }
+    constructor(sdata: ScreenDataType) {
+        this.sessionId = sdata.sessionid;
+        this.screenId = sdata.screenid;
+        this.name = mobx.observable.box(sdata.name, { name: "screen-name" });
+        this.screenIdx = mobx.observable.box(sdata.screenidx, {
+            name: "screen-screenidx",
+        });
+        this.opts = mobx.observable.box(sdata.screenopts, { name: "screen-opts" });
+        this.archived = mobx.observable.box(!!sdata.archived, {
+            name: "screen-archived",
+        });
+        this.focusType = mobx.observable.box(sdata.focustype, {
+            name: "focusType",
+        });
+        this.selectedLine = mobx.observable.box(sdata.selectedline == 0 ? null : sdata.selectedline, {
+            name: "selectedLine",
+        });
+        this.setAnchor_debounced = debounce(1000, this.setAnchor.bind(this));
+        this.anchor = mobx.observable.box(
+            { anchorLine: sdata.selectedline, anchorOffset: 0 },
+            { name: "screen-anchor" }
+        );
+        this.termLineNumFocus = mobx.observable.box(0, {
+            name: "termLineNumFocus",
+        });
+        this.curRemote = mobx.observable.box(sdata.curremote, {
+            name: "screen-curRemote",
+        });
+        this.shareMode = mobx.observable.box(sdata.sharemode, {
+            name: "screen-shareMode",
+        });
+        this.webShareOpts = mobx.observable.box(sdata.webshareopts, {
+            name: "screen-webShareOpts",
+        });
+    }
 
-  dispose() {}
+    dispose() {}
 
-  isWebShared(): boolean {
-    return this.shareMode.get() == "web" && this.webShareOpts.get() != null;
-  }
+    isWebShared(): boolean {
+        return this.shareMode.get() == "web" && this.webShareOpts.get() != null;
+    }
 
-  getShareName(): string {
-    if (!this.isWebShared()) {
-      return null;
+    getShareName(): string {
+        if (!this.isWebShared()) {
+            return null;
+        }
+        let opts = this.webShareOpts.get();
+        if (opts == null) {
+            return null;
+        }
+        return opts.sharename;
     }
-    let opts = this.webShareOpts.get();
-    if (opts == null) {
-      return null;
-    }
-    return opts.sharename;
-  }
 
-  getWebShareUrl(): string {
-    let viewKey: string = null;
-    if (this.webShareOpts.get() != null) {
-      viewKey = this.webShareOpts.get().viewkey;
+    getWebShareUrl(): string {
+        let viewKey: string = null;
+        if (this.webShareOpts.get() != null) {
+            viewKey = this.webShareOpts.get().viewkey;
+        }
+        if (viewKey == null) {
+            return null;
+        }
+        if (GlobalModel.isDev) {
+            return sprintf(
+                "http://devtest.getprompt.com:9001/static/index-dev.html?screenid=%s&viewkey=%s",
+                this.screenId,
+                viewKey
+            );
+        }
+        return sprintf("https://share.getprompt.dev/share/%s?viewkey=%s", this.screenId, viewKey);
     }
-    if (viewKey == null) {
-      return null;
-    }
-    if (GlobalModel.isDev) {
-      return sprintf(
-        "http://devtest.getprompt.com:9001/static/index-dev.html?screenid=%s&viewkey=%s",
-        this.screenId,
-        viewKey
-      );
-    }
-    return sprintf(
-      "https://share.getprompt.dev/share/%s?viewkey=%s",
-      this.screenId,
-      viewKey
-    );
-  }
 
-  mergeData(data: ScreenDataType) {
-    if (data.sessionid != this.sessionId || data.screenid != this.screenId) {
-      throw new Error("invalid screen update, ids don't match");
+    mergeData(data: ScreenDataType) {
+        if (data.sessionid != this.sessionId || data.screenid != this.screenId) {
+            throw new Error("invalid screen update, ids don't match");
+        }
+        mobx.action(() => {
+            this.screenIdx.set(data.screenidx);
+            this.opts.set(data.screenopts);
+            this.name.set(data.name);
+            this.archived.set(!!data.archived);
+            let oldSelectedLine = this.selectedLine.get();
+            let oldFocusType = this.focusType.get();
+            this.selectedLine.set(data.selectedline);
+            this.curRemote.set(data.curremote);
+            this.focusType.set(data.focustype);
+            this.refocusLine(data, oldFocusType, oldSelectedLine);
+            this.shareMode.set(data.sharemode);
+            this.webShareOpts.set(data.webshareopts);
+            // do not update anchorLine/anchorOffset (only stored)
+        })();
     }
-    mobx.action(() => {
-      this.screenIdx.set(data.screenidx);
-      this.opts.set(data.screenopts);
-      this.name.set(data.name);
-      this.archived.set(!!data.archived);
-      let oldSelectedLine = this.selectedLine.get();
-      let oldFocusType = this.focusType.get();
-      this.selectedLine.set(data.selectedline);
-      this.curRemote.set(data.curremote);
-      this.focusType.set(data.focustype);
-      this.refocusLine(data, oldFocusType, oldSelectedLine);
-      this.shareMode.set(data.sharemode);
-      this.webShareOpts.set(data.webshareopts);
-      // do not update anchorLine/anchorOffset (only stored)
-    })();
-  }
 
-  getContentHeight(context: RendererContext): number {
-    return GlobalModel.getContentHeight(context);
-  }
+    getContentHeight(context: RendererContext): number {
+        return GlobalModel.getContentHeight(context);
+    }
 
-  setContentHeight(context: RendererContext, height: number): void {
-    GlobalModel.setContentHeight(context, height);
-  }
+    setContentHeight(context: RendererContext, height: number): void {
+        GlobalModel.setContentHeight(context, height);
+    }
 
-  getCmd(line: LineType): Cmd {
-    return GlobalModel.getCmd(line);
-  }
+    getCmd(line: LineType): Cmd {
+        return GlobalModel.getCmd(line);
+    }
 
-  getAnchorStr(): string {
-    let anchor = this.anchor.get();
-    if (anchor.anchorLine == null || anchor.anchorLine == 0) {
-      return "0";
+    getAnchorStr(): string {
+        let anchor = this.anchor.get();
+        if (anchor.anchorLine == null || anchor.anchorLine == 0) {
+            return "0";
+        }
+        return sprintf("%d:%d", anchor.anchorLine, anchor.anchorOffset);
     }
-    return sprintf("%d:%d", anchor.anchorLine, anchor.anchorOffset);
-  }
 
-  getTabColor(): string {
-    let tabColor = "green";
-    let screenOpts = this.opts.get();
-    if (screenOpts != null && !isBlank(screenOpts.tabcolor)) {
-      tabColor = screenOpts.tabcolor;
+    getTabColor(): string {
+        let tabColor = "green";
+        let screenOpts = this.opts.get();
+        if (screenOpts != null && !isBlank(screenOpts.tabcolor)) {
+            tabColor = screenOpts.tabcolor;
+        }
+        return tabColor;
     }
-    return tabColor;
-  }
 
-  getCurRemoteInstance(): RemoteInstanceType {
-    let session = GlobalModel.getSessionById(this.sessionId);
-    let rptr = this.curRemote.get();
-    if (rptr == null) {
-      return null;
+    getCurRemoteInstance(): RemoteInstanceType {
+        let session = GlobalModel.getSessionById(this.sessionId);
+        let rptr = this.curRemote.get();
+        if (rptr == null) {
+            return null;
+        }
+        return session.getRemoteInstance(this.screenId, rptr);
     }
-    return session.getRemoteInstance(this.screenId, rptr);
-  }
 
-  setAnchorFields(
-    anchorLine: number,
-    anchorOffset: number,
-    reason: string
-  ): void {
-    mobx.action(() => {
-      this.anchor.set({ anchorLine: anchorLine, anchorOffset: anchorOffset });
-    })();
-    // console.log("set-anchor-fields", anchorLine, anchorOffset, reason);
-  }
+    setAnchorFields(anchorLine: number, anchorOffset: number, reason: string): void {
+        mobx.action(() => {
+            this.anchor.set({ anchorLine: anchorLine, anchorOffset: anchorOffset });
+        })();
+        // console.log("set-anchor-fields", anchorLine, anchorOffset, reason);
+    }
 
-  refocusLine(
-    sdata: ScreenDataType,
-    oldFocusType: string,
-    oldSelectedLine: number
-  ): void {
-    let isCmdFocus = sdata.focustype == "cmd";
-    if (!isCmdFocus) {
-      return;
+    refocusLine(sdata: ScreenDataType, oldFocusType: string, oldSelectedLine: number): void {
+        let isCmdFocus = sdata.focustype == "cmd";
+        if (!isCmdFocus) {
+            return;
+        }
+        let curLineFocus = GlobalModel.getFocusedLine();
+        let sline: LineType = null;
+        if (sdata.selectedline != 0) {
+            sline = this.getLineByNum(sdata.selectedline);
+        }
+        // console.log("refocus", curLineFocus.linenum, "=>", sdata.selectedline, sline.lineid);
+        if (
+            curLineFocus.cmdInputFocus ||
+            (curLineFocus.linenum != null && curLineFocus.linenum != sdata.selectedline)
+        ) {
+            (document.activeElement as HTMLElement).blur();
+        }
+        if (sline != null) {
+            let renderer = this.getRenderer(sline.lineid);
+            if (renderer != null) {
+                renderer.giveFocus();
+            }
+            let termWrap = this.getTermWrap(sline.lineid);
+            if (termWrap != null) {
+                termWrap.giveFocus();
+            }
+        }
     }
-    let curLineFocus = GlobalModel.getFocusedLine();
-    let sline: LineType = null;
-    if (sdata.selectedline != 0) {
-      sline = this.getLineByNum(sdata.selectedline);
-    }
-    // console.log("refocus", curLineFocus.linenum, "=>", sdata.selectedline, sline.lineid);
-    if (
-      curLineFocus.cmdInputFocus ||
-      (curLineFocus.linenum != null &&
-        curLineFocus.linenum != sdata.selectedline)
-    ) {
-      (document.activeElement as HTMLElement).blur();
-    }
-    if (sline != null) {
-      let renderer = this.getRenderer(sline.lineid);
-      if (renderer != null) {
-        renderer.giveFocus();
-      }
-      let termWrap = this.getTermWrap(sline.lineid);
-      if (termWrap != null) {
-        termWrap.giveFocus();
-      }
-    }
-  }
 
-  setFocusType(ftype: FocusTypeStrs): void {
-    mobx.action(() => {
-      this.focusType.set(ftype);
-    })();
-  }
+    setFocusType(ftype: FocusTypeStrs): void {
+        mobx.action(() => {
+            this.focusType.set(ftype);
+        })();
+    }
 
-  setAnchor(anchorLine: number, anchorOffset: number): void {
-    let setVal =
-      anchorLine == null || anchorLine == 0
-        ? "0"
-        : sprintf("%d:%d", anchorLine, anchorOffset);
-    GlobalCommandRunner.screenSetAnchor(this.sessionId, this.screenId, setVal);
-  }
+    setAnchor(anchorLine: number, anchorOffset: number): void {
+        let setVal = anchorLine == null || anchorLine == 0 ? "0" : sprintf("%d:%d", anchorLine, anchorOffset);
+        GlobalCommandRunner.screenSetAnchor(this.sessionId, this.screenId, setVal);
+    }
 
-  getAnchor(): { anchorLine: number; anchorOffset: number } {
-    let anchor = this.anchor.get();
-    if (anchor.anchorLine == null || anchor.anchorLine == 0) {
-      return { anchorLine: this.selectedLine.get(), anchorOffset: 0 };
+    getAnchor(): { anchorLine: number; anchorOffset: number } {
+        let anchor = this.anchor.get();
+        if (anchor.anchorLine == null || anchor.anchorLine == 0) {
+            return { anchorLine: this.selectedLine.get(), anchorOffset: 0 };
+        }
+        return anchor;
     }
-    return anchor;
-  }
 
-  getMaxLineNum(): number {
-    let win = this.getScreenLines();
-    if (win == null) {
-      return null;
+    getMaxLineNum(): number {
+        let win = this.getScreenLines();
+        if (win == null) {
+            return null;
+        }
+        let lines = win.lines;
+        if (lines == null || lines.length == 0) {
+            return null;
+        }
+        return lines[lines.length - 1].linenum;
     }
-    let lines = win.lines;
-    if (lines == null || lines.length == 0) {
-      return null;
-    }
-    return lines[lines.length - 1].linenum;
-  }
 
-  getLineByNum(lineNum: number): LineType {
-    if (lineNum == null) {
-      return null;
+    getLineByNum(lineNum: number): LineType {
+        if (lineNum == null) {
+            return null;
+        }
+        let win = this.getScreenLines();
+        if (win == null) {
+            return null;
+        }
+        let lines = win.lines;
+        if (lines == null || lines.length == 0) {
+            return null;
+        }
+        for (let i = 0; i < lines.length; i++) {
+            if (lines[i].linenum == lineNum) {
+                return lines[i];
+            }
+        }
+        return null;
     }
-    let win = this.getScreenLines();
-    if (win == null) {
-      return null;
-    }
-    let lines = win.lines;
-    if (lines == null || lines.length == 0) {
-      return null;
-    }
-    for (let i = 0; i < lines.length; i++) {
-      if (lines[i].linenum == lineNum) {
-        return lines[i];
-      }
-    }
-    return null;
-  }
 
-  getPresentLineNum(lineNum: number): number {
-    let win = this.getScreenLines();
-    if (win == null || !win.loaded.get()) {
-      return lineNum;
+    getPresentLineNum(lineNum: number): number {
+        let win = this.getScreenLines();
+        if (win == null || !win.loaded.get()) {
+            return lineNum;
+        }
+        let lines = win.lines;
+        if (lines == null || lines.length == 0) {
+            return null;
+        }
+        if (lineNum == 0) {
+            return null;
+        }
+        for (let i = 0; i < lines.length; i++) {
+            let line = lines[i];
+            if (line.linenum == lineNum) {
+                return lineNum;
+            }
+            if (line.linenum > lineNum) {
+                return line.linenum;
+            }
+        }
+        return lines[lines.length - 1].linenum;
     }
-    let lines = win.lines;
-    if (lines == null || lines.length == 0) {
-      return null;
-    }
-    if (lineNum == 0) {
-      return null;
-    }
-    for (let i = 0; i < lines.length; i++) {
-      let line = lines[i];
-      if (line.linenum == lineNum) {
-        return lineNum;
-      }
-      if (line.linenum > lineNum) {
-        return line.linenum;
-      }
-    }
-    return lines[lines.length - 1].linenum;
-  }
 
-  setSelectedLine(lineNum: number): void {
-    mobx.action(() => {
-      let pln = this.getPresentLineNum(lineNum);
-      if (pln != this.selectedLine.get()) {
-        this.selectedLine.set(pln);
-      }
-    })();
-  }
+    setSelectedLine(lineNum: number): void {
+        mobx.action(() => {
+            let pln = this.getPresentLineNum(lineNum);
+            if (pln != this.selectedLine.get()) {
+                this.selectedLine.set(pln);
+            }
+        })();
+    }
 
-  checkSelectedLine(): void {
-    let pln = this.getPresentLineNum(this.selectedLine.get());
-    if (pln != this.selectedLine.get()) {
-      this.setSelectedLine(pln);
+    checkSelectedLine(): void {
+        let pln = this.getPresentLineNum(this.selectedLine.get());
+        if (pln != this.selectedLine.get()) {
+            this.setSelectedLine(pln);
+        }
     }
-  }
 
-  updatePtyData(ptyMsg: PtyDataUpdateType) {
-    let lineId = ptyMsg.lineid;
-    let renderer = this.renderers[lineId];
-    if (renderer != null) {
-      let data = base64ToArray(ptyMsg.ptydata64);
-      renderer.receiveData(ptyMsg.ptypos, data, "from-sw");
-    }
-    let term = this.terminals[lineId];
-    if (term != null) {
-      let data = base64ToArray(ptyMsg.ptydata64);
-      term.receiveData(ptyMsg.ptypos, data, "from-sw");
-    }
-  }
-
-  isActive(): boolean {
-    let activeScreen = GlobalModel.getActiveScreen();
-    if (activeScreen == null) {
-      return false;
-    }
-    return (
-      this.sessionId == activeScreen.sessionId &&
-      this.screenId == activeScreen.screenId
-    );
-  }
-
-  screenSizeCallback(winSize: WindowSize): void {
-    if (winSize.height == 0 || winSize.width == 0) {
-      return;
-    }
-    if (
-      this.lastScreenSize != null &&
-      this.lastScreenSize.height == winSize.height &&
-      this.lastScreenSize.width == winSize.width
-    ) {
-      return;
-    }
-    this.lastScreenSize = winSize;
-    let cols = windowWidthToCols(winSize.width, GlobalModel.termFontSize.get());
-    let rows = windowHeightToRows(
-      winSize.height,
-      GlobalModel.termFontSize.get()
-    );
-    this._termSizeCallback(rows, cols);
-  }
-
-  getMaxContentSize(): WindowSize {
-    if (this.lastScreenSize == null) {
-      let width = termWidthFromCols(80, GlobalModel.termFontSize.get());
-      let height = termHeightFromRows(25, GlobalModel.termFontSize.get());
-      return { width, height };
-    }
-    let winSize = this.lastScreenSize;
-    let width = boundInt(winSize.width - 50, 100, 5000);
-    let height = boundInt(winSize.height - 100, 100, 5000);
-    return { width, height };
-  }
-
-  getIdealContentSize(): WindowSize {
-    if (this.lastScreenSize == null) {
-      let width = termWidthFromCols(80, GlobalModel.termFontSize.get());
-      let height = termHeightFromRows(25, GlobalModel.termFontSize.get());
-      return { width, height };
-    }
-    let winSize = this.lastScreenSize;
-    let width = boundInt(Math.ceil((winSize.width - 50) * 0.7), 100, 5000);
-    let height = boundInt(Math.ceil((winSize.height - 100) * 0.5), 100, 5000);
-    return { width, height };
-  }
-
-  _termSizeCallback(rows: number, cols: number): void {
-    if (cols == 0 || rows == 0) {
-      return;
-    }
-    if (rows == this.lastRows && cols == this.lastCols) {
-      return;
-    }
-    this.lastRows = rows;
-    this.lastCols = cols;
-    for (let lineid in this.terminals) {
-      this.terminals[lineid].resizeCols(cols);
-    }
-    GlobalCommandRunner.resizeScreen(this.screenId, rows, cols);
-  }
-
-  getTermWrap(lineId: string): TermWrap {
-    return this.terminals[lineId];
-  }
-
-  getRenderer(lineId: string): RendererModel {
-    return this.renderers[lineId];
-  }
-
-  registerRenderer(lineId: string, renderer: RendererModel) {
-    this.renderers[lineId] = renderer;
-  }
-
-  setTermFocus(lineNum: number, focus: boolean): void {
-    // console.log("SW setTermFocus", lineNum, focus);
-    mobx.action(() => this.termLineNumFocus.set(focus ? lineNum : 0))();
-    if (focus && this.selectedLine.get() != lineNum) {
-      GlobalCommandRunner.screenSelectLine(String(lineNum), "cmd");
-    } else if (focus && this.focusType.get() == "input") {
-      GlobalCommandRunner.screenSetFocus("cmd");
-    }
-  }
-
-  termCustomKeyHandlerInternal(e: any, termWrap: TermWrap): void {
-    if (e.code == "ArrowUp") {
-      termWrap.terminal.scrollLines(-1);
-      return;
-    }
-    if (e.code == "ArrowDown") {
-      termWrap.terminal.scrollLines(1);
-      return;
-    }
-    if (e.code == "PageUp") {
-      termWrap.terminal.scrollPages(-1);
-      return;
-    }
-    if (e.code == "PageDown") {
-      termWrap.terminal.scrollPages(1);
-      return;
-    }
-  }
-
-  isTermCapturedKey(e: any): boolean {
-    let keys = ["ArrowUp", "ArrowDown", "PageUp", "PageDown"];
-    if (keys.includes(e.code) && keyHasNoMods(e)) {
-      return true;
-    }
-    return false;
-  }
-
-  termCustomKeyHandler(e: any, termWrap: TermWrap): boolean {
-    if (termWrap.isRunning) {
-      return true;
-    }
-    let isCaptured = this.isTermCapturedKey(e);
-    if (!isCaptured) {
-      return true;
-    }
-    if (e.type != "keydown" || isModKeyPress(e)) {
-      return false;
-    }
-    e.stopPropagation();
-    e.preventDefault();
-    this.termCustomKeyHandlerInternal(e, termWrap);
-    return false;
-  }
-
-  loadTerminalRenderer(elem: Element, line: LineType, cmd: Cmd, width: number) {
-    let lineId = cmd.lineId;
-    let termWrap = this.getTermWrap(lineId);
-    if (termWrap != null) {
-      console.log("term-wrap already exists for", this.screenId, lineId);
-      return;
-    }
-    let cols = windowWidthToCols(width, GlobalModel.termFontSize.get());
-    let usedRows = GlobalModel.getContentHeight(getRendererContext(line));
-    if (line.contentheight != null && line.contentheight != -1) {
-      usedRows = line.contentheight;
-    }
-    let termContext = {
-      sessionId: this.sessionId,
-      screenId: this.screenId,
-      lineId: line.lineid,
-      lineNum: line.linenum,
-    };
-    termWrap = new TermWrap(elem, {
-      termContext: termContext,
-      usedRows: usedRows,
-      termOpts: cmd.getTermOpts(),
-      winSize: { height: 0, width: width },
-      dataHandler: cmd.handleData.bind(cmd),
-      focusHandler: (focus: boolean) => this.setTermFocus(line.linenum, focus),
-      isRunning: cmd.isRunning(),
-      customKeyHandler: this.termCustomKeyHandler.bind(this),
-      fontSize: GlobalModel.termFontSize.get(),
-      ptyDataSource: getTermPtyData,
-      onUpdateContentHeight: (termContext: RendererContext, height: number) => {
-        GlobalModel.setContentHeight(termContext, height);
-      },
-    });
-    this.terminals[lineId] = termWrap;
-    if (
-      this.focusType.get() == "cmd" &&
-      this.selectedLine.get() == line.linenum
-    ) {
-      termWrap.giveFocus();
-    }
-    return;
-  }
-
-  unloadRenderer(lineId: string) {
-    let rmodel = this.renderers[lineId];
-    if (rmodel != null) {
-      rmodel.dispose();
-      delete this.renderers[lineId];
-    }
-    let term = this.terminals[lineId];
-    if (term != null) {
-      term.dispose();
-      delete this.terminals[lineId];
-    }
-  }
-
-  getUsedRows(
-    context: RendererContext,
-    line: LineType,
-    cmd: Cmd,
-    width: number
-  ): number {
-    if (cmd == null) {
-      return 0;
-    }
-    let termOpts = cmd.getTermOpts();
-    if (!termOpts.flexrows) {
-      return termOpts.rows;
-    }
-    let termWrap = this.getTermWrap(cmd.lineId);
-    if (termWrap == null) {
-      let cols = windowWidthToCols(width, GlobalModel.termFontSize.get());
-      let usedRows = GlobalModel.getContentHeight(context);
-      if (usedRows != null) {
-        return usedRows;
-      }
-      if (line.contentheight != null && line.contentheight != -1) {
-        return line.contentheight;
-      }
-      return cmd.isRunning() ? 1 : 0;
-    }
-    return termWrap.getUsedRows();
-  }
-
-  getIsFocused(lineNum: number): boolean {
-    return this.termLineNumFocus.get() == lineNum;
-  }
-
-  getSelectedLine(): number {
-    return this.selectedLine.get();
-  }
-
-  getScreenLines(): ScreenLines {
-    return GlobalModel.getScreenLinesById(this.screenId);
-  }
-
-  getFocusType(): FocusTypeStrs {
-    return this.focusType.get();
-  }
-
-  giveFocus(): void {
-    if (!this.isActive()) {
-      return;
-    }
-    let ftype = this.focusType.get();
-    if (ftype == "input") {
-      GlobalModel.inputModel.giveFocus();
-    } else {
-      let sline: LineType = null;
-      if (this.selectedLine.get() != 0) {
-        sline = this.getLineByNum(this.selectedLine.get());
-      }
-      if (sline != null) {
-        let renderer = this.getRenderer(sline.lineid);
+    updatePtyData(ptyMsg: PtyDataUpdateType) {
+        let lineId = ptyMsg.lineid;
+        let renderer = this.renderers[lineId];
         if (renderer != null) {
-          renderer.giveFocus();
+            let data = base64ToArray(ptyMsg.ptydata64);
+            renderer.receiveData(ptyMsg.ptypos, data, "from-sw");
         }
-        let termWrap = this.getTermWrap(sline.lineid);
+        let term = this.terminals[lineId];
+        if (term != null) {
+            let data = base64ToArray(ptyMsg.ptydata64);
+            term.receiveData(ptyMsg.ptypos, data, "from-sw");
+        }
+    }
+
+    isActive(): boolean {
+        let activeScreen = GlobalModel.getActiveScreen();
+        if (activeScreen == null) {
+            return false;
+        }
+        return this.sessionId == activeScreen.sessionId && this.screenId == activeScreen.screenId;
+    }
+
+    screenSizeCallback(winSize: WindowSize): void {
+        if (winSize.height == 0 || winSize.width == 0) {
+            return;
+        }
+        if (
+            this.lastScreenSize != null &&
+            this.lastScreenSize.height == winSize.height &&
+            this.lastScreenSize.width == winSize.width
+        ) {
+            return;
+        }
+        this.lastScreenSize = winSize;
+        let cols = windowWidthToCols(winSize.width, GlobalModel.termFontSize.get());
+        let rows = windowHeightToRows(winSize.height, GlobalModel.termFontSize.get());
+        this._termSizeCallback(rows, cols);
+    }
+
+    getMaxContentSize(): WindowSize {
+        if (this.lastScreenSize == null) {
+            let width = termWidthFromCols(80, GlobalModel.termFontSize.get());
+            let height = termHeightFromRows(25, GlobalModel.termFontSize.get());
+            return { width, height };
+        }
+        let winSize = this.lastScreenSize;
+        let width = boundInt(winSize.width - 50, 100, 5000);
+        let height = boundInt(winSize.height - 100, 100, 5000);
+        return { width, height };
+    }
+
+    getIdealContentSize(): WindowSize {
+        if (this.lastScreenSize == null) {
+            let width = termWidthFromCols(80, GlobalModel.termFontSize.get());
+            let height = termHeightFromRows(25, GlobalModel.termFontSize.get());
+            return { width, height };
+        }
+        let winSize = this.lastScreenSize;
+        let width = boundInt(Math.ceil((winSize.width - 50) * 0.7), 100, 5000);
+        let height = boundInt(Math.ceil((winSize.height - 100) * 0.5), 100, 5000);
+        return { width, height };
+    }
+
+    _termSizeCallback(rows: number, cols: number): void {
+        if (cols == 0 || rows == 0) {
+            return;
+        }
+        if (rows == this.lastRows && cols == this.lastCols) {
+            return;
+        }
+        this.lastRows = rows;
+        this.lastCols = cols;
+        for (let lineid in this.terminals) {
+            this.terminals[lineid].resizeCols(cols);
+        }
+        GlobalCommandRunner.resizeScreen(this.screenId, rows, cols);
+    }
+
+    getTermWrap(lineId: string): TermWrap {
+        return this.terminals[lineId];
+    }
+
+    getRenderer(lineId: string): RendererModel {
+        return this.renderers[lineId];
+    }
+
+    registerRenderer(lineId: string, renderer: RendererModel) {
+        this.renderers[lineId] = renderer;
+    }
+
+    setTermFocus(lineNum: number, focus: boolean): void {
+        // console.log("SW setTermFocus", lineNum, focus);
+        mobx.action(() => this.termLineNumFocus.set(focus ? lineNum : 0))();
+        if (focus && this.selectedLine.get() != lineNum) {
+            GlobalCommandRunner.screenSelectLine(String(lineNum), "cmd");
+        } else if (focus && this.focusType.get() == "input") {
+            GlobalCommandRunner.screenSetFocus("cmd");
+        }
+    }
+
+    termCustomKeyHandlerInternal(e: any, termWrap: TermWrap): void {
+        if (e.code == "ArrowUp") {
+            termWrap.terminal.scrollLines(-1);
+            return;
+        }
+        if (e.code == "ArrowDown") {
+            termWrap.terminal.scrollLines(1);
+            return;
+        }
+        if (e.code == "PageUp") {
+            termWrap.terminal.scrollPages(-1);
+            return;
+        }
+        if (e.code == "PageDown") {
+            termWrap.terminal.scrollPages(1);
+            return;
+        }
+    }
+
+    isTermCapturedKey(e: any): boolean {
+        let keys = ["ArrowUp", "ArrowDown", "PageUp", "PageDown"];
+        if (keys.includes(e.code) && keyHasNoMods(e)) {
+            return true;
+        }
+        return false;
+    }
+
+    termCustomKeyHandler(e: any, termWrap: TermWrap): boolean {
+        if (termWrap.isRunning) {
+            return true;
+        }
+        let isCaptured = this.isTermCapturedKey(e);
+        if (!isCaptured) {
+            return true;
+        }
+        if (e.type != "keydown" || isModKeyPress(e)) {
+            return false;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        this.termCustomKeyHandlerInternal(e, termWrap);
+        return false;
+    }
+
+    loadTerminalRenderer(elem: Element, line: LineType, cmd: Cmd, width: number) {
+        let lineId = cmd.lineId;
+        let termWrap = this.getTermWrap(lineId);
         if (termWrap != null) {
-          termWrap.giveFocus();
+            console.log("term-wrap already exists for", this.screenId, lineId);
+            return;
+        }
+        let cols = windowWidthToCols(width, GlobalModel.termFontSize.get());
+        let usedRows = GlobalModel.getContentHeight(getRendererContext(line));
+        if (line.contentheight != null && line.contentheight != -1) {
+            usedRows = line.contentheight;
+        }
+        let termContext = {
+            sessionId: this.sessionId,
+            screenId: this.screenId,
+            lineId: line.lineid,
+            lineNum: line.linenum,
+        };
+        termWrap = new TermWrap(elem, {
+            termContext: termContext,
+            usedRows: usedRows,
+            termOpts: cmd.getTermOpts(),
+            winSize: { height: 0, width: width },
+            dataHandler: cmd.handleData.bind(cmd),
+            focusHandler: (focus: boolean) => this.setTermFocus(line.linenum, focus),
+            isRunning: cmd.isRunning(),
+            customKeyHandler: this.termCustomKeyHandler.bind(this),
+            fontSize: GlobalModel.termFontSize.get(),
+            ptyDataSource: getTermPtyData,
+            onUpdateContentHeight: (termContext: RendererContext, height: number) => {
+                GlobalModel.setContentHeight(termContext, height);
+            },
+        });
+        this.terminals[lineId] = termWrap;
+        if (this.focusType.get() == "cmd" && this.selectedLine.get() == line.linenum) {
+            termWrap.giveFocus();
+        }
+        return;
+    }
+
+    unloadRenderer(lineId: string) {
+        let rmodel = this.renderers[lineId];
+        if (rmodel != null) {
+            rmodel.dispose();
+            delete this.renderers[lineId];
+        }
+        let term = this.terminals[lineId];
+        if (term != null) {
+            term.dispose();
+            delete this.terminals[lineId];
+        }
+    }
+
+    getUsedRows(context: RendererContext, line: LineType, cmd: Cmd, width: number): number {
+        if (cmd == null) {
+            return 0;
+        }
+        let termOpts = cmd.getTermOpts();
+        if (!termOpts.flexrows) {
+            return termOpts.rows;
+        }
+        let termWrap = this.getTermWrap(cmd.lineId);
+        if (termWrap == null) {
+            let cols = windowWidthToCols(width, GlobalModel.termFontSize.get());
+            let usedRows = GlobalModel.getContentHeight(context);
+            if (usedRows != null) {
+                return usedRows;
+            }
+            if (line.contentheight != null && line.contentheight != -1) {
+                return line.contentheight;
+            }
+            return cmd.isRunning() ? 1 : 0;
+        }
+        return termWrap.getUsedRows();
+    }
+
+    getIsFocused(lineNum: number): boolean {
+        return this.termLineNumFocus.get() == lineNum;
+    }
+
+    getSelectedLine(): number {
+        return this.selectedLine.get();
+    }
+
+    getScreenLines(): ScreenLines {
+        return GlobalModel.getScreenLinesById(this.screenId);
+    }
+
+    getFocusType(): FocusTypeStrs {
+        return this.focusType.get();
+    }
+
+    giveFocus(): void {
+        if (!this.isActive()) {
+            return;
+        }
+        let ftype = this.focusType.get();
+        if (ftype == "input") {
+            GlobalModel.inputModel.giveFocus();
+        } else {
+            let sline: LineType = null;
+            if (this.selectedLine.get() != 0) {
+                sline = this.getLineByNum(this.selectedLine.get());
+            }
+            if (sline != null) {
+                let renderer = this.getRenderer(sline.lineid);
+                if (renderer != null) {
+                    renderer.giveFocus();
+                }
+                let termWrap = this.getTermWrap(sline.lineid);
+                if (termWrap != null) {
+                    termWrap.giveFocus();
+                }
+            }
         }
-      }
     }
-  }
 }
 
 class ScreenLines {
-  screenId: string;
-  loaded: OV<boolean> = mobx.observable.box(false, { name: "slines-loaded" });
-  loadError: OV<string> = mobx.observable.box(null);
-  lines: OArr<LineType> = mobx.observable.array([], {
-    name: "slines-lines",
-    deep: false,
-  });
-  cmds: Record<string, Cmd> = {}; // lineid => Cmd
+    screenId: string;
+    loaded: OV<boolean> = mobx.observable.box(false, { name: "slines-loaded" });
+    loadError: OV<string> = mobx.observable.box(null);
+    lines: OArr<LineType> = mobx.observable.array([], {
+        name: "slines-lines",
+        deep: false,
+    });
+    cmds: Record<string, Cmd> = {}; // lineid => Cmd
 
-  constructor(screenId: string) {
-    this.screenId = screenId;
-  }
-
-  getNonArchivedLines(): LineType[] {
-    let rtn: LineType[] = [];
-    for (let i = 0; i < this.lines.length; i++) {
-      let line = this.lines[i];
-      if (line.archived) {
-        continue;
-      }
-      rtn.push(line);
+    constructor(screenId: string) {
+        this.screenId = screenId;
     }
-    return rtn;
-  }
 
-  updateData(slines: ScreenLinesType, load: boolean) {
-    mobx.action(() => {
-      if (load) {
-        this.loaded.set(true);
-      }
-      genMergeSimpleData(
-        this.lines,
-        slines.lines,
-        (l: LineType) => String(l.lineid),
-        (l: LineType) => sprintf("%013d:%s", l.ts, l.lineid)
-      );
-      let cmds = slines.cmds || [];
-      for (let i = 0; i < cmds.length; i++) {
-        this.cmds[cmds[i].lineid] = new Cmd(cmds[i]);
-      }
-    })();
-  }
-
-  setLoadError(errStr: string) {
-    mobx.action(() => {
-      this.loaded.set(true);
-      this.loadError.set(errStr);
-    })();
-  }
-
-  dispose() {}
-
-  getCmd(lineId: string): Cmd {
-    return this.cmds[lineId];
-  }
-
-  getRunningCmdLines(): LineType[] {
-    let rtn: LineType[] = [];
-    for (let i = 0; i < this.lines.length; i++) {
-      let line = this.lines[i];
-      let cmd = this.getCmd(line.lineid);
-      if (cmd == null) {
-        continue;
-      }
-      let status = cmd.getStatus();
-      if (cmdStatusIsRunning(status)) {
-        rtn.push(line);
-      }
-    }
-    return rtn;
-  }
-
-  updateCmd(cmd: CmdDataType): void {
-    if (cmd.remove) {
-      throw new Error(
-        "cannot remove cmd with updateCmd call [" + cmd.lineid + "]"
-      );
-    }
-    let origCmd = this.cmds[cmd.lineid];
-    if (origCmd != null) {
-      origCmd.setCmd(cmd);
-    }
-    return;
-  }
-
-  mergeCmd(cmd: CmdDataType): void {
-    if (cmd.remove) {
-      delete this.cmds[cmd.lineid];
-      return;
-    }
-    let origCmd = this.cmds[cmd.lineid];
-    if (origCmd == null) {
-      this.cmds[cmd.lineid] = new Cmd(cmd);
-      return;
-    }
-    origCmd.setCmd(cmd);
-    return;
-  }
-
-  addLineCmd(line: LineType, cmd: CmdDataType, interactive: boolean) {
-    if (!this.loaded.get()) {
-      return;
-    }
-    mobx.action(() => {
-      if (cmd != null) {
-        this.mergeCmd(cmd);
-      }
-      if (line != null) {
-        let lines = this.lines;
-        if (line.remove) {
-          for (let i = 0; i < lines.length; i++) {
-            if (lines[i].lineid == line.lineid) {
-              this.lines.splice(i, 1);
-              break;
+    getNonArchivedLines(): LineType[] {
+        let rtn: LineType[] = [];
+        for (let i = 0; i < this.lines.length; i++) {
+            let line = this.lines[i];
+            if (line.archived) {
+                continue;
             }
-          }
-          return;
+            rtn.push(line);
         }
-        let lineIdx = 0;
-        for (lineIdx = 0; lineIdx < lines.length; lineIdx++) {
-          let lineId = lines[lineIdx].lineid;
-          let curTs = lines[lineIdx].ts;
-          if (lineId == line.lineid) {
-            this.lines[lineIdx] = line;
+        return rtn;
+    }
+
+    updateData(slines: ScreenLinesType, load: boolean) {
+        mobx.action(() => {
+            if (load) {
+                this.loaded.set(true);
+            }
+            genMergeSimpleData(
+                this.lines,
+                slines.lines,
+                (l: LineType) => String(l.lineid),
+                (l: LineType) => sprintf("%013d:%s", l.ts, l.lineid)
+            );
+            let cmds = slines.cmds || [];
+            for (let i = 0; i < cmds.length; i++) {
+                this.cmds[cmds[i].lineid] = new Cmd(cmds[i]);
+            }
+        })();
+    }
+
+    setLoadError(errStr: string) {
+        mobx.action(() => {
+            this.loaded.set(true);
+            this.loadError.set(errStr);
+        })();
+    }
+
+    dispose() {}
+
+    getCmd(lineId: string): Cmd {
+        return this.cmds[lineId];
+    }
+
+    getRunningCmdLines(): LineType[] {
+        let rtn: LineType[] = [];
+        for (let i = 0; i < this.lines.length; i++) {
+            let line = this.lines[i];
+            let cmd = this.getCmd(line.lineid);
+            if (cmd == null) {
+                continue;
+            }
+            let status = cmd.getStatus();
+            if (cmdStatusIsRunning(status)) {
+                rtn.push(line);
+            }
+        }
+        return rtn;
+    }
+
+    updateCmd(cmd: CmdDataType): void {
+        if (cmd.remove) {
+            throw new Error("cannot remove cmd with updateCmd call [" + cmd.lineid + "]");
+        }
+        let origCmd = this.cmds[cmd.lineid];
+        if (origCmd != null) {
+            origCmd.setCmd(cmd);
+        }
+        return;
+    }
+
+    mergeCmd(cmd: CmdDataType): void {
+        if (cmd.remove) {
+            delete this.cmds[cmd.lineid];
             return;
-          }
-          if (curTs > line.ts || (curTs == line.ts && lineId > line.lineid)) {
-            break;
-          }
         }
-        if (lineIdx == lines.length) {
-          this.lines.push(line);
-          return;
+        let origCmd = this.cmds[cmd.lineid];
+        if (origCmd == null) {
+            this.cmds[cmd.lineid] = new Cmd(cmd);
+            return;
         }
-        this.lines.splice(lineIdx, 0, line);
-      }
-    })();
-  }
+        origCmd.setCmd(cmd);
+        return;
+    }
+
+    addLineCmd(line: LineType, cmd: CmdDataType, interactive: boolean) {
+        if (!this.loaded.get()) {
+            return;
+        }
+        mobx.action(() => {
+            if (cmd != null) {
+                this.mergeCmd(cmd);
+            }
+            if (line != null) {
+                let lines = this.lines;
+                if (line.remove) {
+                    for (let i = 0; i < lines.length; i++) {
+                        if (lines[i].lineid == line.lineid) {
+                            this.lines.splice(i, 1);
+                            break;
+                        }
+                    }
+                    return;
+                }
+                let lineIdx = 0;
+                for (lineIdx = 0; lineIdx < lines.length; lineIdx++) {
+                    let lineId = lines[lineIdx].lineid;
+                    let curTs = lines[lineIdx].ts;
+                    if (lineId == line.lineid) {
+                        this.lines[lineIdx] = line;
+                        return;
+                    }
+                    if (curTs > line.ts || (curTs == line.ts && lineId > line.lineid)) {
+                        break;
+                    }
+                }
+                if (lineIdx == lines.length) {
+                    this.lines.push(line);
+                    return;
+                }
+                this.lines.splice(lineIdx, 0, line);
+            }
+        })();
+    }
 }
 
 class Session {
-  sessionId: string;
-  name: OV<string>;
-  activeScreenId: OV<string>;
-  sessionIdx: OV<number>;
-  notifyNum: OV<number> = mobx.observable.box(0);
-  remoteInstances: OArr<RemoteInstanceType>;
-  archived: OV<boolean>;
+    sessionId: string;
+    name: OV<string>;
+    activeScreenId: OV<string>;
+    sessionIdx: OV<number>;
+    notifyNum: OV<number> = mobx.observable.box(0);
+    remoteInstances: OArr<RemoteInstanceType>;
+    archived: OV<boolean>;
 
-  constructor(sdata: SessionDataType) {
-    this.sessionId = sdata.sessionid;
-    this.name = mobx.observable.box(sdata.name);
-    this.sessionIdx = mobx.observable.box(sdata.sessionidx);
-    this.archived = mobx.observable.box(!!sdata.archived);
-    this.activeScreenId = mobx.observable.box(ces(sdata.activescreenid));
-    let remotes = sdata.remotes || [];
-    this.remoteInstances = mobx.observable.array(remotes);
-  }
-
-  dispose(): void {}
-
-  // session updates only contain screens (no windows)
-  mergeData(sdata: SessionDataType) {
-    if (sdata.sessionid != this.sessionId) {
-      throw new Error(
-        sprintf(
-          "cannot merge session data, sessionids don't match sid=%s, data-sid=%s",
-          this.sessionId,
-          sdata.sessionid
-        )
-      );
+    constructor(sdata: SessionDataType) {
+        this.sessionId = sdata.sessionid;
+        this.name = mobx.observable.box(sdata.name);
+        this.sessionIdx = mobx.observable.box(sdata.sessionidx);
+        this.archived = mobx.observable.box(!!sdata.archived);
+        this.activeScreenId = mobx.observable.box(ces(sdata.activescreenid));
+        let remotes = sdata.remotes || [];
+        this.remoteInstances = mobx.observable.array(remotes);
     }
-    mobx.action(() => {
-      if (!isBlank(sdata.name)) {
-        this.name.set(sdata.name);
-      }
-      if (sdata.sessionidx > 0) {
-        this.sessionIdx.set(sdata.sessionidx);
-      }
-      if (sdata.notifynum >= 0) {
-        this.notifyNum.set(sdata.notifynum);
-      }
-      this.archived.set(!!sdata.archived);
-      if (!isBlank(sdata.activescreenid)) {
-        let screen = this.getScreenById(sdata.activescreenid);
-        if (screen == null) {
-          console.log(
-            sprintf(
-              "got session update, activescreenid=%s, screen not found",
-              sdata.activescreenid
-            )
-          );
-        } else {
-          this.activeScreenId.set(sdata.activescreenid);
+
+    dispose(): void {}
+
+    // session updates only contain screens (no windows)
+    mergeData(sdata: SessionDataType) {
+        if (sdata.sessionid != this.sessionId) {
+            throw new Error(
+                sprintf(
+                    "cannot merge session data, sessionids don't match sid=%s, data-sid=%s",
+                    this.sessionId,
+                    sdata.sessionid
+                )
+            );
         }
-      }
-      genMergeSimpleData(
-        this.remoteInstances,
-        sdata.remotes,
-        (r) => r.riid,
-        null
-      );
-    })();
-  }
-
-  getActiveScreen(): Screen {
-    return this.getScreenById(this.activeScreenId.get());
-  }
-
-  setActiveScreenId(screenId: string) {
-    this.activeScreenId.set(screenId);
-  }
-
-  getScreenById(screenId: string): Screen {
-    if (screenId == null) {
-      return null;
+        mobx.action(() => {
+            if (!isBlank(sdata.name)) {
+                this.name.set(sdata.name);
+            }
+            if (sdata.sessionidx > 0) {
+                this.sessionIdx.set(sdata.sessionidx);
+            }
+            if (sdata.notifynum >= 0) {
+                this.notifyNum.set(sdata.notifynum);
+            }
+            this.archived.set(!!sdata.archived);
+            if (!isBlank(sdata.activescreenid)) {
+                let screen = this.getScreenById(sdata.activescreenid);
+                if (screen == null) {
+                    console.log(
+                        sprintf("got session update, activescreenid=%s, screen not found", sdata.activescreenid)
+                    );
+                } else {
+                    this.activeScreenId.set(sdata.activescreenid);
+                }
+            }
+            genMergeSimpleData(this.remoteInstances, sdata.remotes, (r) => r.riid, null);
+        })();
     }
-    return GlobalModel.getScreenById(this.sessionId, screenId);
-  }
 
-  getRemoteInstance(screenId: string, rptr: RemotePtrType): RemoteInstanceType {
-    if (rptr.name.startsWith("*")) {
-      screenId = "";
+    getActiveScreen(): Screen {
+        return this.getScreenById(this.activeScreenId.get());
     }
-    for (let i = 0; i < this.remoteInstances.length; i++) {
-      let rdata = this.remoteInstances[i];
-      if (
-        rdata.screenid == screenId &&
-        rdata.remoteid == rptr.remoteid &&
-        rdata.remoteownerid == rptr.ownerid &&
-        rdata.name == rptr.name
-      ) {
-        return rdata;
-      }
+
+    setActiveScreenId(screenId: string) {
+        this.activeScreenId.set(screenId);
     }
-    let remote = GlobalModel.getRemote(rptr.remoteid);
-    if (remote != null) {
-      return {
-        riid: "",
-        sessionid: this.sessionId,
-        screenid: screenId,
-        remoteownerid: rptr.ownerid,
-        remoteid: rptr.remoteid,
-        name: rptr.name,
-        festate: remote.defaultfestate,
-      };
+
+    getScreenById(screenId: string): Screen {
+        if (screenId == null) {
+            return null;
+        }
+        return GlobalModel.getScreenById(this.sessionId, screenId);
+    }
+
+    getRemoteInstance(screenId: string, rptr: RemotePtrType): RemoteInstanceType {
+        if (rptr.name.startsWith("*")) {
+            screenId = "";
+        }
+        for (let i = 0; i < this.remoteInstances.length; i++) {
+            let rdata = this.remoteInstances[i];
+            if (
+                rdata.screenid == screenId &&
+                rdata.remoteid == rptr.remoteid &&
+                rdata.remoteownerid == rptr.ownerid &&
+                rdata.name == rptr.name
+            ) {
+                return rdata;
+            }
+        }
+        let remote = GlobalModel.getRemote(rptr.remoteid);
+        if (remote != null) {
+            return {
+                riid: "",
+                sessionid: this.sessionId,
+                screenid: screenId,
+                remoteownerid: rptr.ownerid,
+                remoteid: rptr.remoteid,
+                name: rptr.name,
+                festate: remote.defaultfestate,
+            };
+        }
+        return null;
     }
-    return null;
-  }
 }
 
 function getDefaultHistoryQueryOpts(): HistoryQueryOpts {
-  return {
-    queryType: "screen",
-    limitRemote: true,
-    limitRemoteInstance: true,
-    limitUser: true,
-    queryStr: "",
-    maxItems: 10000,
-    includeMeta: true,
-    fromTs: 0,
-  };
+    return {
+        queryType: "screen",
+        limitRemote: true,
+        limitRemoteInstance: true,
+        limitUser: true,
+        queryStr: "",
+        maxItems: 10000,
+        includeMeta: true,
+        fromTs: 0,
+    };
 }
 
 class InputModel {
-  historyShow: OV<boolean> = mobx.observable.box(false);
-  infoShow: OV<boolean> = mobx.observable.box(false);
-  cmdInputHeight: OV<number> = mobx.observable.box(0);
+    historyShow: OV<boolean> = mobx.observable.box(false);
+    infoShow: OV<boolean> = mobx.observable.box(false);
+    cmdInputHeight: OV<number> = mobx.observable.box(0);
 
-  historyType: mobx.IObservableValue<HistoryTypeStrs> =
-    mobx.observable.box("screen");
-  historyLoading: mobx.IObservableValue<boolean> = mobx.observable.box(false);
-  historyAfterLoadIndex: number = 0;
-  historyItems: mobx.IObservableValue<HistoryItem[]> = mobx.observable.box(
-    null,
-    { name: "history-items", deep: false }
-  ); // sorted in reverse (most recent is index 0)
-  filteredHistoryItems: mobx.IComputedValue<HistoryItem[]> = null;
-  historyIndex: mobx.IObservableValue<number> = mobx.observable.box(0, {
-    name: "history-index",
-  }); // 1-indexed (because 0 is current)
-  modHistory: mobx.IObservableArray<string> = mobx.observable.array([""], {
-    name: "mod-history",
-  });
-  historyQueryOpts: OV<HistoryQueryOpts> = mobx.observable.box(
-    getDefaultHistoryQueryOpts()
-  );
-
-  infoMsg: OV<InfoType> = mobx.observable.box(null);
-  infoTimeoutId: any = null;
-  inputMode: OV<null | "comment" | "global"> = mobx.observable.box(null);
-  inputExpanded: OV<boolean> = mobx.observable.box(false, {
-    name: "inputExpanded",
-  });
-
-  // cursor
-  forceCursorPos: OV<number> = mobx.observable.box(null);
-
-  // focus
-  inputFocused: OV<boolean> = mobx.observable.box(false);
-  lineFocused: OV<boolean> = mobx.observable.box(false);
-  physicalInputFocused: OV<boolean> = mobx.observable.box(false);
-  forceInputFocus: boolean = false;
-
-  constructor() {
-    this.filteredHistoryItems = mobx.computed(() => {
-      return this._getFilteredHistoryItems();
+    historyType: mobx.IObservableValue<HistoryTypeStrs> = mobx.observable.box("screen");
+    historyLoading: mobx.IObservableValue<boolean> = mobx.observable.box(false);
+    historyAfterLoadIndex: number = 0;
+    historyItems: mobx.IObservableValue<HistoryItem[]> = mobx.observable.box(null, {
+        name: "history-items",
+        deep: false,
+    }); // sorted in reverse (most recent is index 0)
+    filteredHistoryItems: mobx.IComputedValue<HistoryItem[]> = null;
+    historyIndex: mobx.IObservableValue<number> = mobx.observable.box(0, {
+        name: "history-index",
+    }); // 1-indexed (because 0 is current)
+    modHistory: mobx.IObservableArray<string> = mobx.observable.array([""], {
+        name: "mod-history",
     });
-  }
+    historyQueryOpts: OV<HistoryQueryOpts> = mobx.observable.box(getDefaultHistoryQueryOpts());
 
-  setInputMode(inputMode: null | "comment" | "global"): void {
-    mobx.action(() => {
-      this.inputMode.set(inputMode);
-    })();
-  }
+    infoMsg: OV<InfoType> = mobx.observable.box(null);
+    infoTimeoutId: any = null;
+    inputMode: OV<null | "comment" | "global"> = mobx.observable.box(null);
+    inputExpanded: OV<boolean> = mobx.observable.box(false, {
+        name: "inputExpanded",
+    });
 
-  onInputFocus(isFocused: boolean): void {
-    mobx.action(() => {
-      if (isFocused) {
-        this.inputFocused.set(true);
-        this.lineFocused.set(false);
-      } else {
-        if (this.inputFocused.get()) {
-          this.inputFocused.set(false);
+    // cursor
+    forceCursorPos: OV<number> = mobx.observable.box(null);
+
+    // focus
+    inputFocused: OV<boolean> = mobx.observable.box(false);
+    lineFocused: OV<boolean> = mobx.observable.box(false);
+    physicalInputFocused: OV<boolean> = mobx.observable.box(false);
+    forceInputFocus: boolean = false;
+
+    constructor() {
+        this.filteredHistoryItems = mobx.computed(() => {
+            return this._getFilteredHistoryItems();
+        });
+    }
+
+    setInputMode(inputMode: null | "comment" | "global"): void {
+        mobx.action(() => {
+            this.inputMode.set(inputMode);
+        })();
+    }
+
+    onInputFocus(isFocused: boolean): void {
+        mobx.action(() => {
+            if (isFocused) {
+                this.inputFocused.set(true);
+                this.lineFocused.set(false);
+            } else {
+                if (this.inputFocused.get()) {
+                    this.inputFocused.set(false);
+                }
+            }
+        })();
+    }
+
+    onLineFocus(isFocused: boolean): void {
+        mobx.action(() => {
+            if (isFocused) {
+                this.inputFocused.set(false);
+                this.lineFocused.set(true);
+            } else {
+                if (this.lineFocused.get()) {
+                    this.lineFocused.set(false);
+                }
+            }
+        })();
+    }
+
+    _focusCmdInput(): void {
+        let elem = document.getElementById("main-cmd-input");
+        if (elem != null) {
+            elem.focus();
         }
-      }
-    })();
-  }
+    }
 
-  onLineFocus(isFocused: boolean): void {
-    mobx.action(() => {
-      if (isFocused) {
-        this.inputFocused.set(false);
-        this.lineFocused.set(true);
-      } else {
-        if (this.lineFocused.get()) {
-          this.lineFocused.set(false);
+    _focusHistoryInput(): void {
+        let elem: HTMLElement = document.querySelector(".cmd-input input.history-input");
+        if (elem != null) {
+            elem.focus();
         }
-      }
-    })();
-  }
-
-  _focusCmdInput(): void {
-    let elem = document.getElementById("main-cmd-input");
-    if (elem != null) {
-      elem.focus();
     }
-  }
 
-  _focusHistoryInput(): void {
-    let elem: HTMLElement = document.querySelector(
-      ".cmd-input input.history-input"
-    );
-    if (elem != null) {
-      elem.focus();
-    }
-  }
-
-  giveFocus(): void {
-    if (this.historyShow.get()) {
-      this._focusHistoryInput();
-    } else {
-      this._focusCmdInput();
-    }
-  }
-
-  setPhysicalInputFocused(isFocused: boolean): void {
-    mobx.action(() => {
-      this.physicalInputFocused.set(isFocused);
-    })();
-    if (isFocused) {
-      let screen = GlobalModel.getActiveScreen();
-      if (screen != null) {
-        if (screen.focusType.get() != "input") {
-          GlobalCommandRunner.screenSetFocus("input");
+    giveFocus(): void {
+        if (this.historyShow.get()) {
+            this._focusHistoryInput();
+        } else {
+            this._focusCmdInput();
         }
-      }
     }
-  }
 
-  hasFocus(): boolean {
-    let mainInputElem = document.getElementById("main-cmd-input");
-    if (document.activeElement == mainInputElem) {
-      return true;
-    }
-    let historyInputElem = document.querySelector(
-      ".cmd-input input.history-input"
-    );
-    if (document.activeElement == historyInputElem) {
-      return true;
-    }
-    return false;
-  }
-
-  setHistoryType(htype: HistoryTypeStrs): void {
-    if (this.historyQueryOpts.get().queryType == htype) {
-      return;
-    }
-    this.loadHistory(true, -1, htype);
-  }
-
-  findBestNewIndex(oldItem: HistoryItem): number {
-    if (oldItem == null) {
-      return 0;
-    }
-    let newItems = this.getFilteredHistoryItems();
-    if (newItems.length == 0) {
-      return 0;
-    }
-    let bestIdx = 0;
-    for (let i = 0; i < newItems.length; i++) {
-      // still start at i=0 to catch the historynum equality case
-      let item = newItems[i];
-      if (item.historynum == oldItem.historynum) {
-        bestIdx = i;
-        break;
-      }
-      let bestTsDiff = Math.abs(item.ts - newItems[bestIdx].ts);
-      let curTsDiff = Math.abs(item.ts - oldItem.ts);
-      if (curTsDiff < bestTsDiff) {
-        bestIdx = i;
-      }
-    }
-    return bestIdx + 1;
-  }
-
-  setHistoryQueryOpts(opts: HistoryQueryOpts): void {
-    mobx.action(() => {
-      let oldItem = this.getHistorySelectedItem();
-      this.historyQueryOpts.set(opts);
-      let bestIndex = this.findBestNewIndex(oldItem);
-      setTimeout(() => this.setHistoryIndex(bestIndex, true), 10);
-      return;
-    })();
-  }
-
-  setHistoryShow(show: boolean): void {
-    if (this.historyShow.get() == show) {
-      return;
-    }
-    mobx.action(() => {
-      this.historyShow.set(show);
-      if (this.hasFocus()) {
-        this.giveFocus();
-      }
-    })();
-  }
-
-  isHistoryLoaded(): boolean {
-    if (this.historyLoading.get()) {
-      return false;
-    }
-    let hitems = this.historyItems.get();
-    return hitems != null;
-  }
-
-  loadHistory(show: boolean, afterLoadIndex: number, htype: HistoryTypeStrs) {
-    if (this.historyLoading.get()) {
-      return;
-    }
-    if (this.isHistoryLoaded()) {
-      if (this.historyQueryOpts.get().queryType == htype) {
-        return;
-      }
-    }
-    this.historyAfterLoadIndex = afterLoadIndex;
-    mobx.action(() => {
-      this.historyLoading.set(true);
-    })();
-    GlobalCommandRunner.loadHistory(show, htype);
-  }
-
-  openHistory(): void {
-    if (this.historyLoading.get()) {
-      return;
-    }
-    if (!this.isHistoryLoaded()) {
-      this.loadHistory(true, 0, "screen");
-      return;
-    }
-    if (!this.historyShow.get()) {
-      mobx.action(() => {
-        this.setHistoryShow(true);
-        this.infoShow.set(false);
-        this.dropModHistory(true);
-        this.giveFocus();
-      })();
-    }
-  }
-
-  updateCmdLine(cmdLine: CmdLineUpdateType): void {
-    mobx.action(() => {
-      this.setCurLine(cmdLine.cmdline);
-      this.forceCursorPos.set(cmdLine.cursorpos);
-    })();
-  }
-
-  getHistorySelectedItem(): HistoryItem {
-    let hidx = this.historyIndex.get();
-    if (hidx == 0) {
-      return null;
-    }
-    let hitems = this.getFilteredHistoryItems();
-    if (hidx > hitems.length) {
-      return null;
-    }
-    return hitems[hidx - 1];
-  }
-
-  getFirstHistoryItem(): HistoryItem {
-    let hitems = this.getFilteredHistoryItems();
-    if (hitems.length == 0) {
-      return null;
-    }
-    return hitems[0];
-  }
-
-  setHistorySelectionNum(hnum: string): void {
-    let hitems = this.getFilteredHistoryItems();
-    for (let i = 0; i < hitems.length; i++) {
-      if (hitems[i].historynum == hnum) {
-        this.setHistoryIndex(i + 1);
-        return;
-      }
-    }
-  }
-
-  setHistoryInfo(hinfo: HistoryInfoType): void {
-    mobx.action(() => {
-      let oldItem = this.getHistorySelectedItem();
-      let hitems: HistoryItem[] = hinfo.items ?? [];
-      this.historyItems.set(hitems);
-      this.historyLoading.set(false);
-      this.historyQueryOpts.get().queryType = hinfo.historytype;
-      if (hinfo.historytype == "session" || hinfo.historytype == "global") {
-        this.historyQueryOpts.get().limitRemote = false;
-        this.historyQueryOpts.get().limitRemoteInstance = false;
-      }
-      if (this.historyAfterLoadIndex == -1) {
-        let bestIndex = this.findBestNewIndex(oldItem);
-        setTimeout(() => this.setHistoryIndex(bestIndex, true), 100);
-      } else if (this.historyAfterLoadIndex) {
-        if (hitems.length >= this.historyAfterLoadIndex) {
-          this.setHistoryIndex(this.historyAfterLoadIndex);
+    setPhysicalInputFocused(isFocused: boolean): void {
+        mobx.action(() => {
+            this.physicalInputFocused.set(isFocused);
+        })();
+        if (isFocused) {
+            let screen = GlobalModel.getActiveScreen();
+            if (screen != null) {
+                if (screen.focusType.get() != "input") {
+                    GlobalCommandRunner.screenSetFocus("input");
+                }
+            }
         }
-      }
-      this.historyAfterLoadIndex = 0;
-      if (hinfo.show) {
-        this.openHistory();
-      }
-    })();
-  }
-
-  getFilteredHistoryItems(): HistoryItem[] {
-    return this.filteredHistoryItems.get();
-  }
-
-  _getFilteredHistoryItems(): HistoryItem[] {
-    let hitems: HistoryItem[] = this.historyItems.get() ?? [];
-    let rtn: HistoryItem[] = [];
-    let opts = mobx.toJS(this.historyQueryOpts.get());
-    let ctx = GlobalModel.getUIContext();
-    let curRemote: RemotePtrType = ctx.remote;
-    if (curRemote == null) {
-      curRemote = { ownerid: "", name: "", remoteid: "" };
     }
-    curRemote = mobx.toJS(curRemote);
-    for (let i = 0; i < hitems.length; i++) {
-      let hitem = hitems[i];
-      if (hitem.ismetacmd) {
-        if (!opts.includeMeta) {
-          continue;
+
+    hasFocus(): boolean {
+        let mainInputElem = document.getElementById("main-cmd-input");
+        if (document.activeElement == mainInputElem) {
+            return true;
         }
-      } else {
-        if (opts.limitRemoteInstance) {
-          if (hitem.remote == null || isBlank(hitem.remote.remoteid)) {
-            continue;
-          }
-          if (
-            (curRemote.ownerid ?? "") != (hitem.remote.ownerid ?? "") ||
-            (curRemote.remoteid ?? "") != (hitem.remote.remoteid ?? "") ||
-            (curRemote.name ?? "") != (hitem.remote.name ?? "")
-          ) {
-            continue;
-          }
-        } else if (opts.limitRemote) {
-          if (hitem.remote == null || isBlank(hitem.remote.remoteid)) {
-            continue;
-          }
-          if (
-            (curRemote.ownerid ?? "") != (hitem.remote.ownerid ?? "") ||
-            (curRemote.remoteid ?? "") != (hitem.remote.remoteid ?? "")
-          ) {
-            continue;
-          }
+        let historyInputElem = document.querySelector(".cmd-input input.history-input");
+        if (document.activeElement == historyInputElem) {
+            return true;
         }
-      }
-      if (!isBlank(opts.queryStr)) {
-        if (isBlank(hitem.cmdstr)) {
-          continue;
+        return false;
+    }
+
+    setHistoryType(htype: HistoryTypeStrs): void {
+        if (this.historyQueryOpts.get().queryType == htype) {
+            return;
         }
-        let idx = hitem.cmdstr.indexOf(opts.queryStr);
-        if (idx == -1) {
-          continue;
+        this.loadHistory(true, -1, htype);
+    }
+
+    findBestNewIndex(oldItem: HistoryItem): number {
+        if (oldItem == null) {
+            return 0;
         }
-      }
+        let newItems = this.getFilteredHistoryItems();
+        if (newItems.length == 0) {
+            return 0;
+        }
+        let bestIdx = 0;
+        for (let i = 0; i < newItems.length; i++) {
+            // still start at i=0 to catch the historynum equality case
+            let item = newItems[i];
+            if (item.historynum == oldItem.historynum) {
+                bestIdx = i;
+                break;
+            }
+            let bestTsDiff = Math.abs(item.ts - newItems[bestIdx].ts);
+            let curTsDiff = Math.abs(item.ts - oldItem.ts);
+            if (curTsDiff < bestTsDiff) {
+                bestIdx = i;
+            }
+        }
+        return bestIdx + 1;
+    }
 
-      rtn.push(hitem);
+    setHistoryQueryOpts(opts: HistoryQueryOpts): void {
+        mobx.action(() => {
+            let oldItem = this.getHistorySelectedItem();
+            this.historyQueryOpts.set(opts);
+            let bestIndex = this.findBestNewIndex(oldItem);
+            setTimeout(() => this.setHistoryIndex(bestIndex, true), 10);
+            return;
+        })();
     }
-    return rtn;
-  }
 
-  scrollHistoryItemIntoView(hnum: string): void {
-    let elem: HTMLElement = document.querySelector(
-      ".cmd-history .hnum-" + hnum
-    );
-    if (elem == null) {
-      return;
+    setHistoryShow(show: boolean): void {
+        if (this.historyShow.get() == show) {
+            return;
+        }
+        mobx.action(() => {
+            this.historyShow.set(show);
+            if (this.hasFocus()) {
+                this.giveFocus();
+            }
+        })();
     }
-    let historyDiv = elem.closest(".cmd-history");
-    if (historyDiv == null) {
-      return;
-    }
-    let buffer = 15;
-    let titleHeight = 24;
-    let titleDiv: HTMLElement = document.querySelector(
-      ".cmd-history .history-title"
-    );
-    if (titleDiv != null) {
-      titleHeight = titleDiv.offsetHeight + 2;
-    }
-    let elemOffset = elem.offsetTop;
-    let elemHeight = elem.clientHeight;
-    let topPos = historyDiv.scrollTop;
-    let endPos = topPos + historyDiv.clientHeight;
-    if (elemOffset + elemHeight + buffer > endPos) {
-      if (elemHeight + buffer > historyDiv.clientHeight - titleHeight) {
-        historyDiv.scrollTop = elemOffset - titleHeight;
-        return;
-      }
-      historyDiv.scrollTop =
-        elemOffset - historyDiv.clientHeight + elemHeight + buffer;
-      return;
-    }
-    if (elemOffset < topPos + titleHeight) {
-      if (elemHeight + buffer > historyDiv.clientHeight - titleHeight) {
-        historyDiv.scrollTop = elemOffset - titleHeight;
-        return;
-      }
-      historyDiv.scrollTop = elemOffset - titleHeight - buffer;
-      return;
-    }
-  }
 
-  grabSelectedHistoryItem(): void {
-    let hitem = this.getHistorySelectedItem();
-    if (hitem == null) {
-      this.resetHistory();
-      return;
+    isHistoryLoaded(): boolean {
+        if (this.historyLoading.get()) {
+            return false;
+        }
+        let hitems = this.historyItems.get();
+        return hitems != null;
     }
-    mobx.action(() => {
-      this.resetInput();
-      this.setCurLine(hitem.cmdstr);
-    })();
-  }
 
-  setHistoryIndex(hidx: number, force?: boolean): void {
-    if (hidx < 0) {
-      return;
+    loadHistory(show: boolean, afterLoadIndex: number, htype: HistoryTypeStrs) {
+        if (this.historyLoading.get()) {
+            return;
+        }
+        if (this.isHistoryLoaded()) {
+            if (this.historyQueryOpts.get().queryType == htype) {
+                return;
+            }
+        }
+        this.historyAfterLoadIndex = afterLoadIndex;
+        mobx.action(() => {
+            this.historyLoading.set(true);
+        })();
+        GlobalCommandRunner.loadHistory(show, htype);
     }
-    if (!force && this.historyIndex.get() == hidx) {
-      return;
+
+    openHistory(): void {
+        if (this.historyLoading.get()) {
+            return;
+        }
+        if (!this.isHistoryLoaded()) {
+            this.loadHistory(true, 0, "screen");
+            return;
+        }
+        if (!this.historyShow.get()) {
+            mobx.action(() => {
+                this.setHistoryShow(true);
+                this.infoShow.set(false);
+                this.dropModHistory(true);
+                this.giveFocus();
+            })();
+        }
     }
-    mobx.action(() => {
-      this.historyIndex.set(hidx);
-      if (this.historyShow.get()) {
+
+    updateCmdLine(cmdLine: CmdLineUpdateType): void {
+        mobx.action(() => {
+            this.setCurLine(cmdLine.cmdline);
+            this.forceCursorPos.set(cmdLine.cursorpos);
+        })();
+    }
+
+    getHistorySelectedItem(): HistoryItem {
+        let hidx = this.historyIndex.get();
+        if (hidx == 0) {
+            return null;
+        }
+        let hitems = this.getFilteredHistoryItems();
+        if (hidx > hitems.length) {
+            return null;
+        }
+        return hitems[hidx - 1];
+    }
+
+    getFirstHistoryItem(): HistoryItem {
+        let hitems = this.getFilteredHistoryItems();
+        if (hitems.length == 0) {
+            return null;
+        }
+        return hitems[0];
+    }
+
+    setHistorySelectionNum(hnum: string): void {
+        let hitems = this.getFilteredHistoryItems();
+        for (let i = 0; i < hitems.length; i++) {
+            if (hitems[i].historynum == hnum) {
+                this.setHistoryIndex(i + 1);
+                return;
+            }
+        }
+    }
+
+    setHistoryInfo(hinfo: HistoryInfoType): void {
+        mobx.action(() => {
+            let oldItem = this.getHistorySelectedItem();
+            let hitems: HistoryItem[] = hinfo.items ?? [];
+            this.historyItems.set(hitems);
+            this.historyLoading.set(false);
+            this.historyQueryOpts.get().queryType = hinfo.historytype;
+            if (hinfo.historytype == "session" || hinfo.historytype == "global") {
+                this.historyQueryOpts.get().limitRemote = false;
+                this.historyQueryOpts.get().limitRemoteInstance = false;
+            }
+            if (this.historyAfterLoadIndex == -1) {
+                let bestIndex = this.findBestNewIndex(oldItem);
+                setTimeout(() => this.setHistoryIndex(bestIndex, true), 100);
+            } else if (this.historyAfterLoadIndex) {
+                if (hitems.length >= this.historyAfterLoadIndex) {
+                    this.setHistoryIndex(this.historyAfterLoadIndex);
+                }
+            }
+            this.historyAfterLoadIndex = 0;
+            if (hinfo.show) {
+                this.openHistory();
+            }
+        })();
+    }
+
+    getFilteredHistoryItems(): HistoryItem[] {
+        return this.filteredHistoryItems.get();
+    }
+
+    _getFilteredHistoryItems(): HistoryItem[] {
+        let hitems: HistoryItem[] = this.historyItems.get() ?? [];
+        let rtn: HistoryItem[] = [];
+        let opts = mobx.toJS(this.historyQueryOpts.get());
+        let ctx = GlobalModel.getUIContext();
+        let curRemote: RemotePtrType = ctx.remote;
+        if (curRemote == null) {
+            curRemote = { ownerid: "", name: "", remoteid: "" };
+        }
+        curRemote = mobx.toJS(curRemote);
+        for (let i = 0; i < hitems.length; i++) {
+            let hitem = hitems[i];
+            if (hitem.ismetacmd) {
+                if (!opts.includeMeta) {
+                    continue;
+                }
+            } else {
+                if (opts.limitRemoteInstance) {
+                    if (hitem.remote == null || isBlank(hitem.remote.remoteid)) {
+                        continue;
+                    }
+                    if (
+                        (curRemote.ownerid ?? "") != (hitem.remote.ownerid ?? "") ||
+                        (curRemote.remoteid ?? "") != (hitem.remote.remoteid ?? "") ||
+                        (curRemote.name ?? "") != (hitem.remote.name ?? "")
+                    ) {
+                        continue;
+                    }
+                } else if (opts.limitRemote) {
+                    if (hitem.remote == null || isBlank(hitem.remote.remoteid)) {
+                        continue;
+                    }
+                    if (
+                        (curRemote.ownerid ?? "") != (hitem.remote.ownerid ?? "") ||
+                        (curRemote.remoteid ?? "") != (hitem.remote.remoteid ?? "")
+                    ) {
+                        continue;
+                    }
+                }
+            }
+            if (!isBlank(opts.queryStr)) {
+                if (isBlank(hitem.cmdstr)) {
+                    continue;
+                }
+                let idx = hitem.cmdstr.indexOf(opts.queryStr);
+                if (idx == -1) {
+                    continue;
+                }
+            }
+
+            rtn.push(hitem);
+        }
+        return rtn;
+    }
+
+    scrollHistoryItemIntoView(hnum: string): void {
+        let elem: HTMLElement = document.querySelector(".cmd-history .hnum-" + hnum);
+        if (elem == null) {
+            return;
+        }
+        let historyDiv = elem.closest(".cmd-history");
+        if (historyDiv == null) {
+            return;
+        }
+        let buffer = 15;
+        let titleHeight = 24;
+        let titleDiv: HTMLElement = document.querySelector(".cmd-history .history-title");
+        if (titleDiv != null) {
+            titleHeight = titleDiv.offsetHeight + 2;
+        }
+        let elemOffset = elem.offsetTop;
+        let elemHeight = elem.clientHeight;
+        let topPos = historyDiv.scrollTop;
+        let endPos = topPos + historyDiv.clientHeight;
+        if (elemOffset + elemHeight + buffer > endPos) {
+            if (elemHeight + buffer > historyDiv.clientHeight - titleHeight) {
+                historyDiv.scrollTop = elemOffset - titleHeight;
+                return;
+            }
+            historyDiv.scrollTop = elemOffset - historyDiv.clientHeight + elemHeight + buffer;
+            return;
+        }
+        if (elemOffset < topPos + titleHeight) {
+            if (elemHeight + buffer > historyDiv.clientHeight - titleHeight) {
+                historyDiv.scrollTop = elemOffset - titleHeight;
+                return;
+            }
+            historyDiv.scrollTop = elemOffset - titleHeight - buffer;
+            return;
+        }
+    }
+
+    grabSelectedHistoryItem(): void {
         let hitem = this.getHistorySelectedItem();
         if (hitem == null) {
-          hitem = this.getFirstHistoryItem();
+            this.resetHistory();
+            return;
         }
-        if (hitem != null) {
-          this.scrollHistoryItemIntoView(hitem.historynum);
+        mobx.action(() => {
+            this.resetInput();
+            this.setCurLine(hitem.cmdstr);
+        })();
+    }
+
+    setHistoryIndex(hidx: number, force?: boolean): void {
+        if (hidx < 0) {
+            return;
         }
-      }
-    })();
-  }
-
-  moveHistorySelection(amt: number): void {
-    if (amt == 0) {
-      return;
-    }
-    if (!this.isHistoryLoaded()) {
-      return;
-    }
-    let hitems = this.getFilteredHistoryItems();
-    let idx = this.historyIndex.get();
-    idx += amt;
-    if (idx < 0) {
-      idx = 0;
-    }
-    if (idx > hitems.length) {
-      idx = hitems.length;
-    }
-    this.setHistoryIndex(idx);
-  }
-
-  flashInfoMsg(info: InfoType, timeoutMs: number): void {
-    this._clearInfoTimeout();
-    mobx.action(() => {
-      this.infoMsg.set(info);
-      if (info == null) {
-        this.infoShow.set(false);
-      } else {
-        this.infoShow.set(true);
-        this.setHistoryShow(false);
-      }
-    })();
-    if (info != null && timeoutMs) {
-      this.infoTimeoutId = setTimeout(() => {
-        if (this.historyShow.get()) {
-          return;
+        if (!force && this.historyIndex.get() == hidx) {
+            return;
         }
-        this.clearInfoMsg(false);
-      }, timeoutMs);
+        mobx.action(() => {
+            this.historyIndex.set(hidx);
+            if (this.historyShow.get()) {
+                let hitem = this.getHistorySelectedItem();
+                if (hitem == null) {
+                    hitem = this.getFirstHistoryItem();
+                }
+                if (hitem != null) {
+                    this.scrollHistoryItemIntoView(hitem.historynum);
+                }
+            }
+        })();
     }
-  }
 
-  hasScrollingInfoMsg(): boolean {
-    if (!this.infoShow.get()) {
-      return false;
-    }
-    let info = this.infoMsg.get();
-    if (info == null) {
-      return false;
-    }
-    let div = document.querySelector(".cmd-input-info");
-    if (div == null) {
-      return false;
-    }
-    return div.scrollHeight > div.clientHeight;
-  }
-
-  _clearInfoTimeout(): void {
-    if (this.infoTimeoutId != null) {
-      clearTimeout(this.infoTimeoutId);
-      this.infoTimeoutId = null;
-    }
-  }
-
-  clearInfoMsg(setNull: boolean): void {
-    this._clearInfoTimeout();
-    mobx.action(() => {
-      this.setHistoryShow(false);
-      this.infoShow.set(false);
-      if (setNull) {
-        this.infoMsg.set(null);
-      }
-    })();
-  }
-
-  toggleInfoMsg(): void {
-    this._clearInfoTimeout();
-    mobx.action(() => {
-      if (this.historyShow.get()) {
-        this.setHistoryShow(false);
-        return;
-      }
-      let isShowing = this.infoShow.get();
-      if (isShowing) {
-        this.infoShow.set(false);
-      } else {
-        if (this.infoMsg.get() != null) {
-          this.infoShow.set(true);
+    moveHistorySelection(amt: number): void {
+        if (amt == 0) {
+            return;
         }
-      }
-    })();
-  }
-
-  @boundMethod
-  uiSubmitCommand(): void {
-    mobx.action(() => {
-      let commandStr = this.getCurLine();
-      if (commandStr.trim() == "") {
-        return;
-      }
-      this.resetInput();
-      GlobalModel.submitRawCommand(commandStr, true, true);
-    })();
-  }
-
-  isEmpty(): boolean {
-    return this.getCurLine().trim() == "";
-  }
-
-  resetInputMode(): void {
-    mobx.action(() => {
-      this.setInputMode(null);
-      this.setCurLine("");
-    })();
-  }
-
-  setCurLine(val: string): void {
-    let hidx = this.historyIndex.get();
-    mobx.action(() => {
-      // if (val == "\" ") {
-      //     this.setInputMode("comment");
-      //     val = "";
-      // }
-      // if (val == "//") {
-      //     this.setInputMode("global");
-      //     val = "";
-      // }
-      if (this.modHistory.length <= hidx) {
-        this.modHistory.length = hidx + 1;
-      }
-      this.modHistory[hidx] = val;
-    })();
-  }
-
-  resetInput(): void {
-    mobx.action(() => {
-      this.setHistoryShow(false);
-      this.infoShow.set(false);
-      this.inputMode.set(null);
-      this.resetHistory();
-      this.dropModHistory(false);
-      this.infoMsg.set(null);
-      this.inputExpanded.set(false);
-      this._clearInfoTimeout();
-    })();
-  }
-
-  @boundMethod
-  toggleExpandInput(): void {
-    mobx.action(() => {
-      this.inputExpanded.set(!this.inputExpanded.get());
-      this.forceInputFocus = true;
-    })();
-  }
-
-  getCurLine(): string {
-    let model = GlobalModel;
-    let hidx = this.historyIndex.get();
-    if (hidx < this.modHistory.length && this.modHistory[hidx] != null) {
-      return this.modHistory[hidx];
-    }
-    let hitems = this.getFilteredHistoryItems();
-    if (hidx == 0 || hitems == null || hidx > hitems.length) {
-      return "";
-    }
-    let hitem = hitems[hidx - 1];
-    if (hitem == null) {
-      return "";
-    }
-    return hitem.cmdstr;
-  }
-
-  dropModHistory(keepLine0: boolean): void {
-    mobx.action(() => {
-      if (keepLine0) {
-        if (this.modHistory.length > 1) {
-          this.modHistory.splice(1, this.modHistory.length - 1);
+        if (!this.isHistoryLoaded()) {
+            return;
         }
-      } else {
-        this.modHistory.replace([""]);
-      }
-    })();
-  }
+        let hitems = this.getFilteredHistoryItems();
+        let idx = this.historyIndex.get();
+        idx += amt;
+        if (idx < 0) {
+            idx = 0;
+        }
+        if (idx > hitems.length) {
+            idx = hitems.length;
+        }
+        this.setHistoryIndex(idx);
+    }
 
-  resetHistory(): void {
-    mobx.action(() => {
-      this.setHistoryShow(false);
-      this.historyLoading.set(false);
-      this.historyType.set("screen");
-      this.historyItems.set(null);
-      this.historyIndex.set(0);
-      this.historyQueryOpts.set(getDefaultHistoryQueryOpts());
-      this.historyAfterLoadIndex = 0;
-      this.dropModHistory(true);
-    })();
-  }
+    flashInfoMsg(info: InfoType, timeoutMs: number): void {
+        this._clearInfoTimeout();
+        mobx.action(() => {
+            this.infoMsg.set(info);
+            if (info == null) {
+                this.infoShow.set(false);
+            } else {
+                this.infoShow.set(true);
+                this.setHistoryShow(false);
+            }
+        })();
+        if (info != null && timeoutMs) {
+            this.infoTimeoutId = setTimeout(() => {
+                if (this.historyShow.get()) {
+                    return;
+                }
+                this.clearInfoMsg(false);
+            }, timeoutMs);
+        }
+    }
+
+    hasScrollingInfoMsg(): boolean {
+        if (!this.infoShow.get()) {
+            return false;
+        }
+        let info = this.infoMsg.get();
+        if (info == null) {
+            return false;
+        }
+        let div = document.querySelector(".cmd-input-info");
+        if (div == null) {
+            return false;
+        }
+        return div.scrollHeight > div.clientHeight;
+    }
+
+    _clearInfoTimeout(): void {
+        if (this.infoTimeoutId != null) {
+            clearTimeout(this.infoTimeoutId);
+            this.infoTimeoutId = null;
+        }
+    }
+
+    clearInfoMsg(setNull: boolean): void {
+        this._clearInfoTimeout();
+        mobx.action(() => {
+            this.setHistoryShow(false);
+            this.infoShow.set(false);
+            if (setNull) {
+                this.infoMsg.set(null);
+            }
+        })();
+    }
+
+    toggleInfoMsg(): void {
+        this._clearInfoTimeout();
+        mobx.action(() => {
+            if (this.historyShow.get()) {
+                this.setHistoryShow(false);
+                return;
+            }
+            let isShowing = this.infoShow.get();
+            if (isShowing) {
+                this.infoShow.set(false);
+            } else {
+                if (this.infoMsg.get() != null) {
+                    this.infoShow.set(true);
+                }
+            }
+        })();
+    }
+
+    @boundMethod
+    uiSubmitCommand(): void {
+        mobx.action(() => {
+            let commandStr = this.getCurLine();
+            if (commandStr.trim() == "") {
+                return;
+            }
+            this.resetInput();
+            GlobalModel.submitRawCommand(commandStr, true, true);
+        })();
+    }
+
+    isEmpty(): boolean {
+        return this.getCurLine().trim() == "";
+    }
+
+    resetInputMode(): void {
+        mobx.action(() => {
+            this.setInputMode(null);
+            this.setCurLine("");
+        })();
+    }
+
+    setCurLine(val: string): void {
+        let hidx = this.historyIndex.get();
+        mobx.action(() => {
+            // if (val == "\" ") {
+            //     this.setInputMode("comment");
+            //     val = "";
+            // }
+            // if (val == "//") {
+            //     this.setInputMode("global");
+            //     val = "";
+            // }
+            if (this.modHistory.length <= hidx) {
+                this.modHistory.length = hidx + 1;
+            }
+            this.modHistory[hidx] = val;
+        })();
+    }
+
+    resetInput(): void {
+        mobx.action(() => {
+            this.setHistoryShow(false);
+            this.infoShow.set(false);
+            this.inputMode.set(null);
+            this.resetHistory();
+            this.dropModHistory(false);
+            this.infoMsg.set(null);
+            this.inputExpanded.set(false);
+            this._clearInfoTimeout();
+        })();
+    }
+
+    @boundMethod
+    toggleExpandInput(): void {
+        mobx.action(() => {
+            this.inputExpanded.set(!this.inputExpanded.get());
+            this.forceInputFocus = true;
+        })();
+    }
+
+    getCurLine(): string {
+        let model = GlobalModel;
+        let hidx = this.historyIndex.get();
+        if (hidx < this.modHistory.length && this.modHistory[hidx] != null) {
+            return this.modHistory[hidx];
+        }
+        let hitems = this.getFilteredHistoryItems();
+        if (hidx == 0 || hitems == null || hidx > hitems.length) {
+            return "";
+        }
+        let hitem = hitems[hidx - 1];
+        if (hitem == null) {
+            return "";
+        }
+        return hitem.cmdstr;
+    }
+
+    dropModHistory(keepLine0: boolean): void {
+        mobx.action(() => {
+            if (keepLine0) {
+                if (this.modHistory.length > 1) {
+                    this.modHistory.splice(1, this.modHistory.length - 1);
+                }
+            } else {
+                this.modHistory.replace([""]);
+            }
+        })();
+    }
+
+    resetHistory(): void {
+        mobx.action(() => {
+            this.setHistoryShow(false);
+            this.historyLoading.set(false);
+            this.historyType.set("screen");
+            this.historyItems.set(null);
+            this.historyIndex.set(0);
+            this.historyQueryOpts.set(getDefaultHistoryQueryOpts());
+            this.historyAfterLoadIndex = 0;
+            this.dropModHistory(true);
+        })();
+    }
 }
 
 type LineFocusType = {
-  cmdInputFocus: boolean;
-  lineid?: string;
-  linenum?: number;
-  screenid?: string;
+    cmdInputFocus: boolean;
+    lineid?: string;
+    linenum?: number;
+    screenid?: string;
 };
 
 class SpecialHistoryViewLineContainer {
-  historyItem: HistoryItem;
-  terminal: TermWrap;
-  renderer: RendererModel;
-  cmd: Cmd;
+    historyItem: HistoryItem;
+    terminal: TermWrap;
+    renderer: RendererModel;
+    cmd: Cmd;
 
-  constructor(hitem: HistoryItem) {
-    this.historyItem = hitem;
-  }
-
-  getCmd(line: LineType): Cmd {
-    if (this.cmd == null) {
-      this.cmd = GlobalModel.historyViewModel.getCmdById(line.lineid);
+    constructor(hitem: HistoryItem) {
+        this.historyItem = hitem;
     }
-    return this.cmd;
-  }
 
-  setTermFocus(lineNum: number, focus: boolean): void {
-    return;
-  }
-
-  setContentHeight(context: RendererContext, height: number): void {
-    return;
-  }
-
-  getMaxContentSize(): WindowSize {
-    let width = termWidthFromCols(80, GlobalModel.termFontSize.get());
-    let height = termHeightFromRows(25, GlobalModel.termFontSize.get());
-    return { width, height };
-  }
-
-  getIdealContentSize(): WindowSize {
-    let width = termWidthFromCols(80, GlobalModel.termFontSize.get());
-    let height = termHeightFromRows(25, GlobalModel.termFontSize.get());
-    return { width, height };
-  }
-
-  loadTerminalRenderer(
-    elem: Element,
-    line: LineType,
-    cmd: Cmd,
-    width: number
-  ): void {
-    this.unloadRenderer(null);
-    let lineId = cmd.lineId;
-    let termWrap = this.getTermWrap(lineId);
-    if (termWrap != null) {
-      console.log("term-wrap already exists for", line.screenid, lineId);
-      return;
+    getCmd(line: LineType): Cmd {
+        if (this.cmd == null) {
+            this.cmd = GlobalModel.historyViewModel.getCmdById(line.lineid);
+        }
+        return this.cmd;
     }
-    let cols = windowWidthToCols(width, GlobalModel.termFontSize.get());
-    let usedRows = GlobalModel.getContentHeight(getRendererContext(line));
-    if (line.contentheight != null && line.contentheight != -1) {
-      usedRows = line.contentheight;
+
+    setTermFocus(lineNum: number, focus: boolean): void {
+        return;
     }
-    let termContext = {
-      screenId: line.screenid,
-      lineId: line.lineid,
-      lineNum: line.linenum,
-    };
-    termWrap = new TermWrap(elem, {
-      termContext: termContext,
-      usedRows: usedRows,
-      termOpts: cmd.getTermOpts(),
-      winSize: { height: 0, width: width },
-      dataHandler: null,
-      focusHandler: null,
-      isRunning: cmd.isRunning(),
-      customKeyHandler: null,
-      fontSize: GlobalModel.termFontSize.get(),
-      ptyDataSource: getTermPtyData,
-      onUpdateContentHeight: null,
-    });
-    this.terminal = termWrap;
-    return;
-  }
 
-  registerRenderer(lineId: string, renderer: RendererModel): void {
-    this.renderer = renderer;
-  }
-
-  unloadRenderer(lineId: string): void {
-    if (this.renderer != null) {
-      this.renderer.dispose();
-      this.renderer = null;
+    setContentHeight(context: RendererContext, height: number): void {
+        return;
     }
-    if (this.terminal != null) {
-      this.terminal.dispose();
-      this.terminal = null;
+
+    getMaxContentSize(): WindowSize {
+        let width = termWidthFromCols(80, GlobalModel.termFontSize.get());
+        let height = termHeightFromRows(25, GlobalModel.termFontSize.get());
+        return { width, height };
     }
-  }
 
-  getContentHeight(context: RendererContext): number {
-    return GlobalModel.getContentHeight(context);
-  }
-
-  getUsedRows(
-    context: RendererContext,
-    line: LineType,
-    cmd: Cmd,
-    width: number
-  ): number {
-    if (cmd == null) {
-      return 0;
+    getIdealContentSize(): WindowSize {
+        let width = termWidthFromCols(80, GlobalModel.termFontSize.get());
+        let height = termHeightFromRows(25, GlobalModel.termFontSize.get());
+        return { width, height };
     }
-    let termOpts = cmd.getTermOpts();
-    if (!termOpts.flexrows) {
-      return termOpts.rows;
+
+    loadTerminalRenderer(elem: Element, line: LineType, cmd: Cmd, width: number): void {
+        this.unloadRenderer(null);
+        let lineId = cmd.lineId;
+        let termWrap = this.getTermWrap(lineId);
+        if (termWrap != null) {
+            console.log("term-wrap already exists for", line.screenid, lineId);
+            return;
+        }
+        let cols = windowWidthToCols(width, GlobalModel.termFontSize.get());
+        let usedRows = GlobalModel.getContentHeight(getRendererContext(line));
+        if (line.contentheight != null && line.contentheight != -1) {
+            usedRows = line.contentheight;
+        }
+        let termContext = {
+            screenId: line.screenid,
+            lineId: line.lineid,
+            lineNum: line.linenum,
+        };
+        termWrap = new TermWrap(elem, {
+            termContext: termContext,
+            usedRows: usedRows,
+            termOpts: cmd.getTermOpts(),
+            winSize: { height: 0, width: width },
+            dataHandler: null,
+            focusHandler: null,
+            isRunning: cmd.isRunning(),
+            customKeyHandler: null,
+            fontSize: GlobalModel.termFontSize.get(),
+            ptyDataSource: getTermPtyData,
+            onUpdateContentHeight: null,
+        });
+        this.terminal = termWrap;
+        return;
     }
-    let termWrap = this.getTermWrap(cmd.lineId);
-    if (termWrap == null) {
-      let cols = windowWidthToCols(width, GlobalModel.termFontSize.get());
-      let usedRows = GlobalModel.getContentHeight(context);
-      if (usedRows != null) {
-        return usedRows;
-      }
-      if (line.contentheight != null && line.contentheight != -1) {
-        return line.contentheight;
-      }
-      return cmd.isRunning() ? 1 : 0;
+
+    registerRenderer(lineId: string, renderer: RendererModel): void {
+        this.renderer = renderer;
     }
-    return termWrap.getUsedRows();
-  }
 
-  getIsFocused(lineNum: number): boolean {
-    return false;
-  }
+    unloadRenderer(lineId: string): void {
+        if (this.renderer != null) {
+            this.renderer.dispose();
+            this.renderer = null;
+        }
+        if (this.terminal != null) {
+            this.terminal.dispose();
+            this.terminal = null;
+        }
+    }
 
-  getRenderer(lineId: string): RendererModel {
-    return this.renderer;
-  }
+    getContentHeight(context: RendererContext): number {
+        return GlobalModel.getContentHeight(context);
+    }
 
-  getTermWrap(lineId: string): TermWrap {
-    return this.terminal;
-  }
+    getUsedRows(context: RendererContext, line: LineType, cmd: Cmd, width: number): number {
+        if (cmd == null) {
+            return 0;
+        }
+        let termOpts = cmd.getTermOpts();
+        if (!termOpts.flexrows) {
+            return termOpts.rows;
+        }
+        let termWrap = this.getTermWrap(cmd.lineId);
+        if (termWrap == null) {
+            let cols = windowWidthToCols(width, GlobalModel.termFontSize.get());
+            let usedRows = GlobalModel.getContentHeight(context);
+            if (usedRows != null) {
+                return usedRows;
+            }
+            if (line.contentheight != null && line.contentheight != -1) {
+                return line.contentheight;
+            }
+            return cmd.isRunning() ? 1 : 0;
+        }
+        return termWrap.getUsedRows();
+    }
 
-  getFocusType(): FocusTypeStrs {
-    return "input";
-  }
+    getIsFocused(lineNum: number): boolean {
+        return false;
+    }
 
-  getSelectedLine(): number {
-    return null;
-  }
+    getRenderer(lineId: string): RendererModel {
+        return this.renderer;
+    }
+
+    getTermWrap(lineId: string): TermWrap {
+        return this.terminal;
+    }
+
+    getFocusType(): FocusTypeStrs {
+        return "input";
+    }
+
+    getSelectedLine(): number {
+        return null;
+    }
 }
 
 const HistoryPageSize = 50;
 
 class HistoryViewModel {
-  items: OArr<HistoryItem> = mobx.observable.array([], {
-    name: "HistoryItems",
-  });
-  hasMore: OV<boolean> = mobx.observable.box(false, {
-    name: "historyview-hasmore",
-  });
-  offset: OV<number> = mobx.observable.box(0, { name: "historyview-offset" });
-  searchText: OV<string> = mobx.observable.box("", {
-    name: "historyview-searchtext",
-  });
-  activeSearchText: string = null;
-  selectedItems: OMap<string, boolean> = mobx.observable.map(
-    {},
-    { name: "historyview-selectedItems" }
-  );
-  deleteActive: OV<boolean> = mobx.observable.box(false, {
-    name: "historyview-deleteActive",
-  });
-  activeItem: OV<string> = mobx.observable.box(null, {
-    name: "historyview-activeItem",
-  });
-  searchSessionId: OV<string> = mobx.observable.box(null, {
-    name: "historyview-searchSessionId",
-  });
-  searchRemoteId: OV<string> = mobx.observable.box(null, {
-    name: "historyview-searchRemoteId",
-  });
-  searchShowMeta: OV<boolean> = mobx.observable.box(false, {
-    name: "historyview-searchShowMeta",
-  });
-  searchFromDate: OV<string> = mobx.observable.box(null, {
-    name: "historyview-searchfromts",
-  });
-  searchFilterCmds: OV<boolean> = mobx.observable.box(true, {
-    name: "historyview-filtercmds",
-  });
-  nextRawOffset: number = 0;
-  curRawOffset: number = 0;
-
-  historyItemLines: LineType[] = [];
-  historyItemCmds: CmdDataType[] = [];
-
-  specialLineContainer: SpecialHistoryViewLineContainer;
-
-  constructor() {}
-
-  closeView(): void {
-    GlobalModel.showSessionView();
-    setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
-  }
-
-  getLineById(lineId: string): LineType {
-    if (isBlank(lineId)) {
-      return null;
-    }
-    for (let i = 0; i < this.historyItemLines.length; i++) {
-      let line = this.historyItemLines[i];
-      if (line.lineid == lineId) {
-        return line;
-      }
-    }
-    return null;
-  }
-
-  getCmdById(lineId: string): Cmd {
-    if (isBlank(lineId)) {
-      return null;
-    }
-    for (let i = 0; i < this.historyItemCmds.length; i++) {
-      let cmd = this.historyItemCmds[i];
-      if (cmd.lineid == lineId) {
-        return new Cmd(cmd);
-      }
-    }
-    return null;
-  }
-
-  getHistoryItemById(historyId: string): HistoryItem {
-    if (isBlank(historyId)) {
-      return null;
-    }
-    for (let i = 0; i < this.items.length; i++) {
-      let hitem = this.items[i];
-      if (hitem.historyid == historyId) {
-        return hitem;
-      }
-    }
-    return null;
-  }
-
-  setActiveItem(historyId: string) {
-    if (this.activeItem.get() == historyId) {
-      return;
-    }
-    let hitem = this.getHistoryItemById(historyId);
-    mobx.action(() => {
-      if (hitem == null) {
-        this.activeItem.set(null);
-        this.specialLineContainer = null;
-      } else {
-        this.activeItem.set(hitem.historyid);
-        this.specialLineContainer = new SpecialHistoryViewLineContainer(hitem);
-      }
-    })();
-  }
-
-  doSelectedDelete(): void {
-    if (!this.deleteActive.get()) {
-      mobx.action(() => {
-        this.deleteActive.set(true);
-      })();
-      setTimeout(this.clearActiveDelete, 2000);
-      return;
-    }
-    let prtn = GlobalModel.showAlert({
-      message:
-        "Deleting lines from history also deletes their content from your sessions.",
-      confirm: true,
+    items: OArr<HistoryItem> = mobx.observable.array([], {
+        name: "HistoryItems",
     });
-    prtn.then((result) => {
-      if (!result) {
-        return;
-      }
-      if (result) {
-        this._deleteSelected();
-      }
+    hasMore: OV<boolean> = mobx.observable.box(false, {
+        name: "historyview-hasmore",
     });
-  }
-
-  _deleteSelected(): void {
-    let lineIds = Array.from(this.selectedItems.keys());
-    let prtn = GlobalCommandRunner.historyPurgeLines(lineIds);
-    prtn.then((result: CommandRtnType) => {
-      if (!result.success) {
-        GlobalModel.showAlert({ message: "Error removing history lines." });
-        return;
-      }
+    offset: OV<number> = mobx.observable.box(0, { name: "historyview-offset" });
+    searchText: OV<string> = mobx.observable.box("", {
+        name: "historyview-searchtext",
     });
-    let params = this._getSearchParams();
-    GlobalCommandRunner.historyView(params);
-  }
+    activeSearchText: string = null;
+    selectedItems: OMap<string, boolean> = mobx.observable.map({}, { name: "historyview-selectedItems" });
+    deleteActive: OV<boolean> = mobx.observable.box(false, {
+        name: "historyview-deleteActive",
+    });
+    activeItem: OV<string> = mobx.observable.box(null, {
+        name: "historyview-activeItem",
+    });
+    searchSessionId: OV<string> = mobx.observable.box(null, {
+        name: "historyview-searchSessionId",
+    });
+    searchRemoteId: OV<string> = mobx.observable.box(null, {
+        name: "historyview-searchRemoteId",
+    });
+    searchShowMeta: OV<boolean> = mobx.observable.box(false, {
+        name: "historyview-searchShowMeta",
+    });
+    searchFromDate: OV<string> = mobx.observable.box(null, {
+        name: "historyview-searchfromts",
+    });
+    searchFilterCmds: OV<boolean> = mobx.observable.box(true, {
+        name: "historyview-filtercmds",
+    });
+    nextRawOffset: number = 0;
+    curRawOffset: number = 0;
 
-  @boundMethod
-  clearActiveDelete(): void {
-    mobx.action(() => {
-      this.deleteActive.set(false);
-    })();
-  }
+    historyItemLines: LineType[] = [];
+    historyItemCmds: CmdDataType[] = [];
 
-  _getSearchParams(
-    newOffset?: number,
-    newRawOffset?: number
-  ): HistorySearchParams {
-    let offset = newOffset != null ? newOffset : this.offset.get();
-    let rawOffset = newRawOffset != null ? newRawOffset : this.curRawOffset;
-    let opts: HistorySearchParams = {
-      offset: offset,
-      rawOffset: rawOffset,
-      searchText: this.activeSearchText,
-      searchSessionId: this.searchSessionId.get(),
-      searchRemoteId: this.searchRemoteId.get(),
-    };
-    if (!this.searchShowMeta.get()) {
-      opts.noMeta = true;
+    specialLineContainer: SpecialHistoryViewLineContainer;
+
+    constructor() {}
+
+    closeView(): void {
+        GlobalModel.showSessionView();
+        setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
     }
-    if (this.searchFromDate.get() != null) {
-      let fromDate = this.searchFromDate.get();
-      let fromTs = dayjs(fromDate, "YYYY-MM-DD").valueOf();
-      let d = new Date(fromTs);
-      d.setDate(d.getDate() + 1);
-      let ts = d.getTime() - 1;
-      opts.fromTs = ts;
+
+    getLineById(lineId: string): LineType {
+        if (isBlank(lineId)) {
+            return null;
+        }
+        for (let i = 0; i < this.historyItemLines.length; i++) {
+            let line = this.historyItemLines[i];
+            if (line.lineid == lineId) {
+                return line;
+            }
+        }
+        return null;
     }
-    if (this.searchFilterCmds.get()) {
-      opts.filterCmds = true;
+
+    getCmdById(lineId: string): Cmd {
+        if (isBlank(lineId)) {
+            return null;
+        }
+        for (let i = 0; i < this.historyItemCmds.length; i++) {
+            let cmd = this.historyItemCmds[i];
+            if (cmd.lineid == lineId) {
+                return new Cmd(cmd);
+            }
+        }
+        return null;
     }
-    return opts;
-  }
 
-  reSearch(): void {
-    this.setActiveItem(null);
-    GlobalCommandRunner.historyView(this._getSearchParams());
-  }
-
-  resetAllFilters(): void {
-    mobx.action(() => {
-      this.activeSearchText = "";
-      this.searchText.set("");
-      this.searchSessionId.set(null);
-      this.searchRemoteId.set(null);
-      this.searchFromDate.set(null);
-      this.searchShowMeta.set(false);
-      this.searchFilterCmds.set(true);
-    })();
-    GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
-  }
-
-  setFromDate(fromDate: string): void {
-    if (this.searchFromDate.get() == fromDate) {
-      return;
+    getHistoryItemById(historyId: string): HistoryItem {
+        if (isBlank(historyId)) {
+            return null;
+        }
+        for (let i = 0; i < this.items.length; i++) {
+            let hitem = this.items[i];
+            if (hitem.historyid == historyId) {
+                return hitem;
+            }
+        }
+        return null;
     }
-    mobx.action(() => {
-      this.searchFromDate.set(fromDate);
-    })();
-    GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
-  }
 
-  setSearchFilterCmds(filter: boolean): void {
-    if (this.searchFilterCmds.get() == filter) {
-      return;
+    setActiveItem(historyId: string) {
+        if (this.activeItem.get() == historyId) {
+            return;
+        }
+        let hitem = this.getHistoryItemById(historyId);
+        mobx.action(() => {
+            if (hitem == null) {
+                this.activeItem.set(null);
+                this.specialLineContainer = null;
+            } else {
+                this.activeItem.set(hitem.historyid);
+                this.specialLineContainer = new SpecialHistoryViewLineContainer(hitem);
+            }
+        })();
     }
-    mobx.action(() => {
-      this.searchFilterCmds.set(filter);
-    })();
-    GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
-  }
 
-  setSearchShowMeta(show: boolean): void {
-    if (this.searchShowMeta.get() == show) {
-      return;
+    doSelectedDelete(): void {
+        if (!this.deleteActive.get()) {
+            mobx.action(() => {
+                this.deleteActive.set(true);
+            })();
+            setTimeout(this.clearActiveDelete, 2000);
+            return;
+        }
+        let prtn = GlobalModel.showAlert({
+            message: "Deleting lines from history also deletes their content from your sessions.",
+            confirm: true,
+        });
+        prtn.then((result) => {
+            if (!result) {
+                return;
+            }
+            if (result) {
+                this._deleteSelected();
+            }
+        });
     }
-    mobx.action(() => {
-      this.searchShowMeta.set(show);
-    })();
-    GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
-  }
 
-  setSearchSessionId(sessionId: string): void {
-    if (this.searchSessionId.get() == sessionId) {
-      return;
+    _deleteSelected(): void {
+        let lineIds = Array.from(this.selectedItems.keys());
+        let prtn = GlobalCommandRunner.historyPurgeLines(lineIds);
+        prtn.then((result: CommandRtnType) => {
+            if (!result.success) {
+                GlobalModel.showAlert({ message: "Error removing history lines." });
+                return;
+            }
+        });
+        let params = this._getSearchParams();
+        GlobalCommandRunner.historyView(params);
     }
-    mobx.action(() => {
-      this.searchSessionId.set(sessionId);
-    })();
-    GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
-  }
 
-  setSearchRemoteId(remoteId: string): void {
-    if (this.searchRemoteId.get() == remoteId) {
-      return;
+    @boundMethod
+    clearActiveDelete(): void {
+        mobx.action(() => {
+            this.deleteActive.set(false);
+        })();
     }
-    mobx.action(() => {
-      this.searchRemoteId.set(remoteId);
-    })();
-    GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
-  }
 
-  goPrev(): void {
-    let offset = this.offset.get();
-    offset = offset - HistoryPageSize;
-    if (offset < 0) {
-      offset = 0;
+    _getSearchParams(newOffset?: number, newRawOffset?: number): HistorySearchParams {
+        let offset = newOffset != null ? newOffset : this.offset.get();
+        let rawOffset = newRawOffset != null ? newRawOffset : this.curRawOffset;
+        let opts: HistorySearchParams = {
+            offset: offset,
+            rawOffset: rawOffset,
+            searchText: this.activeSearchText,
+            searchSessionId: this.searchSessionId.get(),
+            searchRemoteId: this.searchRemoteId.get(),
+        };
+        if (!this.searchShowMeta.get()) {
+            opts.noMeta = true;
+        }
+        if (this.searchFromDate.get() != null) {
+            let fromDate = this.searchFromDate.get();
+            let fromTs = dayjs(fromDate, "YYYY-MM-DD").valueOf();
+            let d = new Date(fromTs);
+            d.setDate(d.getDate() + 1);
+            let ts = d.getTime() - 1;
+            opts.fromTs = ts;
+        }
+        if (this.searchFilterCmds.get()) {
+            opts.filterCmds = true;
+        }
+        return opts;
     }
-    let params = this._getSearchParams(offset, 0);
-    GlobalCommandRunner.historyView(params);
-  }
 
-  goNext(): void {
-    let offset = this.offset.get();
-    offset += HistoryPageSize;
-    let params = this._getSearchParams(offset, this.nextRawOffset ?? 0);
-    GlobalCommandRunner.historyView(params);
-  }
-
-  submitSearch(): void {
-    mobx.action(() => {
-      this.hasMore.set(false);
-      this.items.replace([]);
-      this.activeSearchText = this.searchText.get();
-      this.historyItemLines = [];
-      this.historyItemCmds = [];
-    })();
-    GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
-  }
-
-  handleDocKeyDown(e: any): void {
-    if (e.code == "Escape") {
-      e.preventDefault();
-      this.closeView();
-      return;
+    reSearch(): void {
+        this.setActiveItem(null);
+        GlobalCommandRunner.historyView(this._getSearchParams());
     }
-  }
 
-  showHistoryView(data: HistoryViewDataType): void {
-    mobx.action(() => {
-      GlobalModel.activeMainView.set("history");
-      this.hasMore.set(data.hasmore);
-      this.items.replace(data.items || []);
-      this.offset.set(data.offset);
-      this.nextRawOffset = data.nextrawoffset;
-      this.curRawOffset = data.rawoffset;
-      this.historyItemLines = data.lines ?? [];
-      this.historyItemCmds = data.cmds ?? [];
-      this.selectedItems.clear();
-    })();
-  }
+    resetAllFilters(): void {
+        mobx.action(() => {
+            this.activeSearchText = "";
+            this.searchText.set("");
+            this.searchSessionId.set(null);
+            this.searchRemoteId.set(null);
+            this.searchFromDate.set(null);
+            this.searchShowMeta.set(false);
+            this.searchFilterCmds.set(true);
+        })();
+        GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
+    }
+
+    setFromDate(fromDate: string): void {
+        if (this.searchFromDate.get() == fromDate) {
+            return;
+        }
+        mobx.action(() => {
+            this.searchFromDate.set(fromDate);
+        })();
+        GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
+    }
+
+    setSearchFilterCmds(filter: boolean): void {
+        if (this.searchFilterCmds.get() == filter) {
+            return;
+        }
+        mobx.action(() => {
+            this.searchFilterCmds.set(filter);
+        })();
+        GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
+    }
+
+    setSearchShowMeta(show: boolean): void {
+        if (this.searchShowMeta.get() == show) {
+            return;
+        }
+        mobx.action(() => {
+            this.searchShowMeta.set(show);
+        })();
+        GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
+    }
+
+    setSearchSessionId(sessionId: string): void {
+        if (this.searchSessionId.get() == sessionId) {
+            return;
+        }
+        mobx.action(() => {
+            this.searchSessionId.set(sessionId);
+        })();
+        GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
+    }
+
+    setSearchRemoteId(remoteId: string): void {
+        if (this.searchRemoteId.get() == remoteId) {
+            return;
+        }
+        mobx.action(() => {
+            this.searchRemoteId.set(remoteId);
+        })();
+        GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
+    }
+
+    goPrev(): void {
+        let offset = this.offset.get();
+        offset = offset - HistoryPageSize;
+        if (offset < 0) {
+            offset = 0;
+        }
+        let params = this._getSearchParams(offset, 0);
+        GlobalCommandRunner.historyView(params);
+    }
+
+    goNext(): void {
+        let offset = this.offset.get();
+        offset += HistoryPageSize;
+        let params = this._getSearchParams(offset, this.nextRawOffset ?? 0);
+        GlobalCommandRunner.historyView(params);
+    }
+
+    submitSearch(): void {
+        mobx.action(() => {
+            this.hasMore.set(false);
+            this.items.replace([]);
+            this.activeSearchText = this.searchText.get();
+            this.historyItemLines = [];
+            this.historyItemCmds = [];
+        })();
+        GlobalCommandRunner.historyView(this._getSearchParams(0, 0));
+    }
+
+    handleDocKeyDown(e: any): void {
+        if (e.code == "Escape") {
+            e.preventDefault();
+            this.closeView();
+            return;
+        }
+    }
+
+    showHistoryView(data: HistoryViewDataType): void {
+        mobx.action(() => {
+            GlobalModel.activeMainView.set("history");
+            this.hasMore.set(data.hasmore);
+            this.items.replace(data.items || []);
+            this.offset.set(data.offset);
+            this.nextRawOffset = data.nextrawoffset;
+            this.curRawOffset = data.rawoffset;
+            this.historyItemLines = data.lines ?? [];
+            this.historyItemCmds = data.cmds ?? [];
+            this.selectedItems.clear();
+        })();
+    }
 }
 
 class BookmarksModel {
-  bookmarks: OArr<BookmarkType> = mobx.observable.array([], {
-    name: "Bookmarks",
-  });
-  activeBookmark: OV<string> = mobx.observable.box(null, {
-    name: "activeBookmark",
-  });
-  editingBookmark: OV<string> = mobx.observable.box(null, {
-    name: "editingBookmark",
-  });
-  pendingDelete: OV<string> = mobx.observable.box(null, {
-    name: "pendingDelete",
-  });
-  copiedIndicator: OV<string> = mobx.observable.box(null, {
-    name: "copiedIndicator",
-  });
+    bookmarks: OArr<BookmarkType> = mobx.observable.array([], {
+        name: "Bookmarks",
+    });
+    activeBookmark: OV<string> = mobx.observable.box(null, {
+        name: "activeBookmark",
+    });
+    editingBookmark: OV<string> = mobx.observable.box(null, {
+        name: "editingBookmark",
+    });
+    pendingDelete: OV<string> = mobx.observable.box(null, {
+        name: "pendingDelete",
+    });
+    copiedIndicator: OV<string> = mobx.observable.box(null, {
+        name: "copiedIndicator",
+    });
 
-  tempDesc: OV<string> = mobx.observable.box("", {
-    name: "bookmarkEdit-tempDesc",
-  });
-  tempCmd: OV<string> = mobx.observable.box("", {
-    name: "bookmarkEdit-tempCmd",
-  });
+    tempDesc: OV<string> = mobx.observable.box("", {
+        name: "bookmarkEdit-tempDesc",
+    });
+    tempCmd: OV<string> = mobx.observable.box("", {
+        name: "bookmarkEdit-tempCmd",
+    });
 
-  showBookmarksView(bmArr: BookmarkType[], selectedBookmarkId: string): void {
-    bmArr = bmArr ?? [];
-    mobx.action(() => {
-      this.reset();
-      GlobalModel.activeMainView.set("bookmarks");
-      this.bookmarks.replace(bmArr);
-      if (selectedBookmarkId != null) {
-        this.selectBookmark(selectedBookmarkId);
-      }
-      if (this.activeBookmark.get() == null && bmArr.length > 0) {
-        this.activeBookmark.set(bmArr[0].bookmarkid);
-      }
-    })();
-  }
-
-  reset(): void {
-    mobx.action(() => {
-      this.activeBookmark.set(null);
-      this.editingBookmark.set(null);
-      this.pendingDelete.set(null);
-      this.tempDesc.set("");
-      this.tempCmd.set("");
-    })();
-  }
-
-  closeView(): void {
-    GlobalModel.showSessionView();
-    setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
-  }
-
-  @boundMethod
-  clearPendingDelete(): void {
-    mobx.action(() => this.pendingDelete.set(null))();
-  }
-
-  useBookmark(bookmarkId: string): void {
-    let bm = this.getBookmark(bookmarkId);
-    if (bm == null) {
-      return;
+    showBookmarksView(bmArr: BookmarkType[], selectedBookmarkId: string): void {
+        bmArr = bmArr ?? [];
+        mobx.action(() => {
+            this.reset();
+            GlobalModel.activeMainView.set("bookmarks");
+            this.bookmarks.replace(bmArr);
+            if (selectedBookmarkId != null) {
+                this.selectBookmark(selectedBookmarkId);
+            }
+            if (this.activeBookmark.get() == null && bmArr.length > 0) {
+                this.activeBookmark.set(bmArr[0].bookmarkid);
+            }
+        })();
     }
-    mobx.action(() => {
-      this.reset();
-      GlobalModel.showSessionView();
-      GlobalModel.inputModel.setCurLine(bm.cmdstr);
-      setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
-    })();
-  }
 
-  selectBookmark(bookmarkId: string): void {
-    let bm = this.getBookmark(bookmarkId);
-    if (bm == null) {
-      return;
+    reset(): void {
+        mobx.action(() => {
+            this.activeBookmark.set(null);
+            this.editingBookmark.set(null);
+            this.pendingDelete.set(null);
+            this.tempDesc.set("");
+            this.tempCmd.set("");
+        })();
     }
-    if (this.activeBookmark.get() == bookmarkId) {
-      return;
-    }
-    mobx.action(() => {
-      this.cancelEdit();
-      this.activeBookmark.set(bookmarkId);
-    })();
-  }
 
-  cancelEdit(): void {
-    mobx.action(() => {
-      this.pendingDelete.set(null);
-      this.editingBookmark.set(null);
-      this.tempDesc.set("");
-      this.tempCmd.set("");
-    })();
-  }
+    closeView(): void {
+        GlobalModel.showSessionView();
+        setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
+    }
 
-  confirmEdit(): void {
-    if (this.editingBookmark.get() == null) {
-      return;
+    @boundMethod
+    clearPendingDelete(): void {
+        mobx.action(() => this.pendingDelete.set(null))();
     }
-    let bm = this.getBookmark(this.editingBookmark.get());
-    mobx.action(() => {
-      this.editingBookmark.set(null);
-      bm.description = this.tempDesc.get();
-      bm.cmdstr = this.tempCmd.get();
-      this.tempDesc.set("");
-      this.tempCmd.set("");
-    })();
-    GlobalCommandRunner.editBookmark(bm.bookmarkid, bm.description, bm.cmdstr);
-  }
 
-  handleDeleteBookmark(bookmarkId: string): void {
-    if (
-      this.pendingDelete.get() == null ||
-      this.pendingDelete.get() != this.activeBookmark.get()
-    ) {
-      mobx.action(() => this.pendingDelete.set(this.activeBookmark.get()))();
-      setTimeout(this.clearPendingDelete, 2000);
-      return;
-    }
-    GlobalCommandRunner.deleteBookmark(bookmarkId);
-    this.clearPendingDelete();
-  }
-
-  getBookmark(bookmarkId: string): BookmarkType {
-    if (bookmarkId == null) {
-      return null;
-    }
-    for (let i = 0; i < this.bookmarks.length; i++) {
-      let bm = this.bookmarks[i];
-      if (bm.bookmarkid == bookmarkId) {
-        return bm;
-      }
-    }
-    return null;
-  }
-
-  getBookmarkPos(bookmarkId: string): number {
-    if (bookmarkId == null) {
-      return -1;
-    }
-    for (let i = 0; i < this.bookmarks.length; i++) {
-      let bm = this.bookmarks[i];
-      if (bm.bookmarkid == bookmarkId) {
-        return i;
-      }
-    }
-    return -1;
-  }
-
-  getActiveBookmark(): BookmarkType {
-    let activeBookmarkId = this.activeBookmark.get();
-    return this.getBookmark(activeBookmarkId);
-  }
-
-  handleEditBookmark(bookmarkId: string): void {
-    let bm = this.getBookmark(bookmarkId);
-    if (bm == null) {
-      return;
-    }
-    mobx.action(() => {
-      this.pendingDelete.set(null);
-      this.activeBookmark.set(bookmarkId);
-      this.editingBookmark.set(bookmarkId);
-      this.tempDesc.set(bm.description ?? "");
-      this.tempCmd.set(bm.cmdstr ?? "");
-    })();
-  }
-
-  handleCopyBookmark(bookmarkId: string): void {
-    let bm = this.getBookmark(bookmarkId);
-    if (bm == null) {
-      return;
-    }
-    navigator.clipboard.writeText(bm.cmdstr);
-    mobx.action(() => {
-      this.copiedIndicator.set(bm.bookmarkid);
-    })();
-    setTimeout(() => {
-      mobx.action(() => {
-        this.copiedIndicator.set(null);
-      })();
-    }, 600);
-  }
-
-  mergeBookmarks(bmArr: BookmarkType[]): void {
-    mobx.action(() => {
-      genMergeSimpleData(
-        this.bookmarks,
-        bmArr,
-        (bm: BookmarkType) => bm.bookmarkid,
-        (bm: BookmarkType) => sprintf("%05d", bm.orderidx)
-      );
-    })();
-  }
-
-  handleDocKeyDown(e: any): void {
-    if (e.code == "Escape") {
-      e.preventDefault();
-      if (this.editingBookmark.get() != null) {
-        this.cancelEdit();
-        return;
-      }
-      this.closeView();
-      return;
-    }
-    if (this.editingBookmark.get() != null) {
-      return;
-    }
-    if (e.code == "Backspace" || e.code == "Delete") {
-      if (this.activeBookmark.get() == null) {
-        return;
-      }
-      e.preventDefault();
-      this.handleDeleteBookmark(this.activeBookmark.get());
-      return;
-    }
-    if (
-      e.code == "ArrowUp" ||
-      e.code == "ArrowDown" ||
-      e.code == "PageUp" ||
-      e.code == "PageDown"
-    ) {
-      e.preventDefault();
-      if (this.bookmarks.length == 0) {
-        return;
-      }
-      let newPos = 0; // if active is null, then newPos will be 0 (select the first)
-      if (this.activeBookmark.get() != null) {
-        let amtMap = { ArrowUp: -1, ArrowDown: 1, PageUp: -10, PageDown: 10 };
-        let amt = amtMap[e.code];
-        let curIdx = this.getBookmarkPos(this.activeBookmark.get());
-        newPos = curIdx + amt;
-        if (newPos < 0) {
-          newPos = 0;
+    useBookmark(bookmarkId: string): void {
+        let bm = this.getBookmark(bookmarkId);
+        if (bm == null) {
+            return;
         }
-        if (newPos >= this.bookmarks.length) {
-          newPos = this.bookmarks.length - 1;
+        mobx.action(() => {
+            this.reset();
+            GlobalModel.showSessionView();
+            GlobalModel.inputModel.setCurLine(bm.cmdstr);
+            setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
+        })();
+    }
+
+    selectBookmark(bookmarkId: string): void {
+        let bm = this.getBookmark(bookmarkId);
+        if (bm == null) {
+            return;
         }
-      }
-      let bm = this.bookmarks[newPos];
-      mobx.action(() => {
-        this.activeBookmark.set(bm.bookmarkid);
-      })();
-      return;
+        if (this.activeBookmark.get() == bookmarkId) {
+            return;
+        }
+        mobx.action(() => {
+            this.cancelEdit();
+            this.activeBookmark.set(bookmarkId);
+        })();
     }
-    if (e.code == "Enter") {
-      if (this.activeBookmark.get() == null) {
-        return;
-      }
-      this.useBookmark(this.activeBookmark.get());
-      return;
+
+    cancelEdit(): void {
+        mobx.action(() => {
+            this.pendingDelete.set(null);
+            this.editingBookmark.set(null);
+            this.tempDesc.set("");
+            this.tempCmd.set("");
+        })();
     }
-    if (e.code == "KeyE") {
-      if (this.activeBookmark.get() == null) {
-        return;
-      }
-      e.preventDefault();
-      this.handleEditBookmark(this.activeBookmark.get());
-      return;
+
+    confirmEdit(): void {
+        if (this.editingBookmark.get() == null) {
+            return;
+        }
+        let bm = this.getBookmark(this.editingBookmark.get());
+        mobx.action(() => {
+            this.editingBookmark.set(null);
+            bm.description = this.tempDesc.get();
+            bm.cmdstr = this.tempCmd.get();
+            this.tempDesc.set("");
+            this.tempCmd.set("");
+        })();
+        GlobalCommandRunner.editBookmark(bm.bookmarkid, bm.description, bm.cmdstr);
     }
-    if (e.code == "KeyC") {
-      if (this.activeBookmark.get() == null) {
-        return;
-      }
-      e.preventDefault();
-      this.handleCopyBookmark(this.activeBookmark.get());
-      return;
+
+    handleDeleteBookmark(bookmarkId: string): void {
+        if (this.pendingDelete.get() == null || this.pendingDelete.get() != this.activeBookmark.get()) {
+            mobx.action(() => this.pendingDelete.set(this.activeBookmark.get()))();
+            setTimeout(this.clearPendingDelete, 2000);
+            return;
+        }
+        GlobalCommandRunner.deleteBookmark(bookmarkId);
+        this.clearPendingDelete();
     }
-  }
-  return;
+
+    getBookmark(bookmarkId: string): BookmarkType {
+        if (bookmarkId == null) {
+            return null;
+        }
+        for (let i = 0; i < this.bookmarks.length; i++) {
+            let bm = this.bookmarks[i];
+            if (bm.bookmarkid == bookmarkId) {
+                return bm;
+            }
+        }
+        return null;
+    }
+
+    getBookmarkPos(bookmarkId: string): number {
+        if (bookmarkId == null) {
+            return -1;
+        }
+        for (let i = 0; i < this.bookmarks.length; i++) {
+            let bm = this.bookmarks[i];
+            if (bm.bookmarkid == bookmarkId) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    getActiveBookmark(): BookmarkType {
+        let activeBookmarkId = this.activeBookmark.get();
+        return this.getBookmark(activeBookmarkId);
+    }
+
+    handleEditBookmark(bookmarkId: string): void {
+        let bm = this.getBookmark(bookmarkId);
+        if (bm == null) {
+            return;
+        }
+        mobx.action(() => {
+            this.pendingDelete.set(null);
+            this.activeBookmark.set(bookmarkId);
+            this.editingBookmark.set(bookmarkId);
+            this.tempDesc.set(bm.description ?? "");
+            this.tempCmd.set(bm.cmdstr ?? "");
+        })();
+    }
+
+    handleCopyBookmark(bookmarkId: string): void {
+        let bm = this.getBookmark(bookmarkId);
+        if (bm == null) {
+            return;
+        }
+        navigator.clipboard.writeText(bm.cmdstr);
+        mobx.action(() => {
+            this.copiedIndicator.set(bm.bookmarkid);
+        })();
+        setTimeout(() => {
+            mobx.action(() => {
+                this.copiedIndicator.set(null);
+            })();
+        }, 600);
+    }
+
+    mergeBookmarks(bmArr: BookmarkType[]): void {
+        mobx.action(() => {
+            genMergeSimpleData(
+                this.bookmarks,
+                bmArr,
+                (bm: BookmarkType) => bm.bookmarkid,
+                (bm: BookmarkType) => sprintf("%05d", bm.orderidx)
+            );
+        })();
+    }
+
+    handleDocKeyDown(e: any): void {
+        if (e.code == "Escape") {
+            e.preventDefault();
+            if (this.editingBookmark.get() != null) {
+                this.cancelEdit();
+                return;
+            }
+            this.closeView();
+            return;
+        }
+        if (this.editingBookmark.get() != null) {
+            return;
+        }
+        if (e.code == "Backspace" || e.code == "Delete") {
+            if (this.activeBookmark.get() == null) {
+                return;
+            }
+            e.preventDefault();
+            this.handleDeleteBookmark(this.activeBookmark.get());
+            return;
+        }
+        if (e.code == "ArrowUp" || e.code == "ArrowDown" || e.code == "PageUp" || e.code == "PageDown") {
+            e.preventDefault();
+            if (this.bookmarks.length == 0) {
+                return;
+            }
+            let newPos = 0; // if active is null, then newPos will be 0 (select the first)
+            if (this.activeBookmark.get() != null) {
+                let amtMap = { ArrowUp: -1, ArrowDown: 1, PageUp: -10, PageDown: 10 };
+                let amt = amtMap[e.code];
+                let curIdx = this.getBookmarkPos(this.activeBookmark.get());
+                newPos = curIdx + amt;
+                if (newPos < 0) {
+                    newPos = 0;
+                }
+                if (newPos >= this.bookmarks.length) {
+                    newPos = this.bookmarks.length - 1;
+                }
+            }
+            let bm = this.bookmarks[newPos];
+            mobx.action(() => {
+                this.activeBookmark.set(bm.bookmarkid);
+            })();
+            return;
+        }
+        if (e.code == "Enter") {
+            if (this.activeBookmark.get() == null) {
+                return;
+            }
+            this.useBookmark(this.activeBookmark.get());
+            return;
+        }
+        if (e.code == "KeyE") {
+            if (this.activeBookmark.get() == null) {
+                return;
+            }
+            e.preventDefault();
+            this.handleEditBookmark(this.activeBookmark.get());
+            return;
+        }
+        if (e.code == "KeyC") {
+            if (this.activeBookmark.get() == null) {
+                return;
+            }
+            e.preventDefault();
+            this.handleCopyBookmark(this.activeBookmark.get());
+            return;
+        }
+    }
+    return;
 }
 
 class RemotesModalModel {
-  openState: OV<boolean> = mobx.observable.box(false, {
-    name: "RemotesModalModel-isOpen",
-  });
-  selectedRemoteId: OV<string> = mobx.observable.box(null, {
-    name: "RemotesModalModel-selectedRemoteId",
-  });
-  remoteTermWrap: TermWrap;
-  remoteTermWrapFocus: OV<boolean> = mobx.observable.box(false, {
-    name: "RemotesModalModel-remoteTermWrapFocus",
-  });
-  showNoInputMsg: OV<boolean> = mobx.observable.box(false, {
-    name: "RemotesModel-showNoInputMg",
-  });
-  showNoInputTimeoutId: any = null;
-  remoteEdit: OV<RemoteEditType> = mobx.observable.box(null, {
-    name: "RemoteModal-remoteEdit",
-  });
-
-  openModal(remoteId?: string): void {
-    if (remoteId == null) {
-      let ri = GlobalModel.getCurRemoteInstance();
-      if (ri != null) {
-        remoteId = ri.remoteid;
-      } else {
-        let localRemote = GlobalModel.getLocalRemote();
-        if (localRemote != null) {
-          remoteId = localRemote.remoteid;
-        }
-      }
-    }
-    mobx.action(() => {
-      this.openState.set(true);
-      this.selectedRemoteId.set(remoteId);
-      this.remoteEdit.set(null);
-    })();
-  }
-
-  deSelectRemote(): void {
-    mobx.action(() => {
-      this.selectedRemoteId.set(null);
-      this.remoteEdit.set(null);
-    })();
-  }
-
-  openModalForEdit(redit: RemoteEditType): void {
-    mobx.action(() => {
-      this.openState.set(true);
-      this.selectedRemoteId.set(redit.remoteid);
-      this.remoteEdit.set(redit);
-    })();
-  }
-
-  selectRemote(remoteId: string): void {
-    if (this.selectedRemoteId.get() == remoteId) {
-      return;
-    }
-    mobx.action(() => {
-      this.selectedRemoteId.set(remoteId);
-      this.remoteEdit.set(null);
-    })();
-  }
-
-  @boundMethod
-  startEditAuth(): void {
-    let remoteId = this.selectedRemoteId.get();
-    if (remoteId != null) {
-      GlobalCommandRunner.openEditRemote(remoteId);
-    }
-  }
-
-  @boundMethod
-  cancelEditAuth(): void {
-    mobx.action(() => {
-      this.remoteEdit.set(null);
-      if (this.selectedRemoteId.get() == null) {
-        this.openModal();
-      }
-    })();
-  }
-
-  isOpen(): boolean {
-    return this.openState.get();
-  }
-
-  isAuthEditMode(): boolean {
-    return this.remoteEdit.get() != null;
-  }
-
-  closeModal(): void {
-    if (!this.openState.get()) {
-      return;
-    }
-    mobx.action(() => {
-      this.openState.set(false);
-      this.selectedRemoteId.set(null);
-      this.remoteEdit.set(null);
-    })();
-    setTimeout(() => GlobalModel.refocus(), 10);
-  }
-
-  disposeTerm(): void {
-    if (this.remoteTermWrap == null) {
-      return;
-    }
-    this.remoteTermWrap.dispose();
-    this.remoteTermWrap = null;
-    mobx.action(() => {
-      this.remoteTermWrapFocus.set(false);
-    })();
-  }
-
-  receiveData(
-    remoteId: string,
-    ptyPos: number,
-    ptyData: Uint8Array,
-    reason?: string
-  ) {
-    if (this.remoteTermWrap == null) {
-      return;
-    }
-    if (this.remoteTermWrap.getContextRemoteId() != remoteId) {
-      return;
-    }
-    this.remoteTermWrap.receiveData(ptyPos, ptyData);
-  }
-
-  @boundMethod
-  setRemoteTermWrapFocus(focus: boolean): void {
-    mobx.action(() => {
-      this.remoteTermWrapFocus.set(focus);
-    })();
-  }
-
-  @boundMethod
-  setShowNoInputMsg(val: boolean) {
-    mobx.action(() => {
-      if (this.showNoInputTimeoutId != null) {
-        clearTimeout(this.showNoInputTimeoutId);
-        this.showNoInputTimeoutId = null;
-      }
-      if (val) {
-        this.showNoInputMsg.set(true);
-        this.showNoInputTimeoutId = setTimeout(
-          () => this.setShowNoInputMsg(false),
-          2000
-        );
-      } else {
-        this.showNoInputMsg.set(false);
-      }
-    })();
-  }
-
-  @boundMethod
-  termKeyHandler(remoteId: string, event: any, termWrap: TermWrap): void {
-    let remote = GlobalModel.getRemote(remoteId);
-    if (remote == null) {
-      return;
-    }
-    if (remote.status != "connecting" && remote.installstatus != "connecting") {
-      this.setShowNoInputMsg(true);
-      return;
-    }
-    let inputPacket: RemoteInputPacketType = {
-      type: "remoteinput",
-      remoteid: remoteId,
-      inputdata64: btoa(event.key),
-    };
-    GlobalModel.sendInputPacket(inputPacket);
-  }
-
-  createTermWrap(elem: HTMLElement): void {
-    this.disposeTerm();
-    let remoteId = this.selectedRemoteId.get();
-    if (remoteId == null) {
-      return;
-    }
-    let termOpts = {
-      rows: RemotePtyRows,
-      cols: RemotePtyCols,
-      flexrows: false,
-      maxptysize: 64 * 1024,
-    };
-    let termWrap = new TermWrap(elem, {
-      termContext: { remoteId: remoteId },
-      usedRows: RemotePtyRows,
-      termOpts: termOpts,
-      winSize: null,
-      keyHandler: (e, termWrap) => {
-        this.termKeyHandler(remoteId, e, termWrap);
-      },
-      focusHandler: this.setRemoteTermWrapFocus.bind(this),
-      isRunning: true,
-      fontSize: GlobalModel.termFontSize.get(),
-      ptyDataSource: getTermPtyData,
-      onUpdateContentHeight: null,
+    openState: OV<boolean> = mobx.observable.box(false, {
+        name: "RemotesModalModel-isOpen",
     });
-    this.remoteTermWrap = termWrap;
-  }
+    selectedRemoteId: OV<string> = mobx.observable.box(null, {
+        name: "RemotesModalModel-selectedRemoteId",
+    });
+    remoteTermWrap: TermWrap;
+    remoteTermWrapFocus: OV<boolean> = mobx.observable.box(false, {
+        name: "RemotesModalModel-remoteTermWrapFocus",
+    });
+    showNoInputMsg: OV<boolean> = mobx.observable.box(false, {
+        name: "RemotesModel-showNoInputMg",
+    });
+    showNoInputTimeoutId: any = null;
+    remoteEdit: OV<RemoteEditType> = mobx.observable.box(null, {
+        name: "RemoteModal-remoteEdit",
+    });
+
+    openModal(remoteId?: string): void {
+        if (remoteId == null) {
+            let ri = GlobalModel.getCurRemoteInstance();
+            if (ri != null) {
+                remoteId = ri.remoteid;
+            } else {
+                let localRemote = GlobalModel.getLocalRemote();
+                if (localRemote != null) {
+                    remoteId = localRemote.remoteid;
+                }
+            }
+        }
+        mobx.action(() => {
+            this.openState.set(true);
+            this.selectedRemoteId.set(remoteId);
+            this.remoteEdit.set(null);
+        })();
+    }
+
+    deSelectRemote(): void {
+        mobx.action(() => {
+            this.selectedRemoteId.set(null);
+            this.remoteEdit.set(null);
+        })();
+    }
+
+    openModalForEdit(redit: RemoteEditType): void {
+        mobx.action(() => {
+            this.openState.set(true);
+            this.selectedRemoteId.set(redit.remoteid);
+            this.remoteEdit.set(redit);
+        })();
+    }
+
+    selectRemote(remoteId: string): void {
+        if (this.selectedRemoteId.get() == remoteId) {
+            return;
+        }
+        mobx.action(() => {
+            this.selectedRemoteId.set(remoteId);
+            this.remoteEdit.set(null);
+        })();
+    }
+
+    @boundMethod
+    startEditAuth(): void {
+        let remoteId = this.selectedRemoteId.get();
+        if (remoteId != null) {
+            GlobalCommandRunner.openEditRemote(remoteId);
+        }
+    }
+
+    @boundMethod
+    cancelEditAuth(): void {
+        mobx.action(() => {
+            this.remoteEdit.set(null);
+            if (this.selectedRemoteId.get() == null) {
+                this.openModal();
+            }
+        })();
+    }
+
+    isOpen(): boolean {
+        return this.openState.get();
+    }
+
+    isAuthEditMode(): boolean {
+        return this.remoteEdit.get() != null;
+    }
+
+    closeModal(): void {
+        if (!this.openState.get()) {
+            return;
+        }
+        mobx.action(() => {
+            this.openState.set(false);
+            this.selectedRemoteId.set(null);
+            this.remoteEdit.set(null);
+        })();
+        setTimeout(() => GlobalModel.refocus(), 10);
+    }
+
+    disposeTerm(): void {
+        if (this.remoteTermWrap == null) {
+            return;
+        }
+        this.remoteTermWrap.dispose();
+        this.remoteTermWrap = null;
+        mobx.action(() => {
+            this.remoteTermWrapFocus.set(false);
+        })();
+    }
+
+    receiveData(remoteId: string, ptyPos: number, ptyData: Uint8Array, reason?: string) {
+        if (this.remoteTermWrap == null) {
+            return;
+        }
+        if (this.remoteTermWrap.getContextRemoteId() != remoteId) {
+            return;
+        }
+        this.remoteTermWrap.receiveData(ptyPos, ptyData);
+    }
+
+    @boundMethod
+    setRemoteTermWrapFocus(focus: boolean): void {
+        mobx.action(() => {
+            this.remoteTermWrapFocus.set(focus);
+        })();
+    }
+
+    @boundMethod
+    setShowNoInputMsg(val: boolean) {
+        mobx.action(() => {
+            if (this.showNoInputTimeoutId != null) {
+                clearTimeout(this.showNoInputTimeoutId);
+                this.showNoInputTimeoutId = null;
+            }
+            if (val) {
+                this.showNoInputMsg.set(true);
+                this.showNoInputTimeoutId = setTimeout(() => this.setShowNoInputMsg(false), 2000);
+            } else {
+                this.showNoInputMsg.set(false);
+            }
+        })();
+    }
+
+    @boundMethod
+    termKeyHandler(remoteId: string, event: any, termWrap: TermWrap): void {
+        let remote = GlobalModel.getRemote(remoteId);
+        if (remote == null) {
+            return;
+        }
+        if (remote.status != "connecting" && remote.installstatus != "connecting") {
+            this.setShowNoInputMsg(true);
+            return;
+        }
+        let inputPacket: RemoteInputPacketType = {
+            type: "remoteinput",
+            remoteid: remoteId,
+            inputdata64: btoa(event.key),
+        };
+        GlobalModel.sendInputPacket(inputPacket);
+    }
+
+    createTermWrap(elem: HTMLElement): void {
+        this.disposeTerm();
+        let remoteId = this.selectedRemoteId.get();
+        if (remoteId == null) {
+            return;
+        }
+        let termOpts = {
+            rows: RemotePtyRows,
+            cols: RemotePtyCols,
+            flexrows: false,
+            maxptysize: 64 * 1024,
+        };
+        let termWrap = new TermWrap(elem, {
+            termContext: { remoteId: remoteId },
+            usedRows: RemotePtyRows,
+            termOpts: termOpts,
+            winSize: null,
+            keyHandler: (e, termWrap) => {
+                this.termKeyHandler(remoteId, e, termWrap);
+            },
+            focusHandler: this.setRemoteTermWrapFocus.bind(this),
+            isRunning: true,
+            fontSize: GlobalModel.termFontSize.get(),
+            ptyDataSource: getTermPtyData,
+            onUpdateContentHeight: null,
+        });
+        this.remoteTermWrap = termWrap;
+    }
 }
 
 class Model {
-  clientId: string;
-  activeSessionId: OV<string> = mobx.observable.box(null, {
-    name: "activeSessionId",
-  });
-  sessionListLoaded: OV<boolean> = mobx.observable.box(false, {
-    name: "sessionListLoaded",
-  });
-  sessionList: OArr<Session> = mobx.observable.array([], {
-    name: "SessionList",
-    deep: false,
-  });
-  screenMap: OMap<string, Screen> = mobx.observable.map(
-    {},
-    { name: "ScreenMap", deep: false }
-  );
-  ws: WSControl;
-  remotes: OArr<RemoteType> = mobx.observable.array([], {
-    name: "remotes",
-    deep: false,
-  });
-  remotesLoaded: OV<boolean> = mobx.observable.box(false, {
-    name: "remotesLoaded",
-  });
-  screenLines: OMap<string, ScreenLines> = mobx.observable.map(
-    {},
-    { name: "screenLines", deep: false }
-  ); // key = "sessionid/screenid" (screenlines)
-  termUsedRowsCache: Record<string, number> = {}; // key = "screenid/lineid"
-  debugCmds: number = 0;
-  debugScreen: OV<boolean> = mobx.observable.box(false);
-  localServerRunning: OV<boolean>;
-  authKey: string;
-  isDev: boolean;
-  activeMainView: OV<"session" | "history" | "bookmarks" | "webshare"> =
-    mobx.observable.box("session", { name: "activeMainView" });
-  termFontSize: CV<number>;
-  alertMessage: OV<AlertMessageType> = mobx.observable.box(null, {
-    name: "alertMessage",
-  });
-  alertPromiseResolver: (result: boolean) => void;
-  welcomeModalOpen: OV<boolean> = mobx.observable.box(false, {
-    name: "welcomeModalOpen",
-  });
-  screenSettingsModal: OV<{ sessionId: string; screenId: string }> =
-    mobx.observable.box(null, { name: "screenSettingsModal" });
-  sessionSettingsModal: OV<string> = mobx.observable.box(null, {
-    name: "sessionSettingsModal",
-  });
-  clientSettingsModal: OV<boolean> = mobx.observable.box(false, {
-    name: "clientSettingsModal",
-  });
-  lineSettingsModal: OV<number> = mobx.observable.box(null, {
-    name: "lineSettingsModal",
-  }); // linenum
-  remotesModalModel: RemotesModalModel;
-
-  inputModel: InputModel;
-  bookmarksModel: BookmarksModel;
-  historyViewModel: HistoryViewModel;
-  clientData: OV<ClientDataType> = mobx.observable.box(null, {
-    name: "clientData",
-  });
-  showLinks: OV<boolean> = mobx.observable.box(true, {
-    name: "model-showLinks",
-  });
-
-  constructor() {
-    this.clientId = getApi().getId();
-    this.isDev = getApi().getIsDev();
-    this.authKey = getApi().getAuthKey();
-    this.ws = new WSControl(
-      this.getBaseWsHostPort(),
-      this.clientId,
-      this.authKey,
-      (message: any) => this.runUpdate(message, false)
-    );
-    this.ws.reconnect();
-    this.inputModel = new InputModel();
-    this.bookmarksModel = new BookmarksModel();
-    this.historyViewModel = new HistoryViewModel();
-    this.remotesModalModel = new RemotesModalModel();
-    let isLocalServerRunning = getApi().getLocalServerStatus();
-    this.localServerRunning = mobx.observable.box(isLocalServerRunning, {
-      name: "model-local-server-running",
+    clientId: string;
+    activeSessionId: OV<string> = mobx.observable.box(null, {
+        name: "activeSessionId",
     });
-    this.termFontSize = mobx.computed(() => {
-      let cdata = this.clientData.get();
-      if (
-        cdata == null ||
-        cdata.feopts == null ||
-        cdata.feopts.termfontsize == null
-      ) {
-        return DefaultTermFontSize;
-      }
-      let fontSize = Math.ceil(cdata.feopts.termfontsize);
-      if (fontSize < MinFontSize) {
-        return MinFontSize;
-      }
-      if (fontSize > MaxFontSize) {
-        return MaxFontSize;
-      }
-      return fontSize;
+    sessionListLoaded: OV<boolean> = mobx.observable.box(false, {
+        name: "sessionListLoaded",
     });
-    getApi().onTCmd(this.onTCmd.bind(this));
-    getApi().onICmd(this.onICmd.bind(this));
-    getApi().onLCmd(this.onLCmd.bind(this));
-    getApi().onHCmd(this.onHCmd.bind(this));
-    getApi().onMetaArrowUp(this.onMetaArrowUp.bind(this));
-    getApi().onMetaArrowDown(this.onMetaArrowDown.bind(this));
-    getApi().onMetaPageUp(this.onMetaPageUp.bind(this));
-    getApi().onMetaPageDown(this.onMetaPageDown.bind(this));
-    getApi().onBracketCmd(this.onBracketCmd.bind(this));
-    getApi().onDigitCmd(this.onDigitCmd.bind(this));
-    getApi().onLocalServerStatusChange(
-      this.onLocalServerStatusChange.bind(this)
-    );
-    document.addEventListener("keydown", this.docKeyDownHandler.bind(this));
-    document.addEventListener(
-      "selectionchange",
-      this.docSelectionChangeHandler.bind(this)
-    );
-    setTimeout(() => this.getClientDataLoop(1), 10);
-  }
-
-  needsTos(): boolean {
-    let cdata = this.clientData.get();
-    if (cdata == null) {
-      return false;
-    }
-    return cdata.clientopts == null || !cdata.clientopts.acceptedtos;
-  }
-
-  refreshClient(): void {
-    getApi().reloadWindow();
-  }
-
-  refocus() {
-    // givefocus() give back focus to cmd or input
-    let activeScreen = this.getActiveScreen();
-    if (screen == null) {
-      return;
-    }
-    activeScreen.giveFocus();
-  }
-
-  getWebSharedScreens(): Screen[] {
-    let rtn: Screen[] = [];
-    for (let screen of this.screenMap.values()) {
-      if (screen.shareMode.get() == "web") {
-        rtn.push(screen);
-      }
-    }
-    return rtn;
-  }
-
-  getHasClientStop(): boolean {
-    if (this.clientData.get() == null) {
-      return true;
-    }
-    let cdata = this.clientData.get();
-    if (cdata.cmdstoretype == "session") {
-      return true;
-    }
-    return false;
-  }
-
-  showAlert(alertMessage: AlertMessageType): Promise<boolean> {
-    mobx.action(() => {
-      this.alertMessage.set(alertMessage);
-    })();
-    let prtn = new Promise<boolean>((resolve, reject) => {
-      this.alertPromiseResolver = resolve;
+    sessionList: OArr<Session> = mobx.observable.array([], {
+        name: "SessionList",
+        deep: false,
     });
-    return prtn;
-  }
+    screenMap: OMap<string, Screen> = mobx.observable.map({}, { name: "ScreenMap", deep: false });
+    ws: WSControl;
+    remotes: OArr<RemoteType> = mobx.observable.array([], {
+        name: "remotes",
+        deep: false,
+    });
+    remotesLoaded: OV<boolean> = mobx.observable.box(false, {
+        name: "remotesLoaded",
+    });
+    screenLines: OMap<string, ScreenLines> = mobx.observable.map({}, { name: "screenLines", deep: false }); // key = "sessionid/screenid" (screenlines)
+    termUsedRowsCache: Record<string, number> = {}; // key = "screenid/lineid"
+    debugCmds: number = 0;
+    debugScreen: OV<boolean> = mobx.observable.box(false);
+    localServerRunning: OV<boolean>;
+    authKey: string;
+    isDev: boolean;
+    activeMainView: OV<"session" | "history" | "bookmarks" | "webshare"> = mobx.observable.box("session", {
+        name: "activeMainView",
+    });
+    termFontSize: CV<number>;
+    alertMessage: OV<AlertMessageType> = mobx.observable.box(null, {
+        name: "alertMessage",
+    });
+    alertPromiseResolver: (result: boolean) => void;
+    welcomeModalOpen: OV<boolean> = mobx.observable.box(false, {
+        name: "welcomeModalOpen",
+    });
+    screenSettingsModal: OV<{ sessionId: string; screenId: string }> = mobx.observable.box(null, {
+        name: "screenSettingsModal",
+    });
+    sessionSettingsModal: OV<string> = mobx.observable.box(null, {
+        name: "sessionSettingsModal",
+    });
+    clientSettingsModal: OV<boolean> = mobx.observable.box(false, {
+        name: "clientSettingsModal",
+    });
+    lineSettingsModal: OV<number> = mobx.observable.box(null, {
+        name: "lineSettingsModal",
+    }); // linenum
+    remotesModalModel: RemotesModalModel;
 
-  cancelAlert(): void {
-    mobx.action(() => {
-      this.alertMessage.set(null);
-    })();
-    if (this.alertPromiseResolver != null) {
-      this.alertPromiseResolver(false);
-      this.alertPromiseResolver = null;
-    }
-  }
+    inputModel: InputModel;
+    bookmarksModel: BookmarksModel;
+    historyViewModel: HistoryViewModel;
+    clientData: OV<ClientDataType> = mobx.observable.box(null, {
+        name: "clientData",
+    });
+    showLinks: OV<boolean> = mobx.observable.box(true, {
+        name: "model-showLinks",
+    });
 
-  confirmAlert(): void {
-    mobx.action(() => {
-      this.alertMessage.set(null);
-    })();
-    if (this.alertPromiseResolver != null) {
-      this.alertPromiseResolver(true);
-      this.alertPromiseResolver = null;
-    }
-  }
-
-  showSessionView(): void {
-    mobx.action(() => {
-      this.activeMainView.set("session");
-    })();
-  }
-
-  showWebShareView(): void {
-    mobx.action(() => {
-      this.activeMainView.set("webshare");
-    })();
-  }
-
-  getBaseHostPort(): string {
-    if (this.isDev) {
-      return DevServerEndpoint;
-    }
-    return ProdServerEndpoint;
-  }
-
-  setTermFontSize(fontSize: number) {
-    if (fontSize < MinFontSize) {
-      fontSize = MinFontSize;
-    }
-    if (fontSize > MaxFontSize) {
-      fontSize = MaxFontSize;
-    }
-    mobx.action(() => {
-      this.termFontSize.set(fontSize);
-    })();
-  }
-
-  getBaseWsHostPort(): string {
-    if (this.isDev) {
-      return DevServerWsEndpoint;
-    }
-    return ProdServerWsEndpoint;
-  }
-
-  getFetchHeaders(): Record<string, string> {
-    return {
-      "x-authkey": this.authKey,
-    };
-  }
-
-  docSelectionChangeHandler(e: any) {
-    // nothing for now
-  }
-
-  docKeyDownHandler(e: any) {
-    if (isModKeyPress(e)) {
-      return;
-    }
-    if (this.alertMessage.get() != null) {
-      if (e.code == "Escape") {
-        e.preventDefault();
-        this.cancelAlert();
-        return;
-      }
-      if (e.code == "Enter") {
-        e.preventDefault();
-        this.confirmAlert();
-        return;
-      }
-      return;
-    }
-    if (this.activeMainView.get() == "bookmarks") {
-      this.bookmarksModel.handleDocKeyDown(e);
-      return;
-    }
-    if (this.activeMainView.get() == "history") {
-      this.historyViewModel.handleDocKeyDown(e);
-      return;
-    }
-    if (e.code == "Escape") {
-      e.preventDefault();
-      if (this.activeMainView.get() == "webshare") {
-        this.showSessionView();
-        return;
-      }
-      if (this.clearModals()) {
-        return;
-      }
-      let inputModel = this.inputModel;
-      inputModel.toggleInfoMsg();
-      if (inputModel.inputMode.get() != null) {
-        inputModel.resetInputMode();
-      }
-      return;
-    }
-    if (e.code == "KeyB" && e.getModifierState("Meta")) {
-      e.preventDefault();
-      GlobalCommandRunner.bookmarksView();
-    }
-  }
-
-  clearModals(): boolean {
-    let didSomething = false;
-    mobx.action(() => {
-      if (GlobalModel.screenSettingsModal.get()) {
-        GlobalModel.screenSettingsModal.set(null);
-        didSomething = true;
-      }
-      if (GlobalModel.sessionSettingsModal.get()) {
-        GlobalModel.sessionSettingsModal.set(null);
-        didSomething = true;
-      }
-      if (GlobalModel.screenSettingsModal.get()) {
-        GlobalModel.screenSettingsModal.set(null);
-        didSomething = true;
-      }
-      if (GlobalModel.remotesModalModel.isOpen()) {
-        GlobalModel.remotesModalModel.closeModal();
-        didSomething = true;
-      }
-      if (GlobalModel.clientSettingsModal.get()) {
-        GlobalModel.clientSettingsModal.set(false);
-        didSomething = true;
-      }
-      if (GlobalModel.lineSettingsModal.get()) {
-        GlobalModel.lineSettingsModal.set(null);
-        didSomething = true;
-      }
-      if (GlobalModel.welcomeModalOpen.get()) {
-        GlobalModel.welcomeModalOpen.set(false);
-        didSomething = true;
-      }
-    })();
-    return didSomething;
-  }
-
-  restartLocalServer(): void {
-    getApi().restartLocalServer();
-  }
-
-  getLocalRemote(): RemoteType {
-    for (let i = 0; i < this.remotes.length; i++) {
-      if (this.remotes[i].local) {
-        return this.remotes[i];
-      }
-    }
-    return null;
-  }
-
-  getCurRemoteInstance(): RemoteInstanceType {
-    let screen = this.getActiveScreen();
-    if (screen == null) {
-      return null;
-    }
-    return screen.getCurRemoteInstance();
-  }
-
-  onLocalServerStatusChange(status: boolean): void {
-    mobx.action(() => {
-      this.localServerRunning.set(status);
-    })();
-  }
-
-  getContentHeight(context: RendererContext): number {
-    let key = context.screenId + "/" + context.lineId;
-    return this.termUsedRowsCache[key];
-  }
-
-  setContentHeight(context: RendererContext, height: number): void {
-    let key = context.screenId + "/" + context.lineId;
-    this.termUsedRowsCache[key] = height;
-    GlobalCommandRunner.setTermUsedRows(context, height);
-  }
-
-  contextScreen(e: any, screenId: string) {
-    getApi().contextScreen({ screenId: screenId }, { x: e.x, y: e.y });
-  }
-
-  contextEditMenu(e: any, opts: ContextMenuOpts) {
-    getApi().contextEditMenu({ x: e.x, y: e.y }, opts);
-  }
-
-  getUIContext(): UIContextType {
-    let rtn: UIContextType = {
-      sessionid: null,
-      screenid: null,
-      remote: null,
-      winsize: null,
-      linenum: null,
-      build: VERSION + " " + BUILD,
-    };
-    let session = this.getActiveSession();
-    if (session != null) {
-      rtn.sessionid = session.sessionId;
-      let screen = session.getActiveScreen();
-      if (screen != null) {
-        rtn.screenid = screen.screenId;
-        rtn.remote = screen.curRemote.get();
-        rtn.winsize = { rows: screen.lastRows, cols: screen.lastCols };
-        rtn.linenum = screen.selectedLine.get();
-      }
-    }
-    return rtn;
-  }
-
-  onTCmd(e: any, mods: KeyModsType) {
-    GlobalCommandRunner.createNewScreen();
-  }
-
-  onICmd(e: any, mods: KeyModsType) {
-    this.inputModel.giveFocus();
-  }
-
-  onLCmd(e: any, mods: KeyModsType) {
-    let screen = this.getActiveScreen();
-    if (screen != null) {
-      GlobalCommandRunner.screenSetFocus("cmd");
-    }
-  }
-
-  onHCmd(e: any, mods: KeyModsType) {
-    GlobalModel.historyViewModel.reSearch();
-  }
-
-  getFocusedLine(): LineFocusType {
-    if (this.inputModel.hasFocus()) {
-      return { cmdInputFocus: true };
-    }
-    let lineElem: any = document.activeElement.closest(".line[data-lineid]");
-    if (lineElem == null) {
-      return { cmdInputFocus: false };
-    }
-    let lineNum = parseInt(lineElem.dataset.linenum);
-    return {
-      cmdInputFocus: false,
-      lineid: lineElem.dataset.lineid,
-      linenum: isNaN(lineNum) ? null : lineNum,
-      screenid: lineElem.dataset.screenid,
-    };
-  }
-
-  cmdStatusUpdate(
-    screenId: string,
-    lineId: string,
-    origStatus: string,
-    newStatus: string
-  ) {
-    let wasRunning = cmdStatusIsRunning(origStatus);
-    let isRunning = cmdStatusIsRunning(newStatus);
-    if (wasRunning && !isRunning) {
-      // console.log("cmd status", screenId, lineId, origStatus, "=>", newStatus);
-      let ptr = this.getActiveLine(screenId, lineId);
-      if (ptr != null) {
-        let screen = ptr.screen;
-        let renderer = screen.getRenderer(lineId);
-        if (renderer != null) {
-          renderer.setIsDone();
-        }
-        let term = screen.getTermWrap(lineId);
-        if (term != null) {
-          term.cmdDone();
-        }
-      }
-    }
-  }
-
-  onMetaPageUp(): void {
-    GlobalCommandRunner.screenSelectLine("-1");
-  }
-
-  onMetaPageDown(): void {
-    GlobalCommandRunner.screenSelectLine("+1");
-  }
-
-  onMetaArrowUp(): void {
-    GlobalCommandRunner.screenSelectLine("-1");
-  }
-
-  onMetaArrowDown(): void {
-    GlobalCommandRunner.screenSelectLine("+1");
-  }
-
-  onBracketCmd(e: any, arg: { relative: number }, mods: KeyModsType) {
-    if (arg.relative == 1) {
-      GlobalCommandRunner.switchScreen("+");
-    } else if (arg.relative == -1) {
-      GlobalCommandRunner.switchScreen("-");
-    }
-  }
-
-  onDigitCmd(e: any, arg: { digit: number }, mods: KeyModsType) {
-    if (mods.meta && mods.ctrl) {
-      GlobalCommandRunner.switchSession(String(arg.digit));
-      return;
-    }
-    GlobalCommandRunner.switchScreen(String(arg.digit));
-  }
-
-  isConnected(): boolean {
-    return this.ws.open.get();
-  }
-
-  runUpdate(genUpdate: UpdateMessage, interactive: boolean) {
-    mobx.action(() => {
-      let oldContext = this.getUIContext();
-      try {
-        this.runUpdate_internal(genUpdate, oldContext, interactive);
-      } catch (e) {
-        console.log("error running update", e, genUpdate);
-        throw e;
-      }
-      let newContext = this.getUIContext();
-      if (
-        oldContext.sessionid != newContext.sessionid ||
-        oldContext.screenid != newContext.screenid
-      ) {
-        this.inputModel.resetInput();
-      } else if (
-        remotePtrToString(oldContext.remote) !=
-        remotePtrToString(newContext.remote)
-      ) {
-        this.inputModel.resetHistory();
-      }
-    })();
-  }
-
-  runUpdate_internal(
-    genUpdate: UpdateMessage,
-    uiContext: UIContextType,
-    interactive: boolean
-  ) {
-    if ("ptydata64" in genUpdate) {
-      let ptyMsg: PtyDataUpdateType = genUpdate;
-      if (isBlank(ptyMsg.remoteid)) {
-        // regular update
-        this.updatePtyData(ptyMsg);
-      } else {
-        // remote update
-        let ptyData = base64ToArray(ptyMsg.ptydata64);
-        this.remotesModalModel.receiveData(
-          ptyMsg.remoteid,
-          ptyMsg.ptypos,
-          ptyData
+    constructor() {
+        this.clientId = getApi().getId();
+        this.isDev = getApi().getIsDev();
+        this.authKey = getApi().getAuthKey();
+        this.ws = new WSControl(this.getBaseWsHostPort(), this.clientId, this.authKey, (message: any) =>
+            this.runUpdate(message, false)
         );
-      }
-      return;
+        this.ws.reconnect();
+        this.inputModel = new InputModel();
+        this.bookmarksModel = new BookmarksModel();
+        this.historyViewModel = new HistoryViewModel();
+        this.remotesModalModel = new RemotesModalModel();
+        let isLocalServerRunning = getApi().getLocalServerStatus();
+        this.localServerRunning = mobx.observable.box(isLocalServerRunning, {
+            name: "model-local-server-running",
+        });
+        this.termFontSize = mobx.computed(() => {
+            let cdata = this.clientData.get();
+            if (cdata == null || cdata.feopts == null || cdata.feopts.termfontsize == null) {
+                return DefaultTermFontSize;
+            }
+            let fontSize = Math.ceil(cdata.feopts.termfontsize);
+            if (fontSize < MinFontSize) {
+                return MinFontSize;
+            }
+            if (fontSize > MaxFontSize) {
+                return MaxFontSize;
+            }
+            return fontSize;
+        });
+        getApi().onTCmd(this.onTCmd.bind(this));
+        getApi().onICmd(this.onICmd.bind(this));
+        getApi().onLCmd(this.onLCmd.bind(this));
+        getApi().onHCmd(this.onHCmd.bind(this));
+        getApi().onMetaArrowUp(this.onMetaArrowUp.bind(this));
+        getApi().onMetaArrowDown(this.onMetaArrowDown.bind(this));
+        getApi().onMetaPageUp(this.onMetaPageUp.bind(this));
+        getApi().onMetaPageDown(this.onMetaPageDown.bind(this));
+        getApi().onBracketCmd(this.onBracketCmd.bind(this));
+        getApi().onDigitCmd(this.onDigitCmd.bind(this));
+        getApi().onLocalServerStatusChange(this.onLocalServerStatusChange.bind(this));
+        document.addEventListener("keydown", this.docKeyDownHandler.bind(this));
+        document.addEventListener("selectionchange", this.docSelectionChangeHandler.bind(this));
+        setTimeout(() => this.getClientDataLoop(1), 10);
     }
-    let update: ModelUpdateType = genUpdate;
-    if ("screens" in update) {
-      if (update.connect) {
-        this.screenMap.clear();
-      }
-      let mods = genMergeDataMap(
-        this.screenMap,
-        update.screens,
-        (s: Screen) => s.screenId,
-        (sdata: ScreenDataType) => sdata.screenid,
-        (sdata: ScreenDataType) => new Screen(sdata)
-      );
-      for (let i = 0; i < mods.removed.length; i++) {
-        this.removeScreenLinesByScreenId(mods.removed[i]);
-      }
-    }
-    if ("sessions" in update || "activesessionid" in update) {
-      if (update.connect) {
-        this.sessionList.clear();
-      }
-      let [oldActiveSessionId, oldActiveScreenId] = this.getActiveIds();
-      genMergeData(
-        this.sessionList,
-        update.sessions,
-        (s: Session) => s.sessionId,
-        (sdata: SessionDataType) => sdata.sessionid,
-        (sdata: SessionDataType) => new Session(sdata),
-        (s: Session) => s.sessionIdx.get()
-      );
-      if ("activesessionid" in update) {
-        let newSessionId = update.activesessionid;
-        if (this.activeSessionId.get() != newSessionId) {
-          this.activeSessionId.set(newSessionId);
+
+    needsTos(): boolean {
+        let cdata = this.clientData.get();
+        if (cdata == null) {
+            return false;
         }
-      }
-      let [newActiveSessionId, newActiveScreenId] = this.getActiveIds();
-      if (
-        oldActiveSessionId != newActiveSessionId ||
-        oldActiveScreenId != newActiveScreenId
-      ) {
-        this.activeMainView.set("session");
-        this.deactivateScreenLines();
-        this.ws.watchScreen(newActiveSessionId, newActiveScreenId);
-      }
+        return cdata.clientopts == null || !cdata.clientopts.acceptedtos;
     }
-    if ("line" in update) {
-      this.addLineCmd(update.line, update.cmd, interactive);
-    } else if ("cmd" in update) {
-      this.updateCmd(update.cmd);
-    }
-    if ("lines" in update) {
-      for (let i = 0; i < update.lines.length; i++) {
-        this.addLineCmd(update.lines[i], null, interactive);
-      }
-    }
-    if ("screenlines" in update) {
-      this.updateScreenLines(update.screenlines, false);
-    }
-    if ("remotes" in update) {
-      if (update.connect) {
-        this.remotes.clear();
-      }
-      this.updateRemotes(update.remotes);
-    }
-    if ("mainview" in update) {
-      if (update.mainview == "bookmarks") {
-        this.bookmarksModel.showBookmarksView(
-          update.bookmarks,
-          update.selectedbookmark
-        );
-      } else if (update.mainview == "session") {
-        this.activeMainView.set("session");
-      } else if (update.mainview == "history") {
-        this.historyViewModel.showHistoryView(update.historyviewdata);
-      } else {
-        console.log("invalid mainview in update:", update.mainview);
-      }
-    } else if ("bookmarks" in update) {
-      this.bookmarksModel.mergeBookmarks(update.bookmarks);
-    }
-    if ("clientdata" in update) {
-      this.clientData.set(update.clientdata);
-    }
-    if (interactive && "info" in update) {
-      let info: InfoType = update.info;
-      this.inputModel.flashInfoMsg(info, info.timeoutms);
-    }
-    if (interactive && "remoteview" in update) {
-      let rview: RemoteViewType = update.remoteview;
-      if (rview.remoteshowall) {
-        this.remotesModalModel.openModal();
-      } else if (rview.remoteedit != null) {
-        this.remotesModalModel.openModalForEdit(rview.remoteedit);
-      } else if (rview.ptyremoteid) {
-        this.remotesModalModel.openModal(rview.ptyremoteid);
-      }
-    }
-    if ("cmdline" in update) {
-      this.inputModel.updateCmdLine(update.cmdline);
-    }
-    if (interactive && "history" in update) {
-      if (
-        uiContext.sessionid == update.history.sessionid &&
-        uiContext.screenid == update.history.screenid
-      ) {
-        this.inputModel.setHistoryInfo(update.history);
-      }
-    }
-    if ("connect" in update) {
-      this.sessionListLoaded.set(true);
-      this.remotesLoaded.set(true);
-    }
-    // console.log("run-update>", Date.now(), interactive, update);
-  }
 
-  updateRemotes(remotes: RemoteType[]): void {
-    genMergeSimpleData(this.remotes, remotes, (r) => r.remoteid, null);
-  }
-
-  getActiveSession(): Session {
-    return this.getSessionById(this.activeSessionId.get());
-  }
-
-  getSessionNames(): Record<string, string> {
-    let rtn: Record<string, string> = {};
-    for (let i = 0; i < this.sessionList.length; i++) {
-      let session = this.sessionList[i];
-      rtn[session.sessionId] = session.name.get();
+    refreshClient(): void {
+        getApi().reloadWindow();
     }
-    return rtn;
-  }
 
-  getScreenNames(): Record<string, string> {
-    let rtn: Record<string, string> = {};
-    for (let screen of this.screenMap.values()) {
-      rtn[screen.screenId] = screen.name.get();
-    }
-    return rtn;
-  }
-
-  getSessionById(sessionId: string): Session {
-    if (sessionId == null) {
-      return null;
-    }
-    for (let i = 0; i < this.sessionList.length; i++) {
-      if (this.sessionList[i].sessionId == sessionId) {
-        return this.sessionList[i];
-      }
-    }
-    return null;
-  }
-
-  deactivateScreenLines() {
-    mobx.action(() => {
-      this.screenLines.clear();
-    })();
-  }
-
-  getScreenLinesById(screenId: string): ScreenLines {
-    return this.screenLines.get(screenId);
-  }
-
-  updateScreenLines(slines: ScreenLinesType, load: boolean) {
-    mobx.action(() => {
-      let existingWin = this.screenLines.get(slines.screenid);
-      if (existingWin == null) {
-        if (!load) {
-          console.log(
-            "cannot update screen-lines that does not exist",
-            slines.screenid
-          );
-          return;
+    refocus() {
+        // givefocus() give back focus to cmd or input
+        let activeScreen = this.getActiveScreen();
+        if (screen == null) {
+            return;
         }
-        let newWindow = new ScreenLines(slines.screenid);
-        this.screenLines.set(slines.screenid, newWindow);
-        newWindow.updateData(slines, load);
-        return;
-      } else {
-        existingWin.updateData(slines, load);
-        existingWin.loaded.set(true);
-      }
-    })();
-  }
-
-  removeScreenLinesByScreenId(screenId: string) {
-    mobx.action(() => {
-      this.screenLines.delete(screenId);
-    })();
-  }
-
-  getScreenById(sessionId: string, screenId: string): Screen {
-    return this.screenMap.get(screenId);
-  }
-
-  getScreenById_single(screenId: string): Screen {
-    return this.screenMap.get(screenId);
-  }
-
-  getSessionScreens(sessionId: string): Screen[] {
-    let rtn: Screen[] = [];
-    for (let screen of this.screenMap.values()) {
-      if (screen.sessionId == sessionId) {
-        rtn.push(screen);
-      }
+        activeScreen.giveFocus();
     }
-    return rtn;
-  }
 
-  getScreenLinesForActiveScreen(): ScreenLines {
-    let screen = this.getActiveScreen();
-    if (screen == null) {
-      return null;
+    getWebSharedScreens(): Screen[] {
+        let rtn: Screen[] = [];
+        for (let screen of this.screenMap.values()) {
+            if (screen.shareMode.get() == "web") {
+                rtn.push(screen);
+            }
+        }
+        return rtn;
     }
-    return this.screenLines.get(screen.screenId);
-  }
 
-  getActiveScreen(): Screen {
-    let session = this.getActiveSession();
-    if (session == null) {
-      return null;
+    getHasClientStop(): boolean {
+        if (this.clientData.get() == null) {
+            return true;
+        }
+        let cdata = this.clientData.get();
+        if (cdata.cmdstoretype == "session") {
+            return true;
+        }
+        return false;
     }
-    return session.getActiveScreen();
-  }
 
-  addLineCmd(line: LineType, cmd: CmdDataType, interactive: boolean) {
-    let slines = this.getScreenLinesById(line.screenid);
-    if (slines == null) {
-      return;
-    }
-    slines.addLineCmd(line, cmd, interactive);
-  }
-
-  updateCmd(cmd: CmdDataType) {
-    let slines = this.screenLines.get(cmd.screenid);
-    if (slines != null) {
-      slines.updateCmd(cmd);
-    }
-  }
-
-  isInfoUpdate(update: UpdateMessage): boolean {
-    if (update == null || "ptydata64" in update) {
-      return false;
-    }
-    return update.info != null || update.history != null;
-  }
-
-  getClientDataLoop(loopNum: number): void {
-    this.getClientData();
-    let clientStop = this.getHasClientStop();
-    if (this.clientData.get() != null && !clientStop) {
-      return;
-    }
-    let timeoutMs = 1000;
-    if (!clientStop && loopNum > 5) {
-      timeoutMs = 3000;
-    }
-    if (!clientStop && loopNum > 10) {
-      timeoutMs = 10000;
-    }
-    if (!clientStop && loopNum > 15) {
-      timeoutMs = 30000;
-    }
-    setTimeout(() => this.getClientDataLoop(loopNum + 1), timeoutMs);
-  }
-
-  getClientData(): void {
-    let url = sprintf(GlobalModel.getBaseHostPort() + "/api/get-client-data");
-    let fetchHeaders = this.getFetchHeaders();
-    fetch(url, { method: "post", body: null, headers: fetchHeaders })
-      .then((resp) => handleJsonFetchResponse(url, resp))
-      .then((data) => {
+    showAlert(alertMessage: AlertMessageType): Promise<boolean> {
         mobx.action(() => {
-          let clientData: ClientDataType = data.data;
-          this.clientData.set(clientData);
+            this.alertMessage.set(alertMessage);
         })();
-      })
-      .catch((err) => {
-        this.errorHandler("calling get-client-data", err, true);
-      });
-  }
-
-  submitCommandPacket(
-    cmdPk: FeCmdPacketType,
-    interactive: boolean
-  ): Promise<CommandRtnType> {
-    if (this.debugCmds > 0) {
-      console.log("[cmd]", cmdPacketString(cmdPk));
-      if (this.debugCmds > 1) {
-        console.trace();
-      }
+        let prtn = new Promise<boolean>((resolve, reject) => {
+            this.alertPromiseResolver = resolve;
+        });
+        return prtn;
     }
-    let url = sprintf(GlobalModel.getBaseHostPort() + "/api/run-command");
-    let fetchHeaders = this.getFetchHeaders();
-    let prtn = fetch(url, {
-      method: "post",
-      body: JSON.stringify(cmdPk),
-      headers: fetchHeaders,
-    })
-      .then((resp) => handleJsonFetchResponse(url, resp))
-      .then((data) => {
+
+    cancelAlert(): void {
         mobx.action(() => {
-          let update = data.data;
-          if (update != null) {
-            this.runUpdate(update, interactive);
-          }
-          if (interactive && !this.isInfoUpdate(update)) {
-            GlobalModel.inputModel.clearInfoMsg(true);
-          }
+            this.alertMessage.set(null);
         })();
-        return { success: true };
-      })
-      .catch((err) => {
-        this.errorHandler("calling run-command", err, interactive);
-        let errMessage = "error running command";
-        if (err != null && !isBlank(err.message)) {
-          errMessage = err.message;
+        if (this.alertPromiseResolver != null) {
+            this.alertPromiseResolver(false);
+            this.alertPromiseResolver = null;
         }
-        return { success: false, error: errMessage };
-      });
-    return prtn;
-  }
-
-  submitCommand(
-    metaCmd: string,
-    metaSubCmd: string,
-    args: string[],
-    kwargs: Record<string, string>,
-    interactive: boolean
-  ): Promise<CommandRtnType> {
-    let pk: FeCmdPacketType = {
-      type: "fecmd",
-      metacmd: metaCmd,
-      metasubcmd: metaSubCmd,
-      args: args,
-      kwargs: Object.assign({}, kwargs),
-      uicontext: this.getUIContext(),
-      interactive: interactive,
-    };
-    // console.log("CMD", pk.metacmd + (pk.metasubcmd != null ? ":" + pk.metasubcmd : ""), pk.args, pk.kwargs, pk.interactive);
-    return this.submitCommandPacket(pk, interactive);
-  }
-
-  submitRawCommand(
-    cmdStr: string,
-    addToHistory: boolean,
-    interactive: boolean
-  ): Promise<CommandRtnType> {
-    let pk: FeCmdPacketType = {
-      type: "fecmd",
-      metacmd: "eval",
-      args: [cmdStr],
-      kwargs: null,
-      uicontext: this.getUIContext(),
-      interactive: interactive,
-      rawstr: cmdStr,
-    };
-    if (!addToHistory) {
-      pk.kwargs["nohist"] = "1";
     }
-    return this.submitCommandPacket(pk, interactive);
-  }
 
-  // returns [sessionId, screenId]
-  getActiveIds(): [string, string] {
-    let activeSession = this.getActiveSession();
-    let activeScreen = this.getActiveScreen();
-    return [
-      activeSession == null ? null : activeSession.sessionId,
-      activeScreen == null ? null : activeScreen.screenId,
-    ];
-  }
-
-  _loadScreenLinesAsync(newWin: ScreenLines) {
-    this.screenLines.set(newWin.screenId, newWin);
-    let usp = new URLSearchParams({ screenid: newWin.screenId });
-    let url = new URL(
-      GlobalModel.getBaseHostPort() + "/api/get-screen-lines?" + usp.toString()
-    );
-    let fetchHeaders = GlobalModel.getFetchHeaders();
-    fetch(url, { headers: fetchHeaders })
-      .then((resp) => handleJsonFetchResponse(url, resp))
-      .then((data) => {
-        if (data.data == null) {
-          console.log("null screen-lines returned from get-screen-lines");
-          return;
+    confirmAlert(): void {
+        mobx.action(() => {
+            this.alertMessage.set(null);
+        })();
+        if (this.alertPromiseResolver != null) {
+            this.alertPromiseResolver(true);
+            this.alertPromiseResolver = null;
         }
-        let slines: ScreenLinesType = data.data;
-        this.updateScreenLines(slines, true);
-        return;
-      })
-      .catch((err) => {
-        this.errorHandler(
-          sprintf("getting screen-lines=%s", newWin.screenId),
-          err,
-          false
-        );
-      });
-  }
+    }
 
-  loadScreenLines(screenId: string): ScreenLines {
-    let newWin = new ScreenLines(screenId);
-    setTimeout(() => this._loadScreenLinesAsync(newWin), 0);
-    return newWin;
-  }
+    showSessionView(): void {
+        mobx.action(() => {
+            this.activeMainView.set("session");
+        })();
+    }
 
-  getRemote(remoteId: string): RemoteType {
-    for (let i = 0; i < this.remotes.length; i++) {
-      if (this.remotes[i].remoteid == remoteId) {
-        return this.remotes[i];
-      }
+    showWebShareView(): void {
+        mobx.action(() => {
+            this.activeMainView.set("webshare");
+        })();
     }
-    return null;
-  }
 
-  getRemoteNames(): Record<string, string> {
-    let rtn: Record<string, string> = {};
-    for (let i = 0; i < this.remotes.length; i++) {
-      let remote = this.remotes[i];
-      if (!isBlank(remote.remotealias)) {
-        rtn[remote.remoteid] = remote.remotealias;
-      } else {
-        rtn[remote.remoteid] = remote.remotecanonicalname;
-      }
+    getBaseHostPort(): string {
+        if (this.isDev) {
+            return DevServerEndpoint;
+        }
+        return ProdServerEndpoint;
     }
-    return rtn;
-  }
 
-  getRemoteByName(name: string): RemoteType {
-    for (let i = 0; i < this.remotes.length; i++) {
-      if (
-        this.remotes[i].remotecanonicalname == name ||
-        this.remotes[i].remotealias == name
-      ) {
-        return this.remotes[i];
-      }
+    setTermFontSize(fontSize: number) {
+        if (fontSize < MinFontSize) {
+            fontSize = MinFontSize;
+        }
+        if (fontSize > MaxFontSize) {
+            fontSize = MaxFontSize;
+        }
+        mobx.action(() => {
+            this.termFontSize.set(fontSize);
+        })();
     }
-    return null;
-  }
 
-  getCmd(line: LineType): Cmd {
-    let slines = this.getScreenLinesById(line.screenid);
-    if (slines == null) {
-      return null;
+    getBaseWsHostPort(): string {
+        if (this.isDev) {
+            return DevServerWsEndpoint;
+        }
+        return ProdServerWsEndpoint;
     }
-    return slines.getCmd(line.lineid);
-  }
 
-  getActiveLine(screenId: string, lineid: string): SWLinePtr {
-    let slines = this.screenLines.get(screenId);
-    if (slines == null) {
-      return null;
+    getFetchHeaders(): Record<string, string> {
+        return {
+            "x-authkey": this.authKey,
+        };
     }
-    if (!slines.loaded.get()) {
-      return null;
-    }
-    let cmd = slines.getCmd(lineid);
-    if (cmd == null) {
-      return null;
-    }
-    let line: LineType = null;
-    for (let i = 0; i < slines.lines.length; i++) {
-      if (slines.lines[i].lineid == lineid) {
-        line = slines.lines[i];
-        break;
-      }
-    }
-    if (line == null) {
-      return null;
-    }
-    let screen = this.getScreenById_single(slines.screenId);
-    return { line: line, slines: slines, screen: screen };
-  }
 
-  updatePtyData(ptyMsg: PtyDataUpdateType): void {
-    let linePtr = this.getActiveLine(ptyMsg.screenid, ptyMsg.lineid);
-    if (linePtr != null) {
-      linePtr.screen.updatePtyData(ptyMsg);
+    docSelectionChangeHandler(e: any) {
+        // nothing for now
     }
-  }
 
-  errorHandler(str: string, err: any, interactive: boolean) {
-    console.log("[error]", str, err);
-    if (interactive) {
-      let errMsg = "error running command";
-      if (err != null && err.message) {
-        errMsg = err.message;
-      }
-      this.inputModel.flashInfoMsg({ infoerror: errMsg }, null);
+    docKeyDownHandler(e: any) {
+        if (isModKeyPress(e)) {
+            return;
+        }
+        if (this.alertMessage.get() != null) {
+            if (e.code == "Escape") {
+                e.preventDefault();
+                this.cancelAlert();
+                return;
+            }
+            if (e.code == "Enter") {
+                e.preventDefault();
+                this.confirmAlert();
+                return;
+            }
+            return;
+        }
+        if (this.activeMainView.get() == "bookmarks") {
+            this.bookmarksModel.handleDocKeyDown(e);
+            return;
+        }
+        if (this.activeMainView.get() == "history") {
+            this.historyViewModel.handleDocKeyDown(e);
+            return;
+        }
+        if (e.code == "Escape") {
+            e.preventDefault();
+            if (this.activeMainView.get() == "webshare") {
+                this.showSessionView();
+                return;
+            }
+            if (this.clearModals()) {
+                return;
+            }
+            let inputModel = this.inputModel;
+            inputModel.toggleInfoMsg();
+            if (inputModel.inputMode.get() != null) {
+                inputModel.resetInputMode();
+            }
+            return;
+        }
+        if (e.code == "KeyB" && e.getModifierState("Meta")) {
+            e.preventDefault();
+            GlobalCommandRunner.bookmarksView();
+        }
     }
-  }
 
-  sendInputPacket(inputPacket: any) {
-    this.ws.pushMessage(inputPacket);
-  }
+    clearModals(): boolean {
+        let didSomething = false;
+        mobx.action(() => {
+            if (GlobalModel.screenSettingsModal.get()) {
+                GlobalModel.screenSettingsModal.set(null);
+                didSomething = true;
+            }
+            if (GlobalModel.sessionSettingsModal.get()) {
+                GlobalModel.sessionSettingsModal.set(null);
+                didSomething = true;
+            }
+            if (GlobalModel.screenSettingsModal.get()) {
+                GlobalModel.screenSettingsModal.set(null);
+                didSomething = true;
+            }
+            if (GlobalModel.remotesModalModel.isOpen()) {
+                GlobalModel.remotesModalModel.closeModal();
+                didSomething = true;
+            }
+            if (GlobalModel.clientSettingsModal.get()) {
+                GlobalModel.clientSettingsModal.set(false);
+                didSomething = true;
+            }
+            if (GlobalModel.lineSettingsModal.get()) {
+                GlobalModel.lineSettingsModal.set(null);
+                didSomething = true;
+            }
+            if (GlobalModel.welcomeModalOpen.get()) {
+                GlobalModel.welcomeModalOpen.set(false);
+                didSomething = true;
+            }
+        })();
+        return didSomething;
+    }
 
-  resolveUserIdToName(userid: string): string {
-    return "@[unknown]";
-  }
+    restartLocalServer(): void {
+        getApi().restartLocalServer();
+    }
 
-  resolveRemoteIdToRef(remoteId: string) {
-    let remote = this.getRemote(remoteId);
-    if (remote == null) {
-      return "[unknown]";
+    getLocalRemote(): RemoteType {
+        for (let i = 0; i < this.remotes.length; i++) {
+            if (this.remotes[i].local) {
+                return this.remotes[i];
+            }
+        }
+        return null;
     }
-    if (!isBlank(remote.remotealias)) {
-      return remote.remotealias;
-    }
-    return remote.remotecanonicalname;
-  }
 
-  resolveRemoteIdToFullRef(remoteId: string) {
-    let remote = this.getRemote(remoteId);
-    if (remote == null) {
-      return "[unknown]";
+    getCurRemoteInstance(): RemoteInstanceType {
+        let screen = this.getActiveScreen();
+        if (screen == null) {
+            return null;
+        }
+        return screen.getCurRemoteInstance();
     }
-    if (!isBlank(remote.remotealias)) {
-      return remote.remotealias + " (" + remote.remotecanonicalname + ")";
+
+    onLocalServerStatusChange(status: boolean): void {
+        mobx.action(() => {
+            this.localServerRunning.set(status);
+        })();
+    }
+
+    getContentHeight(context: RendererContext): number {
+        let key = context.screenId + "/" + context.lineId;
+        return this.termUsedRowsCache[key];
+    }
+
+    setContentHeight(context: RendererContext, height: number): void {
+        let key = context.screenId + "/" + context.lineId;
+        this.termUsedRowsCache[key] = height;
+        GlobalCommandRunner.setTermUsedRows(context, height);
+    }
+
+    contextScreen(e: any, screenId: string) {
+        getApi().contextScreen({ screenId: screenId }, { x: e.x, y: e.y });
+    }
+
+    contextEditMenu(e: any, opts: ContextMenuOpts) {
+        getApi().contextEditMenu({ x: e.x, y: e.y }, opts);
+    }
+
+    getUIContext(): UIContextType {
+        let rtn: UIContextType = {
+            sessionid: null,
+            screenid: null,
+            remote: null,
+            winsize: null,
+            linenum: null,
+            build: VERSION + " " + BUILD,
+        };
+        let session = this.getActiveSession();
+        if (session != null) {
+            rtn.sessionid = session.sessionId;
+            let screen = session.getActiveScreen();
+            if (screen != null) {
+                rtn.screenid = screen.screenId;
+                rtn.remote = screen.curRemote.get();
+                rtn.winsize = { rows: screen.lastRows, cols: screen.lastCols };
+                rtn.linenum = screen.selectedLine.get();
+            }
+        }
+        return rtn;
+    }
+
+    onTCmd(e: any, mods: KeyModsType) {
+        GlobalCommandRunner.createNewScreen();
+    }
+
+    onICmd(e: any, mods: KeyModsType) {
+        this.inputModel.giveFocus();
+    }
+
+    onLCmd(e: any, mods: KeyModsType) {
+        let screen = this.getActiveScreen();
+        if (screen != null) {
+            GlobalCommandRunner.screenSetFocus("cmd");
+        }
+    }
+
+    onHCmd(e: any, mods: KeyModsType) {
+        GlobalModel.historyViewModel.reSearch();
+    }
+
+    getFocusedLine(): LineFocusType {
+        if (this.inputModel.hasFocus()) {
+            return { cmdInputFocus: true };
+        }
+        let lineElem: any = document.activeElement.closest(".line[data-lineid]");
+        if (lineElem == null) {
+            return { cmdInputFocus: false };
+        }
+        let lineNum = parseInt(lineElem.dataset.linenum);
+        return {
+            cmdInputFocus: false,
+            lineid: lineElem.dataset.lineid,
+            linenum: isNaN(lineNum) ? null : lineNum,
+            screenid: lineElem.dataset.screenid,
+        };
+    }
+
+    cmdStatusUpdate(screenId: string, lineId: string, origStatus: string, newStatus: string) {
+        let wasRunning = cmdStatusIsRunning(origStatus);
+        let isRunning = cmdStatusIsRunning(newStatus);
+        if (wasRunning && !isRunning) {
+            // console.log("cmd status", screenId, lineId, origStatus, "=>", newStatus);
+            let ptr = this.getActiveLine(screenId, lineId);
+            if (ptr != null) {
+                let screen = ptr.screen;
+                let renderer = screen.getRenderer(lineId);
+                if (renderer != null) {
+                    renderer.setIsDone();
+                }
+                let term = screen.getTermWrap(lineId);
+                if (term != null) {
+                    term.cmdDone();
+                }
+            }
+        }
+    }
+
+    onMetaPageUp(): void {
+        GlobalCommandRunner.screenSelectLine("-1");
+    }
+
+    onMetaPageDown(): void {
+        GlobalCommandRunner.screenSelectLine("+1");
+    }
+
+    onMetaArrowUp(): void {
+        GlobalCommandRunner.screenSelectLine("-1");
+    }
+
+    onMetaArrowDown(): void {
+        GlobalCommandRunner.screenSelectLine("+1");
+    }
+
+    onBracketCmd(e: any, arg: { relative: number }, mods: KeyModsType) {
+        if (arg.relative == 1) {
+            GlobalCommandRunner.switchScreen("+");
+        } else if (arg.relative == -1) {
+            GlobalCommandRunner.switchScreen("-");
+        }
+    }
+
+    onDigitCmd(e: any, arg: { digit: number }, mods: KeyModsType) {
+        if (mods.meta && mods.ctrl) {
+            GlobalCommandRunner.switchSession(String(arg.digit));
+            return;
+        }
+        GlobalCommandRunner.switchScreen(String(arg.digit));
+    }
+
+    isConnected(): boolean {
+        return this.ws.open.get();
+    }
+
+    runUpdate(genUpdate: UpdateMessage, interactive: boolean) {
+        mobx.action(() => {
+            let oldContext = this.getUIContext();
+            try {
+                this.runUpdate_internal(genUpdate, oldContext, interactive);
+            } catch (e) {
+                console.log("error running update", e, genUpdate);
+                throw e;
+            }
+            let newContext = this.getUIContext();
+            if (oldContext.sessionid != newContext.sessionid || oldContext.screenid != newContext.screenid) {
+                this.inputModel.resetInput();
+            } else if (remotePtrToString(oldContext.remote) != remotePtrToString(newContext.remote)) {
+                this.inputModel.resetHistory();
+            }
+        })();
+    }
+
+    runUpdate_internal(genUpdate: UpdateMessage, uiContext: UIContextType, interactive: boolean) {
+        if ("ptydata64" in genUpdate) {
+            let ptyMsg: PtyDataUpdateType = genUpdate;
+            if (isBlank(ptyMsg.remoteid)) {
+                // regular update
+                this.updatePtyData(ptyMsg);
+            } else {
+                // remote update
+                let ptyData = base64ToArray(ptyMsg.ptydata64);
+                this.remotesModalModel.receiveData(ptyMsg.remoteid, ptyMsg.ptypos, ptyData);
+            }
+            return;
+        }
+        let update: ModelUpdateType = genUpdate;
+        if ("screens" in update) {
+            if (update.connect) {
+                this.screenMap.clear();
+            }
+            let mods = genMergeDataMap(
+                this.screenMap,
+                update.screens,
+                (s: Screen) => s.screenId,
+                (sdata: ScreenDataType) => sdata.screenid,
+                (sdata: ScreenDataType) => new Screen(sdata)
+            );
+            for (let i = 0; i < mods.removed.length; i++) {
+                this.removeScreenLinesByScreenId(mods.removed[i]);
+            }
+        }
+        if ("sessions" in update || "activesessionid" in update) {
+            if (update.connect) {
+                this.sessionList.clear();
+            }
+            let [oldActiveSessionId, oldActiveScreenId] = this.getActiveIds();
+            genMergeData(
+                this.sessionList,
+                update.sessions,
+                (s: Session) => s.sessionId,
+                (sdata: SessionDataType) => sdata.sessionid,
+                (sdata: SessionDataType) => new Session(sdata),
+                (s: Session) => s.sessionIdx.get()
+            );
+            if ("activesessionid" in update) {
+                let newSessionId = update.activesessionid;
+                if (this.activeSessionId.get() != newSessionId) {
+                    this.activeSessionId.set(newSessionId);
+                }
+            }
+            let [newActiveSessionId, newActiveScreenId] = this.getActiveIds();
+            if (oldActiveSessionId != newActiveSessionId || oldActiveScreenId != newActiveScreenId) {
+                this.activeMainView.set("session");
+                this.deactivateScreenLines();
+                this.ws.watchScreen(newActiveSessionId, newActiveScreenId);
+            }
+        }
+        if ("line" in update) {
+            this.addLineCmd(update.line, update.cmd, interactive);
+        } else if ("cmd" in update) {
+            this.updateCmd(update.cmd);
+        }
+        if ("lines" in update) {
+            for (let i = 0; i < update.lines.length; i++) {
+                this.addLineCmd(update.lines[i], null, interactive);
+            }
+        }
+        if ("screenlines" in update) {
+            this.updateScreenLines(update.screenlines, false);
+        }
+        if ("remotes" in update) {
+            if (update.connect) {
+                this.remotes.clear();
+            }
+            this.updateRemotes(update.remotes);
+        }
+        if ("mainview" in update) {
+            if (update.mainview == "bookmarks") {
+                this.bookmarksModel.showBookmarksView(update.bookmarks, update.selectedbookmark);
+            } else if (update.mainview == "session") {
+                this.activeMainView.set("session");
+            } else if (update.mainview == "history") {
+                this.historyViewModel.showHistoryView(update.historyviewdata);
+            } else {
+                console.log("invalid mainview in update:", update.mainview);
+            }
+        } else if ("bookmarks" in update) {
+            this.bookmarksModel.mergeBookmarks(update.bookmarks);
+        }
+        if ("clientdata" in update) {
+            this.clientData.set(update.clientdata);
+        }
+        if (interactive && "info" in update) {
+            let info: InfoType = update.info;
+            this.inputModel.flashInfoMsg(info, info.timeoutms);
+        }
+        if (interactive && "remoteview" in update) {
+            let rview: RemoteViewType = update.remoteview;
+            if (rview.remoteshowall) {
+                this.remotesModalModel.openModal();
+            } else if (rview.remoteedit != null) {
+                this.remotesModalModel.openModalForEdit(rview.remoteedit);
+            } else if (rview.ptyremoteid) {
+                this.remotesModalModel.openModal(rview.ptyremoteid);
+            }
+        }
+        if ("cmdline" in update) {
+            this.inputModel.updateCmdLine(update.cmdline);
+        }
+        if (interactive && "history" in update) {
+            if (uiContext.sessionid == update.history.sessionid && uiContext.screenid == update.history.screenid) {
+                this.inputModel.setHistoryInfo(update.history);
+            }
+        }
+        if ("connect" in update) {
+            this.sessionListLoaded.set(true);
+            this.remotesLoaded.set(true);
+        }
+        // console.log("run-update>", Date.now(), interactive, update);
+    }
+
+    updateRemotes(remotes: RemoteType[]): void {
+        genMergeSimpleData(this.remotes, remotes, (r) => r.remoteid, null);
+    }
+
+    getActiveSession(): Session {
+        return this.getSessionById(this.activeSessionId.get());
+    }
+
+    getSessionNames(): Record<string, string> {
+        let rtn: Record<string, string> = {};
+        for (let i = 0; i < this.sessionList.length; i++) {
+            let session = this.sessionList[i];
+            rtn[session.sessionId] = session.name.get();
+        }
+        return rtn;
+    }
+
+    getScreenNames(): Record<string, string> {
+        let rtn: Record<string, string> = {};
+        for (let screen of this.screenMap.values()) {
+            rtn[screen.screenId] = screen.name.get();
+        }
+        return rtn;
+    }
+
+    getSessionById(sessionId: string): Session {
+        if (sessionId == null) {
+            return null;
+        }
+        for (let i = 0; i < this.sessionList.length; i++) {
+            if (this.sessionList[i].sessionId == sessionId) {
+                return this.sessionList[i];
+            }
+        }
+        return null;
+    }
+
+    deactivateScreenLines() {
+        mobx.action(() => {
+            this.screenLines.clear();
+        })();
+    }
+
+    getScreenLinesById(screenId: string): ScreenLines {
+        return this.screenLines.get(screenId);
+    }
+
+    updateScreenLines(slines: ScreenLinesType, load: boolean) {
+        mobx.action(() => {
+            let existingWin = this.screenLines.get(slines.screenid);
+            if (existingWin == null) {
+                if (!load) {
+                    console.log("cannot update screen-lines that does not exist", slines.screenid);
+                    return;
+                }
+                let newWindow = new ScreenLines(slines.screenid);
+                this.screenLines.set(slines.screenid, newWindow);
+                newWindow.updateData(slines, load);
+                return;
+            } else {
+                existingWin.updateData(slines, load);
+                existingWin.loaded.set(true);
+            }
+        })();
+    }
+
+    removeScreenLinesByScreenId(screenId: string) {
+        mobx.action(() => {
+            this.screenLines.delete(screenId);
+        })();
+    }
+
+    getScreenById(sessionId: string, screenId: string): Screen {
+        return this.screenMap.get(screenId);
+    }
+
+    getScreenById_single(screenId: string): Screen {
+        return this.screenMap.get(screenId);
+    }
+
+    getSessionScreens(sessionId: string): Screen[] {
+        let rtn: Screen[] = [];
+        for (let screen of this.screenMap.values()) {
+            if (screen.sessionId == sessionId) {
+                rtn.push(screen);
+            }
+        }
+        return rtn;
+    }
+
+    getScreenLinesForActiveScreen(): ScreenLines {
+        let screen = this.getActiveScreen();
+        if (screen == null) {
+            return null;
+        }
+        return this.screenLines.get(screen.screenId);
+    }
+
+    getActiveScreen(): Screen {
+        let session = this.getActiveSession();
+        if (session == null) {
+            return null;
+        }
+        return session.getActiveScreen();
+    }
+
+    addLineCmd(line: LineType, cmd: CmdDataType, interactive: boolean) {
+        let slines = this.getScreenLinesById(line.screenid);
+        if (slines == null) {
+            return;
+        }
+        slines.addLineCmd(line, cmd, interactive);
+    }
+
+    updateCmd(cmd: CmdDataType) {
+        let slines = this.screenLines.get(cmd.screenid);
+        if (slines != null) {
+            slines.updateCmd(cmd);
+        }
+    }
+
+    isInfoUpdate(update: UpdateMessage): boolean {
+        if (update == null || "ptydata64" in update) {
+            return false;
+        }
+        return update.info != null || update.history != null;
+    }
+
+    getClientDataLoop(loopNum: number): void {
+        this.getClientData();
+        let clientStop = this.getHasClientStop();
+        if (this.clientData.get() != null && !clientStop) {
+            return;
+        }
+        let timeoutMs = 1000;
+        if (!clientStop && loopNum > 5) {
+            timeoutMs = 3000;
+        }
+        if (!clientStop && loopNum > 10) {
+            timeoutMs = 10000;
+        }
+        if (!clientStop && loopNum > 15) {
+            timeoutMs = 30000;
+        }
+        setTimeout(() => this.getClientDataLoop(loopNum + 1), timeoutMs);
+    }
+
+    getClientData(): void {
+        let url = sprintf(GlobalModel.getBaseHostPort() + "/api/get-client-data");
+        let fetchHeaders = this.getFetchHeaders();
+        fetch(url, { method: "post", body: null, headers: fetchHeaders })
+            .then((resp) => handleJsonFetchResponse(url, resp))
+            .then((data) => {
+                mobx.action(() => {
+                    let clientData: ClientDataType = data.data;
+                    this.clientData.set(clientData);
+                })();
+            })
+            .catch((err) => {
+                this.errorHandler("calling get-client-data", err, true);
+            });
+    }
+
+    submitCommandPacket(cmdPk: FeCmdPacketType, interactive: boolean): Promise<CommandRtnType> {
+        if (this.debugCmds > 0) {
+            console.log("[cmd]", cmdPacketString(cmdPk));
+            if (this.debugCmds > 1) {
+                console.trace();
+            }
+        }
+        let url = sprintf(GlobalModel.getBaseHostPort() + "/api/run-command");
+        let fetchHeaders = this.getFetchHeaders();
+        let prtn = fetch(url, {
+            method: "post",
+            body: JSON.stringify(cmdPk),
+            headers: fetchHeaders,
+        })
+            .then((resp) => handleJsonFetchResponse(url, resp))
+            .then((data) => {
+                mobx.action(() => {
+                    let update = data.data;
+                    if (update != null) {
+                        this.runUpdate(update, interactive);
+                    }
+                    if (interactive && !this.isInfoUpdate(update)) {
+                        GlobalModel.inputModel.clearInfoMsg(true);
+                    }
+                })();
+                return { success: true };
+            })
+            .catch((err) => {
+                this.errorHandler("calling run-command", err, interactive);
+                let errMessage = "error running command";
+                if (err != null && !isBlank(err.message)) {
+                    errMessage = err.message;
+                }
+                return { success: false, error: errMessage };
+            });
+        return prtn;
+    }
+
+    submitCommand(
+        metaCmd: string,
+        metaSubCmd: string,
+        args: string[],
+        kwargs: Record<string, string>,
+        interactive: boolean
+    ): Promise<CommandRtnType> {
+        let pk: FeCmdPacketType = {
+            type: "fecmd",
+            metacmd: metaCmd,
+            metasubcmd: metaSubCmd,
+            args: args,
+            kwargs: Object.assign({}, kwargs),
+            uicontext: this.getUIContext(),
+            interactive: interactive,
+        };
+        // console.log("CMD", pk.metacmd + (pk.metasubcmd != null ? ":" + pk.metasubcmd : ""), pk.args, pk.kwargs, pk.interactive);
+        return this.submitCommandPacket(pk, interactive);
+    }
+
+    submitRawCommand(cmdStr: string, addToHistory: boolean, interactive: boolean): Promise<CommandRtnType> {
+        let pk: FeCmdPacketType = {
+            type: "fecmd",
+            metacmd: "eval",
+            args: [cmdStr],
+            kwargs: null,
+            uicontext: this.getUIContext(),
+            interactive: interactive,
+            rawstr: cmdStr,
+        };
+        if (!addToHistory) {
+            pk.kwargs["nohist"] = "1";
+        }
+        return this.submitCommandPacket(pk, interactive);
+    }
+
+    // returns [sessionId, screenId]
+    getActiveIds(): [string, string] {
+        let activeSession = this.getActiveSession();
+        let activeScreen = this.getActiveScreen();
+        return [
+            activeSession == null ? null : activeSession.sessionId,
+            activeScreen == null ? null : activeScreen.screenId,
+        ];
+    }
+
+    _loadScreenLinesAsync(newWin: ScreenLines) {
+        this.screenLines.set(newWin.screenId, newWin);
+        let usp = new URLSearchParams({ screenid: newWin.screenId });
+        let url = new URL(GlobalModel.getBaseHostPort() + "/api/get-screen-lines?" + usp.toString());
+        let fetchHeaders = GlobalModel.getFetchHeaders();
+        fetch(url, { headers: fetchHeaders })
+            .then((resp) => handleJsonFetchResponse(url, resp))
+            .then((data) => {
+                if (data.data == null) {
+                    console.log("null screen-lines returned from get-screen-lines");
+                    return;
+                }
+                let slines: ScreenLinesType = data.data;
+                this.updateScreenLines(slines, true);
+                return;
+            })
+            .catch((err) => {
+                this.errorHandler(sprintf("getting screen-lines=%s", newWin.screenId), err, false);
+            });
+    }
+
+    loadScreenLines(screenId: string): ScreenLines {
+        let newWin = new ScreenLines(screenId);
+        setTimeout(() => this._loadScreenLinesAsync(newWin), 0);
+        return newWin;
+    }
+
+    getRemote(remoteId: string): RemoteType {
+        for (let i = 0; i < this.remotes.length; i++) {
+            if (this.remotes[i].remoteid == remoteId) {
+                return this.remotes[i];
+            }
+        }
+        return null;
+    }
+
+    getRemoteNames(): Record<string, string> {
+        let rtn: Record<string, string> = {};
+        for (let i = 0; i < this.remotes.length; i++) {
+            let remote = this.remotes[i];
+            if (!isBlank(remote.remotealias)) {
+                rtn[remote.remoteid] = remote.remotealias;
+            } else {
+                rtn[remote.remoteid] = remote.remotecanonicalname;
+            }
+        }
+        return rtn;
+    }
+
+    getRemoteByName(name: string): RemoteType {
+        for (let i = 0; i < this.remotes.length; i++) {
+            if (this.remotes[i].remotecanonicalname == name || this.remotes[i].remotealias == name) {
+                return this.remotes[i];
+            }
+        }
+        return null;
+    }
+
+    getCmd(line: LineType): Cmd {
+        let slines = this.getScreenLinesById(line.screenid);
+        if (slines == null) {
+            return null;
+        }
+        return slines.getCmd(line.lineid);
+    }
+
+    getActiveLine(screenId: string, lineid: string): SWLinePtr {
+        let slines = this.screenLines.get(screenId);
+        if (slines == null) {
+            return null;
+        }
+        if (!slines.loaded.get()) {
+            return null;
+        }
+        let cmd = slines.getCmd(lineid);
+        if (cmd == null) {
+            return null;
+        }
+        let line: LineType = null;
+        for (let i = 0; i < slines.lines.length; i++) {
+            if (slines.lines[i].lineid == lineid) {
+                line = slines.lines[i];
+                break;
+            }
+        }
+        if (line == null) {
+            return null;
+        }
+        let screen = this.getScreenById_single(slines.screenId);
+        return { line: line, slines: slines, screen: screen };
+    }
+
+    updatePtyData(ptyMsg: PtyDataUpdateType): void {
+        let linePtr = this.getActiveLine(ptyMsg.screenid, ptyMsg.lineid);
+        if (linePtr != null) {
+            linePtr.screen.updatePtyData(ptyMsg);
+        }
+    }
+
+    errorHandler(str: string, err: any, interactive: boolean) {
+        console.log("[error]", str, err);
+        if (interactive) {
+            let errMsg = "error running command";
+            if (err != null && err.message) {
+                errMsg = err.message;
+            }
+            this.inputModel.flashInfoMsg({ infoerror: errMsg }, null);
+        }
+    }
+
+    sendInputPacket(inputPacket: any) {
+        this.ws.pushMessage(inputPacket);
+    }
+
+    resolveUserIdToName(userid: string): string {
+        return "@[unknown]";
+    }
+
+    resolveRemoteIdToRef(remoteId: string) {
+        let remote = this.getRemote(remoteId);
+        if (remote == null) {
+            return "[unknown]";
+        }
+        if (!isBlank(remote.remotealias)) {
+            return remote.remotealias;
+        }
+        return remote.remotecanonicalname;
+    }
+
+    resolveRemoteIdToFullRef(remoteId: string) {
+        let remote = this.getRemote(remoteId);
+        if (remote == null) {
+            return "[unknown]";
+        }
+        if (!isBlank(remote.remotealias)) {
+            return remote.remotealias + " (" + remote.remotecanonicalname + ")";
+        }
+        return remote.remotecanonicalname;
     }
-    return remote.remotecanonicalname;
-  }
 }
 
 class CommandRunner {
-  constructor() {}
+    constructor() {}
 
-  loadHistory(show: boolean, htype: string) {
-    let kwargs = { nohist: "1" };
-    if (!show) {
-      kwargs["noshow"] = "1";
+    loadHistory(show: boolean, htype: string) {
+        let kwargs = { nohist: "1" };
+        if (!show) {
+            kwargs["noshow"] = "1";
+        }
+        if (htype != null && htype != "screen") {
+            kwargs["type"] = htype;
+        }
+        GlobalModel.submitCommand("history", null, null, kwargs, true);
     }
-    if (htype != null && htype != "screen") {
-      kwargs["type"] = htype;
+
+    historyPurgeLines(lines: string[]): Promise<CommandRtnType> {
+        let prtn = GlobalModel.submitCommand("history", "purge", lines, { nohist: "1" }, false);
+        return prtn;
     }
-    GlobalModel.submitCommand("history", null, null, kwargs, true);
-  }
 
-  historyPurgeLines(lines: string[]): Promise<CommandRtnType> {
-    let prtn = GlobalModel.submitCommand(
-      "history",
-      "purge",
-      lines,
-      { nohist: "1" },
-      false
-    );
-    return prtn;
-  }
-
-  switchSession(session: string) {
-    mobx.action(() => {
-      GlobalModel.activeMainView.set("session");
-    })();
-    GlobalModel.submitCommand(
-      "session",
-      null,
-      [session],
-      { nohist: "1" },
-      false
-    );
-  }
-
-  switchScreen(screen: string) {
-    mobx.action(() => {
-      GlobalModel.activeMainView.set("session");
-    })();
-    GlobalModel.submitCommand("screen", null, [screen], { nohist: "1" }, false);
-  }
-
-  lineView(sessionId: string, screenId: string, lineNum?: number) {
-    let screen = GlobalModel.getScreenById(sessionId, screenId);
-    if (screen != null && lineNum != null) {
-      screen.setAnchorFields(lineNum, 0, "line:view");
+    switchSession(session: string) {
+        mobx.action(() => {
+            GlobalModel.activeMainView.set("session");
+        })();
+        GlobalModel.submitCommand("session", null, [session], { nohist: "1" }, false);
     }
-    let lineNumStr = lineNum == null || lineNum == 0 ? "E" : String(lineNum);
-    GlobalModel.submitCommand(
-      "line",
-      "view",
-      [sessionId, screenId, lineNumStr],
-      { nohist: "1" },
-      false
-    );
-  }
 
-  lineArchive(lineArg: string, archive: boolean): Promise<CommandRtnType> {
-    let kwargs = { nohist: "1" };
-    let archiveStr = archive ? "1" : "0";
-    return GlobalModel.submitCommand(
-      "line",
-      "archive",
-      [lineArg, archiveStr],
-      kwargs,
-      false
-    );
-  }
-
-  lineSet(
-    lineArg: string,
-    opts: { renderer?: string }
-  ): Promise<CommandRtnType> {
-    let kwargs = { nohist: "1" };
-    if ("renderer" in opts) {
-      kwargs["renderer"] = opts.renderer ?? "";
+    switchScreen(screen: string) {
+        mobx.action(() => {
+            GlobalModel.activeMainView.set("session");
+        })();
+        GlobalModel.submitCommand("screen", null, [screen], { nohist: "1" }, false);
     }
-    return GlobalModel.submitCommand("line", "set", [lineArg], kwargs, false);
-  }
 
-  createNewSession() {
-    GlobalModel.submitCommand("session", "open", null, { nohist: "1" }, false);
-  }
-
-  createNewScreen() {
-    GlobalModel.submitCommand("screen", "open", null, { nohist: "1" }, false);
-  }
-
-  closeScreen(screen: string) {
-    GlobalModel.submitCommand(
-      "screen",
-      "close",
-      [screen],
-      { nohist: "1" },
-      false
-    );
-  }
-
-  resizeScreen(screenId: string, rows: number, cols: number) {
-    GlobalModel.submitCommand(
-      "screen",
-      "resize",
-      null,
-      { nohist: "1", screen: screenId, cols: String(cols), rows: String(rows) },
-      false
-    );
-  }
-
-  screenArchive(
-    screenId: string,
-    shouldArchive: boolean
-  ): Promise<CommandRtnType> {
-    return GlobalModel.submitCommand(
-      "screen",
-      "archive",
-      [screenId, shouldArchive ? "1" : "0"],
-      { nohist: "1" },
-      false
-    );
-  }
-
-  screenPurge(screenId: string): Promise<CommandRtnType> {
-    return GlobalModel.submitCommand(
-      "screen",
-      "purge",
-      [screenId],
-      { nohist: "1" },
-      false
-    );
-  }
-
-  screenWebShare(
-    screenId: string,
-    shouldShare: boolean
-  ): Promise<CommandRtnType> {
-    let kwargs: Record<string, string> = { nohist: "1" };
-    kwargs["screen"] = screenId;
-    return GlobalModel.submitCommand(
-      "screen",
-      "webshare",
-      [shouldShare ? "1" : "0"],
-      kwargs,
-      false
-    );
-  }
-
-  showRemote(remoteid: string) {
-    GlobalModel.submitCommand(
-      "remote",
-      "show",
-      null,
-      { nohist: "1", remote: remoteid },
-      true
-    );
-  }
-
-  showAllRemotes() {
-    GlobalModel.submitCommand("remote", "showall", null, { nohist: "1" }, true);
-  }
-
-  connectRemote(remoteid: string) {
-    GlobalModel.submitCommand(
-      "remote",
-      "connect",
-      null,
-      { nohist: "1", remote: remoteid },
-      true
-    );
-  }
-
-  disconnectRemote(remoteid: string) {
-    GlobalModel.submitCommand(
-      "remote",
-      "disconnect",
-      null,
-      { nohist: "1", remote: remoteid },
-      true
-    );
-  }
-
-  installRemote(remoteid: string) {
-    GlobalModel.submitCommand(
-      "remote",
-      "install",
-      null,
-      { nohist: "1", remote: remoteid },
-      true
-    );
-  }
-
-  installCancelRemote(remoteid: string) {
-    GlobalModel.submitCommand(
-      "remote",
-      "installcancel",
-      null,
-      { nohist: "1", remote: remoteid },
-      true
-    );
-  }
-
-  createRemote(cname: string, kwargsArg: Record<string, string>) {
-    let kwargs = Object.assign({}, kwargsArg);
-    kwargs["nohist"] = "1";
-    GlobalModel.submitCommand("remote", "new", [cname], kwargs, true);
-  }
-
-  openCreateRemote(): void {
-    GlobalModel.submitCommand(
-      "remote",
-      "new",
-      null,
-      { nohist: "1", visual: "1" },
-      true
-    );
-  }
-
-  editRemote(remoteid: string, kwargsArg: Record<string, string>): void {
-    let kwargs = Object.assign({}, kwargsArg);
-    kwargs["nohist"] = "1";
-    kwargs["remote"] = remoteid;
-    GlobalModel.submitCommand("remote", "set", null, kwargs, true);
-  }
-
-  openEditRemote(remoteid: string): void {
-    GlobalModel.submitCommand(
-      "remote",
-      "set",
-      null,
-      { remote: remoteid, nohist: "1", visual: "1" },
-      true
-    );
-  }
-
-  archiveRemote(remoteid: string) {
-    GlobalModel.submitCommand(
-      "remote",
-      "archive",
-      null,
-      { remote: remoteid, nohist: "1" },
-      true
-    );
-  }
-
-  screenSelectLine(lineArg: string, focusVal?: string) {
-    let kwargs: Record<string, string> = {
-      nohist: "1",
-      line: lineArg,
-    };
-    if (focusVal != null) {
-      kwargs["focus"] = focusVal;
+    lineView(sessionId: string, screenId: string, lineNum?: number) {
+        let screen = GlobalModel.getScreenById(sessionId, screenId);
+        if (screen != null && lineNum != null) {
+            screen.setAnchorFields(lineNum, 0, "line:view");
+        }
+        let lineNumStr = lineNum == null || lineNum == 0 ? "E" : String(lineNum);
+        GlobalModel.submitCommand("line", "view", [sessionId, screenId, lineNumStr], { nohist: "1" }, false);
     }
-    GlobalModel.submitCommand("screen", "set", null, kwargs, false);
-  }
 
-  setTermUsedRows(termContext: RendererContext, height: number) {
-    let kwargs: Record<string, string> = {};
-    kwargs["screen"] = termContext.screenId;
-    kwargs["hohist"] = "1";
-    let posargs = [String(termContext.lineNum), String(height)];
-    GlobalModel.submitCommand("line", "setheight", posargs, kwargs, false);
-  }
-
-  screenSetAnchor(
-    sessionId: string,
-    screenId: string,
-    anchorVal: string
-  ): void {
-    let kwargs = {
-      nohist: "1",
-      anchor: anchorVal,
-      session: sessionId,
-      screen: screenId,
-    };
-    GlobalModel.submitCommand("screen", "set", null, kwargs, false);
-  }
-
-  screenSetFocus(focusVal: string): void {
-    GlobalModel.submitCommand(
-      "screen",
-      "set",
-      null,
-      { focus: focusVal, nohist: "1" },
-      false
-    );
-  }
-
-  screenSetSettings(
-    screenId: string,
-    settings: { tabcolor?: string; name?: string; sharename?: string },
-    interactive: boolean
-  ): Promise<CommandRtnType> {
-    let kwargs = Object.assign({}, settings);
-    kwargs["nohist"] = "1";
-    kwargs["screen"] = screenId;
-    return GlobalModel.submitCommand(
-      "screen",
-      "set",
-      null,
-      kwargs,
-      interactive
-    );
-  }
-
-  sessionArchive(
-    sessionId: string,
-    shouldArchive: boolean
-  ): Promise<CommandRtnType> {
-    return GlobalModel.submitCommand(
-      "session",
-      "archive",
-      [sessionId, shouldArchive ? "1" : "0"],
-      { nohist: "1" },
-      false
-    );
-  }
-
-  sessionPurge(sessionId: string): Promise<CommandRtnType> {
-    return GlobalModel.submitCommand(
-      "session",
-      "purge",
-      [sessionId],
-      { nohist: "1" },
-      false
-    );
-  }
-
-  sessionSetSettings(
-    sessionId: string,
-    settings: { name?: string },
-    interactive: boolean
-  ): Promise<CommandRtnType> {
-    let kwargs = Object.assign({}, settings);
-    kwargs["nohist"] = "1";
-    kwargs["session"] = sessionId;
-    return GlobalModel.submitCommand(
-      "session",
-      "set",
-      null,
-      kwargs,
-      interactive
-    );
-  }
-
-  lineStar(lineId: string, starVal: number) {
-    GlobalModel.submitCommand(
-      "line",
-      "star",
-      [lineId, String(starVal)],
-      { nohist: "1" },
-      true
-    );
-  }
-
-  lineBookmark(lineId: string) {
-    GlobalModel.submitCommand(
-      "line",
-      "bookmark",
-      [lineId],
-      { nohist: "1" },
-      true
-    );
-  }
-
-  linePin(lineId: string, val: boolean) {
-    GlobalModel.submitCommand(
-      "line",
-      "pin",
-      [lineId, val ? "1" : "0"],
-      { nohist: "1" },
-      true
-    );
-  }
-
-  bookmarksView() {
-    GlobalModel.submitCommand("bookmarks", "show", null, { nohist: "1" }, true);
-  }
-
-  historyView(params: HistorySearchParams) {
-    let kwargs = { nohist: "1" };
-    kwargs["offset"] = String(params.offset);
-    kwargs["rawoffset"] = String(params.rawOffset);
-    if (params.searchText != null) {
-      kwargs["text"] = params.searchText;
+    lineArchive(lineArg: string, archive: boolean): Promise<CommandRtnType> {
+        let kwargs = { nohist: "1" };
+        let archiveStr = archive ? "1" : "0";
+        return GlobalModel.submitCommand("line", "archive", [lineArg, archiveStr], kwargs, false);
     }
-    if (params.searchSessionId != null) {
-      kwargs["searchsession"] = params.searchSessionId;
-    }
-    if (params.searchRemoteId != null) {
-      kwargs["searchremote"] = params.searchRemoteId;
-    }
-    if (params.fromTs != null) {
-      kwargs["fromts"] = String(params.fromTs);
-    }
-    if (params.noMeta) {
-      kwargs["meta"] = "0";
-    }
-    if (params.filterCmds) {
-      kwargs["filter"] = "1";
-    }
-    GlobalModel.submitCommand("history", "viewall", null, kwargs, true);
-  }
 
-  telemetryOff(interactive: boolean): Promise<CommandRtnType> {
-    return GlobalModel.submitCommand(
-      "telemetry",
-      "off",
-      null,
-      { nohist: "1" },
-      interactive
-    );
-  }
-
-  telemetryOn(interactive: boolean): Promise<CommandRtnType> {
-    return GlobalModel.submitCommand(
-      "telemetry",
-      "on",
-      null,
-      { nohist: "1" },
-      interactive
-    );
-  }
-
-  setTermFontSize(
-    fsize: number,
-    interactive: boolean
-  ): Promise<CommandRtnType> {
-    let kwargs = {
-      nohist: "1",
-      termfontsize: String(fsize),
-    };
-    return GlobalModel.submitCommand(
-      "client",
-      "set",
-      null,
-      kwargs,
-      interactive
-    );
-  }
-
-  setClientOpenAISettings(opts: {
-    model?: string;
-    apitoken?: string;
-    maxtokens?: string;
-  }): Promise<CommandRtnType> {
-    let kwargs = {
-      nohist: "1",
-    };
-    if (opts.model != null) {
-      kwargs["openaimodel"] = opts.model;
+    lineSet(lineArg: string, opts: { renderer?: string }): Promise<CommandRtnType> {
+        let kwargs = { nohist: "1" };
+        if ("renderer" in opts) {
+            kwargs["renderer"] = opts.renderer ?? "";
+        }
+        return GlobalModel.submitCommand("line", "set", [lineArg], kwargs, false);
     }
-    if (opts.apitoken != null) {
-      kwargs["openaiapitoken"] = opts.apitoken;
+
+    createNewSession() {
+        GlobalModel.submitCommand("session", "open", null, { nohist: "1" }, false);
     }
-    if (opts.maxtokens != null) {
-      kwargs["openaimaxtokens"] = opts.maxtokens;
+
+    createNewScreen() {
+        GlobalModel.submitCommand("screen", "open", null, { nohist: "1" }, false);
     }
-    return GlobalModel.submitCommand("client", "set", null, kwargs, false);
-  }
 
-  clientAcceptTos(): void {
-    GlobalModel.submitCommand(
-      "client",
-      "accepttos",
-      null,
-      { nohist: "1" },
-      true
-    );
-  }
+    closeScreen(screen: string) {
+        GlobalModel.submitCommand("screen", "close", [screen], { nohist: "1" }, false);
+    }
 
-  editBookmark(bookmarkId: string, desc: string, cmdstr: string) {
-    let kwargs = {
-      nohist: "1",
-      desc: desc,
-      cmdstr: cmdstr,
-    };
-    GlobalModel.submitCommand("bookmark", "set", [bookmarkId], kwargs, true);
-  }
+    resizeScreen(screenId: string, rows: number, cols: number) {
+        GlobalModel.submitCommand(
+            "screen",
+            "resize",
+            null,
+            { nohist: "1", screen: screenId, cols: String(cols), rows: String(rows) },
+            false
+        );
+    }
 
-  deleteBookmark(bookmarkId: string): void {
-    GlobalModel.submitCommand(
-      "bookmark",
-      "delete",
-      [bookmarkId],
-      { nohist: "1" },
-      true
-    );
-  }
+    screenArchive(screenId: string, shouldArchive: boolean): Promise<CommandRtnType> {
+        return GlobalModel.submitCommand(
+            "screen",
+            "archive",
+            [screenId, shouldArchive ? "1" : "0"],
+            { nohist: "1" },
+            false
+        );
+    }
 
-  openSharedSession(): void {
-    GlobalModel.submitCommand(
-      "session",
-      "openshared",
-      null,
-      { nohist: "1" },
-      true
-    );
-  }
+    screenPurge(screenId: string): Promise<CommandRtnType> {
+        return GlobalModel.submitCommand("screen", "purge", [screenId], { nohist: "1" }, false);
+    }
+
+    screenWebShare(screenId: string, shouldShare: boolean): Promise<CommandRtnType> {
+        let kwargs: Record<string, string> = { nohist: "1" };
+        kwargs["screen"] = screenId;
+        return GlobalModel.submitCommand("screen", "webshare", [shouldShare ? "1" : "0"], kwargs, false);
+    }
+
+    showRemote(remoteid: string) {
+        GlobalModel.submitCommand("remote", "show", null, { nohist: "1", remote: remoteid }, true);
+    }
+
+    showAllRemotes() {
+        GlobalModel.submitCommand("remote", "showall", null, { nohist: "1" }, true);
+    }
+
+    connectRemote(remoteid: string) {
+        GlobalModel.submitCommand("remote", "connect", null, { nohist: "1", remote: remoteid }, true);
+    }
+
+    disconnectRemote(remoteid: string) {
+        GlobalModel.submitCommand("remote", "disconnect", null, { nohist: "1", remote: remoteid }, true);
+    }
+
+    installRemote(remoteid: string) {
+        GlobalModel.submitCommand("remote", "install", null, { nohist: "1", remote: remoteid }, true);
+    }
+
+    installCancelRemote(remoteid: string) {
+        GlobalModel.submitCommand("remote", "installcancel", null, { nohist: "1", remote: remoteid }, true);
+    }
+
+    createRemote(cname: string, kwargsArg: Record<string, string>) {
+        let kwargs = Object.assign({}, kwargsArg);
+        kwargs["nohist"] = "1";
+        GlobalModel.submitCommand("remote", "new", [cname], kwargs, true);
+    }
+
+    openCreateRemote(): void {
+        GlobalModel.submitCommand("remote", "new", null, { nohist: "1", visual: "1" }, true);
+    }
+
+    editRemote(remoteid: string, kwargsArg: Record<string, string>): void {
+        let kwargs = Object.assign({}, kwargsArg);
+        kwargs["nohist"] = "1";
+        kwargs["remote"] = remoteid;
+        GlobalModel.submitCommand("remote", "set", null, kwargs, true);
+    }
+
+    openEditRemote(remoteid: string): void {
+        GlobalModel.submitCommand("remote", "set", null, { remote: remoteid, nohist: "1", visual: "1" }, true);
+    }
+
+    archiveRemote(remoteid: string) {
+        GlobalModel.submitCommand("remote", "archive", null, { remote: remoteid, nohist: "1" }, true);
+    }
+
+    screenSelectLine(lineArg: string, focusVal?: string) {
+        let kwargs: Record<string, string> = {
+            nohist: "1",
+            line: lineArg,
+        };
+        if (focusVal != null) {
+            kwargs["focus"] = focusVal;
+        }
+        GlobalModel.submitCommand("screen", "set", null, kwargs, false);
+    }
+
+    setTermUsedRows(termContext: RendererContext, height: number) {
+        let kwargs: Record<string, string> = {};
+        kwargs["screen"] = termContext.screenId;
+        kwargs["hohist"] = "1";
+        let posargs = [String(termContext.lineNum), String(height)];
+        GlobalModel.submitCommand("line", "setheight", posargs, kwargs, false);
+    }
+
+    screenSetAnchor(sessionId: string, screenId: string, anchorVal: string): void {
+        let kwargs = {
+            nohist: "1",
+            anchor: anchorVal,
+            session: sessionId,
+            screen: screenId,
+        };
+        GlobalModel.submitCommand("screen", "set", null, kwargs, false);
+    }
+
+    screenSetFocus(focusVal: string): void {
+        GlobalModel.submitCommand("screen", "set", null, { focus: focusVal, nohist: "1" }, false);
+    }
+
+    screenSetSettings(
+        screenId: string,
+        settings: { tabcolor?: string; name?: string; sharename?: string },
+        interactive: boolean
+    ): Promise<CommandRtnType> {
+        let kwargs = Object.assign({}, settings);
+        kwargs["nohist"] = "1";
+        kwargs["screen"] = screenId;
+        return GlobalModel.submitCommand("screen", "set", null, kwargs, interactive);
+    }
+
+    sessionArchive(sessionId: string, shouldArchive: boolean): Promise<CommandRtnType> {
+        return GlobalModel.submitCommand(
+            "session",
+            "archive",
+            [sessionId, shouldArchive ? "1" : "0"],
+            { nohist: "1" },
+            false
+        );
+    }
+
+    sessionPurge(sessionId: string): Promise<CommandRtnType> {
+        return GlobalModel.submitCommand("session", "purge", [sessionId], { nohist: "1" }, false);
+    }
+
+    sessionSetSettings(sessionId: string, settings: { name?: string }, interactive: boolean): Promise<CommandRtnType> {
+        let kwargs = Object.assign({}, settings);
+        kwargs["nohist"] = "1";
+        kwargs["session"] = sessionId;
+        return GlobalModel.submitCommand("session", "set", null, kwargs, interactive);
+    }
+
+    lineStar(lineId: string, starVal: number) {
+        GlobalModel.submitCommand("line", "star", [lineId, String(starVal)], { nohist: "1" }, true);
+    }
+
+    lineBookmark(lineId: string) {
+        GlobalModel.submitCommand("line", "bookmark", [lineId], { nohist: "1" }, true);
+    }
+
+    linePin(lineId: string, val: boolean) {
+        GlobalModel.submitCommand("line", "pin", [lineId, val ? "1" : "0"], { nohist: "1" }, true);
+    }
+
+    bookmarksView() {
+        GlobalModel.submitCommand("bookmarks", "show", null, { nohist: "1" }, true);
+    }
+
+    historyView(params: HistorySearchParams) {
+        let kwargs = { nohist: "1" };
+        kwargs["offset"] = String(params.offset);
+        kwargs["rawoffset"] = String(params.rawOffset);
+        if (params.searchText != null) {
+            kwargs["text"] = params.searchText;
+        }
+        if (params.searchSessionId != null) {
+            kwargs["searchsession"] = params.searchSessionId;
+        }
+        if (params.searchRemoteId != null) {
+            kwargs["searchremote"] = params.searchRemoteId;
+        }
+        if (params.fromTs != null) {
+            kwargs["fromts"] = String(params.fromTs);
+        }
+        if (params.noMeta) {
+            kwargs["meta"] = "0";
+        }
+        if (params.filterCmds) {
+            kwargs["filter"] = "1";
+        }
+        GlobalModel.submitCommand("history", "viewall", null, kwargs, true);
+    }
+
+    telemetryOff(interactive: boolean): Promise<CommandRtnType> {
+        return GlobalModel.submitCommand("telemetry", "off", null, { nohist: "1" }, interactive);
+    }
+
+    telemetryOn(interactive: boolean): Promise<CommandRtnType> {
+        return GlobalModel.submitCommand("telemetry", "on", null, { nohist: "1" }, interactive);
+    }
+
+    setTermFontSize(fsize: number, interactive: boolean): Promise<CommandRtnType> {
+        let kwargs = {
+            nohist: "1",
+            termfontsize: String(fsize),
+        };
+        return GlobalModel.submitCommand("client", "set", null, kwargs, interactive);
+    }
+
+    setClientOpenAISettings(opts: { model?: string; apitoken?: string; maxtokens?: string }): Promise<CommandRtnType> {
+        let kwargs = {
+            nohist: "1",
+        };
+        if (opts.model != null) {
+            kwargs["openaimodel"] = opts.model;
+        }
+        if (opts.apitoken != null) {
+            kwargs["openaiapitoken"] = opts.apitoken;
+        }
+        if (opts.maxtokens != null) {
+            kwargs["openaimaxtokens"] = opts.maxtokens;
+        }
+        return GlobalModel.submitCommand("client", "set", null, kwargs, false);
+    }
+
+    clientAcceptTos(): void {
+        GlobalModel.submitCommand("client", "accepttos", null, { nohist: "1" }, true);
+    }
+
+    editBookmark(bookmarkId: string, desc: string, cmdstr: string) {
+        let kwargs = {
+            nohist: "1",
+            desc: desc,
+            cmdstr: cmdstr,
+        };
+        GlobalModel.submitCommand("bookmark", "set", [bookmarkId], kwargs, true);
+    }
+
+    deleteBookmark(bookmarkId: string): void {
+        GlobalModel.submitCommand("bookmark", "delete", [bookmarkId], { nohist: "1" }, true);
+    }
+
+    openSharedSession(): void {
+        GlobalModel.submitCommand("session", "openshared", null, { nohist: "1" }, true);
+    }
 }
 
 function cmdPacketString(pk: FeCmdPacketType): string {
-  let cmd = pk.metacmd;
-  if (pk.metasubcmd != null) {
-    cmd += ":" + pk.metasubcmd;
-  }
-  let parts = [cmd];
-  if (pk.kwargs != null) {
-    for (let key in pk.kwargs) {
-      parts.push(sprintf("%s=%s", key, pk.kwargs[key]));
+    let cmd = pk.metacmd;
+    if (pk.metasubcmd != null) {
+        cmd += ":" + pk.metasubcmd;
     }
-  }
-  if (pk.args != null) {
-    parts.push(...pk.args);
-  }
-  return parts.join(" ");
+    let parts = [cmd];
+    if (pk.kwargs != null) {
+        for (let key in pk.kwargs) {
+            parts.push(sprintf("%s=%s", key, pk.kwargs[key]));
+        }
+    }
+    if (pk.args != null) {
+        parts.push(...pk.args);
+    }
+    return parts.join(" ");
 }
 
 function _getPtyDataFromUrl(url: string): Promise<PtyDataType> {
-  let ptyOffset = 0;
-  let fetchHeaders = GlobalModel.getFetchHeaders();
-  return fetch(url, { headers: fetchHeaders })
-    .then((resp) => {
-      if (!resp.ok) {
-        throw new Error(
-          sprintf(
-            "Bad fetch response for /api/ptyout: %d %s",
-            resp.status,
-            resp.statusText
-          )
-        );
-      }
-      let ptyOffsetStr = resp.headers.get("X-PtyDataOffset");
-      if (ptyOffsetStr != null && !isNaN(parseInt(ptyOffsetStr))) {
-        ptyOffset = parseInt(ptyOffsetStr);
-      }
-      return resp.arrayBuffer();
-    })
-    .then((buf) => {
-      return { pos: ptyOffset, data: new Uint8Array(buf) };
-    });
+    let ptyOffset = 0;
+    let fetchHeaders = GlobalModel.getFetchHeaders();
+    return fetch(url, { headers: fetchHeaders })
+        .then((resp) => {
+            if (!resp.ok) {
+                throw new Error(sprintf("Bad fetch response for /api/ptyout: %d %s", resp.status, resp.statusText));
+            }
+            let ptyOffsetStr = resp.headers.get("X-PtyDataOffset");
+            if (ptyOffsetStr != null && !isNaN(parseInt(ptyOffsetStr))) {
+                ptyOffset = parseInt(ptyOffsetStr);
+            }
+            return resp.arrayBuffer();
+        })
+        .then((buf) => {
+            return { pos: ptyOffset, data: new Uint8Array(buf) };
+        });
 }
 
 function getTermPtyData(termContext: TermContextUnion): Promise<PtyDataType> {
-  if ("remoteId" in termContext) {
-    return getRemotePtyData(termContext.remoteId);
-  }
-  return getPtyData(
-    termContext.screenId,
-    termContext.lineId,
-    termContext.lineNum
-  );
+    if ("remoteId" in termContext) {
+        return getRemotePtyData(termContext.remoteId);
+    }
+    return getPtyData(termContext.screenId, termContext.lineId, termContext.lineNum);
 }
 
-function getPtyData(
-  screenId: string,
-  lineId: string,
-  lineNum: number
-): Promise<PtyDataType> {
-  let url = sprintf(
-    GlobalModel.getBaseHostPort() +
-      "/api/ptyout?linenum=%d&screenid=%s&lineid=%s",
-    lineNum,
-    screenId,
-    lineId
-  );
-  return _getPtyDataFromUrl(url);
+function getPtyData(screenId: string, lineId: string, lineNum: number): Promise<PtyDataType> {
+    let url = sprintf(
+        GlobalModel.getBaseHostPort() + "/api/ptyout?linenum=%d&screenid=%s&lineid=%s",
+        lineNum,
+        screenId,
+        lineId
+    );
+    return _getPtyDataFromUrl(url);
 }
 
 function getRemotePtyData(remoteId: string): Promise<PtyDataType> {
-  let url = sprintf(
-    GlobalModel.getBaseHostPort() + "/api/remote-pty?remoteid=%s",
-    remoteId
-  );
-  return _getPtyDataFromUrl(url);
+    let url = sprintf(GlobalModel.getBaseHostPort() + "/api/remote-pty?remoteid=%s", remoteId);
+    return _getPtyDataFromUrl(url);
 }
 
 let GlobalModel: Model = null;
 let GlobalCommandRunner: CommandRunner = null;
 if ((window as any).GlobalModel == null) {
-  (window as any).GlobalModel = new Model();
-  (window as any).GlobalCommandRunner = new CommandRunner();
-  (window as any).getMonoFontSize = getMonoFontSize;
+    (window as any).GlobalModel = new Model();
+    (window as any).GlobalCommandRunner = new CommandRunner();
+    (window as any).getMonoFontSize = getMonoFontSize;
 }
 GlobalModel = (window as any).GlobalModel;
 GlobalCommandRunner = (window as any).GlobalCommandRunner;
 
 export {
-  Model,
-  Session,
-  ScreenLines,
-  GlobalModel,
-  GlobalCommandRunner,
-  Cmd,
-  Screen,
-  riToRPtr,
-  TabColors,
-  RemoteColors,
-  getTermPtyData,
-  RemotesModalModel,
+    Model,
+    Session,
+    ScreenLines,
+    GlobalModel,
+    GlobalCommandRunner,
+    Cmd,
+    Screen,
+    riToRPtr,
+    TabColors,
+    RemoteColors,
+    getTermPtyData,
+    RemotesModalModel,
 };
 export type { LineContainerModel };
diff --git a/src/plugins.ts b/src/plugins.ts
index 43339a63..f8192456 100644
--- a/src/plugins.ts
+++ b/src/plugins.ts
@@ -8,103 +8,99 @@ import { isBlank } from "./util";
 import { sprintf } from "sprintf-js";
 
 const ImagePlugin: RendererPluginType = {
-  name: "image",
-  rendererType: "simple",
-  heightType: "pixels",
-  dataType: "blob",
-  collapseType: "hide",
-  globalCss: null,
-  mimeTypes: ["image/*"],
-  simpleComponent: SimpleImageRenderer,
+    name: "image",
+    rendererType: "simple",
+    heightType: "pixels",
+    dataType: "blob",
+    collapseType: "hide",
+    globalCss: null,
+    mimeTypes: ["image/*"],
+    simpleComponent: SimpleImageRenderer,
 };
 
 const MarkdownPlugin: RendererPluginType = {
-  name: "markdown",
-  rendererType: "simple",
-  heightType: "pixels",
-  dataType: "blob",
-  collapseType: "hide",
-  globalCss: null,
-  mimeTypes: ["text/markdown"],
-  simpleComponent: SimpleMarkdownRenderer,
+    name: "markdown",
+    rendererType: "simple",
+    heightType: "pixels",
+    dataType: "blob",
+    collapseType: "hide",
+    globalCss: null,
+    mimeTypes: ["text/markdown"],
+    simpleComponent: SimpleMarkdownRenderer,
 };
 
 const JsonPlugin: RendererPluginType = {
-  name: "json",
-  rendererType: "simple",
-  heightType: "pixels",
-  dataType: "blob",
-  collapseType: "hide",
-  globalCss: null,
-  mimeTypes: ["application/json"],
-  simpleComponent: SimpleJsonRenderer,
+    name: "json",
+    rendererType: "simple",
+    heightType: "pixels",
+    dataType: "blob",
+    collapseType: "hide",
+    globalCss: null,
+    mimeTypes: ["application/json"],
+    simpleComponent: SimpleJsonRenderer,
 };
 
 const CodePlugin: RendererPluginType = {
-  name: "code",
-  rendererType: "simple",
-  heightType: "pixels",
-  dataType: "blob",
-  collapseType: "hide",
-  globalCss: null,
-  mimeTypes: ["text/plain"],
-  simpleComponent: SourceCodeRenderer,
+    name: "code",
+    rendererType: "simple",
+    heightType: "pixels",
+    dataType: "blob",
+    collapseType: "hide",
+    globalCss: null,
+    mimeTypes: ["text/plain"],
+    simpleComponent: SourceCodeRenderer,
 };
 
 const OpenAIPlugin: RendererPluginType = {
-  name: "openai",
-  rendererType: "full",
-  heightType: "pixels",
-  dataType: "model",
-  collapseType: "remove",
-  hidePrompt: true,
-  globalCss: null,
-  mimeTypes: ["application/json"],
-  fullComponent: OpenAIRenderer,
-  modelCtor: () => new OpenAIRendererModel(),
+    name: "openai",
+    rendererType: "full",
+    heightType: "pixels",
+    dataType: "model",
+    collapseType: "remove",
+    hidePrompt: true,
+    globalCss: null,
+    mimeTypes: ["application/json"],
+    fullComponent: OpenAIRenderer,
+    modelCtor: () => new OpenAIRendererModel(),
 };
 
 class PluginModelClass {
-  rendererPlugins: RendererPluginType[] = [];
+    rendererPlugins: RendererPluginType[] = [];
 
-  registerRendererPlugin(plugin: RendererPluginType) {
-    if (isBlank(plugin.name)) {
-      throw new Error("invalid plugin, no name");
+    registerRendererPlugin(plugin: RendererPluginType) {
+        if (isBlank(plugin.name)) {
+            throw new Error("invalid plugin, no name");
+        }
+        if (plugin.name == "terminal" || plugin.name == "none") {
+            throw new Error(sprintf("invalid plugin, name '%s' is reserved", plugin.name));
+        }
+        let existingPlugin = this.getRendererPluginByName(plugin.name);
+        if (existingPlugin != null) {
+            throw new Error(sprintf("plugin with name %s already registered", plugin.name));
+        }
+        this.rendererPlugins.push(plugin);
     }
-    if (plugin.name == "terminal" || plugin.name == "none") {
-      throw new Error(
-        sprintf("invalid plugin, name '%s' is reserved", plugin.name)
-      );
-    }
-    let existingPlugin = this.getRendererPluginByName(plugin.name);
-    if (existingPlugin != null) {
-      throw new Error(
-        sprintf("plugin with name %s already registered", plugin.name)
-      );
-    }
-    this.rendererPlugins.push(plugin);
-  }
 
-  getRendererPluginByName(name: string): RendererPluginType {
-    for (let i = 0; i < this.rendererPlugins.length; i++) {
-      let plugin = this.rendererPlugins[i];
-      if (plugin.name == name) {
-        return plugin;
-      }
+    getRendererPluginByName(name: string): RendererPluginType {
+        for (let i = 0; i < this.rendererPlugins.length; i++) {
+            let plugin = this.rendererPlugins[i];
+            if (plugin.name == name) {
+                return plugin;
+            }
+        }
+        return null;
     }
-    return null;
-  }
 }
 
 let PluginModel: PluginModelClass = null;
 if ((window as any).PluginModel == null) {
-  PluginModel = new PluginModelClass();
-  PluginModel.registerRendererPlugin(ImagePlugin);
-  PluginModel.registerRendererPlugin(MarkdownPlugin);
-  PluginModel.registerRendererPlugin(JsonPlugin);
-  PluginModel.registerRendererPlugin(CodePlugin);
-  PluginModel.registerRendererPlugin(OpenAIPlugin);
-  (window as any).PluginModel = PluginModel;
+    PluginModel = new PluginModelClass();
+    PluginModel.registerRendererPlugin(ImagePlugin);
+    PluginModel.registerRendererPlugin(MarkdownPlugin);
+    PluginModel.registerRendererPlugin(JsonPlugin);
+    PluginModel.registerRendererPlugin(CodePlugin);
+    PluginModel.registerRendererPlugin(OpenAIPlugin);
+    (window as any).PluginModel = PluginModel;
 }
 
 export { PluginModel };
diff --git a/src/preload.js b/src/preload.js
index 546afb77..8ccc44e6 100644
--- a/src/preload.js
+++ b/src/preload.js
@@ -1,4 +1,4 @@
-let {contextBridge, ipcRenderer} = require("electron");
+let { contextBridge, ipcRenderer } = require("electron");
 
 contextBridge.exposeInMainWorld("api", {
     getId: () => ipcRenderer.sendSync("get-id"),
diff --git a/src/prompt.less b/src/prompt.less
index 766f1d8e..3db218fb 100644
--- a/src/prompt.less
+++ b/src/prompt.less
@@ -47,259 +47,259 @@
 // global settings / overrides
 
 :root {
-  --fa-style-family: "Font Awesome 6 Sharp";
+    --fa-style-family: "Font Awesome 6 Sharp";
 }
 
 html,
 body,
 #app,
 #main {
-  background-color: #000;
-  height: 100vh;
+    background-color: #000;
+    height: 100vh;
 }
 
 .content {
-  a:hover {
-    color: #485fc7;
-  }
+    a:hover {
+        color: #485fc7;
+    }
 }
 
 body {
-  overflow: hidden;
+    overflow: hidden;
 }
 
 body::-webkit-scrollbar {
-  display: none;
+    display: none;
 }
 
 *::-webkit-scrollbar {
-  background-color: #777;
-  width: 5px;
-  height: 5px;
+    background-color: #777;
+    width: 5px;
+    height: 5px;
 }
 
 *::-webkit-scrollbar-thumb {
-  background: white;
+    background: white;
 }
 
 input[type="checkbox"] {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 // main layout
 #main {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-
-  .main-content {
+    height: 100vh;
     display: flex;
-    flex-direction: row;
-    background-color: black;
-    height: 100%;
+    flex-direction: column;
 
-    .session-view,
-    .history-view,
-    .bookmarks-view {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      min-width: 300px;
-      position: relative;
-
-      &.is-hidden {
-        display: none;
-      }
-    }
-
-    .screen-view {
-      flex-grow: 1;
-      border-right: 1px solid #ccc;
-      position: relative;
-    }
-
-    .window-view {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-
-      .rendermode-tag {
-        position: absolute;
-        top: 0;
-        right: 0;
-        background-color: rgba(78, 154, 6, 0.65);
-        color: black;
-        padding: 2px 8px 2px 4px;
-        border-bottom-left-radius: 5px;
-        z-index: 10;
-        font-size: 12px;
-
-        &.is-active {
-          color: #ccc;
-        }
-
-        .render-mode {
-          padding-top: 2px;
-          font-size: 16px;
-          position: relative;
-          cursor: pointer;
-          color: #ccc;
-
-          &:hover {
-            color: white;
-          }
-        }
-      }
-
-      .share-tag {
-        color: #ccc;
-        position: absolute;
-        top: 0;
-        left: 40%;
-        background-color: darken(rgb(0, 177, 10), 20%);
-        padding: 2px 8px 2px 4px;
-        z-index: 11;
-        font-size: 12px;
-        /* border-radius: 0 0 5px 5px; */
-        opacity: 0.8;
+    .main-content {
         display: flex;
-        flex-direction: column;
-
-        .share-tag-link {
-          margin-top: 10px;
-          display: none;
-        }
-
-        &:hover {
-          .share-tag-title {
-            font-size: 14px;
-            font-weight: bold;
-          }
-          opacity: 1;
-          padding: 20px;
-          width: 250px;
-          border: 1px solid #ccc;
-          border-top: 0;
-
-          .share-tag-link {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            gap: 10px;
-          }
-        }
-      }
-
-      .window-empty {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        padding: 10px;
+        flex-direction: row;
+        background-color: black;
         height: 100%;
-        color: #ccc;
-        .mono-font();
 
-        code {
-          background-color: black;
-          color: #4e9a06;
+        .session-view,
+        .history-view,
+        .bookmarks-view {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            min-width: 300px;
+            position: relative;
+
+            &.is-hidden {
+                display: none;
+            }
         }
 
-        &.should-fade {
-          opacity: 1;
-          animation: fade-in 2.5s;
+        .screen-view {
+            flex-grow: 1;
+            border-right: 1px solid #ccc;
+            position: relative;
+        }
+
+        .window-view {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+
+            .rendermode-tag {
+                position: absolute;
+                top: 0;
+                right: 0;
+                background-color: rgba(78, 154, 6, 0.65);
+                color: black;
+                padding: 2px 8px 2px 4px;
+                border-bottom-left-radius: 5px;
+                z-index: 10;
+                font-size: 12px;
+
+                &.is-active {
+                    color: #ccc;
+                }
+
+                .render-mode {
+                    padding-top: 2px;
+                    font-size: 16px;
+                    position: relative;
+                    cursor: pointer;
+                    color: #ccc;
+
+                    &:hover {
+                        color: white;
+                    }
+                }
+            }
+
+            .share-tag {
+                color: #ccc;
+                position: absolute;
+                top: 0;
+                left: 40%;
+                background-color: darken(rgb(0, 177, 10), 20%);
+                padding: 2px 8px 2px 4px;
+                z-index: 11;
+                font-size: 12px;
+                /* border-radius: 0 0 5px 5px; */
+                opacity: 0.8;
+                display: flex;
+                flex-direction: column;
+
+                .share-tag-link {
+                    margin-top: 10px;
+                    display: none;
+                }
+
+                &:hover {
+                    .share-tag-title {
+                        font-size: 14px;
+                        font-weight: bold;
+                    }
+                    opacity: 1;
+                    padding: 20px;
+                    width: 250px;
+                    border: 1px solid #ccc;
+                    border-top: 0;
+
+                    .share-tag-link {
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+                        gap: 10px;
+                    }
+                }
+            }
+
+            .window-empty {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                padding: 10px;
+                height: 100%;
+                color: #ccc;
+                .mono-font();
+
+                code {
+                    background-color: black;
+                    color: #4e9a06;
+                }
+
+                &.should-fade {
+                    opacity: 1;
+                    animation: fade-in 2.5s;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 .remote-field .remote-status {
-  top: 4px;
+    top: 4px;
 }
 
 .image-renderer {
-  padding: 10px;
-  img {
-    display: block;
-  }
+    padding: 10px;
+    img {
+        display: block;
+    }
 }
 
 .renderer-container {
-  .error-container {
-    color: @term-red;
-    font-size: 14px;
-    padding: 5px;
-  }
+    .error-container {
+        color: @term-red;
+        font-size: 14px;
+        padding: 5px;
+    }
 
-  .scroller {
-    overflow: auto;
-    display: flex;
-    flex-direction: row;
-  }
+    .scroller {
+        overflow: auto;
+        display: flex;
+        flex-direction: row;
+    }
 }
 
 .renderer-container.code-renderer {
-  margin-top: 10px;
+    margin-top: 10px;
 }
 
 .renderer-container.json-renderer {
-  padding: 10px;
-  font-size: 12px;
+    padding: 10px;
+    font-size: 12px;
 }
 
 .markdown-renderer .markdown {
-  padding: 5px;
-  line-height: 1.5;
-  width: fit-content;
+    padding: 5px;
+    line-height: 1.5;
+    width: fit-content;
 
-  blockquote {
-    background-color: #222;
-  }
+    blockquote {
+        background-color: #222;
+    }
 
-  code {
-    background-color: #222;
-    font-size: 14px;
-  }
+    code {
+        background-color: #222;
+        font-size: 14px;
+    }
 
-  pre {
-    background-color: #222;
-    margin: 2px 10px 6px 10px;
-    padding: 4px 4px 4px 6px;
-  }
+    pre {
+        background-color: #222;
+        margin: 2px 10px 6px 10px;
+        padding: 4px 4px 4px 6px;
+    }
 }
 
 .openai-renderer {
-  .openai-message {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
+    .openai-message {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
 
-    .openai-role {
-      color: @term-bright-green;
-      font-weight: bold;
-      width: 100px;
-    }
+        .openai-role {
+            color: @term-bright-green;
+            font-weight: bold;
+            width: 100px;
+        }
 
-    .openai-role.openai-role-assistant {
-      color: @term-bright-white;
-    }
+        .openai-role.openai-role-assistant {
+            color: @term-bright-white;
+        }
 
-    .openai-content-user {
-      white-space: pre;
-      color: white;
-    }
+        .openai-content-user {
+            white-space: pre;
+            color: white;
+        }
 
-    .openai-content-assistant {
-      color: white;
-    }
+        .openai-content-assistant {
+            color: white;
+        }
 
-    .openai-role-error {
-      color: @term-bright-red;
-    }
+        .openai-role-error {
+            color: @term-bright-red;
+        }
 
-    .openai-content-error {
-      color: @term-bright-red;
+        .openai-content-error {
+            color: @term-bright-red;
+        }
     }
-  }
 }
diff --git a/src/prompt.ts b/src/prompt.ts
index 4c942c6e..2eafd5ae 100644
--- a/src/prompt.ts
+++ b/src/prompt.ts
@@ -1,12 +1,12 @@
 import * as mobx from "mobx";
 import * as React from "react";
-import {createRoot} from 'react-dom/client';
-import {sprintf} from "sprintf-js";
-import {Terminal} from 'xterm';
-import {Main} from "./main";
-import {GlobalModel} from "./model";
-import {v4 as uuidv4} from "uuid";
-import {loadFonts} from "./util";
+import { createRoot } from "react-dom/client";
+import { sprintf } from "sprintf-js";
+import { Terminal } from "xterm";
+import { Main } from "./main";
+import { GlobalModel } from "./model";
+import { v4 as uuidv4 } from "uuid";
+import { loadFonts } from "./util";
 
 // @ts-ignore
 let VERSION = __PROMPT_VERSION__;
@@ -22,8 +22,7 @@ document.addEventListener("DOMContentLoaded", () => {
     let isFontLoaded = document.fonts.check("12px 'JetBrains Mono'");
     if (isFontLoaded) {
         root.render(reactElem);
-    }
-    else {
+    } else {
         document.fonts.ready.then(() => {
             root.render(reactElem);
         });
@@ -33,4 +32,4 @@ document.addEventListener("DOMContentLoaded", () => {
 (window as any).mobx = mobx;
 (window as any).sprintf = sprintf;
 
-console.log("PROMPT", VERSION, BUILD)
+console.log("PROMPT", VERSION, BUILD);
diff --git a/src/ptydata.ts b/src/ptydata.ts
index 0d57cbbe..95acd251 100644
--- a/src/ptydata.ts
+++ b/src/ptydata.ts
@@ -1,23 +1,23 @@
 import * as mobx from "mobx";
-import {incObs} from "./util";
+import { incObs } from "./util";
 
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
-type OMap<K,V> = mobx.ObservableMap<K,V>;
+type OMap<K, V> = mobx.ObservableMap<K, V>;
 
-const InitialSize = 10*1024;
+const InitialSize = 10 * 1024;
 const IncreaseFactor = 1.5;
 
 class PtyDataBuffer {
-    ptyPos : number;
-    dataVersion : mobx.IObservableValue<number>;
-    brokenData : boolean;
-    rawData : Uint8Array;
-    dataSize : number;
+    ptyPos: number;
+    dataVersion: mobx.IObservableValue<number>;
+    brokenData: boolean;
+    rawData: Uint8Array;
+    dataSize: number;
 
     constructor() {
         this.ptyPos = 0;
-        this.dataVersion = mobx.observable.box(0, {name: "dataVersion"});
+        this.dataVersion = mobx.observable.box(0, { name: "dataVersion" });
         this._resetData();
     }
 
@@ -27,15 +27,15 @@ class PtyDataBuffer {
         this.brokenData = false;
     }
 
-    reset() : void {
+    reset(): void {
         this._resetData();
     }
 
-    getData() : Uint8Array {
+    getData(): Uint8Array {
         return this.rawData.slice(0, this.dataSize);
     }
 
-    _growArray(minSize : number) : void {
+    _growArray(minSize: number): void {
         let newSize = Math.round(this.rawData.length * IncreaseFactor);
         if (newSize < minSize) {
             newSize = minSize;
@@ -45,7 +45,7 @@ class PtyDataBuffer {
         this.rawData = newData;
     }
 
-    receiveData(pos : number, data : Uint8Array, reason? : string) : void {
+    receiveData(pos: number, data: Uint8Array, reason?: string): void {
         if (pos != this.dataSize) {
             this.brokenData = true;
             return;
@@ -62,21 +62,21 @@ class PtyDataBuffer {
 const NewLineCharCode = "\n".charCodeAt(0);
 
 class PacketDataBuffer extends PtyDataBuffer {
-    parsePos : number;
-    callback : (any) => void;
+    parsePos: number;
+    callback: (any) => void;
 
-    constructor(callback : (any) => void) {
+    constructor(callback: (any) => void) {
         super();
         this.parsePos = 0;
         this.callback = callback;
     }
 
-    reset() : void {
+    reset(): void {
         super.reset();
         this.parsePos = 0;
     }
 
-    processLine(line : string) {
+    processLine(line: string) {
         if (line.length == 0) {
             return;
         }
@@ -97,11 +97,10 @@ class PacketDataBuffer extends PtyDataBuffer {
                 console.log("invalid line packet", line);
             }
         }
-        let packet : any = null;
+        let packet: any = null;
         try {
             packet = JSON.parse(packetStr);
-        }
-        catch (e) {
+        } catch (e) {
             console.log("invalid line packet (bad json)", line, e);
             return;
         }
@@ -111,22 +110,24 @@ class PacketDataBuffer extends PtyDataBuffer {
     }
 
     parseData() {
-        for (let i=this.parsePos; i<this.dataSize; i++) {
+        for (let i = this.parsePos; i < this.dataSize; i++) {
             let ch = this.rawData[i];
             if (ch == NewLineCharCode) {
                 // line does *not* include the newline
-                let line = (new TextDecoder()).decode(new Uint8Array(this.rawData.buffer, this.parsePos, i-this.parsePos));
-                this.parsePos = i+1;
+                let line = new TextDecoder().decode(
+                    new Uint8Array(this.rawData.buffer, this.parsePos, i - this.parsePos)
+                );
+                this.parsePos = i + 1;
                 this.processLine(line);
             }
         }
         return;
     }
-    
-    receiveData(pos : number, data : Uint8Array, reason? : string) : void {
+
+    receiveData(pos: number, data: Uint8Array, reason?: string): void {
         super.receiveData(pos, data, reason);
         this.parseData();
     }
 }
 
-export {PtyDataBuffer, PacketDataBuffer};
+export { PtyDataBuffer, PacketDataBuffer };
diff --git a/src/remotes.tsx b/src/remotes.tsx
index 5de1edb7..0cd9edd2 100644
--- a/src/remotes.tsx
+++ b/src/remotes.tsx
@@ -1,33 +1,33 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
 import cn from "classnames";
-import {GlobalModel, GlobalCommandRunner, getTermPtyData, RemotesModalModel} from "./model";
-import {Toggle, RemoteStatusLight, InlineSettingsTextEdit, InfoMessage} from "./elements";
-import {RemoteType, RemoteInputPacketType, RemoteEditType} from "./types";
+import { GlobalModel, GlobalCommandRunner, getTermPtyData, RemotesModalModel } from "./model";
+import { Toggle, RemoteStatusLight, InlineSettingsTextEdit, InfoMessage } from "./elements";
+import { RemoteType, RemoteInputPacketType, RemoteEditType } from "./types";
 import * as util from "./util";
 import * as textmeasure from "./textmeasure";
-import {TermWrap} from "./term";
+import { TermWrap } from "./term";
 
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
-type OMap<K,V> = mobx.ObservableMap<K,V>;
+type OMap<K, V> = mobx.ObservableMap<K, V>;
 
 const RemotePtyRows = 8;
 const RemotePtyCols = 80;
 const PasswordUnchangedSentinel = "--unchanged--";
 
-function getRemoteCNWithPort(remote : RemoteType) {
+function getRemoteCNWithPort(remote: RemoteType) {
     if (util.isBlank(remote.remotevars.port) || remote.remotevars.port == "22") {
         return remote.remotecanonicalname;
     }
     return remote.remotecanonicalname + ":" + remote.remotevars.port;
 }
 
-function getRemoteTitle(remote : RemoteType) {
+function getRemoteTitle(remote: RemoteType) {
     if (!util.isBlank(remote.remotealias)) {
         return remote.remotealias + " (" + remote.remotecanonicalname + ")";
     }
@@ -35,31 +35,31 @@ function getRemoteTitle(remote : RemoteType) {
 }
 
 @mobxReact.observer
-class AuthModeDropdown extends React.Component<{tempVal : OV<string>}, {}> {
-    active : OV<boolean> = mobx.observable.box(false, {name: "AuthModeDropdown-active"});
+class AuthModeDropdown extends React.Component<{ tempVal: OV<string> }, {}> {
+    active: OV<boolean> = mobx.observable.box(false, { name: "AuthModeDropdown-active" });
 
     @boundMethod
-    toggleActive() : void {
+    toggleActive(): void {
         mobx.action(() => {
             this.active.set(!this.active.get());
         })();
     }
 
     @boundMethod
-    updateValue(val : string) : void {
+    updateValue(val: string): void {
         mobx.action(() => {
             this.props.tempVal.set(val);
             this.active.set(false);
         })();
     }
-    
+
     render() {
         return (
-            <div className={cn("dropdown", "editremote-dropdown", {"is-active": this.active.get()})}>
+            <div className={cn("dropdown", "editremote-dropdown", { "is-active": this.active.get() })}>
                 <div className="dropdown-trigger">
                     <button onClick={this.toggleActive} className="button is-small is-dark">
                         <span>{this.props.tempVal.get()}</span>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
                         <span className="icon is-small">
                             <i className="fa-sharp fa-regular fa-angle-down" aria-hidden="true"></i>
                         </span>
@@ -67,10 +67,22 @@ class AuthModeDropdown extends React.Component<{tempVal : OV<string>}, {}> {
                 </div>
                 <div className="dropdown-menu" role="menu">
                     <div className="dropdown-content has-background-black">
-                        <div key="none" onClick={() => this.updateValue("none") } className="dropdown-item">none</div>
-                        <div key="key" onClick={() => this.updateValue("key") } className="dropdown-item">key</div>
-                        <div key="password" onClick={() => this.updateValue("password") } className="dropdown-item">password</div>
-                        <div key="key+password" onClick={() => this.updateValue("key+password") } className="dropdown-item">key+password</div>
+                        <div key="none" onClick={() => this.updateValue("none")} className="dropdown-item">
+                            none
+                        </div>
+                        <div key="key" onClick={() => this.updateValue("key")} className="dropdown-item">
+                            key
+                        </div>
+                        <div key="password" onClick={() => this.updateValue("password")} className="dropdown-item">
+                            password
+                        </div>
+                        <div
+                            key="key+password"
+                            onClick={() => this.updateValue("key+password")}
+                            className="dropdown-item"
+                        >
+                            key+password
+                        </div>
                     </div>
                 </div>
             </div>
@@ -79,31 +91,31 @@ class AuthModeDropdown extends React.Component<{tempVal : OV<string>}, {}> {
 }
 
 @mobxReact.observer
-class ConnectModeDropdown extends React.Component<{tempVal : OV<string>}, {}> {
-    active : OV<boolean> = mobx.observable.box(false, {name: "ConnectModeDropdown-active"});
+class ConnectModeDropdown extends React.Component<{ tempVal: OV<string> }, {}> {
+    active: OV<boolean> = mobx.observable.box(false, { name: "ConnectModeDropdown-active" });
 
     @boundMethod
-    toggleActive() : void {
+    toggleActive(): void {
         mobx.action(() => {
             this.active.set(!this.active.get());
         })();
     }
 
     @boundMethod
-    updateValue(val : string) : void {
+    updateValue(val: string): void {
         mobx.action(() => {
             this.props.tempVal.set(val);
             this.active.set(false);
         })();
     }
-    
+
     render() {
         return (
-            <div className={cn("dropdown", "editremote-dropdown", {"is-active": this.active.get()})}>
+            <div className={cn("dropdown", "editremote-dropdown", { "is-active": this.active.get() })}>
                 <div className="dropdown-trigger">
                     <button onClick={this.toggleActive} className="button is-small is-dark">
                         <span>{this.props.tempVal.get()}</span>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
                         <span className="icon is-small">
                             <i className="fa-sharp fa-regular fa-angle-down" aria-hidden="true"></i>
                         </span>
@@ -111,9 +123,15 @@ class ConnectModeDropdown extends React.Component<{tempVal : OV<string>}, {}> {
                 </div>
                 <div className="dropdown-menu" role="menu">
                     <div className="dropdown-content has-background-black">
-                        <div key="startup" onClick={() => this.updateValue("startup") } className="dropdown-item">startup</div>
-                        <div key="auto" onClick={() => this.updateValue("auto") } className="dropdown-item">auto</div>
-                        <div key="manual" onClick={() => this.updateValue("manual") } className="dropdown-item">manual</div>
+                        <div key="startup" onClick={() => this.updateValue("startup")} className="dropdown-item">
+                            startup
+                        </div>
+                        <div key="auto" onClick={() => this.updateValue("auto")} className="dropdown-item">
+                            auto
+                        </div>
+                        <div key="manual" onClick={() => this.updateValue("manual")} className="dropdown-item">
+                            manual
+                        </div>
                     </div>
                 </div>
             </div>
@@ -122,33 +140,33 @@ class ConnectModeDropdown extends React.Component<{tempVal : OV<string>}, {}> {
 }
 
 @mobxReact.observer
-class CreateRemote extends React.Component<{model : RemotesModalModel, remoteEdit : RemoteEditType}, {}> {
-    tempAlias : OV<string>
-    tempHostName : OV<string>;
-    tempPort : OV<string>;
-    tempAuthMode : OV<string>;
-    tempConnectMode : OV<string>;
-    tempManualMode : OV<boolean>;
-    tempPassword : OV<string>;
-    tempKeyFile : OV<string>;
-    tempAutoInstall : OV<boolean>;
-    errorStr : OV<string>;
+class CreateRemote extends React.Component<{ model: RemotesModalModel; remoteEdit: RemoteEditType }, {}> {
+    tempAlias: OV<string>;
+    tempHostName: OV<string>;
+    tempPort: OV<string>;
+    tempAuthMode: OV<string>;
+    tempConnectMode: OV<string>;
+    tempManualMode: OV<boolean>;
+    tempPassword: OV<string>;
+    tempKeyFile: OV<string>;
+    tempAutoInstall: OV<boolean>;
+    errorStr: OV<string>;
 
-    constructor(props : any) {
+    constructor(props: any) {
         super(props);
-        let {remoteEdit} = this.props;
-        this.tempAlias = mobx.observable.box("", {name: "CreateRemote-alias"});
-        this.tempHostName = mobx.observable.box("", {name: "CreateRemote-hostName"});
-        this.tempPort = mobx.observable.box("", {name: "CreateRemote-port"});
-        this.tempAuthMode = mobx.observable.box("none", {name: "CreateRemote-authMode"});
-        this.tempConnectMode = mobx.observable.box("auto", {name: "CreateRemote-connectMode"});
-        this.tempKeyFile = mobx.observable.box("", {name: "CreateRemote-keystr"});
-        this.tempPassword = mobx.observable.box("", {name: "CreateRemote-password"});
-        this.tempAutoInstall = mobx.observable.box(true, {name: "CreateRemote-autoinstall"});
-        this.errorStr = mobx.observable.box(remoteEdit.errorstr, {name: "CreateRemote-errorStr"});
+        let { remoteEdit } = this.props;
+        this.tempAlias = mobx.observable.box("", { name: "CreateRemote-alias" });
+        this.tempHostName = mobx.observable.box("", { name: "CreateRemote-hostName" });
+        this.tempPort = mobx.observable.box("", { name: "CreateRemote-port" });
+        this.tempAuthMode = mobx.observable.box("none", { name: "CreateRemote-authMode" });
+        this.tempConnectMode = mobx.observable.box("auto", { name: "CreateRemote-connectMode" });
+        this.tempKeyFile = mobx.observable.box("", { name: "CreateRemote-keystr" });
+        this.tempPassword = mobx.observable.box("", { name: "CreateRemote-password" });
+        this.tempAutoInstall = mobx.observable.box(true, { name: "CreateRemote-autoinstall" });
+        this.errorStr = mobx.observable.box(remoteEdit.errorstr, { name: "CreateRemote-errorStr" });
     }
 
-    remoteCName() : string {
+    remoteCName(): string {
         let hostName = this.tempHostName.get();
         if (hostName == "") {
             return "[no host]";
@@ -159,7 +177,7 @@ class CreateRemote extends React.Component<{model : RemotesModalModel, remoteEdi
         return hostName;
     }
 
-    getErrorStr() : string {
+    getErrorStr(): string {
         if (this.errorStr.get() != null) {
             return this.errorStr.get();
         }
@@ -167,7 +185,7 @@ class CreateRemote extends React.Component<{model : RemotesModalModel, remoteEdi
     }
 
     @boundMethod
-    submitRemote() : void {
+    submitRemote(): void {
         mobx.action(() => {
             this.errorStr.set(null);
         })();
@@ -177,7 +195,7 @@ class CreateRemote extends React.Component<{model : RemotesModalModel, remoteEdi
             this.errorStr.set("You must specify a 'user@host' value to create a new connection");
             return;
         }
-        let kwargs : Record<string, string> = {};
+        let kwargs: Record<string, string> = {};
         kwargs["alias"] = this.tempAlias.get();
         if (this.tempPort.get() != "" && this.tempPort.get() != "22") {
             kwargs["port"] = this.tempPort.get();
@@ -188,8 +206,7 @@ class CreateRemote extends React.Component<{model : RemotesModalModel, remoteEdi
                 return;
             }
             kwargs["key"] = this.tempKeyFile.get();
-        }
-        else {
+        } else {
             kwargs["key"] = "";
         }
         if (authMode == "password" || authMode == "key+password") {
@@ -198,61 +215,60 @@ class CreateRemote extends React.Component<{model : RemotesModalModel, remoteEdi
                 return;
             }
             kwargs["password"] = this.tempPassword.get();
-        }
-        else {
-            kwargs["password"] = ""
+        } else {
+            kwargs["password"] = "";
         }
         kwargs["connectmode"] = this.tempConnectMode.get();
-        kwargs["autoinstall"] = (this.tempAutoInstall.get() ? "1" : "0");
+        kwargs["autoinstall"] = this.tempAutoInstall.get() ? "1" : "0";
         kwargs["visual"] = "1";
         kwargs["submit"] = "1";
         GlobalCommandRunner.createRemote(cname, kwargs);
     }
 
     @boundMethod
-    handleChangeKeyFile(e : any) : void {
+    handleChangeKeyFile(e: any): void {
         mobx.action(() => {
             this.tempKeyFile.set(e.target.value);
         })();
     }
 
     @boundMethod
-    handleChangePassword(e : any) : void {
+    handleChangePassword(e: any): void {
         mobx.action(() => {
             this.tempPassword.set(e.target.value);
         })();
     }
 
     @boundMethod
-    handleChangeAlias(e : any) : void {
+    handleChangeAlias(e: any): void {
         mobx.action(() => {
             this.tempAlias.set(e.target.value);
         })();
     }
 
     @boundMethod
-    handleChangePort(e : any) : void {
+    handleChangePort(e: any): void {
         mobx.action(() => {
             this.tempPort.set(e.target.value);
         })();
     }
 
     @boundMethod
-    handleChangeHostName(e : any) : void {
+    handleChangeHostName(e: any): void {
         mobx.action(() => {
             this.tempHostName.set(e.target.value);
         })();
     }
 
     @boundMethod
-    handleChangeAutoInstall(val : boolean) : void {
+    handleChangeAutoInstall(val: boolean): void {
         mobx.action(() => {
             this.tempAutoInstall.set(val);
         })();
     }
-    
+
     render() {
-        let {model, remoteEdit} = this.props;
+        let { model, remoteEdit } = this.props;
         let authMode = this.tempAuthMode.get();
         return (
             <div className="remote-detail create-remote">
@@ -260,114 +276,171 @@ class CreateRemote extends React.Component<{model : RemotesModalModel, remoteEdi
                 <div className="settings-field mt-3">
                     <div className="settings-label">
                         <div>user@host</div>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
                         <InfoMessage width={400}>
-                            (Required) The user and host that you want to connect with.  This is in the same format as you would pass to ssh, e.g. "ubuntu@test.mydomain.com".
+                            (Required) The user and host that you want to connect with. This is in the same format as
+                            you would pass to ssh, e.g. "ubuntu@test.mydomain.com".
                         </InfoMessage>
                     </div>
                     <div className="settings-input">
-                        <input type="text" placeholder="user@host" onChange={this.handleChangeHostName} value={this.tempHostName.get()} maxLength={100}/>
+                        <input
+                            type="text"
+                            placeholder="user@host"
+                            onChange={this.handleChangeHostName}
+                            value={this.tempHostName.get()}
+                            maxLength={100}
+                        />
                     </div>
                 </div>
                 <div className="settings-field">
                     <div className="settings-label">
                         <div>Alias</div>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
                         <InfoMessage width={400}>
                             (Optional) A short alias to use when selecting or displaying this connection.
                         </InfoMessage>
                     </div>
                     <div className="settings-input">
-                        <input type="text" onChange={this.handleChangeAlias} value={this.tempAlias.get()} maxLength={40}/>
+                        <input
+                            type="text"
+                            onChange={this.handleChangeAlias}
+                            value={this.tempAlias.get()}
+                            maxLength={40}
+                        />
                     </div>
                 </div>
                 <div className="settings-field">
                     <div className="settings-label">
                         <div>Port</div>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
                         <InfoMessage width={400}>
-                            (Optional) Defaults to 22.  Set if the server you are connecting to listens to a non-standard SSH port.
+                            (Optional) Defaults to 22. Set if the server you are connecting to listens to a non-standard
+                            SSH port.
                         </InfoMessage>
                     </div>
                     <div className="settings-input">
-                        <input type="number" placeholder="22" onChange={this.handleChangePort} value={this.tempPort.get()}/>
+                        <input
+                            type="number"
+                            placeholder="22"
+                            onChange={this.handleChangePort}
+                            value={this.tempPort.get()}
+                        />
                     </div>
                 </div>
                 <div className="settings-field align-top">
                     <div className="settings-label">
                         <div>Auth Mode</div>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
                         <InfoMessage width={350}>
                             <ul>
-                                <li><b>none</b> - no authentication, or authentication is already configured in your ssh config.</li>
-                                <li><b>key</b> - use a private key.</li>
-                                <li><b>password</b> - use a password.</li>
-                                <li><b>key+password</b> - use a key with a passphrase.</li>
+                                <li>
+                                    <b>none</b> - no authentication, or authentication is already configured in your ssh
+                                    config.
+                                </li>
+                                <li>
+                                    <b>key</b> - use a private key.
+                                </li>
+                                <li>
+                                    <b>password</b> - use a password.
+                                </li>
+                                <li>
+                                    <b>key+password</b> - use a key with a passphrase.
+                                </li>
                             </ul>
                         </InfoMessage>
                     </div>
                     <div className="settings-input">
-                        <div className="raw-input"><AuthModeDropdown tempVal={this.tempAuthMode}/></div>
+                        <div className="raw-input">
+                            <AuthModeDropdown tempVal={this.tempAuthMode} />
+                        </div>
                     </div>
                 </div>
                 <If condition={authMode == "key" || authMode == "key+password"}>
-                    <div className="settings-field" style={{marginTop: 10}}>
-                        <div className="settings-label">
-                            SSH Keyfile
-                        </div>
+                    <div className="settings-field" style={{ marginTop: 10 }}>
+                        <div className="settings-label">SSH Keyfile</div>
                         <div className="settings-input">
-                            <input type="text" placeholder="keyfile" onChange={this.handleChangeKeyFile} value={this.tempKeyFile.get()} maxLength={400}/>
+                            <input
+                                type="text"
+                                placeholder="keyfile"
+                                onChange={this.handleChangeKeyFile}
+                                value={this.tempKeyFile.get()}
+                                maxLength={400}
+                            />
                         </div>
                     </div>
                 </If>
                 <If condition={authMode == "password" || authMode == "key+password"}>
-                    <div className="settings-field" style={{marginTop: 10}}>
+                    <div className="settings-field" style={{ marginTop: 10 }}>
                         <div className="settings-label">
                             {authMode == "password" ? "SSH Password" : "Key Passphrase"}
-            </div>
-            <div className="settings-input">
-                <input type="password" placeholder="password" onChange={this.handleChangePassword} value={this.tempPassword.get()} maxLength={400}/>
-            </div>
-            </div>
+                        </div>
+                        <div className="settings-input">
+                            <input
+                                type="password"
+                                placeholder="password"
+                                onChange={this.handleChangePassword}
+                                value={this.tempPassword.get()}
+                                maxLength={400}
+                            />
+                        </div>
+                    </div>
                 </If>
-                <div className="settings-field align-top" style={{marginTop: 10}}>
+                <div className="settings-field align-top" style={{ marginTop: 10 }}>
                     <div className="settings-label">
                         <div>Connect Mode</div>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
                         <InfoMessage width={350}>
                             <ul>
-                                <li><b>startup</b> - connect when [prompt] starts.</li>
-                                <li><b>auto</b> - connect when you first run a command using this connection.</li>
-                                <li><b>manual</b> - connect manually. Note, if your connection requires manual input, like an OPT code, you must use this setting.</li>
+                                <li>
+                                    <b>startup</b> - connect when [prompt] starts.
+                                </li>
+                                <li>
+                                    <b>auto</b> - connect when you first run a command using this connection.
+                                </li>
+                                <li>
+                                    <b>manual</b> - connect manually. Note, if your connection requires manual input,
+                                    like an OPT code, you must use this setting.
+                                </li>
                             </ul>
                         </InfoMessage>
                     </div>
                     <div className="settings-input">
-                        <div className="raw-input"><div className="raw-input"><ConnectModeDropdown tempVal={this.tempConnectMode}/></div></div>
+                        <div className="raw-input">
+                            <div className="raw-input">
+                                <ConnectModeDropdown tempVal={this.tempConnectMode} />
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div className="settings-field" style={{marginTop: 10}}>
+                <div className="settings-field" style={{ marginTop: 10 }}>
                     <div className="settings-label">
                         <div>Auto Install</div>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
                         <InfoMessage width={350}>
-                            If selected, will try to auto-install the mshell client if it is not installed or out of date.
+                            If selected, will try to auto-install the mshell client if it is not installed or out of
+                            date.
                         </InfoMessage>
                     </div>
                     <div className="settings-input">
-                        <Toggle checked={this.tempAutoInstall.get()} onChange={this.handleChangeAutoInstall}/>
+                        <Toggle checked={this.tempAutoInstall.get()} onChange={this.handleChangeAutoInstall} />
                     </div>
                 </div>
                 <If condition={!util.isBlank(this.getErrorStr())}>
-                    <div className="settings-field settings-error">
-                        Error: {this.getErrorStr()}
-                    </div>
+                    <div className="settings-field settings-error">Error: {this.getErrorStr()}</div>
                 </If>
-                <div className="flex-spacer"/>
+                <div className="flex-spacer" />
                 <div className="action-buttons">
-                    <div className="flex-spacer"/>
-                    <div onClick={model.cancelEditAuth} className="button is-plain is-outlined is-small">Cancel</div>
-                    <div style={{marginLeft: 10, marginRight: 20}} onClick={this.submitRemote} className="button is-prompt-green is-outlined is-small">Create Remote</div>
+                    <div className="flex-spacer" />
+                    <div onClick={model.cancelEditAuth} className="button is-plain is-outlined is-small">
+                        Cancel
+                    </div>
+                    <div
+                        style={{ marginLeft: 10, marginRight: 20 }}
+                        onClick={this.submitRemote}
+                        className="button is-prompt-green is-outlined is-small"
+                    >
+                        Create Remote
+                    </div>
                 </div>
             </div>
         );
@@ -375,41 +448,49 @@ class CreateRemote extends React.Component<{model : RemotesModalModel, remoteEdi
 }
 
 @mobxReact.observer
-class EditRemoteSettings extends React.Component<{model : RemotesModalModel, remote : RemoteType, remoteEdit : RemoteEditType}, {}> {
-    tempAlias : OV<string>
-    tempAuthMode : OV<string>;
-    tempConnectMode : OV<string>;
-    tempManualMode : OV<boolean>;
-    tempPassword : OV<string>;
-    tempKeyFile : OV<string>;
-    tempAutoInstall : OV<boolean>;
+class EditRemoteSettings extends React.Component<
+    { model: RemotesModalModel; remote: RemoteType; remoteEdit: RemoteEditType },
+    {}
+> {
+    tempAlias: OV<string>;
+    tempAuthMode: OV<string>;
+    tempConnectMode: OV<string>;
+    tempManualMode: OV<boolean>;
+    tempPassword: OV<string>;
+    tempKeyFile: OV<string>;
+    tempAutoInstall: OV<boolean>;
 
-    constructor(props : any) {
+    constructor(props: any) {
         super(props);
-        let {remote, remoteEdit} = this.props;
-        this.tempAlias = mobx.observable.box(remote.remotealias ?? "", {name: "EditRemoteSettings-alias"});
-        this.tempAuthMode = mobx.observable.box(remote.authtype, {name: "EditRemoteSettings-authMode"});
-        this.tempConnectMode = mobx.observable.box(remote.connectmode, {name: "EditRemoteSettings-connectMode"});
-        this.tempKeyFile = mobx.observable.box(remoteEdit.keystr ?? "", {name: "EditRemoteSettings-keystr"});
-        this.tempPassword = mobx.observable.box(remoteEdit.haspassword ? PasswordUnchangedSentinel : "", {name: "EditRemoteSettings-password"});
-        this.tempAutoInstall = mobx.observable.box(!!remote.autoinstall, {name: "EditRemoteSettings-autoinstall"});
+        let { remote, remoteEdit } = this.props;
+        this.tempAlias = mobx.observable.box(remote.remotealias ?? "", { name: "EditRemoteSettings-alias" });
+        this.tempAuthMode = mobx.observable.box(remote.authtype, { name: "EditRemoteSettings-authMode" });
+        this.tempConnectMode = mobx.observable.box(remote.connectmode, { name: "EditRemoteSettings-connectMode" });
+        this.tempKeyFile = mobx.observable.box(remoteEdit.keystr ?? "", { name: "EditRemoteSettings-keystr" });
+        this.tempPassword = mobx.observable.box(remoteEdit.haspassword ? PasswordUnchangedSentinel : "", {
+            name: "EditRemoteSettings-password",
+        });
+        this.tempAutoInstall = mobx.observable.box(!!remote.autoinstall, { name: "EditRemoteSettings-autoinstall" });
     }
 
     componentDidUpdate() {
-        let {remote} = this.props;
+        let { remote } = this.props;
         if (remote == null || remote.archived) {
             this.props.model.deSelectRemote();
         }
     }
 
     @boundMethod
-    clickArchive() : void {
-        let {remote} = this.props;
+    clickArchive(): void {
+        let { remote } = this.props;
         if (remote.status == "connected") {
-            GlobalModel.showAlert({message: "Cannot archived a connected remote.  Disconnect and try again."});
+            GlobalModel.showAlert({ message: "Cannot archived a connected remote.  Disconnect and try again." });
             return;
         }
-        let prtn = GlobalModel.showAlert({message: "Are you sure you want to archive this connection?", confirm: true});
+        let prtn = GlobalModel.showAlert({
+            message: "Are you sure you want to archive this connection?",
+            confirm: true,
+        });
         prtn.then((confirm) => {
             if (!confirm) {
                 return;
@@ -419,42 +500,42 @@ class EditRemoteSettings extends React.Component<{model : RemotesModalModel, rem
     }
 
     @boundMethod
-    clickForceInstall() : void {
-        let {remote} = this.props;
+    clickForceInstall(): void {
+        let { remote } = this.props;
         GlobalCommandRunner.installRemote(remote.remoteid);
     }
 
     @boundMethod
-    handleChangeKeyFile(e : any) : void {
+    handleChangeKeyFile(e: any): void {
         mobx.action(() => {
             this.tempKeyFile.set(e.target.value);
         })();
     }
 
     @boundMethod
-    handleChangePassword(e : any) : void {
+    handleChangePassword(e: any): void {
         mobx.action(() => {
             this.tempPassword.set(e.target.value);
         })();
     }
 
     @boundMethod
-    handleChangeAlias(e : any) : void {
+    handleChangeAlias(e: any): void {
         mobx.action(() => {
             this.tempAlias.set(e.target.value);
         })();
     }
 
     @boundMethod
-    handleChangeAutoInstall(val : boolean) : void {
+    handleChangeAutoInstall(val: boolean): void {
         mobx.action(() => {
             this.tempAutoInstall.set(val);
         })();
     }
 
     @boundMethod
-    canResetPw() : boolean {
-        let {remoteEdit} = this.props;
+    canResetPw(): boolean {
+        let { remoteEdit } = this.props;
         if (remoteEdit == null) {
             return false;
         }
@@ -462,29 +543,28 @@ class EditRemoteSettings extends React.Component<{model : RemotesModalModel, rem
     }
 
     @boundMethod
-    resetPw() : void {
+    resetPw(): void {
         mobx.action(() => {
             this.tempPassword.set(PasswordUnchangedSentinel);
         })();
     }
-    
+
     @boundMethod
-    onFocusPassword(e : any) {
+    onFocusPassword(e: any) {
         if (this.tempPassword.get() == PasswordUnchangedSentinel) {
             e.target.select();
         }
     }
 
     @boundMethod
-    submitRemote() : void {
-        let {remote, remoteEdit} = this.props;
+    submitRemote(): void {
+        let { remote, remoteEdit } = this.props;
         let authMode = this.tempAuthMode.get();
-        let kwargs : Record<string, string> = {};
+        let kwargs: Record<string, string> = {};
         if (!util.isStrEq(this.tempKeyFile.get(), remoteEdit.keystr)) {
             if (authMode == "key" || authMode == "key+password") {
                 kwargs["key"] = this.tempKeyFile.get();
-            }
-            else {
+            } else {
                 kwargs["key"] = "";
             }
         }
@@ -492,10 +572,9 @@ class EditRemoteSettings extends React.Component<{model : RemotesModalModel, rem
             if (this.tempPassword.get() != PasswordUnchangedSentinel) {
                 kwargs["password"] = this.tempPassword.get();
             }
-        }
-        else {
+        } else {
             if (remoteEdit.haspassword) {
-                kwargs["password"] = ""
+                kwargs["password"] = "";
             }
         }
         if (!util.isStrEq(this.tempAlias.get(), remote.remotealias)) {
@@ -505,7 +584,7 @@ class EditRemoteSettings extends React.Component<{model : RemotesModalModel, rem
             kwargs["connectmode"] = this.tempConnectMode.get();
         }
         if (!util.isBoolEq(this.tempAutoInstall.get(), remote.autoinstall)) {
-            kwargs["autoinstall"] = (this.tempAutoInstall.get() ? "1" : "0");
+            kwargs["autoinstall"] = this.tempAutoInstall.get() ? "1" : "0";
         }
         if (Object.keys(kwargs).length == 0) {
             return;
@@ -514,134 +593,191 @@ class EditRemoteSettings extends React.Component<{model : RemotesModalModel, rem
         kwargs["submit"] = "1";
         GlobalCommandRunner.editRemote(remote.remoteid, kwargs);
     }
-    
-    renderAuthModeMessage() : any {
+
+    renderAuthModeMessage(): any {
         let authMode = this.tempAuthMode.get();
         if (authMode == "none") {
-            return (<span>This connection requires no authentication.<br/>Or authentication is already configured in ssh_config.</span>);
+            return (
+                <span>
+                    This connection requires no authentication.
+                    <br />
+                    Or authentication is already configured in ssh_config.
+                </span>
+            );
         }
         if (authMode == "key") {
-            return (<span>Use a public/private keypair.</span>);
+            return <span>Use a public/private keypair.</span>;
         }
         if (authMode == "password") {
-            return (<span>Use a password.</span>);
+            return <span>Use a password.</span>;
         }
         if (authMode == "key+password") {
-            return (<span>Use a public/private keypair with a passphrase.</span>);
+            return <span>Use a public/private keypair with a passphrase.</span>;
         }
         return null;
     }
 
     render() {
-        let {model, remote, remoteEdit} = this.props;
+        let { model, remote, remoteEdit } = this.props;
         let authMode = this.tempAuthMode.get();
         return (
             <div className="remote-detail auth-editing">
                 <div className="title is-5">{getRemoteTitle(remote)}</div>
-                <div className="detail-subtitle">
-                    Editing Connection Settings
-                </div>
+                <div className="detail-subtitle">Editing Connection Settings</div>
                 <div className="settings-field">
                     <div className="settings-label">
                         <div>Alias</div>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
                         <InfoMessage width={400}>
                             (Optional) A short alias to use when selecting or displaying this connection.
                         </InfoMessage>
                     </div>
                     <div className="settings-input">
-                        <input type="text" onChange={this.handleChangeAlias} value={this.tempAlias.get()} maxLength={40}/>
+                        <input
+                            type="text"
+                            onChange={this.handleChangeAlias}
+                            value={this.tempAlias.get()}
+                            maxLength={40}
+                        />
                     </div>
                 </div>
                 <div className="settings-field align-top">
                     <div className="settings-label">
                         <div>Auth Mode</div>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
                         <InfoMessage width={350}>
                             <ul>
-                                <li><b>none</b> - no authentication, or authentication is already configured in your ssh config.</li>
-                                <li><b>key</b> - use a private key.</li>
-                                <li><b>password</b> - use a password.</li>
-                                <li><b>key+password</b> - use a key with a passphrase.</li>
+                                <li>
+                                    <b>none</b> - no authentication, or authentication is already configured in your ssh
+                                    config.
+                                </li>
+                                <li>
+                                    <b>key</b> - use a private key.
+                                </li>
+                                <li>
+                                    <b>password</b> - use a password.
+                                </li>
+                                <li>
+                                    <b>key+password</b> - use a key with a passphrase.
+                                </li>
                             </ul>
                         </InfoMessage>
                     </div>
                     <div className="settings-input">
-                        <div className="raw-input"><AuthModeDropdown tempVal={this.tempAuthMode}/></div>
+                        <div className="raw-input">
+                            <AuthModeDropdown tempVal={this.tempAuthMode} />
+                        </div>
                     </div>
                 </div>
                 <If condition={authMode == "key" || authMode == "key+password"}>
-                    <div className="settings-field" style={{marginTop: 10}}>
-                        <div className="settings-label">
-                            SSH Keyfile
-                        </div>
+                    <div className="settings-field" style={{ marginTop: 10 }}>
+                        <div className="settings-label">SSH Keyfile</div>
                         <div className="settings-input">
-                            <input type="text" placeholder="keyfile" onChange={this.handleChangeKeyFile} value={this.tempKeyFile.get()} maxLength={400}/>
+                            <input
+                                type="text"
+                                placeholder="keyfile"
+                                onChange={this.handleChangeKeyFile}
+                                value={this.tempKeyFile.get()}
+                                maxLength={400}
+                            />
                         </div>
                     </div>
                 </If>
                 <If condition={authMode == "password" || authMode == "key+password"}>
-                    <div className="settings-field" style={{marginTop: 10}}>
+                    <div className="settings-field" style={{ marginTop: 10 }}>
                         <div className="settings-label">
                             {authMode == "password" ? "SSH Password" : "Key Passphrase"}
                         </div>
                         <div className="settings-input">
-                            <input type="password" placeholder="password" onFocus={this.onFocusPassword} onChange={this.handleChangePassword} value={this.tempPassword.get()} maxLength={400}/>
+                            <input
+                                type="password"
+                                placeholder="password"
+                                onFocus={this.onFocusPassword}
+                                onChange={this.handleChangePassword}
+                                value={this.tempPassword.get()}
+                                maxLength={400}
+                            />
                             <If condition={this.canResetPw()}>
-                                <div className="undo-icon" title="restore to original password"><i onClick={this.resetPw} className="icon fa-sharp fa-solid fa-rotate-left"/></div>
+                                <div className="undo-icon" title="restore to original password">
+                                    <i onClick={this.resetPw} className="icon fa-sharp fa-solid fa-rotate-left" />
+                                </div>
                             </If>
                         </div>
                     </div>
                 </If>
-                <div className="settings-field align-top" style={{marginTop: 10}}>
+                <div className="settings-field align-top" style={{ marginTop: 10 }}>
                     <div className="settings-label">
                         <div>Connect Mode</div>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
                         <InfoMessage width={350}>
                             <ul>
-                                <li><b>startup</b> - connect when [prompt] starts.</li>
-                                <li><b>auto</b> - connect when you first run a command using this connection.</li>
-                                <li><b>manual</b> - connect manually. Note, if your connection requires manual input, like an OPT code, you must use this setting.</li>
+                                <li>
+                                    <b>startup</b> - connect when [prompt] starts.
+                                </li>
+                                <li>
+                                    <b>auto</b> - connect when you first run a command using this connection.
+                                </li>
+                                <li>
+                                    <b>manual</b> - connect manually. Note, if your connection requires manual input,
+                                    like an OPT code, you must use this setting.
+                                </li>
                             </ul>
                         </InfoMessage>
                     </div>
                     <div className="settings-input">
-                        <div className="raw-input"><div className="raw-input"><ConnectModeDropdown tempVal={this.tempConnectMode}/></div></div>
+                        <div className="raw-input">
+                            <div className="raw-input">
+                                <ConnectModeDropdown tempVal={this.tempConnectMode} />
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div className="settings-field" style={{marginTop: 10}}>
+                <div className="settings-field" style={{ marginTop: 10 }}>
                     <div className="settings-label">
                         <div>Auto Install</div>
-                        <div className="flex-spacer"/>
+                        <div className="flex-spacer" />
                         <InfoMessage width={350}>
-                            If selected, will try to auto-install the mshell client if it is not installed or out of date.
+                            If selected, will try to auto-install the mshell client if it is not installed or out of
+                            date.
                         </InfoMessage>
                     </div>
                     <div className="settings-input">
-                        <Toggle checked={this.tempAutoInstall.get()} onChange={this.handleChangeAutoInstall}/>
+                        <Toggle checked={this.tempAutoInstall.get()} onChange={this.handleChangeAutoInstall} />
                     </div>
                 </div>
                 <div className="settings-field mt-3">
                     <div className="settings-label">Actions</div>
                     <div className="settings-input">
-                        <div onClick={this.clickArchive} className="button is-prompt-danger is-outlined is-small is-inline-height">
+                        <div
+                            onClick={this.clickArchive}
+                            className="button is-prompt-danger is-outlined is-small is-inline-height"
+                        >
                             Archive Connection
                         </div>
-                        <div onClick={this.clickForceInstall} className="button is-prompt-danger is-outlined is-small is-inline-height ml-3">
+                        <div
+                            onClick={this.clickForceInstall}
+                            className="button is-prompt-danger is-outlined is-small is-inline-height ml-3"
+                        >
                             Force Install
                         </div>
                     </div>
                 </div>
                 <If condition={!util.isBlank(remoteEdit.errorstr)}>
-                    <div className="remoteedit-error">
-                        Error: {remoteEdit.errorstr ?? "An error occured"}
-                    </div>
+                    <div className="remoteedit-error">Error: {remoteEdit.errorstr ?? "An error occured"}</div>
                 </If>
-                <div className="flex-spacer"/>
+                <div className="flex-spacer" />
                 <div className="action-buttons">
-                    <div className="flex-spacer"/>
-                    <div onClick={model.cancelEditAuth} className="button is-plain is-outlined is-small">Cancel</div>
-                    <div style={{marginLeft: 10, marginRight: 20}} onClick={this.submitRemote} className="button is-prompt-green is-outlined is-small">Submit</div>
+                    <div className="flex-spacer" />
+                    <div onClick={model.cancelEditAuth} className="button is-plain is-outlined is-small">
+                        Cancel
+                    </div>
+                    <div
+                        style={{ marginLeft: 10, marginRight: 20 }}
+                        onClick={this.submitRemote}
+                        className="button is-prompt-green is-outlined is-small"
+                    >
+                        Submit
+                    </div>
                 </div>
             </div>
         );
@@ -649,8 +785,8 @@ class EditRemoteSettings extends React.Component<{model : RemotesModalModel, rem
 }
 
 @mobxReact.observer
-class RemoteDetailView extends React.Component<{model : RemotesModalModel, remote : RemoteType}, {}> {
-    termRef : React.RefObject<any> = React.createRef();
+class RemoteDetailView extends React.Component<{ model: RemotesModalModel; remote: RemoteType }, {}> {
+    termRef: React.RefObject<any> = React.createRef();
 
     componentDidMount() {
         let elem = this.termRef.current;
@@ -662,7 +798,7 @@ class RemoteDetailView extends React.Component<{model : RemotesModalModel, remot
     }
 
     componentDidUpdate() {
-        let {remote} = this.props;
+        let { remote } = this.props;
         if (remote == null || remote.archived) {
             this.props.model.deSelectRemote();
         }
@@ -673,13 +809,13 @@ class RemoteDetailView extends React.Component<{model : RemotesModalModel, remot
     }
 
     @boundMethod
-    clickTermBlock() : void {
+    clickTermBlock(): void {
         if (this.props.model.remoteTermWrap != null) {
             this.props.model.remoteTermWrap.giveFocus();
         }
     }
 
-    getRemoteTypeStr(remote : RemoteType) : string {
+    getRemoteTypeStr(remote: RemoteType): string {
         if (!util.isBlank(remote.uname)) {
             let unameStr = remote.uname;
             unameStr = unameStr.replace("|", ", ");
@@ -689,44 +825,41 @@ class RemoteDetailView extends React.Component<{model : RemotesModalModel, remot
     }
 
     @boundMethod
-    connectRemote(remoteId : string) {
+    connectRemote(remoteId: string) {
         GlobalCommandRunner.connectRemote(remoteId);
     }
 
     @boundMethod
-    disconnectRemote(remoteId : string) {
+    disconnectRemote(remoteId: string) {
         GlobalCommandRunner.disconnectRemote(remoteId);
     }
 
     @boundMethod
-    installRemote(remoteId : string) {
+    installRemote(remoteId: string) {
         GlobalCommandRunner.installRemote(remoteId);
     }
 
     @boundMethod
-    cancelInstall(remoteId : string) {
+    cancelInstall(remoteId: string) {
         GlobalCommandRunner.installCancelRemote(remoteId);
     }
 
     @boundMethod
-    editAuthSettings() : void {
+    editAuthSettings(): void {
         this.props.model.startEditAuth();
     }
 
-    renderInstallStatus(remote : RemoteType) : any {
-        let statusStr : string = null;
+    renderInstallStatus(remote: RemoteType): any {
+        let statusStr: string = null;
         if (remote.installstatus == "disconnected") {
             if (remote.needsmshellupgrade) {
                 statusStr = "mshell " + remote.mshellversion + " - needs upgrade";
-            }
-            else if (util.isBlank(remote.mshellversion)) {
+            } else if (util.isBlank(remote.mshellversion)) {
                 statusStr = "mshell unknown";
-            }
-            else {
+            } else {
                 statusStr = "mshell " + remote.mshellversion + " - current";
             }
-        }
-        else {
+        } else {
             statusStr = remote.installstatus;
         }
         if (statusStr == null) {
@@ -738,35 +871,75 @@ class RemoteDetailView extends React.Component<{model : RemotesModalModel, remot
         return (
             <div key="install-status" className="settings-field">
                 <div className="settings-label"> Install Status</div>
-                <div className="settings-input">
-                    {statusStr}
-                </div>
+                <div className="settings-input">{statusStr}</div>
             </div>
         );
     }
 
-    renderRemoteMessage(remote : RemoteType) : any {
-        let message : string = "";
-        let buttons : any[] = [];
+    renderRemoteMessage(remote: RemoteType): any {
+        let message: string = "";
+        let buttons: any[] = [];
         // connect, disconnect, editauth, tryreconnect, install
 
         let disconnectButton = (
-            <div key="disconnect" style={{marginLeft: 10}} onClick={() => this.disconnectRemote(remote.remoteid)} className="button is-prompt-danger is-outlined is-small">Disconnect Now</div>
+            <div
+                key="disconnect"
+                style={{ marginLeft: 10 }}
+                onClick={() => this.disconnectRemote(remote.remoteid)}
+                className="button is-prompt-danger is-outlined is-small"
+            >
+                Disconnect Now
+            </div>
         );
         let connectButton = (
-            <div key="connect" style={{marginLeft: 10}} onClick={() => this.connectRemote(remote.remoteid)} className="button is-prompt-green is-outlined is-small">Connect Now</div>
+            <div
+                key="connect"
+                style={{ marginLeft: 10 }}
+                onClick={() => this.connectRemote(remote.remoteid)}
+                className="button is-prompt-green is-outlined is-small"
+            >
+                Connect Now
+            </div>
         );
         let tryReconnectButton = (
-            <div key="tryreconnect" style={{marginLeft: 10}} onClick={() => this.connectRemote(remote.remoteid)} className="button is-prompt-green is-outlined is-small">Try Reconnect</div>
+            <div
+                key="tryreconnect"
+                style={{ marginLeft: 10 }}
+                onClick={() => this.connectRemote(remote.remoteid)}
+                className="button is-prompt-green is-outlined is-small"
+            >
+                Try Reconnect
+            </div>
         );
         let updateAuthButton = (
-            <div key="updateauth" style={{marginLeft: 10}} onClick={() => this.editAuthSettings()} className="button is-plain is-outlined is-small">Update Auth Settings</div>
+            <div
+                key="updateauth"
+                style={{ marginLeft: 10 }}
+                onClick={() => this.editAuthSettings()}
+                className="button is-plain is-outlined is-small"
+            >
+                Update Auth Settings
+            </div>
         );
         let cancelInstallButton = (
-            <div key="cancelinstall" style={{marginLeft: 10}} onClick={() => this.cancelInstall(remote.remoteid)} className="button is-prompt-danger is-outlined is-small">Cancel Install</div>
+            <div
+                key="cancelinstall"
+                style={{ marginLeft: 10 }}
+                onClick={() => this.cancelInstall(remote.remoteid)}
+                className="button is-prompt-danger is-outlined is-small"
+            >
+                Cancel Install
+            </div>
         );
         let installNowButton = (
-            <div key="installnow" style={{marginLeft: 10}} onClick={() => this.installRemote(remote.remoteid)} className="button is-prompt-green is-outlined is-small">Install Now</div>
+            <div
+                key="installnow"
+                style={{ marginLeft: 10 }}
+                onClick={() => this.installRemote(remote.remoteid)}
+                className="button is-prompt-green is-outlined is-small"
+            >
+                Install Now
+            </div>
         );
         if (remote.local) {
             installNowButton = null;
@@ -776,43 +949,39 @@ class RemoteDetailView extends React.Component<{model : RemotesModalModel, remot
         if (remote.status == "connected") {
             message = "Connected and ready to run commands.";
             buttons = [disconnectButton];
-        }
-        else if (remote.status == "connecting") {
-            message = (remote.waitingforpassword ? "Connecting, waiting for user-input..." : "Connecting...");
-            let connectTimeout = (remote.connecttimeout ?? 0);
+        } else if (remote.status == "connecting") {
+            message = remote.waitingforpassword ? "Connecting, waiting for user-input..." : "Connecting...";
+            let connectTimeout = remote.connecttimeout ?? 0;
             message = message + " (" + connectTimeout + "s)";
             buttons = [disconnectButton];
-        }
-        else if (remote.status == "disconnected") {
+        } else if (remote.status == "disconnected") {
             message = "Disconnected";
             buttons = [connectButton];
-        }
-        else if (remote.status == "error") {
+        } else if (remote.status == "error") {
             if (remote.noinitpk) {
                 message = "Error, could not connect.";
                 buttons = [tryReconnectButton, updateAuthButton];
-            }
-            else if (remote.needsmshellupgrade) {
+            } else if (remote.needsmshellupgrade) {
                 if (remote.installstatus == "connecting") {
                     message = "Installing...";
                     buttons = [cancelInstallButton];
-                }
-                else {
+                } else {
                     message = "Error, needs install.";
                     buttons = [installNowButton, updateAuthButton];
                 }
-            }
-            else {
+            } else {
                 message = "Error";
                 buttons = [tryReconnectButton, updateAuthButton];
             }
         }
-        let button : any = null;
+        let button: any = null;
         return (
             <div className="remote-message">
                 <div className="message-row">
-                    <div><RemoteStatusLight remote={remote}/> {message}</div>
-                    <div className="flex-spacer"/>
+                    <div>
+                        <RemoteStatusLight remote={remote} /> {message}
+                    </div>
+                    <div className="flex-spacer" />
                     <For each="button" of={buttons}>
                         {button}
                     </For>
@@ -820,14 +989,14 @@ class RemoteDetailView extends React.Component<{model : RemotesModalModel, remot
             </div>
         );
     }
-    
+
     render() {
-        let {model, remote} = this.props;
+        let { model, remote } = this.props;
         let isTermFocused = model.remoteTermWrapFocus.get();
         let termFontSize = GlobalModel.termFontSize.get();
         let remoteMessage = this.renderRemoteMessage(remote);
         let termWidth = textmeasure.termWidthFromCols(RemotePtyCols, termFontSize);
-        let remoteAliasText = (util.isBlank(remote.remotealias) ? "(none)" : remote.remotealias);
+        let remoteAliasText = util.isBlank(remote.remotealias) ? "(none)" : remote.remotealias;
         return (
             <div className="remote-detail">
                 <div className="title is-5">{getRemoteTitle(remote)}</div>
@@ -844,54 +1013,64 @@ class RemoteDetailView extends React.Component<{model : RemotesModalModel, remot
                     <div className="settings-input">
                         {remote.remotecanonicalname}
                         <If condition={!util.isBlank(remote.remotevars.port) && remote.remotevars.port != "22"}>
-                            <span style={{marginLeft: 5}}>(port {remote.remotevars.port})</span>
+                            <span style={{ marginLeft: 5 }}>(port {remote.remotevars.port})</span>
                         </If>
                     </div>
                 </div>
-                <div className="settings-field" style={{minHeight: 24}}>
+                <div className="settings-field" style={{ minHeight: 24 }}>
                     <div className="settings-label">Alias</div>
-                    <div className="settings-input">
-                        {remoteAliasText}
-                    </div>
+                    <div className="settings-input">{remoteAliasText}</div>
                 </div>
                 <div className="settings-field">
                     <div className="settings-label">Auth Type</div>
                     <div className="settings-input">
-                        <If condition={!remote.local}>
-                            {remote.authtype}
-                        </If>
-                        <If condition={remote.local}>
-                            local
-                        </If>
+                        <If condition={!remote.local}>{remote.authtype}</If>
+                        <If condition={remote.local}>local</If>
                     </div>
                 </div>
                 <div className="settings-field">
                     <div className="settings-label">Connect Mode</div>
-                    <div className="settings-input">
-                        {remote.connectmode}
-                    </div>
+                    <div className="settings-input">{remote.connectmode}</div>
                 </div>
                 {this.renderInstallStatus(remote)}
                 <div className="settings-field">
                     <div className="settings-label">Actions</div>
                     <div className="settings-input">
-                        <div onClick={() => this.editAuthSettings()} className="button is-prompt-green is-outlined is-small is-inline-height">
+                        <div
+                            onClick={() => this.editAuthSettings()}
+                            className="button is-prompt-green is-outlined is-small is-inline-height"
+                        >
                             Edit Connection Settings
                         </div>
                     </div>
                 </div>
-                <div className="flex-spacer" style={{minHeight: 20}}/>
-                <div style={{width: termWidth}}>
-                    {remoteMessage}
-                </div>
-                <div key="term" className={cn("terminal-wrapper", {"focus": isTermFocused}, (remote != null ? "status-" + remote.status : null), {"has-message": remoteMessage != null})} style={{width: termWidth}}>
+                <div className="flex-spacer" style={{ minHeight: 20 }} />
+                <div style={{ width: termWidth }}>{remoteMessage}</div>
+                <div
+                    key="term"
+                    className={cn(
+                        "terminal-wrapper",
+                        { focus: isTermFocused },
+                        remote != null ? "status-" + remote.status : null,
+                        { "has-message": remoteMessage != null }
+                    )}
+                    style={{ width: termWidth }}
+                >
                     <If condition={!isTermFocused}>
                         <div key="termblock" className="term-block" onClick={this.clickTermBlock}></div>
                     </If>
                     <If condition={model.showNoInputMsg.get()}>
-                        <div key="termtag" className="term-tag">input is only allowed while status is 'connecting'</div>
+                        <div key="termtag" className="term-tag">
+                            input is only allowed while status is 'connecting'
+                        </div>
                     </If>
-                    <div key="terminal" className="terminal-connectelem" ref={this.termRef} data-remoteid={remote.remoteid} style={{height: textmeasure.termHeightFromRows(RemotePtyRows, termFontSize)}}></div>
+                    <div
+                        key="terminal"
+                        className="terminal-connectelem"
+                        ref={this.termRef}
+                        data-remoteid={remote.remoteid}
+                        style={{ height: textmeasure.termHeightFromRows(RemotePtyRows, termFontSize) }}
+                    ></div>
                 </div>
             </div>
         );
@@ -899,27 +1078,33 @@ class RemoteDetailView extends React.Component<{model : RemotesModalModel, remot
 }
 
 @mobxReact.observer
-class RemotesModal extends React.Component<{model : RemotesModalModel}, {}> {
+class RemotesModal extends React.Component<{ model: RemotesModalModel }, {}> {
     @boundMethod
-    closeModal() : void {
+    closeModal(): void {
         this.props.model.closeModal();
     }
 
     @boundMethod
-    selectRemote(remoteId : string) : void {
+    selectRemote(remoteId: string): void {
         let model = this.props.model;
         model.selectRemote(remoteId);
     }
 
     @boundMethod
-    clickAddRemote() : void {
+    clickAddRemote(): void {
         GlobalCommandRunner.openCreateRemote();
     }
 
-    renderRemoteMenuItem(remote : RemoteType, selectedId : string) : any {
+    renderRemoteMenuItem(remote: RemoteType, selectedId: string): any {
         return (
-            <div key={remote.remoteid} onClick={() => this.selectRemote(remote.remoteid) } className={cn("remote-menu-item", {"is-selected" : remote.remoteid == selectedId})}>
-                <div className="remote-status-light"><RemoteStatusLight remote={remote}/></div>
+            <div
+                key={remote.remoteid}
+                onClick={() => this.selectRemote(remote.remoteid)}
+                className={cn("remote-menu-item", { "is-selected": remote.remoteid == selectedId })}
+            >
+                <div className="remote-status-light">
+                    <RemoteStatusLight remote={remote} />
+                </div>
                 <If condition={util.isBlank(remote.remotealias)}>
                     <div className="remote-name">
                         <div className="remote-name-primary">{remote.remotecanonicalname}</div>
@@ -935,22 +1120,20 @@ class RemotesModal extends React.Component<{model : RemotesModalModel}, {}> {
         );
     }
 
-    renderAddRemoteMenuItem() : any {
+    renderAddRemoteMenuItem(): any {
         return (
             <div key="add" onClick={this.clickAddRemote} className={cn("remote-menu-item add-remote")}>
                 <div>
-                    <i className="fa-sharp fa-solid fa-plus"/> Add SSH Connection
+                    <i className="fa-sharp fa-solid fa-plus" /> Add SSH Connection
                 </div>
             </div>
         );
     }
 
-    renderEmptyDetail() : any {
+    renderEmptyDetail(): any {
         return (
             <div className="remote-detail flex-centered-row">
-                <div>
-                    No Connection Selected
-                </div>
+                <div>No Connection Selected</div>
             </div>
         );
     }
@@ -959,18 +1142,22 @@ class RemotesModal extends React.Component<{model : RemotesModalModel}, {}> {
         let model = this.props.model;
         let selectedRemoteId = model.selectedRemoteId.get();
         let allRemotes = util.sortAndFilterRemotes(GlobalModel.remotes.slice());
-        let remote : RemoteType = null;
+        let remote: RemoteType = null;
         let isAuthEditMode = model.isAuthEditMode();
         let selectedRemote = GlobalModel.getRemote(selectedRemoteId);
         let remoteEdit = model.remoteEdit.get();
         return (
             <div className={cn("modal remotes-modal settings-modal prompt-modal is-active")}>
-                <div className="modal-background"/>
+                <div className="modal-background" />
                 <div className="modal-content">
                     <header>
                         <div className="modal-title">Connections</div>
                         <div className="close-icon">
-                            <i title="Close (Escape)" onClick={this.closeModal} className="fa-sharp fa-solid fa-times"/>
+                            <i
+                                title="Close (Escape)"
+                                onClick={this.closeModal}
+                                className="fa-sharp fa-solid fa-times"
+                            />
                         </div>
                     </header>
                     <div className="inner-content">
@@ -982,18 +1169,25 @@ class RemotesModal extends React.Component<{model : RemotesModalModel}, {}> {
                         </div>
                         <If condition={selectedRemote == null}>
                             <If condition={remoteEdit != null}>
-                                <CreateRemote model={model} remoteEdit={remoteEdit}/>
-                            </If>
-                            <If condition={remoteEdit == null}>
-                                {this.renderEmptyDetail()}
+                                <CreateRemote model={model} remoteEdit={remoteEdit} />
                             </If>
+                            <If condition={remoteEdit == null}>{this.renderEmptyDetail()}</If>
                         </If>
                         <If condition={selectedRemote != null}>
                             <If condition={!isAuthEditMode}>
-                                <RemoteDetailView key={"remotedetail-" + selectedRemoteId} remote={selectedRemote} model={model}/>
+                                <RemoteDetailView
+                                    key={"remotedetail-" + selectedRemoteId}
+                                    remote={selectedRemote}
+                                    model={model}
+                                />
                             </If>
                             <If condition={isAuthEditMode}>
-                                <EditRemoteSettings key={"editremote-" + selectedRemoteId} remote={selectedRemote} remoteEdit={remoteEdit} model={model}/>
+                                <EditRemoteSettings
+                                    key={"editremote-" + selectedRemoteId}
+                                    remote={selectedRemote}
+                                    remoteEdit={remoteEdit}
+                                    model={model}
+                                />
                             </If>
                         </If>
                     </div>
@@ -1003,4 +1197,4 @@ class RemotesModal extends React.Component<{model : RemotesModalModel}, {}> {
     }
 }
 
-export {RemotesModal};
+export { RemotesModal };
diff --git a/src/settings.tsx b/src/settings.tsx
index c83d5e82..56707d7c 100644
--- a/src/settings.tsx
+++ b/src/settings.tsx
@@ -1,19 +1,19 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
 import cn from "classnames";
-import {GlobalModel, GlobalCommandRunner, TabColors} from "./model";
-import {Toggle, RemoteStatusLight, InlineSettingsTextEdit, SettingsError, InfoMessage} from "./elements";
-import {LineType, RendererPluginType, ClientDataType, CommandRtnType} from "./types";
-import {PluginModel} from "./plugins";
+import { GlobalModel, GlobalCommandRunner, TabColors } from "./model";
+import { Toggle, RemoteStatusLight, InlineSettingsTextEdit, SettingsError, InfoMessage } from "./elements";
+import { LineType, RendererPluginType, ClientDataType, CommandRtnType } from "./types";
+import { PluginModel } from "./plugins";
 import * as util from "./util";
 
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
-type OMap<K,V> = mobx.ObservableMap<K,V>;
+type OMap<K, V> = mobx.ObservableMap<K, V>;
 type CV<V> = mobx.IComputedValue<V>;
 
 const RemotePtyRows = 8;
@@ -25,7 +25,6 @@ const VERSION = __PROMPT_VERSION__;
 // @ts-ignore
 const BUILD = __PROMPT_BUILD__;
 
-
 const ScreenDeleteMessage = `
 Are you sure you want to delete this screen/tab?
 
@@ -48,7 +47,7 @@ const WebStopShareConfirmMarkdown = `
 Are you sure you want to stop web-sharing this screen?
 `.trim();
 
-function commandRtnHandler(prtn : Promise<CommandRtnType>, errorMessage : OV<string>) {
+function commandRtnHandler(prtn: Promise<CommandRtnType>, errorMessage: OV<string>) {
     prtn.then((crtn) => {
         if (crtn.success) {
             return;
@@ -60,29 +59,29 @@ function commandRtnHandler(prtn : Promise<CommandRtnType>, errorMessage : OV<str
 }
 
 @mobxReact.observer
-class ScreenSettingsModal extends React.Component<{sessionId : string, screenId : string}, {}> {
-    shareCopied : OV<boolean> = mobx.observable.box(false, {name: "ScreenSettings-shareCopied"});
-    errorMessage : OV<string> = mobx.observable.box(null, {name: "ScreenSettings-errorMessage"});
+class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId: string }, {}> {
+    shareCopied: OV<boolean> = mobx.observable.box(false, { name: "ScreenSettings-shareCopied" });
+    errorMessage: OV<string> = mobx.observable.box(null, { name: "ScreenSettings-errorMessage" });
 
-    constructor(props : any) {
+    constructor(props: any) {
         super(props);
-        let {sessionId, screenId} = props;
+        let { sessionId, screenId } = props;
         let screen = GlobalModel.getScreenById(sessionId, screenId);
         if (screen == null) {
             return;
         }
     }
-    
+
     @boundMethod
-    closeModal() : void {
+    closeModal(): void {
         mobx.action(() => {
             GlobalModel.screenSettingsModal.set(null);
         })();
     }
 
     @boundMethod
-    selectTabColor(color : string) : void {
-        let {sessionId, screenId} = this.props;
+    selectTabColor(color: string): void {
+        let { sessionId, screenId } = this.props;
         let screen = GlobalModel.getScreenById(sessionId, screenId);
         if (screen == null) {
             return;
@@ -90,13 +89,13 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
         if (screen.getTabColor() == color) {
             return;
         }
-        let prtn = GlobalCommandRunner.screenSetSettings(this.props.screenId, {tabcolor: color}, false);
+        let prtn = GlobalCommandRunner.screenSetSettings(this.props.screenId, { tabcolor: color }, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
-    handleChangeArchived(val : boolean) : void {
-        let {sessionId, screenId} = this.props;
+    handleChangeArchived(val: boolean): void {
+        let { sessionId, screenId } = this.props;
         let screen = GlobalModel.getScreenById(sessionId, screenId);
         if (screen == null) {
             return;
@@ -109,8 +108,8 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
     }
 
     @boundMethod
-    handleChangeWebShare(val : boolean) : void {
-        let {sessionId, screenId} = this.props;
+    handleChangeWebShare(val: boolean): void {
+        let { sessionId, screenId } = this.props;
         let screen = GlobalModel.getScreenById(sessionId, screenId);
         if (screen == null) {
             return;
@@ -118,8 +117,8 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
         if (screen.isWebShared() == val) {
             return;
         }
-        let message = (val ? WebShareConfirmMarkdown : WebStopShareConfirmMarkdown);
-        let alertRtn = GlobalModel.showAlert({message: message, confirm: true, markdown: true});
+        let message = val ? WebShareConfirmMarkdown : WebStopShareConfirmMarkdown;
+        let alertRtn = GlobalModel.showAlert({ message: message, confirm: true, markdown: true });
         alertRtn.then((result) => {
             if (!result) {
                 return;
@@ -130,8 +129,8 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
     }
 
     @boundMethod
-    copyShareLink() : void {
-        let {sessionId, screenId} = this.props;
+    copyShareLink(): void {
+        let { sessionId, screenId } = this.props;
         let screen = GlobalModel.getScreenById(sessionId, screenId);
         if (screen == null) {
             return null;
@@ -148,12 +147,12 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
             mobx.action(() => {
                 this.shareCopied.set(false);
             })();
-        }, 600)
+        }, 600);
     }
 
     @boundMethod
-    inlineUpdateName(val : string) : void {
-        let {sessionId, screenId} = this.props;
+    inlineUpdateName(val: string): void {
+        let { sessionId, screenId } = this.props;
         let screen = GlobalModel.getScreenById(sessionId, screenId);
         if (screen == null) {
             return;
@@ -161,13 +160,13 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
         if (util.isStrEq(val, screen.name.get())) {
             return;
         }
-        let prtn = GlobalCommandRunner.screenSetSettings(this.props.screenId, {name: val}, false);
+        let prtn = GlobalCommandRunner.screenSetSettings(this.props.screenId, { name: val }, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
-    inlineUpdateShareName(val : string) : void {
-        let {sessionId, screenId} = this.props;
+    inlineUpdateShareName(val: string): void {
+        let { sessionId, screenId } = this.props;
         let screen = GlobalModel.getScreenById(sessionId, screenId);
         if (screen == null) {
             return;
@@ -175,26 +174,26 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
         if (util.isStrEq(val, screen.getShareName())) {
             return;
         }
-        let prtn = GlobalCommandRunner.screenSetSettings(this.props.screenId, {sharename: val}, false);
+        let prtn = GlobalCommandRunner.screenSetSettings(this.props.screenId, { sharename: val }, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
-    dismissError() : void {
+    dismissError(): void {
         mobx.action(() => {
             this.errorMessage.set(null);
         })();
     }
 
     @boundMethod
-    handleDeleteScreen() : void {
-        let {sessionId, screenId} = this.props;
+    handleDeleteScreen(): void {
+        let { sessionId, screenId } = this.props;
         let screen = GlobalModel.getScreenById(sessionId, screenId);
         if (screen == null) {
             return;
         }
         let message = ScreenDeleteMessage;
-        let alertRtn = GlobalModel.showAlert({message: message, confirm: true, markdown: true});
+        let alertRtn = GlobalModel.showAlert({ message: message, confirm: true, markdown: true });
         alertRtn.then((result) => {
             if (!result) {
                 return;
@@ -205,59 +204,62 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
     }
 
     render() {
-        let {sessionId, screenId} = this.props;
+        let { sessionId, screenId } = this.props;
         let screen = GlobalModel.getScreenById(sessionId, screenId);
         if (screen == null) {
             return null;
         }
-        let color : string = null;
+        let color: string = null;
         return (
             <div className={cn("modal screen-settings-modal settings-modal prompt-modal is-active")}>
-                <div className="modal-background"/>
+                <div className="modal-background" />
                 <div className="modal-content">
                     <If condition={this.shareCopied.get()}>
-                        <div className="copied-indicator"/>
+                        <div className="copied-indicator" />
                     </If>
                     <header>
                         <div className="modal-title">screen settings ({screen.name.get()})</div>
                         <div className="close-icon">
-                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times"/>
+                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times" />
                         </div>
                     </header>
                     <div className="inner-content">
                         <div className="settings-field">
-                            <div className="settings-label">
-                                Screen Id
-                            </div>
+                            <div className="settings-label">Screen Id</div>
+                            <div className="settings-input">{screen.screenId}</div>
+                        </div>
+                        <div className="settings-field">
+                            <div className="settings-label">Name</div>
                             <div className="settings-input">
-                                {screen.screenId}
+                                <InlineSettingsTextEdit
+                                    placeholder="name"
+                                    text={screen.name.get() ?? "(none)"}
+                                    value={screen.name.get() ?? ""}
+                                    onChange={this.inlineUpdateName}
+                                    maxLength={50}
+                                    showIcon={true}
+                                />
                             </div>
                         </div>
                         <div className="settings-field">
-                            <div className="settings-label">
-                                Name
-                            </div>
-                            <div className="settings-input">
-                                <InlineSettingsTextEdit placeholder="name" text={screen.name.get() ?? "(none)"} value={screen.name.get() ?? ""} onChange={this.inlineUpdateName} maxLength={50} showIcon={true}/>
-                            </div>
-                        </div>
-                        <div className="settings-field">
-                            <div className="settings-label">
-                                Tab Color
-                            </div>
+                            <div className="settings-label">Tab Color</div>
                             <div className="settings-input">
                                 <div className="tab-colors">
                                     <div className="tab-color-cur">
                                         <span className={cn("icon tab-color-icon", "color-" + screen.getTabColor())}>
-                                            <i className="fa-sharp fa-solid fa-square"/>
+                                            <i className="fa-sharp fa-solid fa-square" />
                                         </span>
                                         <span>{screen.getTabColor()}</span>
                                     </div>
                                     <div className="tab-color-sep">|</div>
                                     <For each="color" of={TabColors}>
-                                        <div key={color} className="tab-color-select" onClick={() => this.selectTabColor(color)}>
+                                        <div
+                                            key={color}
+                                            className="tab-color-select"
+                                            onClick={() => this.selectTabColor(color)}
+                                        >
                                             <span className={cn("tab-color-icon", "color-" + color)}>
-                                                <i className="fa-sharp fa-solid fa-square"/>
+                                                <i className="fa-sharp fa-solid fa-square" />
                                             </span>
                                         </div>
                                     </For>
@@ -268,51 +270,58 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
                             <div className="settings-label">
                                 <div>Archived</div>
                                 <InfoMessage width={400}>
-                                    Archive will hide the screen tab.  Commands and output will be retained in history.
+                                    Archive will hide the screen tab. Commands and output will be retained in history.
                                 </InfoMessage>
                             </div>
                             <div className="settings-input">
-                                <Toggle checked={screen.archived.get()} onChange={this.handleChangeArchived}/>
+                                <Toggle checked={screen.archived.get()} onChange={this.handleChangeArchived} />
                             </div>
                         </div>
                         <div className="settings-field">
-                            <div className="settings-label">
-                                Web Sharing
-                            </div>
+                            <div className="settings-label">Web Sharing</div>
                             <div className="settings-input">
-                                <Toggle checked={screen.isWebShared()} onChange={this.handleChangeWebShare}/>
+                                <Toggle checked={screen.isWebShared()} onChange={this.handleChangeWebShare} />
                             </div>
                         </div>
                         <If condition={screen.isWebShared()}>
                             <div className="settings-field sub-field">
-                                <div className="settings-label">
-                                    Share Link
-                                </div>
+                                <div className="settings-label">Share Link</div>
                                 <div className="settings-input">
-                                    <a href={util.makeExternLink(screen.getWebShareUrl())} target="_blank" className="button is-prompt-green is-outlined is-small a-block">
+                                    <a
+                                        href={util.makeExternLink(screen.getWebShareUrl())}
+                                        target="_blank"
+                                        className="button is-prompt-green is-outlined is-small a-block"
+                                    >
                                         <span>open in browser</span>
                                         <span className="icon">
-                                            <i className="fa-sharp fa-solid fa-up-right-from-square"/>
+                                            <i className="fa-sharp fa-solid fa-up-right-from-square" />
                                         </span>
                                     </a>
-                                    <div className="button is-prompt-green is-outlined is-small ml-4" onClick={this.copyShareLink}>
+                                    <div
+                                        className="button is-prompt-green is-outlined is-small ml-4"
+                                        onClick={this.copyShareLink}
+                                    >
                                         <span>copy link</span>
                                         <span className="icon">
-                                            <i className="fa-sharp fa-solid fa-copy"/>
+                                            <i className="fa-sharp fa-solid fa-copy" />
                                         </span>
                                     </div>
                                 </div>
                             </div>
                             <div className="settings-field sub-field">
-                                <div className="settings-label">
-                                    Share Name
-                                </div>
+                                <div className="settings-label">Share Name</div>
                                 <div className="settings-input">
                                     <div className="settings-input">
-                                        <InlineSettingsTextEdit placeholder="name"
-                                                                text={util.isBlank(screen.getShareName()) ? "(none)" : screen.getShareName()}
-                                                                value={screen.getShareName() ?? ""}
-                                                                onChange={this.inlineUpdateShareName} maxLength={150} showIcon={true}/>
+                                        <InlineSettingsTextEdit
+                                            placeholder="name"
+                                            text={
+                                                util.isBlank(screen.getShareName()) ? "(none)" : screen.getShareName()
+                                            }
+                                            value={screen.getShareName() ?? ""}
+                                            onChange={this.inlineUpdateShareName}
+                                            maxLength={150}
+                                            showIcon={true}
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -325,13 +334,20 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
                                 </InfoMessage>
                             </div>
                             <div className="settings-input">
-                                <div onClick={this.handleDeleteScreen} className="button is-prompt-danger is-outlined is-small">Delete Screen</div>
+                                <div
+                                    onClick={this.handleDeleteScreen}
+                                    className="button is-prompt-danger is-outlined is-small"
+                                >
+                                    Delete Screen
+                                </div>
                             </div>
                         </div>
-                        <SettingsError errorMessage={this.errorMessage}/>
+                        <SettingsError errorMessage={this.errorMessage} />
                     </div>
                     <footer>
-                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">Close</div>
+                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">
+                            Close
+                        </div>
                     </footer>
                 </div>
             </div>
@@ -340,28 +356,28 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
 }
 
 @mobxReact.observer
-class SessionSettingsModal extends React.Component<{sessionId : string}, {}> {
-    errorMessage : OV<string> = mobx.observable.box(null, {name: "ScreenSettings-errorMessage"});
-    
-    constructor(props : any) {
+class SessionSettingsModal extends React.Component<{ sessionId: string }, {}> {
+    errorMessage: OV<string> = mobx.observable.box(null, { name: "ScreenSettings-errorMessage" });
+
+    constructor(props: any) {
         super(props);
-        let {sessionId} = props;
+        let { sessionId } = props;
         let session = GlobalModel.getSessionById(sessionId);
         if (session == null) {
             return;
         }
     }
-    
+
     @boundMethod
-    closeModal() : void {
+    closeModal(): void {
         mobx.action(() => {
             GlobalModel.sessionSettingsModal.set(null);
         })();
     }
 
     @boundMethod
-    handleInlineChangeName(newVal : string) : void {
-        let {sessionId} = this.props;
+    handleInlineChangeName(newVal: string): void {
+        let { sessionId } = this.props;
         let session = GlobalModel.getSessionById(sessionId);
         if (session == null) {
             return;
@@ -369,13 +385,13 @@ class SessionSettingsModal extends React.Component<{sessionId : string}, {}> {
         if (util.isStrEq(newVal, session.name.get())) {
             return;
         }
-        let prtn = GlobalCommandRunner.sessionSetSettings(this.props.sessionId, {"name": newVal}, false);
+        let prtn = GlobalCommandRunner.sessionSetSettings(this.props.sessionId, { name: newVal }, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
-    handleChangeArchived(val : boolean) : void {
-        let {sessionId} = this.props;
+    handleChangeArchived(val: boolean): void {
+        let { sessionId } = this.props;
         let session = GlobalModel.getSessionById(sessionId);
         if (session == null) {
             return;
@@ -388,10 +404,10 @@ class SessionSettingsModal extends React.Component<{sessionId : string}, {}> {
     }
 
     @boundMethod
-    handleDeleteSession() : void {
-        let {sessionId} = this.props;
+    handleDeleteSession(): void {
+        let { sessionId } = this.props;
         let message = SessionDeleteMessage;
-        let alertRtn = GlobalModel.showAlert({message: message, confirm: true, markdown: true});
+        let alertRtn = GlobalModel.showAlert({ message: message, confirm: true, markdown: true });
         alertRtn.then((result) => {
             if (!result) {
                 return;
@@ -402,46 +418,52 @@ class SessionSettingsModal extends React.Component<{sessionId : string}, {}> {
     }
 
     @boundMethod
-    dismissError() : void {
+    dismissError(): void {
         mobx.action(() => {
             this.errorMessage.set(null);
         })();
     }
 
     render() {
-        let {sessionId} = this.props;
+        let { sessionId } = this.props;
         let session = GlobalModel.getSessionById(sessionId);
         if (session == null) {
             return null;
         }
         return (
             <div className={cn("modal session-settings-modal settings-modal prompt-modal is-active")}>
-                <div className="modal-background"/>
+                <div className="modal-background" />
                 <div className="modal-content">
                     <header>
                         <div className="modal-title">session settings ({session.name.get()})</div>
                         <div className="close-icon">
-                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times"/>
+                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times" />
                         </div>
                     </header>
                     <div className="inner-content">
                         <div className="settings-field">
-                            <div className="settings-label">
-                                Name
-                            </div>
+                            <div className="settings-label">Name</div>
                             <div className="settings-input">
-                                <InlineSettingsTextEdit placeholder="name" text={session.name.get() ?? "(none)"} value={session.name.get() ?? ""} onChange={this.handleInlineChangeName} maxLength={50} showIcon={true}/>
+                                <InlineSettingsTextEdit
+                                    placeholder="name"
+                                    text={session.name.get() ?? "(none)"}
+                                    value={session.name.get() ?? ""}
+                                    onChange={this.handleInlineChangeName}
+                                    maxLength={50}
+                                    showIcon={true}
+                                />
                             </div>
                         </div>
                         <div className="settings-field">
                             <div className="settings-label">
                                 <div>Archived</div>
                                 <InfoMessage width={400}>
-                                    Archive will hide the session from the active menu.  Commands and output will be retained in history.
+                                    Archive will hide the session from the active menu. Commands and output will be
+                                    retained in history.
                                 </InfoMessage>
                             </div>
                             <div className="settings-input">
-                                <Toggle checked={session.archived.get()} onChange={this.handleChangeArchived}/>
+                                <Toggle checked={session.archived.get()} onChange={this.handleChangeArchived} />
                             </div>
                         </div>
                         <div className="settings-field">
@@ -452,13 +474,20 @@ class SessionSettingsModal extends React.Component<{sessionId : string}, {}> {
                                 </InfoMessage>
                             </div>
                             <div className="settings-input">
-                                <div onClick={this.handleDeleteSession} className="button is-prompt-danger is-outlined is-small">Delete Session</div>
+                                <div
+                                    onClick={this.handleDeleteSession}
+                                    className="button is-prompt-danger is-outlined is-small"
+                                >
+                                    Delete Session
+                                </div>
                             </div>
                         </div>
-                        <SettingsError errorMessage={this.errorMessage}/>
+                        <SettingsError errorMessage={this.errorMessage} />
                     </div>
                     <footer>
-                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">Close</div>
+                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">
+                            Close
+                        </div>
                     </footer>
                 </div>
             </div>
@@ -467,19 +496,19 @@ class SessionSettingsModal extends React.Component<{sessionId : string}, {}> {
 }
 
 @mobxReact.observer
-class LineSettingsModal extends React.Component<{linenum : number}, {}> {
-    rendererDropdownActive : OV<boolean> = mobx.observable.box(false, {name: "lineSettings-rendererDropdownActive"});
-    errorMessage : OV<string> = mobx.observable.box(null, {name: "ScreenSettings-errorMessage"});
-    
+class LineSettingsModal extends React.Component<{ linenum: number }, {}> {
+    rendererDropdownActive: OV<boolean> = mobx.observable.box(false, { name: "lineSettings-rendererDropdownActive" });
+    errorMessage: OV<string> = mobx.observable.box(null, { name: "ScreenSettings-errorMessage" });
+
     @boundMethod
-    closeModal() : void {
+    closeModal(): void {
         mobx.action(() => {
             GlobalModel.lineSettingsModal.set(null);
         })();
     }
 
     @boundMethod
-    handleChangeArchived(val : boolean) : void {
+    handleChangeArchived(val: boolean): void {
         let line = this.getLine();
         if (line == null) {
             return;
@@ -489,13 +518,13 @@ class LineSettingsModal extends React.Component<{linenum : number}, {}> {
     }
 
     @boundMethod
-    toggleRendererDropdown() : void {
+    toggleRendererDropdown(): void {
         mobx.action(() => {
             this.rendererDropdownActive.set(!this.rendererDropdownActive.get());
         })();
     }
 
-    getLine() : LineType {
+    getLine(): LineType {
         let screen = GlobalModel.getActiveScreen();
         if (screen == null) {
             return;
@@ -504,31 +533,33 @@ class LineSettingsModal extends React.Component<{linenum : number}, {}> {
     }
 
     @boundMethod
-    clickSetRenderer(renderer : string) : void {
+    clickSetRenderer(renderer: string): void {
         let line = this.getLine();
         if (line == null) {
             return;
         }
-        let prtn = GlobalCommandRunner.lineSet(line.lineid, {renderer: renderer});
+        let prtn = GlobalCommandRunner.lineSet(line.lineid, { renderer: renderer });
         commandRtnHandler(prtn, this.errorMessage);
         mobx.action(() => {
             this.rendererDropdownActive.set(false);
         })();
     }
 
-    renderRendererDropdown() : any {
+    renderRendererDropdown(): any {
         let line = this.getLine();
         if (line == null) {
             return null;
         }
         let plugins = PluginModel.rendererPlugins;
-        let plugin : RendererPluginType = null;
+        let plugin: RendererPluginType = null;
         let renderer = line.renderer ?? "terminal";
         return (
-            <div className={cn("dropdown", "renderer-dropdown", {"is-active": this.rendererDropdownActive.get()})}>
+            <div className={cn("dropdown", "renderer-dropdown", { "is-active": this.rendererDropdownActive.get() })}>
                 <div className="dropdown-trigger">
                     <button onClick={this.toggleRendererDropdown} className="button is-small is-dark">
-                        <span><i className="fa-sharp fa-solid fa-fill"/> {renderer}</span>
+                        <span>
+                            <i className="fa-sharp fa-solid fa-fill" /> {renderer}
+                        </span>
                         <span className="icon is-small">
                             <i className="fa-sharp fa-regular fa-angle-down" aria-hidden="true"></i>
                         </span>
@@ -536,11 +567,21 @@ class LineSettingsModal extends React.Component<{linenum : number}, {}> {
                 </div>
                 <div className="dropdown-menu" role="menu">
                     <div className="dropdown-content has-background-black">
-                        <div onClick={() => this.clickSetRenderer(null) } key="terminal" className="dropdown-item">terminal</div>
+                        <div onClick={() => this.clickSetRenderer(null)} key="terminal" className="dropdown-item">
+                            terminal
+                        </div>
                         <For each="plugin" of={plugins}>
-                            <div onClick={() => this.clickSetRenderer(plugin.name) } key={plugin.name} className="dropdown-item">{plugin.name}</div>
+                            <div
+                                onClick={() => this.clickSetRenderer(plugin.name)}
+                                key={plugin.name}
+                                className="dropdown-item"
+                            >
+                                {plugin.name}
+                            </div>
                         </For>
-                        <div onClick={() => this.clickSetRenderer("none") } key="none" className="dropdown-item">none</div>
+                        <div onClick={() => this.clickSetRenderer("none")} key="none" className="dropdown-item">
+                            none
+                        </div>
                     </div>
                 </div>
             </div>
@@ -557,36 +598,32 @@ class LineSettingsModal extends React.Component<{linenum : number}, {}> {
         }
         return (
             <div className={cn("modal line-settings-modal settings-modal prompt-modal is-active")}>
-                <div className="modal-background"/>
+                <div className="modal-background" />
                 <div className="modal-content">
                     <header>
                         <div className="modal-title">line settings ({line.linenum})</div>
                         <div className="close-icon">
-                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times"/>
+                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times" />
                         </div>
                     </header>
                     <div className="inner-content">
                         <div className="settings-field">
-                            <div className="settings-label">
-                                Renderer
-                            </div>
-                            <div className="settings-input">
-                                {this.renderRendererDropdown()}
-                            </div>
+                            <div className="settings-label">Renderer</div>
+                            <div className="settings-input">{this.renderRendererDropdown()}</div>
                         </div>
                         <div className="settings-field">
-                            <div className="settings-label">
-                                Archived
-                            </div>
+                            <div className="settings-label">Archived</div>
                             <div className="settings-input">
-                                <Toggle checked={!!line.archived} onChange={this.handleChangeArchived}/>
+                                <Toggle checked={!!line.archived} onChange={this.handleChangeArchived} />
                             </div>
                         </div>
-                        <SettingsError errorMessage={this.errorMessage}/>
-                        <div style={{height: 50}}/>
+                        <SettingsError errorMessage={this.errorMessage} />
+                        <div style={{ height: 50 }} />
                     </div>
                     <footer>
-                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">Close</div>
+                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">
+                            Close
+                        </div>
                     </footer>
                 </div>
             </div>
@@ -596,32 +633,34 @@ class LineSettingsModal extends React.Component<{linenum : number}, {}> {
 
 @mobxReact.observer
 class ClientSettingsModal extends React.Component<{}, {}> {
-    tempFontSize : OV<number>;
-    fontSizeDropdownActive : OV<boolean> = mobx.observable.box(false, {name: "clientSettings-fontSizeDropdownActive"});
-    errorMessage : OV<string> = mobx.observable.box(null, {name: "ClientSettings-errorMessage"});
+    tempFontSize: OV<number>;
+    fontSizeDropdownActive: OV<boolean> = mobx.observable.box(false, { name: "clientSettings-fontSizeDropdownActive" });
+    errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
 
-    constructor(props : any) {
+    constructor(props: any) {
         super(props);
         let cdata = GlobalModel.clientData.get();
-        this.tempFontSize = mobx.observable.box(GlobalModel.termFontSize.get(), {name: "clientSettings-tempFontSize"});
+        this.tempFontSize = mobx.observable.box(GlobalModel.termFontSize.get(), {
+            name: "clientSettings-tempFontSize",
+        });
     }
-    
+
     @boundMethod
-    closeModal() : void {
+    closeModal(): void {
         mobx.action(() => {
             GlobalModel.clientSettingsModal.set(false);
         })();
     }
 
     @boundMethod
-    dismissError() : void {
+    dismissError(): void {
         mobx.action(() => {
             this.errorMessage.set(null);
         })();
     }
 
     @boundMethod
-    handleChangeFontSize(newFontSize : number) : void {
+    handleChangeFontSize(newFontSize: number): void {
         if (GlobalModel.termFontSize.get() == newFontSize) {
             return;
         }
@@ -630,29 +669,28 @@ class ClientSettingsModal extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    togglefontSizeDropdown() : void {
+    togglefontSizeDropdown(): void {
         mobx.action(() => {
             this.fontSizeDropdownActive.set(!this.fontSizeDropdownActive.get());
         })();
     }
 
     @boundMethod
-    handleChangeTelemetry(val : boolean) : void {
-        let prtn : Promise<CommandRtnType> = null;
+    handleChangeTelemetry(val: boolean): void {
+        let prtn: Promise<CommandRtnType> = null;
         if (val) {
             prtn = GlobalCommandRunner.telemetryOn(false);
-        }
-        else {
+        } else {
             prtn = GlobalCommandRunner.telemetryOff(false);
         }
         commandRtnHandler(prtn, this.errorMessage);
     }
 
-    renderFontSizeDropdown() : any {
+    renderFontSizeDropdown(): any {
         let availableFontSizes = [8, 9, 10, 11, 12, 13, 14, 15];
-        let fsize : number = 0;
+        let fsize: number = 0;
         return (
-            <div className={cn("dropdown", "font-size-dropdown", {"is-active": this.fontSizeDropdownActive.get()})}>
+            <div className={cn("dropdown", "font-size-dropdown", { "is-active": this.fontSizeDropdownActive.get() })}>
                 <div className="dropdown-trigger">
                     <button onClick={this.togglefontSizeDropdown} className="button is-small is-dark">
                         <span>{this.tempFontSize.get()}px</span>
@@ -664,7 +702,13 @@ class ClientSettingsModal extends React.Component<{}, {}> {
                 <div className="dropdown-menu" role="menu">
                     <div className="dropdown-content has-background-black">
                         <For each="fsize" of={availableFontSizes}>
-                            <div onClick={() => this.handleChangeFontSize(fsize) } key={fsize + "px"} className="dropdown-item">{fsize}px</div>
+                            <div
+                                onClick={() => this.handleChangeFontSize(fsize)}
+                                key={fsize + "px"}
+                                className="dropdown-item"
+                            >
+                                {fsize}px
+                            </div>
                         </For>
                     </div>
                 </div>
@@ -673,114 +717,117 @@ class ClientSettingsModal extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    inlineUpdateOpenAIModel(newModel : string) : void {
-        let prtn = GlobalCommandRunner.setClientOpenAISettings({model: newModel});
+    inlineUpdateOpenAIModel(newModel: string): void {
+        let prtn = GlobalCommandRunner.setClientOpenAISettings({ model: newModel });
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
-    inlineUpdateOpenAIToken(newToken : string) : void {
-        let prtn = GlobalCommandRunner.setClientOpenAISettings({apitoken: newToken});
+    inlineUpdateOpenAIToken(newToken: string): void {
+        let prtn = GlobalCommandRunner.setClientOpenAISettings({ apitoken: newToken });
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
-    inlineUpdateOpenAIMaxTokens(newMaxTokensStr : string) : void {
-        let prtn = GlobalCommandRunner.setClientOpenAISettings({maxtokens: newMaxTokensStr});
+    inlineUpdateOpenAIMaxTokens(newMaxTokensStr: string): void {
+        let prtn = GlobalCommandRunner.setClientOpenAISettings({ maxtokens: newMaxTokensStr });
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
-    setErrorMessage(msg : string) : void {
+    setErrorMessage(msg: string): void {
         mobx.action(() => {
             this.errorMessage.set(msg);
         })();
     }
 
     render() {
-        let cdata : ClientDataType = GlobalModel.clientData.get();
+        let cdata: ClientDataType = GlobalModel.clientData.get();
         let openAIOpts = cdata.openaiopts ?? {};
-        let apiTokenStr = (util.isBlank(openAIOpts.apitoken) ? "(not set)" : "********");
-        let maxTokensStr = String(openAIOpts.maxtokens == null || openAIOpts.maxtokens == 0 ? 1000 : openAIOpts.maxtokens);
+        let apiTokenStr = util.isBlank(openAIOpts.apitoken) ? "(not set)" : "********";
+        let maxTokensStr = String(
+            openAIOpts.maxtokens == null || openAIOpts.maxtokens == 0 ? 1000 : openAIOpts.maxtokens
+        );
         return (
             <div className={cn("modal client-settings-modal settings-modal prompt-modal is-active")}>
-                <div className="modal-background"/>
+                <div className="modal-background" />
                 <div className="modal-content">
                     <header>
                         <div className="modal-title">client settings</div>
                         <div className="close-icon">
-                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times"/>
+                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times" />
                         </div>
                     </header>
                     <div className="inner-content">
                         <div className="settings-field">
-                            <div className="settings-label">
-                                Term Font Size
-                            </div>
-                            <div className="settings-input">
-                                {this.renderFontSizeDropdown()}
-                            </div>
+                            <div className="settings-label">Term Font Size</div>
+                            <div className="settings-input">{this.renderFontSizeDropdown()}</div>
                         </div>
                         <div className="settings-field">
-                            <div className="settings-label">
-                                Client ID
-                            </div>
-                            <div className="settings-input">
-                                {cdata.clientid}
-                            </div>
+                            <div className="settings-label">Client ID</div>
+                            <div className="settings-input">{cdata.clientid}</div>
                         </div>
                         <div className="settings-field">
-                            <div className="settings-label">
-                                Client Version
-                            </div>
+                            <div className="settings-label">Client Version</div>
                             <div className="settings-input">
                                 {VERSION} {BUILD}
                             </div>
                         </div>
                         <div className="settings-field">
-                            <div className="settings-label">
-                                DB Version
-                            </div>
+                            <div className="settings-label">DB Version</div>
+                            <div className="settings-input">{cdata.dbversion}</div>
+                        </div>
+                        <div className="settings-field">
+                            <div className="settings-label">Basic Telemetry</div>
                             <div className="settings-input">
-                                {cdata.dbversion}
+                                <Toggle checked={!cdata.clientopts.notelemetry} onChange={this.handleChangeTelemetry} />
                             </div>
                         </div>
                         <div className="settings-field">
-                            <div className="settings-label">
-                                Basic Telemetry
-                            </div>
+                            <div className="settings-label">OpenAI Token</div>
                             <div className="settings-input">
-                                <Toggle checked={!cdata.clientopts.notelemetry} onChange={this.handleChangeTelemetry}/>
+                                <InlineSettingsTextEdit
+                                    placeholder=""
+                                    text={apiTokenStr}
+                                    value={""}
+                                    onChange={this.inlineUpdateOpenAIToken}
+                                    maxLength={100}
+                                    showIcon={true}
+                                />
                             </div>
                         </div>
                         <div className="settings-field">
-                            <div className="settings-label">
-                                OpenAI Token
-                            </div>
+                            <div className="settings-label">OpenAI Model</div>
                             <div className="settings-input">
-                                <InlineSettingsTextEdit placeholder="" text={apiTokenStr} value={""} onChange={this.inlineUpdateOpenAIToken} maxLength={100} showIcon={true}/>
+                                <InlineSettingsTextEdit
+                                    placeholder="gpt-3.5-turbo"
+                                    text={util.isBlank(openAIOpts.model) ? "gpt-3.5-turbo" : openAIOpts.model}
+                                    value={openAIOpts.model ?? ""}
+                                    onChange={this.inlineUpdateOpenAIModel}
+                                    maxLength={100}
+                                    showIcon={true}
+                                />
                             </div>
                         </div>
                         <div className="settings-field">
-                            <div className="settings-label">
-                                OpenAI Model
-                            </div>
+                            <div className="settings-label">OpenAI MaxTokens</div>
                             <div className="settings-input">
-                                <InlineSettingsTextEdit placeholder="gpt-3.5-turbo" text={util.isBlank(openAIOpts.model) ? "gpt-3.5-turbo" : openAIOpts.model} value={openAIOpts.model ?? ""} onChange={this.inlineUpdateOpenAIModel} maxLength={100} showIcon={true}/>
+                                <InlineSettingsTextEdit
+                                    placeholder=""
+                                    text={maxTokensStr}
+                                    value={maxTokensStr}
+                                    onChange={this.inlineUpdateOpenAIMaxTokens}
+                                    maxLength={10}
+                                    showIcon={true}
+                                />
                             </div>
                         </div>
-                        <div className="settings-field">
-                            <div className="settings-label">
-                                OpenAI MaxTokens
-                            </div>
-                            <div className="settings-input">
-                                <InlineSettingsTextEdit placeholder="" text={maxTokensStr} value={maxTokensStr} onChange={this.inlineUpdateOpenAIMaxTokens} maxLength={10} showIcon={true}/>
-                            </div>
-                        </div>
-                        <SettingsError errorMessage={this.errorMessage}/>
+                        <SettingsError errorMessage={this.errorMessage} />
                     </div>
                     <footer>
-                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">Close</div>
+                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">
+                            Close
+                        </div>
                     </footer>
                 </div>
             </div>
@@ -788,4 +835,10 @@ class ClientSettingsModal extends React.Component<{}, {}> {
     }
 }
 
-export {ScreenSettingsModal, SessionSettingsModal, LineSettingsModal, ClientSettingsModal, WebStopShareConfirmMarkdown};
+export {
+    ScreenSettingsModal,
+    SessionSettingsModal,
+    LineSettingsModal,
+    ClientSettingsModal,
+    WebStopShareConfirmMarkdown,
+};
diff --git a/src/sidebar.less b/src/sidebar.less
index d15d5d43..97ba302e 100644
--- a/src/sidebar.less
+++ b/src/sidebar.less
@@ -5,7 +5,7 @@
     border-bottom: 2px solid #ddd;
     margin-left: -4px;
     margin-right: -5px;
-    
+
     .title.prompt-logo-small {
         padding-left: 5px;
         padding-top: 8px;
@@ -18,15 +18,15 @@
         white-space: nowrap;
         overflow: hidden;
         flex-shrink: 0;
-        
+
         &.is-dev {
             background-color: darken(rgb(177, 0, 10), 30%);
         }
-        
+
         &.collapsed {
             padding-left: 1px;
         }
-        
+
         .title-cursor {
             position: relative;
             bottom: 3px;
@@ -84,12 +84,13 @@
     }
 
     .menu-list {
-        li.new-session, li.add-remote {
+        li.new-session,
+        li.add-remote {
             a {
                 color: #666;
                 font-size: 13px;
             }
-            
+
             .fa {
                 font-size: 10px;
             }
@@ -103,7 +104,10 @@
             .mono-font();
         }
 
-        li.menu-history, li.menu-bookmarks, li.menu-settings, li.menu-websharing {
+        li.menu-history,
+        li.menu-bookmarks,
+        li.menu-settings,
+        li.menu-websharing {
             margin-left: -10px;
         }
 
diff --git a/src/simplerenderer.tsx b/src/simplerenderer.tsx
index 521aa502..4e48ec57 100644
--- a/src/simplerenderer.tsx
+++ b/src/simplerenderer.tsx
@@ -3,27 +3,21 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { sprintf } from "sprintf-js";
 import { boundMethod } from "autobind-decorator";
-import {
-  If,
-  For,
-  When,
-  Otherwise,
-  Choose,
-} from "tsx-control-statements/components";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
 import type {
-  RendererModelInitializeParams,
-  TermOptsType,
-  RendererContext,
-  RendererOpts,
-  SimpleBlobRendererComponent,
-  RendererModelContainerApi,
-  RendererPluginType,
-  PtyDataType,
-  RendererModel,
-  RendererOptsUpdate,
-  LineType,
-  TermContextUnion,
-  RendererContainerType,
+    RendererModelInitializeParams,
+    TermOptsType,
+    RendererContext,
+    RendererOpts,
+    SimpleBlobRendererComponent,
+    RendererModelContainerApi,
+    RendererPluginType,
+    PtyDataType,
+    RendererModel,
+    RendererOptsUpdate,
+    LineType,
+    TermContextUnion,
+    RendererContainerType,
 } from "./types";
 import { PacketDataBuffer } from "./ptydata";
 import { debounce, throttle } from "throttle-debounce";
@@ -32,198 +26,193 @@ type OV<V> = mobx.IObservableValue<V>;
 type CV<V> = mobx.IComputedValue<V>;
 
 class SimpleBlobRendererModel {
-  context: RendererContext;
-  opts: RendererOpts;
-  isDone: OV<boolean>;
-  api: RendererModelContainerApi;
-  savedHeight: number;
-  loading: OV<boolean>;
-  loadError: OV<string> = mobx.observable.box(null, {
-    name: "renderer-loadError",
-  });
-  ptyData: PtyDataType;
-  ptyDataSource: (termContext: TermContextUnion) => Promise<PtyDataType>;
-
-  initialize(params: RendererModelInitializeParams): void {
-    this.loading = mobx.observable.box(true, { name: "renderer-loading" });
-    this.isDone = mobx.observable.box(params.isDone, {
-      name: "renderer-isDone",
+    context: RendererContext;
+    opts: RendererOpts;
+    isDone: OV<boolean>;
+    api: RendererModelContainerApi;
+    savedHeight: number;
+    loading: OV<boolean>;
+    loadError: OV<string> = mobx.observable.box(null, {
+        name: "renderer-loadError",
     });
-    this.context = params.context;
-    this.opts = params.opts;
-    this.api = params.api;
-    this.savedHeight = params.savedHeight;
-    this.ptyDataSource = params.ptyDataSource;
-    if (this.isDone.get()) {
-      setTimeout(() => this.reload(0), 10);
+    ptyData: PtyDataType;
+    ptyDataSource: (termContext: TermContextUnion) => Promise<PtyDataType>;
+
+    initialize(params: RendererModelInitializeParams): void {
+        this.loading = mobx.observable.box(true, { name: "renderer-loading" });
+        this.isDone = mobx.observable.box(params.isDone, {
+            name: "renderer-isDone",
+        });
+        this.context = params.context;
+        this.opts = params.opts;
+        this.api = params.api;
+        this.savedHeight = params.savedHeight;
+        this.ptyDataSource = params.ptyDataSource;
+        if (this.isDone.get()) {
+            setTimeout(() => this.reload(0), 10);
+        }
     }
-  }
 
-  dispose(): void {
-    return;
-  }
-
-  giveFocus(): void {
-    return;
-  }
-
-  updateOpts(update: RendererOptsUpdate): void {
-    Object.assign(this.opts, update);
-  }
-
-  updateHeight(newHeight: number): void {
-    if (this.savedHeight != newHeight) {
-      this.savedHeight = newHeight;
-      this.api.saveHeight(newHeight);
+    dispose(): void {
+        return;
     }
-  }
 
-  setIsDone(): void {
-    if (this.isDone.get()) {
-      return;
+    giveFocus(): void {
+        return;
     }
-    mobx.action(() => {
-      this.isDone.set(true);
-    })();
-    this.reload(0);
-  }
 
-  reload(delayMs: number): void {
-    mobx.action(() => {
-      this.loading.set(true);
-    })();
-    let rtnp = this.ptyDataSource(this.context);
-    if (rtnp == null) {
-      console.log(
-        "no promise returned from ptyDataSource (simplerenderer)",
-        this.context
-      );
-      return;
+    updateOpts(update: RendererOptsUpdate): void {
+        Object.assign(this.opts, update);
     }
-    rtnp
-      .then((ptydata) => {
-        setTimeout(() => {
-          this.ptyData = ptydata;
-          mobx.action(() => {
-            this.loading.set(false);
-            this.loadError.set(null);
-          })();
-        }, delayMs);
-      })
-      .catch((e) => {
-        console.log("error loading data", e);
+
+    updateHeight(newHeight: number): void {
+        if (this.savedHeight != newHeight) {
+            this.savedHeight = newHeight;
+            this.api.saveHeight(newHeight);
+        }
+    }
+
+    setIsDone(): void {
+        if (this.isDone.get()) {
+            return;
+        }
         mobx.action(() => {
-          this.loadError.set("error loading data: " + e);
+            this.isDone.set(true);
         })();
-      });
-  }
+        this.reload(0);
+    }
 
-  receiveData(pos: number, data: Uint8Array, reason?: string): void {
-    // this.dataBuf.receiveData(pos, data, reason);
-  }
+    reload(delayMs: number): void {
+        mobx.action(() => {
+            this.loading.set(true);
+        })();
+        let rtnp = this.ptyDataSource(this.context);
+        if (rtnp == null) {
+            console.log("no promise returned from ptyDataSource (simplerenderer)", this.context);
+            return;
+        }
+        rtnp.then((ptydata) => {
+            setTimeout(() => {
+                this.ptyData = ptydata;
+                mobx.action(() => {
+                    this.loading.set(false);
+                    this.loadError.set(null);
+                })();
+            }, delayMs);
+        }).catch((e) => {
+            console.log("error loading data", e);
+            mobx.action(() => {
+                this.loadError.set("error loading data: " + e);
+            })();
+        });
+    }
+
+    receiveData(pos: number, data: Uint8Array, reason?: string): void {
+        // this.dataBuf.receiveData(pos, data, reason);
+    }
 }
 
 @mobxReact.observer
 class SimpleBlobRenderer extends React.Component<
-  {
-    rendererContainer: RendererContainerType;
-    lineId: string;
-    plugin: RendererPluginType;
-    onHeightChange: () => void;
-    initParams: RendererModelInitializeParams;
-  },
-  {}
+    {
+        rendererContainer: RendererContainerType;
+        lineId: string;
+        plugin: RendererPluginType;
+        onHeightChange: () => void;
+        initParams: RendererModelInitializeParams;
+    },
+    {}
 > {
-  model: SimpleBlobRendererModel;
-  wrapperDivRef: React.RefObject<any> = React.createRef();
-  rszObs: ResizeObserver;
-  updateHeight_debounced: (newHeight: number) => void;
+    model: SimpleBlobRendererModel;
+    wrapperDivRef: React.RefObject<any> = React.createRef();
+    rszObs: ResizeObserver;
+    updateHeight_debounced: (newHeight: number) => void;
 
-  constructor(props: any) {
-    super(props);
-    let { rendererContainer, lineId, plugin, initParams } = this.props;
-    this.model = new SimpleBlobRendererModel();
-    this.model.initialize(initParams);
-    rendererContainer.registerRenderer(lineId, this.model);
-    this.updateHeight_debounced = debounce(1000, this.updateHeight.bind(this));
-  }
+    constructor(props: any) {
+        super(props);
+        let { rendererContainer, lineId, plugin, initParams } = this.props;
+        this.model = new SimpleBlobRendererModel();
+        this.model.initialize(initParams);
+        rendererContainer.registerRenderer(lineId, this.model);
+        this.updateHeight_debounced = debounce(1000, this.updateHeight.bind(this));
+    }
 
-  updateHeight(newHeight: number): void {
-    this.model.updateHeight(newHeight);
-  }
+    updateHeight(newHeight: number): void {
+        this.model.updateHeight(newHeight);
+    }
 
-  handleResize(entries: ResizeObserverEntry[]): void {
-    if (this.model.loading.get()) {
-      return;
+    handleResize(entries: ResizeObserverEntry[]): void {
+        if (this.model.loading.get()) {
+            return;
+        }
+        if (this.props.onHeightChange) {
+            this.props.onHeightChange();
+        }
+        if (!this.model.loading.get() && this.wrapperDivRef.current != null) {
+            let height = this.wrapperDivRef.current.offsetHeight;
+            this.updateHeight_debounced(height);
+        }
     }
-    if (this.props.onHeightChange) {
-      this.props.onHeightChange();
-    }
-    if (!this.model.loading.get() && this.wrapperDivRef.current != null) {
-      let height = this.wrapperDivRef.current.offsetHeight;
-      this.updateHeight_debounced(height);
-    }
-  }
 
-  checkRszObs() {
-    if (this.rszObs != null) {
-      return;
+    checkRszObs() {
+        if (this.rszObs != null) {
+            return;
+        }
+        if (this.wrapperDivRef.current == null) {
+            return;
+        }
+        this.rszObs = new ResizeObserver(this.handleResize.bind(this));
+        this.rszObs.observe(this.wrapperDivRef.current);
     }
-    if (this.wrapperDivRef.current == null) {
-      return;
-    }
-    this.rszObs = new ResizeObserver(this.handleResize.bind(this));
-    this.rszObs.observe(this.wrapperDivRef.current);
-  }
 
-  componentDidMount() {
-    this.checkRszObs();
-  }
-
-  componentWillUnmount() {
-    let { rendererContainer, lineId } = this.props;
-    rendererContainer.unloadRenderer(lineId);
-    if (this.rszObs != null) {
-      this.rszObs.disconnect();
-      this.rszObs = null;
+    componentDidMount() {
+        this.checkRszObs();
     }
-  }
 
-  componentDidUpdate() {
-    this.checkRszObs();
-  }
+    componentWillUnmount() {
+        let { rendererContainer, lineId } = this.props;
+        rendererContainer.unloadRenderer(lineId);
+        if (this.rszObs != null) {
+            this.rszObs.disconnect();
+            this.rszObs = null;
+        }
+    }
 
-  render() {
-    let { plugin } = this.props;
-    let model = this.model;
-    if (model.loading.get()) {
-      let height = this.model.savedHeight;
-      return (
-        <div ref={this.wrapperDivRef} style={{ minHeight: height }}>
-          ...
-        </div>
-      );
+    componentDidUpdate() {
+        this.checkRszObs();
     }
-    let Comp = plugin.simpleComponent;
-    if (Comp == null) {
-      <div ref={this.wrapperDivRef}>(no component found in plugin)</div>;
+
+    render() {
+        let { plugin } = this.props;
+        let model = this.model;
+        if (model.loading.get()) {
+            let height = this.model.savedHeight;
+            return (
+                <div ref={this.wrapperDivRef} style={{ minHeight: height }}>
+                    ...
+                </div>
+            );
+        }
+        let Comp = plugin.simpleComponent;
+        if (Comp == null) {
+            <div ref={this.wrapperDivRef}>(no component found in plugin)</div>;
+        }
+        let dataBlob = new Blob([model.ptyData.data]);
+        let simpleModel = model as SimpleBlobRendererModel;
+        let { festate, cmdstr } = this.props.initParams.rawCmd;
+        return (
+            <div ref={this.wrapperDivRef}>
+                <Comp
+                    cwd={festate.cwd}
+                    cmdstr={cmdstr}
+                    data={dataBlob}
+                    context={simpleModel.context}
+                    opts={simpleModel.opts}
+                    savedHeight={simpleModel.savedHeight}
+                />
+            </div>
+        );
     }
-    let dataBlob = new Blob([model.ptyData.data]);
-    let simpleModel = model as SimpleBlobRendererModel;
-    let { festate, cmdstr } = this.props.initParams.rawCmd;
-    return (
-      <div ref={this.wrapperDivRef}>
-        <Comp
-          cwd={festate.cwd}
-          cmdstr={cmdstr}
-          data={dataBlob}
-          context={simpleModel.context}
-          opts={simpleModel.opts}
-          savedHeight={simpleModel.savedHeight}
-        />
-      </div>
-    );
-  }
 }
 
 export { SimpleBlobRendererModel, SimpleBlobRenderer };
diff --git a/src/tabs.less b/src/tabs.less
index 3bad54f0..6d7d5985 100644
--- a/src/tabs.less
+++ b/src/tabs.less
@@ -44,9 +44,7 @@
         &.is-active {
             background-color: @tab-yellow;
             color: black;
-            box-shadow:
-                0 3px 0 #fff inset,
-                0 4px 0 #000 inset;
+            box-shadow: 0 3px 0 #fff inset, 0 4px 0 #000 inset;
         }
     }
 
@@ -95,9 +93,7 @@
         &.is-active {
             color: black;
             background-color: @tab-white;
-            box-shadow:
-                0 3px 0 #fff inset,
-                0 4px 0 #000 inset;
+            box-shadow: 0 3px 0 #fff inset, 0 4px 0 #000 inset;
         }
     }
 
@@ -122,7 +118,7 @@
 
 .screen-tabs-container {
     position: relative;
-    
+
     &:hover {
         z-index: 200;
     }
@@ -169,7 +165,7 @@
         height: 30px;
         min-width: 80px;
         width: 150px;
-        line-height: 1.0;
+        line-height: 1;
         flex-shrink: 1;
         display: flex;
         justify-content: center;
@@ -193,7 +189,7 @@
         &.is-active {
             box-shadow: 0 3px 0 #fff inset;
             border-top: none;
-            opacity: 1.0;
+            opacity: 1;
         }
 
         &.is-archived {
diff --git a/src/term.ts b/src/term.ts
index c32cf4d2..6f3dc254 100644
--- a/src/term.ts
+++ b/src/term.ts
@@ -1,58 +1,58 @@
 import * as mobx from "mobx";
-import {Terminal} from 'xterm';
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import {v4 as uuidv4} from "uuid";
-import {termHeightFromRows, windowWidthToCols, windowHeightToRows} from "./textmeasure";
-import {boundInt} from "./util";
-import type {TermContextUnion, TermOptsType, TermWinSize, RendererContext, WindowSize, PtyDataType} from "./types";
+import { Terminal } from "xterm";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import { v4 as uuidv4 } from "uuid";
+import { termHeightFromRows, windowWidthToCols, windowHeightToRows } from "./textmeasure";
+import { boundInt } from "./util";
+import type { TermContextUnion, TermOptsType, TermWinSize, RendererContext, WindowSize, PtyDataType } from "./types";
 
 type DataUpdate = {
-    data : Uint8Array,
-    pos : number,
-}
+    data: Uint8Array;
+    pos: number;
+};
 
 const MinTermCols = 10;
 const MaxTermCols = 1024;
 
 type TermWrapOpts = {
-    termContext : TermContextUnion,
-    usedRows? : number,
-    termOpts : TermOptsType,
-    winSize : WindowSize,
-    keyHandler? : (event : any, termWrap : TermWrap) => void,
-    focusHandler? : (focus : boolean) => void,
-    dataHandler? : (data : string, termWrap : TermWrap) => void,
-    isRunning : boolean,
-    customKeyHandler? : (event : any, termWrap : TermWrap) => boolean,
-    fontSize : number,
-    ptyDataSource : (termContext : TermContextUnion) => Promise<PtyDataType>,
-    onUpdateContentHeight : (termContext : RendererContext, height : number) => void,
+    termContext: TermContextUnion;
+    usedRows?: number;
+    termOpts: TermOptsType;
+    winSize: WindowSize;
+    keyHandler?: (event: any, termWrap: TermWrap) => void;
+    focusHandler?: (focus: boolean) => void;
+    dataHandler?: (data: string, termWrap: TermWrap) => void;
+    isRunning: boolean;
+    customKeyHandler?: (event: any, termWrap: TermWrap) => boolean;
+    fontSize: number;
+    ptyDataSource: (termContext: TermContextUnion) => Promise<PtyDataType>;
+    onUpdateContentHeight: (termContext: RendererContext, height: number) => void;
 };
 
 // cmd-instance
 class TermWrap {
-    terminal : any;
-    termContext : TermContextUnion;
-    atRowMax : boolean;
-    usedRows : mobx.IObservableValue<number>;
-    flexRows : boolean;
-    connectedElem : Element;
-    ptyPos : number = 0;
-    reloading : boolean = false;
-    dataUpdates : DataUpdate[] = [];
-    loadError : mobx.IObservableValue<boolean> = mobx.observable.box(false, {name: "term-loaderror"});
-    winSize : WindowSize;
-    numParseErrors : number = 0;
-    termSize : TermWinSize;
-    focusHandler : (focus : boolean) => void;
-    isRunning : boolean;
-    fontSize : number;
-    onUpdateContentHeight : (termContext : RendererContext, height : number) => void;
-    ptyDataSource : (termContext : TermContextUnion) => Promise<PtyDataType>;
-    initializing : boolean;
+    terminal: any;
+    termContext: TermContextUnion;
+    atRowMax: boolean;
+    usedRows: mobx.IObservableValue<number>;
+    flexRows: boolean;
+    connectedElem: Element;
+    ptyPos: number = 0;
+    reloading: boolean = false;
+    dataUpdates: DataUpdate[] = [];
+    loadError: mobx.IObservableValue<boolean> = mobx.observable.box(false, { name: "term-loaderror" });
+    winSize: WindowSize;
+    numParseErrors: number = 0;
+    termSize: TermWinSize;
+    focusHandler: (focus: boolean) => void;
+    isRunning: boolean;
+    fontSize: number;
+    onUpdateContentHeight: (termContext: RendererContext, height: number) => void;
+    ptyDataSource: (termContext: TermContextUnion) => Promise<PtyDataType>;
+    initializing: boolean;
 
-    constructor(elem : Element, opts : TermWrapOpts) {
+    constructor(elem: Element, opts: TermWrapOpts) {
         opts = opts ?? ({} as any);
         this.termContext = opts.termContext;
         this.connectedElem = elem;
@@ -66,23 +66,27 @@ class TermWrap {
         this.initializing = true;
         if (this.flexRows) {
             this.atRowMax = false;
-            this.usedRows = mobx.observable.box(opts.usedRows ?? (opts.isRunning ? 1 : 0), {name: "term-usedrows"});
-        }
-        else {
+            this.usedRows = mobx.observable.box(opts.usedRows ?? (opts.isRunning ? 1 : 0), { name: "term-usedrows" });
+        } else {
             this.atRowMax = true;
-            this.usedRows = mobx.observable.box(opts.termOpts.rows, {name: "term-usedrows"});
+            this.usedRows = mobx.observable.box(opts.termOpts.rows, { name: "term-usedrows" });
         }
         if (opts.winSize == null) {
-            this.termSize = {rows: opts.termOpts.rows, cols: opts.termOpts.cols};
-        }
-        else {
+            this.termSize = { rows: opts.termOpts.rows, cols: opts.termOpts.cols };
+        } else {
             let cols = windowWidthToCols(opts.winSize.width, opts.fontSize);
-            this.termSize = {rows: opts.termOpts.rows, cols: cols};
+            this.termSize = { rows: opts.termOpts.rows, cols: cols };
         }
         let theme = {
             foreground: "#d3d7cf",
         };
-        this.terminal = new Terminal({rows: this.termSize.rows, cols: this.termSize.cols, fontSize: opts.fontSize, fontFamily: "JetBrains Mono", theme: theme});
+        this.terminal = new Terminal({
+            rows: this.termSize.rows,
+            cols: this.termSize.cols,
+            fontSize: opts.fontSize,
+            fontFamily: "JetBrains Mono",
+            theme: theme,
+        });
         this.terminal._core._inputHandler._parser.setErrorHandler((state) => {
             this.numParseErrors++;
             return state;
@@ -99,7 +103,7 @@ class TermWrap {
                 this.focusHandler(true);
             }
         });
-        this.terminal.textarea.addEventListener("blur", (e : any) => {
+        this.terminal.textarea.addEventListener("blur", (e: any) => {
             if (document.activeElement == this.terminal.textarea) {
                 return;
             }
@@ -114,12 +118,12 @@ class TermWrap {
         setTimeout(() => this.reload(0), 10);
     }
 
-    getUsedRows() : number {
+    getUsedRows(): number {
         return this.usedRows.get();
     }
 
     @boundMethod
-    elemScrollHandler(e : any) {
+    elemScrollHandler(e: any) {
         // this stops a weird behavior in the terminal
         // xterm.js renders a textarea that handles focus.  when it focuses and a space is typed the browser
         //   will scroll to make it visible (even though our terminal element has overflow hidden)
@@ -130,21 +134,21 @@ class TermWrap {
         e.target.scrollTop = 0;
     }
 
-    getContextRemoteId() : string {
+    getContextRemoteId(): string {
         if ("remoteId" in this.termContext) {
             return this.termContext.remoteId;
         }
         return null;
     }
 
-    getRendererContext() : RendererContext {
+    getRendererContext(): RendererContext {
         if ("remoteId" in this.termContext) {
             return null;
         }
         return this.termContext;
     }
 
-    getFontHeight() : number {
+    getFontHeight(): number {
         return this.terminal._core.viewport._currentRowHeight;
     }
 
@@ -160,14 +164,14 @@ class TermWrap {
             return;
         }
         this.terminal.focus();
-        setTimeout(() => this.terminal._core.viewport.syncScrollArea(true), 0)
+        setTimeout(() => this.terminal._core.viewport.syncScrollArea(true), 0);
     }
 
     disconnectElem() {
         this.connectedElem = null;
     }
 
-    getTermUsedRows() : number {
+    getTermUsedRows(): number {
         let term = this.terminal;
         if (term == null) {
             return 0;
@@ -178,21 +182,21 @@ class TermWrap {
         if (termNumLines > term.rows) {
             return term.rows;
         }
-        let usedRows = (this.isRunning ? 1 : 0);
+        let usedRows = this.isRunning ? 1 : 0;
         if (this.isRunning && termYPos >= usedRows) {
             usedRows = termYPos + 1;
         }
-        for (let i=term.rows-1; i>=usedRows; i--) {
+        for (let i = term.rows - 1; i >= usedRows; i--) {
             let line = termBuf.translateBufferLineToString(i, true);
             if (line != null && line.trim() != "") {
-                usedRows = i+1;
+                usedRows = i + 1;
                 break;
             }
         }
         return usedRows;
     }
 
-    updateUsedRows(forceFull : boolean, reason : string) {
+    updateUsedRows(forceFull: boolean, reason: string) {
         if (this.terminal == null) {
             return;
         }
@@ -228,15 +232,15 @@ class TermWrap {
         })();
     }
 
-    resizeCols(cols : number) : void {
-        this.resize({rows: this.termSize.rows, cols: cols});
+    resizeCols(cols: number): void {
+        this.resize({ rows: this.termSize.rows, cols: cols });
     }
 
-    resize(size : TermWinSize) : void {
+    resize(size: TermWinSize): void {
         if (this.terminal == null) {
             return;
         }
-        let newSize = {rows: size.rows, cols: size.cols};
+        let newSize = { rows: size.rows, cols: size.cols };
         newSize.cols = boundInt(newSize.cols, MinTermCols, MaxTermCols);
         if (newSize.rows == this.termSize.rows && newSize.cols == this.termSize.cols) {
             return;
@@ -246,17 +250,17 @@ class TermWrap {
         this.updateUsedRows(true, "resize");
     }
 
-    resizeWindow(size : WindowSize) : void {
+    resizeWindow(size: WindowSize): void {
         let cols = windowWidthToCols(size.width, this.fontSize);
         let rows = windowHeightToRows(size.height, this.fontSize);
-        this.resize({rows, cols});
+        this.resize({ rows, cols });
     }
 
-    _reloadThenHandler(ptydata : PtyDataType) {
+    _reloadThenHandler(ptydata: PtyDataType) {
         this.reloading = false;
         this.ptyPos = ptydata.pos;
         this.receiveData(ptydata.pos, ptydata.data, "reload-main");
-        for (let i=0; i<this.dataUpdates.length; i++) {
+        for (let i = 0; i < this.dataUpdates.length; i++) {
             this.receiveData(this.dataUpdates[i].pos, this.dataUpdates[i].data, "reload-update-" + i);
         }
         this.dataUpdates = [];
@@ -267,7 +271,7 @@ class TermWrap {
         }
     }
 
-    getLineNum() : number {
+    getLineNum(): number {
         let context = this.getRendererContext();
         if (context == null) {
             return 0;
@@ -275,7 +279,7 @@ class TermWrap {
         return context.lineNum;
     }
 
-    hardResetTerminal() : void {
+    hardResetTerminal(): void {
         if (this.terminal == null) {
             return;
         }
@@ -286,7 +290,7 @@ class TermWrap {
         this.numParseErrors = 0;
     }
 
-    reload(delayMs : number) {
+    reload(delayMs: number) {
         if (this.terminal == null) {
             return;
         }
@@ -306,14 +310,16 @@ class TermWrap {
                 this._reloadThenHandler(ptydata);
             }, delayMs);
         }).catch((e) => {
-            mobx.action(() => { this.loadError.set(true); })();
+            mobx.action(() => {
+                this.loadError.set(true);
+            })();
             this.dataUpdates = [];
             this.reloading = false;
             console.log("error reloading terminal", this.termContext, e);
         });
     }
 
-    receiveData(pos : number, data : Uint8Array, reason? : string) {
+    receiveData(pos: number, data: Uint8Array, reason?: string) {
         // console.log("update-pty-data", reason, "line:" + this.getLineNum(), pos, data.length, "=>", pos + data.length);
         if (this.initializing) {
             return;
@@ -325,7 +331,7 @@ class TermWrap {
             return;
         }
         if (this.reloading) {
-            this.dataUpdates.push({data: data, pos: pos});
+            this.dataUpdates.push({ data: data, pos: pos });
             return;
         }
         if (pos > this.ptyPos) {
@@ -347,10 +353,10 @@ class TermWrap {
         });
     }
 
-    cmdDone() : void {
+    cmdDone(): void {
         this.isRunning = false;
         this.updateUsedRows(true, "cmd-done");
     }
 }
 
-export {TermWrap};
+export { TermWrap };
diff --git a/src/textmeasure.ts b/src/textmeasure.ts
index fc69aa9b..211ee8e7 100644
--- a/src/textmeasure.ts
+++ b/src/textmeasure.ts
@@ -1,9 +1,9 @@
-import {boundInt} from "./util";
+import { boundInt } from "./util";
 
 const MinTermCols = 10;
 const MaxTermCols = 1024;
 
-let MonoFontSizes : {height : number, width : number}[] = [];
+let MonoFontSizes: { height: number; width: number }[] = [];
 
 // MonoFontSizes[8] = {height: 11, width: 4.797};
 // MonoFontSizes[9] = {height: 12, width: 5.398};
@@ -15,18 +15,21 @@ let MonoFontSizes : {height : number, width : number}[] = [];
 // MonoFontSizes[15] = {height: 20, width: 9};
 // MonoFontSizes[16] = {height: 22, width: 9.594};
 
-function getMonoFontSize(fontSize : number) : {height : number, width : number} {
+function getMonoFontSize(fontSize: number): { height: number; width: number } {
     if (MonoFontSizes[fontSize] != null) {
         return MonoFontSizes[fontSize];
     }
-    let size = measureText("W", {pre: true, mono: true, fontSize: fontSize});
+    let size = measureText("W", { pre: true, mono: true, fontSize: fontSize });
     if (size.height != 0 && size.width != 0) {
         MonoFontSizes[fontSize] = size;
     }
     return size;
 }
 
-function measureText(text : string, textOpts? : {pre? : boolean, mono? : boolean, fontSize? : number|string}) : {height : number, width : number} {
+function measureText(
+    text: string,
+    textOpts?: { pre?: boolean; mono?: boolean; fontSize?: number | string }
+): { height: number; width: number } {
     if (textOpts == null) {
         textOpts = {};
     }
@@ -38,10 +41,9 @@ function measureText(text : string, textOpts? : {pre? : boolean, mono? : boolean
         textElem.classList.add("mono");
     }
     if (textOpts.fontSize != null) {
-        if (typeof(textOpts.fontSize) == "number") {
+        if (typeof textOpts.fontSize == "number") {
             textElem.style.fontSize = textOpts.fontSize + "px";
-        }
-        else {
+        } else {
             textElem.style.fontSize = textOpts.fontSize;
         }
     }
@@ -51,18 +53,18 @@ function measureText(text : string, textOpts? : {pre? : boolean, mono? : boolean
         throw new Error("cannot measure text, no #measure div");
     }
     measureDiv.replaceChildren(textElem);
-    let rect = textElem.getBoundingClientRect()
-    return {width: rect.width, height: Math.ceil(rect.height)};
+    let rect = textElem.getBoundingClientRect();
+    return { width: rect.width, height: Math.ceil(rect.height) };
 }
 
-function windowWidthToCols(width : number, fontSize : number) : number {
+function windowWidthToCols(width: number, fontSize: number): number {
     let dr = getMonoFontSize(fontSize);
     let cols = Math.trunc((width - 50) / dr.width) - 1;
     cols = boundInt(cols, MinTermCols, MaxTermCols);
     return cols;
 }
 
-function windowHeightToRows(height : number, fontSize : number) : number {
+function windowHeightToRows(height: number, fontSize: number): number {
     let dr = getMonoFontSize(fontSize);
     let rows = Math.floor((height - 80) / dr.height) - 1;
     if (rows <= 0) {
@@ -71,14 +73,14 @@ function windowHeightToRows(height : number, fontSize : number) : number {
     return rows;
 }
 
-function termWidthFromCols(cols : number, fontSize : number) : number {
+function termWidthFromCols(cols: number, fontSize: number): number {
     let dr = getMonoFontSize(fontSize);
-    return Math.ceil(dr.width*cols) + 15;
+    return Math.ceil(dr.width * cols) + 15;
 }
 
-function termHeightFromRows(rows : number, fontSize : number) : number {
+function termHeightFromRows(rows: number, fontSize: number): number {
     let dr = getMonoFontSize(fontSize);
-    return Math.ceil(dr.height*rows);
+    return Math.ceil(dr.height * rows);
 }
 
-export {measureText, getMonoFontSize, windowWidthToCols, windowHeightToRows, termWidthFromCols, termHeightFromRows};
+export { measureText, getMonoFontSize, windowWidthToCols, windowHeightToRows, termWidthFromCols, termHeightFromRows };
diff --git a/src/util.ts b/src/util.ts
index 3fb741dc..850502f2 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,44 +1,47 @@
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
+import { sprintf } from "sprintf-js";
 import dayjs from "dayjs";
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import type {RemoteType} from "./types";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import type { RemoteType } from "./types";
 
-dayjs.extend(localizedFormat)
+dayjs.extend(localizedFormat);
 
-function isBlank(s : string) : boolean {
-    return (s == null || s == "");
+function isBlank(s: string): boolean {
+    return s == null || s == "";
 }
 
-function handleNotOkResp(resp : any, url : URL) : Promise<any> {
-    let errMsg = sprintf("Bad status code response from fetch '%s': code=%d %s", url.toString(), resp.status, resp.statusText);
+function handleNotOkResp(resp: any, url: URL): Promise<any> {
+    let errMsg = sprintf(
+        "Bad status code response from fetch '%s': code=%d %s",
+        url.toString(),
+        resp.status,
+        resp.statusText
+    );
     return resp.text().then((textData) => {
         if (textData == null || textData == "") {
             throw new Error(errMsg);
         }
-        let rtnData : any = null;
+        let rtnData: any = null;
         try {
             rtnData = JSON.parse(textData);
-        }
-        catch (err) {
+        } catch (err) {
             // nothing (rtnData will be null)
         }
-        if (rtnData != null && typeof(rtnData) == "object" && rtnData["error"] != null) {
+        if (rtnData != null && typeof rtnData == "object" && rtnData["error"] != null) {
             throw new Error(rtnData["error"]);
         }
         throw new Error(errMsg + "\n" + textData);
     });
 }
 
-function fetchJsonData(resp : any, ctErr : boolean) : Promise<any> {
+function fetchJsonData(resp: any, ctErr: boolean): Promise<any> {
     let contentType = resp.headers.get("Content-Type");
     if (contentType != null && contentType.startsWith("application/json")) {
         return resp.text().then((textData) => {
-            let rtnData : any = null;
+            let rtnData: any = null;
             try {
                 rtnData = JSON.parse(textData);
-            }
-            catch (err) {
+            } catch (err) {
                 let errMsg = sprintf("Unparseable JSON: " + err.message);
                 let rtnErr = new Error(errMsg);
                 throw rtnErr;
@@ -54,7 +57,7 @@ function fetchJsonData(resp : any, ctErr : boolean) : Promise<any> {
     }
 }
 
-function handleJsonFetchResponse(url : URL, resp : any) : Promise<any> {
+function handleJsonFetchResponse(url: URL, resp: any): Promise<any> {
     if (!resp.ok) {
         return handleNotOkResp(resp, url);
     }
@@ -62,40 +65,45 @@ function handleJsonFetchResponse(url : URL, resp : any) : Promise<any> {
     return rtnData;
 }
 
-function base64ToArray(b64 : string) : Uint8Array {
+function base64ToArray(b64: string): Uint8Array {
     let rawStr = atob(b64);
     let rtnArr = new Uint8Array(new ArrayBuffer(rawStr.length));
-    for (let i=0; i<rawStr.length; i++) {
+    for (let i = 0; i < rawStr.length; i++) {
         rtnArr[i] = rawStr.charCodeAt(i);
     }
     return rtnArr;
 }
 
 interface IDataType {
-    remove? : boolean;
-    full? : boolean;
+    remove?: boolean;
+    full?: boolean;
 }
 
 interface IObjType<DataType> {
-    dispose : () => void;
-    mergeData : (data : DataType) => void,
+    dispose: () => void;
+    mergeData: (data: DataType) => void;
 }
 
 interface ISimpleDataType {
-    remove? : boolean;
+    remove?: boolean;
 }
 
-function genMergeSimpleData<T extends ISimpleDataType>(objs : mobx.IObservableArray<T>, dataArr : T[], idFn : (obj : T) => string, sortIdxFn : (obj : T) => string) {
+function genMergeSimpleData<T extends ISimpleDataType>(
+    objs: mobx.IObservableArray<T>,
+    dataArr: T[],
+    idFn: (obj: T) => string,
+    sortIdxFn: (obj: T) => string
+) {
     if (dataArr == null || dataArr.length == 0) {
         return;
     }
-    let objMap : Record<string, T> = {};
-    for (let i=0; i<objs.length; i++) {
+    let objMap: Record<string, T> = {};
+    for (let i = 0; i < objs.length; i++) {
         let obj = objs[i];
         let id = idFn(obj);
         objMap[id] = obj;
     }
-    for (let i=0; i<dataArr.length; i++) {
+    for (let i = 0; i < dataArr.length; i++) {
         let dataItem = dataArr[i];
         if (dataItem == null) {
             console.log("genMergeSimpleData, null item");
@@ -105,8 +113,7 @@ function genMergeSimpleData<T extends ISimpleDataType>(objs : mobx.IObservableAr
         if (dataItem.remove) {
             delete objMap[id];
             continue;
-        }
-        else {
+        } else {
             objMap[id] = dataItem;
         }
     }
@@ -122,23 +129,23 @@ function genMergeSimpleData<T extends ISimpleDataType>(objs : mobx.IObservableAr
 }
 
 function genMergeData<ObjType extends IObjType<DataType>, DataType extends IDataType>(
-    objs : mobx.IObservableArray<ObjType>,
-    dataArr : DataType[],
-    objIdFn : (obj : ObjType) => string,
-    dataIdFn : (data : DataType) => string,
-    ctorFn : (data : DataType) => ObjType,
-    sortIdxFn : (obj : ObjType) => number,
+    objs: mobx.IObservableArray<ObjType>,
+    dataArr: DataType[],
+    objIdFn: (obj: ObjType) => string,
+    dataIdFn: (data: DataType) => string,
+    ctorFn: (data: DataType) => ObjType,
+    sortIdxFn: (obj: ObjType) => number
 ) {
     if (dataArr == null || dataArr.length == 0) {
         return;
     }
-    let objMap : Record<string, ObjType> = {};
-    for (let i=0; i<objs.length; i++) {
+    let objMap: Record<string, ObjType> = {};
+    for (let i = 0; i < objs.length; i++) {
         let obj = objs[i];
         let id = objIdFn(obj);
         objMap[id] = obj;
     }
-    for (let i=0; i<dataArr.length; i++) {
+    for (let i = 0; i < dataArr.length; i++) {
         let dataItem = dataArr[i];
         if (dataItem == null) {
             console.log("genMergeData, null item");
@@ -157,7 +164,7 @@ function genMergeData<ObjType extends IObjType<DataType>, DataType extends IData
         if (obj == null) {
             if (!dataItem.full) {
                 console.log("cannot create object, dataitem is not full", objs, dataItem);
-                continue
+                continue;
             }
             obj = ctorFn(dataItem);
             objMap[id] = obj;
@@ -175,18 +182,17 @@ function genMergeData<ObjType extends IObjType<DataType>, DataType extends IData
 }
 
 function genMergeDataMap<ObjType extends IObjType<DataType>, DataType extends IDataType>(
-    objMap : mobx.ObservableMap<string, ObjType>,
-    dataArr : DataType[],
-    objIdFn : (obj : ObjType) => string,
-    dataIdFn : (data : DataType) => string,
-    ctorFn : (data : DataType) => ObjType,
-) : {added : string[], removed : string[]}
-{
-    let rtn : {added : string[], removed : string[]} = {added: [], removed: []};
+    objMap: mobx.ObservableMap<string, ObjType>,
+    dataArr: DataType[],
+    objIdFn: (obj: ObjType) => string,
+    dataIdFn: (data: DataType) => string,
+    ctorFn: (data: DataType) => ObjType
+): { added: string[]; removed: string[] } {
+    let rtn: { added: string[]; removed: string[] } = { added: [], removed: [] };
     if (dataArr == null || dataArr.length == 0) {
         return rtn;
     }
-    for (let i=0; i<dataArr.length; i++) {
+    for (let i = 0; i < dataArr.length; i++) {
         let dataItem = dataArr[i];
         if (dataItem == null) {
             console.log("genMergeDataMap, null item");
@@ -206,7 +212,7 @@ function genMergeDataMap<ObjType extends IObjType<DataType>, DataType extends ID
         if (obj == null) {
             if (!dataItem.full) {
                 console.log("cannot create object, dataitem is not full", dataItem);
-                continue
+                continue;
             }
             obj = ctorFn(dataItem);
             objMap.set(id, obj);
@@ -218,11 +224,11 @@ function genMergeDataMap<ObjType extends IObjType<DataType>, DataType extends ID
     return rtn;
 }
 
-function parseEnv0(envStr64 : string) : Map<string, string> {
+function parseEnv0(envStr64: string): Map<string, string> {
     let envStr = atob(envStr64);
     let parts = envStr.split("\x00");
-    let rtn : Map<string, string> = new Map();
-    for (let i=0; i<parts.length; i++) {
+    let rtn: Map<string, string> = new Map();
+    for (let i = 0; i < parts.length; i++) {
         let part = parts[i];
         if (part == "") {
             continue;
@@ -232,13 +238,13 @@ function parseEnv0(envStr64 : string) : Map<string, string> {
             continue;
         }
         let varName = part.substr(0, eqIdx);
-        let varVal = part.substr(eqIdx+1)
-        rtn.set(varName, varVal)
+        let varVal = part.substr(eqIdx + 1);
+        rtn.set(varName, varVal);
     }
     return rtn;
 }
 
-function boundInt(ival : number, minVal : number, maxVal : number) : number {
+function boundInt(ival: number, minVal: number, maxVal: number): number {
     if (ival < minVal) {
         return minVal;
     }
@@ -248,22 +254,34 @@ function boundInt(ival : number, minVal : number, maxVal : number) : number {
     return ival;
 }
 
-function isModKeyPress(e : any) {
+function isModKeyPress(e: any) {
     return e.code.match(/^(Control|Meta|Alt|Shift)(Left|Right)$/);
 }
 
-function incObs(inum : mobx.IObservableValue<number>) {
+function incObs(inum: mobx.IObservableValue<number>) {
     mobx.action(() => {
         inum.set(inum.get() + 1);
     })();
 }
 
 function loadFonts() {
-    let jbmFontNormal = new FontFace("JetBrains Mono", "url('static/fonts/jetbrains-mono-v13-latin-regular.woff2')", {style: "normal", weight: "400"});
-    let jbmFont200 = new FontFace("JetBrains Mono", "url('static/fonts/jetbrains-mono-v13-latin-200.woff2')", {style: "normal", weight: "200"});
-    let jbmFont700 = new FontFace("JetBrains Mono", "url('static/fonts/jetbrains-mono-v13-latin-700.woff2')", {style: "normal", weight: "700"});
-    let faFont = new FontFace("FontAwesome", "url(static/fonts/fontawesome-webfont-4.7.woff2)", {style: "normal", weight: "normal"});
-    let docFonts : any = document.fonts; // work around ts typing issue
+    let jbmFontNormal = new FontFace("JetBrains Mono", "url('static/fonts/jetbrains-mono-v13-latin-regular.woff2')", {
+        style: "normal",
+        weight: "400",
+    });
+    let jbmFont200 = new FontFace("JetBrains Mono", "url('static/fonts/jetbrains-mono-v13-latin-200.woff2')", {
+        style: "normal",
+        weight: "200",
+    });
+    let jbmFont700 = new FontFace("JetBrains Mono", "url('static/fonts/jetbrains-mono-v13-latin-700.woff2')", {
+        style: "normal",
+        weight: "700",
+    });
+    let faFont = new FontFace("FontAwesome", "url(static/fonts/fontawesome-webfont-4.7.woff2)", {
+        style: "normal",
+        weight: "normal",
+    });
+    let docFonts: any = document.fonts; // work around ts typing issue
     docFonts.add(jbmFontNormal);
     docFonts.add(jbmFont200);
     docFonts.add(jbmFont700);
@@ -276,19 +294,19 @@ function loadFonts() {
 
 const DOW_STRS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
-function getTodayStr() : string {
+function getTodayStr(): string {
     return getDateStr(new Date());
 }
 
-function getYesterdayStr() : string {
+function getYesterdayStr(): string {
     let d = new Date();
-    d.setDate(d.getDate()-1);
+    d.setDate(d.getDate() - 1);
     return getDateStr(d);
 }
 
-function getDateStr(d : Date) : string {
+function getDateStr(d: Date): string {
     let yearStr = String(d.getFullYear());
-    let monthStr = String(d.getMonth()+1);
+    let monthStr = String(d.getMonth() + 1);
     if (monthStr.length == 1) {
         monthStr = "0" + monthStr;
     }
@@ -300,7 +318,7 @@ function getDateStr(d : Date) : string {
     return dowStr + " " + yearStr + "-" + monthStr + "-" + dayStr;
 }
 
-function getRemoteConnVal(r : RemoteType) : number {
+function getRemoteConnVal(r: RemoteType): number {
     if (r.status == "connected") {
         return 1;
     }
@@ -316,7 +334,7 @@ function getRemoteConnVal(r : RemoteType) : number {
     return 5;
 }
 
-function sortAndFilterRemotes(origRemotes : RemoteType[]) : RemoteType[] {
+function sortAndFilterRemotes(origRemotes: RemoteType[]): RemoteType[] {
     let remotes = origRemotes.filter((r) => !r.archived);
     remotes.sort((a, b) => {
         let connValA = getRemoteConnVal(a);
@@ -329,23 +347,48 @@ function sortAndFilterRemotes(origRemotes : RemoteType[]) : RemoteType[] {
     return remotes;
 }
 
-function makeExternLink(url : string) : string {
+function makeExternLink(url: string): string {
     return "https://extern?" + encodeURIComponent(url);
 }
 
-function isStrEq(s1 : string, s2 : string) {
+function isStrEq(s1: string, s2: string) {
     if (isBlank(s1) && isBlank(s2)) {
         return true;
     }
     return s1 == s2;
 }
 
-function isBoolEq(b1 : boolean, b2 : boolean) {
-    return (!!b1) == (!!b2);
+function isBoolEq(b1: boolean, b2: boolean) {
+    return !!b1 == !!b2;
 }
 
-function hasNoModifiers(e : any) : boolean {
-    return !e.getModifierState("Shift") && !e.getModifierState("Control") && !e.getModifierState("Meta") && !e.getModifierState("Alt");
+function hasNoModifiers(e: any): boolean {
+    return (
+        !e.getModifierState("Shift") &&
+        !e.getModifierState("Control") &&
+        !e.getModifierState("Meta") &&
+        !e.getModifierState("Alt")
+    );
 }
 
-export {handleJsonFetchResponse, base64ToArray, genMergeData, genMergeDataMap, genMergeSimpleData, parseEnv0, boundInt, isModKeyPress, incObs, isBlank, loadFonts, getTodayStr, getYesterdayStr, getDateStr, sortAndFilterRemotes, makeExternLink, isStrEq, isBoolEq, hasNoModifiers};
+export {
+    handleJsonFetchResponse,
+    base64ToArray,
+    genMergeData,
+    genMergeDataMap,
+    genMergeSimpleData,
+    parseEnv0,
+    boundInt,
+    isModKeyPress,
+    incObs,
+    isBlank,
+    loadFonts,
+    getTodayStr,
+    getYesterdayStr,
+    getDateStr,
+    sortAndFilterRemotes,
+    makeExternLink,
+    isStrEq,
+    isBoolEq,
+    hasNoModifiers,
+};
diff --git a/src/utils.less b/src/utils.less
index 859f92d0..240a93be 100644
--- a/src/utils.less
+++ b/src/utils.less
@@ -1,5 +1,5 @@
 .mono-font(@size: inherit, @weight: inherit) {
-    font-family: 'JetBrains Mono', monospace;
+    font-family: "JetBrains Mono", monospace;
     font-size: @size;
     font-weight: @weight;
 }
diff --git a/src/view/code.tsx b/src/view/code.tsx
index 571739f4..7bf0a702 100644
--- a/src/view/code.tsx
+++ b/src/view/code.tsx
@@ -16,80 +16,78 @@ const MaxJsonSize = 50000;
 
 @mobxReact.observer
 class SourceCodeRenderer extends React.Component<
-  {
-    data: Blob;
-    path: String;
-    context: RendererContext;
-    opts: RendererOpts;
-    savedHeight: number;
-  },
-  {}
+    {
+        data: Blob;
+        path: String;
+        context: RendererContext;
+        opts: RendererOpts;
+        savedHeight: number;
+    },
+    {}
 > {
-  code: OV<any> = mobx.observable.box(null, {
-    name: "code",
-    deep: false,
-  });
-  language: OV<any> = mobx.observable.box(null, {
-    name: "language",
-    deep: false,
-  });
+    code: OV<any> = mobx.observable.box(null, {
+        name: "code",
+        deep: false,
+    });
+    language: OV<any> = mobx.observable.box(null, {
+        name: "language",
+        deep: false,
+    });
 
-  editorRef;
-  constructor(props) {
-    super(props);
-    this.editorRef = React.createRef();
-  }
-
-  componentDidMount() {
-    let prtn = this.props.data.text();
-    prtn.then((text) => this.code.set(text));
-  }
-
-  handleEditorDidMount = (editor, monaco) => {
-    const extension = this.props.cmdstr.split(".").pop();
-    const detectedLanguage = monaco.languages
-      .getLanguages()
-      .find(
-        (lang) => lang.extensions && lang.extensions.includes("." + extension)
-      );
-    if (detectedLanguage) {
-      this.editorRef.current = editor;
-      const model = editor.getModel();
-      if (model) {
-        monaco.editor.setModelLanguage(model, detectedLanguage.id);
-        this.language.set(detectedLanguage.id);
-      }
+    editorRef;
+    constructor(props) {
+        super(props);
+        this.editorRef = React.createRef();
     }
-  };
 
-  render() {
-    let opts = this.props.opts;
-    let maxWidth = opts.maxSize.width;
-    let minWidth = opts.maxSize.width;
-    if (minWidth > 1000) {
-      minWidth = 1000;
+    componentDidMount() {
+        let prtn = this.props.data.text();
+        prtn.then((text) => this.code.set(text));
+    }
+
+    handleEditorDidMount = (editor, monaco) => {
+        const extension = this.props.cmdstr.split(".").pop();
+        const detectedLanguage = monaco.languages
+            .getLanguages()
+            .find((lang) => lang.extensions && lang.extensions.includes("." + extension));
+        if (detectedLanguage) {
+            this.editorRef.current = editor;
+            const model = editor.getModel();
+            if (model) {
+                monaco.editor.setModelLanguage(model, detectedLanguage.id);
+                this.language.set(detectedLanguage.id);
+            }
+        }
+    };
+
+    render() {
+        let opts = this.props.opts;
+        let maxWidth = opts.maxSize.width;
+        let minWidth = opts.maxSize.width;
+        if (minWidth > 1000) {
+            minWidth = 1000;
+        }
+        let lang = this.language.get();
+        let code = this.code.get();
+        if (!code) return <></>;
+        return (
+            <div className="renderer-container code-renderer">
+                <div className="scroller" style={{ maxHeight: opts.maxSize.height }}>
+                    <Editor
+                        height="30vh"
+                        theme="hc-black"
+                        defaultLanguage={lang}
+                        defaultValue={code}
+                        onMount={this.handleEditorDidMount}
+                        options={{
+                            scrollBeyondLastLine: false,
+                            fontSize: "14px",
+                        }}
+                    />
+                </div>
+            </div>
+        );
     }
-    let lang = this.language.get();
-    let code = this.code.get();
-    if (!code) return <></>;
-    return (
-      <div className="renderer-container code-renderer">
-        <div className="scroller" style={{ maxHeight: opts.maxSize.height }}>
-          <Editor
-            height="30vh"
-            theme="hc-black"
-            defaultLanguage={lang}
-            defaultValue={code}
-            onMount={this.handleEditorDidMount}
-            options={{
-              scrollBeyondLastLine: false,
-              fontSize: "14px",
-            }}
-          />
-        </div>
-      </div>
-    );
-  }
 }
 
 export { SourceCodeRenderer };
diff --git a/src/view/image.tsx b/src/view/image.tsx
index 081b226c..9dc67ae5 100644
--- a/src/view/image.tsx
+++ b/src/view/image.tsx
@@ -2,8 +2,8 @@ import * as React from "react";
 import * as mobx from "mobx";
 import * as mobxReact from "mobx-react";
 import cn from "classnames";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
-import {WindowSize, RendererContext, TermOptsType, LineType, RendererOpts} from "../types";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
+import { WindowSize, RendererContext, TermOptsType, LineType, RendererOpts } from "../types";
 
 type OV<V> = mobx.IObservableValue<V>;
 type CV<V> = mobx.IComputedValue<V>;
@@ -26,10 +26,13 @@ type CV<V> = mobx.IComputedValue<V>;
 //
 
 @mobxReact.observer
-class SimpleImageRenderer extends React.Component<{data : Blob, context : RendererContext, opts : RendererOpts, savedHeight : number}, {}> {
-    objUrl : string = null;
-    imageRef : React.RefObject<any> = React.createRef();
-    imageLoaded : OV<boolean> = mobx.observable.box(false, {name: "imageLoaded"});
+class SimpleImageRenderer extends React.Component<
+    { data: Blob; context: RendererContext; opts: RendererOpts; savedHeight: number },
+    {}
+> {
+    objUrl: string = null;
+    imageRef: React.RefObject<any> = React.createRef();
+    imageLoaded: OV<boolean> = mobx.observable.box(false, { name: "imageLoaded" });
 
     componentDidMount() {
         let img = this.imageRef.current;
@@ -56,24 +59,27 @@ class SimpleImageRenderer extends React.Component<{data : Blob, context : Render
             URL.revokeObjectURL(this.objUrl);
         }
     }
-    
+
     render() {
         if (this.objUrl == null) {
             let dataBlob = this.props.data;
             this.objUrl = URL.createObjectURL(dataBlob);
         }
         let opts = this.props.opts;
-        let forceHeight : number = null;
+        let forceHeight: number = null;
         if (!this.imageLoaded.get() && this.props.savedHeight >= 0) {
             forceHeight = this.props.savedHeight;
         }
         return (
-            <div className="renderer-container image-renderer" style={{height: forceHeight}}>
-                <img ref={this.imageRef} style={{maxHeight: opts.idealSize.height, maxWidth: opts.idealSize.width}} src={this.objUrl}/>
+            <div className="renderer-container image-renderer" style={{ height: forceHeight }}>
+                <img
+                    ref={this.imageRef}
+                    style={{ maxHeight: opts.idealSize.height, maxWidth: opts.idealSize.width }}
+                    src={this.objUrl}
+                />
             </div>
         );
     }
 }
 
-export {SimpleImageRenderer};
-
+export { SimpleImageRenderer };
diff --git a/src/view/json.tsx b/src/view/json.tsx
index 3ee56752..2aebf7ec 100644
--- a/src/view/json.tsx
+++ b/src/view/json.tsx
@@ -2,10 +2,10 @@ import * as React from "react";
 import * as mobx from "mobx";
 import * as mobxReact from "mobx-react";
 import cn from "classnames";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
-import {WindowSize, RendererContext, TermOptsType, LineType, RendererOpts} from "../types";
-import {sprintf} from "sprintf-js";
-import {Markdown} from "../elements";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
+import { WindowSize, RendererContext, TermOptsType, LineType, RendererOpts } from "../types";
+import { sprintf } from "sprintf-js";
+import { Markdown } from "../elements";
 import ReactJson from "react-json-view";
 
 type OV<V> = mobx.IObservableValue<V>;
@@ -13,11 +13,14 @@ type OV<V> = mobx.IObservableValue<V>;
 const MaxJsonSize = 50000;
 
 @mobxReact.observer
-class SimpleJsonRenderer extends React.Component<{data : Blob, context : RendererContext, opts : RendererOpts, savedHeight : number}, {}> {
-    jsonObj : OV<any> = mobx.observable.box(null, {name: "jsonObj", deep: false});
-    jsonError : OV<string> = mobx.observable.box(null, {name: "jsonError"});
+class SimpleJsonRenderer extends React.Component<
+    { data: Blob; context: RendererContext; opts: RendererOpts; savedHeight: number },
+    {}
+> {
+    jsonObj: OV<any> = mobx.observable.box(null, { name: "jsonObj", deep: false });
+    jsonError: OV<string> = mobx.observable.box(null, { name: "jsonError" });
 
-    setJsonError(err : string) {
+    setJsonError(err: string) {
         mobx.action(() => {
             this.jsonError.set(err);
         })();
@@ -29,7 +32,7 @@ class SimpleJsonRenderer extends React.Component<{data : Blob, context : Rendere
             this.setJsonError(sprintf("error: json too large to render size=%d", dataBlob.size));
             return;
         }
-        let prtn = dataBlob.text()
+        let prtn = dataBlob.text();
         prtn.then((text) => {
             if (/[\x00-\x08]/.test(text)) {
                 this.setJsonError(sprintf("error: not rendering json, binary characters detected"));
@@ -40,19 +43,22 @@ class SimpleJsonRenderer extends React.Component<{data : Blob, context : Rendere
                 mobx.action(() => {
                     this.jsonObj.set(obj);
                 })();
-            }
-            catch (e) {
+            } catch (e) {
                 this.setJsonError(sprintf("error: JSON parse error: %s", e.message));
             }
         });
     }
-    
+
     render() {
         if (this.jsonError.get() != null) {
-            return <div className="renderer-container json-renderer"><div className="error-container">{this.jsonError.get()}</div></div>;
+            return (
+                <div className="renderer-container json-renderer">
+                    <div className="error-container">{this.jsonError.get()}</div>
+                </div>
+            );
         }
         if (this.jsonObj.get() == null) {
-            return <div className="renderer-container json-renderer" style={{height: this.props.savedHeight}}/>
+            return <div className="renderer-container json-renderer" style={{ height: this.props.savedHeight }} />;
         }
         let opts = this.props.opts;
         let maxWidth = opts.maxSize.width;
@@ -62,12 +68,19 @@ class SimpleJsonRenderer extends React.Component<{data : Blob, context : Rendere
         }
         return (
             <div className="renderer-container json-renderer">
-                <div className="scroller" style={{maxHeight: opts.maxSize.height}}>
-                    <ReactJson src={this.jsonObj.get()} theme="monokai" style={{backgroundColor: "black"}} displayDataTypes={false} quotesOnKeys={false} sortKeys={true}/>
+                <div className="scroller" style={{ maxHeight: opts.maxSize.height }}>
+                    <ReactJson
+                        src={this.jsonObj.get()}
+                        theme="monokai"
+                        style={{ backgroundColor: "black" }}
+                        displayDataTypes={false}
+                        quotesOnKeys={false}
+                        sortKeys={true}
+                    />
                 </div>
             </div>
         );
     }
 }
 
-export {SimpleJsonRenderer};
+export { SimpleJsonRenderer };
diff --git a/src/view/markdown.tsx b/src/view/markdown.tsx
index 7feaef33..03f76d2b 100644
--- a/src/view/markdown.tsx
+++ b/src/view/markdown.tsx
@@ -2,19 +2,22 @@ import * as React from "react";
 import * as mobx from "mobx";
 import * as mobxReact from "mobx-react";
 import cn from "classnames";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
-import {WindowSize, RendererContext, TermOptsType, LineType, RendererOpts} from "../types";
-import {sprintf} from "sprintf-js";
-import {Markdown} from "../elements";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
+import { WindowSize, RendererContext, TermOptsType, LineType, RendererOpts } from "../types";
+import { sprintf } from "sprintf-js";
+import { Markdown } from "../elements";
 
 type OV<V> = mobx.IObservableValue<V>;
 
 const MaxMarkdownSize = 50000;
 
 @mobxReact.observer
-class SimpleMarkdownRenderer extends React.Component<{data : Blob, context : RendererContext, opts : RendererOpts, savedHeight : number}, {}> {
-    markdownText : OV<string> = mobx.observable.box(null, {name: "markdownText"});
-    markdownError : OV<string> = mobx.observable.box(null, {name: "markdownError"});
+class SimpleMarkdownRenderer extends React.Component<
+    { data: Blob; context: RendererContext; opts: RendererOpts; savedHeight: number },
+    {}
+> {
+    markdownText: OV<string> = mobx.observable.box(null, { name: "markdownText" });
+    markdownError: OV<string> = mobx.observable.box(null, { name: "markdownError" });
 
     componentDidMount() {
         let dataBlob = this.props.data;
@@ -22,7 +25,7 @@ class SimpleMarkdownRenderer extends React.Component<{data : Blob, context : Ren
             this.markdownError.set(sprintf("error: markdown too large to render size=%d", dataBlob.size));
             return;
         }
-        let prtn = dataBlob.text()
+        let prtn = dataBlob.text();
         prtn.then((text) => {
             if (/[\x00-\x08]/.test(text)) {
                 this.markdownError.set(sprintf("error: not rendering markdown, binary characters detected"));
@@ -33,13 +36,17 @@ class SimpleMarkdownRenderer extends React.Component<{data : Blob, context : Ren
             })();
         });
     }
-    
+
     render() {
         if (this.markdownError.get() != null) {
-            return <div className="renderer-container markdown-renderer"><div className="error-container">{this.markdownError.get()}</div></div>;
+            return (
+                <div className="renderer-container markdown-renderer">
+                    <div className="error-container">{this.markdownError.get()}</div>
+                </div>
+            );
         }
         if (this.markdownText.get() == null) {
-            return <div className="renderer-container markdown-renderer" style={{height: this.props.savedHeight}}/>
+            return <div className="renderer-container markdown-renderer" style={{ height: this.props.savedHeight }} />;
         }
         let opts = this.props.opts;
         let markdownText = this.markdownText.get();
@@ -50,12 +57,20 @@ class SimpleMarkdownRenderer extends React.Component<{data : Blob, context : Ren
         }
         return (
             <div className="renderer-container markdown-renderer">
-                <div className="scroller" style={{maxHeight: opts.maxSize.height, minWidth: minWidth, width: "min-content", maxWidth: maxWidth}}>
-                    <Markdown text={this.markdownText.get()} style={{maxHeight: opts.maxSize.height}}/>
+                <div
+                    className="scroller"
+                    style={{
+                        maxHeight: opts.maxSize.height,
+                        minWidth: minWidth,
+                        width: "min-content",
+                        maxWidth: maxWidth,
+                    }}
+                >
+                    <Markdown text={this.markdownText.get()} style={{ maxHeight: opts.maxSize.height }} />
                 </div>
             </div>
         );
     }
 }
 
-export {SimpleMarkdownRenderer};
+export { SimpleMarkdownRenderer };
diff --git a/src/view/openai.tsx b/src/view/openai.tsx
index 81da74cf..19fcd421 100644
--- a/src/view/openai.tsx
+++ b/src/view/openai.tsx
@@ -2,50 +2,50 @@ import * as React from "react";
 import * as mobx from "mobx";
 import * as mobxReact from "mobx-react";
 import cn from "classnames";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
 import * as T from "../types";
-import {debounce, throttle} from "throttle-debounce";
-import {boundMethod} from "autobind-decorator";
-import {sprintf} from "sprintf-js";
-import {PacketDataBuffer} from "../ptydata";
-import {Markdown} from "../elements";
+import { debounce, throttle } from "throttle-debounce";
+import { boundMethod } from "autobind-decorator";
+import { sprintf } from "sprintf-js";
+import { PacketDataBuffer } from "../ptydata";
+import { Markdown } from "../elements";
 
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
-type OMap<K,V> = mobx.ObservableMap<K,V>;
+type OMap<K, V> = mobx.ObservableMap<K, V>;
 
 type OpenAIOutputType = {
-    model : string,
-    created : number,
-    finish_reason : string,
-    message : string,
+    model: string;
+    created: number;
+    finish_reason: string;
+    message: string;
 };
 
 class OpenAIRendererModel {
-    context : T.RendererContext;
-    opts : T.RendererOpts;
-    isDone : OV<boolean>;
-    api : T.RendererModelContainerApi;
-    savedHeight : number;
-    loading : OV<boolean>;
-    loadError : OV<string> = mobx.observable.box(null, {name: "renderer-loadError"});
-    updateHeight_debounced : (newHeight : number) => void;
-    ptyDataSource : (termContext : T.TermContextUnion) => Promise<T.PtyDataType>;
-    packetData : PacketDataBuffer;
-    rawCmd : T.WebCmd;
-    output : OV<OpenAIOutputType>;
-    version : OV<number>;
-    
+    context: T.RendererContext;
+    opts: T.RendererOpts;
+    isDone: OV<boolean>;
+    api: T.RendererModelContainerApi;
+    savedHeight: number;
+    loading: OV<boolean>;
+    loadError: OV<string> = mobx.observable.box(null, { name: "renderer-loadError" });
+    updateHeight_debounced: (newHeight: number) => void;
+    ptyDataSource: (termContext: T.TermContextUnion) => Promise<T.PtyDataType>;
+    packetData: PacketDataBuffer;
+    rawCmd: T.WebCmd;
+    output: OV<OpenAIOutputType>;
+    version: OV<number>;
+
     constructor() {
         this.updateHeight_debounced = debounce(1000, this.updateHeight.bind(this));
         this.packetData = new PacketDataBuffer(this.packetCallback);
-        this.output = mobx.observable.box(null, {name: "openai-output"});
+        this.output = mobx.observable.box(null, { name: "openai-output" });
         this.version = mobx.observable.box(0);
     }
 
-    initialize(params : T.RendererModelInitializeParams) : void {
-        this.loading = mobx.observable.box(true, {name: "renderer-loading"});
-        this.isDone = mobx.observable.box(params.isDone, {name: "renderer-isDone"});
+    initialize(params: T.RendererModelInitializeParams): void {
+        this.loading = mobx.observable.box(true, { name: "renderer-loading" });
+        this.isDone = mobx.observable.box(params.isDone, { name: "renderer-isDone" });
         this.context = params.context;
         this.opts = params.opts;
         this.api = params.api;
@@ -56,8 +56,8 @@ class OpenAIRendererModel {
     }
 
     @boundMethod
-    packetCallback(packetAny : any) {
-        let packet : T.OpenAIPacketType = packetAny
+    packetCallback(packetAny: any) {
+        let packet: T.OpenAIPacketType = packetAny;
         if (packet == null) {
             return;
         }
@@ -65,7 +65,7 @@ class OpenAIRendererModel {
         if (packet.error != null) {
             mobx.action(() => {
                 this.loadError.set(packet.error);
-                this.version.set(this.version.get()+1);
+                this.version.set(this.version.get() + 1);
             })();
             return;
         }
@@ -74,7 +74,7 @@ class OpenAIRendererModel {
                 model: packet.model,
                 created: packet.created,
                 finish_reason: packet.finish_reason,
-                message: (packet.text ?? ""),
+                message: packet.text ?? "",
             };
             mobx.action(() => {
                 this.output.set(output);
@@ -93,31 +93,31 @@ class OpenAIRendererModel {
                 if (packet.text != null) {
                     this.output.get().message += packet.text;
                 }
-                this.version.set(this.version.get()+1);
+                this.version.set(this.version.get() + 1);
             })();
         }
     }
 
-    dispose() : void {
-        return;
-    }
-    
-    giveFocus() : void {
+    dispose(): void {
         return;
     }
 
-    updateOpts(update : T.RendererOptsUpdate) : void {
+    giveFocus(): void {
+        return;
+    }
+
+    updateOpts(update: T.RendererOptsUpdate): void {
         Object.assign(this.opts, update);
     }
 
-    updateHeight(newHeight : number) : void {
+    updateHeight(newHeight: number): void {
         if (this.savedHeight != newHeight) {
             this.savedHeight = newHeight;
             this.api.saveHeight(newHeight);
         }
     }
-    
-    setIsDone() : void {
+
+    setIsDone(): void {
         if (this.isDone.get()) {
             return;
         }
@@ -127,7 +127,7 @@ class OpenAIRendererModel {
         // this.reload(0);
     }
 
-    reload(delayMs : number) : void {
+    reload(delayMs: number): void {
         mobx.action(() => {
             this.loading.set(true);
             this.loadError.set(null);
@@ -152,45 +152,41 @@ class OpenAIRendererModel {
             })();
         });
     }
-    
-    receiveData(pos : number, data : Uint8Array, reason? : string) : void {
+
+    receiveData(pos: number, data: Uint8Array, reason?: string): void {
         this.packetData.receiveData(pos, data, reason);
     }
 }
 
 @mobxReact.observer
-class OpenAIRenderer extends React.Component<{model : OpenAIRendererModel}> {
-    renderPrompt(cmd : T.WebCmd) {
+class OpenAIRenderer extends React.Component<{ model: OpenAIRendererModel }> {
+    renderPrompt(cmd: T.WebCmd) {
         let cmdStr = cmd.cmdstr.trim();
         if (cmdStr.startsWith("/openai")) {
             let spaceIdx = cmdStr.indexOf(" ");
             if (spaceIdx > 0) {
-                cmdStr = cmdStr.substr(spaceIdx+1).trim();
+                cmdStr = cmdStr.substr(spaceIdx + 1).trim();
             }
         }
         return (
             <div className="openai-message">
                 <span className="openai-role openai-role-user">[user]</span>
-                <div className="openai-content-user">
-                    {cmdStr}
-                </div>
+                <div className="openai-content-user">{cmdStr}</div>
             </div>
         );
     }
 
     renderError() {
-        let model : OpenAIRendererModel = this.props.model;
+        let model: OpenAIRendererModel = this.props.model;
         return (
             <div className="openai-message">
                 <span className="openai-role openai-role-error">[error]</span>
-                <div className="openai-content-error">
-                    {model.loadError.get()}
-                </div>
+                <div className="openai-content-error">{model.loadError.get()}</div>
             </div>
         );
     }
 
-    renderOutput(cmd : T.WebCmd) {
+    renderOutput(cmd: T.WebCmd) {
         let output = this.props.model.output.get();
         let message = "";
         if (output != null) {
@@ -207,20 +203,28 @@ class OpenAIRenderer extends React.Component<{model : OpenAIRendererModel}> {
             <div className="openai-message">
                 <div className="openai-role openai-role-assistant">[assistant]</div>
                 <div className="openai-content-assistant">
-                    <div className="scroller" style={{maxHeight: opts.maxSize.height, minWidth: minWidth, width: "min-content", maxWidth: maxWidth}}>
-                        <Markdown text={message} style={{maxHeight: opts.maxSize.height}}/>
+                    <div
+                        className="scroller"
+                        style={{
+                            maxHeight: opts.maxSize.height,
+                            minWidth: minWidth,
+                            width: "min-content",
+                            maxWidth: maxWidth,
+                        }}
+                    >
+                        <Markdown text={message} style={{ maxHeight: opts.maxSize.height }} />
                     </div>
                 </div>
             </div>
         );
     }
-    
+
     render() {
-        let model : OpenAIRendererModel = this.props.model;
+        let model: OpenAIRendererModel = this.props.model;
         let cmd = model.rawCmd;
-        let styleVal : Record<string, any> = null;
+        let styleVal: Record<string, any> = null;
         if (model.loading.get() && model.savedHeight >= 0 && model.isDone) {
-            styleVal = {height: model.savedHeight};
+            styleVal = { height: model.savedHeight };
         }
         let version = model.version.get();
         let loadError = model.loadError.get();
@@ -241,4 +245,4 @@ class OpenAIRenderer extends React.Component<{model : OpenAIRendererModel}> {
     }
 }
 
-export {OpenAIRenderer, OpenAIRendererModel};
+export { OpenAIRenderer, OpenAIRendererModel };
diff --git a/src/views.less b/src/views.less
index 5ba4af8c..48ce27ee 100644
--- a/src/views.less
+++ b/src/views.less
@@ -1,9 +1,8 @@
-
 .alt-view {
     background-color: #111;
     overflow-y: auto;
     flex-grow: 1;
-    
+
     .alt-title {
         margin: 20px 10px 0px 5px;
         padding-left: 10px;
@@ -113,8 +112,9 @@
             display: flex;
             flex-direction: row;
             align-items: center;
-            
-            .session-dropdown, .remote-dropdown {
+
+            .session-dropdown,
+            .remote-dropdown {
                 .dropdown-item {
                     color: white;
                     cursor: pointer;
@@ -163,7 +163,7 @@
                 flex-direction: row;
                 align-items: center;
                 margin-left: 15px;
-                
+
                 .fromts-text {
                 }
             }
@@ -174,7 +174,7 @@
                 font-size: 12px;
                 border: 1px solid #777;
                 padding: 5px 10px 5px 10px;
-                
+
                 &:hover {
                     background-color: #666;
                 }
@@ -220,7 +220,8 @@
 
             &.is-disabled {
                 cursor: default;
-                i, span {
+                i,
+                span {
                     display: none;
                 }
             }
@@ -271,7 +272,7 @@
         border-radius: 3px;
         margin: 20px 50px 20px 20px;
     }
-    
+
     .history-table {
         margin: 0px 10px 10px 10px;
         table-layout: fixed;
@@ -280,7 +281,7 @@
         tr.active-history-item {
             td {
                 padding-right: 10px;
-                
+
                 .line-container {
                     padding: 0px 10px 10px 10px;
                     overflow-x: auto;
@@ -418,7 +419,6 @@
     }
 }
 
-
 .webshare-view {
     .webshare-item {
         padding: 4px 5px 8px 15px;
@@ -439,7 +439,7 @@
 
             .webshare-vic-link {
                 cursor: pointer;
-                
+
                 &:hover {
                     text-decoration: underline;
                 }
@@ -492,8 +492,9 @@
         &.pending-delete {
             background-color: #522;
         }
-        
-        .bookmark-content, .bookmark-edit {
+
+        .bookmark-content,
+        .bookmark-edit {
             flex-grow: 1;
             max-width: calc(100% - 50px);
         }
diff --git a/src/webshare-client-view.tsx b/src/webshare-client-view.tsx
index ddadedb9..dbf567c3 100644
--- a/src/webshare-client-view.tsx
+++ b/src/webshare-client-view.tsx
@@ -1,43 +1,42 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import {v4 as uuidv4} from "uuid";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import { v4 as uuidv4 } from "uuid";
 import dayjs from "dayjs";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
 import cn from "classnames";
-import {GlobalModel, GlobalCommandRunner, Screen} from "./model";
-import {WebStopShareConfirmMarkdown} from "./settings";
+import { GlobalModel, GlobalCommandRunner, Screen } from "./model";
+import { WebStopShareConfirmMarkdown } from "./settings";
 import * as util from "./util";
 
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
-type OMap<K,V> = mobx.ObservableMap<K,V>;
-
+type OMap<K, V> = mobx.ObservableMap<K, V>;
 
 @mobxReact.observer
 class WebShareView extends React.Component<{}, {}> {
-    shareCopied : OV<string> = mobx.observable.box(null, {name: "sw-shareCopied"});
-    
+    shareCopied: OV<string> = mobx.observable.box(null, { name: "sw-shareCopied" });
+
     @boundMethod
-    closeView() : void {
+    closeView(): void {
         GlobalModel.showSessionView();
     }
 
     @boundMethod
-    viewInContext(screen : Screen) {
+    viewInContext(screen: Screen) {
         GlobalModel.historyViewModel.closeView();
         GlobalCommandRunner.lineView(screen.sessionId, screen.screenId, screen.selectedLine.get());
     }
 
-    getSSName(screen : Screen, snames : Record<string, string>) : string {
+    getSSName(screen: Screen, snames: Record<string, string>): string {
         let sessionName = snames[screen.sessionId] ?? "unknown";
-        return sprintf("#%s[%s]", sessionName, screen.name.get())
+        return sprintf("#%s[%s]", sessionName, screen.name.get());
     }
 
     @boundMethod
-    copyShareLink(screen : Screen) : void {
+    copyShareLink(screen: Screen): void {
         let shareLink = screen.getWebShareUrl();
         if (shareLink == null) {
             return;
@@ -50,20 +49,20 @@ class WebShareView extends React.Component<{}, {}> {
             mobx.action(() => {
                 this.shareCopied.set(null);
             })();
-        }, 600)
+        }, 600);
     }
 
     @boundMethod
-    openScreenSettings(screen : Screen) : void {
+    openScreenSettings(screen: Screen): void {
         mobx.action(() => {
-            GlobalModel.screenSettingsModal.set({sessionId: screen.sessionId, screenId: screen.screenId});
+            GlobalModel.screenSettingsModal.set({ sessionId: screen.sessionId, screenId: screen.screenId });
         })();
     }
 
     @boundMethod
-    stopSharing(screen : Screen) : void {
+    stopSharing(screen: Screen): void {
         let message = WebStopShareConfirmMarkdown;
-        let alertRtn = GlobalModel.showAlert({message: message, confirm: true, markdown: true});
+        let alertRtn = GlobalModel.showAlert({ message: message, confirm: true, markdown: true });
         alertRtn.then((result) => {
             if (!result) {
                 return;
@@ -73,30 +72,34 @@ class WebShareView extends React.Component<{}, {}> {
                 if (crtn.success) {
                     return;
                 }
-                GlobalModel.showAlert({message: crtn.error});
+                GlobalModel.showAlert({ message: crtn.error });
             });
         });
     }
-    
+
     render() {
-        let isHidden = (GlobalModel.activeMainView.get() != "webshare");
+        let isHidden = GlobalModel.activeMainView.get() != "webshare";
         if (isHidden) {
             return null;
         }
         let snames = GlobalModel.getSessionNames();
         let screenList = GlobalModel.getWebSharedScreens();
-        let screen : Screen = null;
+        let screen: Screen = null;
         return (
             <div className={cn("webshare-view", "alt-view")}>
-                <div className="close-button" onClick={this.closeView}><i className="fa-sharp fa-solid fa-xmark"></i></div>
+                <div className="close-button" onClick={this.closeView}>
+                    <i className="fa-sharp fa-solid fa-xmark"></i>
+                </div>
                 <div className="alt-title">
-                    <i className="fa-sharp fa-solid fa-share-nodes" style={{marginRight: 10}}/>
+                    <i className="fa-sharp fa-solid fa-share-nodes" style={{ marginRight: 10 }} />
                     WEB SHARING<If condition={screenList.length > 0}> ({screenList.length})</If>
                 </div>
                 <If condition={screenList.length == 0}>
                     <div className="no-content">
-                        No Active Web Shares.<br/>
-                        Share a screen using the "web share" toggle in screen/tab settings <i className="fa-sharp fa-solid fa-gear"/>.
+                        No Active Web Shares.
+                        <br />
+                        Share a screen using the "web share" toggle in screen/tab settings{" "}
+                        <i className="fa-sharp fa-solid fa-gear" />.
                     </div>
                 </If>
                 <If condition={screenList.length > 0}>
@@ -104,7 +107,7 @@ class WebShareView extends React.Component<{}, {}> {
                         <For each="screen" of={screenList}>
                             <div key={screen.screenId} className="webshare-item">
                                 <If condition={this.shareCopied.get() == screen.screenId}>
-                                    <div className="copied-indicator"/>
+                                    <div className="copied-indicator" />
                                 </If>
                                 <div className="webshare-vic">
                                     <span className="webshare-vic-link" onClick={() => this.viewInContext(screen)}>
@@ -112,28 +115,41 @@ class WebShareView extends React.Component<{}, {}> {
                                     </span>
                                 </div>
                                 <div className="actions">
-                                    <a href={util.makeExternLink(screen.getWebShareUrl())} target="_blank" className="button is-prompt-green is-outlined is-small a-block">
+                                    <a
+                                        href={util.makeExternLink(screen.getWebShareUrl())}
+                                        target="_blank"
+                                        className="button is-prompt-green is-outlined is-small a-block"
+                                    >
                                         <span>open in browser</span>
                                         <span className="icon">
-                                            <i className="fa-sharp fa-solid fa-up-right-from-square"/>
+                                            <i className="fa-sharp fa-solid fa-up-right-from-square" />
                                         </span>
                                     </a>
-                                    <div className="button is-prompt-green is-outlined is-small" onClick={() => this.copyShareLink(screen)}>
+                                    <div
+                                        className="button is-prompt-green is-outlined is-small"
+                                        onClick={() => this.copyShareLink(screen)}
+                                    >
                                         <span>copy link</span>
                                         <span className="icon">
-                                            <i className="fa-sharp fa-solid fa-copy"/>
+                                            <i className="fa-sharp fa-solid fa-copy" />
                                         </span>
                                     </div>
-                                    <div className="button is-prompt-green is-outlined is-small" onClick={() => this.openScreenSettings(screen)}>
+                                    <div
+                                        className="button is-prompt-green is-outlined is-small"
+                                        onClick={() => this.openScreenSettings(screen)}
+                                    >
                                         <span>open settings</span>
                                         <span className="icon">
-                                            <i className="fa-sharp fa-solid fa-cog"/>
+                                            <i className="fa-sharp fa-solid fa-cog" />
                                         </span>
                                     </div>
-                                    <div className="button is-prompt-danger is-outlined is-small ml-4" onClick={() => this.stopSharing(screen)}>
+                                    <div
+                                        className="button is-prompt-danger is-outlined is-small ml-4"
+                                        onClick={() => this.stopSharing(screen)}
+                                    >
                                         <span>stop sharing</span>
                                         <span className="icon">
-                                            <i className="fa-sharp fa-solid fa-trash"/>
+                                            <i className="fa-sharp fa-solid fa-trash" />
                                         </span>
                                     </div>
                                 </div>
@@ -143,8 +159,13 @@ class WebShareView extends React.Component<{}, {}> {
                 </If>
                 <div className="alt-help">
                     <div className="help-entry">
-                        Currently limited to a maximum of 3 screens, each with up to 50 commands.<br/>
-                        Contact us on <a target="_blank" href="https://discord.gg/XfvZ334gwU"><i className="fa-brands fa-discord"/> Discord</a> to get a higher limit.
+                        Currently limited to a maximum of 3 screens, each with up to 50 commands.
+                        <br />
+                        Contact us on{" "}
+                        <a target="_blank" href="https://discord.gg/XfvZ334gwU">
+                            <i className="fa-brands fa-discord" /> Discord
+                        </a>{" "}
+                        to get a higher limit.
                     </div>
                 </div>
             </div>
@@ -152,5 +173,4 @@ class WebShareView extends React.Component<{}, {}> {
     }
 }
 
-export {WebShareView};
-
+export { WebShareView };
diff --git a/src/webshare-elems.tsx b/src/webshare-elems.tsx
index 9c160aa3..acb7fc91 100644
--- a/src/webshare-elems.tsx
+++ b/src/webshare-elems.tsx
@@ -1,32 +1,32 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
 import cn from "classnames";
-import {WebShareModel, getTermPtyData} from "./webshare-model";
+import { WebShareModel, getTermPtyData } from "./webshare-model";
 import * as T from "./types";
-import {isBlank} from "./util";
-import {PluginModel} from "./plugins";
+import { isBlank } from "./util";
+import { PluginModel } from "./plugins";
 import * as lineutil from "./lineutil";
 import * as util from "./util";
-import {windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols} from "./textmeasure";
-import {debounce, throttle} from "throttle-debounce";
-import {LinesView} from "./linesview";
-import {Toggle} from "./elements";
-import {SimpleBlobRendererModel, SimpleBlobRenderer} from "./simplerenderer";
+import { windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols } from "./textmeasure";
+import { debounce, throttle } from "throttle-debounce";
+import { LinesView } from "./linesview";
+import { Toggle } from "./elements";
+import { SimpleBlobRendererModel, SimpleBlobRenderer } from "./simplerenderer";
 
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
-type OMap<K,V> = mobx.ObservableMap<K,V>;
+type OMap<K, V> = mobx.ObservableMap<K, V>;
 
 let foo = LinesView;
 
 // TODO reshare
 // TODO document.visibility API to disconnect websocket: document.addEventListener("visibilitychange", () => { document.hidden });
 
-function makeFullRemoteRef(ownerName : string, remoteRef : string, name : string) : string {
+function makeFullRemoteRef(ownerName: string, remoteRef: string, name: string): string {
     if (isBlank(ownerName) && isBlank(name)) {
         return remoteRef;
     }
@@ -39,7 +39,7 @@ function makeFullRemoteRef(ownerName : string, remoteRef : string, name : string
     return ownerName + ":" + remoteRef + ":" + name;
 }
 
-function getShortVEnv(venvDir : string) : string {
+function getShortVEnv(venvDir: string): string {
     if (isBlank(venvDir)) {
         return "";
     }
@@ -47,10 +47,10 @@ function getShortVEnv(venvDir : string) : string {
     if (lastSlash == -1) {
         return venvDir;
     }
-    return venvDir.substr(lastSlash+1);
+    return venvDir.substr(lastSlash + 1);
 }
 
-function replaceHomePath(path : string, homeDir : string) : string {
+function replaceHomePath(path: string, homeDir: string): string {
     if (path == homeDir) {
         return "~";
     }
@@ -60,77 +60,100 @@ function replaceHomePath(path : string, homeDir : string) : string {
     return path;
 }
 
-function getCwdStr(remote : T.WebRemote, state : Record<string, string>) : string {
+function getCwdStr(remote: T.WebRemote, state: Record<string, string>): string {
     if (state == null || isBlank(state.cwd)) {
         return "~";
     }
     let cwd = state.cwd;
     if (remote && remote.homedir) {
-        cwd = replaceHomePath(cwd, remote.homedir)
+        cwd = replaceHomePath(cwd, remote.homedir);
     }
     return cwd;
 }
 
-function getRemoteStr(remote : T.WebRemote) : string {
+function getRemoteStr(remote: T.WebRemote): string {
     if (remote == null) {
         return "(invalid remote)";
     }
-    let remoteRef = (!isBlank(remote.alias) ? remote.alias : remote.canonicalname);
+    let remoteRef = !isBlank(remote.alias) ? remote.alias : remote.canonicalname;
     let fullRef = makeFullRemoteRef(null, remoteRef, remote.name);
     return fullRef;
 }
 
 @mobxReact.observer
-class Prompt extends React.Component<{remote : T.WebRemote, festate : Record<string, string>}, {}> {
+class Prompt extends React.Component<{ remote: T.WebRemote; festate: Record<string, string> }, {}> {
     render() {
-        let {remote, festate} = this.props;
+        let { remote, festate } = this.props;
         let remoteStr = getRemoteStr(remote);
         let cwd = getCwdStr(remote, festate);
         let isRoot = !!remote.isroot;
-        let remoteColorClass = (isRoot ? "color-red" : "color-green");
-        let remoteTitle : string = null;
+        let remoteColorClass = isRoot ? "color-red" : "color-green";
+        let remoteTitle: string = null;
         if (remote && remote.canonicalname) {
             remoteTitle = remote.canonicalname;
         }
-        let cwdElem = (<span title="current directory" className="term-prompt-cwd"><i className="fa-solid fa-sharp fa-folder-open"/>{cwd}</span>);
-        let remoteElem = (<span title={remoteTitle} className={cn("term-prompt-remote", remoteColorClass)}>[{remoteStr}] </span>);
-        let rootIndicatorElem = (<span className="term-prompt-end">{isRoot ? "#" : "$"}</span>);
+        let cwdElem = (
+            <span title="current directory" className="term-prompt-cwd">
+                <i className="fa-solid fa-sharp fa-folder-open" />
+                {cwd}
+            </span>
+        );
+        let remoteElem = (
+            <span title={remoteTitle} className={cn("term-prompt-remote", remoteColorClass)}>
+                [{remoteStr}]{" "}
+            </span>
+        );
+        let rootIndicatorElem = <span className="term-prompt-end">{isRoot ? "#" : "$"}</span>;
         let branchElem = null;
         let pythonElem = null;
         if (!isBlank(festate["PROMPTVAR_GITBRANCH"])) {
             let branchName = festate["PROMPTVAR_GITBRANCH"];
-            branchElem = (<span title="current git branch" className="term-prompt-branch"><i className="fa-sharp fa-solid fa-code-branch"/>{branchName} </span>);
+            branchElem = (
+                <span title="current git branch" className="term-prompt-branch">
+                    <i className="fa-sharp fa-solid fa-code-branch" />
+                    {branchName}{" "}
+                </span>
+            );
         }
         if (!isBlank(festate["VIRTUAL_ENV"])) {
             let venvDir = festate["VIRTUAL_ENV"];
             let venv = getShortVEnv(venvDir);
-            pythonElem = (<span title="python venv" className="term-prompt-python"><i className="fa-brands fa-python"/>{venv} </span>);
+            pythonElem = (
+                <span title="python venv" className="term-prompt-python">
+                    <i className="fa-brands fa-python" />
+                    {venv}{" "}
+                </span>
+            );
         }
         return (
-            <span className="term-prompt">{remoteElem} {pythonElem}{branchElem}{cwdElem} {rootIndicatorElem}</span>
+            <span className="term-prompt">
+                {remoteElem} {pythonElem}
+                {branchElem}
+                {cwdElem} {rootIndicatorElem}
+            </span>
         );
     }
 }
 
 @mobxReact.observer
-class LineAvatar extends React.Component<{line : T.WebLine, cmd : T.WebCmd}, {}> {
+class LineAvatar extends React.Component<{ line: T.WebLine; cmd: T.WebCmd }, {}> {
     render() {
-        let {line, cmd} = this.props;
+        let { line, cmd } = this.props;
         let lineNumStr = String(line.linenum);
-        let status = (cmd != null ? cmd.status : "done");
-        let rtnstate = (cmd != null ? cmd.rtnstate : false);
-        let isComment = (line.linetype == "text");
+        let status = cmd != null ? cmd.status : "done";
+        let rtnstate = cmd != null ? cmd.rtnstate : false;
+        let isComment = line.linetype == "text";
         return (
-            <div className={cn("avatar", "num-"+lineNumStr.length, "status-" + status, {"rtnstate": rtnstate})}>
+            <div className={cn("avatar", "num-" + lineNumStr.length, "status-" + status, { rtnstate: rtnstate })}>
                 {lineNumStr}
                 <If condition={status == "hangup" || status == "error"}>
-                    <i className="fa-sharp fa-solid fa-triangle-exclamation status-icon"/>
+                    <i className="fa-sharp fa-solid fa-triangle-exclamation status-icon" />
                 </If>
                 <If condition={status == "detached"}>
-                    <i className="fa-sharp fa-solid fa-rotate status-icon"/>
+                    <i className="fa-sharp fa-solid fa-rotate status-icon" />
                 </If>
                 <If condition={isComment}>
-                    <i className="fa-sharp fa-solid fa-comment comment-icon"/>
+                    <i className="fa-sharp fa-solid fa-comment comment-icon" />
                 </If>
             </div>
         );
@@ -138,48 +161,60 @@ class LineAvatar extends React.Component<{line : T.WebLine, cmd : T.WebCmd}, {}>
 }
 
 @mobxReact.observer
-class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd, topBorder : boolean, width: number, onHeightChange : T.LineHeightChangeCallbackType, staticRender : boolean, visible : OV<boolean>}, {}> {
-    lineRef : React.RefObject<any> = React.createRef();
-    isCmdExpanded : OV<boolean> = mobx.observable.box(false, {name: "cmd-expanded"});
-    isOverflow : OV<boolean> = mobx.observable.box(false, {name: "line-overflow"});
-    cmdTextRef : React.RefObject<any> = React.createRef();
-    copiedIndicator : OV<boolean> =  mobx.observable.box(false, {name: "copiedIndicator"});
-    lastHeight : number;
+class WebLineCmdView extends React.Component<
+    {
+        line: T.WebLine;
+        cmd: T.WebCmd;
+        topBorder: boolean;
+        width: number;
+        onHeightChange: T.LineHeightChangeCallbackType;
+        staticRender: boolean;
+        visible: OV<boolean>;
+    },
+    {}
+> {
+    lineRef: React.RefObject<any> = React.createRef();
+    isCmdExpanded: OV<boolean> = mobx.observable.box(false, { name: "cmd-expanded" });
+    isOverflow: OV<boolean> = mobx.observable.box(false, { name: "line-overflow" });
+    cmdTextRef: React.RefObject<any> = React.createRef();
+    copiedIndicator: OV<boolean> = mobx.observable.box(false, { name: "copiedIndicator" });
+    lastHeight: number;
 
-    componentDidMount() : void {
+    componentDidMount(): void {
         this.checkCmdText();
         this.componentDidUpdate();
     }
 
-    componentDidUpdate() : void {
+    componentDidUpdate(): void {
         this.handleHeightChange();
     }
-    
+
     renderSimple() {
-        let {line, cmd, topBorder} = this.props;
-        let height : number = 0;
+        let { line, cmd, topBorder } = this.props;
+        let height: number = 0;
         if (isBlank(line.renderer) || line.renderer == "terminal") {
             height = this.getTerminalRendererHeight(cmd);
-        }
-        else {
-            let {line, width} = this.props;
+        } else {
+            let { line, width } = this.props;
             let usedRows = WebShareModel.getUsedRows(lineutil.getWebRendererContext(line), line, cmd, width);
             height = 36 + usedRows;
         }
-        let mainCn = cn(
-            "line",
-            "line-cmd",
-            {"top-border": topBorder},
-        );
+        let mainCn = cn("line", "line-cmd", { "top-border": topBorder });
         return (
-            <div ref={this.lineRef} className={mainCn} data-lineid={line.lineid} data-linenum={line.linenum} style={{height: height}}>
-                <LineAvatar line={line} cmd={null}/>
+            <div
+                ref={this.lineRef}
+                className={mainCn}
+                data-lineid={line.lineid}
+                data-linenum={line.linenum}
+                style={{ height: height }}
+            >
+                <LineAvatar line={line} cmd={null} />
             </div>
         );
     }
 
-    getTerminalRendererHeight(cmd : T.WebCmd) : number {
-        let {line, width} = this.props;
+    getTerminalRendererHeight(cmd: T.WebCmd): number {
+        let { line, width } = this.props;
         let height = 42; // height of zero height terminal
         let usedRows = WebShareModel.getUsedRows(lineutil.getWebRendererContext(line), line, cmd, width);
         if (usedRows > 0) {
@@ -189,13 +224,13 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
     }
 
     @boundMethod
-    handleExpandCmd() : void {
+    handleExpandCmd(): void {
         mobx.action(() => {
             this.isCmdExpanded.set(true);
         })();
     }
 
-    renderCmdText(cmd : T.WebCmd, remote : T.WebRemote) : any {
+    renderCmdText(cmd: T.WebCmd, remote: T.WebRemote): any {
         if (cmd == null) {
             return (
                 <div className="metapart-mono cmdtext">
@@ -208,7 +243,7 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
                 <React.Fragment>
                     <div key="meta2" className="meta meta-line2">
                         <div className="metapart-mono cmdtext">
-                            <Prompt remote={cmd.remote} festate={cmd.festate}/>
+                            <Prompt remote={cmd.remote} festate={cmd.festate} />
                         </div>
                     </div>
                     <div key="meta3" className="meta meta-line3 cmdtext-expanded-wrapper">
@@ -221,12 +256,14 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
         return (
             <div key="meta2" className="meta meta-line2" ref={this.cmdTextRef}>
                 <div className="metapart-mono cmdtext">
-                    <Prompt remote={cmd.remote} festate={cmd.festate}/>
+                    <Prompt remote={cmd.remote} festate={cmd.festate} />
                     <span> </span>
                     <span>{lineutil.getSingleLineCmdText(cmd.cmdstr)}</span>
                 </div>
                 <If condition={this.isOverflow.get() || isMultiLine}>
-                    <div className="cmdtext-overflow" onClick={this.handleExpandCmd}>...&#x25BC;</div>
+                    <div className="cmdtext-overflow" onClick={this.handleExpandCmd}>
+                        ...&#x25BC;
+                    </div>
                 </If>
             </div>
         );
@@ -241,11 +278,11 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
         let metaChild = metaElem.firstChild;
         let children = metaChild.childNodes;
         let childWidth = 0;
-        for (let i=0; i<children.length; i++) {
+        for (let i = 0; i < children.length; i++) {
             let ch = children[i];
             childWidth += ch.offsetWidth;
         }
-        let isOverflow = (childWidth > metaElemWidth);
+        let isOverflow = childWidth > metaElemWidth;
         if (isOverflow != this.isOverflow.get()) {
             mobx.action(() => {
                 this.isOverflow.set(isOverflow);
@@ -254,8 +291,8 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
     }
 
     @boundMethod
-    handleHeightChange() : void {
-        let {line} = this.props;
+    handleHeightChange(): void {
+        let { line } = this.props;
         let curHeight = 0;
         let curWidth = 0;
         let elem = this.lineRef.current;
@@ -273,12 +310,12 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
     }
 
     @boundMethod
-    handleClick() : void {
+    handleClick(): void {
         WebShareModel.setSelectedLine(this.props.line.linenum);
     }
 
     renderMetaWrap() {
-        let {line, cmd} = this.props;
+        let { line, cmd } = this.props;
         let formattedTime = lineutil.getLineDateTimeStr(line.ts);
         let termOpts = cmd.termopts;
         let remote = cmd.remote;
@@ -289,7 +326,10 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
                     <div className="ts">{formattedTime}</div>
                     <div>&nbsp;</div>
                     <If condition={!isBlank(renderer) && renderer != "terminal"}>
-                        <div className="renderer"><i className="fa-sharp fa-solid fa-fill"/>{renderer}&nbsp;</div>
+                        <div className="renderer">
+                            <i className="fa-sharp fa-solid fa-fill" />
+                            {renderer}&nbsp;
+                        </div>
                     </If>
                     <div className="termopts">
                         ({termOpts.rows}x{termOpts.cols})
@@ -300,14 +340,14 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
         );
     }
 
-    copyAllowed() : boolean {
-        return (navigator.clipboard != null);
+    copyAllowed(): boolean {
+        return navigator.clipboard != null;
     }
 
     @boundMethod
-    clickCopy() : void {
+    clickCopy(): void {
         if (this.copyAllowed()) {
-            let {cmd} = this.props;
+            let { cmd } = this.props;
             navigator.clipboard.writeText(cmd.cmdstr);
         }
         mobx.action(() => {
@@ -320,7 +360,7 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
         }, 600);
     }
 
-    getRendererOpts(cmd : T.WebCmd) : T.RendererOpts {
+    getRendererOpts(cmd: T.WebCmd): T.RendererOpts {
         return {
             maxSize: WebShareModel.getMaxContentSize(),
             idealSize: WebShareModel.getIdealContentSize(),
@@ -329,26 +369,25 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
         };
     }
 
-    makeRendererModelInitializeParams() : T.RendererModelInitializeParams {
-        let {line, cmd} = this.props;
+    makeRendererModelInitializeParams(): T.RendererModelInitializeParams {
+        let { line, cmd } = this.props;
         let context = lineutil.getWebRendererContext(line);
         let savedHeight = WebShareModel.getContentHeight(context);
         if (savedHeight == null) {
             if (line.contentheight != null && line.contentheight != -1) {
                 savedHeight = line.contentheight;
-            }
-            else {
+            } else {
                 savedHeight = 0;
             }
         }
         let api = {
-            saveHeight: (height : number) => {
+            saveHeight: (height: number) => {
                 WebShareModel.setContentHeight(lineutil.getWebRendererContext(line), height);
             },
-            onFocusChanged: (focus : boolean) => {
+            onFocusChanged: (focus: boolean) => {
                 // nothing
             },
-            dataHandler: (data : string, model : T.RendererModel) => {
+            dataHandler: (data: string, model: T.RendererModel) => {
                 // nothing
             },
         };
@@ -361,54 +400,94 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
             api: api,
         };
     }
-    
+
     render() {
-        let {line, cmd, topBorder, staticRender, visible} = this.props;
+        let { line, cmd, topBorder, staticRender, visible } = this.props;
         let isVisible = visible.get();
         if (staticRender || !isVisible) {
             return this.renderSimple();
         }
         let model = WebShareModel;
-        let isSelected = mobx.computed(() => (model.getSelectedLine() == line.linenum), {name: "computed-isSelected"}).get();
-        let isServerSelected = mobx.computed(() => (model.getServerSelectedLine() == line.linenum), {name: "computed-isServerSelected"}).get();
-        let rendererPlugin : T.RendererPluginType = null;
-        let isNoneRenderer = (line.renderer == "none");
+        let isSelected = mobx
+            .computed(() => model.getSelectedLine() == line.linenum, { name: "computed-isSelected" })
+            .get();
+        let isServerSelected = mobx
+            .computed(() => model.getServerSelectedLine() == line.linenum, { name: "computed-isServerSelected" })
+            .get();
+        let rendererPlugin: T.RendererPluginType = null;
+        let isNoneRenderer = line.renderer == "none";
         if (!isBlank(line.renderer) && line.renderer != "terminal" && !isNoneRenderer) {
             rendererPlugin = PluginModel.getRendererPluginByName(line.renderer);
         }
         let rendererType = lineutil.getRendererType(line);
-        let mainCn = cn("web-line line line-cmd", {"top-border": topBorder});
-        let visObs = mobx.observable.box(true, {name: "visObs"});
+        let mainCn = cn("web-line line line-cmd", { "top-border": topBorder });
+        let visObs = mobx.observable.box(true, { name: "visObs" });
         let width = this.props.width;
         if (width == 0) {
             width = 1024;
         }
         let isExpanded = this.isCmdExpanded.get();
         return (
-            <div ref={this.lineRef} className={mainCn} data-lineid={line.lineid} data-linenum={line.linenum} onClick={this.handleClick}>
+            <div
+                ref={this.lineRef}
+                className={mainCn}
+                data-lineid={line.lineid}
+                data-linenum={line.linenum}
+                onClick={this.handleClick}
+            >
                 <If condition={this.copiedIndicator.get()}>
                     <div key="copied" className="copied-indicator">
                         <div>copied</div>
                     </div>
                 </If>
-                <div key="focus" className={cn("focus-indicator", {"selected": isSelected || isServerSelected}, {"active": isSelected})}/>
-                <div className={cn("line-header", {"is-expanded": isExpanded})}>
-                    <LineAvatar line={line} cmd={cmd}/>
+                <div
+                    key="focus"
+                    className={cn(
+                        "focus-indicator",
+                        { selected: isSelected || isServerSelected },
+                        { active: isSelected }
+                    )}
+                />
+                <div className={cn("line-header", { "is-expanded": isExpanded })}>
+                    <LineAvatar line={line} cmd={cmd} />
                     {this.renderMetaWrap()}
                     <If condition={this.copyAllowed()}>
-                        <div key="copy" title="Copy Command" className={cn("line-icon copy-icon")} onClick={this.clickCopy} style={{marginLeft: 5}}>
-                            <i className="fa-sharp fa-solid fa-copy"/>
+                        <div
+                            key="copy"
+                            title="Copy Command"
+                            className={cn("line-icon copy-icon")}
+                            onClick={this.clickCopy}
+                            style={{ marginLeft: 5 }}
+                        >
+                            <i className="fa-sharp fa-solid fa-copy" />
                         </div>
                     </If>
                 </div>
                 <If condition={rendererPlugin == null && !isNoneRenderer}>
-                    <TerminalRenderer line={line} cmd={cmd} width={width} staticRender={staticRender} visible={visible} onHeightChange={this.handleHeightChange}/>
+                    <TerminalRenderer
+                        line={line}
+                        cmd={cmd}
+                        width={width}
+                        staticRender={staticRender}
+                        visible={visible}
+                        onHeightChange={this.handleHeightChange}
+                    />
                 </If>
                 <If condition={rendererPlugin != null}>
-                    <SimpleBlobRenderer rendererContainer={WebShareModel} lineId={line.lineid} plugin={rendererPlugin} onHeightChange={this.handleHeightChange} initParams={this.makeRendererModelInitializeParams()}/>
+                    <SimpleBlobRenderer
+                        rendererContainer={WebShareModel}
+                        lineId={line.lineid}
+                        plugin={rendererPlugin}
+                        onHeightChange={this.handleHeightChange}
+                        initParams={this.makeRendererModelInitializeParams()}
+                    />
                 </If>
                 <If condition={cmd && cmd.rtnstate}>
-                    <div key="rtnstate" className="cmd-rtnstate" style={{visibility: ((cmd.status == "done") ? "visible" : "hidden")}}>
+                    <div
+                        key="rtnstate"
+                        className="cmd-rtnstate"
+                        style={{ visibility: cmd.status == "done" ? "visible" : "hidden" }}
+                    >
                         <If condition={isBlank(cmd.rtnstatestr)}>
                             <div className="cmd-rtnstate-label">state unchanged</div>
                             <div className="cmd-rtnstate-sep"></div>
@@ -426,17 +505,19 @@ class WebLineCmdView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
 }
 
 @mobxReact.observer
-class WebLineTextView extends React.Component<{line : T.WebLine, cmd : T.WebCmd, topBorder : boolean}, {}> {
+class WebLineTextView extends React.Component<{ line: T.WebLine; cmd: T.WebCmd; topBorder: boolean }, {}> {
     render() {
-        let {line, topBorder} = this.props;
+        let { line, topBorder } = this.props;
         let model = WebShareModel;
-        let isSelected = mobx.computed(() => (model.getSelectedLine() == line.linenum), {name: "computed-isSelected"}).get();
-        let mainCn = cn("web-line line line-text", {"top-border": topBorder});
+        let isSelected = mobx
+            .computed(() => model.getSelectedLine() == line.linenum, { name: "computed-isSelected" })
+            .get();
+        let mainCn = cn("web-line line line-text", { "top-border": topBorder });
         return (
             <div className={mainCn} data-lineid={line.lineid} data-linenum={line.linenum}>
-                <div key="focus" className={cn("focus-indicator", {"selected active": isSelected})}/>
+                <div key="focus" className={cn("focus-indicator", { "selected active": isSelected })} />
                 <div className="line-header">
-                    <LineAvatar line={line} cmd={null}/>
+                    <LineAvatar line={line} cmd={null} />
                 </div>
                 <div>
                     <div>{line.text}</div>
@@ -447,10 +528,20 @@ class WebLineTextView extends React.Component<{line : T.WebLine, cmd : T.WebCmd,
 }
 
 @mobxReact.observer
-class TerminalRenderer extends React.Component<{line : T.WebLine, cmd : T.WebCmd, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : () => void}, {}> {
-    termLoaded : mobx.IObservableValue<boolean> = mobx.observable.box(false, {name: "termrenderer-termLoaded"});
-    elemRef : React.RefObject<any> = React.createRef();
-    termRef : React.RefObject<any> = React.createRef();
+class TerminalRenderer extends React.Component<
+    {
+        line: T.WebLine;
+        cmd: T.WebCmd;
+        width: number;
+        staticRender: boolean;
+        visible: OV<boolean>;
+        onHeightChange: () => void;
+    },
+    {}
+> {
+    termLoaded: mobx.IObservableValue<boolean> = mobx.observable.box(false, { name: "termrenderer-termLoaded" });
+    elemRef: React.RefObject<any> = React.createRef();
+    termRef: React.RefObject<any> = React.createRef();
 
     constructor(props) {
         super(props);
@@ -466,26 +557,26 @@ class TerminalRenderer extends React.Component<{line : T.WebLine, cmd : T.WebCmd
         }
     }
 
-    getSnapshotBeforeUpdate(prevProps, prevState) : {height : number} {
+    getSnapshotBeforeUpdate(prevProps, prevState): { height: number } {
         let elem = this.elemRef.current;
         if (elem == null) {
-            return {height: 0};
+            return { height: 0 };
         }
-        return {height: elem.offsetHeight};
+        return { height: elem.offsetHeight };
     }
 
-    componentDidUpdate(prevProps, prevState, snapshot : {height : number}) : void {
+    componentDidUpdate(prevProps, prevState, snapshot: { height: number }): void {
         if (this.props.onHeightChange == null) {
             return;
         }
-        let {line} = this.props;
+        let { line } = this.props;
         let curHeight = 0;
         let elem = this.elemRef.current;
         if (elem != null) {
             curHeight = elem.offsetHeight;
         }
         if (snapshot == null) {
-            snapshot = {height: 0};
+            snapshot = { height: 0 };
         }
         if (snapshot.height != curHeight) {
             this.props.onHeightChange();
@@ -494,8 +585,8 @@ class TerminalRenderer extends React.Component<{line : T.WebLine, cmd : T.WebCmd
         this.checkLoad();
     }
 
-    checkLoad() : void {
-        let {line, staticRender, visible} = this.props;
+    checkLoad(): void {
+        let { line, staticRender, visible } = this.props;
         if (staticRender) {
             return;
         }
@@ -503,14 +594,13 @@ class TerminalRenderer extends React.Component<{line : T.WebLine, cmd : T.WebCmd
         let curVis = this.termLoaded.get();
         if (vis && !curVis) {
             this.loadTerminal();
-        }
-        else if (!vis && curVis) {
+        } else if (!vis && curVis) {
             this.unloadTerminal(false);
         }
     }
 
-    loadTerminal() : void {
-        let {line, cmd} = this.props;
+    loadTerminal(): void {
+        let { line, cmd } = this.props;
         if (cmd == null) {
             return;
         }
@@ -523,8 +613,8 @@ class TerminalRenderer extends React.Component<{line : T.WebLine, cmd : T.WebCmd
         mobx.action(() => this.termLoaded.set(true))();
     }
 
-    unloadTerminal(unmount : boolean) : void {
-        let {line} = this.props;
+    unloadTerminal(unmount: boolean): void {
+        let { line } = this.props;
         WebShareModel.unloadRenderer(line.lineid);
         if (!unmount) {
             mobx.action(() => this.termLoaded.set(false))();
@@ -534,10 +624,10 @@ class TerminalRenderer extends React.Component<{line : T.WebLine, cmd : T.WebCmd
             }
         }
     }
-    
+
     @boundMethod
-    clickTermBlock(e : any) {
-        let {line} = this.props;
+    clickTermBlock(e: any) {
+        let { line } = this.props;
         let termWrap = WebShareModel.getTermWrap(line.lineid);
         if (termWrap != null) {
             termWrap.giveFocus();
@@ -546,56 +636,82 @@ class TerminalRenderer extends React.Component<{line : T.WebLine, cmd : T.WebCmd
             WebShareModel.setSelectedLine(line.linenum);
         })();
     }
-    
+
     render() {
-        let {cmd, line, width, staticRender, visible} = this.props;
+        let { cmd, line, width, staticRender, visible } = this.props;
         let isVisible = visible.get(); // for reaction
         let usedRows = WebShareModel.getUsedRows(lineutil.getWebRendererContext(line), line, cmd, width);
         let termHeight = termHeightFromRows(usedRows, WebShareModel.getTermFontSize());
         let termLoaded = this.termLoaded.get();
-        let isFocused = (WebShareModel.getSelectedLine() == line.linenum);
+        let isFocused = WebShareModel.getSelectedLine() == line.linenum;
         return (
-            <div ref={this.elemRef} key="term-wrap" className={cn("terminal-wrapper", {"cmd-done": !lineutil.cmdStatusIsRunning(cmd.status)}, {"zero-height": (termHeight == 0)})}>
+            <div
+                ref={this.elemRef}
+                key="term-wrap"
+                className={cn(
+                    "terminal-wrapper",
+                    { "cmd-done": !lineutil.cmdStatusIsRunning(cmd.status) },
+                    { "zero-height": termHeight == 0 }
+                )}
+            >
                 <If condition={!isFocused}>
                     <div key="term-block" className="term-block" onClick={this.clickTermBlock}></div>
                 </If>
-                <div key="term-connectelem" className="terminal-connectelem" ref={this.termRef} data-lineid={line.lineid} style={{height: termHeight}}></div>
-                <If condition={!termLoaded}><div key="term-loading" className="terminal-loading-message">...</div></If>
-
+                <div
+                    key="term-connectelem"
+                    className="terminal-connectelem"
+                    ref={this.termRef}
+                    data-lineid={line.lineid}
+                    style={{ height: termHeight }}
+                ></div>
+                <If condition={!termLoaded}>
+                    <div key="term-loading" className="terminal-loading-message">
+                        ...
+                    </div>
+                </If>
             </div>
         );
     }
 }
 
 @mobxReact.observer
-class WebLineView extends React.Component<{line : T.WebLine, cmd : T.WebCmd, topBorder : boolean, width : number, onHeightChange : T.LineHeightChangeCallbackType, staticRender : boolean, visible : OV<boolean>}, {}> {
+class WebLineView extends React.Component<
+    {
+        line: T.WebLine;
+        cmd: T.WebCmd;
+        topBorder: boolean;
+        width: number;
+        onHeightChange: T.LineHeightChangeCallbackType;
+        staticRender: boolean;
+        visible: OV<boolean>;
+    },
+    {}
+> {
     render() {
-        let {line} = this.props;
+        let { line } = this.props;
         if (line.linetype == "text") {
-            return <WebLineTextView {...this.props}/>
+            return <WebLineTextView {...this.props} />;
         }
         if (line.linetype == "cmd") {
-            return <WebLineCmdView {...this.props}/>
+            return <WebLineCmdView {...this.props} />;
         }
-        return (
-            <div className="web-line line">invalid linetype "{line.linetype}"</div>
-        );
+        return <div className="web-line line">invalid linetype "{line.linetype}"</div>;
     }
 }
 
 @mobxReact.observer
 class WebScreenView extends React.Component<{}, {}> {
-    viewRef : React.RefObject<any> = React.createRef();
-    width : OV<number> = mobx.observable.box(0, {name: "WebScreenView-width"});
-    handleResize_debounced : () => void;
-    rszObs : ResizeObserver;
+    viewRef: React.RefObject<any> = React.createRef();
+    width: OV<number> = mobx.observable.box(0, { name: "WebScreenView-width" });
+    handleResize_debounced: () => void;
+    rszObs: ResizeObserver;
 
-    constructor(props : any) {
+    constructor(props: any) {
         super(props);
         this.handleResize_debounced = debounce(1000, this.handleResize.bind(this));
     }
 
-    componentDidMount() : void {
+    componentDidMount(): void {
         if (this.viewRef.current != null) {
             let viewElem = this.viewRef.current;
             this.rszObs = new ResizeObserver(this.handleResize_debounced.bind(this));
@@ -610,16 +726,16 @@ class WebScreenView extends React.Component<{}, {}> {
         }
     }
 
-    handleResize() : void {
+    handleResize(): void {
         let viewElem = this.viewRef.current;
         if (viewElem == null) {
             return;
         }
         let width = viewElem.offsetWidth;
         let height = viewElem.offsetHeight;
-        WebShareModel.setLastScreenSize({width, height});
+        WebShareModel.setLastScreenSize({ width, height });
         if (width != this.width.get()) {
-            WebShareModel.resizeWindow({width: width, height: height});
+            WebShareModel.resizeWindow({ width: width, height: height });
             mobx.action(() => {
                 this.width.set(width);
             })();
@@ -627,15 +743,24 @@ class WebScreenView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    buildLineComponent(lineProps : T.LineFactoryProps) : JSX.Element {
-        let line : T.WebLine = (lineProps.line as T.WebLine);
+    buildLineComponent(lineProps: T.LineFactoryProps): JSX.Element {
+        let line: T.WebLine = lineProps.line as T.WebLine;
         let cmd = WebShareModel.getCmdById(lineProps.line.lineid);
         return (
-            <WebLineView key={line.lineid} line={line} cmd={cmd} topBorder={lineProps.topBorder} width={lineProps.width} onHeightChange={lineProps.onHeightChange} staticRender={lineProps.staticRender} visible={lineProps.visible}/>
+            <WebLineView
+                key={line.lineid}
+                line={line}
+                cmd={cmd}
+                topBorder={lineProps.topBorder}
+                width={lineProps.width}
+                onHeightChange={lineProps.onHeightChange}
+                staticRender={lineProps.staticRender}
+                visible={lineProps.visible}
+            />
         );
     }
 
-    renderEmpty() : any {
+    renderEmpty(): any {
         return (
             <div className="web-screen-view" ref={this.viewRef}>
                 <div className="web-lines lines">
@@ -644,7 +769,7 @@ class WebScreenView extends React.Component<{}, {}> {
             </div>
         );
     }
-    
+
     render() {
         let fullScreen = WebShareModel.fullScreen.get();
         if (fullScreen == null || fullScreen.lines.length == 0) {
@@ -652,7 +777,13 @@ class WebScreenView extends React.Component<{}, {}> {
         }
         return (
             <div className="web-screen-view" ref={this.viewRef}>
-                <LinesView screen={WebShareModel} width={this.width.get()} lines={fullScreen.lines} renderMode="normal" lineFactory={this.buildLineComponent}/>
+                <LinesView
+                    screen={WebShareModel}
+                    width={this.width.get()}
+                    lines={fullScreen.lines}
+                    renderMode="normal"
+                    lineFactory={this.buildLineComponent}
+                />
             </div>
         );
     }
@@ -661,9 +792,9 @@ class WebScreenView extends React.Component<{}, {}> {
 @mobxReact.observer
 class WebShareMain extends React.Component<{}, {}> {
     renderCopy() {
-        return (<div className="footer-copy">&copy; 2023 Dashborg Inc</div>);
+        return <div className="footer-copy">&copy; 2023 Dashborg Inc</div>;
     }
-            
+
     render() {
         let screen = WebShareModel.fullScreen.get();
         let errMessage = WebShareModel.errMessage.get();
@@ -675,27 +806,36 @@ class WebShareMain extends React.Component<{}, {}> {
             <div id="main">
                 <div className="logo-header">
                     <div className="logo-text">
-                        <a target="_blank" href="https://www.getprompt.dev">[prompt]</a>
+                        <a target="_blank" href="https://www.getprompt.dev">
+                            [prompt]
+                        </a>
                     </div>
-                    <div className="flex-spacer"/>
-                    <a href="https://getprompt.dev/download/" target="_blank" className="download-button button is-link">
+                    <div className="flex-spacer" />
+                    <a
+                        href="https://getprompt.dev/download/"
+                        target="_blank"
+                        className="download-button button is-link"
+                    >
                         <span>Download Prompt</span>
                         <span className="icon is-small">
-                            <i className="fa-sharp fa-solid fa-cloud-arrow-down"/>
+                            <i className="fa-sharp fa-solid fa-cloud-arrow-down" />
                         </span>
                     </a>
                 </div>
                 <div className="webshare-controls">
                     <div className="screen-sharename">{shareName}</div>
-                    <div className="flex-spacer"/>
+                    <div className="flex-spacer" />
                     <div className="sync-control">
                         <div>Sync Selection</div>
-                        <Toggle checked={WebShareModel.syncSelectedLine.get()} onChange={(val) => WebShareModel.setSyncSelectedLine(val)}/>
+                        <Toggle
+                            checked={WebShareModel.syncSelectedLine.get()}
+                            onChange={(val) => WebShareModel.setSyncSelectedLine(val)}
+                        />
                     </div>
                 </div>
                 <div className="prompt-content">
                     <If condition={screen != null}>
-                        <WebScreenView/>
+                        <WebScreenView />
                     </If>
                     <If condition={errMessage != null}>
                         <div className="err-message">{WebShareModel.errMessage.get()}</div>
@@ -703,10 +843,10 @@ class WebShareMain extends React.Component<{}, {}> {
                 </div>
                 <div className="prompt-footer">
                     {this.renderCopy()}
-                    <div className="flex-spacer"/>
+                    <div className="flex-spacer" />
                     <a target="_blank" href="https://discord.gg/XfvZ334gwU" className="button is-link is-small">
                         <span className="icon is-small">
-                            <i className="fa-brands fa-discord"/>
+                            <i className="fa-brands fa-discord" />
                         </span>
                         <span>Discord</span>
                     </a>
@@ -716,4 +856,4 @@ class WebShareMain extends React.Component<{}, {}> {
     }
 }
 
-export {WebShareMain};
+export { WebShareMain };
diff --git a/src/webshare-model.ts b/src/webshare-model.ts
index 5b58de95..fe84fa6a 100644
--- a/src/webshare-model.ts
+++ b/src/webshare-model.ts
@@ -1,13 +1,13 @@
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import {handleJsonFetchResponse, isModKeyPress, base64ToArray} from "./util";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import { handleJsonFetchResponse, isModKeyPress, base64ToArray } from "./util";
 import * as T from "./types";
-import {TermWrap} from "./term";
+import { TermWrap } from "./term";
 import * as lineutil from "./lineutil";
 import * as util from "./util";
-import {windowWidthToCols, windowHeightToRows, termWidthFromCols, termHeightFromRows} from "./textmeasure";
-import {WebShareWSControl} from "./webshare-ws";
+import { windowWidthToCols, windowHeightToRows, termWidthFromCols, termHeightFromRows } from "./textmeasure";
+import { WebShareWSControl } from "./webshare-ws";
 
 // @ts-ignore
 let PROMPT_DEV = __PROMPT_DEV__;
@@ -22,15 +22,15 @@ let PROMPT_WSAPI_ENDPOINT = __PROMPT_WSAPI_ENDPOINT__;
 
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
-type OMap<K,V> = mobx.ObservableMap<K,V>;
+type OMap<K, V> = mobx.ObservableMap<K, V>;
 type CV<V> = mobx.IComputedValue<V>;
 
 type PtyListener = {
-    receiveData(ptyPos : number, data : Uint8Array, reason? : string);
+    receiveData(ptyPos: number, data: Uint8Array, reason?: string);
 };
 
-function isBlank(s : string) {
-    return (s == null || s == "");
+function isBlank(s: string) {
+    return s == null || s == "";
 }
 
 function getBaseUrl() {
@@ -42,25 +42,25 @@ function getBaseWSUrl() {
 }
 
 class WebShareModelClass {
-    viewKey : string;
-    screenId : string;
-    errMessage : OV<string> = mobx.observable.box(null, {name: "errMessage"});
-    fullScreen : OV<T.WebFullScreen> = mobx.observable.box(null, {name: "webScreen"});
-    terminals : Record<string, TermWrap> = {};        // lineid => TermWrap
-    renderers : Record<string, T.RendererModel> = {};   // lineid => RendererModel
-    contentHeightCache : Record<string, number> = {};  // lineid => height
-    wsControl : WebShareWSControl;
-    anchor : {anchorLine : number, anchorOffset : number} = {anchorLine: 0, anchorOffset: 0};
-    selectedLine : OV<number> = mobx.observable.box(0, {name: "selectedLine"});
-    syncSelectedLine : OV<boolean> = mobx.observable.box(true, {name: "syncSelectedLine"});
-    lastScreenSize : T.WindowSize = null;
-    activePtyFetch : Record<string, boolean> = {}; // lineid -> active
-    localPtyOffsetMap : Record<string, number> = {};
-    remotePtyOffsetMap : Record<string, number> = {};
-    activeUpdateFetch : boolean = false;
-    remoteScreenVts : number = 0;
-    isDev : boolean = PROMPT_DEV;
-    
+    viewKey: string;
+    screenId: string;
+    errMessage: OV<string> = mobx.observable.box(null, { name: "errMessage" });
+    fullScreen: OV<T.WebFullScreen> = mobx.observable.box(null, { name: "webScreen" });
+    terminals: Record<string, TermWrap> = {}; // lineid => TermWrap
+    renderers: Record<string, T.RendererModel> = {}; // lineid => RendererModel
+    contentHeightCache: Record<string, number> = {}; // lineid => height
+    wsControl: WebShareWSControl;
+    anchor: { anchorLine: number; anchorOffset: number } = { anchorLine: 0, anchorOffset: 0 };
+    selectedLine: OV<number> = mobx.observable.box(0, { name: "selectedLine" });
+    syncSelectedLine: OV<boolean> = mobx.observable.box(true, { name: "syncSelectedLine" });
+    lastScreenSize: T.WindowSize = null;
+    activePtyFetch: Record<string, boolean> = {}; // lineid -> active
+    localPtyOffsetMap: Record<string, number> = {};
+    remotePtyOffsetMap: Record<string, number> = {};
+    activeUpdateFetch: boolean = false;
+    remoteScreenVts: number = 0;
+    isDev: boolean = PROMPT_DEV;
+
     constructor() {
         let pathName = window.location.pathname;
         let screenMatch = pathName.match(/\/share\/([a-f0-9-]+)/);
@@ -73,17 +73,22 @@ class WebShareModelClass {
             this.screenId = urlParams.get("screenid");
         }
         setTimeout(() => this.loadFullScreenData(false), 10);
-        this.wsControl = new WebShareWSControl(getBaseWSUrl(), this.screenId, this.viewKey, this.wsMessageCallback.bind(this));
+        this.wsControl = new WebShareWSControl(
+            getBaseWSUrl(),
+            this.screenId,
+            this.viewKey,
+            this.wsMessageCallback.bind(this)
+        );
         document.addEventListener("keydown", this.docKeyDownHandler.bind(this));
     }
 
-    setErrMessage(msg : string) : void {
+    setErrMessage(msg: string): void {
         mobx.action(() => {
             this.errMessage.set(msg);
         })();
     }
 
-    setSyncSelectedLine(val : boolean) : void {
+    setSyncSelectedLine(val: boolean): void {
         mobx.action(() => {
             this.syncSelectedLine.set(val);
             if (val) {
@@ -95,55 +100,55 @@ class WebShareModelClass {
         })();
     }
 
-    setLastScreenSize(winSize : T.WindowSize) {
+    setLastScreenSize(winSize: T.WindowSize) {
         if (winSize == null || winSize.height == 0 || winSize.width == 0) {
             return;
         }
         this.lastScreenSize = winSize;
     }
 
-    getMaxContentSize() : T.WindowSize {
+    getMaxContentSize(): T.WindowSize {
         if (this.lastScreenSize == null) {
             let width = termWidthFromCols(80, WebShareModel.getTermFontSize());
             let height = termHeightFromRows(25, WebShareModel.getTermFontSize());
-            return {width, height};
+            return { width, height };
         }
         let winSize = this.lastScreenSize;
-        let width = util.boundInt(winSize.width-50, 100, 5000);
-        let height = util.boundInt(winSize.height-100, 100, 5000);
-        return {width, height};
-    }
-    
-    getIdealContentSize() : T.WindowSize {
-        if (this.lastScreenSize == null) {
-            let width = termWidthFromCols(80, WebShareModel.getTermFontSize());
-            let height = termHeightFromRows(25, WebShareModel.getTermFontSize());
-            return {width, height};
-        }
-        let winSize = this.lastScreenSize;
-        let width = util.boundInt(Math.ceil((winSize.width-50)*0.7), 100, 5000);
-        let height = util.boundInt(Math.ceil((winSize.height-100)*0.5), 100, 5000);
-        return {width, height};
+        let width = util.boundInt(winSize.width - 50, 100, 5000);
+        let height = util.boundInt(winSize.height - 100, 100, 5000);
+        return { width, height };
     }
 
-    getSelectedLine() : number {
+    getIdealContentSize(): T.WindowSize {
+        if (this.lastScreenSize == null) {
+            let width = termWidthFromCols(80, WebShareModel.getTermFontSize());
+            let height = termHeightFromRows(25, WebShareModel.getTermFontSize());
+            return { width, height };
+        }
+        let winSize = this.lastScreenSize;
+        let width = util.boundInt(Math.ceil((winSize.width - 50) * 0.7), 100, 5000);
+        let height = util.boundInt(Math.ceil((winSize.height - 100) * 0.5), 100, 5000);
+        return { width, height };
+    }
+
+    getSelectedLine(): number {
         return this.selectedLine.get();
     }
 
-    getServerSelectedLine() : number {
+    getServerSelectedLine(): number {
         let fullScreen = this.fullScreen.get();
         if (fullScreen != null) {
             return fullScreen.screen.selectedline;
         }
     }
 
-    setSelectedLine(lineNum : number) : void {
+    setSelectedLine(lineNum: number): void {
         mobx.action(() => {
             this.selectedLine.set(lineNum);
         })();
     }
 
-    updateSelectedLineIndex(delta : number) : void {
+    updateSelectedLineIndex(delta: number): void {
         let fullScreen = this.fullScreen.get();
         if (fullScreen == null) {
             return;
@@ -160,20 +165,20 @@ class WebShareModelClass {
         this.setSelectedLine(lines[lineIndex].linenum);
     }
 
-    setAnchorFields(anchorLine : number, anchorOffset : number, reason : string) : void {
+    setAnchorFields(anchorLine: number, anchorOffset: number, reason: string): void {
         this.anchor.anchorLine = anchorLine;
         this.anchor.anchorOffset = anchorOffset;
     }
 
-    getAnchor() : {anchorLine : number, anchorOffset : number} {
+    getAnchor(): { anchorLine: number; anchorOffset: number } {
         return this.anchor;
     }
 
-    getTermFontSize() : number {
+    getTermFontSize(): number {
         return 12;
     }
 
-    resizeWindow(winSize : T.WindowSize) : void {
+    resizeWindow(winSize: T.WindowSize): void {
         let cols = windowWidthToCols(winSize.width, this.getTermFontSize());
         for (let lineId in this.terminals) {
             let termWrap = this.terminals[lineId];
@@ -181,8 +186,8 @@ class WebShareModelClass {
         }
     }
 
-    mergeLine(fullScreen : T.WebFullScreen, newLine : T.WebLine) {
-        for (let i=0; i<fullScreen.lines.length; i++) {
+    mergeLine(fullScreen: T.WebFullScreen, newLine: T.WebLine) {
+        for (let i = 0; i < fullScreen.lines.length; i++) {
             let line = fullScreen.lines[i];
             if (line.lineid == newLine.lineid) {
                 fullScreen.lines[i] = newLine;
@@ -196,15 +201,15 @@ class WebShareModelClass {
         fullScreen.lines.push(newLine);
     }
 
-    removeLine(fullScreen : T.WebFullScreen, lineId : string) {
-        for (let i=0; i<fullScreen.lines.length; i++) {
+    removeLine(fullScreen: T.WebFullScreen, lineId: string) {
+        for (let i = 0; i < fullScreen.lines.length; i++) {
             let line = fullScreen.lines[i];
             if (line.lineid == lineId) {
                 fullScreen.lines.splice(i, 1);
                 break;
             }
         }
-        for (let i=0; i<fullScreen.cmds.length; i++) {
+        for (let i = 0; i < fullScreen.cmds.length; i++) {
             let cmd = fullScreen.cmds[i];
             if (cmd.lineid == lineId) {
                 fullScreen.cmds.splice(i, 1);
@@ -214,15 +219,15 @@ class WebShareModelClass {
         this.unloadRenderer(lineId);
     }
 
-    setCmdDone(lineId : string) : void {
+    setCmdDone(lineId: string): void {
         let termWrap = this.getTermWrap(lineId);
         if (termWrap != null) {
             termWrap.cmdDone();
         }
     }
 
-    mergeCmd(fullScreen : T.WebFullScreen, newCmd : T.WebCmd) {
-        for (let i=0; i<fullScreen.cmds.length; i++) {
+    mergeCmd(fullScreen: T.WebFullScreen, newCmd: T.WebCmd) {
+        for (let i = 0; i < fullScreen.cmds.length; i++) {
             let cmd = fullScreen.cmds[i];
             if (cmd.lineid == newCmd.lineid) {
                 let wasRunning = lineutil.cmdStatusIsRunning(cmd.status);
@@ -237,7 +242,7 @@ class WebShareModelClass {
         fullScreen.cmds.push(newCmd);
     }
 
-    mergeUpdate(msg : T.WebFullScreen) {
+    mergeUpdate(msg: T.WebFullScreen) {
         if (msg.screenid != this.screenId) {
             console.log("bad WebFullScreen update, wrong screenid", msg.screenid);
             return;
@@ -272,10 +277,10 @@ class WebShareModelClass {
                 }
             }
             this.handleCmdPtyMap(msg.cmdptymap);
-         })();
+        })();
     }
 
-    handleCmdPtyMap(ptyMap : Record<string, number>) {
+    handleCmdPtyMap(ptyMap: Record<string, number>) {
         if (ptyMap == null) {
             return;
         }
@@ -289,7 +294,7 @@ class WebShareModelClass {
         }
     }
 
-    runPtyFetch(lineId : string) {
+    runPtyFetch(lineId: string) {
         let prtn = this.checkFetchPtyData(lineId, false);
         let ptyListener = this.getPtyListener(lineId);
         if (ptyListener != null) {
@@ -302,7 +307,7 @@ class WebShareModelClass {
         }
     }
 
-    getPtyListener(lineId : string) {
+    getPtyListener(lineId: string) {
         let termWrap = this.getTermWrap(lineId);
         if (termWrap != null) {
             return termWrap;
@@ -314,7 +319,7 @@ class WebShareModelClass {
         return null;
     }
 
-    receivePtyData(lineId : string, ptyPos : number, data : Uint8Array, reason? : string) : void {
+    receivePtyData(lineId: string, ptyPos: number, data: Uint8Array, reason?: string): void {
         let termWrap = this.getTermWrap(lineId);
         if (termWrap != null) {
             termWrap.receiveData(ptyPos, data, reason);
@@ -325,7 +330,7 @@ class WebShareModelClass {
         }
     }
 
-    checkFetchPtyData(lineId : string, reload : boolean) : Promise<T.PtyDataType> {
+    checkFetchPtyData(lineId: string, reload: boolean): Promise<T.PtyDataType> {
         let lineNum = this.getLineNumFromId(lineId);
         if (this.activePtyFetch[lineId]) {
             // console.log("check-fetch", lineNum, "already running");
@@ -342,34 +347,44 @@ class WebShareModelClass {
         let remotePtyOffset = this.remotePtyOffsetMap[lineId];
         if (ptyOffset >= remotePtyOffset) {
             // up to date
-            return Promise.resolve({pos: ptyOffset, data: new Uint8Array(0)});
+            return Promise.resolve({ pos: ptyOffset, data: new Uint8Array(0) });
         }
         this.activePtyFetch[lineId] = true;
         let viewKey = WebShareModel.viewKey;
         // console.log("fetch pty", lineNum, "pos=" + ptyOffset);
-        let usp = new URLSearchParams({screenid: this.screenId, viewkey: viewKey, lineid: lineId, pos: String(ptyOffset)});
-        let url = new URL(getBaseUrl() + "/webshare/ptydata?" + usp.toString());
-        return fetch(url, {method: "GET", mode: "cors", cache: "no-cache"}).then((resp) => {
-            if (!resp.ok) {
-                throw new Error(sprintf("Bad fetch response for /webshare/ptydata: %d %s", resp.status, resp.statusText));
-            }
-            let ptyOffsetStr = resp.headers.get("X-PtyDataOffset");
-            if (ptyOffsetStr != null && !isNaN(parseInt(ptyOffsetStr))) {
-                ptyOffset = parseInt(ptyOffsetStr);
-            }
-            return resp.arrayBuffer();
-        }).then((buf) => {
-            let dataArr = new Uint8Array(buf);
-            let newOffset = ptyOffset + dataArr.length;
-            // console.log("fetch pty success", lineNum, "len=" + dataArr.length, "pos => " + newOffset);
-            this.localPtyOffsetMap[lineId] = newOffset;
-            return {pos: ptyOffset, data: dataArr};
-        }).finally(() => {
-            this.activePtyFetch[lineId] = false;
+        let usp = new URLSearchParams({
+            screenid: this.screenId,
+            viewkey: viewKey,
+            lineid: lineId,
+            pos: String(ptyOffset),
         });
+        let url = new URL(getBaseUrl() + "/webshare/ptydata?" + usp.toString());
+        return fetch(url, { method: "GET", mode: "cors", cache: "no-cache" })
+            .then((resp) => {
+                if (!resp.ok) {
+                    throw new Error(
+                        sprintf("Bad fetch response for /webshare/ptydata: %d %s", resp.status, resp.statusText)
+                    );
+                }
+                let ptyOffsetStr = resp.headers.get("X-PtyDataOffset");
+                if (ptyOffsetStr != null && !isNaN(parseInt(ptyOffsetStr))) {
+                    ptyOffset = parseInt(ptyOffsetStr);
+                }
+                return resp.arrayBuffer();
+            })
+            .then((buf) => {
+                let dataArr = new Uint8Array(buf);
+                let newOffset = ptyOffset + dataArr.length;
+                // console.log("fetch pty success", lineNum, "len=" + dataArr.length, "pos => " + newOffset);
+                this.localPtyOffsetMap[lineId] = newOffset;
+                return { pos: ptyOffset, data: dataArr };
+            })
+            .finally(() => {
+                this.activePtyFetch[lineId] = false;
+            });
     }
 
-    wsMessageCallback(msg : any) {
+    wsMessageCallback(msg: any) {
         if (msg.type == "webscreen:update") {
             // console.log("[ws] update vts", msg.vts);
             if (msg.vts > this.remoteScreenVts) {
@@ -384,7 +399,7 @@ class WebShareModelClass {
         console.log("[ws] unhandled message", msg);
     }
 
-    setWebFullScreen(screen : T.WebFullScreen) {
+    setWebFullScreen(screen: T.WebFullScreen) {
         // console.log("got initial screen", "vts=" + screen.vts);
         mobx.action(() => {
             if (screen.lines == null) {
@@ -398,13 +413,12 @@ class WebShareModelClass {
             this.fullScreen.set(screen);
             this.wsControl.reconnect(true);
             if (this.syncSelectedLine.get()) {
-               this.selectedLine.set(screen.screen.selectedline);
+                this.selectedLine.set(screen.screen.selectedline);
             }
         })();
-        
     }
 
-    loadTerminalRenderer(elem : Element, line : T.WebLine, cmd : T.WebCmd, width : number) : void {
+    loadTerminalRenderer(elem: Element, line: T.WebLine, cmd: T.WebCmd, width: number): void {
         let lineId = cmd.lineid;
         let termWrap = this.getTermWrap(lineId);
         if (termWrap != null) {
@@ -421,14 +435,16 @@ class WebShareModelClass {
             termContext: termContext,
             usedRows: usedRows,
             termOpts: cmd.termopts,
-            winSize: {height: 0, width: width},
+            winSize: { height: 0, width: width },
             dataHandler: null,
-            focusHandler: (focus : boolean) => this.setTermFocus(line.linenum, focus),
+            focusHandler: (focus: boolean) => this.setTermFocus(line.linenum, focus),
             isRunning: lineutil.cmdStatusIsRunning(cmd.status),
             customKeyHandler: this.termCustomKeyHandler.bind(this),
             fontSize: this.getTermFontSize(),
             ptyDataSource: getTermPtyData,
-            onUpdateContentHeight: (termContext : T.RendererContext, height : number) => { this.setContentHeight(termContext, height); },
+            onUpdateContentHeight: (termContext: T.RendererContext, height: number) => {
+                this.setContentHeight(termContext, height);
+            },
         });
         this.terminals[lineId] = termWrap;
         if (this.localPtyOffsetMap[lineId] == null) {
@@ -441,7 +457,7 @@ class WebShareModelClass {
         return;
     }
 
-    termCustomKeyHandler(e : any, termWrap : TermWrap) : boolean {
+    termCustomKeyHandler(e: any, termWrap: TermWrap): boolean {
         if (e.type != "keydown" || isModKeyPress(e)) {
             return false;
         }
@@ -466,20 +482,19 @@ class WebShareModelClass {
         return false;
     }
 
-    setTermFocus(lineNum : number, focus : boolean) : void {
-    }
+    setTermFocus(lineNum: number, focus: boolean): void {}
 
-    getContentHeight(context : T.RendererContext) : number {
+    getContentHeight(context: T.RendererContext): number {
         let key = context.lineId;
         return this.contentHeightCache[key];
     }
 
-    setContentHeight(context : T.RendererContext, height : number) : void {
+    setContentHeight(context: T.RendererContext, height: number): void {
         let key = context.lineId;
         this.contentHeightCache[key] = height;
     }
 
-    unloadRenderer(lineId : string) : void {
+    unloadRenderer(lineId: string): void {
         let rmodel = this.renderers[lineId];
         if (rmodel != null) {
             rmodel.dispose();
@@ -493,7 +508,7 @@ class WebShareModelClass {
         delete this.localPtyOffsetMap[lineId];
     }
 
-    getUsedRows(context : T.RendererContext, line : T.WebLine, cmd : T.WebCmd, width : number) : number {
+    getUsedRows(context: T.RendererContext, line: T.WebLine, cmd: T.WebCmd, width: number): number {
         if (cmd == null) {
             return 0;
         }
@@ -511,27 +526,27 @@ class WebShareModelClass {
             if (line.contentheight != null && line.contentheight != -1) {
                 return line.contentheight;
             }
-            return (lineutil.cmdStatusIsRunning(cmd.status) ? 1 : 0);
+            return lineutil.cmdStatusIsRunning(cmd.status) ? 1 : 0;
         }
         return termWrap.getUsedRows();
     }
 
-    getTermWrap(lineId : string) : TermWrap {
+    getTermWrap(lineId: string): TermWrap {
         return this.terminals[lineId];
     }
 
-    getRenderer(lineId : string) : T.RendererModel {
+    getRenderer(lineId: string): T.RendererModel {
         return this.renderers[lineId];
     }
 
-    registerRenderer(lineId : string, renderer : T.RendererModel) {
+    registerRenderer(lineId: string, renderer: T.RendererModel) {
         this.renderers[lineId] = renderer;
         if (this.localPtyOffsetMap[lineId] == null) {
             this.localPtyOffsetMap[lineId] = 0;
         }
     }
 
-    checkUpdateScreenData() : void {
+    checkUpdateScreenData(): void {
         let fullScreen = this.fullScreen.get();
         if (fullScreen == null) {
             return;
@@ -543,7 +558,7 @@ class WebShareModelClass {
         this.loadFullScreenData(true);
     }
 
-    loadFullScreenData(update : boolean) : void {
+    loadFullScreenData(update: boolean): void {
         if (isBlank(this.screenId)) {
             this.setErrMessage("No ScreenId Specified, Cannot Load.");
             return;
@@ -558,7 +573,7 @@ class WebShareModelClass {
         }
         // console.log("running screen-data update");
         this.activeUpdateFetch = true;
-        let urlParams : Record<string, string> = {screenid: this.screenId, viewkey: this.viewKey};
+        let urlParams: Record<string, string> = { screenid: this.screenId, viewkey: this.viewKey };
         if (update) {
             let fullScreen = this.fullScreen.get();
             if (fullScreen != null) {
@@ -567,28 +582,31 @@ class WebShareModelClass {
         }
         let usp = new URLSearchParams(urlParams);
         let url = new URL(getBaseUrl() + "/webshare/screen?" + usp.toString());
-        fetch(url, {method: "GET", mode: "cors", cache: "no-cache"}).then((resp) => handleJsonFetchResponse(url, resp)).then((data) => {
-            let screen : T.WebFullScreen = data;
-            if (update) {
-                this.mergeUpdate(screen);
-            }
-            else {
-                this.setWebFullScreen(screen);
-            }
-            setTimeout(() => this.checkUpdateScreenData(), 300);
-        }).catch((err) => {
-            this.errMessage.set("Cannot get screen: " + err.message);
-        }).finally(() => {
-            this.activeUpdateFetch = false;
-        });
+        fetch(url, { method: "GET", mode: "cors", cache: "no-cache" })
+            .then((resp) => handleJsonFetchResponse(url, resp))
+            .then((data) => {
+                let screen: T.WebFullScreen = data;
+                if (update) {
+                    this.mergeUpdate(screen);
+                } else {
+                    this.setWebFullScreen(screen);
+                }
+                setTimeout(() => this.checkUpdateScreenData(), 300);
+            })
+            .catch((err) => {
+                this.errMessage.set("Cannot get screen: " + err.message);
+            })
+            .finally(() => {
+                this.activeUpdateFetch = false;
+            });
     }
 
-    getLineNumFromId(lineId : string) : number {
+    getLineNumFromId(lineId: string): number {
         let fullScreen = this.fullScreen.get();
         if (fullScreen == null) {
             return -1;
         }
-        for (let i=0; i<fullScreen.lines.length; i++) {
+        for (let i = 0; i < fullScreen.lines.length; i++) {
             let line = fullScreen.lines[i];
             if (line.lineid == lineId) {
                 return line.linenum;
@@ -597,12 +615,12 @@ class WebShareModelClass {
         return -1;
     }
 
-    getLineIndex(lineNum : number) : number {
+    getLineIndex(lineNum: number): number {
         let fullScreen = this.fullScreen.get();
         if (fullScreen == null) {
             return -1;
         }
-        for (let i=0; i<fullScreen.lines.length; i++) {
+        for (let i = 0; i < fullScreen.lines.length; i++) {
             let line = fullScreen.lines[i];
             if (line.linenum == lineNum) {
                 return i;
@@ -611,7 +629,7 @@ class WebShareModelClass {
         return -1;
     }
 
-    getNumLines() : number {
+    getNumLines(): number {
         let fullScreen = this.fullScreen.get();
         if (fullScreen == null) {
             return 0;
@@ -619,7 +637,7 @@ class WebShareModelClass {
         return fullScreen.lines.length;
     }
 
-    getCmdById(lineId : string) : T.WebCmd {
+    getCmdById(lineId: string): T.WebCmd {
         let fullScreen = this.fullScreen.get();
         if (fullScreen == null) {
             return null;
@@ -632,7 +650,7 @@ class WebShareModelClass {
         return null;
     }
 
-    docKeyDownHandler(e : any) : void {
+    docKeyDownHandler(e: any): void {
         if (isModKeyPress(e)) {
             return;
         }
@@ -645,17 +663,17 @@ class WebShareModelClass {
     }
 }
 
-function getTermPtyData(termContext : T.TermContextUnion) : Promise<T.PtyDataType> {
+function getTermPtyData(termContext: T.TermContextUnion): Promise<T.PtyDataType> {
     if ("remoteId" in termContext) {
         throw new Error("remote term ptydata is not supported in webshare");
     }
     return WebShareModel.checkFetchPtyData(termContext.lineId, true);
 }
 
-let WebShareModel : WebShareModelClass = null;
+let WebShareModel: WebShareModelClass = null;
 if ((window as any).WebShareModel == null) {
     WebShareModel = new WebShareModelClass();
     (window as any).WebShareModel = WebShareModel;
 }
 
-export {WebShareModel, getTermPtyData};
+export { WebShareModel, getTermPtyData };
diff --git a/src/webshare-ws.ts b/src/webshare-ws.ts
index af7508eb..09a11f00 100644
--- a/src/webshare-ws.ts
+++ b/src/webshare-ws.ts
@@ -1,50 +1,50 @@
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import {WebShareWSMessage} from "./types";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import { WebShareWSMessage } from "./types";
 import dayjs from "dayjs";
 
 class WebShareWSControl {
-    wsConn : any;
-    open : mobx.IObservableValue<boolean>;
-    opening : boolean = false;
-    reconnectTimes : number = 0;
-    msgQueue : any[] = [];
-    messageCallback : (any) => void = null;
-    screenId : string = null;
-    viewKey : string = null;
-    wsUrl : string;
-    closed : boolean;
-    
-    constructor(wsUrl : string, screenId : string, viewKey : string, messageCallback : (any) => void) {
+    wsConn: any;
+    open: mobx.IObservableValue<boolean>;
+    opening: boolean = false;
+    reconnectTimes: number = 0;
+    msgQueue: any[] = [];
+    messageCallback: (any) => void = null;
+    screenId: string = null;
+    viewKey: string = null;
+    wsUrl: string;
+    closed: boolean;
+
+    constructor(wsUrl: string, screenId: string, viewKey: string, messageCallback: (any) => void) {
         this.wsUrl = wsUrl;
         this.messageCallback = messageCallback;
         this.screenId = screenId;
         this.viewKey = viewKey;
-        this.open = mobx.observable.box(false, {name: "WSOpen"});
+        this.open = mobx.observable.box(false, { name: "WSOpen" });
         this.closed = true;
         setInterval(this.sendPing, 20000);
     }
 
-    close() : void {
+    close(): void {
         this.closed = true;
         if (this.wsConn != null) {
             this.wsConn.close();
         }
     }
 
-    log(str : string) {
+    log(str: string) {
         console.log("[wscontrol]", str);
     }
 
     @mobx.action
-    setOpen(val : boolean) {
+    setOpen(val: boolean) {
         mobx.action(() => {
             this.open.set(val);
         })();
     }
 
-    connectNow(desc : string) {
+    connectNow(desc: string) {
         this.closed = false;
         if (this.open.get()) {
             return;
@@ -59,7 +59,7 @@ class WebShareWSControl {
         // this.wsConn.onerror = this.onerror;
     }
 
-    reconnect(forceClose? : boolean) {
+    reconnect(forceClose?: boolean) {
         this.closed = false;
         if (this.open.get()) {
             if (forceClose) {
@@ -73,7 +73,7 @@ class WebShareWSControl {
             return;
         }
         let timeoutArr = [0, 0, 5, 5, 15, 30, 60, 300, 3600];
-        let timeout = timeoutArr[timeoutArr.length-1];
+        let timeout = timeoutArr[timeoutArr.length - 1];
         if (this.reconnectTimes < timeoutArr.length) {
             timeout = timeoutArr[this.reconnectTimes];
         }
@@ -82,16 +82,15 @@ class WebShareWSControl {
         }
         setTimeout(() => {
             this.connectNow(String(this.reconnectTimes));
-        }, timeout*1000);
+        }, timeout * 1000);
     }
 
     @boundMethod
-    onclose(event : any) {
+    onclose(event: any) {
         // console.log("close", event);
         if (event.wasClean) {
             this.log("connection closed");
-        }
-        else {
+        } else {
             this.log("connection error/disconnected");
         }
         if (this.open.get() || this.opening) {
@@ -128,7 +127,7 @@ class WebShareWSControl {
     }
 
     @boundMethod
-    onmessage(event : any) {
+    onmessage(event: any) {
         let eventData = null;
         if (event.data != null) {
             eventData = JSON.parse(event.data);
@@ -137,7 +136,7 @@ class WebShareWSControl {
             return;
         }
         if (eventData.type == "ping") {
-            this.wsConn.send(JSON.stringify({type: "pong", stime: Date.now()}));
+            this.wsConn.send(JSON.stringify({ type: "pong", stime: Date.now() }));
             return;
         }
         if (eventData.type == "pong") {
@@ -151,8 +150,7 @@ class WebShareWSControl {
         if (this.messageCallback) {
             try {
                 this.messageCallback(eventData);
-            }
-            catch (e) {
+            } catch (e) {
                 this.log("[error] messageCallback " + e);
             }
         }
@@ -163,17 +161,17 @@ class WebShareWSControl {
         if (!this.open.get()) {
             return;
         }
-        this.wsConn.send(JSON.stringify({type: "ping", stime: Date.now()}));
+        this.wsConn.send(JSON.stringify({ type: "ping", stime: Date.now() }));
     }
 
-    sendMessage(data : any) {
+    sendMessage(data: any) {
         if (!this.open.get()) {
             return;
         }
         this.wsConn.send(JSON.stringify(data));
     }
 
-    pushMessage(data : any) {
+    pushMessage(data: any) {
         if (!this.open.get()) {
             this.msgQueue.push(data);
             return;
@@ -182,9 +180,9 @@ class WebShareWSControl {
     }
 
     sendWebShareInit() {
-        let pk : WebShareWSMessage = {"type": "webshare", screenid: this.screenId, viewkey: this.viewKey};
+        let pk: WebShareWSMessage = { type: "webshare", screenid: this.screenId, viewkey: this.viewKey };
         this.pushMessage(pk);
     }
 }
 
-export {WebShareWSControl};
+export { WebShareWSControl };
diff --git a/src/webshare.less b/src/webshare.less
index eaa3baca..ed744f2b 100644
--- a/src/webshare.less
+++ b/src/webshare.less
@@ -1,7 +1,7 @@
 body.prompt-webshare #main {
     display: flex;
     flex-direction: column;
-    
+
     .logo-header {
         display: flex;
         flex-direction: row;
@@ -97,9 +97,9 @@ body.prompt-webshare #main {
             display: block;
         }
     }
-    
+
     color: white;
-    
+
     #app {
         color: white;
     }
diff --git a/src/webshare.ts b/src/webshare.ts
index fd757e4b..1d0a719a 100644
--- a/src/webshare.ts
+++ b/src/webshare.ts
@@ -1,10 +1,10 @@
 import * as mobx from "mobx";
 import * as React from "react";
-import {createRoot} from 'react-dom/client';
-import {sprintf} from "sprintf-js";
-import {WebShareMain} from "./webshare-elems";
-import {loadFonts} from "./util";
-import {WebShareModel} from "./webshare-model";
+import { createRoot } from "react-dom/client";
+import { sprintf } from "sprintf-js";
+import { WebShareMain } from "./webshare-elems";
+import { loadFonts } from "./util";
+import { WebShareModel } from "./webshare-model";
 import * as textmeasure from "./textmeasure";
 
 // @ts-ignore
@@ -23,8 +23,7 @@ document.addEventListener("DOMContentLoaded", () => {
     let isFontLoaded = document.fonts.check("12px 'JetBrains Mono'");
     if (isFontLoaded) {
         root.render(reactElem);
-    }
-    else {
+    } else {
         document.fonts.ready.then(() => {
             root.render(reactElem);
         });
diff --git a/src/ws.ts b/src/ws.ts
index 9097c8b1..7884b8df 100644
--- a/src/ws.ts
+++ b/src/ws.ts
@@ -1,50 +1,50 @@
 import * as mobx from "mobx";
-import {sprintf} from "sprintf-js";
-import {boundMethod} from "autobind-decorator";
-import {WatchScreenPacketType} from "./types";
+import { sprintf } from "sprintf-js";
+import { boundMethod } from "autobind-decorator";
+import { WatchScreenPacketType } from "./types";
 import dayjs from "dayjs";
 
 class WSControl {
-    wsConn : any;
-    open : mobx.IObservableValue<boolean>;
-    opening : boolean = false;
-    reconnectTimes : number = 0;
-    msgQueue : any[] = [];
-    clientId : string;
-    messageCallback : (any) => void = null;
-    watchSessionId : string = null;
-    watchScreenId : string = null;
-    wsLog : mobx.IObservableArray<string> = mobx.observable.array([], {name: "wsLog"})
-    authKey : string;
-    baseHostPort : string;
-    
-    constructor(baseHostPort : string, clientId : string, authKey : string, messageCallback : (any) => void) {
+    wsConn: any;
+    open: mobx.IObservableValue<boolean>;
+    opening: boolean = false;
+    reconnectTimes: number = 0;
+    msgQueue: any[] = [];
+    clientId: string;
+    messageCallback: (any) => void = null;
+    watchSessionId: string = null;
+    watchScreenId: string = null;
+    wsLog: mobx.IObservableArray<string> = mobx.observable.array([], { name: "wsLog" });
+    authKey: string;
+    baseHostPort: string;
+
+    constructor(baseHostPort: string, clientId: string, authKey: string, messageCallback: (any) => void) {
         this.baseHostPort = baseHostPort;
         this.messageCallback = messageCallback;
         this.clientId = clientId;
         this.authKey = authKey;
-        this.open = mobx.observable.box(false, {name: "WSOpen"});
+        this.open = mobx.observable.box(false, { name: "WSOpen" });
         setInterval(this.sendPing, 5000);
     }
 
-    log(str : string) {
+    log(str: string) {
         mobx.action(() => {
             let ts = dayjs().format("YYYY-MM-DD HH:mm:ss");
             this.wsLog.push("[" + ts + "] " + str);
             if (this.wsLog.length > 50) {
-                this.wsLog.splice(0, this.wsLog.length-50);
+                this.wsLog.splice(0, this.wsLog.length - 50);
             }
         })();
     }
 
     @mobx.action
-    setOpen(val : boolean) {
+    setOpen(val: boolean) {
         mobx.action(() => {
             this.open.set(val);
         })();
     }
 
-    connectNow(desc : string) {
+    connectNow(desc: string) {
         if (this.open.get()) {
             return;
         }
@@ -58,7 +58,7 @@ class WSControl {
         // this.wsConn.onerror = this.onerror;
     }
 
-    reconnect(forceClose? : boolean) {
+    reconnect(forceClose?: boolean) {
         if (this.open.get()) {
             if (forceClose) {
                 this.wsConn.close(); // this will force a reconnect
@@ -80,16 +80,15 @@ class WSControl {
         }
         setTimeout(() => {
             this.connectNow(String(this.reconnectTimes));
-        }, timeout*1000);
+        }, timeout * 1000);
     }
 
     @boundMethod
-    onclose(event : any) {
+    onclose(event: any) {
         // console.log("close", event);
         if (event.wasClean) {
             this.log("connection closed");
-        }
-        else {
+        } else {
             this.log("connection error/disconnected");
         }
         if (this.open.get() || this.opening) {
@@ -124,7 +123,7 @@ class WSControl {
     }
 
     @boundMethod
-    onmessage(event : any) {
+    onmessage(event: any) {
         let eventData = null;
         if (event.data != null) {
             eventData = JSON.parse(event.data);
@@ -133,7 +132,7 @@ class WSControl {
             return;
         }
         if (eventData.type == "ping") {
-            this.wsConn.send(JSON.stringify({type: "pong", stime: Date.now()}));
+            this.wsConn.send(JSON.stringify({ type: "pong", stime: Date.now() }));
             return;
         }
         if (eventData.type == "pong") {
@@ -147,8 +146,7 @@ class WSControl {
         if (this.messageCallback) {
             try {
                 this.messageCallback(eventData);
-            }
-            catch (e) {
+            } catch (e) {
                 console.log("[error] messageCallback", e);
             }
         }
@@ -159,17 +157,17 @@ class WSControl {
         if (!this.open.get()) {
             return;
         }
-        this.wsConn.send(JSON.stringify({type: "ping", stime: Date.now()}));
+        this.wsConn.send(JSON.stringify({ type: "ping", stime: Date.now() }));
     }
 
-    sendMessage(data : any) {
+    sendMessage(data: any) {
         if (!this.open.get()) {
             return;
         }
         this.wsConn.send(JSON.stringify(data));
     }
 
-    pushMessage(data : any) {
+    pushMessage(data: any) {
         if (!this.open.get()) {
             this.msgQueue.push(data);
             return;
@@ -177,8 +175,14 @@ class WSControl {
         this.sendMessage(data);
     }
 
-    sendWatchScreenPacket(connect : boolean) {
-        let pk : WatchScreenPacketType = {"type": "watchscreen", connect: connect, sessionid: null, screenid: null, authkey: this.authKey};
+    sendWatchScreenPacket(connect: boolean) {
+        let pk: WatchScreenPacketType = {
+            type: "watchscreen",
+            connect: connect,
+            sessionid: null,
+            screenid: null,
+            authkey: this.authKey,
+        };
         if (this.watchSessionId != null) {
             pk.sessionid = this.watchSessionId;
         }
@@ -189,11 +193,11 @@ class WSControl {
     }
 
     // these params can be null.  (null, null) means stop watching
-    watchScreen(sessionId : string, screenId : string) {
+    watchScreen(sessionId: string, screenId: string) {
         this.watchSessionId = sessionId;
         this.watchScreenId = screenId;
         this.sendWatchScreenPacket(false);
     }
 }
 
-export {WSControl};
+export { WSControl };
diff --git a/webpack.common.js b/webpack.common.js
index aff7f8c9..a2d563ff 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -1,5 +1,5 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
 const path = require("path");
 
 module.exports = {
@@ -23,18 +23,20 @@ module.exports = {
                             [
                                 "@babel/preset-env",
                                 {
-                                    targets: "defaults and not ie > 0 and not op_mini all and not op_mob > 0 and not kaios > 0 and not and_qq > 0 and not and_uc > 0 and not baidu > 0",
+                                    targets:
+                                        "defaults and not ie > 0 and not op_mini all and not op_mob > 0 and not kaios > 0 and not and_qq > 0 and not and_uc > 0 and not baidu > 0",
                                 },
                             ],
                             "@babel/preset-react",
-                            "@babel/preset-typescript"],
+                            "@babel/preset-typescript",
+                        ],
                         plugins: [
-                            ["@babel/transform-runtime", {"regenerator": true}],
+                            ["@babel/transform-runtime", { regenerator: true }],
                             "@babel/plugin-transform-react-jsx",
-                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
-                            ["@babel/plugin-proposal-class-properties", { "loose": true }],
-                            ["@babel/plugin-proposal-private-methods", { "loose": true }],
-                            ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+                            ["@babel/plugin-proposal-decorators", { legacy: true }],
+                            ["@babel/plugin-proposal-class-properties", { loose: true }],
+                            ["@babel/plugin-proposal-private-methods", { loose: true }],
+                            ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
                             "babel-plugin-jsx-control-statements",
                         ],
                     },
@@ -42,26 +44,19 @@ module.exports = {
             },
             {
                 test: /\.css$/,
-                use: [
-                    "style-loader",
-                    "css-loader",
-                ],
+                use: ["style-loader", "css-loader"],
             },
             {
                 test: /\.less$/,
-                use: [
-                    {loader: MiniCssExtractPlugin.loader},
-                    "css-loader",
-                    "less-loader"
-                ]
+                use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader", "less-loader"],
             },
-        ]
+        ],
     },
     plugins: [
-        new MiniCssExtractPlugin({filename: "[name].css", ignoreOrder: true}),
+        new MiniCssExtractPlugin({ filename: "[name].css", ignoreOrder: true }),
         new LodashModuleReplacementPlugin(),
     ],
     resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.mjs', '.cjs', '.wasm', '.json', '.less', '.css']
+        extensions: [".ts", ".tsx", ".js", ".mjs", ".cjs", ".wasm", ".json", ".less", ".css"],
     },
 };
diff --git a/webpack.dev.js b/webpack.dev.js
index 93a395de..56cd10f6 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -1,7 +1,7 @@
-const webpack = require('webpack');
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
-const path = require('path');
+const webpack = require("webpack");
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+const path = require("path");
 const CopyPlugin = require("copy-webpack-plugin");
 const VERSION = require("./version.js");
 
@@ -18,7 +18,7 @@ var merged = merge.merge(common, {
         },
         port: 9000,
         headers: {
-            'Cache-Control': 'no-store',
+            "Cache-Control": "no-store",
         },
     },
     watchOptions: {
@@ -34,4 +34,3 @@ var definePlugin = new webpack.DefinePlugin({
 merged.plugins.push(definePlugin);
 
 module.exports = merged;
-
diff --git a/webpack.electron.js b/webpack.electron.js
index 856b5f65..5c4c7033 100644
--- a/webpack.electron.js
+++ b/webpack.electron.js
@@ -9,10 +9,10 @@ module.exports = {
     target: "electron-main",
     output: {
         path: path.resolve(__dirname, "dist-dev"),
-        filename: "[name].js"
+        filename: "[name].js",
     },
     externals: {
-        "fs": "require('fs')",
+        fs: "require('fs')",
         "fs-ext": "require('fs-ext')",
     },
     module: {
@@ -27,31 +27,33 @@ module.exports = {
                             [
                                 "@babel/preset-env",
                                 {
-                                    targets: "defaults and not ie > 0 and not op_mini all and not op_mob > 0 and not kaios > 0 and not and_qq > 0 and not and_uc > 0 and not baidu > 0",
+                                    targets:
+                                        "defaults and not ie > 0 and not op_mini all and not op_mob > 0 and not kaios > 0 and not and_qq > 0 and not and_uc > 0 and not baidu > 0",
                                 },
                             ],
                             "@babel/preset-react",
-                            "@babel/preset-typescript"],
+                            "@babel/preset-typescript",
+                        ],
                         plugins: [
-                            ["@babel/transform-runtime", {"regenerator": true}],
+                            ["@babel/transform-runtime", { regenerator: true }],
                             "@babel/plugin-transform-react-jsx",
-                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
-                            ["@babel/plugin-proposal-class-properties", { "loose": true }],
-                            ["@babel/plugin-proposal-private-methods", { "loose": true }],
-                            ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+                            ["@babel/plugin-proposal-decorators", { legacy: true }],
+                            ["@babel/plugin-proposal-class-properties", { loose: true }],
+                            ["@babel/plugin-proposal-private-methods", { loose: true }],
+                            ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
                             "babel-plugin-jsx-control-statements",
                         ],
                     },
                 },
             },
-        ]
+        ],
     },
     plugins: [
         new CopyPlugin({
-            patterns: [{from: "src/preload.js", to: "preload.js"}],
+            patterns: [{ from: "src/preload.js", to: "preload.js" }],
         }),
     ],
     resolve: {
-        extensions: ['.ts', '.tsx', '.js']
+        extensions: [".ts", ".tsx", ".js"],
     },
-}
+};
diff --git a/webpack.electron.prod.js b/webpack.electron.prod.js
index 0f4f8a60..66ea4ab9 100644
--- a/webpack.electron.prod.js
+++ b/webpack.electron.prod.js
@@ -1,8 +1,8 @@
-const webpack = require('webpack');
-const merge = require('webpack-merge');
-const common = require('./webpack.electron.js');
+const webpack = require("webpack");
+const merge = require("webpack-merge");
+const common = require("./webpack.electron.js");
 const moment = require("dayjs");
-const VERSION = require('./version.js');
+const VERSION = require("./version.js");
 const path = require("path");
 
 function makeBuildStr() {
@@ -17,7 +17,7 @@ let merged = merge.merge(common, {
     mode: "production",
     output: {
         path: path.resolve(__dirname, "dist"),
-        filename: "[name].js"
+        filename: "[name].js",
     },
     devtool: "source-map",
     optimization: {
@@ -25,10 +25,12 @@ let merged = merge.merge(common, {
     },
 });
 
-merged.plugins.push(new webpack.DefinePlugin({
-    __PROMPT_DEV__: "false",
-    __PROMPT_VERSION__: JSON.stringify(VERSION),
-    __PROMPT_BUILD__: JSON.stringify(BUILD),
-}));
+merged.plugins.push(
+    new webpack.DefinePlugin({
+        __PROMPT_DEV__: "false",
+        __PROMPT_VERSION__: JSON.stringify(VERSION),
+        __PROMPT_BUILD__: JSON.stringify(BUILD),
+    })
+);
 
 module.exports = merged;
diff --git a/webpack.prod.js b/webpack.prod.js
index 7a500522..1eb63d3e 100644
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -1,6 +1,6 @@
-const webpack = require('webpack');
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
+const webpack = require("webpack");
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
 const moment = require("dayjs");
 const path = require("path");
 const VERSION = require("./version.js");
@@ -15,7 +15,7 @@ const BUILD = makeBuildStr();
 
 let BundleAnalyzerPlugin = null;
 if (process.env.WEBPACK_ANALYZE) {
-    BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+    BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 }
 
 let merged = merge.merge(common, {
@@ -33,13 +33,12 @@ let merged = merge.merge(common, {
 if (BundleAnalyzerPlugin != null) {
     merged.plugins.push(new BundleAnalyzerPlugin());
 }
-merged.plugins.push(new webpack.DefinePlugin({
-    __PROMPT_DEV__: "false",
-    __PROMPT_VERSION__: JSON.stringify(VERSION),
-    __PROMPT_BUILD__: JSON.stringify(BUILD),
-}));
+merged.plugins.push(
+    new webpack.DefinePlugin({
+        __PROMPT_DEV__: "false",
+        __PROMPT_VERSION__: JSON.stringify(VERSION),
+        __PROMPT_BUILD__: JSON.stringify(BUILD),
+    })
+);
 
 module.exports = merged;
-
-
-
diff --git a/webpack.share.dev.js b/webpack.share.dev.js
index 2666ccb2..ac7aa019 100644
--- a/webpack.share.dev.js
+++ b/webpack.share.dev.js
@@ -1,7 +1,7 @@
-const webpack = require('webpack');
-const merge = require('webpack-merge');
-const common = require('./webpack.share.js');
-const path = require('path');
+const webpack = require("webpack");
+const merge = require("webpack-merge");
+const common = require("./webpack.share.js");
+const path = require("path");
 const CopyPlugin = require("copy-webpack-plugin");
 const VERSION = require("./version.js");
 
@@ -18,10 +18,10 @@ var merged = merge.merge(common, {
         },
         port: 9001,
         headers: {
-            'Cache-Control': 'no-store',
+            "Cache-Control": "no-store",
         },
         devMiddleware: {
-            publicPath: '/dist-dev/'
+            publicPath: "/dist-dev/",
         },
         allowedHosts: "all",
         hot: false,
@@ -42,4 +42,3 @@ var definePlugin = new webpack.DefinePlugin({
 merged.plugins.push(definePlugin);
 
 module.exports = merged;
-
diff --git a/webpack.share.js b/webpack.share.js
index 2b231e07..289085db 100644
--- a/webpack.share.js
+++ b/webpack.share.js
@@ -1,5 +1,5 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
 const path = require("path");
 
 module.exports = {
@@ -23,18 +23,20 @@ module.exports = {
                             [
                                 "@babel/preset-env",
                                 {
-                                    targets: "defaults and not ie > 0 and not op_mini all and not op_mob > 0 and not kaios > 0 and not and_qq > 0 and not and_uc > 0 and not baidu > 0",
+                                    targets:
+                                        "defaults and not ie > 0 and not op_mini all and not op_mob > 0 and not kaios > 0 and not and_qq > 0 and not and_uc > 0 and not baidu > 0",
                                 },
                             ],
                             "@babel/preset-react",
-                            "@babel/preset-typescript"],
+                            "@babel/preset-typescript",
+                        ],
                         plugins: [
-                            ["@babel/transform-runtime", {"regenerator": true}],
+                            ["@babel/transform-runtime", { regenerator: true }],
                             "@babel/plugin-transform-react-jsx",
-                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
-                            ["@babel/plugin-proposal-class-properties", { "loose": true }],
-                            ["@babel/plugin-proposal-private-methods", { "loose": true }],
-                            ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+                            ["@babel/plugin-proposal-decorators", { legacy: true }],
+                            ["@babel/plugin-proposal-class-properties", { loose: true }],
+                            ["@babel/plugin-proposal-private-methods", { loose: true }],
+                            ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
                             "babel-plugin-jsx-control-statements",
                         ],
                     },
@@ -42,26 +44,19 @@ module.exports = {
             },
             {
                 test: /\.css$/,
-                use: [
-                    "style-loader",
-                    "css-loader",
-                ],
+                use: ["style-loader", "css-loader"],
             },
             {
                 test: /\.less$/,
-                use: [
-                    {loader: MiniCssExtractPlugin.loader},
-                    "css-loader",
-                    "less-loader"
-                ]
+                use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader", "less-loader"],
             },
-        ]
+        ],
     },
     plugins: [
-        new MiniCssExtractPlugin({filename: "[name].css", ignoreOrder: true}),
+        new MiniCssExtractPlugin({ filename: "[name].css", ignoreOrder: true }),
         new LodashModuleReplacementPlugin(),
     ],
     resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.mjs', '.cjs', '.wasm', '.json', '.less', '.css']
+        extensions: [".ts", ".tsx", ".js", ".mjs", ".cjs", ".wasm", ".json", ".less", ".css"],
     },
 };
diff --git a/webpack.share.prod.js b/webpack.share.prod.js
index 3427d833..62d03ee0 100644
--- a/webpack.share.prod.js
+++ b/webpack.share.prod.js
@@ -1,6 +1,6 @@
-const webpack = require('webpack');
-const merge = require('webpack-merge');
-const common = require('./webpack.share.js');
+const webpack = require("webpack");
+const merge = require("webpack-merge");
+const common = require("./webpack.share.js");
 const moment = require("dayjs");
 const path = require("path");
 const VERSION = require("./version.js");
@@ -25,12 +25,14 @@ let merged = merge.merge(common, {
     },
 });
 
-merged.plugins.push(new webpack.DefinePlugin({
-    __PROMPT_DEV__: "false",
-    __PROMPT_VERSION__: JSON.stringify(VERSION),
-    __PROMPT_BUILD__: JSON.stringify(BUILD),
-    __PROMPT_API_ENDPOINT__: JSON.stringify("https://share.getprompt.dev/api"),
-    __PROMPT_WSAPI_ENDPOINT__: JSON.stringify("wss://wsapi.getprompt.dev"),
-}));
+merged.plugins.push(
+    new webpack.DefinePlugin({
+        __PROMPT_DEV__: "false",
+        __PROMPT_VERSION__: JSON.stringify(VERSION),
+        __PROMPT_BUILD__: JSON.stringify(BUILD),
+        __PROMPT_API_ENDPOINT__: JSON.stringify("https://share.getprompt.dev/api"),
+        __PROMPT_WSAPI_ENDPOINT__: JSON.stringify("wss://wsapi.getprompt.dev"),
+    })
+);
 
 module.exports = merged;