added openai bug fix

2026-04-22 15:26:58 -07:00 · 2024-03-27 17:04:34 -07:00
124 changed files with 2230 additions and 8657 deletions
@@ -107,12 +107,12 @@
    {
      "command": "app:openConnectionsView", 
      "keys": [],
-      "commandStr": ["/mainview connections"]
+      "commandStr": "/mainview connections"
    },
    {
      "command": "app:openSettingsView", 
      "keys": [],
-      "commandStr": ["/mainview clientsettings"]
+      "commandStr": "/mainview clientsettings"
    },
    {
      "command": "app:newTab",
@@ -149,39 +149,48 @@
    },
    {
      "command": "app:selectTab-1",
-      "keys": ["Cmd:1"]
+      "keys": ["Cmd:1"],
+      "commandStr":"/screen 1"
    },
    {
      "command": "app:selectTab-2",
-      "keys": ["Cmd:2"]
+      "keys": ["Cmd:2"],
+      "commandStr":"/screen 2"
    },
    {
      "command": "app:selectTab-3",
-      "keys": ["Cmd:3"]
+      "keys": ["Cmd:3"],
+      "commandStr":"/screen 3"
    },
    {
      "command": "app:selectTab-4",
-      "keys": ["Cmd:4"]
+      "keys": ["Cmd:4"],
+      "commandStr":"/screen 4"
    },
    {
      "command": "app:selectTab-5",
-      "keys": ["Cmd:5"]
+      "keys": ["Cmd:5"],
+      "commandStr":"/screen 5"
    },
    {
      "command": "app:selectTab-6",
-      "keys": ["Cmd:6"]
+      "keys": ["Cmd:6"],
+      "commandStr":"/screen 6"
    },
    {
      "command": "app:selectTab-7",
-      "keys": ["Cmd:7"]
+      "keys": ["Cmd:7"],
+      "commandStr":"/screen 7"
    },
    {
      "command": "app:selectTab-8",
-      "keys": ["Cmd:8"]
+      "keys": ["Cmd:8"],
+      "commandStr":"/screen 8"
    },
    {
      "command": "app:selectTab-9",
-      "keys": ["Cmd:9"]
+      "keys": ["Cmd:9"],
+      "commandStr":"/screen 9"
    },
    {
      "command": "app:selectTabLeft",
@@ -193,39 +202,48 @@
    },
    {
      "command": "app:selectWorkspace-1",
-      "keys": ["Cmd:Ctrl:1"]
+      "keys": ["Cmd:Ctrl:1"],
+      "commandStr": "/session 1"
    },
    {
      "command": "app:selectWorkspace-2",
-      "keys": ["Cmd:Ctrl:2"]
+      "keys": ["Cmd:Ctrl:2"],
+      "commandStr": "/session 2"
    },
    {
      "command": "app:selectWorkspace-3",
-      "keys": ["Cmd:Ctrl:3"]
+      "keys": ["Cmd:Ctrl:3"],
+      "commandStr": "/session 3"
    },
    {
      "command": "app:selectWorkspace-4",
-      "keys": ["Cmd:Ctrl:4"]
+      "keys": ["Cmd:Ctrl:4"],
+      "commandStr": "/session 4"
    },
    {
      "command": "app:selectWorkspace-5",
-      "keys": ["Cmd:Ctrl:5"]
+      "keys": ["Cmd:Ctrl:5"],
+      "commandStr": "/session 5"
    },
    {
      "command": "app:selectWorkspace-6",
-      "keys": ["Cmd:Ctrl:6"]
+      "keys": ["Cmd:Ctrl:6"],
+      "commandStr": "/session 6"
    },
    {
      "command": "app:selectWorkspace-7",
-      "keys": ["Cmd:Ctrl:7"]
+      "keys": ["Cmd:Ctrl:7"],
+      "commandStr": "/session 7"
    },
    {
      "command": "app:selectWorkspace-8",
-      "keys": ["Cmd:Ctrl:8"]
+      "keys": ["Cmd:Ctrl:8"],
+      "commandStr": "/session 8"
    },
    {
      "command": "app:selectWorkspace-9",
-      "keys": ["Cmd:Ctrl:9"]
+      "keys": ["Cmd:Ctrl:9"],
+      "commandStr": "/session 9"
    },
    {
      "command": "app:toggleSidebar",
@@ -238,7 +256,7 @@
    {
      "command": "app:openBookmarksView",
      "keys": ["Cmd:b"],
-      "commandStr": ["/bookmarks:show"]
+      "commandStr": "/bookmarks:show"
    },
    {
      "command": "bookmarks:edit",
@@ -283,7 +301,7 @@
    {
      "command": "cmdinput:openHistory",
      "keys": ["Ctrl:r"],
-      "commandStr": ["/history"]
+      "commandStr": "/history"
    },
    {
      "command": "cmdinput:openAIChat",
@@ -18,13 +18,11 @@
        "appId": "dev.commandline.waveterm"
    },
    "dependencies": {
-        "@lexical/react": "^0.14.3",
        "@monaco-editor/react": "^4.5.1",
        "@table-nav/core": "^0.0.7",
        "@table-nav/react": "^0.0.7",
        "@tanstack/match-sorter-utils": "^8.8.4",
        "@tanstack/react-table": "^8.10.3",
-        "@withfig/autocomplete": "^2.652.3",
        "autobind-decorator": "^2.4.0",
        "base64-js": "^1.5.1",
        "classnames": "^2.3.1",
@@ -33,7 +31,6 @@
        "electron-squirrel-startup": "^1.0.0",
        "electron-updater": "^6.1.8",
        "framer-motion": "^10.16.16",
-        "lexical": "^0.14.3",
        "mobx": "6.12",
        "mobx-react": "^7.5.0",
        "monaco-editor": "^0.44.0",
@@ -47,16 +44,13 @@
        "react-markdown": "^9.0.0",
        "remark": "^15.0.1",
        "remark-gfm": "^4.0.0",
-        "shell-quote": "^1.8.1",
        "sprintf-js": "^1.1.2",
        "throttle-debounce": "^5.0.0",
        "tsx-control-statements": "^5.1.1",
        "uuid": "^9.0.0",
        "winston": "^3.8.2",
-        "xterm": "^5.3.0",
-        "xterm-addon-serialize": "^0.11.0",
-        "xterm-addon-web-links": "^0.9.0",
-        "xterm-addon-webgl": "^0.16.0"
+        "xterm": "^5.0.0",
+        "xterm-addon-web-links": "^0.9.0"
    },
    "devDependencies": {
        "@babel/cli": "^7.17.10",
@@ -70,7 +64,6 @@
        "@babel/preset-env": "^7.18.2",
        "@babel/preset-react": "^7.23.3",
        "@babel/preset-typescript": "^7.17.12",
-        "@electron/rebuild": "^3.6.0",
        "@svgr/webpack": "^8.1.0",
        "@types/classnames": "^2.3.1",
        "@types/electron": "^1.6.10",
@@ -78,12 +71,10 @@
        "@types/papaparse": "^5.3.10",
        "@types/react": "^18.0.12",
        "@types/semver": "^7.5.6",
-        "@types/shell-quote": "^1.7.5",
        "@types/sprintf-js": "^1.1.3",
        "@types/throttle-debounce": "^5.0.1",
        "@types/uuid": "^9.0.7",
        "@types/webpack-env": "^1.18.3",
-        "@withfig/autocomplete-types": "^1.30.0",
        "babel-loader": "^9.1.3",
        "babel-plugin-jsx-control-statements": "^4.1.2",
        "copy-webpack-plugin": "^12.0.0",
@@ -112,4 +103,4 @@
    "scripts": {
        "postinstall": "electron-builder install-app-deps"
    }
-}
+}
@@ -42,19 +42,16 @@
    --app-bg-color: black;
    --app-accent-color: rgb(88, 193, 66);
    --app-accent-bg-color: rgba(88, 193, 66, 0.25);
-    --app-accent-bg-darker-color: rgba(88, 193, 66, 0.5);
    --app-text-color: rgb(211, 215, 207);
    --app-text-primary-color: rgb(255, 255, 255);
    --app-text-secondary-color: rgb(195, 200, 194);
    --app-text-disabled-color: rgb(173, 173, 173);
-    --app-text-bg-color: rgb(23, 23, 23);
-    --app-text-bg-disabled-color: rgb(51, 51, 51);
    --app-border-color: rgb(51, 51, 51);
-    --app-maincontent-bg-color: rgb(51, 51, 51);
+    --app-maincontent-bg-color: #333;
    --app-panel-bg-color: rgba(21, 23, 21, 1);
    --app-panel-bg-color-dev: rgb(21, 23, 48);
    --app-icon-color: rgb(139, 145, 138);
-    --app-icon-hover-color: rgb(255, 255, 255);
+    --app-icon-hover-color: #fff;
    --app-selected-mask-color: rgba(255, 255, 255, 0.06);

    /* global status colors */
@@ -90,7 +87,7 @@
    --form-element-border-color: rgba(241, 246, 243, 0.15);
    --form-element-bg-color: var(--app-bg-color);
    --form-element-text-color: var(--app-text-primary-color);
-    --form-element-primary-text-color: var(--app-text-primary-color);
+    --form-element-primary-text-color: var(--form-element-text-color);
    --form-element-label-color: var(--app-text-secondary-color);
    --form-element-primary-color: var(--app-accent-color);
    --form-element-secondary-color: rgba(255, 255, 255, 0.2);
@@ -125,18 +122,18 @@

    /* line colors */
    --line-sidebar-message-color: rgb(196, 160, 0);
-    --line-background: var(--app-panel-bg-color);
-    --line-avatar-color: rgb(236, 238, 236);
+    --line-background: rgba(21, 23, 21, 1);
+    --line-avatar-color: #eceeec;
    --line-text-color: rgb(211, 215, 207);
    --line-svg-fill-color: rgb(150, 152, 150);
-    --line-svg-hover-fill-color: rgb(236, 238, 236);
+    --line-svg-hover-fill-color: #eceeec;
    --line-separator-color: rgb(126, 126, 126);
    --line-error-color: var(--app-error-color);
    --line-warning-color: var(--app-warning-color);
-    --line-base-soft-blue-color: rgb(114, 159, 207);
+    --line-base-soft-blue-color: #729fcf;
    --line-active-border-color: var(--app-accent-color);
    --line-selected-bg-color: rgba(255, 255, 255, 0.05);
-    --line-selected-border-left-color: rgb(119, 119, 119);
+    --line-selected-border-left-color: #777777;
    --line-selected-error-border-color: rgba(204, 0, 0, 0.8);
    --line-selected-error-bg-color: rgb(19, 4, 3);
    --line-error-bg-color: rgba(200, 0, 0, 0.1);
@@ -155,21 +152,22 @@
    /* table colors */
    --table-border-color: rgba(241, 246, 243, 0.15);
    --table-thead-border-top-color: rgba(250, 250, 250, 0.1);
-    --table-thead-bright-border-color: rgb(204, 204, 204);
+    --table-thead-bright-border-color: #ccc;
    --table-thead-bg-color: rgba(250, 250, 250, 0.02);
    --table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
    --table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
-    --table-tr-selected-bg-color: rgb(34, 34, 34);
-    --table-tr-selected-hover-bg-color: var(--app-maincontent-bg-color);
+    --table-tr-selected-bg-color: #222;
+    --table-tr-selected-hover-bg-color: #333;

    /* cmdinput colors */
-    --cmdinput-bg-color: var(--app-text-bg-color);
+    --cmdinput-textarea-bg-color: #171717;
    --cmdinput-text-error-color: var(--term-red);
    --cmdinput-history-item-error-color: var(--term-bright-red);
    --cmdinput-history-item-selected-error-color: var(--term-bright-red);
-    --cmdinput-button-bg-color: var(--tab-green);
-    --cmdinput-disabled-bg-color: var(--app-text-bg-disabled-color);
-    --cmdinput-history-bg-color: var(--app-bg-color);
+    --cmdinput-button-bg-color: rgb(88, 193, 66);
+    --cmdinput-comment-button-bg-color: rgb(57, 113, 255);
+    --cmdinput-disabled-icon-color: rgb(76, 81, 75, 1);
+    --cmdinput-history-bg-color: rgb(21, 23, 21, 1);

    /* screen view color */
    --screen-view-text-caption-color: rgb(139, 145, 138);
@@ -5,20 +5,20 @@
@import url("./term-light.css");

 :root {
-    --app-bg-color: rgb(254, 254, 254);
+    --app-bg-color: #fefefe;
    --app-accent-color: rgb(75, 166, 57);
    --app-accent-bg-color: rgba(75, 166, 57, 0.2);
-    --app-text-color: rgb(0, 0, 0);
-    --app-text-primary-color: rgb(23, 23, 23);
-    --app-text-secondary-color: rgb(76, 76, 76);
+    --app-text-color: #000;
+    --app-text-primary-color: rgb(0, 0, 0, 0.9);
+    --app-text-secondary-color: rgb(0, 0, 0, 0.7);
    --app-border-color: rgb(139 145 138);
-    --app-panel-bg-color: rgb(224, 224, 224);
-    --app-panel-bg-color-dev: rgb(224, 224, 224);
-    --app-icon-color: rgb(110, 110, 110);
-    --app-icon-hover-color: rgb(80, 80, 80);
+    --app-panel-bg-color: #e0e0e0;
+    --app-panel-bg-color-dev: #e0e0e0;
+    --app-icon-color: rgb(80, 80, 80);
+    --app-icon-hover-color: rgb(100, 100, 100);
    --app-selected-mask-color: rgba(0, 0, 0, 0.06);

-    --input-bg-color: rgb(238, 238, 238);
+    --input-bg-color: #eeeeee;

    /* tab color */
    --tab-white: rgb(0, 0, 0, 0.6);
@@ -30,19 +30,19 @@
    --table-thead-bg-color: rgba(250, 250, 250, 0.15);
    --table-tr-border-bottom-color: rgba(0, 0, 0, 0.15);
    --table-tr-hover-bg-color: rgba(0, 0, 0, 0.15);
-    --table-tr-selected-bg-color: rgb(221, 221, 221);
-    --table-tr-selected-hover-bg-color: rgb(204, 204, 204);
+    --table-tr-selected-bg-color: #dddddd;
+    --table-tr-selected-hover-bg-color: #cccccc;

    /* form colors */
    --form-element-border-color: rgba(0, 0, 0, 0.3);
    --form-element-bg-color: var(--app-bg-color);
-    --form-element-text-color: var(--app-text-primary-color);
-    --form-element-primary-text-color: var(--app-text-primary-color);
+    --form-element-text-color: var(--app-text-color);
+    --form-element-primary-text-color: var(--app-bg-color);
    --form-element-label-color: rgba(0, 0, 0, 0.6);
    --form-element-secondary-color: rgba(0, 0, 0, 0.09);
    --form-element-icon-color: rgb(0, 0, 0, 0.6);
-    --form-element-disabled-text-color: rgb(183, 183, 183);
-    --form-element-placeholder-color: rgb(183, 183, 183);
+    --form-element-disabled-text-color: #b7b7b7;
+    --form-element-placeholder-color: #b7b7b7;

    --markdown-bg-color: rgb(0, 0, 0, 0.1);

@@ -50,6 +50,8 @@
    --modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);

    /* cmd input */
+    --cmdinput-textarea-bg-color: rgba(0, 0, 0, 0.1);
+    --cmdinput-textarea-border-color: var(--form-element-border-color);

    /* scroll colors */
    --scrollbar-background-color: var(--app-bg-color);
@@ -62,15 +64,15 @@
    --line-actions-inactive-color: rgba(0, 0, 0, 0.3);
    --line-actions-active-color: rgba(0, 0, 0, 1);

-    --logo-button-hover-bg-color: rgb(240, 240, 240);
+    --logo-button-hover-bg-color: #f0f0f0;

    --xterm-viewport-border-color: rgba(0, 0, 0, 0.3);

-    --datepicker-cell-hover-bg-color: rgb(240, 240, 240);
+    --datepicker-cell-hover-bg-color: #f0f0f0;
    --datepicker-cell-other-text-color: rgba(0, 0, 0, 0.3);
    --datepicker-header-fade-color: rgba(0, 0, 0, 0.4);
-    --datepicker-year-header-bg-color: rgb(245, 245, 245);
-    --datepicker-year-header-border-color: rgb(220, 220, 220);
+    --datepicker-year-header-bg-color: #f5f5f5;
+    --datepicker-year-header-border-color: #dcdcdc;

    /* toggle colors */
    --toggle-thumb-color: var(--app-bg-color);
@@ -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-solid fa-sidebar-flip"></i>
+                            <i className="fa-sharp fa-regular fa-lightbulb"></i>
                        </Button>
                    </div>
                </If>
@@ -64,8 +64,3 @@ export enum StatusIndicatorLevel {

 // matches packet.go
 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";
@@ -6,14 +6,13 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
-import { GlobalModel, GlobalCommandRunner, RemotesModel } from "@/models";
+import { GlobalModel, GlobalCommandRunner, RemotesModel, getApi } from "@/models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
 import { commandRtnHandler, isBlank } from "@/util/util";
-import { getTermThemes } from "@/util/themeutil";
 import * as appconst from "@/app/appconst";
-import { MainView } from "@/common/elements/mainview";

 import "./clientsettings.less";
+import { MainView } from "../common/elements/mainview";

 class ClientSettingsKeybindings extends React.Component<{}, {}> {
    componentDidMount() {
@@ -70,20 +69,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
            return;
        }
        const prtn = GlobalCommandRunner.setTheme(themeSource, false);
-        GlobalModel.getElectronApi().setNativeThemeSource(themeSource);
-        commandRtnHandler(prtn, this.errorMessage);
-    }
-
-    @boundMethod
-    handleChangeTermTheme(theme: string): void {
-        // For global terminal theme, the key is global, otherwise it's either
-        // sessionId or screenId.
-        const currTheme = GlobalModel.getTermTheme()["global"];
-        if (currTheme == theme) {
-            return;
-        }
-
-        const prtn = GlobalCommandRunner.setGlobalTermTheme(theme, false);
+        getApi().setNativeThemeSource(themeSource);
        commandRtnHandler(prtn, this.errorMessage);
    }

@@ -107,20 +93,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
            prtn = GlobalCommandRunner.releaseCheckAutoOff(false);
        }
        commandRtnHandler(prtn, this.errorMessage);
-        GlobalModel.getElectronApi().changeAutoUpdate(val);
-    }
-
-    @boundMethod
-    handleChangeAutocompleteEnabled(val: boolean): void {
-        const prtn: Promise<CommandRtnType> = GlobalCommandRunner.setAutocompleteEnabled(val);
-        commandRtnHandler(prtn, this.errorMessage);
-    }
-
-    @boundMethod
-    handleChangeAutocompleteDebuggingEnabled(val: boolean): void {
-        mobx.action(() => {
-            GlobalModel.autocompleteModel.loggingEnabled = val;
-        })();
+        getApi().changeAutoUpdate(val);
    }

    getFontSizes(): DropdownItem[] {
@@ -220,8 +193,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
        const curFontSize = GlobalModel.getTermFontSize();
        const curFontFamily = GlobalModel.getTermFontFamily();
        const curTheme = GlobalModel.getThemeSource();
-        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}>
@@ -262,19 +233,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                            />
                        </div>
                    </div>
-                    <If condition={termThemes.length > 0}>
-                        <div className="settings-field">
-                            <div className="settings-label">Terminal Theme</div>
-                            <div className="settings-input">
-                                <Dropdown
-                                    className="terminal-theme-dropdown"
-                                    options={termThemes}
-                                    defaultValue={currTermTheme}
-                                    onChange={this.handleChangeTermTheme}
-                                />
-                            </div>
-                        </div>
-                    </If>
                    <div className="settings-field">
                        <div className="settings-label">Client ID</div>
                        <div className="settings-input">{cdata.clientid}</div>
@@ -367,24 +325,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                            />
                        </div>
                    </div>
-                    <div className="settings-field">
-                        <div className="settings-label">Command Autocomplete</div>
-                        <div className="settings-input">
-                            <Toggle
-                                checked={cdata.clientopts.autocompleteenabled ?? false}
-                                onChange={this.handleChangeAutocompleteEnabled}
-                            />
-                        </div>
-                    </div>
-                    <div className="settings-field">
-                        <div className="settings-label">Command Autocomplete Debugging</div>
-                        <div className="settings-input">
-                            <Toggle
-                                checked={GlobalModel.autocompleteModel.loggingEnabled}
-                                onChange={this.handleChangeAutocompleteDebuggingEnabled}
-                            />
-                        </div>
-                    </div>
                    <SettingsError errorMessage={this.errorMessage} />
                </div>
            </MainView>
@@ -27,10 +27,6 @@
        }
    }

-    &.primary.danger {
-        background: var(--app-error-color);
-    }
-
    &.primary.outlined {
        background: none;
        border: 1px solid var(--form-element-primary-color);
@@ -40,37 +36,6 @@
        }
    }

-    &.primary.greyoutlined {
-        background: none;
-        border: 1px solid var(--app-text-secondary-color);
-
-        i {
-            fill: var(--app-text-secondary-color);
-        }
-    }
-
-    &.primary.outlined,
-    &.primary.greyoutlined {
-        &.hover-danger:hover {
-            color: var(--form-element-primary-text-color);
-            border: 1px solid var(--app-error-color);
-            background: var(--app-error-color);
-        }
-    }
-
-    &.primary.outlined.danger {
-        background: none;
-        border: 1px solid var(--app-error-color);
-
-        i {
-            fill: var(--app-error-color);
-        }
-    }
-
-    &.greytext {
-        color: var(--app-text-secondary-color);
-    }
-
    &.primary.ghost {
        background: none;
        i {
@@ -78,13 +43,6 @@
        }
    }

-    &.primary.ghost.danger {
-        background: none;
-        i {
-            fill: var(--app-error-color);
-        }
-    }
-
    &.secondary {
        color: var(--form-element-text-color);
        background: var(--form-element-secondary-color);
@@ -98,11 +56,6 @@
        border: 1px solid var(--form-element-text-color);
    }

-    &.secondary.outlined.danger {
-        background: none;
-        border: 1px solid var(--app-error-color);
-    }
-
    &.secondary.ghost {
        background: none;
    }
@@ -6,7 +6,7 @@ import "./button.less";

 interface ButtonProps {
    children: React.ReactNode;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: () => void;
    disabled?: boolean;
    leftIcon?: React.ReactNode;
    rightIcon?: React.ReactNode;
@@ -14,7 +14,6 @@ interface ButtonProps {
    autoFocus?: boolean;
    className?: string;
    termInline?: boolean;
-    title?: string;
 }

 class Button extends React.Component<ButtonProps> {
@@ -24,14 +23,14 @@ class Button extends React.Component<ButtonProps> {
    };

    @boundMethod
-    handleClick(e) {
+    handleClick() {
        if (this.props.onClick && !this.props.disabled) {
-            this.props.onClick(e);
+            this.props.onClick();
        }
    }

    render() {
-        const { leftIcon, rightIcon, children, disabled, style, autoFocus, termInline, className, title } = this.props;
+        const { leftIcon, rightIcon, children, disabled, style, autoFocus, termInline, className } = this.props;

        return (
            <button
@@ -40,7 +39,6 @@ class Button extends React.Component<ButtonProps> {
                disabled={disabled}
                style={style}
                autoFocus={autoFocus}
-                title={title}
            >
                {leftIcon && <span className="icon-left">{leftIcon}</span>}
                {children}
@@ -1,7 +0,0 @@
-.copy-button {
-    padding: 5px 5px;
-
-    .fa-check {
-        color: var(--app-success-color);
-    }
-}
@@ -1,51 +0,0 @@
-import * as React from "react";
-import { Button } from "./button";
-import { boundMethod } from "autobind-decorator";
-import * as mobxReact from "mobx-react";
-import * as mobx from "mobx";
-
-import "./copybutton.less";
-
-type CopyButtonProps = {
-    title: string;
-    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-};
-
-@mobxReact.observer
-class CopyButton extends React.Component<CopyButtonProps, {}> {
-    isCopied: OV<boolean> = mobx.observable.box(false, { name: "isCopied" });
-
-    @boundMethod
-    handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {
-        if (this.isCopied.get()) {
-            return;
-        }
-        mobx.action(() => {
-            this.isCopied.set(true);
-        })();
-        setTimeout(() => {
-            mobx.action(() => {
-                this.isCopied.set(false);
-            })();
-        }, 2000);
-        if (this.props.onClick) {
-            this.props.onClick(e);
-        }
-    }
-
-    render() {
-        const { title, onClick } = this.props;
-        const isCopied = this.isCopied.get();
-        return (
-            <Button onClick={this.handleOnClick} className="copy-button secondary ghost" title={title}>
-                {isCopied ? (
-                    <i className="fa-sharp fa-solid fa-check"></i>
-                ) : (
-                    <i className="fa-sharp fa-solid fa-copy"></i>
-                )}
-            </Button>
-        );
-    }
-}
-
-export { CopyButton };
@@ -5,7 +5,7 @@
    width: 100%;
    border: 2px solid var(--form-element-border-color);
    border-radius: 6px;
-    line-height: 20px;
+    line-height: 22px;
    background: var(--form-element-bg-color);

    &.no-label {
@@ -63,14 +63,11 @@
        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);
@@ -53,7 +53,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
        };
        this.wrapperRef = React.createRef();
        this.menuRef = React.createRef();
-        this.curUuid = uuidv4();
+        this.curUuid == uuidv4();
    }

    componentDidMount() {
@@ -100,9 +100,6 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {

    @boundMethod
    handleClick() {
-        if (!this.state.isOpen || !this.state.isTouched) {
-            this.registerKeybindings();
-        }
        this.toggleDropdown();
    }

@@ -112,7 +109,6 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
        this.registerKeybindings();
    }

-    @boundMethod
    registerKeybindings() {
        let keybindManager = GlobalModel.keybindManager;
        let domain = "dropdown-" + this.curUuid;
@@ -126,7 +122,6 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
        });
        keybindManager.registerKeybinding("control", domain, "generic:cancel", (waveEvent) => {
            this.setState({ isOpen: false });
-            this.unregisterKeybindings();
            return true;
        });
        keybindManager.registerKeybinding("control", domain, "generic:selectAbove", (waveEvent) => {
@@ -163,19 +158,17 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
        if (isOpen) {
            const option = options[highlightedIndex];
            if (option) {
-                this.handleSelect(option, undefined);
+                this.handleSelect(option.value, undefined);
            }
        } else {
            this.toggleDropdown();
        }
    }

-    @boundMethod
    handleBlur() {
        this.unregisterKeybindings();
    }

-    @boundMethod
    unregisterKeybindings() {
        let domain = "dropdown-" + this.curUuid;
        GlobalModel.keybindManager.unregisterDomain(domain);
@@ -185,19 +178,17 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
    handleKeyDown(event: React.KeyboardEvent) {}

    @boundMethod
-    handleSelect({ value, noop }: DropdownItem, event?: React.MouseEvent | React.KeyboardEvent) {
+    handleSelect(value: string, event?: React.MouseEvent | React.KeyboardEvent) {
        const { onChange } = this.props;
        if (event) {
            event.stopPropagation(); // This stops the event from bubbling up to the wrapper
        }

-        onChange(value);
-        this.setState({ isOpen: false, isTouched: true });
-        this.unregisterKeybindings();
-
-        if (!("value" in this.props) && !noop) {
+        if (!("value" in this.props)) {
            this.setState({ internalValue: value });
        }
+        onChange(value);
+        this.setState({ isOpen: false, isTouched: true });
    }

    @boundMethod
@@ -246,11 +237,10 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
                              className={cn("wave-dropdown-item unselectable", {
                                  "wave-dropdown-item-highlighted": index === highlightedIndex,
                              })}
-                              onClick={(e) => this.handleSelect(option, e)}
+                              onClick={(e) => this.handleSelect(option.value, 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>
                      ))}
@@ -18,4 +18,3 @@ export { Toggle } from "./toggle";
 export { Tooltip } from "./tooltip";
 export { TabIcon } from "./tabicon";
 export { DatePicker } from "./datepicker";
-export { CopyButton } from "./copybutton";
@@ -131,7 +131,7 @@ class InlineSettingsTextEdit extends React.Component<
                        </div>
                        <div className="control">
                            <div
-                                onMouseDown={this.cancelChange}
+                                onClick={this.cancelChange}
                                title="Cancel (Esc)"
                                className="button is-prompt-danger is-outlined is-small"
                            >
@@ -142,7 +142,7 @@ class InlineSettingsTextEdit extends React.Component<
                        </div>
                        <div className="control">
                            <div
-                                onMouseDown={this.confirmChange}
+                                onClick={this.confirmChange}
                                title="Confirm (Enter)"
                                className="button is-wave-green is-outlined is-small"
                            >
@@ -7,10 +7,8 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import cn from "classnames";
 import { GlobalModel } from "@/models";
-import { v4 as uuidv4 } from "uuid";

 import "./markdown.less";
-import { boundMethod } from "autobind-decorator";

 function LinkRenderer(props: any): any {
    let newUrl = "https://extern?" + encodeURIComponent(props.href);
@@ -30,17 +28,14 @@ function CodeRenderer(props: any): any {
 }

@mobxReact.observer
-class CodeBlockMarkdown extends React.Component<
-    { children: React.ReactNode; codeSelectSelectedIndex?: number; uuid: string },
-    {}
-> {
+class CodeBlockMarkdown extends React.Component<{ children: React.ReactNode; codeSelectSelectedIndex?: number }, {}> {
    blockIndex: number;
    blockRef: React.RefObject<HTMLPreElement>;

    constructor(props) {
        super(props);
        this.blockRef = React.createRef();
-        this.blockIndex = GlobalModel.inputModel.addCodeBlockToCodeSelect(this.blockRef, this.props.uuid);
+        this.blockIndex = GlobalModel.inputModel.addCodeBlockToCodeSelect(this.blockRef);
    }

    render() {
@@ -67,21 +62,9 @@ class Markdown extends React.Component<
    { text: string; style?: any; extraClassName?: string; codeSelect?: boolean },
    {}
 > {
-    curUuid: string;
-
-    constructor(props) {
-        super(props);
-        this.curUuid = uuidv4();
-    }
-
-    @boundMethod
-    CodeBlockRenderer(props: any, codeSelect: boolean, codeSelectIndex: number, curUuid: string): any {
+    CodeBlockRenderer(props: any, codeSelect: boolean, codeSelectIndex: number): any {
        if (codeSelect) {
-            return (
-                <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex} uuid={curUuid}>
-                    {props.children}
-                </CodeBlockMarkdown>
-            );
+            return <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex}>{props.children}</CodeBlockMarkdown>;
        } else {
            const clickHandler = (e: React.MouseEvent<HTMLElement>) => {
                let blockText = (e.target as HTMLElement).innerText;
@@ -107,7 +90,7 @@ class Markdown extends React.Component<
            h5: (props) => HeaderRenderer(props, 5),
            h6: (props) => HeaderRenderer(props, 6),
            code: (props) => CodeRenderer(props),
-            pre: (props) => this.CodeBlockRenderer(props, codeSelect, curCodeSelectIndex, this.curUuid),
+            pre: (props) => this.CodeBlockRenderer(props, codeSelect, curCodeSelectIndex),
        };
        return (
            <div className={cn("markdown content", this.props.extraClassName)} style={this.props.style}>
@@ -5,7 +5,7 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
-import { GlobalModel } from "@/models";
+import { GlobalModel, getApi } from "@/models";
 import { Modal, LinkButton } from "@/elements";
 import * as util from "@/util/util";
 import * as appconst from "@/app/appconst";
@@ -26,7 +26,7 @@ class AboutModal extends React.Component<{}, {}> {

    @boundMethod
    updateApp(): void {
-        GlobalModel.getElectronApi().installAppUpdate();
+        getApi().installAppUpdate();
    }

    @boundMethod
@@ -312,7 +312,7 @@ class CreateRemoteConnModal extends React.Component<{}, {}> {
                                endDecoration: (
                                    <InputDecoration>
                                        <Tooltip
-                                            message={`(Required) The path to your ssh private key file.`}
+                                            message={`(Required) The path to your ssh key file.`}
                                            icon={<i className="fa-sharp fa-regular fa-circle-question" />}
                                        >
                                            <i className="fa-sharp fa-regular fa-circle-question" />
@@ -338,7 +338,7 @@ class EditRemoteConnModal extends React.Component<{}, {}> {
                            endDecoration: (
                                <InputDecoration>
                                    <Tooltip
-                                        message={`(Required) The path to your ssh private key file.`}
+                                        message={`(Required) The path to your ssh key file.`}
                                        icon={<i className="fa-sharp fa-regular fa-circle-question" />}
                                    >
                                        <i className="fa-sharp fa-regular fa-circle-question" />
@@ -11,9 +11,8 @@ import { GlobalModel, GlobalCommandRunner, Screen } from "@/models";
 import { SettingsError, Modal, Dropdown, Tooltip } from "@/elements";
 import * as util from "@/util/util";
 import { Button } from "@/elements";
-import { If } from "tsx-control-statements/components";
-import { commandRtnHandler } from "@/util/util";
-import { getTermThemes } from "@/util/themeutil";
+import { ReactComponent as GlobeIcon } from "@/assets/icons/globe.svg";
+import { ReactComponent as StatusCircleIcon } from "@/assets/icons/statuscircle.svg";
 import {
    TabColorSelector,
    TabIconSelector,
@@ -154,34 +153,11 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
        });
    }

-    @boundMethod
-    handleChangeTermTheme(theme: string): void {
-        const currTheme = GlobalModel.getTermTheme()[this.screenId];
-        if (currTheme == theme) {
-            return;
-        }
-        const prtn = GlobalCommandRunner.setScreenTermTheme(this.screenId, theme, false);
-        commandRtnHandler(prtn, this.errorMessage);
-    }
-
-    @boundMethod
-    selectRemote(cname: string): void {
-        let prtn = GlobalCommandRunner.screenSetRemote(cname, true, false);
-        util.commandRtnHandler(prtn, this.errorMessage);
-    }
-
    render() {
        const screen = this.screen;
        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()})`} />
@@ -210,19 +186,6 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                            <TabIconSelector screen={screen} errorMessage={this.errorMessage} />
                        </div>
                    </div>
-                    <If condition={termThemes.length > 0}>
-                        <div className="settings-field">
-                            <div className="settings-label">Terminal Theme</div>
-                            <div className="settings-input">
-                                <Dropdown
-                                    className="terminal-theme-dropdown"
-                                    options={termThemes}
-                                    defaultValue={currTermTheme}
-                                    onChange={this.handleChangeTermTheme}
-                                />
-                            </div>
-                        </div>
-                    </If>
                    <div className="settings-field">
                        <div className="settings-label actions-label">
                            <div>Actions</div>
--- a/Show More
+++ b/Show More