fix model type

assets/default-keybindings.json

@@ -107,12 +107,12 @@
     {
       "command": "app:openConnectionsView", 
       "keys": [],
-      "commandStr": ["/mainview connections"]
+      "commandStr": "/mainview connections"
     },
     {
       "command": "app:openSettingsView", 
       "keys": [],
-      "commandStr": ["/mainview clientsettings"]
+      "commandStr": "/mainview clientsettings"
     },
     {
       "command": "app:newTab",
@@ -149,39 +149,48 @@
     },
     {
       "command": "app:selectTab-1",
-      "keys": ["Cmd:1"]
+      "keys": ["Cmd:1"],
+      "commandStr":"/screen 1"
     },
     {
       "command": "app:selectTab-2",
-      "keys": ["Cmd:2"]
+      "keys": ["Cmd:2"],
+      "commandStr":"/screen 2"
     },
     {
       "command": "app:selectTab-3",
-      "keys": ["Cmd:3"]
+      "keys": ["Cmd:3"],
+      "commandStr":"/screen 3"
     },
     {
       "command": "app:selectTab-4",
-      "keys": ["Cmd:4"]
+      "keys": ["Cmd:4"],
+      "commandStr":"/screen 4"
     },
     {
       "command": "app:selectTab-5",
-      "keys": ["Cmd:5"]
+      "keys": ["Cmd:5"],
+      "commandStr":"/screen 5"
     },
     {
       "command": "app:selectTab-6",
-      "keys": ["Cmd:6"]
+      "keys": ["Cmd:6"],
+      "commandStr":"/screen 6"
     },
     {
       "command": "app:selectTab-7",
-      "keys": ["Cmd:7"]
+      "keys": ["Cmd:7"],
+      "commandStr":"/screen 7"
     },
     {
       "command": "app:selectTab-8",
-      "keys": ["Cmd:8"]
+      "keys": ["Cmd:8"],
+      "commandStr":"/screen 8"
     },
     {
       "command": "app:selectTab-9",
-      "keys": ["Cmd:9"]
+      "keys": ["Cmd:9"],
+      "commandStr":"/screen 9"
     },
     {
       "command": "app:selectTabLeft",
@@ -193,39 +202,48 @@
     },
     {
       "command": "app:selectWorkspace-1",
-      "keys": ["Cmd:Ctrl:1"]
+      "keys": ["Cmd:Ctrl:1"],
+      "commandStr": "/session 1"
     },
     {
       "command": "app:selectWorkspace-2",
-      "keys": ["Cmd:Ctrl:2"]
+      "keys": ["Cmd:Ctrl:2"],
+      "commandStr": "/session 2"
     },
     {
       "command": "app:selectWorkspace-3",
-      "keys": ["Cmd:Ctrl:3"]
+      "keys": ["Cmd:Ctrl:3"],
+      "commandStr": "/session 3"
     },
     {
       "command": "app:selectWorkspace-4",
-      "keys": ["Cmd:Ctrl:4"]
+      "keys": ["Cmd:Ctrl:4"],
+      "commandStr": "/session 4"
     },
     {
       "command": "app:selectWorkspace-5",
-      "keys": ["Cmd:Ctrl:5"]
+      "keys": ["Cmd:Ctrl:5"],
+      "commandStr": "/session 5"
     },
     {
       "command": "app:selectWorkspace-6",
-      "keys": ["Cmd:Ctrl:6"]
+      "keys": ["Cmd:Ctrl:6"],
+      "commandStr": "/session 6"
     },
     {
       "command": "app:selectWorkspace-7",
-      "keys": ["Cmd:Ctrl:7"]
+      "keys": ["Cmd:Ctrl:7"],
+      "commandStr": "/session 7"
     },
     {
       "command": "app:selectWorkspace-8",
-      "keys": ["Cmd:Ctrl:8"]
+      "keys": ["Cmd:Ctrl:8"],
+      "commandStr": "/session 8"
     },
     {
       "command": "app:selectWorkspace-9",
-      "keys": ["Cmd:Ctrl:9"]
+      "keys": ["Cmd:Ctrl:9"],
+      "commandStr": "/session 9"
     },
     {
       "command": "app:toggleSidebar",
@@ -238,7 +256,7 @@
     {
       "command": "app:openBookmarksView",
       "keys": ["Cmd:b"],
-      "commandStr": ["/bookmarks:show"]
+      "commandStr": "/bookmarks:show"
     },
     {
       "command": "bookmarks:edit",
@@ -283,7 +301,7 @@
     {
       "command": "cmdinput:openHistory",
       "keys": ["Ctrl:r"],
-      "commandStr": ["/history"]
+      "commandStr": "/history"
     },
     {
       "command": "cmdinput:openAIChat",

package.json

@@ -18,13 +18,11 @@
         "appId": "dev.commandline.waveterm"
     },
     "dependencies": {
-        "@lexical/react": "^0.14.3",
         "@monaco-editor/react": "^4.5.1",
         "@table-nav/core": "^0.0.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",
@@ -33,7 +31,6 @@
         "electron-squirrel-startup": "^1.0.0",
         "electron-updater": "^6.1.8",
         "framer-motion": "^10.16.16",
-        "lexical": "^0.14.3",
         "mobx": "6.12",
         "mobx-react": "^7.5.0",
         "monaco-editor": "^0.44.0",
@@ -47,15 +44,14 @@
         "react-markdown": "^9.0.0",
         "remark": "^15.0.1",
         "remark-gfm": "^4.0.0",
-        "shell-quote": "^1.8.1",
         "sprintf-js": "^1.1.2",
         "throttle-debounce": "^5.0.0",
         "tsx-control-statements": "^5.1.1",
         "uuid": "^9.0.0",
         "winston": "^3.8.2",
         "xterm": "^5.3.0",
-        "xterm-addon-serialize": "^0.11.0",
         "xterm-addon-web-links": "^0.9.0",
+        "xterm-addon-serialize": "^0.11.0",
         "xterm-addon-webgl": "^0.16.0"
     },
     "devDependencies": {
@@ -70,7 +66,6 @@
         "@babel/preset-env": "^7.18.2",
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.17.12",
-        "@electron/rebuild": "^3.6.0",
         "@svgr/webpack": "^8.1.0",
         "@types/classnames": "^2.3.1",
         "@types/electron": "^1.6.10",
@@ -78,12 +73,10 @@
         "@types/papaparse": "^5.3.10",
         "@types/react": "^18.0.12",
         "@types/semver": "^7.5.6",
-        "@types/shell-quote": "^1.7.5",
         "@types/sprintf-js": "^1.1.3",
         "@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",
@@ -112,4 +105,4 @@
     "scripts": {
         "postinstall": "electron-builder install-app-deps"
     }
-}
+}

public/themes/light.css

@@ -9,8 +9,8 @@
     --app-accent-color: rgb(75, 166, 57);
     --app-accent-bg-color: rgba(75, 166, 57, 0.2);
     --app-text-color: rgb(0, 0, 0);
-    --app-text-primary-color: rgb(23, 23, 23);
-    --app-text-secondary-color: rgb(76, 76, 76);
+    --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: rgb(224, 224, 224);
     --app-panel-bg-color-dev: rgb(224, 224, 224);

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,
@@ -146,11 +148,17 @@ class App extends React.Component<{}, {}> {
                 <If condition={GlobalModel.isDev && rightSidebarCollapsed && activeMainView == "session"}>
                     <div className="right-sidebar-triggers">
                         <Button className="secondary ghost right-sidebar-trigger" onClick={this.openRightSidebar}>
-                            <i className="fa-sharp fa-solid fa-sidebar-flip"></i>
+                            <i className="fa-sharp fa-regular fa-lightbulb"></i>
                         </Button>
                     </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

@@ -68,4 +68,3 @@ export const ErrorCode_InvalidCwd = "ERRCWD";
 export const InputAuxView_History = "history";
 export const InputAuxView_Info = "info";
 export const InputAuxView_AIChat = "aichat";
-export const InputAuxView_Suggestions = "suggestions";

src/app/clientsettings/clientsettings.tsx

@@ -6,14 +6,14 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
-import { GlobalModel, GlobalCommandRunner, RemotesModel } from "@/models";
+import { GlobalModel, GlobalCommandRunner, RemotesModel, getApi } from "@/models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
 import { commandRtnHandler, isBlank } from "@/util/util";
 import { getTermThemes } from "@/util/themeutil";
 import * as appconst from "@/app/appconst";
-import { MainView } from "@/common/elements/mainview";
 
 import "./clientsettings.less";
+import { MainView } from "../common/elements/mainview";
 
 class ClientSettingsKeybindings extends React.Component<{}, {}> {
     componentDidMount() {
@@ -70,20 +70,20 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
             return;
         }
         const prtn = GlobalCommandRunner.setTheme(themeSource, false);
-        GlobalModel.getElectronApi().setNativeThemeSource(themeSource);
+        getApi().setNativeThemeSource(themeSource);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @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);
     }
 
@@ -107,20 +107,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
             prtn = GlobalCommandRunner.releaseCheckAutoOff(false);
         }
         commandRtnHandler(prtn, this.errorMessage);
-        GlobalModel.getElectronApi().changeAutoUpdate(val);
-    }
-
-    @boundMethod
-    handleChangeAutocompleteEnabled(val: boolean): void {
-        const prtn: Promise<CommandRtnType> = GlobalCommandRunner.setAutocompleteEnabled(val);
-        commandRtnHandler(prtn, this.errorMessage);
-    }
-
-    @boundMethod
-    handleChangeAutocompleteDebuggingEnabled(val: boolean): void {
-        mobx.action(() => {
-            GlobalModel.autocompleteModel.loggingEnabled = val;
-        })();
+        getApi().changeAutoUpdate(val);
     }
 
     getFontSizes(): DropdownItem[] {
@@ -221,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}>
@@ -367,24 +354,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                             />
                         </div>
                     </div>
-                    <div className="settings-field">
-                        <div className="settings-label">Command Autocomplete</div>
-                        <div className="settings-input">
-                            <Toggle
-                                checked={cdata.clientopts.autocompleteenabled ?? false}
-                                onChange={this.handleChangeAutocompleteEnabled}
-                            />
-                        </div>
-                    </div>
-                    <div className="settings-field">
-                        <div className="settings-label">Command Autocomplete Debugging</div>
-                        <div className="settings-input">
-                            <Toggle
-                                checked={GlobalModel.autocompleteModel.loggingEnabled}
-                                onChange={this.handleChangeAutocompleteDebuggingEnabled}
-                            />
-                        </div>
-                    </div>
                     <SettingsError errorMessage={this.errorMessage} />
                 </div>
             </MainView>

src/app/common/elements/index.tsx

@@ -18,4 +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/inlinesettingstextedit.tsx

@@ -131,7 +131,7 @@ class InlineSettingsTextEdit extends React.Component<
                         </div>
                         <div className="control">
                             <div
-                                onMouseDown={this.cancelChange}
+                                onClick={this.cancelChange}
                                 title="Cancel (Esc)"
                                 className="button is-prompt-danger is-outlined is-small"
                             >
@@ -142,7 +142,7 @@ class InlineSettingsTextEdit extends React.Component<
                         </div>
                         <div className="control">
                             <div
-                                onMouseDown={this.confirmChange}
+                                onClick={this.confirmChange}
                                 title="Confirm (Enter)"
                                 className="button is-wave-green is-outlined is-small"
                             >

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/about.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 { GlobalModel } from "@/models";
+import { GlobalModel, getApi } from "@/models";
 import { Modal, LinkButton } from "@/elements";
 import * as util from "@/util/util";
 import * as appconst from "@/app/appconst";
@@ -26,7 +26,7 @@ class AboutModal extends React.Component<{}, {}> {
 
     @boundMethod
     updateApp(): void {
-        GlobalModel.getElectronApi().installAppUpdate();
+        getApi().installAppUpdate();
     }
 
     @boundMethod

src/app/common/prompt/prompt.less

@@ -58,8 +58,4 @@
     .term-prompt-python {
         color: var(--term-magenta);
     }
-
-    .term-prompt-k8s {
-        color: var(--term-magenta);
-    }
 }

src/app/common/prompt/prompt.tsx

@@ -146,7 +146,6 @@ class Prompt extends React.Component<
         let branchElem = null;
         let pythonElem = null;
         let condaElem = null;
-        let k8sElem = null;
         if (!isBlank(festate["PROMPTVAR_GITBRANCH"])) {
             const branchName = festate["PROMPTVAR_GITBRANCH"];
             branchElem = (
@@ -172,19 +171,9 @@ class Prompt extends React.Component<
                 </span>
             );
         }
-        if (!isBlank(festate["K8SCONTEXT"])) {
-            const k8sContext = festate["K8SCONTEXT"];
-            const k8sNs = festate["K8SNAMESPACE"];
-            k8sElem = (
-                <span title="k8s context:namespace" className="term-prompt-k8s">
-                    k8s:({k8sContext}
-                    {isBlank(k8sNs) ? "" : ":" + k8sNs}){" "}
-                </span>
-            );
-        }
         return (
             <span className={termClassNames}>
-                {remoteElem} {cwdElem} {branchElem} {condaElem} {pythonElem} {k8sElem}
+                {remoteElem} {cwdElem} {branchElem} {condaElem} {pythonElem}
             </span>
         );
     }

src/app/history/history.tsx

@@ -649,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/line/linecomps.tsx

@@ -665,83 +665,6 @@ class LineCmd extends React.Component<
         };
     };
 
-    @boundMethod
-    handleContextMenu(e: React.MouseEvent) {
-        e.preventDefault();
-        e.stopPropagation();
-        let { line, screen } = this.props;
-        const containerType = screen.getContainerType();
-        const isMainContainer = containerType == appconst.LineContainer_Main;
-        const cmd = screen.getCmd(line);
-        let menu: ContextMenuItem[] = [
-            { role: "copy", label: "Copy", type: "normal" },
-            { role: "paste", label: "Paste", type: "normal" },
-            { type: "separator" },
-            { label: "Copy Command", click: () => this.copyCommandStr() },
-        ];
-        const isTerminal = isBlank(line.renderer) || line.renderer == "terminal";
-        if (isTerminal) {
-            menu.push({ label: "Copy Visible Output", click: () => this.copyOutput(false) });
-            menu.push({ label: "Copy Full Output", click: () => this.copyOutput(true) });
-        }
-        if (isMainContainer) {
-            menu.push({ type: "separator" });
-            const isMinimized = line.linestate["wave:min"];
-            if (isMinimized) {
-                menu.push({
-                    label: "Show Block Output",
-                    click: () => GlobalCommandRunner.lineMinimize(line.lineid, false, true),
-                });
-            } else {
-                menu.push({
-                    label: "Hide Block Output",
-                    click: () => GlobalCommandRunner.lineMinimize(line.lineid, true, true),
-                });
-            }
-            if (cmd?.isRunning()) {
-                menu.push({ type: "separator" });
-                menu.push({
-                    label: "Send Signal",
-                    type: "submenu",
-                    submenu: [
-                        { label: "SIGINT", click: () => GlobalCommandRunner.lineSignal(line.lineid, "SIGINT", true) },
-                        { label: "SIGTERM", click: () => GlobalCommandRunner.lineSignal(line.lineid, "SIGTERM", true) },
-                        { label: "SIGKILL", click: () => GlobalCommandRunner.lineSignal(line.lineid, "SIGKILL", true) },
-                        { type: "separator" },
-                        { label: "SIGUSR1", click: () => GlobalCommandRunner.lineSignal(line.lineid, "SIGUSR1", true) },
-                        { label: "SIGUSR2", click: () => GlobalCommandRunner.lineSignal(line.lineid, "SIGUSR2", true) },
-                    ],
-                });
-            }
-
-            menu.push({ type: "separator" });
-            menu.push({ label: "Restart Line", click: () => GlobalCommandRunner.lineRestart(line.lineid, true) });
-            menu.push({ type: "separator" });
-            menu.push({ label: "Delete Block", click: () => GlobalCommandRunner.lineDelete(line.lineid, true) });
-        }
-        GlobalModel.contextMenuModel.showContextMenu(menu, { x: e.clientX, y: e.clientY });
-    }
-
-    copyCommandStr() {
-        const { line, screen } = this.props;
-        const cmd: Cmd = screen.getCmd(line);
-        if (cmd != null) {
-            navigator.clipboard.writeText(cmd.getCmdStr());
-        }
-    }
-
-    copyOutput(fullOutput: boolean) {
-        const { line, screen } = this.props;
-        let termWrap = screen.getTermWrap(line.lineid);
-        if (termWrap == null) {
-            return;
-        }
-        let outputStr = termWrap.getOutput(fullOutput);
-        if (fullOutput != null) {
-            navigator.clipboard.writeText(outputStr);
-        }
-    }
-
     render() {
         const { screen, line, width, staticRender, visible } = this.props;
         const isVisible = visible.get();
@@ -827,7 +750,6 @@ class LineCmd extends React.Component<
                 data-lineid={line.lineid}
                 data-linenum={line.linenum}
                 data-screenid={line.screenid}
-                onContextMenu={this.handleContextMenu}
             >
                 <If condition={isSelected || cmdError}>
                     <div key="mask" className={cn("line-mask", { "error-mask": cmdError })}></div>

src/app/sidebar/right.less

@@ -22,23 +22,6 @@
         border-bottom: 1px solid var(--app-border-color);
     }
 
-    .rsb-modes {
-        display: flex;
-        flex-direction: row;
-        padding: 5px 10px;
-        gap: 5px;
-        border-bottom: 1px solid var(--app-border-color);
-
-        .icon-container {
-            padding: 2px;
-            cursor: pointer;
-        }
-
-        .icon-container:hover {
-            background-color: var(--app-selected-mask-color);
-        }
-    }
-
     &.collapsed {
         display: none;
     }

src/app/sidebar/right.tsx

@@ -1,16 +1,14 @@
-// Copyright 2023-2024, Command Line Inc.
+// 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 dayjs from "dayjs";
 import { If, For } from "tsx-control-statements/components";
 
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import { GlobalModel } from "@/models";
 import { ResizableSidebar, Button } from "@/elements";
-import { WaveBookDisplay } from "./wavebook";
 
 import "./right.less";
 
@@ -57,14 +55,6 @@ class KeybindDevPane extends React.Component<{}, {}> {
 
 @mobxReact.observer
 class RightSideBar extends React.Component<RightSideBarProps, {}> {
-    mode: OV<string> = mobx.observable.box(null, { name: "RightSideBar-mode" });
-
-    setMode(mode: string) {
-        mobx.action(() => {
-            this.mode.set(mode);
-        })();
-    }
-
     render() {
         return (
             <ResizableSidebar
@@ -81,31 +71,9 @@ class RightSideBar extends React.Component<RightSideBarProps, {}> {
                                 <i className="fa-sharp fa-regular fa-xmark"></i>
                             </Button>
                         </div>
-                        <div className="rsb-modes">
-                            <div className="flex-spacer" />
-                            <If condition={GlobalModel.isDev}>
-                                <div
-                                    className="icon-container"
-                                    title="Show Keybinding Debugger"
-                                    onClick={() => this.setMode("keybind")}
-                                >
-                                    <i className="fa-fw fa-sharp fa-keyboard fa-solid" />
-                                </div>
-                            </If>
-                            <div
-                                className="icon-container"
-                                title="Show Keybinding Debugger"
-                                onClick={() => this.setMode("wavebook")}
-                            >
-                                <i className="fa-sharp fa-solid fa-book-sparkles"></i>
-                            </div>
-                        </div>
-                        <If condition={this.mode.get() == "keybind"}>
+                        <If condition={GlobalModel.isDev}>
                             <KeybindDevPane></KeybindDevPane>
                         </If>
-                        <If condition={this.mode.get() == "wavebook"}>
-                            <WaveBookDisplay></WaveBookDisplay>
-                        </If>
                     </React.Fragment>
                 )}
             </ResizableSidebar>

src/app/sidebar/wavebook.tsx

@@ -1,53 +0,0 @@
-// Copyright 2024, 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 { If, For } from "tsx-control-statements/components";
-import { GlobalModel } from "@/models";
-
-import * as lexical from "lexical";
-import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
-import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
-import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
-import { $convertFromMarkdownString, $convertToMarkdownString, TRANSFORMERS } from "@lexical/markdown";
-import { CodeNode, CodeHighlightNode } from "@lexical/code";
-import { LinkNode } from "@lexical/link";
-import { ListNode, ListItemNode } from "@lexical/list";
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
-import { KeybindManager } from "@/util/keyutil";
-
-const theme = {
-    // Theme styling goes here
-};
-
-class WaveBookKeybindings extends React.Component<{}, {}> {
-    componentDidMount(): void {
-        const keybindManager = GlobalModel.keybindManager;
-        keybindManager.registerKeybinding("pane", "wavebook", "generic:confirm", (waveEvent) => {
-            return true;
-        });
-    }
-    componentWillUnmount(): void {
-        const keybindManager = GlobalModel.keybindManager;
-        keybindManager.unregisterDomain("wavebook");
-    }
-    render() {
-        return null;
-    }
-}
-
-@mobxReact.observer
-class WaveBookDisplay extends React.Component<{}, {}> {
-    render() {
-        return "playbooks";
-    }
-}
-
-export { WaveBookDisplay };

src/app/workspace/cmdinput/aichat.less

@@ -1,72 +1,70 @@
 .cmd-aichat {
     padding-bottom: 0 !important;
-
-    .chat-window {
-        display: flex;
-        overflow-y: auto;
-        margin-bottom: 5px;
-        flex-direction: column;
+    .auxview-content {
+        flex-flow: column nowrap;
         height: 100%;
 
-        // This is the filler that will push the chat messages to the bottom until the chat window is full
-        .filler {
+        .chat-window {
+            overflow-y: auto;
+            margin-bottom: 5px;
             flex: 1 1 auto;
+            flex-direction: column-reverse;
         }
-    }
 
-    .chat-input {
-        padding: 0.5em 0.5em 0.5em 0.5em;
-        flex: 0 0 auto;
+        .chat-input {
+            padding: 0.5em 0.5em 0.5em 0.5em;
+            flex: 1 0 auto;
 
-        .chat-textarea {
-            color: var(--app-text-primary-color);
-            background-color: var(--cmdinput-textarea-bg);
-            resize: none;
-            width: 100%;
-            border: transparent;
-            outline: none;
-            overflow: auto;
-            overflow-wrap: anywhere;
-            font-family: var(--termfontfamily);
-            font-weight: normal;
-            line-height: var(--termlineheight);
-        }
-    }
-
-    .chat-msg {
-        margin-top: calc(var(--termpad) * 2);
-        margin-bottom: calc(var(--termpad) * 2);
-
-        .chat-msg-header {
-            display: flex;
-            margin-bottom: 2px;
-
-            i {
-                margin-right: 0.5em;
-            }
-
-            .chat-username {
-                font-weight: bold;
-                margin-right: 5px;
+            .chat-textarea {
+                color: var(--app-text-primary-color);
+                background-color: var(--cmdinput-textarea-bg);
+                resize: none;
+                width: 100%;
+                border: transparent;
+                outline: none;
+                overflow: auto;
+                overflow-wrap: anywhere;
+                font-family: var(--termfontfamily);
+                font-weight: normal;
+                line-height: var(--termlineheight);
             }
         }
-    }
 
-    .chat-msg-assistant {
-        color: var(--app-text-color);
-    }
+        .chat-msg {
+            margin-top: calc(var(--termpad) * 2);
+            margin-bottom: calc(var(--termpad) * 2);
 
-    .chat-msg-user {
-        .msg-text {
+            .chat-msg-header {
+                display: flex;
+                margin-bottom: 2px;
+
+                i {
+                    margin-right: 0.5em;
+                }
+
+                .chat-username {
+                    font-weight: bold;
+                    margin-right: 5px;
+                }
+            }
+        }
+
+        .chat-msg-assistant {
+            color: var(--app-text-color);
+        }
+
+        .chat-msg-user {
+            .msg-text {
+                font-family: var(--markdown-font);
+                font-size: 14px;
+                white-space: pre-wrap;
+            }
+        }
+
+        .chat-msg-error {
+            color: var(--cmdinput-text-error);
             font-family: var(--markdown-font);
             font-size: 14px;
-            white-space: pre-wrap;
         }
     }
-
-    .chat-msg-error {
-        color: var(--cmdinput-text-error);
-        font-family: var(--markdown-font);
-        font-size: 14px;
-    }
 }

src/app/workspace/cmdinput/aichat.tsx

@@ -9,7 +9,6 @@ import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";
 import { Markdown } from "@/elements";
 import { AuxiliaryCmdView } from "./auxview";
-import * as appconst from "@/app/appconst";
 
 import "./aichat.less";
 
@@ -57,13 +56,18 @@ class AIChat extends React.Component<{}, {}> {
     chatListKeyCount: number = 0;
     chatWindowScrollRef: React.RefObject<HTMLDivElement>;
     textAreaRef: React.RefObject<HTMLTextAreaElement>;
+    isFocused: OV<boolean>;
     termFontSize: number = 14;
 
     constructor(props: any) {
         super(props);
         this.chatWindowScrollRef = React.createRef();
         this.textAreaRef = React.createRef();
+        this.isFocused = mobx.observable.box(false, {
+            name: "aichat-isfocused",
+        });
     }
+
     componentDidMount() {
         const inputModel = GlobalModel.inputModel;
         if (this.chatWindowScrollRef?.current != null) {
@@ -88,7 +92,7 @@ class AIChat extends React.Component<{}, {}> {
     }
 
     submitChatMessage(messageStr: string) {
-        const curLine = GlobalModel.inputModel.curLine;
+        const curLine = GlobalModel.inputModel.getCurLine();
         const prtn = GlobalModel.submitChatInfoCommand(messageStr, curLine, false);
         prtn.then((rtn) => {
             if (!rtn.success) {
@@ -105,14 +109,13 @@ class AIChat extends React.Component<{}, {}> {
 
     onTextAreaFocused(e: any) {
         mobx.action(() => {
-            GlobalModel.inputModel.setAuxViewFocus(true);
+            this.isFocused.set(true);
         })();
-        this.onTextAreaChange(e);
     }
 
     onTextAreaBlur(e: any) {
         mobx.action(() => {
-            GlobalModel.inputModel.setAuxViewFocus(false);
+            this.isFocused.set(false);
         })();
     }
 
@@ -234,7 +237,17 @@ class AIChat extends React.Component<{}, {}> {
     render() {
         const chatMessageItems = GlobalModel.inputModel.AICmdInfoChatItems.slice();
         const chitem: OpenAICmdInfoChatMessageType = null;
-        const renderKeybindings = GlobalModel.inputModel.shouldRenderAuxViewKeybindings(appconst.InputAuxView_AIChat);
+        const renderKeybindings = mobx
+            .computed(() => {
+                return (
+                    this.isFocused.get() ||
+                    GlobalModel.inputModel.hasFocus() ||
+                    (GlobalModel.getActiveScreen().getFocusType() == "input" &&
+                        GlobalModel.activeMainView.get() == "session")
+                );
+            })
+            .get();
+
         return (
             <AuxiliaryCmdView
                 title="Wave AI"
@@ -246,7 +259,6 @@ class AIChat extends React.Component<{}, {}> {
                     <AIChatKeybindings AIChatObject={this}></AIChatKeybindings>
                 </If>
                 <div className="chat-window" ref={this.chatWindowScrollRef}>
-                    <div className="filler"></div>
                     <For each="chitem" index="idx" of={chatMessageItems}>
                         {this.renderChatMessage(chitem)}
                     </For>

src/app/workspace/cmdinput/auxview.less

@@ -1,18 +1,21 @@
 // For the additonal views, we want less padding on the top and bottom than we want for the base-cmdinput div
 .auxview {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    height: 100%;
+    padding: var(--termpad) calc(var(--termpad) * 2) var(--termpad) calc(var(--termpad) * 3 - 1px);
+    overflow: auto;
+    flex-shrink: 1;
+    width: 100%;
 
     --auxview-titlebar-height: 18px;
 
     .auxview-titlebar {
+        position: absolute;
+        z-index: 22;
+        top: 0;
+        left: 0;
         background-color: var(--app-panel-bg-color);
         color: var(--term-blue);
         padding: 6px 10px 6px 10px;
         display: flex;
-        flex: 0 0 auto;
         flex-direction: row;
         width: 100%;
         border-bottom: 1px solid var(--app-border-color);
@@ -20,7 +23,6 @@
         user-select: none;
         cursor: default;
         line-height: var(--auxview-titlebar-height);
-        overflow: hidden;
 
         .title-string {
             font-weight: bold;
@@ -44,9 +46,6 @@
 
     .auxview-content {
         display: flex;
-        flex-flow: column nowrap;
-        flex: 1 1 auto;
-        padding: var(--termpad) calc(var(--termpad) * 2) var(--termpad) calc(var(--termpad) * 3 - 1px);
-        overflow-y: auto;
+        padding-top: calc(var(--auxview-titlebar-height) + 6px);
     }
 }