fix: split the apple locale on the region for LANG

We use AppleLocale to get the desired language when running on macos.
Unfortunately, if a region is set, the locale is not equivalent to the
LANG environment variable. It appends an extra region field that we did
not previously filter out. This change ensures that it will be filtered
out when present.

.github/workflows/build-helper.yml

@@ -41,7 +41,6 @@ jobs:
                   cd scripthaus;
                   go get ./...;
                   CGO_ENABLED=1 go build -o scripthaus cmd/main.go
-                  echo $PWD >> $GITHUB_PATH
             - uses: actions/setup-node@v4
               with:
                   node-version: ${{env.NODE_VERSION}}
@@ -54,7 +53,7 @@ jobs:
             - name: Install Yarn Dependencies
               run: yarn --frozen-lockfile
             - name: Build ${{ matrix.platform }}/${{ matrix.arch }}
-              run: scripthaus run ${{ matrix.scripthaus }}
+              run: ./scripthaus/scripthaus run ${{ matrix.scripthaus }}
               env:
                   GOARCH: ${{ matrix.arch }}
                   CSC_LINK: ${{ matrix.platform == 'darwin' && secrets.PROD_MACOS_CERTIFICATE}}

.github/workflows/codeql.yml

@@ -47,32 +47,6 @@ jobs:
             - name: Checkout repository
               uses: actions/checkout@v4
 
-            - name: Checkout Scripthaus (Go only)
-              if: matrix.language == 'go'
-              uses: actions/checkout@v4
-              with:
-                  repository: scripthaus-dev/scripthaus
-                  path: scripthaus
-
-            - name: Setup Go (Go only)
-              uses: actions/setup-go@v5
-              if: matrix.language == 'go'
-              with:
-                  go-version: stable
-                  cache-dependency-path: |
-                      wavesrv/go.sum
-                      waveshell/go.sum
-                      scripthaus/go.sum
-
-            - name: Install Scripthaus (Go only)
-              if: matrix.language == 'go'
-              run: |
-                  go work use ./scripthaus;
-                  cd scripthaus;
-                  go get ./...;
-                  CGO_ENABLED=1 go build -o scripthaus cmd/main.go
-                  echo $PWD >> $GITHUB_PATH
-
             # Initializes the CodeQL tools for scanning.
             - name: Initialize CodeQL
               uses: github/codeql-action/init@v3
@@ -87,14 +61,9 @@ jobs:
 
             # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
             # If this step fails, then you should remove it and run the build manually (see below)
-            - name: Autobuild (not Go)
-              if: matrix.language != 'go'
+            - name: Autobuild
               uses: github/codeql-action/autobuild@v3
 
-            - name: Build (Go only)
-              if: matrix.language == 'go'
-              run: scripthaus run build-backend
-
             # ℹ️ Command-line programs to run using the OS shell.
             # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
 

assets/default-keybindings.json

@@ -1,12 +1,7 @@
 [
     {
       "command": "system:toggleDeveloperTools",
-      "keys": ["Cmd:Option:i"],
-      "info": "Opens the chrome developer tool menu"
-    },
-    {
-      "command": "system:hideWindow",
-      "keys": ["Cmd:m"]
+      "keys": ["Cmd:Option:i"]
     },
     {
       "command": "generic:cancel",
@@ -16,62 +11,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 +23,6 @@
       "command": "generic:selectBelow",
       "keys": ["ArrowDown"]
     },
-    {
-      "command": "generic:selectLeft",
-      "keys": ["ArrowLeft"]
-    },
-    {
-      "command": "generic:selectRight",
-      "keys": ["ArrowRight"]
-    },
     {
       "command": "generic:selectPageAbove",
       "keys": ["PageUp"]
@@ -97,7 +32,7 @@
       "keys": ["PageDown"]
     },
     {
-      "command": "app:openHistoryView",
+      "command": "app:openHistory",
       "keys": ["Cmd:h"]
     },
     {
@@ -106,13 +41,11 @@
     },
     {
       "command": "app:openConnectionsView", 
-      "keys": [],
-      "commandStr": "/mainview connections"
+      "keys": []
     },
     {
       "command": "app:openSettingsView", 
-      "keys": [],
-      "commandStr": "/mainview clientsettings"
+      "keys": []
     },
     {
       "command": "app:newTab",
@@ -128,8 +61,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 +81,39 @@
     },
     {
       "command": "app:selectTab-1",
-      "keys": ["Cmd:1"],
-      "commandStr":"/screen 1"
+      "keys": ["Cmd:1"]
     },
     {
       "command": "app:selectTab-2",
-      "keys": ["Cmd:2"],
-      "commandStr":"/screen 2"
+      "keys": ["Cmd:2"]
     },
     {
       "command": "app:selectTab-3",
-      "keys": ["Cmd:3"],
-      "commandStr":"/screen 3"
+      "keys": ["Cmd:3"]
     },
     {
       "command": "app:selectTab-4",
-      "keys": ["Cmd:4"],
-      "commandStr":"/screen 4"
+      "keys": ["Cmd:4"]
     },
     {
       "command": "app:selectTab-5",
-      "keys": ["Cmd:5"],
-      "commandStr":"/screen 5"
+      "keys": ["Cmd:5"]
     },
     {
       "command": "app:selectTab-6",
-      "keys": ["Cmd:6"],
-      "commandStr":"/screen 6"
+      "keys": ["Cmd:6"]
     },
     {
       "command": "app:selectTab-7",
-      "keys": ["Cmd:7"],
-      "commandStr":"/screen 7"
+      "keys": ["Cmd:7"]
     },
     {
       "command": "app:selectTab-8",
-      "keys": ["Cmd:8"],
-      "commandStr":"/screen 8"
+      "keys": ["Cmd:8"]
     },
     {
       "command": "app:selectTab-9",
-      "keys": ["Cmd:9"],
-      "commandStr":"/screen 9"
+      "keys": ["Cmd:9"]
     },
     {
       "command": "app:selectTabLeft",
@@ -202,48 +125,39 @@
     },
     {
       "command": "app:selectWorkspace-1",
-      "keys": ["Cmd:Ctrl:1"],
-      "commandStr": "/session 1"
+      "keys": ["Cmd:Ctrl:1"]
     },
     {
       "command": "app:selectWorkspace-2",
-      "keys": ["Cmd:Ctrl:2"],
-      "commandStr": "/session 2"
+      "keys": ["Cmd:Ctrl:2"]
     },
     {
       "command": "app:selectWorkspace-3",
-      "keys": ["Cmd:Ctrl:3"],
-      "commandStr": "/session 3"
+      "keys": ["Cmd:Ctrl:3"]
     },
     {
       "command": "app:selectWorkspace-4",
-      "keys": ["Cmd:Ctrl:4"],
-      "commandStr": "/session 4"
+      "keys": ["Cmd:Ctrl:4"]
     },
     {
       "command": "app:selectWorkspace-5",
-      "keys": ["Cmd:Ctrl:5"],
-      "commandStr": "/session 5"
+      "keys": ["Cmd:Ctrl:5"]
     },
     {
       "command": "app:selectWorkspace-6",
-      "keys": ["Cmd:Ctrl:6"],
-      "commandStr": "/session 6"
+      "keys": ["Cmd:Ctrl:6"]
     },
     {
       "command": "app:selectWorkspace-7",
-      "keys": ["Cmd:Ctrl:7"],
-      "commandStr": "/session 7"
+      "keys": ["Cmd:Ctrl:7"]
     },
     {
       "command": "app:selectWorkspace-8",
-      "keys": ["Cmd:Ctrl:8"],
-      "commandStr": "/session 8"
+      "keys": ["Cmd:Ctrl:8"]
     },
     {
       "command": "app:selectWorkspace-9",
-      "keys": ["Cmd:Ctrl:9"],
-      "commandStr": "/session 9"
+      "keys": ["Cmd:Ctrl:9"]
     },
     {
       "command": "app:toggleSidebar",
@@ -254,9 +168,8 @@
       "keys": ["Cmd:d"]
     },
     {
-      "command": "app:openBookmarksView",
-      "keys": ["Cmd:b"],
-      "commandStr": "/bookmarks:show"
+      "command": "app:bookmarkActiveLine",
+      "keys": ["Cmd:b"]
     },
     {
       "command": "bookmarks:edit",
@@ -300,8 +213,7 @@
     },
     {
       "command": "cmdinput:openHistory",
-      "keys": ["Ctrl:r"],
-      "commandStr": "/history"
+      "keys": ["Ctrl:r"]
     },
     {
       "command": "cmdinput:openAIChat",

package.json

@@ -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",
@@ -36,8 +37,6 @@
         "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",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
@@ -46,13 +45,11 @@
         "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-web-links": "^0.9.0",
-        "xterm-addon-serialize": "^0.11.0",
-        "xterm-addon-webgl": "^0.16.0"
+        "xterm": "^5.0.0",
+        "xterm-addon-web-links": "^0.9.0"
     },
     "devDependencies": {
         "@babel/cli": "^7.17.10",
@@ -69,25 +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/react": "^18.0.12",
-        "@types/semver": "^7.5.6",
         "@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"
     }
-}
+}

public/index-dev.html

@@ -5,15 +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" href="public/themes/test.css" />
+        <link rel="stylesheet" id="theme-stylesheet" href="public/themes/default.css">
     </head>
     <body>
         <div id="measure"></div>

public/index.html

@@ -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>

public/themes/default.css

@@ -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,43 +44,37 @@
     --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-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-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-selected-mask-color: rgba(255, 255, 255, 0.06);
-
-    /* global status colors */
+    --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-idle-color: var(--app-text-secondary-color);
+    --app-text-color: rgb(211, 215, 207);
+    --app-text-primary-color: rgb(255, 255, 255);
+    --app-text-secondary-color: rgb(195, 200, 194);
+    --app-border-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: #fff;
+    --app-selected-mask-color: rgba(255, 255, 255, 0.06);
+
+    /* 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);
@@ -90,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);
@@ -109,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;
@@ -125,18 +147,19 @@
 
     /* 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-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);
-    --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);
@@ -152,24 +175,39 @@
     --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);
-    --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;
+
+    /* session colors */
+    --session-bg-color: rgba(13, 13, 13, 0.85);
 
     /* 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);
@@ -181,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;
 }

public/themes/light.css

@@ -1,28 +1,36 @@
 /* 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: 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-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);
-    --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);
@@ -30,19 +38,18 @@
     --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-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,28 +57,21 @@
     --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);
     --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: rgb(240, 240, 240);
-
-    --xterm-viewport-border-color: rgba(0, 0, 0, 0.3);
-
-    --datepicker-cell-hover-bg-color: rgb(240, 240, 240);
-    --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);
-
     /* toggle colors */
     --toggle-thumb-color: var(--app-bg-color);
+
+    --logo-button-hover-bg-color: #f0f0f0;
 }

public/themes/term-default.css

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

public/themes/themequery.css

@@ -1,3 +0,0 @@
-@import url("./default.css") screen;
-
-@import url("./light.css") screen and (prefers-color-scheme: light);

scripthaus.md

@@ -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)

src/app/app.less

@@ -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;
 

src/app/app.tsx

@@ -8,7 +8,7 @@ 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";
@@ -16,13 +16,10 @@ 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, TermStyleBlock } from "@/elements";
-import { ErrorBoundary } from "@/common/error/errorboundary";
-import { For } from "tsx-control-statements/components";
+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";
 
@@ -68,32 +65,9 @@ class App extends React.Component<{}, {}> {
     }
 
     @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);
-    }
-
-    getSelector(themeKey: string) {
-        const sessions = GlobalModel.getSessionNames();
-        const screens = GlobalModel.getScreenNames();
-
-        if (themeKey === "main") {
-            return ":root";
-        } else if (themeKey in screens) {
-            return `.main-content [data-screenid="${themeKey}"]`;
-        } else if (themeKey in sessions) {
-            return `.main-content [data-sessionid="${themeKey}"]`;
-        }
-
-        return null;
+    openSidebar() {
+        const width = GlobalModel.mainSidebarModel.getWidth(true);
+        GlobalCommandRunner.clientSetSidebar(width, false);
     }
 
     render() {
@@ -117,7 +91,7 @@ class App extends React.Component<{}, {}> {
             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}>
@@ -136,48 +110,25 @@ class App extends React.Component<{}, {}> {
         }
         // 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 termTheme = GlobalModel.getTermTheme();
-        const themeKey = null;
-
+        const sidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
+        const lightDarkClass = GlobalModel.isThemeDark() ? "is-dark" : "is-light";
         return (
             <div
-                key={`version- + ${renderVersion}`}
+                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">
-                    <For index="idx" each="themeKey" of={Object.keys(termTheme)}>
-                        <TermStyleBlock
-                            key={themeKey}
-                            themeName={termTheme[themeKey]}
-                            selector={this.getSelector(themeKey)}
-                        />
-                    </For>
-                    <MainSideBar parentRef={this.mainContentRef} />
+                    <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
                     <ErrorBoundary>
                         <PluginsView />
                         <WorkspaceView />
@@ -186,7 +137,6 @@ class App extends React.Component<{}, {}> {
                         <ConnectionsView model={remotesModel} />
                         <ClientSettingsView model={remotesModel} />
                     </ErrorBoundary>
-                    <RightSideBar parentRef={this.mainContentRef} />
                 </div>
                 <ModalsProvider />
             </div>

src/app/appconst.ts

@@ -64,7 +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";

src/app/bookmarks/bookmarks.less

@@ -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);
+                }
             }
         }
 

src/app/bookmarks/bookmarks.tsx

@@ -22,59 +22,6 @@ type BookmarkProps = {
     bookmark: BookmarkType;
 };
 
-class BookmarkKeybindings extends React.Component<{}, {}> {
-    @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 React.Component<BookmarkProps, {}> {
     @boundMethod
@@ -246,10 +193,7 @@ class BookmarksView extends React.Component<{}, {}> {
         let bookmarks = GlobalModel.bookmarksModel.bookmarks;
         let bookmark: BookmarkType = null;
         return (
-            <MainView className="bookmarks-view" title="Bookmarks" onClose={this.handleClose}>
-                <If condition={!isHidden}>
-                    <BookmarkKeybindings></BookmarkKeybindings>
-                </If>
+            <MainView viewName="bookmarks" title="Bookmarks" onClose={this.handleClose}>
                 <div className="bookmarks-list">
                     <For index="idx" each="bookmark" of={bookmarks}>
                         <Bookmark key={bookmark.bookmarkid} bookmark={bookmark} />

src/app/clientsettings/clientsettings.tsx

@@ -5,35 +5,14 @@ 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";
-import { getTermThemes } from "@/util/themeutil";
 import * as appconst from "@/app/appconst";
 
 import "./clientsettings.less";
 import { MainView } from "../common/elements/mainview";
 
-class ClientSettingsKeybindings extends React.Component<{}, {}> {
-    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 React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
     errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
@@ -65,24 +44,11 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
     }
 
     @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);
-        commandRtnHandler(prtn, this.errorMessage);
-    }
-
-    @boundMethod
-    handleChangeTermTheme(theme: string): void {
-        // For main terminal theme, the key is main, otherwise it's either
-        // sessionId or screenId.
-        const currTheme = GlobalModel.getTermTheme()["main"];
-        if (currTheme == theme) {
-            return;
-        }
-        const prtn = GlobalCommandRunner.setMainTermTheme(theme, false);
+        const prtn = GlobalCommandRunner.setTheme(theme, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
@@ -125,12 +91,11 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         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
@@ -151,12 +116,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         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(() => {
@@ -205,15 +164,10 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         );
         const curFontSize = GlobalModel.getTermFontSize();
         const curFontFamily = GlobalModel.getTermFontFamily();
-        const curTheme = GlobalModel.getThemeSource();
-        const termThemes = getTermThemes(GlobalModel.termThemeOptions.get(), "Wave Default");
-        const currTermTheme = GlobalModel.getTermTheme()["main"] ?? termThemes[0].label;
+        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>
@@ -242,25 +196,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                         <div className="settings-input">
                             <Dropdown
                                 className="theme-dropdown"
-                                options={this.getThemeSources()}
+                                options={this.getThemes()}
                                 defaultValue={curTheme}
-                                onChange={this.handleChangeThemeSource}
+                                onChange={this.handleChangeTheme}
                             />
                         </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>
@@ -291,7 +232,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                         </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=""
@@ -304,20 +245,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                         </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"
@@ -330,7 +258,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                         </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=""

src/app/common/elements/button.less

@@ -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 {

src/app/common/elements/button.tsx

@@ -1,46 +1,75 @@
+// 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 {
+    theme?: ButtonThemeType;
     children: React.ReactNode;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: () => void;
     disabled?: boolean;
+    variant?: ButtonVariantType;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
+    color?: string;
     style?: React.CSSProperties;
     autoFocus?: boolean;
     className?: string;
     termInline?: boolean;
-    title?: string;
 }
 
 class Button extends React.Component<ButtonProps> {
     static defaultProps = {
+        theme: "primary",
+        variant: "solid",
+        color: "",
         style: {},
-        className: "primary",
     };
 
     @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,
+            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}
                 autoFocus={autoFocus}
-                title={title}
             >
                 {leftIcon && <span className="icon-left">{leftIcon}</span>}
                 {children}

src/app/common/elements/copybutton.less

@@ -1,7 +0,0 @@
-.copy-button {
-    padding: 5px 5px;
-
-    .fa-check {
-        color: var(--app-success-color);
-    }
-}