Merge branch 'main' into evan/inshellisense

* fix: ignore computer sleep for telemetry clock

This uses unix time with regular integer comparisons to prevent the
telemetry clock from needing to wait for 8 hours of the program running.
Now, it only needs to wait 8 real-time hours instead.

* drop telemetry time to 4 hours, tick every 10 minutes

package.json

@@ -18,6 +18,7 @@
         "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",
@@ -32,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",
@@ -51,8 +53,8 @@
         "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": {
@@ -107,4 +109,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/app.tsx

@@ -146,7 +146,7 @@ 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>

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 { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown, Button } from "@/common/elements";
+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,7 +70,7 @@ 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);
     }
 
@@ -107,7 +107,13 @@ 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);
     }
 
     getFontSizes(): DropdownItem[] {
@@ -354,6 +360,15 @@ 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>
                     <SettingsError errorMessage={this.errorMessage} />
                 </div>
             </MainView>

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/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/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;
     }

src/app/sidebar/right.tsx

@@ -1,14 +1,16 @@
-// Copyright 2023, Command Line Inc.
+// Copyright 2023-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 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";
 
@@ -55,6 +57,14 @@ 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
@@ -71,9 +81,31 @@ class RightSideBar extends React.Component<RightSideBarProps, {}> {
                                 <i className="fa-sharp fa-regular fa-xmark"></i>
                             </Button>
                         </div>
-                        <If condition={GlobalModel.isDev}>
+                        <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"}>
                             <KeybindDevPane></KeybindDevPane>
                         </If>
+                        <If condition={this.mode.get() == "wavebook"}>
+                            <WaveBookDisplay></WaveBookDisplay>
+                        </If>
                     </React.Fragment>
                 )}
             </ResizableSidebar>

src/app/sidebar/wavebook.tsx

@@ -0,0 +1,53 @@
+// 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.tsx

@@ -92,7 +92,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) {

src/app/workspace/cmdinput/autocomplete.tsx

@@ -1,28 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-import { SuggestionBlob } from "@/autocomplete/runtime/model";
-import { GlobalModel } from "@/models";
-import cn from "classnames";
-import { useMemo } from "react";
-
-export const AutocompleteSuggestions = async (props: { curLine: string }) => {
-    const inputModel = GlobalModel.inputModel;
-    const suggestions = await useMemo(async () => await inputModel.getSuggestions(), [props.curLine]);
-
-    if (!suggestions) {
-        return null;
-    }
-
-    const items = suggestions.suggestions.map((s) => `${s.icon} ${s.name}`);
-
-    return (
-        <div className="autocomplete-suggestions">
-            {items.map((item, idx) => (
-                <div key={idx} className={cn("autocomplete-item")}>
-                    {item}
-                </div>
-            ))}
-        </div>
-    );
-};

src/app/workspace/cmdinput/auxview.tsx

@@ -4,47 +4,45 @@
 import * as React from "react";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
+import { observer } from "mobx-react";
 
 import "./auxview.less";
 
-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>;
+}
 
-        return (
-            <div className={cn("auxview", className)}>
-                <div className="auxview-titlebar">
-                    <If condition={iconClass != null}>
-                        <div className="title-icon">
-                            <i className={iconClass} />
-                        </div>
-                    </If>
-                    <div className="title-string">{title}</div>
+export const AuxiliaryCmdView: React.FC<AuxiliaryCmdViewProps> = observer((props) => {
+    const { title, className, iconClass, titleBarContents, children, onClose } = props;
 
-                    <If condition={titleBarContents != null}>{titleBarContents}</If>
+    return (
+        <div className={cn("auxview", className)}>
+            <div className="auxview-titlebar">
+                <If condition={iconClass != null}>
+                    <div className="title-icon">
+                        <i className={iconClass} />
+                    </div>
+                </If>
+                <div className="title-string">{title}</div>
 
-                    <div className="flex-spacer"></div>
+                <If condition={titleBarContents != null}>{titleBarContents}</If>
 
-                    <If condition={onClose != null}>
-                        <div className="close-button" title="Close (ESC)" onClick={onClose}>
-                            <i className="fa-sharp fa-solid fa-xmark-large" />
-                        </div>
-                    </If>
-                </div>
-                <If condition={children != null}>
-                    <div className="auxview-content">{children}</div>
+                <div className="flex-spacer"></div>
+
+                <If condition={onClose != null}>
+                    <div className="close-button" title="Close (ESC)" onClick={onClose}>
+                        <i className="fa-sharp fa-solid fa-xmark-large" />
+                    </div>
                 </If>
             </div>
-        );
-    }
-}
+            <If condition={children != null}>
+                <div className="auxview-content">{children}</div>
+            </If>
+        </div>
+    );
+});

src/app/workspace/cmdinput/cmdinput.less

@@ -14,7 +14,8 @@
     // 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);
         }
@@ -92,8 +93,6 @@
 
             .textareainput-div {
                 position: relative;
-                display: flex;
-                flex-direction: column;
 
                 &.control {
                     padding: var(--termpad) 0;
@@ -111,9 +110,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;
@@ -121,13 +122,19 @@
                 font-family: var(--termfontfamily);
                 line-height: var(--termlineheight);
                 font-size: var(--termfontsize);
+                background-color: transparent;
                 border: none;
                 box-shadow: none;
-                width: fit-content;
             }
 
-            .suggestion {
-                width: fit-content;
+            .textarea {
+                color: var(--app-text-primary-color);
+                z-index: 2;
+            }
+
+            .textarea-ghost {
+                color: var(--app-text-secondary-color);
+                z-index: 1;
             }
 
             input.history-input {

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 { SuggestionView } 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}>
+                        <SuggestionView />
+                    </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);

src/app/workspace/cmdinput/historyinfo.tsx

@@ -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> = {};