merge branch 'main' into ssh-extra-fixes

feat: add connection segfault protection
A user recently reported a crash on a failed connection. This handles these errors more gracefully than the previous system and prints the errors to the connection prompt.
2026-04-22 15:26:58 -07:00 · 2024-03-14 16:20:55 -07:00 · 2024-03-14 16:19:32 -07:00 · 2024-03-14 01:07:54 -07:00 · 2024-03-13 18:08:29 -07:00 · 2024-03-08 00:32:46 -08:00
172 changed files with 8159 additions and 11728 deletions
@@ -1,8 +1,7 @@
 [
    {
      "command": "system:toggleDeveloperTools",
-      "keys": ["Cmd:Option:i"],
-      "info": "Opens the chrome developer tool menu"
+      "keys": ["Cmd:Option:i"]
    },
    {
      "command": "system:hideWindow",
@@ -16,62 +15,10 @@
      "command": "generic:confirm",
      "keys": ["Enter"]
    },
-    {
-      "command": "generic:expandTextInput",
-      "keys": ["Shift:Enter", "Ctrl:Enter"]
-    },
    {
      "command": "generic:deleteItem",
      "keys": ["Backspace", "Delete"]
    },
-    {
-      "command": "generic:space",
-      "keys": ["Space"]
-    },
-    {
-      "command": "generic:tab",
-      "keys": ["Tab"]
-    },
-    {
-      "command": "generic:numpad-0",
-      "keys": ["0"]
-    },
-    {
-      "command": "generic:numpad-1",
-      "keys": ["1"]
-    },
-    {
-      "command": "generic:numpad-2",
-      "keys": ["2"]
-    },
-    {
-      "command": "generic:numpad-3",
-      "keys": ["3"]
-    },
-    {
-      "command": "generic:numpad-4",
-      "keys": ["4"]
-    },
-    {
-      "command": "generic:numpad-5",
-      "keys": ["5"]
-    },
-    {
-      "command": "generic:numpad-6",
-      "keys": ["6"]
-    },
-    {
-      "command": "generic:numpad-7",
-      "keys": ["7"]
-    },
-    {
-      "command": "generic:numpad-8",
-      "keys": ["8"]
-    },
-    {
-      "command": "generic:numpad-9",
-      "keys": ["9"]
-    },
    {
      "command": "generic:selectAbove",
      "keys": ["ArrowUp"]
@@ -80,14 +27,6 @@
      "command": "generic:selectBelow",
      "keys": ["ArrowDown"]
    },
-    {
-      "command": "generic:selectLeft",
-      "keys": ["ArrowLeft"]
-    },
-    {
-      "command": "generic:selectRight",
-      "keys": ["ArrowRight"]
-    },
    {
      "command": "generic:selectPageAbove",
      "keys": ["PageUp"]
@@ -128,8 +67,7 @@
    },
    {
      "command": "app:restartCommand",
-      "keys": ["Cmd:r"],
-      "info": "Restarts the command running in the current selected line"
+      "keys": ["Cmd:r"]
    },
    {
      "command": "app:restartLastCommand",
@@ -149,48 +87,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",
@@ -6,7 +6,7 @@
    },
    "productName": "Wave",
    "description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
-    "version": "0.7.2",
+    "version": "0.7.0",
    "main": "dist/emain.js",
    "license": "Apache-2.0",
    "repository": {
@@ -23,6 +23,7 @@
        "@table-nav/react": "^0.0.7",
        "@tanstack/match-sorter-utils": "^8.8.4",
        "@tanstack/react-table": "^8.10.3",
+        "@types/semver": "^7.5.6",
        "autobind-decorator": "^2.4.0",
        "base64-js": "^1.5.1",
        "classnames": "^2.3.1",
@@ -32,28 +33,23 @@
        "electron-updater": "^6.1.8",
        "framer-motion": "^10.16.16",
        "mobx": "6.12",
-        "mobx-preact": "^7.5.0",
+        "mobx-react": "^7.5.0",
        "monaco-editor": "^0.44.0",
        "mustache": "^4.2.0",
        "node-fetch": "^3.2.10",
-        "overlayscrollbars": "^2.6.1",
-        "overlayscrollbars-react": "^0.5.5",
        "papaparse": "^5.4.1",
-        "preact": "^10.20.1",
-        "react": "npm:@preact/compat",
-        "react-dom": "npm:@preact/compat",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0",
        "react-markdown": "^9.0.0",
        "remark": "^15.0.1",
        "remark-gfm": "^4.0.0",
        "sprintf-js": "^1.1.2",
        "throttle-debounce": "^5.0.0",
-        "tsx-control-statements": "^5.1.1",
+        "tsx-control-statements": "^4.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,24 +66,24 @@
        "@svgr/webpack": "^8.1.0",
        "@types/classnames": "^2.3.1",
        "@types/electron": "^1.6.10",
-        "@types/node": "^20.11.0",
+        "@types/node": "20.11.0",
        "@types/papaparse": "^5.3.10",
-        "@types/semver": "^7.5.6",
+        "@types/react": "^18.0.12",
        "@types/sprintf-js": "^1.1.3",
        "@types/throttle-debounce": "^5.0.1",
-        "@types/uuid": "^9.0.7",
+        "@types/uuid": "9.0.7",
        "@types/webpack-env": "^1.18.3",
        "babel-loader": "^9.1.3",
        "babel-plugin-jsx-control-statements": "^4.1.2",
-        "copy-webpack-plugin": "^12.0.0",
+        "copy-webpack-plugin": "^11.0.0",
        "css-loader": "^6.7.1",
-        "electron": "^29.0.1",
+        "electron": "29.0.1",
        "electron-builder": "^24.13.3",
        "electron-builder-squirrel-windows": "^24.13.3",
        "file-loader": "^6.2.0",
        "http-server": "^14.1.1",
        "less": "^4.1.2",
-        "less-loader": "^12.0.0",
+        "less-loader": "^11.0.0",
        "lodash-webpack-plugin": "^0.11.6",
        "mini-css-extract-plugin": "^2.6.0",
        "prettier": "^2.8.8",
@@ -98,11 +94,11 @@
        "webpack": "^5.73.0",
        "webpack-bundle-analyzer": "^4.10.1",
        "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.0.4",
+        "webpack-dev-server": "^4.9.1",
        "webpack-merge": "^5.8.0",
        "yaml": "^2.4.0"
    },
    "scripts": {
        "postinstall": "electron-builder install-app-deps"
    }
-}
+}
@@ -5,14 +5,14 @@
        <base href="../" />
        <script charset="UTF-8" src="dist-dev/waveterm.js"></script>
        <link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
-        <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css" />
-        <link rel="stylesheet" href="public/fontawesome/css/brands.min.css" />
-        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css" />
-        <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css" />
-        <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/brands.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css">
        <link rel="stylesheet" href="dist-dev/waveterm.css" />

-        <link rel="stylesheet" id="theme-stylesheet" href="public/themes/themequery.css" />
+        <link rel="stylesheet" id="theme-stylesheet" href="public/themes/default.css">
    </head>
    <body>
        <div id="measure"></div>
@@ -5,14 +5,14 @@
        <base href="../" />
        <script charset="UTF-8" src="dist/waveterm.js"></script>
        <link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
-        <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css" />
-        <link rel="stylesheet" href="public/fontawesome/css/brands.min.css" />
-        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css" />
-        <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css" />
-        <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/brands.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css">
        <link rel="stylesheet" href="dist/waveterm.css" />

-        <link rel="stylesheet" id="theme-stylesheet" href="public/themes/themequery.css" />
+        <link rel="stylesheet" id="theme-stylesheet" href="public/themes/default.css" />
    </head>
    <body>
        <div id="measure"></div>
@@ -7,6 +7,16 @@
 :root {
    --fa-style-family: "Font Awesome 6 Sharp";

+    /* these variables are overridden by user settings */
+    /*
+    --termfontfamily: "Hack";
+    --termfontsize: 13px;
+    --termlineheight: 15px;
+    --termpad: 7px;
+    --termfontsize-sm: 11px;
+    --termlineheight-sm: 13px;
+    */
+
    /* base fonts */
    --base-font: normal 15px / normal "Lato", sans-serif;

@@ -34,18 +44,16 @@
    --floating-logo-width: 40px;
    --floating-logo-height: var(--screentabs-height);

-    /* right sidebar triggers */
-    --floating-right-sidebar-triggers-width-darwin: 50px;
-    --floating-right-sidebar-triggers-width: 40px;
-
    /* global colors */
    --app-bg-color: black;
    --app-accent-color: rgb(88, 193, 66);
-    --app-accent-bg-color: rgba(88, 193, 66, 0.25);
+    --app-accent-bg-color: rgba(88, 193, 66, 0.2);
+    --app-error-color: rgb(229, 77, 46);
+    --app-warning-color: rgb(224, 185, 86);
+    --app-success-color: rgb(78, 154, 6);
    --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-border-color: rgb(51, 51, 51);
    --app-maincontent-bg-color: #333;
    --app-panel-bg-color: rgba(21, 23, 21, 1);
@@ -54,20 +62,19 @@
    --app-icon-hover-color: #fff;
    --app-selected-mask-color: rgba(255, 255, 255, 0.06);

-    /* global status colors */
-    --app-error-color: rgb(229, 77, 46);
-    --app-warning-color: rgb(224, 185, 86);
-    --app-success-color: rgb(78, 154, 6);
-    --app-idle-color: var(--app-text-secondary-color);
+    /* icon colors */

    /* just for macos */
    --app-border-radius-darwin: 10px;

+    /* global generic colors */
+    --app-black: rgb(0, 0, 0);
+
    /* scrollbar colors */
+    /* --scrollbar-background-color: rgba(21, 23, 21, 1); */
    --scrollbar-background-color: var(--app-bg-color);
    --scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
    --scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
-    --scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6);

    /* code color */
    --pre-bg-color: rgb(0, 0, 0);
@@ -87,7 +94,6 @@
    --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-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);
@@ -106,15 +112,34 @@
    --markdown-bg-color: rgb(35, 35, 35);
    --markdown-outline-color: var(--form-element-primary-color);

+    /* status(remote) colors */
+    /* todo: all status colors must be unified */
+    --status-connected-color: var(--app-success-color);
+    --status-connecting-color: var(--app-warning-color);
+    --status-error-color: var(--app-error-color);
+    --status-disconnected-color: var(--app-text-secondary-color);
+
+    /* status indicator colors */
+    /* todo: all status colors must be unified */
+    --status-indicator-color: var(--app-text-color);
+    --status-indicator-error: var(--status-error-color);
+    --status-indicator-success: var(--status-connected-color);
+
+    /* status(version) colors */
+    /* todo: all status colors must be unified */
+    --status-outdated-color: var(--status-connecting-color);
+    --status-updated-color: var(--status-connected-color);
+
    /* term status colors */
-    --term-error-color: var(--app-error-color);
-    --term-warning-color: var(--app-warning-color);
+    /* todo: all status colors must be unified */
+    --term-error-color: var(--status-error-color);
+    --term-warning-color: var(--status-connecting-color);

    /* hotkey colors */
    --hotkey-text-color: var(--app-text-secondary-color);

    /* sidebar colors */
-    --sidebar-highlight-color: var(--app-accent-bg-color);
+    --sidebar-highlight-color: rgba(241, 246, 243, 0.08);
    --sidebar-font-size: 15px;
    --sidebar-line-height: 1.5;
    --sidebar-font-weight: normal;
@@ -127,6 +152,7 @@
    --line-text-color: rgb(211, 215, 207);
    --line-svg-fill-color: rgb(150, 152, 150);
    --line-svg-hover-fill-color: #eceeec;
+    --line-selected-border-color: rgb(193, 195, 193);
    --line-separator-color: rgb(126, 126, 126);
    --line-error-color: var(--app-error-color);
    --line-warning-color: var(--app-warning-color);
@@ -149,6 +175,17 @@
    --line-actions-active-color: rgba(255, 255, 255, 1);
    --line-actions-bg-color: rgba(255, 255, 255, 0.15);

+    /* view colors */
+    /* todo: bookmarks is a view, colors must be unified with --view* colors */
+    --bookmarks-text-color: rgb(211, 215, 207);
+    --bookmarks-textarea-bg-color: rgb(0, 0, 0);
+    --bookmarks-disabled-text-color: rgb(173, 173, 173);
+    --bookmarks-control-hover-color: rgb(255, 255, 255);
+
+    /* view colors */
+    --view-error-color: var(--app-error-color);
+    --view-text-color: var(--app-text-color);
+
    /* table colors */
    --table-border-color: rgba(241, 246, 243, 0.15);
    --table-thead-border-top-color: rgba(250, 250, 250, 0.1);
@@ -159,6 +196,9 @@
    --table-tr-selected-bg-color: #222;
    --table-tr-selected-hover-bg-color: #333;

+    /* session colors */
+    --session-bg-color: rgba(13, 13, 13, 0.85);
+
    /* cmdinput colors */
    --cmdinput-textarea-bg-color: #171717;
    --cmdinput-text-error-color: var(--term-red);
@@ -179,20 +219,5 @@
    --modal-bg-color: var(--app-bg-color);
    --modal-header-bottom-border-color: rgba(241, 246, 243, 0.15);

-    --logo-button-hover-bg-color: var(--app-accent-bg-color);
-
-    --xterm-viewport-border-color: rgba(241, 246, 243, 0.15);
-
-    --datepicker-cell-hover-bg-color: rgba(255, 255, 255, 0.06);
-    --datepicker-cell-other-text-color: rgba(255, 255, 255, 0.3);
-    --datepicker-header-fade-color: rgba(255, 255, 255, 0.4);
-    --datepicker-year-header-bg-color: rgba(255, 255, 255, 0.2); /* Light grey background */
-    --datepicker-year-header-border-color: rgba(241, 246, 243, 0.15); /* Light grey border */
-
-    /* OverlayScrollbars styling */
-    .os-scrollbar {
-        --os-handle-bg: var(--scrollbar-thumb-color);
-        --os-handle-bg-hover: var(--scrollbar-thumb-hover-color);
-        --os-handle-bg-active: var(--scrollbar-thumb-active-color);
-    }
+    --logo-button-hover-bg-color: #1e1e1e;
 }
@@ -1,8 +1,9 @@
 /* Copyright 2024, Command Line Inc.
   SPDX-License-Identifier: Apache-2.0 */

-@import url("./term-default.css");
-@import url("./term-light.css");
+@import "./default.css";
+@import "./term-default.css";
+@import "./term-light.css";

 :root {
    --app-bg-color: #fefefe;
@@ -22,7 +23,14 @@

    /* tab color */
    --tab-white: rgb(0, 0, 0, 0.6);
-    --tab-mint: rgb(70, 235, 156);
+
+    /* button colors */
+    --button-text-color: rgb(50, 50, 50); /* Dark gray for light theme */
+    --button-primary-color: #fefefe;
+    --button-secondary-bg-color: rgba(200, 200, 200, 0.3); /* Semi-transparent light gray */
+
+    /* view colors */
+    --view-text-color: var(--app-text-color);

    /* table colors */
    --table-thead-border-top-color: rgba(0, 0, 0, 0.2);
@@ -36,8 +44,7 @@
    /* 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-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);
@@ -57,23 +64,14 @@
    --scrollbar-background-color: var(--app-bg-color);
    --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.4);
-    --scrollbar-thumb-active-color: rgba(0, 0, 0, 0.5);

    /* line color */
    --line-actions-bg-color: rgba(0, 0, 0, 0.1);
    --line-actions-inactive-color: rgba(0, 0, 0, 0.3);
    --line-actions-active-color: rgba(0, 0, 0, 1);

-    --logo-button-hover-bg-color: #f0f0f0;
-
-    --xterm-viewport-border-color: rgba(0, 0, 0, 0.3);
-
-    --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: #f5f5f5;
-    --datepicker-year-header-border-color: #dcdcdc;
-
    /* toggle colors */
    --toggle-thumb-color: var(--app-bg-color);
+
+    --logo-button-hover-bg-color: #f0f0f0;
 }
@@ -27,6 +27,6 @@
    --term-cmdtext: #ffffff;
    --term-foreground: #d3d7cf;
    --term-background: #000000;
-    --term-selection-background: #ffffff60;
+    --term-selection-background: #ffffff90;
    --term-cursor-accent: #000000;
 }
@@ -1,3 +0,0 @@
-@import url("./default.css") screen;
-
-@import url("./light.css") screen and (prefers-color-scheme: light);
@@ -44,7 +44,7 @@ rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
 WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
-WAVESHELL_VERSION=v0.6
+WAVESHELL_VERSION=v0.5
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
 function buildWaveShell {
    (cd waveshell; CGO_ENABLED=0 GOOS=$1 GOARCH=$2 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-$WAVESHELL_VERSION-$1.$2 main-waveshell.go)
@@ -69,7 +69,7 @@ rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
 WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
-WAVESHELL_VERSION=v0.6
+WAVESHELL_VERSION=v0.5
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
 function buildWaveShell {
    (cd waveshell; CGO_ENABLED=0 GOOS=$1 GOARCH=$2 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-$WAVESHELL_VERSION-$1.$2 main-waveshell.go)
@@ -96,7 +96,7 @@ CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflag
 ```bash
 # @scripthaus command fullbuild-waveshell
 set -e
-WAVESHELL_VERSION=v0.6
+WAVESHELL_VERSION=v0.5
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
 function buildWaveShell {
    (cd waveshell; CGO_ENABLED=0 GOOS=$1 GOARCH=$2 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-$WAVESHELL_VERSION-$1.$2 main-waveshell.go)
@@ -101,7 +101,6 @@ body input.input {
    font-size: 10px;
    font-weight: 300;
    line-height: 14px;
-    user-select: none;
 }

 .text-s1.icon {
@@ -251,13 +250,6 @@ input[type="checkbox"] {
    justify-content: center;
 }

-.flex-centered-column {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
 a.a-block {
    display: block;
 }
@@ -310,25 +302,6 @@ a.a-block {
    }
 }

-.right-sidebar-triggers {
-    position: absolute;
-    z-index: 25;
-    right: 0px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    pointer-events: none;
-    height: 38px;
-    padding: 0 5px;
-
-    .right-sidebar-trigger {
-        cursor: pointer;
-        user-select: none;
-        -webkit-app-region: no-drag;
-        pointer-events: all;
-    }
-}
-
 .copied-indicator {
    position: absolute;
    top: 0;
@@ -743,28 +716,28 @@ a.a-block {
 .status-icon.status-connected {
    path,
    circle {
-        fill: var(--app-success-color);
+        fill: var(--status-connected-color);
    }
 }

 .status-icon.status-connecting {
    path,
    circle {
-        fill: var(--app-warning-color);
+        fill: var(--status-connecting-color);
    }
 }

 .status-icon.status-disconnected {
    path,
    circle {
-        fill: var(--app-idle-color);
+        fill: var(--status-disconnected-color);
    }
 }

 .status-icon.status-error {
    path,
    circle {
-        fill: var(--app-error-color);
+        fill: var(--status-error-color);
    }
 }

@@ -793,75 +766,6 @@ a.a-block {
    margin-top: 6px;
 }

-.conn-dropdown {
-    width: 412px;
-
-    .lefticon {
-        position: absolute;
-        top: 50%;
-        left: 16px;
-        transform: translateY(-50%);
-
-        .globe-icon {
-            width: 16px;
-            height: 16px;
-            flex-shrink: 0;
-            fill: var(--app-text-secondary-color);
-        }
-
-        .status-icon {
-            position: absolute;
-            left: 7px;
-            top: 8px;
-            circle {
-                stroke: var(--app-bg-color);
-            }
-        }
-    }
-
-    .wave-dropdown-display {
-        bottom: 7px;
-    }
-}
-
-.tab-colors,
-.tab-icons {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .tab-color-sep,
-    .tab-icon-sep {
-        padding-left: 10px;
-        padding-right: 10px;
-        font-weight: bold;
-        user-select: none;
-    }
-
-    .tab-color-icon,
-    .tab-icon-icon {
-        width: 1.1em;
-        vertical-align: middle;
-    }
-
-    .tab-color-name,
-    .tab-icon-name {
-        display: inline-block;
-        margin-left: 1em;
-        min-width: 70px;
-        user-select: none;
-    }
-
-    .tab-color-select,
-    .tab-icon-select {
-        cursor: pointer;
-        margin: 3px;
-        &:hover {
-            outline: 2px solid white;
-        }
-    }
-}
-
 .settings-field {
    display: flex;
    flex-direction: row;
@@ -896,7 +800,6 @@ a.a-block {
        display: flex;
        flex-direction: row;
        align-items: center;
-        user-select: none;
        .info-message {
            margin-left: 5px;
        }
@@ -923,7 +826,7 @@ a.a-block {
            }
        }

-        input:not(.wave-input) {
+        input {
            padding: 4px;
            border-radius: 3px;
        }
@@ -934,6 +837,42 @@ a.a-block {
            }
        }

+        .tab-colors,
+        .tab-icons {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .tab-color-sep,
+            .tab-icon-sep {
+                padding-left: 10px;
+                padding-right: 10px;
+                font-weight: bold;
+            }
+
+            .tab-color-icon,
+            .tab-icon-icon {
+                width: 1.1em;
+                vertical-align: middle;
+            }
+
+            .tab-color-name,
+            .tab-icon-name {
+                display: inline-block;
+                margin-left: 1em;
+                min-width: 70px;
+            }
+
+            .tab-color-select,
+            .tab-icon-select {
+                cursor: pointer;
+                margin: 3px;
+                &:hover {
+                    outline: 2px solid white;
+                }
+            }
+        }
+
        .action-text {
            margin-left: 20px;

@@ -1,15 +1,14 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0

-import React, { PureComponent } from "preact/compat";
-import { createRef, RefObject } from "preact";
-import * as mobxReact from "mobx-preact";
+import * as React from "react";
+import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
-import { GlobalModel } from "@/models";
+import { GlobalCommandRunner, GlobalModel } from "@/models";
 import { isBlank } from "@/util/util";
 import { WorkspaceView } from "./workspace/workspaceview";
 import { PluginsView } from "./pluginsview/pluginsview";
@@ -17,21 +16,19 @@ import { BookmarksView } from "./bookmarks/bookmarks";
 import { HistoryView } from "./history/history";
 import { ConnectionsView } from "./connections/connections";
 import { ClientSettingsView } from "./clientsettings/clientsettings";
-import { MainSideBar } from "./sidebar/main";
-import { RightSideBar } from "./sidebar/right";
-import { DisconnectedModal, ClientStopModal } from "@/modals";
-import { ModalsProvider } from "@/modals/provider";
-import { Button } from "@/elements";
-import { ErrorBoundary } from "@/common/error/errorboundary";
+import { MainSideBar } from "./sidebar/sidebar";
+import { DisconnectedModal, ClientStopModal } from "./common/modals";
+import { ModalsProvider } from "./common/modals/provider";
+import { ErrorBoundary } from "./common/error/errorboundary";
 import cn from "classnames";
 import "./app.less";

 dayjs.extend(localizedFormat);

@mobxReact.observer
-class App extends PureComponent<{}, {}> {
+class App extends React.Component<{}, {}> {
    dcWait: OV<boolean> = mobx.observable.box(false, { name: "dcWait" });
-    mainContentRef: RefObject<HTMLDivElement> = createRef();
+    mainContentRef: React.RefObject<HTMLDivElement> = React.createRef();

    constructor(props: {}) {
        super(props);
@@ -68,17 +65,9 @@ class App extends PureComponent<{}, {}> {
    }

    @boundMethod
-    openMainSidebar() {
-        const mainSidebarModel = GlobalModel.mainSidebarModel;
-        const width = mainSidebarModel.getWidth(true);
-        mainSidebarModel.saveState(width, false);
-    }
-
-    @boundMethod
-    openRightSidebar() {
-        const rightSidebarModel = GlobalModel.rightSidebarModel;
-        const width = rightSidebarModel.getWidth(true);
-        rightSidebarModel.saveState(width, false);
+    openSidebar() {
+        const width = GlobalModel.mainSidebarModel.getWidth(true);
+        GlobalCommandRunner.clientSetSidebar(width, false);
    }

    render() {
@@ -102,7 +91,7 @@ class App extends PureComponent<{}, {}> {
            return (
                <div id="main" className={"platform-" + platform} onContextMenu={this.handleContextMenu}>
                    <div ref={this.mainContentRef} className="main-content">
-                        <MainSideBar parentRef={this.mainContentRef} />
+                        <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
                        <div className="session-view" />
                    </div>
                    <If condition={dcWait}>
@@ -121,38 +110,25 @@ class App extends PureComponent<{}, {}> {
        }
        // used to force a full reload of the application
        const renderVersion = GlobalModel.renderVersion.get();
-        const mainSidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
-        const rightSidebarCollapsed = GlobalModel.rightSidebarModel.getCollapsed();
-        const activeMainView = GlobalModel.activeMainView.get();
-        const lightDarkClass = GlobalModel.isDarkTheme.get() ? "is-dark" : "is-light";
+        const sidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
+        const lightDarkClass = GlobalModel.isThemeDark() ? "is-dark" : "is-light";
        return (
            <div
                key={"version-" + renderVersion}
                id="main"
-                className={cn(
-                    "platform-" + platform,
-                    { "mainsidebar-collapsed": mainSidebarCollapsed, "rightsidebar-collapsed": rightSidebarCollapsed },
-                    lightDarkClass
-                )}
+                className={cn("platform-" + platform, { "sidebar-collapsed": sidebarCollapsed }, lightDarkClass)}
                onContextMenu={this.handleContextMenu}
            >
-                <If condition={mainSidebarCollapsed}>
+                <If condition={sidebarCollapsed}>
                    <div key="logo-button" className="logo-button-container">
                        <div className="logo-button-spacer" />
-                        <div className="logo-button" onClick={this.openMainSidebar}>
+                        <div className="logo-button" onClick={this.openSidebar}>
                            <img src="public/logos/wave-logo.png" alt="logo" />
                        </div>
                    </div>
                </If>
-                <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>
-                        </Button>
-                    </div>
-                </If>
                <div ref={this.mainContentRef} className="main-content">
-                    <MainSideBar parentRef={this.mainContentRef} />
+                    <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
                    <ErrorBoundary>
                        <PluginsView />
                        <WorkspaceView />
@@ -161,7 +137,6 @@ class App extends PureComponent<{}, {}> {
                        <ConnectionsView model={remotesModel} />
                        <ClientSettingsView model={remotesModel} />
                    </ErrorBoundary>
-                    <RightSideBar parentRef={this.mainContentRef} />
                </div>
                <ModalsProvider />
            </div>
@@ -6,11 +6,11 @@
    }

    .bookmarks-list {
-        color: var(--app-text-color);
+        color: var(--bookmarks-text-color);
        margin: 4px 10px 5px 5px;

        .no-bookmarks {
-            color: var(--app-text-color);
+            color: var(--bookmarks-text-color);
            padding: 30px 10px 35px 10px;
            border-bottom: 1px solid white;
        }
@@ -46,21 +46,21 @@
        }

        label {
-            color: var(--app-text-color);
+            color: var(--bookmarks-text-color);
            margin-bottom: 4px;
        }

        textarea {
            width: 80%;
            min-width: 50%;
-            color: var(--app-text-color);
-            background-color: var(--form-element-bg-color);
+            color: var(--bookmarks-text-color);
+            background-color: var(--bookmarks-textarea-bg-color);
        }

        .bookmark-id-div {
            display: none;
            position: absolute;
-            color: var(--app-text-disabled-color);
+            color: var(--bookmarks-disabled-text-color);
            right: 5px;
            bottom: 2px;
            font-size: 0.8em;
@@ -75,7 +75,7 @@
            flex-direction: row;

            visibility: hidden;
-            color: var(--app-text-color);
+            color: var(--bookmarks-text-color);

            .bookmark-control:first-child {
                margin-left: 0;
@@ -85,6 +85,10 @@
                margin-left: 10px;
                cursor: pointer;
                padding: 2px;
+
+                &:hover {
+                    color: var(--bookmarks-control-hover-color);
+                }
            }
        }

@@ -1,8 +1,8 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0

-import React, { PureComponent } from "preact/compat";
-import * as mobxReact from "mobx-preact";
+import * as React from "react";
+import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";
@@ -22,61 +22,8 @@ type BookmarkProps = {
    bookmark: BookmarkType;
 };

-class BookmarkKeybindings extends PureComponent<{}, {}> {
-    @boundMethod
-    componentDidMount(): void {
-        let keybindManager = GlobalModel.keybindManager;
-        let bookmarksModel = GlobalModel.bookmarksModel;
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:cancel", (waveEvent) => {
-            bookmarksModel.handleUserClose();
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:deleteItem", (waveEvent) => {
-            bookmarksModel.handleUserDelete();
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectAbove", (waveEvent) => {
-            bookmarksModel.handleUserNavigate(-1);
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectBelow", (waveEvent) => {
-            bookmarksModel.handleUserNavigate(1);
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectPageAbove", (waveEvent) => {
-            bookmarksModel.handleUserNavigate(-10);
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectPageBelow", (waveEvent) => {
-            bookmarksModel.handleUserNavigate(10);
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:confirm", (waveEvent) => {
-            bookmarksModel.handleUserConfirm();
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "bookmarks:edit", (waveEvent) => {
-            bookmarksModel.handleUserEdit();
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "bookmarks:copy", (waveEvent) => {
-            bookmarksModel.handleUserCopy();
-            return true;
-        });
-    }
-
-    @boundMethod
-    componentWillUnmount() {
-        GlobalModel.keybindManager.unregisterDomain("bookmarks");
-    }
-
-    render() {
-        return null;
-    }
-}
-
@mobxReact.observer
-class Bookmark extends PureComponent<BookmarkProps, {}> {
+class Bookmark extends React.Component<BookmarkProps, {}> {
    @boundMethod
    handleDeleteClick(): void {
        let { bookmark } = this.props;
@@ -232,7 +179,7 @@ class Bookmark extends PureComponent<BookmarkProps, {}> {
 }

@mobxReact.observer
-class BookmarksView extends PureComponent<{}, {}> {
+class BookmarksView extends React.Component<{}, {}> {
    @boundMethod
    handleClose() {
        GlobalModel.bookmarksModel.closeView();
@@ -247,9 +194,6 @@ class BookmarksView extends PureComponent<{}, {}> {
        let bookmark: BookmarkType = null;
        return (
            <MainView className="bookmarks-view" title="Bookmarks" onClose={this.handleClose}>
-                <If condition={!isHidden}>
-                    <BookmarkKeybindings></BookmarkKeybindings>
-                </If>
                <div className="bookmarks-list">
                    <For index="idx" each="bookmark" of={bookmarks}>
                        <Bookmark key={bookmark.bookmarkid} bookmark={bookmark} />
@@ -1,11 +1,10 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0

-import React, { PureComponent } from "preact/compat";
-import * as mobxReact from "mobx-preact";
+import * as React from "react";
+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 } from "@/common/elements";
 import { commandRtnHandler, isBlank } from "@/util/util";
@@ -14,27 +13,8 @@ import * as appconst from "@/app/appconst";
 import "./clientsettings.less";
 import { MainView } from "../common/elements/mainview";

-class ClientSettingsKeybindings extends PureComponent<{}, {}> {
-    componentDidMount() {
-        let clientSettingsViewModel = GlobalModel.clientSettingsViewModel;
-        let keybindManager = GlobalModel.keybindManager;
-        keybindManager.registerKeybinding("mainview", "clientsettings", "generic:cancel", (waveEvent) => {
-            clientSettingsViewModel.closeView();
-            return true;
-        });
-    }
-
-    componentWillUnmount() {
-        GlobalModel.keybindManager.unregisterDomain("clientsettings");
-    }
-
-    render() {
-        return null;
-    }
-}
-
@mobxReact.observer
-class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hoveredItemId: string }> {
+class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
    errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });

    @boundMethod
@@ -64,12 +44,11 @@ class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hovere
    }

    @boundMethod
-    handleChangeThemeSource(themeSource: NativeThemeSource): void {
-        if (GlobalModel.getThemeSource() == themeSource) {
+    handleChangeTheme(theme: string): void {
+        if (GlobalModel.getTheme() == theme) {
            return;
        }
-        const prtn = GlobalCommandRunner.setTheme(themeSource, false);
-        getApi().setNativeThemeSource(themeSource);
+        const prtn = GlobalCommandRunner.setTheme(theme, false);
        commandRtnHandler(prtn, this.errorMessage);
    }

@@ -112,12 +91,11 @@ class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hovere
        return availableFontFamilies;
    }

-    getThemeSources(): DropdownItem[] {
-        const themeSources: DropdownItem[] = [];
-        themeSources.push({ label: "Dark", value: "dark" });
-        themeSources.push({ label: "Light", value: "light" });
-        themeSources.push({ label: "System", value: "system" });
-        return themeSources;
+    getThemes(): DropdownItem[] {
+        const themes: DropdownItem[] = [];
+        themes.push({ label: "Dark", value: "dark" });
+        themes.push({ label: "Light", value: "light" });
+        return themes;
    }

    @boundMethod
@@ -138,12 +116,6 @@ class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hovere
        commandRtnHandler(prtn, this.errorMessage);
    }

-    @boundMethod
-    inlineUpdateOpenAIBaseURL(newBaseURL: string): void {
-        const prtn = GlobalCommandRunner.setClientOpenAISettings({ baseurl: newBaseURL });
-        commandRtnHandler(prtn, this.errorMessage);
-    }
-
    @boundMethod
    setErrorMessage(msg: string): void {
        mobx.action(() => {
@@ -192,13 +164,10 @@ class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hovere
        );
        const curFontSize = GlobalModel.getTermFontSize();
        const curFontFamily = GlobalModel.getTermFontFamily();
-        const curTheme = GlobalModel.getThemeSource();
+        const curTheme = GlobalModel.getTheme();

        return (
            <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
-                <If condition={!isHidden}>
-                    <ClientSettingsKeybindings></ClientSettingsKeybindings>
-                </If>
                <div className="content">
                    <div className="settings-field">
                        <div className="settings-label">Term Font Size</div>
@@ -227,9 +196,9 @@ class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hovere
                        <div className="settings-input">
                            <Dropdown
                                className="theme-dropdown"
-                                options={this.getThemeSources()}
+                                options={this.getThemes()}
                                defaultValue={curTheme}
-                                onChange={this.handleChangeThemeSource}
+                                onChange={this.handleChangeTheme}
                            />
                        </div>
                    </div>
@@ -263,7 +232,7 @@ class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hovere
                        </div>
                    </div>
                    <div className="settings-field">
-                        <div className="settings-label">AI Token</div>
+                        <div className="settings-label">OpenAI Token</div>
                        <div className="settings-input">
                            <InlineSettingsTextEdit
                                placeholder=""
@@ -276,20 +245,7 @@ class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hovere
                        </div>
                    </div>
                    <div className="settings-field">
-                        <div className="settings-label">AI Base URL</div>
-                        <div className="settings-input">
-                            <InlineSettingsTextEdit
-                                placeholder=""
-                                text={isBlank(openAIOpts.baseurl) ? "openai default" : openAIOpts.baseurl}
-                                value={openAIOpts.baseurl ?? ""}
-                                onChange={this.inlineUpdateOpenAIBaseURL}
-                                maxLength={200}
-                                showIcon={true}
-                            />
-                        </div>
-                    </div>
-                    <div className="settings-field">
-                        <div className="settings-label">AI Model</div>
+                        <div className="settings-label">OpenAI Model</div>
                        <div className="settings-input">
                            <InlineSettingsTextEdit
                                placeholder="gpt-3.5-turbo"
@@ -302,7 +258,7 @@ class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hovere
                        </div>
                    </div>
                    <div className="settings-field">
-                        <div className="settings-label">AI MaxTokens</div>
+                        <div className="settings-label">OpenAI MaxTokens</div>
                        <div className="settings-input">
                            <InlineSettingsTextEdit
                                placeholder=""
@@ -1,8 +1,11 @@
 .wave-button {
    background: none;
+    color: inherit;
    border: none;
+    font: inherit;
    cursor: pointer;
    outline: inherit;
+
    display: flex;
    padding: 6px 16px;
    align-items: center;
@@ -10,111 +13,57 @@
    border-radius: 6px;
    height: auto;
    line-height: 1.5;
-    white-space: nowrap;
-    user-select: none;
-
-    color: var(--form-element-text-color);
-    background: var(--form-element-primary-color);
-    i {
-        fill: var(--form-element-text-color);
-    }

    &.primary {
-        color: var(--form-element-primary-text-color);
-        background: var(--form-element-primary-color);
-        i {
-            fill: var(--form-element-text-color);
-        }
-    }
-
-    &.primary.danger {
-        background: var(--app-error-color);
-    }
-
-    &.primary.outlined {
        background: none;
-        border: 1px solid var(--form-element-primary-color);

        i {
            fill: var(--form-element-primary-color);
        }
-    }

-    &.primary.greyoutlined {
-        background: none;
-        border: 1px solid var(--app-text-secondary-color);
+        &.solid {
+            color: var(--form-element-text-color);
+            background: var(--form-element-primary-color);

-        i {
-            fill: var(--app-text-secondary-color);
+            i {
+                fill: var(--form-element-text-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);
+        &.outlined {
+            border: 1px solid var(--form-element-primary-color);
        }
-    }

-    &.primary.outlined.danger {
-        background: none;
-        border: 1px solid var(--app-error-color);
-
-        i {
-            fill: var(--app-error-color);
+        &.ghost {
+            // Styles for .ghost are already defined above
        }
-    }

-    &.greytext {
-        color: var(--app-text-secondary-color);
-    }
-
-    &.primary.ghost {
-        background: none;
-        i {
-            fill: var(--form-element-primary-color);
-        }
-    }
-
-    &.primary.ghost.danger {
-        background: none;
-        i {
-            fill: var(--app-error-color);
+        &:hover {
+            color: var(--form-element-text-color);
        }
    }

    &.secondary {
        color: var(--form-element-text-color);
-        background: var(--form-element-secondary-color);
-        i {
-            fill: var(--form-element-text-color);
+        background: none;
+
+        &.solid {
+            color: var(--form-element-text-color);
+            background: var(--form-element-secondary-color);
+            box-shadow: none;
        }
-    }

-    &.secondary.outlined {
-        background: none;
-        border: 1px solid var(--form-element-text-color);
-    }
+        &.outlined {
+            border: 1px solid var(--form-element-secondary-color);
+        }

-    &.secondary.outlined.danger {
-        background: none;
-        border: 1px solid var(--app-error-color);
-    }
+        &.ghost {
+            padding: 6px 10px;

-    &.secondary.ghost {
-        background: none;
-    }
-
-    &.secondary.danger {
-        color: var(--app-error-color);
-    }
-
-    &.small {
-        padding: 4px 8px;
-        font-size: 12px;
-        border-radius: 3.6px;
+            i {
+                fill: var(--form-element-primary-color);
+            }
+        }
    }

    &.term-inline {
@@ -1,25 +1,36 @@
-import React, { PureComponent, ReactNode, CSSProperties } from "preact/compat";
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";

 import "./button.less";

+type ButtonVariantType = "outlined" | "solid" | "ghost";
+type ButtonThemeType = "primary" | "secondary";
+
 interface ButtonProps {
-    children: ReactNode;
+    theme?: ButtonThemeType;
+    children: React.ReactNode;
    onClick?: () => void;
    disabled?: boolean;
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
-    style?: CSSProperties;
+    variant?: ButtonVariantType;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    color?: string;
+    style?: React.CSSProperties;
    autoFocus?: boolean;
    className?: string;
    termInline?: boolean;
 }

-class Button extends PureComponent<ButtonProps> {
+class Button extends React.Component<ButtonProps> {
    static defaultProps = {
+        theme: "primary",
+        variant: "solid",
+        color: "",
        style: {},
-        className: "primary",
    };

    @boundMethod
@@ -30,11 +41,31 @@ class Button extends PureComponent<ButtonProps> {
    }

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

        return (
            <button
-                className={cn("wave-button", { disabled }, { "term-inline": termInline }, className)}
+                className={cn(
+                    "wave-button",
+                    theme,
+                    variant,
+                    color,
+                    { disabled: disabled },
+                    { "term-inline": termInline },
+                    className
+                )}
                onClick={this.handleClick}
                disabled={disabled}
                style={style}
@@ -1,17 +1,18 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0

-import { PureComponent, ReactNode } from "preact/compat";
+import * as React from "react";
+import * as mobx from "mobx";
 import cn from "classnames";

 import "./checkbox.less";

-class Checkbox extends PureComponent<
+class Checkbox extends React.Component<
    {
        checked?: boolean;
        defaultChecked?: boolean;
        onChange: (value: boolean) => void;
-        label: ReactNode;
+        label: React.ReactNode;
        className?: string;
        id?: string;
    },
@@ -1,7 +1,7 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0

-import React, { PureComponent } from "preact/compat";
+import * as React from "react";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
@@ -11,7 +11,7 @@ import { ReactComponent as CopyIcon } from "@/assets/icons/history/copy.svg";

 import "./cmdstrcode.less";

-class CmdStrCode extends PureComponent<
+class CmdStrCode extends React.Component<
    {
        cmdstr: string;
        onUse: () => void;
@@ -1,7 +1,7 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0

-import React, { PureComponent } from "preact/compat";
+import * as React from "react";

 function renderCmdText(text: string): any {
    return <span>&#x2318;{text}</span>;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sylvia Crowe	00c2ab9fc4	merge branch 'main' into ssh-extra-fixes	2024-03-14 16:20:55 -07:00
Sylvia Crowe	81294820c8	feat: add connection segfault protection A user recently reported a crash on a failed connection. This handles these errors more gracefully than the previous system and prints the errors to the connection prompt.	2024-03-14 16:19:32 -07:00
Sylvia Crowe	bb8f5dc660	chore: remove legacy remote launcher The Legacy Launch function was kept as a way to maintain the old ssh system while adding the new one. Now that the new system has been released with minimal issues, it is safe to fully remove the legacy launcher.	2024-03-14 01:07:54 -07:00
Sylvia Crowe	c3917444a2	merge branch 'main' into ssh-extra-fixes	2024-03-13 18:08:29 -07:00
Sylvia Crowe	2cc86f39d6	feat: relax user requirement for canonical name Previously, the canonical name required a user as a part of it. This change makes it possible to omit the username if desired. In this case, the connection will default to your current user.	2024-03-08 00:32:46 -08:00
Sylvia Crowe	af22fd38af	feat: don't hide nonsecret kbd-interactive answers Some Kbd-Interactive challenges are marked with echo true. For these, it makes sense to use a TextField in place of a PasswordField. This change differentiates between the two options.	2024-03-07 23:32:15 -08:00