save work

* adding more activity updates, tabs, workspaces, startup/shutdown

* name change, allow activity updates from FE.  aichat + history opens

* activity updates for non-standard renderers

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,48 +149,39 @@
     },
     {
       "command": "app:selectTab-1",
-      "keys": ["Cmd:1"],
-      "commandStr":"/screen 1"
+      "keys": ["Cmd:1"]
     },
     {
       "command": "app:selectTab-2",
-      "keys": ["Cmd:2"],
-      "commandStr":"/screen 2"
+      "keys": ["Cmd:2"]
     },
     {
       "command": "app:selectTab-3",
-      "keys": ["Cmd:3"],
-      "commandStr":"/screen 3"
+      "keys": ["Cmd:3"]
     },
     {
       "command": "app:selectTab-4",
-      "keys": ["Cmd:4"],
-      "commandStr":"/screen 4"
+      "keys": ["Cmd:4"]
     },
     {
       "command": "app:selectTab-5",
-      "keys": ["Cmd:5"],
-      "commandStr":"/screen 5"
+      "keys": ["Cmd:5"]
     },
     {
       "command": "app:selectTab-6",
-      "keys": ["Cmd:6"],
-      "commandStr":"/screen 6"
+      "keys": ["Cmd:6"]
     },
     {
       "command": "app:selectTab-7",
-      "keys": ["Cmd:7"],
-      "commandStr":"/screen 7"
+      "keys": ["Cmd:7"]
     },
     {
       "command": "app:selectTab-8",
-      "keys": ["Cmd:8"],
-      "commandStr":"/screen 8"
+      "keys": ["Cmd:8"]
     },
     {
       "command": "app:selectTab-9",
-      "keys": ["Cmd:9"],
-      "commandStr":"/screen 9"
+      "keys": ["Cmd:9"]
     },
     {
       "command": "app:selectTabLeft",
@@ -202,48 +193,39 @@
     },
     {
       "command": "app:selectWorkspace-1",
-      "keys": ["Cmd:Ctrl:1"],
-      "commandStr": "/session 1"
+      "keys": ["Cmd:Ctrl:1"]
     },
     {
       "command": "app:selectWorkspace-2",
-      "keys": ["Cmd:Ctrl:2"],
-      "commandStr": "/session 2"
+      "keys": ["Cmd:Ctrl:2"]
     },
     {
       "command": "app:selectWorkspace-3",
-      "keys": ["Cmd:Ctrl:3"],
-      "commandStr": "/session 3"
+      "keys": ["Cmd:Ctrl:3"]
     },
     {
       "command": "app:selectWorkspace-4",
-      "keys": ["Cmd:Ctrl:4"],
-      "commandStr": "/session 4"
+      "keys": ["Cmd:Ctrl:4"]
     },
     {
       "command": "app:selectWorkspace-5",
-      "keys": ["Cmd:Ctrl:5"],
-      "commandStr": "/session 5"
+      "keys": ["Cmd:Ctrl:5"]
     },
     {
       "command": "app:selectWorkspace-6",
-      "keys": ["Cmd:Ctrl:6"],
-      "commandStr": "/session 6"
+      "keys": ["Cmd:Ctrl:6"]
     },
     {
       "command": "app:selectWorkspace-7",
-      "keys": ["Cmd:Ctrl:7"],
-      "commandStr": "/session 7"
+      "keys": ["Cmd:Ctrl:7"]
     },
     {
       "command": "app:selectWorkspace-8",
-      "keys": ["Cmd:Ctrl:8"],
-      "commandStr": "/session 8"
+      "keys": ["Cmd:Ctrl:8"]
     },
     {
       "command": "app:selectWorkspace-9",
-      "keys": ["Cmd:Ctrl:9"],
-      "commandStr": "/session 9"
+      "keys": ["Cmd:Ctrl:9"]
     },
     {
       "command": "app:toggleSidebar",
@@ -256,7 +238,7 @@
     {
       "command": "app:openBookmarksView",
       "keys": ["Cmd:b"],
-      "commandStr": "/bookmarks:show"
+      "commandStr": ["/bookmarks:show"]
     },
     {
       "command": "bookmarks:edit",
@@ -301,7 +283,7 @@
     {
       "command": "cmdinput:openHistory",
       "keys": ["Ctrl:r"],
-      "commandStr": "/history"
+      "commandStr": ["/history"]
     },
     {
       "command": "cmdinput:openAIChat",

package.json

@@ -18,11 +18,13 @@
         "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",
@@ -31,6 +33,7 @@
         "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",
@@ -44,14 +47,15 @@
         "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-web-links": "^0.9.0",
         "xterm-addon-serialize": "^0.11.0",
+        "xterm-addon-web-links": "^0.9.0",
         "xterm-addon-webgl": "^0.16.0"
     },
     "devDependencies": {
@@ -66,6 +70,7 @@
         "@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",
@@ -73,10 +78,12 @@
         "@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",
@@ -105,4 +112,4 @@
     "scripts": {
         "postinstall": "electron-builder install-app-deps"
     }
-}
+}

public/index-dev.html

@@ -13,7 +13,6 @@
         <link rel="stylesheet" href="dist-dev/waveterm.css" />
 
         <link rel="stylesheet" id="theme-stylesheet" href="public/themes/themequery.css" />
-        <link rel="stylesheet" href="public/themes/test.css" />
     </head>
     <body>
         <div id="measure"></div>

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(0, 0, 0, 0.9);
-    --app-text-secondary-color: rgb(0, 0, 0, 0.7);
+    --app-text-primary-color: rgb(23, 23, 23);
+    --app-text-secondary-color: rgb(76, 76, 76);
     --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,9 +20,8 @@ import { MainSideBar } from "./sidebar/main";
 import { RightSideBar } from "./sidebar/right";
 import { DisconnectedModal, ClientStopModal } from "@/modals";
 import { ModalsProvider } from "@/modals/provider";
-import { Button, TermStyleBlock } from "@/elements";
+import { Button } from "@/elements";
 import { ErrorBoundary } from "@/common/error/errorboundary";
-import { For } from "tsx-control-statements/components";
 import cn from "classnames";
 import "./app.less";
 
@@ -81,21 +80,6 @@ class App extends React.Component<{}, {}> {
         rightSidebarModel.saveState(width, false);
     }
 
-    getSelector(themeKey: string) {
-        const sessions = GlobalModel.getSessionNames();
-        const screens = GlobalModel.getScreenNames();
-
-        if (themeKey === "main") {
-            return ":root";
-        } else if (themeKey in screens) {
-            return `.main-content [data-screenid="${themeKey}"]`;
-        } else if (themeKey in sessions) {
-            return `.main-content [data-sessionid="${themeKey}"]`;
-        }
-
-        return null;
-    }
-
     render() {
         const remotesModel = GlobalModel.remotesModel;
         const disconnected = !GlobalModel.ws.open.get() || !GlobalModel.waveSrvRunning.get();
@@ -140,12 +124,9 @@ 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();
-        const themeKey = null;
-
         return (
             <div
-                key={`version- + ${renderVersion}`}
+                key={"version-" + renderVersion}
                 id="main"
                 className={cn(
                     "platform-" + platform,
@@ -165,18 +146,11 @@ 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-regular fa-lightbulb"></i>
+                            <i className="fa-sharp fa-solid fa-sidebar-flip"></i>
                         </Button>
                     </div>
                 </If>
                 <div ref={this.mainContentRef} className="main-content">
-                    <For index="idx" each="themeKey" of={Object.keys(termTheme)}>
-                        <TermStyleBlock
-                            key={themeKey}
-                            themeName={termTheme[themeKey]}
-                            selector={this.getSelector(themeKey)}
-                        />
-                    </For>
                     <MainSideBar parentRef={this.mainContentRef} />
                     <ErrorBoundary>
                         <PluginsView />

src/app/appconst.ts

@@ -68,3 +68,4 @@ 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, getApi } from "@/models";
+import { GlobalModel, GlobalCommandRunner, RemotesModel } 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,19 +70,20 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
             return;
         }
         const prtn = GlobalCommandRunner.setTheme(themeSource, false);
-        getApi().setNativeThemeSource(themeSource);
+        GlobalModel.getElectronApi().setNativeThemeSource(themeSource);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
     handleChangeTermTheme(theme: string): void {
-        // For main terminal theme, the key is main, otherwise it's either
+        // For global terminal theme, the key is global, otherwise it's either
         // sessionId or screenId.
-        const currTheme = GlobalModel.getTermTheme()["main"];
+        const currTheme = GlobalModel.getTermTheme()["global"];
         if (currTheme == theme) {
             return;
         }
-        const prtn = GlobalCommandRunner.setMainTermTheme(theme, false);
+
+        const prtn = GlobalCommandRunner.setGlobalTermTheme(theme, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
@@ -106,7 +107,20 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
             prtn = GlobalCommandRunner.releaseCheckAutoOff(false);
         }
         commandRtnHandler(prtn, this.errorMessage);
-        getApi().changeAutoUpdate(val);
+        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;
+        })();
     }
 
     getFontSizes(): DropdownItem[] {
@@ -206,8 +220,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.termThemeOptions.get(), "Wave Default");
-        const currTermTheme = GlobalModel.getTermTheme()["main"] ?? termThemes[0].label;
+        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}>
@@ -353,6 +367,24 @@ 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/dropdown.less

@@ -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,5 +18,4 @@ 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
-                                onClick={this.cancelChange}
+                                onMouseDown={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
-                                onClick={this.confirmChange}
+                                onMouseDown={this.confirmChange}
                                 title="Confirm (Enter)"
                                 className="button is-wave-green is-outlined is-small"
                             >

src/app/common/elements/termstyleblock.tsx

@@ -1,95 +0,0 @@
-// Copyright 2023, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-import * as React from "react";
-import * as mobxReact from "mobx-react";
-import { GlobalModel } from "@/models";
-
-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<{
-    themeName: string;
-    selector: string;
-}> {
-    componentDidMount() {
-        GlobalModel.bumpTermRenderVersion();
-    }
-
-    componentWillUnmount() {
-        GlobalModel.bumpTermRenderVersion();
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.themeName !== this.props.themeName || prevProps.selector !== this.props.selector) {
-            GlobalModel.bumpTermRenderVersion();
-        }
-    }
-
-    isValidCSSColor(color) {
-        const element = document.createElement("div");
-        element.style.color = color;
-        return element.style.color !== "";
-    }
-
-    camelCaseToKebabCase(str) {
-        return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-    }
-
-    getStyleRules() {
-        const { selector, themeName } = this.props;
-        const termThemeOptions = GlobalModel.getTermThemeOptions();
-        if (!termThemeOptions) {
-            return null;
-        }
-        const theme = termThemeOptions[themeName];
-        if (!theme) {
-            return null;
-        }
-        const styleProperties = Object.entries(theme)
-            .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(" ");
-
-        if (!styleProperties) {
-            return null;
-        }
-        return `${selector} { ${styleProperties} }`;
-    }
-
-    render() {
-        const styleRules = this.getStyleRules();
-        if (!styleRules) {
-            return null;
-        }
-        return <style>{styleRules}</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, getApi } from "@/models";
+import { GlobalModel } 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 {
-        getApi().installAppUpdate();
+        GlobalModel.getElectronApi().installAppUpdate();
     }
 
     @boundMethod

src/app/common/modals/screensettings.tsx

@@ -160,7 +160,6 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
         if (currTheme == theme) {
             return;
         }
-        GlobalModel.setTermThemeScope(this.screenId, `.main-content [data-screenid="${this.screenId}"]`);
         const prtn = GlobalCommandRunner.setScreenTermTheme(this.screenId, theme, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
@@ -176,8 +175,13 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
         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()})`} />

src/app/common/modals/sessionsettings.tsx

@@ -99,7 +99,7 @@ class SessionSettingsModal extends React.Component<{}, {}> {
         if (this.session == null) {
             return null;
         }
-        const termThemes = getTermThemes(GlobalModel.termThemeOptions.get());
+        const termThemes = getTermThemes(GlobalModel.termThemes);
         const currTermTheme = GlobalModel.getTermTheme()[this.sessionId] ?? termThemes[0].label;
 
         return (

src/app/common/prompt/prompt.less

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

src/app/common/prompt/prompt.tsx

@@ -146,6 +146,7 @@ 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 = (
@@ -171,9 +172,19 @@ 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}
+                {remoteElem} {cwdElem} {branchElem} {condaElem} {pythonElem} {k8sElem}
             </span>
         );
     }

src/app/history/history.tsx

@@ -649,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;

src/app/line/linecomps.tsx

@@ -665,6 +665,83 @@ 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();
@@ -750,6 +827,7 @@ 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,6 +22,23 @@
         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;
     }