some ideas for new plugin api

* working on easy global shortcut for wave

* globalshortcut setting working

* cmd for macos, alt for others

* re-remove types.ts (was added back during merge)

* rename DDItem to DropdownItem, put into custom.d.ts

* make some consts

src/app/app.tsx

@@ -7,10 +7,9 @@ import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
 import dayjs from "dayjs";
-import type { ContextMenuOpts } from "../types/types";
 import localizedFormat from "dayjs/plugin/localizedFormat";
-import { GlobalModel } from "../model/model";
+import { GlobalModel } from "@/models";
-import { isBlank } from "../util/util";
+import { isBlank } from "@/util/util";
 import { WorkspaceView } from "./workspace/workspaceview";
 import { PluginsView } from "./pluginsview/pluginsview";
 import { BookmarksView } from "./bookmarks/bookmarks";
@@ -25,14 +24,12 @@ import "./app.less";
 
 dayjs.extend(localizedFormat);
 
-type OV<V> = mobx.IObservableValue<V>;
-
 @mobxReact.observer
 class App extends React.Component<{}, {}> {
     dcWait: OV<boolean> = mobx.observable.box(false, { name: "dcWait" });
     mainContentRef: React.RefObject<HTMLDivElement> = React.createRef();
 
-    constructor(props: any) {
+    constructor(props: {}) {
         super(props);
         if (GlobalModel.isDev) document.body.className = "is-dev";
     }

src/app/appconst.ts

@@ -8,6 +8,7 @@ export const SESSION_SETTINGS = "sessionSettings";
 export const LINE_SETTINGS = "lineSettings";
 export const CLIENT_SETTINGS = "clientSettings";
 export const TAB_SWITCHER = "tabSwitcher";
+export const USER_INPUT = "userInput";
 
 export const LineContainer_Main = "main";
 export const LineContainer_History = "history";
@@ -16,3 +17,43 @@ export const LineContainer_Sidebar = "sidebar";
 export const ConfirmKey_HideShellPrompt = "hideshellprompt";
 
 export const NoStrPos = -1;
+
+export const RemotePtyRows = 8; // also in main.tsx
+export const RemotePtyCols = 80;
+export const ProdServerEndpoint = "http://127.0.0.1:1619";
+export const ProdServerWsEndpoint = "ws://127.0.0.1:1623";
+export const DevServerEndpoint = "http://127.0.0.1:8090";
+export const DevServerWsEndpoint = "ws://127.0.0.1:8091";
+export const DefaultTermFontSize = 12;
+export const MinFontSize = 8;
+export const MaxFontSize = 24;
+export const InputChunkSize = 500;
+export const RemoteColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange"];
+export const TabColors = ["red", "orange", "yellow", "green", "mint", "cyan", "blue", "violet", "pink", "white"];
+export const TabIcons = [
+    "sparkle",
+    "fire",
+    "ghost",
+    "cloud",
+    "compass",
+    "crown",
+    "droplet",
+    "graduation-cap",
+    "heart",
+    "file",
+];
+
+// @ts-ignore
+export const VERSION = __WAVETERM_VERSION__;
+// @ts-ignore
+export const BUILD = __WAVETERM_BUILD__;
+
+/**
+ * Levels for the screen status indicator
+ */
+export enum StatusIndicatorLevel {
+    None = 0,
+    Output = 1,
+    Success = 2,
+    Error = 3,
+}

src/app/bookmarks/bookmarks.less

@@ -1,4 +1,4 @@
-@import "../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .bookmarks-view {
     background-color: @background-session;

src/app/bookmarks/bookmarks.tsx

@@ -7,20 +7,27 @@ import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";
 import cn from "classnames";
-import type { BookmarkType } from "../../types/types";
+import { GlobalModel } from "@/models";
-import { GlobalModel } from "../../model/model";
+import { CmdStrCode, Markdown } from "@/common/elements";
-import { CmdStrCode, Markdown } from "../common/elements";
 
-import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
+import { ReactComponent as XmarkIcon } from "@/assets/icons/line/xmark.svg";
-import { ReactComponent as CopyIcon } from "../assets/icons/favourites/copy.svg";
+import { ReactComponent as CopyIcon } from "@/assets/icons/favourites/copy.svg";
-import { ReactComponent as PenIcon } from "../assets/icons/favourites/pen.svg";
+import { ReactComponent as PenIcon } from "@/assets/icons/favourites/pen.svg";
-import { ReactComponent as TrashIcon } from "../assets/icons/favourites/trash.svg";
+import { ReactComponent as TrashIcon } from "@/assets/icons/favourites/trash.svg";
-import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.svg";
+import { ReactComponent as FavoritesIcon } from "@/assets/icons/favourites.svg";
 
 import "./bookmarks.less";
 
+type BookmarkProps = {
+    bookmark: BookmarkType;
+};
+
 @mobxReact.observer
-class Bookmark extends React.Component<{ bookmark: BookmarkType }, {}> {
+class Bookmark extends React.Component<BookmarkProps, {}> {
+    constructor(props: BookmarkProps) {
+        super(props);
+    }
+
     @boundMethod
     handleDeleteClick(): void {
         let { bookmark } = this.props;
@@ -179,6 +186,10 @@ class Bookmark extends React.Component<{ bookmark: BookmarkType }, {}> {
 
 @mobxReact.observer
 class BookmarksView extends React.Component<{}, {}> {
+    constructor(props: {}) {
+        super(props);
+    }
+
     @boundMethod
     closeView(): void {
         GlobalModel.bookmarksModel.closeView();

src/app/clientsettings/clientsettings.less

@@ -1,4 +1,4 @@
-@import "../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .clientsettings-view {
     background-color: @background-session;

src/app/clientsettings/clientsettings.tsx

@@ -6,23 +6,18 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
-import { GlobalModel, GlobalCommandRunner, MinFontSize, MaxFontSize, RemotesModel } from "../../model/model";
+import { GlobalModel, GlobalCommandRunner, RemotesModel } from "@/models";
-import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "../common/elements";
+import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
-import { CommandRtnType, ClientDataType } from "../../types/types";
+import { commandRtnHandler, isBlank } from "@/util/util";
-import { commandRtnHandler, isBlank } from "../../util/util";
+import * as appconst from "@/app/appconst";
 
 import "./clientsettings.less";
 
-type OV<V> = mobx.IObservableValue<V>;
-
-// @ts-ignore
-const VERSION = __WAVETERM_VERSION__;
-// @ts-ignore
-const BUILD = __WAVETERM_BUILD__;
-
 @mobxReact.observer
 class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
-    fontSizeDropdownActive: OV<boolean> = mobx.observable.box(false, { name: "clientSettings-fontSizeDropdownActive" });
+    fontSizeDropdownActive: OV<boolean> = mobx.observable.box(false, {
+        name: "clientSettings-fontSizeDropdownActive",
+    });
     errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
 
     @boundMethod
@@ -34,12 +29,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
     @boundMethod
     handleChangeFontSize(fontSize: string): void {
-        let newFontSize = Number(fontSize);
+        const newFontSize = Number(fontSize);
         this.fontSizeDropdownActive.set(false);
         if (GlobalModel.termFontSize.get() == newFontSize) {
             return;
         }
-        let prtn = GlobalCommandRunner.setTermFontSize(newFontSize, false);
+        const prtn = GlobalCommandRunner.setTermFontSize(newFontSize, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
@@ -72,29 +67,29 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         commandRtnHandler(prtn, this.errorMessage);
     }
 
-    getFontSizes(): any {
+    getFontSizes(): DropdownItem[] {
-        let availableFontSizes: { label: string; value: number }[] = [];
+        const availableFontSizes: DropdownItem[] = [];
-        for (let s = MinFontSize; s <= MaxFontSize; s++) {
+        for (let s = appconst.MinFontSize; s <= appconst.MaxFontSize; s++) {
-            availableFontSizes.push({ label: s + "px", value: s });
+            availableFontSizes.push({ label: s + "px", value: String(s) });
         }
         return availableFontSizes;
     }
 
     @boundMethod
     inlineUpdateOpenAIModel(newModel: string): void {
-        let prtn = GlobalCommandRunner.setClientOpenAISettings({ model: newModel });
+        const prtn = GlobalCommandRunner.setClientOpenAISettings({ model: newModel });
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
     inlineUpdateOpenAIToken(newToken: string): void {
-        let prtn = GlobalCommandRunner.setClientOpenAISettings({ apitoken: newToken });
+        const prtn = GlobalCommandRunner.setClientOpenAISettings({ apitoken: newToken });
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
     inlineUpdateOpenAIMaxTokens(newMaxTokensStr: string): void {
-        let prtn = GlobalCommandRunner.setClientOpenAISettings({ maxtokens: newMaxTokensStr });
+        const prtn = GlobalCommandRunner.setClientOpenAISettings({ maxtokens: newMaxTokensStr });
         commandRtnHandler(prtn, this.errorMessage);
     }
 
@@ -110,19 +105,41 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         GlobalModel.clientSettingsViewModel.closeView();
     }
 
+    @boundMethod
+    handleChangeShortcut(newShortcut: string): void {
+        const prtn = GlobalCommandRunner.setGlobalShortcut(newShortcut);
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
+    getFKeys(): DropdownItem[] {
+        const opts: DropdownItem[] = [];
+        opts.push({ label: "Disabled", value: "" });
+        const platform = GlobalModel.getPlatform();
+        for (let i = 1; i <= 12; i++) {
+            const shortcut = (platform == "darwin" ? "Cmd" : "Alt") + "+F" + String(i);
+            opts.push({ label: shortcut, value: shortcut });
+        }
+        return opts;
+    }
+
+    getCurrentShortcut(): string {
+        const clientData = GlobalModel.clientData.get();
+        return clientData?.clientopts?.globalshortcut ?? "";
+    }
+
     render() {
-        let isHidden = GlobalModel.activeMainView.get() != "clientsettings";
+        const isHidden = GlobalModel.activeMainView.get() != "clientsettings";
         if (isHidden) {
             return null;
         }
 
-        let cdata: ClientDataType = GlobalModel.clientData.get();
+        const cdata: ClientDataType = GlobalModel.clientData.get();
-        let openAIOpts = cdata.openaiopts ?? {};
+        const openAIOpts = cdata.openaiopts ?? {};
-        let apiTokenStr = isBlank(openAIOpts.apitoken) ? "(not set)" : "********";
+        const apiTokenStr = isBlank(openAIOpts.apitoken) ? "(not set)" : "********";
-        let maxTokensStr = String(
+        const maxTokensStr = String(
             openAIOpts.maxtokens == null || openAIOpts.maxtokens == 0 ? 1000 : openAIOpts.maxtokens
         );
-        let curFontSize = GlobalModel.termFontSize.get();
+        const curFontSize = GlobalModel.termFontSize.get();
 
         return (
             <div className={cn("view clientsettings-view")}>
@@ -151,7 +168,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                     <div className="settings-field">
                         <div className="settings-label">Client Version</div>
                         <div className="settings-input">
-                            {VERSION} {BUILD}
+                            {appconst.VERSION} {appconst.BUILD}
                         </div>
                     </div>
                     <div className="settings-field">
@@ -212,6 +229,17 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                             />
                         </div>
                     </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Global Hotkey</div>
+                        <div className="settings-input">
+                            <Dropdown
+                                className="hotkey-dropdown"
+                                options={this.getFKeys()}
+                                defaultValue={this.getCurrentShortcut()}
+                                onChange={this.handleChangeShortcut}
+                            />
+                        </div>
+                    </div>
                     <SettingsError errorMessage={this.errorMessage} />
                 </div>
             </div>

src/app/common/elements/button.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .wave-button {
     background: none;

src/app/common/elements/checkbox.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .checkbox {
     display: flex;

src/app/common/elements/cmdstrcode.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .cmdstr-code {
     position: relative;

src/app/common/elements/cmdstrcode.tsx

@@ -6,8 +6,8 @@ import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
 
-import { ReactComponent as CheckIcon } from "../../assets/icons/line/check.svg";
+import { ReactComponent as CheckIcon } from "@/assets/icons/line/check.svg";
-import { ReactComponent as CopyIcon } from "../../assets/icons/history/copy.svg";
+import { ReactComponent as CopyIcon } from "@/assets/icons/history/copy.svg";
 
 import "./cmdstrcode.less";
 

src/app/common/elements/dropdown.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .wave-dropdown {
     position: relative;

src/app/common/elements/dropdown.tsx

@@ -17,7 +17,7 @@ interface DropdownDecorationProps {
 
 interface DropdownProps {
     label?: string;
-    options: { value: string; label: string }[];
+    options: DropdownItem[];
     value?: string;
     className?: string;
     onChange: (value: string) => void;

src/app/common/elements/inlinesettingstextedit.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .inline-edit {
     .icon {

src/app/common/elements/inlinesettingstextedit.tsx

@@ -7,12 +7,10 @@ import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
-import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "../../../util/keyutil";
+import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
 
 import "./inlinesettingstextedit.less";
 
-type OV<V> = mobx.IObservableValue<V>;
-
 @mobxReact.observer
 class InlineSettingsTextEdit extends React.Component<
     {

src/app/common/elements/inputdecoration.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .wave-input-decoration {
     display: flex;

src/app/common/elements/markdown.less

@@ -1,10 +1,11 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .markdown {
     color: @term-white;
     margin-bottom: 10px;
     font-family: @markdown-font;
     font-size: 14px;
+    overflow-wrap: break-word;
 
     code {
         background-color: @markdown-highlight;

src/app/common/elements/markdown.tsx

@@ -6,7 +6,7 @@ import * as mobxReact from "mobx-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import cn from "classnames";
-import { GlobalModel } from "../../../model/model";
+import { GlobalModel } from "@/models";
 
 import "./markdown.less";
 

src/app/common/elements/modal.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .wave-modal-container {
     position: fixed;

src/app/common/elements/modal.tsx

@@ -10,8 +10,6 @@ import { IconButton } from "./iconbutton";
 
 import "./modal.less";
 
-type OV<V> = mobx.IObservableValue<V>;
-
 interface ModalHeaderProps {
     onClose?: () => void;
     title: string;

src/app/common/elements/passwordfield.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .wave-password {
     .wave-textfield-inner-eye {