fix model type

* add command validation to shellapi.  mock out bash/zsh versions

* implement validate command fn bash and zsh

* test validate command

* change rtnstate commands to always end with a builtin, so we always get our exit trap to run

* simplify the rtnstate modification, don't add the 'wait' (as this is a different problem/feature)

* update schema

src/app/app.tsx

@@ -20,7 +20,7 @@ import { MainSideBar } from "./sidebar/main";
 import { RightSideBar } from "./sidebar/right";
 import { DisconnectedModal, ClientStopModal } from "@/modals";
 import { ModalsProvider } from "@/modals/provider";
-import { Button } from "@/elements";
+import { Button, TermStyleBlock } from "@/elements";
 import { ErrorBoundary } from "@/common/error/errorboundary";
 import cn from "classnames";
 import "./app.less";
@@ -124,9 +124,11 @@ class App extends React.Component<{}, {}> {
         const rightSidebarCollapsed = GlobalModel.rightSidebarModel.getCollapsed();
         const activeMainView = GlobalModel.activeMainView.get();
         const lightDarkClass = GlobalModel.isDarkTheme.get() ? "is-dark" : "is-light";
+        const termTheme = GlobalModel.getTermTheme();
+
         return (
             <div
-                key={"version-" + renderVersion}
+                key={`version- + ${renderVersion}`}
                 id="main"
                 className={cn(
                     "platform-" + platform,
@@ -151,6 +153,12 @@ class App extends React.Component<{}, {}> {
                     </div>
                 </If>
                 <div ref={this.mainContentRef} className="main-content">
+                    <TermStyleBlock
+                        scope="main"
+                        termTheme={termTheme}
+                        themeSrcEl={this.mainContentRef.current}
+                        themeKey="main"
+                    />
                     <MainSideBar parentRef={this.mainContentRef} />
                     <ErrorBoundary>
                         <PluginsView />

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

@@ -76,14 +76,14 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
     @boundMethod
     handleChangeTermTheme(theme: string): void {
-        // For global terminal theme, the key is global, otherwise it's either
+        // For main terminal theme, the key is main, otherwise it's either
         // sessionId or screenId.
-        const currTheme = GlobalModel.getTermTheme()["global"];
+        const currTheme = GlobalModel.getTermTheme()["main"];
         if (currTheme == theme) {
             return;
         }
 
-        const prtn = GlobalCommandRunner.setGlobalTermTheme(theme, false);
+        const prtn = GlobalCommandRunner.setMainTermTheme(theme, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
@@ -208,7 +208,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const curFontFamily = GlobalModel.getTermFontFamily();
         const curTheme = GlobalModel.getThemeSource();
         const termThemes = getTermThemes(GlobalModel.termThemes, "Wave Default");
-        const currTermTheme = GlobalModel.getTermTheme()["global"] ?? termThemes[0].label;
+        const currTermTheme = GlobalModel.getTermTheme()["main"] ?? termThemes[0].label;
 
         return (
             <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>

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.less

@@ -5,7 +5,7 @@
     width: 100%;
     border: 2px solid var(--form-element-border-color);
     border-radius: 6px;
-    line-height: 22px;
+    line-height: 20px;
     background: var(--form-element-bg-color);
 
     &.no-label {
@@ -63,11 +63,14 @@
         display: flex;
         min-width: 120px;
         padding: 5px 8px;
-        justify-content: space-between;
         align-items: center;
         align-self: stretch;
         border-radius: 6px;
 
+        i {
+            margin-right: 8px;
+        }
+
         &-highlighted,
         &:hover {
             background: rgba(241, 246, 243, 0.08);

src/app/common/elements/dropdown.tsx

@@ -163,7 +163,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
         if (isOpen) {
             const option = options[highlightedIndex];
             if (option) {
-                this.handleSelect(option.value, undefined);
+                this.handleSelect(option, undefined);
             }
         } else {
             this.toggleDropdown();
@@ -185,18 +185,19 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
     handleKeyDown(event: React.KeyboardEvent) {}
 
     @boundMethod
-    handleSelect(value: string, event?: React.MouseEvent | React.KeyboardEvent) {
+    handleSelect({ value, noop }: DropdownItem, event?: React.MouseEvent | React.KeyboardEvent) {
         const { onChange } = this.props;
         if (event) {
             event.stopPropagation(); // This stops the event from bubbling up to the wrapper
         }
 
-        if (!("value" in this.props)) {
-            this.setState({ internalValue: value });
-        }
         onChange(value);
         this.setState({ isOpen: false, isTouched: true });
         this.unregisterKeybindings();
+
+        if (!("value" in this.props) && !noop) {
+            this.setState({ internalValue: value });
+        }
     }
 
     @boundMethod
@@ -245,10 +246,11 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
                               className={cn("wave-dropdown-item unselectable", {
                                   "wave-dropdown-item-highlighted": index === highlightedIndex,
                               })}
-                              onClick={(e) => this.handleSelect(option.value, e)}
+                              onClick={(e) => this.handleSelect(option, e)}
                               onMouseEnter={() => this.setState({ highlightedIndex: index })}
                               onMouseLeave={() => this.setState({ highlightedIndex: -1 })}
                           >
+                              {option.icon && <span className="wave-dropdown-item-icon">{option.icon}</span>}
                               {option.label}
                           </div>
                       ))}

src/app/common/elements/index.tsx

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

src/app/common/elements/termstyleblock.tsx

@@ -0,0 +1,117 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import * as mobxReact from "mobx-react";
+import * as mobx from "mobx";
+import { GlobalModel } from "@/models";
+import { isBlank } from "@/util/util";
+
+const VALID_CSS_VARIABLES = [
+    "--term-black",
+    "--term-red",
+    "--term-green",
+    "--term-yellow",
+    "--term-blue",
+    "--term-magenta",
+    "--term-cyan",
+    "--term-white",
+    "--term-bright-black",
+    "--term-bright-red",
+    "--term-bright-green",
+    "--term-bright-yellow",
+    "--term-bright-blue",
+    "--term-bright-magenta",
+    "--term-bright-cyan",
+    "--term-bright-white",
+    "--term-gray",
+    "--term-cmdtext",
+    "--term-foreground",
+    "--term-background",
+    "--term-selection-background",
+    "--term-cursor-accent",
+];
+
+@mobxReact.observer
+class TermStyleBlock extends React.Component<
+    { scope: "main" | "session" | "screen"; themeSrcEl: HTMLElement; themeKey: string; termTheme: TermThemeType },
+    { styleRules: string }
+> {
+    styleRules: OV<string> = mobx.observable.box("", { name: "StyleBlock-styleRules" });
+    theme: string;
+
+    componentDidMount(): void {
+        this.loadThemeStyles();
+    }
+
+    componentDidUpdate(prevProps): void {
+        const { themeKey, termTheme } = this.props;
+        const currTheme = termTheme[themeKey];
+        if (themeKey !== prevProps.themeKey || currTheme !== this.theme) {
+            this.loadThemeStyles();
+        }
+    }
+
+    isValidCSSColor(color) {
+        const element = document.createElement("div");
+        element.style.color = color;
+        return element.style.color !== "";
+    }
+
+    isValidTermCSSVariable(key, value) {
+        const cssVarName = `--term-${key}`;
+        console.log("cssVarName", cssVarName, "value", value);
+        return VALID_CSS_VARIABLES.includes(cssVarName);
+    }
+
+    camelCaseToKebabCase(str) {
+        return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+
+    loadThemeStyles() {
+        const { themeKey, termTheme, scope } = this.props;
+        const currTheme = termTheme[themeKey];
+
+        if (currTheme && currTheme !== this.theme && currTheme) {
+            const rtn = GlobalModel.getTermThemeJson(currTheme);
+            rtn.then((termThemeJson) => {
+                if (termThemeJson && typeof termThemeJson === "object") {
+                    const styleProperties = Object.entries(termThemeJson)
+                        .filter(([key, value]) => {
+                            const cssVarName = `--term-${this.camelCaseToKebabCase(key)}`;
+                            return VALID_CSS_VARIABLES.includes(cssVarName) && this.isValidCSSColor(value);
+                        })
+                        .map(([key, value]) => `--term-${key}: ${value};`)
+                        .join(" ");
+
+                    mobx.action(() => {
+                        this.styleRules.set(`:root { ${styleProperties} }`);
+                        GlobalModel.termThemeSrcEls.set(scope, this.props.themeSrcEl);
+                    })();
+                    GlobalModel.bumpTermRenderVersion();
+                    this.theme = currTheme;
+                } else {
+                    console.error("termThemeJson is not an object:", termThemeJson);
+                }
+            }).catch((error) => {
+                console.error("error loading theme styles:", error);
+            });
+        } else {
+            mobx.action(() => {
+                this.styleRules.set("");
+                GlobalModel.termThemeSrcEls.set(scope, null);
+            })();
+            this.theme = currTheme;
+            GlobalModel.bumpTermRenderVersion();
+        }
+    }
+
+    render() {
+        if (isBlank(this.styleRules.get())) {
+            return null;
+        }
+        return <style>{this.styleRules.get()}</style>;
+    }
+}
+
+export { TermStyleBlock };

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/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() {
@@ -377,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
@@ -394,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);
         })();
     }
@@ -569,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}
                                     />
@@ -669,11 +649,6 @@ 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;

src/app/workspace/cmdinput/aichat.tsx

@@ -27,7 +27,7 @@ class AIChatKeybindings extends React.Component<{ AIChatObject: AIChat }, {}> {
             return true;
         });
         keybindManager.registerKeybinding("pane", "aichat", "generic:cancel", (waveEvent) => {
-            inputModel.closeAIAssistantChat(true);
+            inputModel.closeAuxView();
             return true;
         });
         keybindManager.registerKeybinding("pane", "aichat", "aichat:clearHistory", (waveEvent) => {
@@ -70,7 +70,7 @@ class AIChat extends React.Component<{}, {}> {
 
     componentDidMount() {
         const inputModel = GlobalModel.inputModel;
-        if (this.chatWindowScrollRef != null && this.chatWindowScrollRef.current != null) {
+        if (this.chatWindowScrollRef?.current != null) {
             this.chatWindowScrollRef.current.scrollTop = this.chatWindowScrollRef.current.scrollHeight;
         }
         if (this.textAreaRef.current != null) {
@@ -82,7 +82,7 @@ class AIChat extends React.Component<{}, {}> {
     }
 
     componentDidUpdate() {
-        if (this.chatWindowScrollRef != null && this.chatWindowScrollRef.current != null) {
+        if (this.chatWindowScrollRef?.current != null) {
             this.chatWindowScrollRef.current.scrollTop = this.chatWindowScrollRef.current.scrollHeight;
         }
     }
@@ -252,7 +252,7 @@ class AIChat extends React.Component<{}, {}> {
             <AuxiliaryCmdView
                 title="Wave AI"
                 className="cmd-aichat"
-                onClose={() => GlobalModel.inputModel.closeAIAssistantChat(true)}
+                onClose={() => GlobalModel.inputModel.closeAuxView()}
                 iconClass="fa-sharp fa-solid fa-sparkles"
             >
                 <If condition={renderKeybindings}>

src/app/workspace/cmdinput/cmdinput.less

@@ -4,12 +4,11 @@
     max-height: max(300px, 40%);
     display: flex;
     flex-direction: column;
-    position: absolute;
-    bottom: 0;
     width: 100%;
     z-index: 100;
     border-top: 2px solid var(--app-border-color);
     background-color: var(--app-bg-color);
+    position: relative;
 
     // Apply a border between the base cmdinput and any views shown above it
     // TODO: use a generic selector for this

src/app/workspace/cmdinput/cmdinput.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
-import { If } from "tsx-control-statements/components";
+import { Choose, If, When } from "tsx-control-statements/components";
 import cn from "classnames";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -18,6 +18,7 @@ import { Prompt } from "@/common/prompt/prompt";
 import { CenteredIcon, RotateIcon } from "@/common/icons/icons";
 import { AIChat } from "./aichat";
 import * as util from "@/util/util";
+import * as appconst from "@/app/appconst";
 
 import "./cmdinput.less";
 
@@ -61,7 +62,7 @@ class CmdInput extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    baseCmdInputClick(e: React.MouseEvent): void {
+    baseCmdInputClick(e: React.SyntheticEvent): void {
         if (this.promptRef.current != null) {
             if (this.promptRef.current.contains(e.target)) {
                 return;
@@ -71,7 +72,7 @@ class CmdInput extends React.Component<{}, {}> {
             e.stopPropagation();
             return;
         }
-        GlobalModel.inputModel.setHistoryFocus(false);
+        GlobalModel.inputModel.setAuxViewFocus(false);
         GlobalModel.inputModel.giveFocus();
     }
 
@@ -80,8 +81,8 @@ class CmdInput extends React.Component<{}, {}> {
         e.preventDefault();
         e.stopPropagation();
         const inputModel = GlobalModel.inputModel;
-        if (inputModel.aIChatShow.get()) {
-            inputModel.closeAIAssistantChat(true);
+        if (inputModel.getActiveAuxView() === appconst.InputAuxView_AIChat) {
+            inputModel.closeAuxView();
         } else {
             inputModel.openAIAssistantChat();
         }
@@ -93,7 +94,7 @@ class CmdInput extends React.Component<{}, {}> {
         e.stopPropagation();
 
         const inputModel = GlobalModel.inputModel;
-        if (inputModel.historyShow.get()) {
+        if (inputModel.getActiveAuxView() === appconst.InputAuxView_History) {
             inputModel.resetHistory();
         } else {
             inputModel.openHistory();
@@ -155,9 +156,6 @@ class CmdInput extends React.Component<{}, {}> {
             remote = GlobalModel.getRemote(rptr.remoteid);
         }
         feState = feState || {};
-        const infoShow = inputModel.infoShow.get();
-        const historyShow = !infoShow && inputModel.historyShow.get();
-        const aiChatShow = inputModel.aIChatShow.get();
         const focusVal = inputModel.physicalInputFocused.get();
         const inputMode: string = inputModel.inputMode.get();
         const textAreaInputKey = screen == null ? "null" : screen.screenId;
@@ -170,7 +168,7 @@ class CmdInput extends React.Component<{}, {}> {
         let shellInitMsg: string = null;
         let hidePrompt = false;
 
-        const openView = inputModel.getOpenView();
+        const openView = inputModel.getActiveAuxView();
         const hasOpenView = openView ? `has-${openView}` : null;
         if (ri == null) {
             let shellStr = "shell";
@@ -185,15 +183,19 @@ class CmdInput extends React.Component<{}, {}> {
         }
         return (
             <div ref={this.cmdInputRef} className={cn("cmd-input", hasOpenView, { active: focusVal })}>
-                <If condition={historyShow}>
-                    <div className="cmd-input-grow-spacer"></div>
-                    <HistoryInfo />
-                </If>
-                <If condition={aiChatShow}>
-                    <div className="cmd-input-grow-spacer"></div>
-                    <AIChat />
-                </If>
-                <InfoMsg key="infomsg" />
+                <Choose>
+                    <When condition={openView === appconst.InputAuxView_History}>
+                        <div className="cmd-input-grow-spacer"></div>
+                        <HistoryInfo />
+                    </When>
+                    <When condition={openView === appconst.InputAuxView_AIChat}>
+                        <div className="cmd-input-grow-spacer"></div>
+                        <AIChat />
+                    </When>
+                    <When condition={openView === appconst.InputAuxView_Info}>
+                        <InfoMsg key="infomsg" />
+                    </When>
+                </Choose>
                 <If condition={remote && remote.status != "connected"}>
                     <div className="remote-status-warning">
                         WARNING:&nbsp;
@@ -229,7 +231,12 @@ class CmdInput extends React.Component<{}, {}> {
                         </Button>
                     </div>
                 </If>
-                <div key="base-cmdinput" className="base-cmdinput" onClick={this.baseCmdInputClick}>
+                <div
+                    key="base-cmdinput"
+                    className="base-cmdinput"
+                    onClick={this.baseCmdInputClick}
+                    onSelect={this.baseCmdInputClick}
+                >
                     <div className="cmdinput-actions">
                         <If condition={numRunningLines > 0}>
                             <div

src/app/workspace/cmdinput/historyinfo.tsx

@@ -167,14 +167,14 @@ class HistoryInfo extends React.Component<{}, {}> {
 
     @boundMethod
     handleClose() {
-        GlobalModel.inputModel.toggleInfoMsg();
+        GlobalModel.inputModel.closeAuxView();
     }
 
     @boundMethod
     handleItemClick(hitem: HistoryItem) {
         const inputModel = GlobalModel.inputModel;
         const selItem = inputModel.getHistorySelectedItem();
-        inputModel.setHistoryFocus(true);
+        inputModel.setAuxViewFocus(false);
         if (this.lastClickHNum == hitem.historynum && selItem != null && selItem.historynum == hitem.historynum) {
             inputModel.grabSelectedHistoryItem();
             return;
@@ -194,14 +194,14 @@ class HistoryInfo extends React.Component<{}, {}> {
     @boundMethod
     handleClickType() {
         const inputModel = GlobalModel.inputModel;
-        inputModel.setHistoryFocus(true);
+        inputModel.setAuxViewFocus(true);
         inputModel.toggleHistoryType();
     }
 
     @boundMethod
     handleClickRemote() {
         const inputModel = GlobalModel.inputModel;
-        inputModel.setHistoryFocus(true);
+        inputModel.setAuxViewFocus(true);
         inputModel.toggleRemoteType();
     }
 

src/app/workspace/cmdinput/infomsg.tsx

@@ -45,7 +45,7 @@ class InfoMsg extends React.Component<{}, {}> {
     render() {
         const inputModel = GlobalModel.inputModel;
         const infoMsg: InfoType = inputModel.infoMsg.get();
-        const infoShow: boolean = inputModel.infoShow.get();
+        const infoShow = inputModel.getActiveAuxView() == appconst.InputAuxView_Info;
         let line: string = null;
         let istr: string = null;
         let idx: number = 0;

src/app/workspace/cmdinput/textareainput.tsx

@@ -152,11 +152,7 @@ class CmdInputKeybindings extends React.Component<{ inputObject: TextAreaInput }
         });
         keybindManager.registerKeybinding("pane", "cmdinput", "generic:cancel", (waveEvent) => {
             GlobalModel.closeTabSettings();
-            inputModel.toggleInfoMsg();
-            if (inputModel.inputMode.get() != null) {
-                inputModel.resetInputMode();
-            }
-            inputModel.closeAIAssistantChat(true);
+            inputModel.closeAuxView();
             return true;
         });
         keybindManager.registerKeybinding("pane", "cmdinput", "cmdinput:expandInput", (waveEvent) => {
@@ -253,9 +249,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
     controlRef: React.RefObject<HTMLDivElement> = React.createRef();
     lastHeight: number = 0;
     lastSP: StrWithPos = { str: "", pos: appconst.NoStrPos };
-    version: OV<number> = mobx.observable.box(0); // forces render updates
-    mainInputFocused: OV<boolean> = mobx.observable.box(true);
-    historyFocused: OV<boolean> = mobx.observable.box(false);
+    version: OV<number> = mobx.observable.box(0, { name: "textAreaInput-version" }); // forces render updates
 
     incVersion(): void {
         const v = this.version.get();
@@ -286,12 +280,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
     }
 
     setFocus(): void {
-        const inputModel = GlobalModel.inputModel;
-        if (inputModel.historyFocus.get()) {
-            this.historyInputRef.current.focus();
-        } else {
-            this.mainInputRef.current.focus();
-        }
+        GlobalModel.inputModel.giveFocus();
     }
 
     getTextAreaMaxCols(): number {
@@ -532,7 +521,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
             if (selStart > value.length || selEnd > value.length) {
                 return;
             }
-            const newValue = value.substr(0, selStart) + clipText + value.substr(selEnd);
+            const newValue = value.substring(0, selStart) + clipText + value.substring(selEnd);
             const cmdLineUpdate = { str: newValue, pos: selStart + clipText.length };
             GlobalModel.inputModel.updateCmdLine(cmdLineUpdate);
         });
@@ -549,19 +538,9 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
     }
 
     @boundMethod
-    handleMainFocus(e: any) {
-        const inputModel = GlobalModel.inputModel;
-        if (inputModel.historyFocus.get()) {
-            e.preventDefault();
-            if (this.historyInputRef.current != null) {
-                this.historyInputRef.current.focus();
-            }
-            return;
-        }
-        inputModel.setPhysicalInputFocused(true);
-        mobx.action(() => {
-            this.mainInputFocused.set(true);
-        })();
+    handleFocus(e: any) {
+        e.preventDefault();
+        GlobalModel.inputModel.giveFocus();
     }
 
     @boundMethod
@@ -570,25 +549,6 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
             return;
         }
         GlobalModel.inputModel.setPhysicalInputFocused(false);
-        mobx.action(() => {
-            this.mainInputFocused.set(false);
-        })();
-    }
-
-    @boundMethod
-    handleHistoryFocus(e: any) {
-        const inputModel = GlobalModel.inputModel;
-        if (!inputModel.historyFocus.get()) {
-            e.preventDefault();
-            if (this.mainInputRef.current != null) {
-                this.mainInputRef.current.focus();
-            }
-            return;
-        }
-        inputModel.setPhysicalInputFocused(true);
-        mobx.action(() => {
-            this.historyFocused.set(true);
-        })();
     }
 
     @boundMethod
@@ -597,9 +557,6 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
             return;
         }
         GlobalModel.inputModel.setPhysicalInputFocused(false);
-        mobx.action(() => {
-            this.historyFocused.set(false);
-        })();
     }
 
     render() {
@@ -617,9 +574,8 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
             displayLines = 5;
         }
 
-        // TODO: invert logic here. We should track focus on the main textarea and assume aux view is focused if not.
-        const disabled = inputModel.historyFocus.get();
-        if (disabled) {
+        const auxViewFocused = inputModel.getAuxViewFocus();
+        if (auxViewFocused) {
             displayLines = 1;
         }
         const activeScreen = GlobalModel.getActiveScreen();
@@ -635,7 +591,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
         const screen = GlobalModel.getActiveScreen();
         if (screen != null) {
             const ri = screen.getCurRemoteInstance();
-            if (ri != null && ri.shelltype != null) {
+            if (ri?.shelltype != null) {
                 shellType = ri.shelltype;
             }
             if (shellType == "") {
@@ -648,15 +604,14 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
                 }
             }
         }
-        const isMainInputFocused = this.mainInputFocused.get();
-        const isHistoryFocused = this.historyFocused.get();
+        const isHistoryFocused = auxViewFocused && inputModel.getActiveAuxView() == appconst.InputAuxView_History;
         return (
             <div
                 className="textareainput-div control is-expanded"
                 ref={this.controlRef}
                 style={{ height: computedOuterHeight }}
             >
-                <If condition={isMainInputFocused}>
+                <If condition={!auxViewFocused}>
                     <CmdInputKeybindings inputObject={this}></CmdInputKeybindings>
                 </If>
                 <If condition={isHistoryFocused}>
@@ -673,7 +628,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
                     autoComplete="off"
                     autoCorrect="off"
                     id="main-cmd-input"
-                    onFocus={this.handleMainFocus}
+                    onFocus={this.handleFocus}
                     onBlur={this.handleMainBlur}
                     style={{ height: computedInnerHeight, minHeight: computedInnerHeight, fontSize: termFontSize }}
                     value={curLine}
@@ -681,7 +636,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
                     onChange={this.onChange}
                     onSelect={this.onSelect}
                     placeholder="Type here..."
-                    className={cn("textarea", { "display-disabled": disabled })}
+                    className={cn("textarea", { "display-disabled": auxViewFocused })}
                 ></textarea>
                 <input
                     key="history"
@@ -691,7 +646,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
                     autoCorrect="off"
                     className="history-input"
                     type="text"
-                    onFocus={this.handleHistoryFocus}
+                    onFocus={this.handleFocus}
                     onBlur={this.handleHistoryBlur}
                     onKeyDown={this.onHistoryKeyDown}
                     onChange={this.handleHistoryInput}