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

@@ -24,6 +24,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",
@@ -43,10 +44,10 @@
         "papaparse": "^5.4.1",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
-        "react-frame-component": "^5.2.6",
         "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",
@@ -69,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",
@@ -76,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",
@@ -108,4 +112,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(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/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

@@ -11,9 +11,9 @@ import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/commo
 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() {
@@ -110,6 +110,19 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         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[] {
         const availableFontSizes: DropdownItem[] = [];
         for (let s = appconst.MinFontSize; s <= appconst.MaxFontSize; s++) {
@@ -354,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

@@ -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/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/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/line/line.less

@@ -226,12 +226,13 @@
             }
 
             .ts,
-            .termopts {
+            .termopts,
+            .renderer {
                 display: flex;
             }
 
-            .renderer-icon {
-                margin-right: 0.2em;
+            .renderer .renderer-icon {
+                margin-right: 0.5em;
             }
 
             .metapart-mono {

src/app/line/linecomps.tsx

@@ -291,10 +291,10 @@ class LineHeader extends React.Component<{ screen: LineContainerType; line: Line
                 </div>
                 <If condition={!isBlank(renderer) && renderer != "terminal"}>
                     <div className="meta-divider">|</div>
-                    <div className="renderer-icon">
+                    <div className="renderer">
                         <i className="fa-sharp fa-solid fa-fill renderer-icon" />
+                        {renderer}
                     </div>
-                    <div className="renderer-name">{renderer}</div>
                 </If>
             </div>
         );

src/app/workspace/cmdinput/aichat.less

@@ -1,70 +1,72 @@
 .cmd-aichat {
     padding-bottom: 0 !important;
-    .auxview-content {
-        flex-flow: column nowrap;
+
+    .chat-window {
+        display: flex;
+        overflow-y: auto;
+        margin-bottom: 5px;
+        flex-direction: column;
         height: 100%;
 
-        .chat-window {
-            overflow-y: auto;
-            margin-bottom: 5px;
+        // This is the filler that will push the chat messages to the bottom until the chat window is full
+        .filler {
             flex: 1 1 auto;
-            flex-direction: column-reverse;
-        }
-
-        .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-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;
         }
     }
+
+    .chat-input {
+        padding: 0.5em 0.5em 0.5em 0.5em;
+        flex: 0 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-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;
+    }
 }

src/app/workspace/cmdinput/aichat.tsx

@@ -9,6 +9,7 @@ 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";
 
@@ -56,18 +57,13 @@ 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) {
@@ -92,7 +88,7 @@ class AIChat extends React.Component<{}, {}> {
     }
 
     submitChatMessage(messageStr: string) {
-        const curLine = GlobalModel.inputModel.getCurLine();
+        const curLine = GlobalModel.inputModel.curLine;
         const prtn = GlobalModel.submitChatInfoCommand(messageStr, curLine, false);
         prtn.then((rtn) => {
             if (!rtn.success) {
@@ -109,13 +105,14 @@ class AIChat extends React.Component<{}, {}> {
 
     onTextAreaFocused(e: any) {
         mobx.action(() => {
-            this.isFocused.set(true);
+            GlobalModel.inputModel.setAuxViewFocus(true);
         })();
+        this.onTextAreaChange(e);
     }
 
     onTextAreaBlur(e: any) {
         mobx.action(() => {
-            this.isFocused.set(false);
+            GlobalModel.inputModel.setAuxViewFocus(false);
         })();
     }
 
@@ -237,17 +234,7 @@ class AIChat extends React.Component<{}, {}> {
     render() {
         const chatMessageItems = GlobalModel.inputModel.AICmdInfoChatItems.slice();
         const chitem: OpenAICmdInfoChatMessageType = null;
-        const renderKeybindings = mobx
-            .computed(() => {
-                return (
-                    this.isFocused.get() ||
-                    GlobalModel.inputModel.hasFocus() ||
-                    (GlobalModel.getActiveScreen().getFocusType() == "input" &&
-                        GlobalModel.activeMainView.get() == "session")
-                );
-            })
-            .get();
-
+        const renderKeybindings = GlobalModel.inputModel.shouldRenderAuxViewKeybindings(appconst.InputAuxView_AIChat);
         return (
             <AuxiliaryCmdView
                 title="Wave AI"
@@ -259,6 +246,7 @@ 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,21 +1,18 @@
 // For the additonal views, we want less padding on the top and bottom than we want for the base-cmdinput div
 .auxview {
-    padding: var(--termpad) calc(var(--termpad) * 2) var(--termpad) calc(var(--termpad) * 3 - 1px);
-    overflow: auto;
-    flex-shrink: 1;
-    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 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);
@@ -23,6 +20,7 @@
         user-select: none;
         cursor: default;
         line-height: var(--auxview-titlebar-height);
+        overflow: hidden;
 
         .title-string {
             font-weight: bold;
@@ -46,6 +44,9 @@
 
     .auxview-content {
         display: flex;
-        padding-top: calc(var(--auxview-titlebar-height) + 6px);
+        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;
     }
 }

src/app/workspace/cmdinput/auxview.tsx

@@ -3,26 +3,28 @@
 
 import * as React from "react";
 import cn from "classnames";
-import { If } from "tsx-control-statements/components";
+import { Choose, If, Otherwise, When } from "tsx-control-statements/components";
+import { observer } from "mobx-react";
 
 import "./auxview.less";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 
-export class AuxiliaryCmdView extends React.Component<
-    {
-        title: string;
-        className?: string;
-        iconClass?: string;
-        titleBarContents?: React.ReactElement[];
-        children?: React.ReactNode;
-        onClose?: React.MouseEventHandler<HTMLDivElement>;
-    },
-    {}
-> {
-    render() {
-        const { title, className, iconClass, titleBarContents, children, onClose } = this.props;
+interface AuxiliaryCmdViewProps {
+    title: string;
+    className?: string;
+    iconClass?: string;
+    titleBarContents?: React.ReactElement[];
+    children?: React.ReactNode;
+    onClose?: React.MouseEventHandler<HTMLDivElement>;
+    scrollable?: boolean;
+}
 
-        return (
-            <div className={cn("auxview", className)}>
+export const AuxiliaryCmdView: React.FC<AuxiliaryCmdViewProps> = observer((props) => {
+    const { title, className, iconClass, titleBarContents, children, onClose } = props;
+
+    return (
+        <div className={cn("auxview", className)}>
+            <If condition={title || onClose || titleBarContents || iconClass}>
                 <div className="auxview-titlebar">
                     <If condition={iconClass != null}>
                         <div className="title-icon">
@@ -41,10 +43,22 @@ export class AuxiliaryCmdView extends React.Component<
                         </div>
                     </If>
                 </div>
-                <If condition={children != null}>
-                    <div className="auxview-content">{children}</div>
-                </If>
-            </div>
-        );
-    }
-}
+            </If>
+            <If condition={children != null}>
+                <Choose>
+                    <When condition={props.scrollable}>
+                        <OverlayScrollbarsComponent
+                            className="auxview-content"
+                            options={{ scrollbars: { autoHide: "leave" } }}
+                        >
+                            {children}
+                        </OverlayScrollbarsComponent>
+                    </When>
+                    <Otherwise>
+                        <div className="auxview-content">{children}</div>
+                    </Otherwise>
+                </Choose>
+            </If>
+        </div>
+    );
+});

src/app/workspace/cmdinput/cmdinput.less

@@ -14,19 +14,15 @@
     // TODO: use a generic selector for this
     &.has-aichat,
     &.has-history,
-    &.has-info {
+    &.has-info,
+    &.has-suggestions {
         .base-cmdinput {
             border-top: 1px solid var(--app-border-color);
         }
     }
 
-    &.has-info {
-        padding-top: var(--termpad);
-    }
-
     &.has-history,
     &.has-aichat {
-        padding-top: var(--termpad);
         height: max(300px, 70%);
     }
 
@@ -109,9 +105,11 @@
                 }
             }
 
-            textarea {
-                color: var(--app-text-primary-color);
-                background-color: var(--app-bg-color);
+            .textarea,
+            .textarea-ghost {
+                position: absolute;
+                top: 0;
+                left: 0;
                 padding: var(--termpad) 0;
                 resize: none;
                 overflow: auto;
@@ -119,10 +117,21 @@
                 font-family: var(--termfontfamily);
                 line-height: var(--termlineheight);
                 font-size: var(--termfontsize);
+                background-color: transparent;
                 border: none;
                 box-shadow: none;
             }
 
+            .textarea {
+                color: var(--app-text-primary-color);
+                z-index: 2;
+            }
+
+            .textarea-ghost {
+                color: var(--app-text-secondary-color);
+                z-index: 1;
+            }
+
             input.history-input {
                 border: 0;
                 padding: 0;

src/app/workspace/cmdinput/cmdinput.tsx

@@ -19,6 +19,7 @@ import { CenteredIcon, RotateIcon } from "@/common/icons/icons";
 import { AIChat } from "./aichat";
 import * as util from "@/util/util";
 import * as appconst from "@/app/appconst";
+import { AutocompleteSuggestionView } from "./suggestionview";
 
 import "./cmdinput.less";
 
@@ -181,6 +182,7 @@ class CmdInput extends React.Component<{}, {}> {
                 hidePrompt = true;
             }
         }
+
         return (
             <div ref={this.cmdInputRef} className={cn("cmd-input", hasOpenView, { active: focusVal })}>
                 <Choose>
@@ -195,6 +197,9 @@ class CmdInput extends React.Component<{}, {}> {
                     <When condition={openView === appconst.InputAuxView_Info}>
                         <InfoMsg key="infomsg" />
                     </When>
+                    <When condition={openView === appconst.InputAuxView_Suggestions}>
+                        <AutocompleteSuggestionView />
+                    </When>
                 </Choose>
                 <If condition={remote && remote.status != "connected"}>
                     <div className="remote-status-warning">

src/app/workspace/cmdinput/historyinfo.less

@@ -11,7 +11,6 @@
         .history-clickable-opt {
             cursor: pointer;
             white-space: nowrap;
-            cursor: pointer;
 
             &:hover {
                 color: var(--app-text-primary-color);
@@ -21,6 +20,7 @@
 
     .history-items {
         color: var(--app-text-color);
+        height: 100%;
         width: 100%;
 
         .history-item {

src/app/workspace/cmdinput/historyinfo.tsx

@@ -174,7 +174,7 @@ class HistoryInfo extends React.Component<{}, {}> {
     handleItemClick(hitem: HistoryItem) {
         const inputModel = GlobalModel.inputModel;
         const selItem = inputModel.getHistorySelectedItem();
-        inputModel.setAuxViewFocus(false);
+        inputModel.setAuxViewFocus(!inputModel.getAuxViewFocus());
         if (this.lastClickHNum == hitem.historynum && selItem != null && selItem.historynum == hitem.historynum) {
             inputModel.grabSelectedHistoryItem();
             return;
@@ -225,7 +225,7 @@ class HistoryInfo extends React.Component<{}, {}> {
     render() {
         const inputModel = GlobalModel.inputModel;
         const selItem = inputModel.getHistorySelectedItem();
-        const hitems = inputModel.getFilteredHistoryItems().slice().reverse();
+        const hitems = inputModel.filteredHistoryItems.slice().reverse();
         const opts = inputModel.historyQueryOpts.get();
         let hitem: HistoryItem = null;
         let snames: Record<string, string> = {};
@@ -239,10 +239,11 @@ class HistoryInfo extends React.Component<{}, {}> {
         return (
             <AuxiliaryCmdView
                 title="History"
-                className="cmd-history hide-scrollbar"
+                className="cmd-history"
                 onClose={this.handleClose}
                 titleBarContents={this.getTitleBarContents()}
                 iconClass="fa-sharp fa-solid fa-clock-rotate-left"
+                scrollable={true}
             >
                 <div
                     className={cn(