save

.github/workflows/publish.yml

@@ -0,0 +1,30 @@
+name: Publish a new release
+on:
+    release:
+        types: [published]
+env:
+    NODE_VERSION: "21.5.0"
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: ${{env.NODE_VERSION}}
+                  cache: "yarn"
+            - name: Get the version
+              id: get_version
+              run: |
+                  VERSION=$(node -e 'console.log(require("./version.js"))')
+                  echo "WAVETERM_VERSION=${VERSION}" >> "$GITHUB_OUTPUT"
+            - name: Download staged artifacts
+              run: |
+                  . ./buildres/download-staged-artifacts.sh
+              env:
+                  AWS_ACCESS_KEY_ID: "${{ secrets.S3_USERID }}"
+                  AWS_SECRET_ACCESS_KEY: "${{ secrets.S3_SECRETKEY }}"
+                  AWS_DEFAULT_REGION: us-west-2
+            - name: Generate Flatpak manifest
+              run: node buildres/flatpak/generate-flatpak-manifest.js

assets/default-keybindings.json

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

buildres/flatpak/dev.commandline.waveterm.yml

@@ -0,0 +1,116 @@
+app-id: com.visualstudio.code
+default-branch: stable
+runtime: org.freedesktop.Sdk
+runtime-version: '23.08'
+sdk: org.freedesktop.Sdk
+base: org.electronjs.Electron2.BaseApp
+base-version: '23.08'
+command: code
+tags: [proprietary]
+separate-locales: false
+finish-args:
+  - --require-version=0.10.3
+  - --share=network
+  - --share=ipc
+  - --socket=x11
+  - --socket=pulseaudio
+  - --socket=ssh-auth
+  - --device=all
+  - --allow=devel
+  - --filesystem=host
+  - --env=NPM_CONFIG_GLOBALCONFIG=/app/etc/npmrc
+  - --env=LD_LIBRARY_PATH=/app/lib
+  # required to fix cursor scaling on wayland
+  - --env=XCURSOR_PATH=/run/host/user-share/icons:/run/host/share/icons
+  - --system-talk-name=org.freedesktop.login1
+  - --talk-name=org.freedesktop.Notifications
+  - --talk-name=org.freedesktop.secrets
+  - --talk-name=org.freedesktop.Flatpak
+  - --talk-name=com.canonical.AppMenu.Registrar
+  - --talk-name=com.canonical.AppMenu.Registrar.*
+add-extensions:
+  com.visualstudio.code.tool:
+    directory: tools
+    subdirectories: true
+    version: '23.08'
+    add-ld-path: lib
+    no-autodownload: true
+cleanup:
+  - /include
+  - /lib/pkgconfig
+  - /share/gtk-doc
+  - '*.la'
+modules:
+  - shared-modules/libusb/libusb.json
+
+  - name: vscode
+    buildsystem: simple
+    build-commands:
+      - install -D code.sh /app/bin/code
+      - install -Dm644 vscode_64.png /app/share/icons/hicolor/64x64/apps/com.visualstudio.code.png
+      - install -Dm644 vscode_128.png /app/share/icons/hicolor/128x128/apps/com.visualstudio.code.png
+      - install -Dm644 vscode_256.png /app/share/icons/hicolor/256x256/apps/com.visualstudio.code.png
+      - install -Dm644 vscode_512.png /app/share/icons/hicolor/512x512/apps/com.visualstudio.code.png
+      - install -Dm644 com.visualstudio.code.metainfo.xml -t /app/share/metainfo
+      - install -Dm644 com.visualstudio.code.desktop -t /app/share/applications
+      - install -Dm644 com.visualstudio.code-url-handler.desktop -t /app/share/applications
+      - install -Dm644 com.visualstudio.code-workspace.xml -t /app/share/mime/packages
+      - install -Dm644 npmrc -t /app/etc
+      - install -Dm644 flatpak-warning.txt -t /app/share/vscode
+      - install -D apply_extra -t /app/bin
+      - cp /usr/bin/ar /app/bin
+      - ARCH_TRIPLE=$(gcc --print-multiarch) && cp /usr/lib/${ARCH_TRIPLE}/libbfd-*.so
+        /app/lib
+      - ARCH_TRIPLE=$(gcc --print-multiarch) && ln -s /usr/lib/${ARCH_TRIPLE}/libtinfo.so/app/lib/libtinfo.so.5
+      - mkdir /app/tools
+    sources:
+      - type: script
+        dest-filename: apply_extra
+        commands:
+          - ar x code.deb
+          - tar xf data.tar.xz
+          - mv usr/share/code vscode
+          - rm -r code.deb control.tar.* data.tar.xz debian-binary usr
+      - type: file
+        path: code.sh
+      - type: file
+        path: flatpak-warning.txt
+      - type: file
+        path: npmrc
+      - type: file
+        path: com.visualstudio.code.metainfo.xml
+      - type: file
+        path: com.visualstudio.code.desktop
+      - type: file
+        path: com.visualstudio.code-url-handler.desktop
+      - type: file
+        path: com.visualstudio.code-workspace.xml
+      - type: file
+        path: icons/vscode_64.png
+      - type: file
+        path: icons/vscode_128.png
+      - type: file
+        path: icons/vscode_256.png
+      - type: file
+        path: icons/vscode_512.png
+      - type: extra-data
+        filename: code.deb
+        only-arches: [x86_64]
+        url: <to-replace>
+        sha256: <to-replace>
+        size: <to-replace>
+        x-checker-data:
+          type: electron-updater
+          url: https://dl.waveterm.dev/releases/latest-linux.yml
+          is-main-source: true
+
+  - name: host-spawn
+    buildsystem: simple
+    build-commands:
+      - install -Dm755 host-spawn /app/bin/host-spawn
+    sources:
+      - type: file
+        url: https://github.com/1player/host-spawn/releases/download/1.5.0/host-spawn-x86_64
+        sha256: dbf67e7e111c4fe1edb0c642cbb4193064ca5b384aeb1054fc2befba6ed88b83
+        dest-filename: host-spawn
+        only-arches: [x86_64]

buildres/flatpak/generate-flatpak-manifest.js

@@ -0,0 +1,16 @@
+// Updates the Flatpak manifest with the latest values for the staged artifact
+// Usage: node generate-flatpak-manifest.js <path-to-staging-directory>
+
+const path = require("path");
+const fs = require("fs");
+const yaml = require("yaml");
+
+async function generateFlatpakManifest(stagingDir) {
+    const latestYmlPath = path.join(stagingDir, "latest-linux.yml");
+    const latestYml = yaml.parse(fs.readFileSync(latestYmlPath, "utf8"));
+    const manifestPath = path.join(stagingDir, "dev.commandline.waveterm.yml");
+    const manifestYml = yaml.parse(fs.readFileSync(manifestPath, "utf8"));
+    const latestDeb = latestYml.files.find((file) => file.url.endsWith(".deb"));
+    const latestDebUrl = `https://dl.waveterm.dev/releases/${latestDeb.url}`;
+    const latestDebSha512 = latestDeb.sha512;
+    

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

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

public/themes/light.css

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

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,12 +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 } 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";
 
@@ -67,17 +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);
+    openSidebar() {
+        const width = GlobalModel.mainSidebarModel.getWidth(true);
+        GlobalCommandRunner.clientSetSidebar(width, false);
     }
 
     render() {
@@ -101,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}>
@@ -120,38 +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 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 />
@@ -160,7 +137,6 @@ class App extends React.Component<{}, {}> {
                         <ConnectionsView model={remotesModel} />
                         <ClientSettingsView model={remotesModel} />
                     </ErrorBoundary>
-                    <RightSideBar parentRef={this.mainContentRef} />
                 </div>
                 <ModalsProvider />
             </div>

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
@@ -247,9 +194,6 @@ class BookmarksView extends React.Component<{}, {}> {
         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} />

src/app/clientsettings/clientsettings.tsx

@@ -5,7 +5,6 @@ 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,25 +13,6 @@ 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" });
@@ -64,12 +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);
+        const prtn = GlobalCommandRunner.setTheme(theme, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
@@ -112,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
@@ -138,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(() => {
@@ -192,13 +164,10 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         );
         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 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>
@@ -263,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=""
@@ -276,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"
@@ -302,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,15 +1,24 @@
+// 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?: () => void;
     disabled?: boolean;
+    variant?: ButtonVariantType;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
+    color?: string;
     style?: React.CSSProperties;
     autoFocus?: boolean;
     className?: string;
@@ -18,8 +27,10 @@ interface 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 React.Component<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}

src/app/common/elements/datepicker.less

@@ -1,187 +0,0 @@
-.day-picker-modal {
-    background-color: var(--form-element-bg-color);
-    z-index: 1000;
-    width: 250px;
-    height: 293px;
-    font-size: 13px;
-    border: 1px solid var(--form-element-border-color);
-    border-radius: 4px;
-    color: var(--form-element-text-color);
-}
-
-.day-picker-input {
-    cursor: default;
-    border: 1px solid var(--form-element-border-color) !important;
-    height: 34px;
-    user-select: none;
-    display: flex;
-    border-radius: 4px;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 15px !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--form-element-bg-color);
-
-    input {
-        outline: none !important;
-        border: none !important;
-        height: 100%;
-        padding: 0 !important;
-        cursor: default !important;
-        background-color: inherit !important;
-    }
-
-    .fa-calendar {
-        margin-left: 10px;
-        cursor: pointer;
-    }
-}
-
-.day-picker-header {
-    color: var(--form-element-text-color);
-    padding: 10px 10px 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 40px;
-    position: sticky;
-
-    div {
-        cursor: default;
-        font-weight: bold;
-        user-select: none;
-
-        &.fade {
-            color: var(--datepicker-header-fade-color);
-        }
-    }
-
-    .arrows {
-        display: flex;
-
-        .wave-button {
-            padding: 5px !important;
-            font-size: 18px !important;
-            cursor: default !important;
-        }
-    }
-}
-
-.day-header {
-    display: flex;
-    color: var(--form-element-text-color);
-    padding: 0 10px;
-
-    .day-header-cell {
-        flex: 1;
-        padding: 10px;
-        color: var(--form-element-text-color);
-        text-align: center;
-        font-weight: bold;
-        user-select: none;
-    }
-}
-
-.day-picker {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 0;
-    padding: 0 10px 10px;
-
-    .day {
-        padding: 10px 4px;
-        color: var(--form-element-text-color);
-        text-align: center;
-        cursor: default;
-        border-radius: 3px;
-
-        &:hover {
-            background-color: var(--datepicker-cell-hover-bg-color);
-        }
-        &.selected {
-            color: var(--form-element-primary-text-color);
-            background-color: var(--form-element-primary-color);
-            font-weight: bold;
-        }
-    }
-
-    .other-month {
-        color: var(--datepicker-cell-other-text-color);
-    }
-}
-
-.year-month-accordion-wrapper {
-    overflow-y: auto;
-    height: 243px;
-    margin-top: 8px;
-    padding: 0 10px 10px;
-
-    .year-month-accordion {
-        color: var(--form-element-text-color);
-    }
-
-    .year-header {
-        padding: 5px 10px;
-        background-color: var(--datepicker-year-header-bg-color);
-        border-bottom: 1px solid var(--datepicker-year-header-border-color);
-        margin-bottom: 5px;
-        font-weight: bold;
-        text-align: center;
-        cursor: default;
-        color: var(--form-element-text-color);
-        user-select: none;
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    .month-container {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 5px;
-        padding: 10px;
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 0.3s ease;
-        cursor: default;
-    }
-
-    .month {
-        padding: 5px;
-        text-align: center;
-        border-radius: 3px;
-        color: var(--form-element-text-color);
-
-        &:hover {
-            background-color: var(--datepicker-cell-hover-bg-color);
-        }
-
-        &.selected {
-            color: var(--form-element-primary-text-color);
-            background-color: var(--form-element-primary-color);
-        }
-    }
-
-    .expanded {
-        max-height: 500px;
-    }
-}
-
-.dropdown-arrow {
-    display: inline-block;
-    margin-left: 5px;
-    width: 0;
-    height: 0;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 5px solid var(--form-element-text-color);
-    vertical-align: middle;
-    user-select: none;
-
-    &.fade {
-        border-top: 5px solid var(--datepicker-header-fade-color);
-    }
-}