save work attempting to swap textarea

* working on daystr funcs

* daystr custom function

package.json

@@ -23,6 +23,7 @@
         "@table-nav/react": "^0.0.7",
         "@tanstack/match-sorter-utils": "^8.8.4",
         "@tanstack/react-table": "^8.10.3",
+        "@withfig/autocomplete": "^2.652.3",
         "autobind-decorator": "^2.4.0",
         "base64-js": "^1.5.1",
         "classnames": "^2.3.1",
@@ -49,8 +50,10 @@
         "tsx-control-statements": "^5.1.1",
         "uuid": "^9.0.0",
         "winston": "^3.8.2",
-        "xterm": "^5.0.0",
-        "xterm-addon-web-links": "^0.9.0"
+        "xterm": "^5.3.0",
+        "xterm-addon-web-links": "^0.9.0",
+        "xterm-addon-serialize": "^0.11.0",
+        "xterm-addon-webgl": "^0.16.0"
     },
     "devDependencies": {
         "@babel/cli": "^7.17.10",
@@ -75,6 +78,7 @@
         "@types/throttle-debounce": "^5.0.1",
         "@types/uuid": "^9.0.7",
         "@types/webpack-env": "^1.18.3",
+        "@withfig/autocomplete-types": "^1.30.0",
         "babel-loader": "^9.1.3",
         "babel-plugin-jsx-control-statements": "^4.1.2",
         "copy-webpack-plugin": "^12.0.0",
@@ -103,4 +107,4 @@
     "scripts": {
         "postinstall": "electron-builder install-app-deps"
     }
-}
+}

public/themes/default.css

@@ -42,16 +42,19 @@
     --app-bg-color: black;
     --app-accent-color: rgb(88, 193, 66);
     --app-accent-bg-color: rgba(88, 193, 66, 0.25);
+    --app-accent-bg-darker-color: rgba(88, 193, 66, 0.5);
     --app-text-color: rgb(211, 215, 207);
     --app-text-primary-color: rgb(255, 255, 255);
     --app-text-secondary-color: rgb(195, 200, 194);
     --app-text-disabled-color: rgb(173, 173, 173);
+    --app-text-bg-color: rgb(23, 23, 23);
+    --app-text-bg-disabled-color: rgb(51, 51, 51);
     --app-border-color: rgb(51, 51, 51);
-    --app-maincontent-bg-color: #333;
+    --app-maincontent-bg-color: rgb(51, 51, 51);
     --app-panel-bg-color: rgba(21, 23, 21, 1);
     --app-panel-bg-color-dev: rgb(21, 23, 48);
     --app-icon-color: rgb(139, 145, 138);
-    --app-icon-hover-color: #fff;
+    --app-icon-hover-color: rgb(255, 255, 255);
     --app-selected-mask-color: rgba(255, 255, 255, 0.06);
 
     /* global status colors */
@@ -87,7 +90,7 @@
     --form-element-border-color: rgba(241, 246, 243, 0.15);
     --form-element-bg-color: var(--app-bg-color);
     --form-element-text-color: var(--app-text-primary-color);
-    --form-element-primary-text-color: var(--form-element-text-color);
+    --form-element-primary-text-color: var(--app-text-primary-color);
     --form-element-label-color: var(--app-text-secondary-color);
     --form-element-primary-color: var(--app-accent-color);
     --form-element-secondary-color: rgba(255, 255, 255, 0.2);
@@ -122,18 +125,18 @@
 
     /* line colors */
     --line-sidebar-message-color: rgb(196, 160, 0);
-    --line-background: rgba(21, 23, 21, 1);
-    --line-avatar-color: #eceeec;
+    --line-background: var(--app-panel-bg-color);
+    --line-avatar-color: rgb(236, 238, 236);
     --line-text-color: rgb(211, 215, 207);
     --line-svg-fill-color: rgb(150, 152, 150);
-    --line-svg-hover-fill-color: #eceeec;
+    --line-svg-hover-fill-color: rgb(236, 238, 236);
     --line-separator-color: rgb(126, 126, 126);
     --line-error-color: var(--app-error-color);
     --line-warning-color: var(--app-warning-color);
-    --line-base-soft-blue-color: #729fcf;
+    --line-base-soft-blue-color: rgb(114, 159, 207);
     --line-active-border-color: var(--app-accent-color);
     --line-selected-bg-color: rgba(255, 255, 255, 0.05);
-    --line-selected-border-left-color: #777777;
+    --line-selected-border-left-color: rgb(119, 119, 119);
     --line-selected-error-border-color: rgba(204, 0, 0, 0.8);
     --line-selected-error-bg-color: rgb(19, 4, 3);
     --line-error-bg-color: rgba(200, 0, 0, 0.1);
@@ -152,22 +155,21 @@
     /* table colors */
     --table-border-color: rgba(241, 246, 243, 0.15);
     --table-thead-border-top-color: rgba(250, 250, 250, 0.1);
-    --table-thead-bright-border-color: #ccc;
+    --table-thead-bright-border-color: rgb(204, 204, 204);
     --table-thead-bg-color: rgba(250, 250, 250, 0.02);
     --table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
     --table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
-    --table-tr-selected-bg-color: #222;
-    --table-tr-selected-hover-bg-color: #333;
+    --table-tr-selected-bg-color: rgb(34, 34, 34);
+    --table-tr-selected-hover-bg-color: var(--app-maincontent-bg-color);
 
     /* cmdinput colors */
-    --cmdinput-textarea-bg-color: #171717;
+    --cmdinput-bg-color: var(--app-text-bg-color);
     --cmdinput-text-error-color: var(--term-red);
     --cmdinput-history-item-error-color: var(--term-bright-red);
     --cmdinput-history-item-selected-error-color: var(--term-bright-red);
-    --cmdinput-button-bg-color: rgb(88, 193, 66);
-    --cmdinput-comment-button-bg-color: rgb(57, 113, 255);
-    --cmdinput-disabled-icon-color: rgb(76, 81, 75, 1);
-    --cmdinput-history-bg-color: rgb(21, 23, 21, 1);
+    --cmdinput-button-bg-color: var(--tab-green);
+    --cmdinput-disabled-bg-color: var(--app-text-bg-disabled-color);
+    --cmdinput-history-bg-color: var(--app-bg-color);
 
     /* screen view color */
     --screen-view-text-caption-color: rgb(139, 145, 138);

public/themes/light.css

@@ -5,20 +5,20 @@
 @import url("./term-light.css");
 
 :root {
-    --app-bg-color: #fefefe;
+    --app-bg-color: rgb(254, 254, 254);
     --app-accent-color: rgb(75, 166, 57);
     --app-accent-bg-color: rgba(75, 166, 57, 0.2);
-    --app-text-color: #000;
+    --app-text-color: rgb(0, 0, 0);
     --app-text-primary-color: rgb(0, 0, 0, 0.9);
     --app-text-secondary-color: rgb(0, 0, 0, 0.7);
     --app-border-color: rgb(139 145 138);
-    --app-panel-bg-color: #e0e0e0;
-    --app-panel-bg-color-dev: #e0e0e0;
-    --app-icon-color: rgb(80, 80, 80);
-    --app-icon-hover-color: rgb(100, 100, 100);
+    --app-panel-bg-color: rgb(224, 224, 224);
+    --app-panel-bg-color-dev: rgb(224, 224, 224);
+    --app-icon-color: rgb(110, 110, 110);
+    --app-icon-hover-color: rgb(80, 80, 80);
     --app-selected-mask-color: rgba(0, 0, 0, 0.06);
 
-    --input-bg-color: #eeeeee;
+    --input-bg-color: rgb(238, 238, 238);
 
     /* tab color */
     --tab-white: rgb(0, 0, 0, 0.6);
@@ -30,19 +30,19 @@
     --table-thead-bg-color: rgba(250, 250, 250, 0.15);
     --table-tr-border-bottom-color: rgba(0, 0, 0, 0.15);
     --table-tr-hover-bg-color: rgba(0, 0, 0, 0.15);
-    --table-tr-selected-bg-color: #dddddd;
-    --table-tr-selected-hover-bg-color: #cccccc;
+    --table-tr-selected-bg-color: rgb(221, 221, 221);
+    --table-tr-selected-hover-bg-color: rgb(204, 204, 204);
 
     /* form colors */
     --form-element-border-color: rgba(0, 0, 0, 0.3);
     --form-element-bg-color: var(--app-bg-color);
-    --form-element-text-color: var(--app-text-color);
-    --form-element-primary-text-color: var(--app-bg-color);
+    --form-element-text-color: var(--app-text-primary-color);
+    --form-element-primary-text-color: var(--app-text-primary-color);
     --form-element-label-color: rgba(0, 0, 0, 0.6);
     --form-element-secondary-color: rgba(0, 0, 0, 0.09);
     --form-element-icon-color: rgb(0, 0, 0, 0.6);
-    --form-element-disabled-text-color: #b7b7b7;
-    --form-element-placeholder-color: #b7b7b7;
+    --form-element-disabled-text-color: rgb(183, 183, 183);
+    --form-element-placeholder-color: rgb(183, 183, 183);
 
     --markdown-bg-color: rgb(0, 0, 0, 0.1);
 
@@ -50,8 +50,6 @@
     --modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);
 
     /* cmd input */
-    --cmdinput-textarea-bg-color: rgba(0, 0, 0, 0.1);
-    --cmdinput-textarea-border-color: var(--form-element-border-color);
 
     /* scroll colors */
     --scrollbar-background-color: var(--app-bg-color);
@@ -64,15 +62,15 @@
     --line-actions-inactive-color: rgba(0, 0, 0, 0.3);
     --line-actions-active-color: rgba(0, 0, 0, 1);
 
-    --logo-button-hover-bg-color: #f0f0f0;
+    --logo-button-hover-bg-color: rgb(240, 240, 240);
 
     --xterm-viewport-border-color: rgba(0, 0, 0, 0.3);
 
-    --datepicker-cell-hover-bg-color: #f0f0f0;
+    --datepicker-cell-hover-bg-color: rgb(240, 240, 240);
     --datepicker-cell-other-text-color: rgba(0, 0, 0, 0.3);
     --datepicker-header-fade-color: rgba(0, 0, 0, 0.4);
-    --datepicker-year-header-bg-color: #f5f5f5;
-    --datepicker-year-header-border-color: #dcdcdc;
+    --datepicker-year-header-bg-color: rgb(245, 245, 245);
+    --datepicker-year-header-border-color: rgb(220, 220, 220);
 
     /* toggle colors */
     --toggle-thumb-color: var(--app-bg-color);

src/app/appconst.ts

@@ -64,3 +64,7 @@ export enum StatusIndicatorLevel {
 
 // matches packet.go
 export const ErrorCode_InvalidCwd = "ERRCWD";
+
+export const InputAuxView_History = "history";
+export const InputAuxView_Info = "info";
+export const InputAuxView_AIChat = "aichat";

src/app/clientsettings/clientsettings.tsx

@@ -7,12 +7,13 @@ import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
 import { GlobalModel, GlobalCommandRunner, RemotesModel, getApi } from "@/models";
-import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
+import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown, Button } from "@/common/elements";
 import { commandRtnHandler, isBlank } from "@/util/util";
+import { getTermThemes } from "@/util/themeutil";
 import * as appconst from "@/app/appconst";
 
 import "./clientsettings.less";
-import { MainView } from "../common/elements/mainview";
+import { MainView } from "@/common/elements/mainview";
 
 class ClientSettingsKeybindings extends React.Component<{}, {}> {
     componentDidMount() {
@@ -73,6 +74,19 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         commandRtnHandler(prtn, this.errorMessage);
     }
 
+    @boundMethod
+    handleChangeTermTheme(theme: string): void {
+        // For global terminal theme, the key is global, otherwise it's either
+        // sessionId or screenId.
+        const currTheme = GlobalModel.getTermTheme()["global"];
+        if (currTheme == theme) {
+            return;
+        }
+
+        const prtn = GlobalCommandRunner.setGlobalTermTheme(theme, false);
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
     @boundMethod
     handleChangeTelemetry(val: boolean): void {
         let prtn: Promise<CommandRtnType> = null;
@@ -193,6 +207,8 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const curFontSize = GlobalModel.getTermFontSize();
         const curFontFamily = GlobalModel.getTermFontFamily();
         const curTheme = GlobalModel.getThemeSource();
+        const termThemes = getTermThemes(GlobalModel.termThemes, "Wave Default");
+        const currTermTheme = GlobalModel.getTermTheme()["global"] ?? termThemes[0].label;
 
         return (
             <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
@@ -233,6 +249,19 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                             />
                         </div>
                     </div>
+                    <If condition={termThemes.length > 0}>
+                        <div className="settings-field">
+                            <div className="settings-label">Terminal Theme</div>
+                            <div className="settings-input">
+                                <Dropdown
+                                    className="terminal-theme-dropdown"
+                                    options={termThemes}
+                                    defaultValue={currTermTheme}
+                                    onChange={this.handleChangeTermTheme}
+                                />
+                            </div>
+                        </div>
+                    </If>
                     <div className="settings-field">
                         <div className="settings-label">Client ID</div>
                         <div className="settings-input">{cdata.clientid}</div>

src/app/common/elements/button.less

@@ -27,6 +27,10 @@
         }
     }
 
+    &.primary.danger {
+        background: var(--app-error-color);
+    }
+
     &.primary.outlined {
         background: none;
         border: 1px solid var(--form-element-primary-color);
@@ -36,6 +40,37 @@
         }
     }
 
+    &.primary.greyoutlined {
+        background: none;
+        border: 1px solid var(--app-text-secondary-color);
+
+        i {
+            fill: var(--app-text-secondary-color);
+        }
+    }
+
+    &.primary.outlined,
+    &.primary.greyoutlined {
+        &.hover-danger:hover {
+            color: var(--form-element-primary-text-color);
+            border: 1px solid var(--app-error-color);
+            background: var(--app-error-color);
+        }
+    }
+
+    &.primary.outlined.danger {
+        background: none;
+        border: 1px solid var(--app-error-color);
+
+        i {
+            fill: var(--app-error-color);
+        }
+    }
+
+    &.greytext {
+        color: var(--app-text-secondary-color);
+    }
+
     &.primary.ghost {
         background: none;
         i {
@@ -43,6 +78,13 @@
         }
     }
 
+    &.primary.ghost.danger {
+        background: none;
+        i {
+            fill: var(--app-error-color);
+        }
+    }
+
     &.secondary {
         color: var(--form-element-text-color);
         background: var(--form-element-secondary-color);
@@ -56,6 +98,11 @@
         border: 1px solid var(--form-element-text-color);
     }
 
+    &.secondary.outlined.danger {
+        background: none;
+        border: 1px solid var(--app-error-color);
+    }
+
     &.secondary.ghost {
         background: none;
     }

src/app/common/elements/button.tsx

@@ -6,7 +6,7 @@ import "./button.less";
 
 interface ButtonProps {
     children: React.ReactNode;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     disabled?: boolean;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
@@ -14,6 +14,7 @@ interface ButtonProps {
     autoFocus?: boolean;
     className?: string;
     termInline?: boolean;
+    title?: string;
 }
 
 class Button extends React.Component<ButtonProps> {
@@ -23,14 +24,14 @@ class Button extends React.Component<ButtonProps> {
     };
 
     @boundMethod
-    handleClick() {
+    handleClick(e) {
         if (this.props.onClick && !this.props.disabled) {
-            this.props.onClick();
+            this.props.onClick(e);
         }
     }
 
     render() {
-        const { leftIcon, rightIcon, children, disabled, style, autoFocus, termInline, className } = this.props;
+        const { leftIcon, rightIcon, children, disabled, style, autoFocus, termInline, className, title } = this.props;
 
         return (
             <button
@@ -39,6 +40,7 @@ class Button extends React.Component<ButtonProps> {
                 disabled={disabled}
                 style={style}
                 autoFocus={autoFocus}
+                title={title}
             >
                 {leftIcon && <span className="icon-left">{leftIcon}</span>}
                 {children}

src/app/common/elements/copybutton.less

@@ -0,0 +1,7 @@
+.copy-button {
+    padding: 5px 5px;
+
+    .fa-check {
+        color: var(--app-success-color);
+    }
+}

src/app/common/elements/copybutton.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { Button } from "./button";
+import { boundMethod } from "autobind-decorator";
+import * as mobxReact from "mobx-react";
+import * as mobx from "mobx";
+
+import "./copybutton.less";
+
+type CopyButtonProps = {
+    title: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+@mobxReact.observer
+class CopyButton extends React.Component<CopyButtonProps, {}> {
+    isCopied: OV<boolean> = mobx.observable.box(false, { name: "isCopied" });
+
+    @boundMethod
+    handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {
+        if (this.isCopied.get()) {
+            return;
+        }
+        mobx.action(() => {
+            this.isCopied.set(true);
+        })();
+        setTimeout(() => {
+            mobx.action(() => {
+                this.isCopied.set(false);
+            })();
+        }, 2000);
+        if (this.props.onClick) {
+            this.props.onClick(e);
+        }
+    }
+
+    render() {
+        const { title, onClick } = this.props;
+        const isCopied = this.isCopied.get();
+        return (
+            <Button onClick={this.handleOnClick} className="copy-button secondary ghost" title={title}>
+                {isCopied ? (
+                    <i className="fa-sharp fa-solid fa-check"></i>
+                ) : (
+                    <i className="fa-sharp fa-solid fa-copy"></i>
+                )}
+            </Button>
+        );
+    }
+}
+
+export { CopyButton };

src/app/common/elements/dropdown.tsx

@@ -53,7 +53,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
         };
         this.wrapperRef = React.createRef();
         this.menuRef = React.createRef();
-        this.curUuid == uuidv4();
+        this.curUuid = uuidv4();
     }
 
     componentDidMount() {
@@ -100,6 +100,9 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
 
     @boundMethod
     handleClick() {
+        if (!this.state.isOpen || !this.state.isTouched) {
+            this.registerKeybindings();
+        }
         this.toggleDropdown();
     }
 
@@ -109,6 +112,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
         this.registerKeybindings();
     }
 
+    @boundMethod
     registerKeybindings() {
         let keybindManager = GlobalModel.keybindManager;
         let domain = "dropdown-" + this.curUuid;
@@ -122,6 +126,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
         });
         keybindManager.registerKeybinding("control", domain, "generic:cancel", (waveEvent) => {
             this.setState({ isOpen: false });
+            this.unregisterKeybindings();
             return true;
         });
         keybindManager.registerKeybinding("control", domain, "generic:selectAbove", (waveEvent) => {
@@ -165,10 +170,12 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
         }
     }
 
+    @boundMethod
     handleBlur() {
         this.unregisterKeybindings();
     }
 
+    @boundMethod
     unregisterKeybindings() {
         let domain = "dropdown-" + this.curUuid;
         GlobalModel.keybindManager.unregisterDomain(domain);
@@ -189,6 +196,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
         }
         onChange(value);
         this.setState({ isOpen: false, isTouched: true });
+        this.unregisterKeybindings();
     }
 
     @boundMethod

src/app/common/elements/index.tsx

@@ -18,3 +18,4 @@ export { Toggle } from "./toggle";
 export { Tooltip } from "./tooltip";
 export { TabIcon } from "./tabicon";
 export { DatePicker } from "./datepicker";
+export { CopyButton } from "./copybutton";

src/app/common/elements/markdown.tsx

@@ -7,8 +7,10 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import cn from "classnames";
 import { GlobalModel } from "@/models";
+import { v4 as uuidv4 } from "uuid";
 
 import "./markdown.less";
+import { boundMethod } from "autobind-decorator";
 
 function LinkRenderer(props: any): any {
     let newUrl = "https://extern?" + encodeURIComponent(props.href);
@@ -28,14 +30,17 @@ function CodeRenderer(props: any): any {
 }
 
 @mobxReact.observer
-class CodeBlockMarkdown extends React.Component<{ children: React.ReactNode; codeSelectSelectedIndex?: number }, {}> {
+class CodeBlockMarkdown extends React.Component<
+    { children: React.ReactNode; codeSelectSelectedIndex?: number; uuid: string },
+    {}
+> {
     blockIndex: number;
     blockRef: React.RefObject<HTMLPreElement>;
 
     constructor(props) {
         super(props);
         this.blockRef = React.createRef();
-        this.blockIndex = GlobalModel.inputModel.addCodeBlockToCodeSelect(this.blockRef);
+        this.blockIndex = GlobalModel.inputModel.addCodeBlockToCodeSelect(this.blockRef, this.props.uuid);
     }
 
     render() {
@@ -62,9 +67,21 @@ class Markdown extends React.Component<
     { text: string; style?: any; extraClassName?: string; codeSelect?: boolean },
     {}
 > {
-    CodeBlockRenderer(props: any, codeSelect: boolean, codeSelectIndex: number): any {
+    curUuid: string;
+
+    constructor(props) {
+        super(props);
+        this.curUuid = uuidv4();
+    }
+
+    @boundMethod
+    CodeBlockRenderer(props: any, codeSelect: boolean, codeSelectIndex: number, curUuid: string): any {
         if (codeSelect) {
-            return <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex}>{props.children}</CodeBlockMarkdown>;
+            return (
+                <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex} uuid={curUuid}>
+                    {props.children}
+                </CodeBlockMarkdown>
+            );
         } else {
             const clickHandler = (e: React.MouseEvent<HTMLElement>) => {
                 let blockText = (e.target as HTMLElement).innerText;
@@ -90,7 +107,7 @@ class Markdown extends React.Component<
             h5: (props) => HeaderRenderer(props, 5),
             h6: (props) => HeaderRenderer(props, 6),
             code: (props) => CodeRenderer(props),
-            pre: (props) => this.CodeBlockRenderer(props, codeSelect, curCodeSelectIndex),
+            pre: (props) => this.CodeBlockRenderer(props, codeSelect, curCodeSelectIndex, this.curUuid),
         };
         return (
             <div className={cn("markdown content", this.props.extraClassName)} style={this.props.style}>

src/app/common/modals/createremoteconn.tsx

@@ -312,7 +312,7 @@ class CreateRemoteConnModal extends React.Component<{}, {}> {
                                 endDecoration: (
                                     <InputDecoration>
                                         <Tooltip
-                                            message={`(Required) The path to your ssh key file.`}
+                                            message={`(Required) The path to your ssh private key file.`}
                                             icon={<i className="fa-sharp fa-regular fa-circle-question" />}
                                         >
                                             <i className="fa-sharp fa-regular fa-circle-question" />

src/app/common/modals/editremoteconn.tsx

@@ -338,7 +338,7 @@ class EditRemoteConnModal extends React.Component<{}, {}> {
                             endDecoration: (
                                 <InputDecoration>
                                     <Tooltip
-                                        message={`(Required) The path to your ssh key file.`}
+                                        message={`(Required) The path to your ssh private key file.`}
                                         icon={<i className="fa-sharp fa-regular fa-circle-question" />}
                                     >
                                         <i className="fa-sharp fa-regular fa-circle-question" />

src/app/common/modals/screensettings.tsx

@@ -11,8 +11,9 @@ import { GlobalModel, GlobalCommandRunner, Screen } from "@/models";
 import { SettingsError, Modal, Dropdown, Tooltip } from "@/elements";
 import * as util from "@/util/util";
 import { Button } from "@/elements";
-import { ReactComponent as GlobeIcon } from "@/assets/icons/globe.svg";
-import { ReactComponent as StatusCircleIcon } from "@/assets/icons/statuscircle.svg";
+import { If } from "tsx-control-statements/components";
+import { commandRtnHandler } from "@/util/util";
+import { getTermThemes } from "@/util/themeutil";
 import {
     TabColorSelector,
     TabIconSelector,
@@ -153,11 +154,34 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
         });
     }
 
+    @boundMethod
+    handleChangeTermTheme(theme: string): void {
+        const currTheme = GlobalModel.getTermTheme()[this.screenId];
+        if (currTheme == theme) {
+            return;
+        }
+        const prtn = GlobalCommandRunner.setScreenTermTheme(this.screenId, theme, false);
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
+    @boundMethod
+    selectRemote(cname: string): void {
+        let prtn = GlobalCommandRunner.screenSetRemote(cname, true, false);
+        util.commandRtnHandler(prtn, this.errorMessage);
+    }
+
     render() {
         const screen = this.screen;
         if (screen == null) {
             return null;
         }
+        let color: string = null;
+        let icon: string = null;
+        let index: number = 0;
+        const curRemote = GlobalModel.getRemote(GlobalModel.getActiveScreen().getCurRemoteInstance().remoteid);
+        const termThemes = getTermThemes(GlobalModel.termThemes);
+        const currTermTheme = GlobalModel.getTermTheme()[this.screenId] ?? termThemes[0].label;
+
         return (
             <Modal className="screen-settings-modal">
                 <Modal.Header onClose={this.closeModal} title={`Tab Settings (${screen.name.get()})`} />
@@ -186,6 +210,19 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                             <TabIconSelector screen={screen} errorMessage={this.errorMessage} />
                         </div>
                     </div>
+                    <If condition={termThemes.length > 0}>
+                        <div className="settings-field">
+                            <div className="settings-label">Terminal Theme</div>
+                            <div className="settings-input">
+                                <Dropdown
+                                    className="terminal-theme-dropdown"
+                                    options={termThemes}
+                                    defaultValue={currTermTheme}
+                                    onChange={this.handleChangeTermTheme}
+                                />
+                            </div>
+                        </div>
+                    </If>
                     <div className="settings-field">
                         <div className="settings-label actions-label">
                             <div>Actions</div>

src/app/common/modals/sessionsettings.tsx

@@ -6,8 +6,10 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { GlobalModel, GlobalCommandRunner, Session } from "@/models";
-import { Button } from "@/elements";
-import { Toggle, InlineSettingsTextEdit, SettingsError, Modal, Tooltip } from "@/elements";
+import { If } from "tsx-control-statements/components";
+import { Toggle, InlineSettingsTextEdit, SettingsError, Modal, Tooltip, Button, Dropdown } from "@/elements";
+import { commandRtnHandler } from "@/util/util";
+import { getTermThemes } from "@/util/themeutil";
 import * as util from "@/util/util";
 
 import "./sessionsettings.less";
@@ -76,6 +78,16 @@ class SessionSettingsModal extends React.Component<{}, {}> {
         });
     }
 
+    @boundMethod
+    handleChangeTermTheme(theme: string): void {
+        const currTheme = GlobalModel.getTermTheme()[this.sessionId];
+        if (currTheme == theme) {
+            return;
+        }
+        const prtn = GlobalCommandRunner.setSessionTermTheme(this.sessionId, theme, false);
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
     @boundMethod
     dismissError(): void {
         mobx.action(() => {
@@ -87,6 +99,9 @@ class SessionSettingsModal extends React.Component<{}, {}> {
         if (this.session == null) {
             return null;
         }
+        const termThemes = getTermThemes(GlobalModel.termThemes);
+        const currTermTheme = GlobalModel.getTermTheme()[this.sessionId] ?? termThemes[0].label;
+
         return (
             <Modal className="session-settings-modal">
                 <Modal.Header onClose={this.closeModal} title={`Workspace Settings (${this.session.name.get()})`} />
@@ -104,6 +119,19 @@ class SessionSettingsModal extends React.Component<{}, {}> {
                             />
                         </div>
                     </div>
+                    <If condition={termThemes.length > 0}>
+                        <div className="settings-field">
+                            <div className="settings-label">Terminal Theme</div>
+                            <div className="settings-input">
+                                <Dropdown
+                                    className="terminal-theme-dropdown"
+                                    options={termThemes}
+                                    defaultValue={currTermTheme}
+                                    onChange={this.handleChangeTermTheme}
+                                />
+                            </div>
+                        </div>
+                    </If>
                     <div className="settings-field">
                         <div className="settings-label">
                             <div>Archived</div>

src/app/history/history.less

@@ -357,6 +357,10 @@
                         cursor: pointer;
                     }
 
+                    .wave-button {
+                        padding: 5px 5px;
+                    }
+
                     visibility: hidden;
                 }
 

src/app/history/history.tsx

@@ -14,7 +14,7 @@ import localizedFormat from "dayjs/plugin/localizedFormat";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import { Line } from "@/app/line/linecomps";
 import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
-import { TextField, Dropdown, Button, DatePicker } from "@/elements";
+import { TextField, Dropdown, Button, CopyButton } from "@/elements";
 
 import { ReactComponent as ChevronLeftIcon } from "@/assets/icons/history/chevron-left.svg";
 import { ReactComponent as ChevronRightIcon } from "@/assets/icons/history/chevron-right.svg";
@@ -22,8 +22,6 @@ import { ReactComponent as RightIcon } from "@/assets/icons/history/right.svg";
 import { ReactComponent as SearchIcon } from "@/assets/icons/history/search.svg";
 import { ReactComponent as TrashIcon } from "@/assets/icons/trash.svg";
 import { ReactComponent as CheckedCheckbox } from "@/assets/icons/checked-checkbox.svg";
-import { ReactComponent as CheckIcon } from "@/assets/icons/line/check.svg";
-import { ReactComponent as CopyIcon } from "@/assets/icons/history/copy.svg";
 
 import "./history.less";
 import { MainView } from "../common/elements/mainview";
@@ -115,7 +113,6 @@ class HistoryCmdStr extends React.Component<
         cmdstr: string;
         onUse: () => void;
         onCopy: () => void;
-        isCopied: boolean;
         fontSize: "normal" | "large";
         limitHeight: boolean;
     },
@@ -138,24 +135,17 @@ class HistoryCmdStr extends React.Component<
     }
 
     render() {
-        const { isCopied, cmdstr, fontSize, limitHeight } = this.props;
+        const { cmdstr, fontSize, limitHeight } = this.props;
         return (
             <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="code" className="code-div">
                     <code>{cmdstr}</code>
                 </div>
                 <div key="copy" className="actions-block">
-                    <div className="action-item" onClick={this.handleCopy} title="copy">
-                        <CopyIcon className="icon" />
-                    </div>
-                    <div key="use" className="action-item" title="Use Command" onClick={this.handleUse}>
-                        <CheckIcon className="icon" />
-                    </div>
+                    <CopyButton onClick={this.handleCopy} title="Copy" />
+                    <Button className="secondary ghost" title="Use Command" onClick={this.handleUse}>
+                        <i className="fa-sharp fa-solid fa-play"></i>
+                    </Button>
                 </div>
             </div>
         );
@@ -190,7 +180,6 @@ class HistoryView extends React.Component<{}, {}> {
     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
     handleNext() {
@@ -308,7 +297,6 @@ class HistoryView extends React.Component<{}, {}> {
             hvm.setFromDate(null);
             return;
         }
-        console.log;
         hvm.setFromDate(newDate);
     }
 
@@ -378,14 +366,6 @@ class HistoryView extends React.Component<{}, {}> {
             return;
         }
         navigator.clipboard.writeText(item.cmdstr);
-        mobx.action(() => {
-            this.copiedItemId.set(item.historyid);
-        })();
-        setTimeout(() => {
-            mobx.action(() => {
-                this.copiedItemId.set(null);
-            })();
-        }, 600);
     }
 
     @boundMethod
@@ -395,7 +375,7 @@ class HistoryView extends React.Component<{}, {}> {
         }
         mobx.action(() => {
             GlobalModel.showSessionView();
-            GlobalModel.inputModel.setCurLine(item.cmdstr);
+            GlobalModel.inputModel.updateCmdLine({ str: item.cmdstr, pos: item.cmdstr.length });
             setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
         })();
     }
@@ -486,10 +466,10 @@ class HistoryView extends React.Component<{}, {}> {
                             options={this.getRemoteItems(rnames, remoteIds)}
                             onChange={this.clickLimitRemote}
                         />
-                        <div className="fromts">
+                        {/* <div className="fromts">
                             <div className="fromts-text">From:&nbsp;</div>
                             <DatePicker selectedDate={new Date()} onSelectDate={this.handleFromTsChange} />
-                        </div>
+                        </div> */}
                         <div
                             className="filter-cmds search-checkbox hoverEffect"
                             title="Filter common commands like 'ls' and 'cd' from the results"
@@ -570,7 +550,6 @@ class HistoryView extends React.Component<{}, {}> {
                                         cmdstr={item.cmdstr}
                                         onUse={() => this.handleUse(item)}
                                         onCopy={() => this.handleCopy(item)}
-                                        isCopied={this.copiedItemId.get() == item.historyid}
                                         fontSize="normal"
                                         limitHeight={true}
                                     />
@@ -670,6 +649,11 @@ class LineContainer extends React.Component<{ historyId: string; width: number }
         this.line = hvm.getLineById(this.historyItem.lineid);
     }
 
+    componentDidMount(): void {
+        GlobalModel.bumpTermRenderVersion();
+        GlobalModel.termThemeSrcEl.set(null);
+    }
+
     @boundMethod
     handleHeightChange(lineNum: number, newHeight: number, oldHeight: number): void {
         return;
@@ -710,8 +694,9 @@ class LineContainer extends React.Component<{ historyId: string; width: number }
             ssStr = sprintf("#%s[%s]", session.name.get(), screen.name.get());
             canViewInContext = true;
         }
+        const termRenderVersion = GlobalModel.termRenderVersion.get();
         return (
-            <div className="line-container">
+            <div className="line-container" key={termRenderVersion}>
                 <If condition={canViewInContext}>
                     <div className="line-context">
                         <div title="View in Context" className="vic-btn" onClick={this.viewInContext}>

src/app/line/line.less

@@ -106,11 +106,6 @@
         }
     }
 
-    &.top-border {
-        border-top: 1px solid #777;
-        padding: 10px;
-    }
-
     &:hover .meta .termopts {
         display: block;
     }

src/app/line/linecomps.tsx

@@ -8,7 +8,7 @@ import { sprintf } from "sprintf-js";
 import { boundMethod } from "autobind-decorator";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
-import { If } from "tsx-control-statements/components";
+import { Choose, If, Otherwise, When } from "tsx-control-statements/components";
 import { GlobalModel, GlobalCommandRunner, Cmd } from "@/models";
 import { termHeightFromRows } from "@/util/textmeasure";
 import cn from "classnames";
@@ -25,23 +25,22 @@ import * as lineutil from "./lineutil";
 import { ErrorBoundary } from "@/common/error/errorboundary";
 import * as appconst from "@/app/appconst";
 import * as util from "@/util/util";
-import * as textmeasure from "@/util/textmeasure";
 
 import "./line.less";
-import { CenteredIcon, RotateIcon } from "../common/icons/icons";
+import { RotateIcon } from "../common/icons/icons";
 
 const DebugHeightProblems = false;
 const MinLine = 0;
 const MaxLine = 1000;
-let heightLog = {};
+const heightLog = {};
 (window as any).heightLog = heightLog;
 (window as any).findHeightProblems = function () {
-    for (let linenum in heightLog) {
-        let lh = heightLog[linenum];
+    for (const linenum in heightLog) {
+        const lh = heightLog[linenum];
         if (lh.heightArr == null || lh.heightArr.length < 2) {
             continue;
         }
-        let firstHeight = lh.heightArr[0];
+        const firstHeight = lh.heightArr[0];
         for (let i = 1; i < lh.heightArr.length; i++) {
             if (lh.heightArr[i] != firstHeight) {
                 console.log("line", linenum, "heights", lh.heightArr);
@@ -57,7 +56,7 @@ function cmdShouldMarkError(cmd: Cmd): boolean {
     if (cmd.getStatus() == "error") {
         return true;
     }
-    let exitCode = cmd.getExitCode();
+    const exitCode = cmd.getExitCode();
     // 0, SIGINT, or SIGPIPE
     if (exitCode == 0 || exitCode == 130 || exitCode == 141) {
         return false;
@@ -142,7 +141,7 @@ class LineActions extends React.Component<{ screen: LineContainerType; line: Lin
     handleLineSettings(e: any): void {
         e.preventDefault();
         e.stopPropagation();
-        let { line } = this.props;
+        const { line } = this.props;
         if (line != null) {
             mobx.action(() => {
                 GlobalModel.lineSettingsModal.set(line.linenum);
@@ -152,74 +151,89 @@ class LineActions extends React.Component<{ screen: LineContainerType; line: Lin
     }
 
     render() {
-        let { line, screen } = this.props;
+        const { line, screen } = this.props;
         const isMinimized = line.linestate["wave:min"];
         const containerType = screen.getContainerType();
         return (
             <div className="line-actions">
-                <If condition={containerType == appconst.LineContainer_Main}>
-                    <div key="restart" title="Restart Command" className="line-icon" onClick={this.clickRestart}>
-                        <i className="fa-sharp fa-regular fa-arrows-rotate fa-fw" />
-                    </div>
-                    <div key="delete" title="Delete Line (&#x2318;D)" className="line-icon" onClick={this.clickDelete}>
-                        <i className="fa-sharp fa-regular fa-trash fa-fw" />
-                    </div>
-                    <div
-                        key="bookmark"
-                        title="Bookmark"
-                        className={cn("line-icon", "line-bookmark")}
-                        onClick={this.clickBookmark}
-                    >
-                        <i className="fa-sharp fa-regular fa-bookmark fa-fw" />
-                    </div>
-                    <div
-                        key="minimize"
-                        title={`${isMinimized ? "Show Output" : "Hide Output"}`}
-                        className={cn("line-icon", isMinimized ? "active" : "")}
-                        onClick={this.clickMinimize}
-                    >
-                        <If condition={isMinimized}>
-                            <i className="fa-sharp fa-regular fa-circle-plus fa-fw" />
-                        </If>
-                        <If condition={!isMinimized}>
-                            <i className="fa-sharp fa-regular fa-circle-minus fa-fw" />
-                        </If>
-                    </div>
-                    <div className="line-icon line-sidebar" onClick={this.clickMoveToSidebar} title="Move to Sidebar">
-                        <i className="fa-sharp fa-solid fa-right-to-line fa-fw" />
-                    </div>
-                    <div
-                        key="settings"
-                        title="Line Settings"
-                        className="line-icon line-icon-shrink-left"
-                        onClick={this.handleLineSettings}
-                    >
-                        <i className="fa-sharp fa-regular fa-ellipsis-vertical fa-fw" />
-                    </div>
-                </If>
-                <If condition={containerType == appconst.LineContainer_Sidebar}>
-                    <div key="restart" title="Restart Command" className="line-icon" onClick={this.clickRestart}>
-                        <i className="fa-sharp fa-regular fa-arrows-rotate fa-fw" />
-                    </div>
-                    <div key="delete" title="Delete Line (&#x2318;D)" className="line-icon" onClick={this.clickDelete}>
-                        <i className="fa-sharp fa-regular fa-trash fa-fw" />
-                    </div>
-                    <div
-                        key="bookmark"
-                        title="Bookmark"
-                        className={cn("line-icon", "line-bookmark")}
-                        onClick={this.clickBookmark}
-                    >
-                        <i className="fa-sharp fa-regular fa-bookmark fa-fw" />
-                    </div>
-                    <div
-                        className="line-icon line-sidebar"
-                        onClick={this.clickRemoveFromSidebar}
-                        title="Move to Sidebar"
-                    >
-                        <i className="fa-sharp fa-solid fa-left-to-line fa-fw" />
-                    </div>
-                </If>
+                <Choose>
+                    <When condition={containerType == appconst.LineContainer_Main}>
+                        <div key="restart" title="Restart Command" className="line-icon" onClick={this.clickRestart}>
+                            <i className="fa-sharp fa-regular fa-arrows-rotate fa-fw" />
+                        </div>
+                        <div
+                            key="delete"
+                            title="Delete Line (&#x2318;D)"
+                            className="line-icon"
+                            onClick={this.clickDelete}
+                        >
+                            <i className="fa-sharp fa-regular fa-trash fa-fw" />
+                        </div>
+                        <div
+                            key="bookmark"
+                            title="Bookmark"
+                            className={cn("line-icon", "line-bookmark")}
+                            onClick={this.clickBookmark}
+                        >
+                            <i className="fa-sharp fa-regular fa-bookmark fa-fw" />
+                        </div>
+                        <div
+                            key="minimize"
+                            title={`${isMinimized ? "Show Output" : "Hide Output"}`}
+                            className={cn("line-icon", isMinimized ? "active" : "")}
+                            onClick={this.clickMinimize}
+                        >
+                            <Choose>
+                                <When condition={isMinimized}>
+                                    <i className="fa-sharp fa-regular fa-circle-plus fa-fw" />
+                                </When>
+                                <Otherwise>
+                                    <i className="fa-sharp fa-regular fa-circle-minus fa-fw" />
+                                </Otherwise>
+                            </Choose>
+                        </div>
+                        <div
+                            className="line-icon line-sidebar"
+                            onClick={this.clickMoveToSidebar}
+                            title="Move to Sidebar"
+                        >
+                            <i className="fa-sharp fa-solid fa-right-to-line fa-fw" />
+                        </div>
+                        <div
+                            key="settings"
+                            title="Line Settings"
+                            className="line-icon line-icon-shrink-left"
+                            onClick={this.handleLineSettings}
+                        >
+                            <i className="fa-sharp fa-regular fa-ellipsis-vertical fa-fw" />
+                        </div>
+                    </When>
+                    <When condition={containerType == appconst.LineContainer_Sidebar}>
+                        <div
+                            key="delete"
+                            title="Delete Line (&#x2318;D)"
+                            className="line-icon"
+                            onClick={this.clickDelete}
+                        >
+                            <i className="fa-sharp fa-regular fa-trash fa-fw" />
+                        </div>
+                        <div
+                            key="bookmark"
+                            title="Bookmark"
+                            className={cn("line-icon", "line-bookmark")}
+                            onClick={this.clickBookmark}
+                        >
+                            <i className="fa-sharp fa-regular fa-bookmark fa-fw" />
+                        </div>
+                        <div
+                            className="line-icon line-sidebar"
+                            onClick={this.clickRemoveFromSidebar}
+                            title="Move to Sidebar"
+                        >
+                            <i className="fa-sharp fa-solid fa-left-to-line fa-fw" />
+                        </div>
+                    </When>
+                </Choose>
             </div>
         );
     }
@@ -254,9 +268,9 @@ class LineHeader extends React.Component<{ screen: LineContainerType; line: Line
     }
 
     renderMeta1(cmd: Cmd) {
-        let { line } = this.props;
+        const { line } = this.props;
         let formattedTime: string = "";
-        let restartTs = cmd.getRestartTs();
+        const restartTs = cmd.getRestartTs();
         let timeTitle: string = null;
         if (restartTs != null && restartTs > 0) {
             formattedTime = "restarted @ " + lineutil.getLineDateTimeStr(restartTs);
@@ -264,8 +278,8 @@ class LineHeader extends React.Component<{ screen: LineContainerType; line: Line
         } else {
             formattedTime = lineutil.getLineDateTimeStr(line.ts);
         }
-        let renderer = line.renderer;
-        let durationMs = cmd.getDurationMs();
+        const renderer = line.renderer;
+        const durationMs = cmd.getDurationMs();
         return (
             <div key="meta1" className="meta meta-line1">
                 <SmallLineAvatar line={line} cmd={cmd} />
@@ -287,7 +301,7 @@ class LineHeader extends React.Component<{ screen: LineContainerType; line: Line
     }
 
     render() {
-        let { line, cmd } = this.props;
+        const { line, cmd } = this.props;
         const hidePrompt = getIsHidePrompt(line);
         return (
             <div key="header" className={cn("line-header", { "hide-prompt": hidePrompt })}>
@@ -303,7 +317,7 @@ class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRigh
     render() {
         const { line, cmd } = this.props;
         const lineNumStr = (line.linenumtemp ? "~" : "#") + String(line.linenum);
-        let status = cmd != null ? cmd.getStatus() : "done";
+        const status = cmd != null ? cmd.getStatus() : "done";
         const exitcode = cmd != null ? cmd.getExitCode() : 0;
         const isComment = line.linetype == "text";
         let icon = null;
@@ -359,7 +373,7 @@ class RtnState extends React.Component<{ cmd: Cmd; line: LineType }> {
     }
 
     checkStateDiffLoad(): void {
-        let cmd = this.props.cmd;
+        const cmd = this.props.cmd;
         if (cmd == null || !cmd.getRtnState() || this.rtnStateDiffFetched) {
             return;
         }
@@ -406,7 +420,7 @@ class RtnState extends React.Component<{ cmd: Cmd; line: LineType }> {
     }
 
     render() {
-        let { cmd } = this.props;
+        const { cmd } = this.props;
         const rsdiff = this.rtnStateDiff.get();
         const termFontSize = GlobalModel.getTermFontSize();
         let rtnStateDiffSize = termFontSize - 2;
@@ -488,7 +502,7 @@ class LineCmd extends React.Component<
         if (elem != null) {
             curHeight = elem.offsetHeight;
         }
-        let linenum = line.linenum;
+        const linenum = line.linenum;
         if (DebugHeightProblems && linenum >= MinLine && linenum <= MaxLine) {
             heightLog[linenum] = heightLog[linenum] || {};
             heightLog[linenum].heightArr = heightLog[linenum].heightArr || [];
@@ -685,7 +699,7 @@ class LineCmd extends React.Component<
         const isFocused = mobx
             .computed(
                 () => {
-                    let screenFocusType = screen.getFocusType();
+                    const screenFocusType = screen.getFocusType();
                     return isPhysicalFocused && screenFocusType == "cmd";
                 },
                 { name: "computed-isFocused" }
@@ -694,7 +708,7 @@ class LineCmd extends React.Component<
         const shouldCmdFocus = mobx
             .computed(
                 () => {
-                    let screenFocusType = screen.getFocusType();
+                    const screenFocusType = screen.getFocusType();
                     return isSelected && screenFocusType == "cmd";
                 },
                 { name: "computed-shouldCmdFocus" }
@@ -725,16 +739,9 @@ class LineCmd extends React.Component<
             rendererPlugin = PluginModel.getRendererPluginByName(line.renderer);
         }
         const rendererType = lineutil.getRendererType(line);
-        const hidePrompt = rendererPlugin?.hidePrompt;
         const termFontSize = GlobalModel.getTermFontSize();
         const containerType = screen.getContainerType();
         const isMinimized = line.linestate["wave:min"] && containerType == appconst.LineContainer_Main;
-        const lhv: LineChromeHeightVars = {
-            numCmdLines: lineutil.countCmdLines(cmd.getCmdStr()),
-            zeroHeight: isMinimized,
-            hasLine2: !hidePrompt,
-        };
-        const chromeHeight = textmeasure.calcLineChromeHeight(GlobalModel.lineHeightEnv, lhv);
         return (
             <div
                 className={mainDivCn}
@@ -749,55 +756,64 @@ class LineCmd extends React.Component<
                 </If>
                 <LineActions screen={screen} line={line} cmd={cmd} />
                 <LineHeader screen={screen} line={line} cmd={cmd} />
-                <If condition={!isMinimized && isInSidebar}>
-                    <div className="sidebar-message" style={{ fontSize: termFontSize }}>
-                        &nbsp;&nbsp;showing in sidebar =&gt;
-                    </div>
-                </If>
-                <If condition={!isMinimized && !isInSidebar}>
-                    <ErrorBoundary plugin={rendererPlugin?.name} lineContext={lineutil.getRendererContext(line)}>
-                        <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()}
-                                scrollToBringIntoViewport={this.scrollToBringIntoViewport}
-                                isSelected={isSelected}
-                                shouldFocus={shouldCmdFocus}
-                            />
-                        </If>
-                        <If condition={rendererPlugin != null && rendererPlugin.rendererType == "full"}>
-                            <IncrementalRenderer
-                                rendererContainer={screen}
-                                lineId={line.lineid}
-                                plugin={rendererPlugin}
-                                onHeightChange={this.handleHeightChange}
-                                initParams={this.makeRendererModelInitializeParams()}
-                                isSelected={isSelected}
-                            />
-                        </If>
-                    </ErrorBoundary>
-                    <If condition={isRtnState}>
-                        <RtnState cmd={cmd} line={line} />
-                    </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 condition={!isMinimized}>
+                    <Choose>
+                        <When condition={isInSidebar}>
+                            <div className="sidebar-message" style={{ fontSize: termFontSize }}>
+                                &nbsp;&nbsp;showing in sidebar =&gt;
+                            </div>
+                        </When>
+                        <Otherwise>
+                            <ErrorBoundary
+                                plugin={rendererPlugin?.name}
+                                lineContext={lineutil.getRendererContext(line)}
+                            >
+                                <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()}
+                                        scrollToBringIntoViewport={this.scrollToBringIntoViewport}
+                                        isSelected={isSelected}
+                                        shouldFocus={shouldCmdFocus}
+                                    />
+                                </If>
+                                <If condition={rendererPlugin != null && rendererPlugin.rendererType == "full"}>
+                                    <IncrementalRenderer
+                                        rendererContainer={screen}
+                                        lineId={line.lineid}
+                                        plugin={rendererPlugin}
+                                        onHeightChange={this.handleHeightChange}
+                                        initParams={this.makeRendererModelInitializeParams()}
+                                        isSelected={isSelected}
+                                    />
+                                </If>
+                            </ErrorBoundary>
+                            <If condition={isRtnState}>
+                                <RtnState cmd={cmd} line={line} />
+                            </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>
+                        </Otherwise>
+                    </Choose>
                 </If>
             </div>
         );
@@ -877,11 +893,6 @@ class LineText extends React.Component<
                 name: "computed-isSelected",
             })
             .get();
-        const isFocused = mobx
-            .computed(() => screen.getFocusType() == "cmd", {
-                name: "computed-isFocused",
-            })
-            .get();
         const mainClass = cn("line", "line-text", "focus-parent", { selected: isSelected });
         return (
             <div