fixed logs

.github/workflows/build-helper.yml

@@ -27,7 +27,7 @@ jobs:
               if: matrix.platform == 'linux'
               run: |
                   sudo apt-get update
-                  sudo apt-get install --no-install-recommends -y libarchive-tools libopenjp2-tools rpm
+                  sudo apt-get install rpm
             - uses: actions/setup-go@v5
               with:
                   go-version: ${{env.GO_VERSION}}

README.md

@@ -9,7 +9,7 @@
 
 # Wave Terminal
 
-Wave is an open-source AI-native terminal built for seamless workflows.
+An open-source, cross-platform, AI-integrated, modern terminal for seamless workflows.
 
 Wave isn't just another terminal emulator; it's a rethink on how terminals are built. Wave combines command line with the power of the open web to help veteran CLI users and new developers alike.
 
@@ -17,14 +17,13 @@ Wave isn't just another terminal emulator; it's a rethink on how terminals are b
 -   Persistent sessions that can restore state across network disconnections and reboots
 -   Searchable contextual command history across all remote sessions (saved locally)
 -   Workspaces, tabs, and command blocks to keep you organized
--   CodeEdit, to edit local and remote files with a VSCode-like inline editor
 -   AI Integration with ChatGPT (or ChatGPT compatible APIs) to help write commands and get answers inline
 
 ![WaveTerm Screenshot](./assets/wave-screenshot.jpeg)
 
 ## Installation
 
-Wave Terminal works with MacOS and Linux.
+Wave Terminal works with MacOS and Linux (preliminary).
 
 Install Wave Terminal from: [www.waveterm.dev/download](https://www.waveterm.dev/download)
 
@@ -50,7 +49,7 @@ brew install --cask wave
 
 ## Contributing
 
-Wave uses Github Issues for issue tracking.
+Wave uses Github Project for tracking issues.
 
 Find more information in our [Contributions Guide](CONTRIBUTING.md), which includes:
 

buildres/download-staged-artifact.sh

@@ -13,4 +13,4 @@ fi
 DOWNLOAD_DIR=$VERSION-staged
 rm -rf $DOWNLOAD_DIR
 mkdir -p $DOWNLOAD_DIR
-aws s3 cp s3://waveterm-github-artifacts/staging/$VERSION/ $DOWNLOAD_DIR/ --recursive --profile $AWS_PROFILE
+aws s3 cp s3://waveterm-github-artifacts/staging/$VERSION/ $DOWNLOAD_DIR/ --recursive

buildres/publish-from-staging.sh

@@ -9,13 +9,4 @@ if [ -z "$VERSION" ]; then
     exit
 fi
 
-ORIGIN="waveterm-github-artifacts/staging/$VERSION/"
-DESTINATION="dl.waveterm.dev/releases/"
-
-OUTPUT=$(aws s3 cp s3://$ORIGIN s3://$DESTINATION --recursive --profile $AWS_PROFILE)
-
-for line in $OUTPUT; do
-    PREFIX=${line%%${DESTINATION}*}
-    SUFFIX=${line:${#PREFIX}}
-    echo "https://$SUFFIX"
-done
+aws s3 cp s3://waveterm-github-artifacts/staging/$VERSION/ s3://dl.waveterm.dev/releases/ --recursive

electron-builder.config.js

@@ -73,7 +73,7 @@ const config = {
         executableName: pkg.productName,
         category: "TerminalEmulator",
         icon: "public/waveterm.icns",
-        target: ["zip", "deb", "rpm", "AppImage", "pacman"],
+        target: ["zip", "deb", "rpm", "AppImage"],
         synopsis: pkg.description,
         description: null,
         desktop: {

package.json

@@ -5,8 +5,8 @@
         "email": "info@commandline.dev"
     },
     "productName": "Wave",
-    "description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
-    "version": "0.7.0",
+    "description": "An open-source, cross-platform, AI-integrated, modern terminal for seamless workflows.",
+    "version": "0.6.1",
     "main": "dist/emain.js",
     "license": "Apache-2.0",
     "repository": {
@@ -101,4 +101,4 @@
     "scripts": {
         "postinstall": "electron-builder install-app-deps"
     }
-}
+}

public/themes/default.css

@@ -1,7 +1,6 @@
 /* Copyright 2024, Command Line Inc.
    SPDX-License-Identifier: Apache-2.0 */
 
-@import url("./term-default.css");
 @import url("./term-dark.css");
 
 :root {
@@ -48,9 +47,9 @@
     --app-bg-color: black;
     --app-accent-color: rgb(88, 193, 66);
     --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-error-color: rgb(204, 0, 0);
+    --app-warning-color: rgb(255, 165, 0);
+    --app-success-color: rgb(38, 97, 26);
     --app-text-color: rgb(211, 215, 207);
     --app-text-primary-color: rgb(255, 255, 255);
     --app-text-secondary-color: rgb(195, 200, 194);
@@ -71,9 +70,9 @@
 
     /* 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-background-color: #030303;
+    --scrollbar-thumb-color: #333;
+    --scrollbar-thumb-hover-color: rgb(211, 215, 207);
 
     /* code color */
     --pre-bg-color: rgb(0, 0, 0);
@@ -92,20 +91,44 @@
 
     --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-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);
-    --form-element-error-color: var(--app-error-color);
-    --form-element-icon-color: var(--app-icon-hover-color);
+    --form-element-text-color: #ffffff;
+    --form-element-label-color: rgb(195, 200, 194);
+    --form-element-primary-color: rgb(78, 154, 6);
+    --form-element-secondary-color: rgba(255, 255, 255, 0.09);
+    --form-element-error-color: rgb(204, 0, 0);
+    --form-element-icon-color: #fff;
+
+    /* button colors */
+    /* todo: use --form-element-* directly in elements */
+    --button-text-color: var(--form-element-text-color);
+    --button-primary-bg-color: var(--form-element-primary-color);
+    --button-primary-color: var(--form-element-text-color);
+    --button-secondary-bg-color: var(--form-element-secondary-color);
+    --button-warning-bg-color: var(--form-element-error-color);
+
+    /* input colors */
+    /* todo: use --form-element-* directly in elements */
+    --checkbox-text-color: var(--form-element-text-color);
+    --checkbox-bg-color: var(--form-element-primary-color);
+    --checkbox-check-color: var(--form-element-text-color);
+
+    /* dropdown colors */
+    /* todo: use --form-element-* directly in elements */
+    --dropdown-text-color: var(--form-element-text-color);
+    --dropdown-label-color: var(--form-element-label-color);
+    --dropdown-error-color: var(--form-element-error-color);
+    --dropdown-focus-color: var(--form-element-primary-color);
+    --dropdown-bg-color: var(--form-element-bg-color);
+    --dropdown-border-color: var(--form-element-border-color);
 
     /* toggle colors */
-    --toggle-bg-color: var(--app-border-color);
-    --toggle-thumb-color: var(--app-text-color);
-    --toggle-checked-bg-color: var(--app-accent-color);
+    --toggle-bg-color: rgb(51, 51, 51);
+    --toggle-thumb-color: rgb(211, 215, 207);
+    --toggle-checked-bg-color: var(--form-element-primary-color);
 
     /* cmdstrcode colors */
-    --cmdstrcode-text-color: var(--app-text-color);
+    --cmdstrcode-bg-color: rgb(0, 0, 0);
+    --cmdstrcode-text-color: rgb(211, 215, 207);
 
     /* markdown colors */
     --markdown-bg-color: rgb(35, 35, 35);
@@ -113,29 +136,29 @@
 
     /* 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-connected-color: rgb(70, 167, 88);
+    --status-connecting-color: rgb(245, 217, 10);
+    --status-error-color: rgb(229, 77, 46);
+    --status-disconnected-color: rgb(195, 200, 194);
 
     /* 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-indicator-color: rgb(211, 215, 207);
+    --status-indicator-error: rgb(204, 0, 0);
+    --status-indicator-success: rgb(78, 154, 6);
 
     /* status(version) colors */
     /* todo: all status colors must be unified */
-    --status-outdated-color: var(--status-connecting-color);
-    --status-updated-color: var(--status-connected-color);
+    --status-outdated-color: rgb(196, 160, 0);
+    --status-updated-color: rgb(78, 154, 6);
 
     /* term status colors */
     /* todo: all status colors must be unified */
-    --term-error-color: var(--status-error-color);
-    --term-warning-color: var(--status-connecting-color);
+    --term-error-color: rgb(204, 0, 0);
+    --term-warning-color: rgb(196, 160, 0);
 
     /* hotkey colors */
-    --hotkey-text-color: var(--app-text-secondary-color);
+    --hotkey-text-color: rgb(195, 200, 194);
 
     /* sidebar colors */
     --sidebar-highlight-color: rgba(241, 246, 243, 0.08);
@@ -153,10 +176,10 @@
     --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-error-color: #cc0000;
+    --line-warning-color: #ffa500;
     --line-base-soft-blue-color: #729fcf;
-    --line-active-border-color: var(--app-accent-color);
+    --line-active-border-color: rgb(97, 158, 72);
     --line-selected-bg-color: rgba(255, 255, 255, 0.05);
     --line-selected-border-left-color: #777777;
     --line-selected-error-border-color: rgba(204, 0, 0, 0.8);
@@ -167,12 +190,12 @@
     --line-meta-user-color: rgba(140, 184, 232);
     --line-svg-color: rgba(236, 238, 236, 0.6);
     --line-svg-hover-color: rgba(236, 238, 236, 1);
-    --line-status-success-fill: var(--app-success-color);
-    --line-status-error-fill: var(--app-error-color);
-    --line-status-warning-fill: var(--app-warning-color);
+    --line-status-success-fill: rgb(88, 193, 66);
+    --line-status-error-fill: #cc0000;
+    --line-status-warning-fill: #ffa500;
     --line-actions-inactive-color: rgba(255, 255, 255, 0.5);
     --line-actions-active-color: rgba(255, 255, 255, 1);
-    --line-actions-bg-color: rgba(255, 255, 255, 0.15);
+    --line-actions-bg-color: rgba(21, 23, 21, 1);
 
     /* view colors */
     /* todo: bookmarks is a view, colors must be unified with --view* colors */
@@ -182,13 +205,13 @@
     --bookmarks-control-hover-color: rgb(255, 255, 255);
 
     /* view colors */
-    --view-error-color: var(--app-error-color);
-    --view-text-color: var(--app-text-color);
+    --view-error-color: rgb(204, 0, 0);
+    --view-text-color: rgb(195, 200, 194);
 
     /* 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: #ccc;
+    --table-thead-border-bottom-color: var(--table-border-color);
     --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);

public/themes/light.css

@@ -2,13 +2,10 @@
    SPDX-License-Identifier: Apache-2.0 */
 
 @import "./default.css";
-@import "./term-default.css";
 @import "./term-light.css";
 
 :root {
     --app-bg-color: #fefefe;
-    --app-accent-color: rgb(75, 166, 57);
-    --app-accent-bg-color: rgba(75, 166, 57, 0.2);
     --app-text-color: #000;
     --app-text-primary-color: rgb(0, 0, 0, 0.9);
     --app-text-secondary-color: rgb(0, 0, 0, 0.7);
@@ -45,10 +42,8 @@
     --form-element-bg-color: var(--app-bg-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-secondary-color: rgba(255, 255, 255, 0.09);
     --form-element-icon-color: rgb(0, 0, 0, 0.6);
-    --form-element-disabled-text-color: #b7b7b7;
-    --form-element-placeholder-color: #b7b7b7;
 
     /* modal colors */
     --modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);
@@ -58,17 +53,16 @@
     --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-background-color: rgba(0, 0, 0, 0.3);
+    --scrollbar-thumb-color: rgba(0, 0, 0, 0.4);
+    --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.5);
+
+    /* cmdstrcode colors */
+    --cmdstrcode-bg-color: var(--term-black);
+    --cmdstrcode-text-color: var(--term-white);
 
     /* 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);
-
-    /* toggle colors */
-    --toggle-thumb-color: var(--app-bg-color);
+    --line-actions-bg-color: rgba(0, 0, 0, 0.4);
 
     --logo-button-hover-bg-color: #f0f0f0;
 

public/themes/term-default.css

@@ -11,9 +11,9 @@
     --term-green: #4e9a06;
     --term-yellow: #c4a000;
     --term-blue: #3465a4;
-    --term-magenta: #bc3fbc;
+    --term-magenta: #75507b;
     --term-cyan: #06989a;
-    --term-white: #d0d0d0;
+    --term-white: #d3d7cf;
     --term-bright-black: #555753;
     --term-bright-red: #ef2929;
     --term-bright-green: #58c142;
@@ -21,7 +21,7 @@
     --term-bright-blue: #32afff;
     --term-bright-magenta: #ad7fa8;
     --term-bright-cyan: #34e2e2;
-    --term-bright-white: #e7e7e7;
+    --term-bright-white: #ffffff;
 
     --term-gray: #8b918a; /* not an official terminal color */
     --term-cmdtext: #ffffff;

public/themes/term-light.css

@@ -5,5 +5,7 @@
     /* term colors */
     --term-foreground: #000000;
     --term-background: #fefefe;
+    --term-black: #fefefe;
+    --term-white: #000000;
     --term-cmdtext: #000000;
 }

src/app/app.less

@@ -12,7 +12,7 @@ body {
 
 body {
     &.is-dev .sidebar {
-        --app-panel-bg-color: var(--app-panel-bg-color-dev);
+        background-color: var(--app-panel-bg-color-dev);
     }
 }
 
@@ -210,10 +210,10 @@ svg.icon {
 .dropdown,
 .button {
     display: inline-block;
-    border: 1px solid var(--form-element-secondary-color) !important;
+    border: 1px solid var(--button-secondary-bg-color) !important;
     border-radius: 5px;
     cursor: pointer;
-    background-color: var(--form-element-secondary-color) !important;
+    background-color: var(--button-secondary-bg-color) !important;
     color: var(--app-accent-color);
     .hoverEffect;
     &:hover {
@@ -221,7 +221,7 @@ svg.icon {
     }
     &.disabled {
         color: var(--app-text-color);
-        background: var(--form-element-secondary-color);
+        background: var(--button-secondary-bg-color);
         opacity: 0.5;
         cursor: initial;
     }
@@ -382,9 +382,9 @@ a.a-block {
     }
 
     &.connect-button {
-        color: var(--form-element-primary-color);
+        color: var(--button-primary-bg-color);
         &:hover {
-            color: var(--form-element-primary-color);
+            color: var(--button-primary-bg-color);
         }
     }
 
@@ -396,9 +396,9 @@ a.a-block {
     }
 
     &.success-button {
-        color: var(--form-element-primary-color);
+        color: var(--button-primary-bg-color);
         &:hover {
-            color: var(--form-element-primary-color);
+            color: var(--button-primary-bg-color);
         }
     }
 

src/app/app.tsx

@@ -111,12 +111,11 @@ class App extends React.Component<{}, {}> {
         // used to force a full reload of the application
         const renderVersion = GlobalModel.renderVersion.get();
         const sidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
-        const lightDarkClass = GlobalModel.isThemeDark() ? "is-dark" : "is-light";
         return (
             <div
                 key={"version-" + renderVersion}
                 id="main"
-                className={cn("platform-" + platform, { "sidebar-collapsed": sidebarCollapsed }, lightDarkClass)}
+                className={cn("platform-" + platform, { "sidebar-collapsed": sidebarCollapsed })}
                 onContextMenu={this.handleContextMenu}
             >
                 <If condition={sidebarCollapsed}>

src/app/assets/icons/globe.svg

@@ -1,6 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g id="globe">
-        <path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
-            d="M5.51561 7.24988C5.58926 5.49464 5.91878 3.94637 6.3934 2.81642C6.66453 2.17096 6.96822 1.69729 7.26714 1.39629C7.56327 1.0981 7.81035 1.00977 8.00003 1.00977C8.1897 1.00977 8.43678 1.0981 8.73291 1.39629C9.03183 1.69729 9.33553 2.17096 9.60665 2.81642C10.0813 3.94637 10.4108 5.49464 10.4844 7.24988H5.51561ZM4.01441 7.24988H1.03973C1.31693 4.64752 3.02019 2.47128 5.35297 1.51768C5.22994 1.74443 5.1158 1.98471 5.01045 2.23552C4.44737 3.57606 4.0887 5.32893 4.01441 7.24988ZM10.6471 1.51768C10.7701 1.74443 10.8842 1.98471 10.9896 2.23552C11.5527 3.57606 11.9114 5.32893 11.9856 7.24988H14.9603C14.6831 4.64752 12.9799 2.47128 10.6471 1.51768ZM10.4842 8.74988C10.4101 10.5028 10.0808 12.049 9.60665 13.1777C9.33553 13.8232 9.03183 14.2968 8.73291 14.5978C8.43678 14.896 8.1897 14.9844 8.00003 14.9844C7.81035 14.9844 7.56327 14.896 7.26714 14.5978C6.96822 14.2968 6.66453 13.8232 6.3934 13.1777C5.91928 12.049 5.58997 10.5028 5.51585 8.74988H10.4842ZM11.9854 8.74988H14.9603C14.683 11.3537 12.978 13.5309 10.6432 14.4837C10.7677 14.2548 10.8831 14.0121 10.9896 13.7586C11.5521 12.4194 11.9107 10.6686 11.9854 8.74988ZM5.35689 14.4837C3.0221 13.5309 1.31708 11.3537 1.03973 8.74988H4.01463C4.0894 10.6686 4.44792 12.4194 5.01045 13.7586C5.11692 14.0121 5.23237 14.2548 5.35689 14.4837Z" />
-    </g>
-</svg>
+<g id="globe">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M5.51561 7.24988C5.58926 5.49464 5.91878 3.94637 6.3934 2.81642C6.66453 2.17096 6.96822 1.69729 7.26714 1.39629C7.56327 1.0981 7.81035 1.00977 8.00003 1.00977C8.1897 1.00977 8.43678 1.0981 8.73291 1.39629C9.03183 1.69729 9.33553 2.17096 9.60665 2.81642C10.0813 3.94637 10.4108 5.49464 10.4844 7.24988H5.51561ZM4.01441 7.24988H1.03973C1.31693 4.64752 3.02019 2.47128 5.35297 1.51768C5.22994 1.74443 5.1158 1.98471 5.01045 2.23552C4.44737 3.57606 4.0887 5.32893 4.01441 7.24988ZM10.6471 1.51768C10.7701 1.74443 10.8842 1.98471 10.9896 2.23552C11.5527 3.57606 11.9114 5.32893 11.9856 7.24988H14.9603C14.6831 4.64752 12.9799 2.47128 10.6471 1.51768ZM10.4842 8.74988C10.4101 10.5028 10.0808 12.049 9.60665 13.1777C9.33553 13.8232 9.03183 14.2968 8.73291 14.5978C8.43678 14.896 8.1897 14.9844 8.00003 14.9844C7.81035 14.9844 7.56327 14.896 7.26714 14.5978C6.96822 14.2968 6.66453 13.8232 6.3934 13.1777C5.91928 12.049 5.58997 10.5028 5.51585 8.74988H10.4842ZM11.9854 8.74988H14.9603C14.683 11.3537 12.978 13.5309 10.6432 14.4837C10.7677 14.2548 10.8831 14.0121 10.9896 13.7586C11.5521 12.4194 11.9107 10.6686 11.9854 8.74988ZM5.35689 14.4837C3.0221 13.5309 1.31708 11.3537 1.03973 8.74988H4.01463C4.0894 10.6686 4.44792 12.4194 5.01045 13.7586C5.11692 14.0121 5.23237 14.2548 5.35689 14.4837Z" fill="#C3C8C2"/>
+</g>
+</svg>

src/app/assets/icons/rotate-sharp-solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M142.9 142.9c-17.5 17.5-30.1 38-37.8 59.8L44.8 181.4C55.6 150.7 73.2 122 97.6 97.6c87.5-87.5 229.3-87.5 316.8 0l0 0L472 40l24 24V224H336l-24-24 57.1-57.1 0 0c-62.5-62.5-163.8-62.5-226.3 0zm0 226.3c62.5 62.5 163.8 62.5 226.3 0c17.5-17.5 30.1-38 37.8-59.8l60.4 21.3c-10.8 30.6-28.4 59.3-52.9 83.7c-87.5 87.5-229.3 87.5-316.7 0l0 0L40 472 16 448V288H176l24 24-57.1 57.1z"/></svg>

src/app/clientsettings/clientsettings.tsx

@@ -5,6 +5,8 @@ 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 cn from "classnames";
 import { GlobalModel, GlobalCommandRunner, RemotesModel, getApi } from "@/models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
 import { commandRtnHandler, isBlank } from "@/util/util";
@@ -166,7 +168,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const curTheme = GlobalModel.getTheme();
 
         return (
-            <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
+            <MainView viewName="clientsettings" title="Client Settings" onClose={this.handleClose}>
                 <div className="content">
                     <div className="settings-field">
                         <div className="settings-label">Term Font Size</div>
@@ -190,17 +192,19 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                             />
                         </div>
                     </div>
-                    <div className="settings-field">
-                        <div className="settings-label">Theme</div>
-                        <div className="settings-input">
-                            <Dropdown
-                                className="theme-dropdown"
-                                options={this.getThemes()}
-                                defaultValue={curTheme}
-                                onChange={this.handleChangeTheme}
-                            />
+                    <If condition={GlobalModel.isDev}>
+                        <div className="settings-field">
+                            <div className="settings-label">Theme</div>
+                            <div className="settings-input">
+                                <Dropdown
+                                    className="theme-dropdown"
+                                    options={this.getThemes()}
+                                    defaultValue={curTheme}
+                                    onChange={this.handleChangeTheme}
+                                />
+                            </div>
                         </div>
-                    </div>
+                    </If>
                     <div className="settings-field">
                         <div className="settings-label">Client ID</div>
                         <div className="settings-input">{cdata.clientid}</div>

src/app/common/elements/button.less

@@ -18,20 +18,20 @@
         background: none;
 
         i {
-            fill: var(--form-element-primary-color);
+            fill: var(--button-primary-bg-color);
         }
 
         &.solid {
-            color: var(--form-element-text-color);
-            background: var(--form-element-primary-color);
+            color: var(--button-primary-color);
+            background: var(--button-primary-bg-color);
 
             i {
-                fill: var(--form-element-text-color);
+                fill: var(--button-primary-color);
             }
         }
 
         &.outlined {
-            border: 1px solid var(--form-element-primary-color);
+            border: 1px solid var(--button-primary-bg-color);
         }
 
         &.ghost {
@@ -39,29 +39,29 @@
         }
 
         &:hover {
-            color: var(--form-element-text-color);
+            color: var(--button-primary-color);
         }
     }
 
     &.secondary {
-        color: var(--form-element-text-color);
+        color: var(--button-text-color);
         background: none;
 
         &.solid {
-            color: var(--form-element-text-color);
-            background: var(--form-element-secondary-color);
+            color: var(--button-text-color);
+            background: var(--button-secondary-bg-color);
             box-shadow: none;
         }
 
         &.outlined {
-            border: 1px solid var(--form-element-secondary-color);
+            border: 1px solid var(--button-secondary-bg-color);
         }
 
         &.ghost {
             padding: 6px 10px;
 
             i {
-                fill: var(--form-element-primary-color);
+                fill: var(--button-primary-bg-color);
             }
         }
     }

src/app/common/elements/checkbox.less

@@ -10,7 +10,7 @@
         position: relative;
         display: flex;
         align-items: center;
-        color: var(--form-element-primary-color);
+        color: var(--checkbox-bg-color);
         transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);
     }
     input[type="checkbox"] + label > span {
@@ -36,7 +36,7 @@
     }
 
     input[type="checkbox"]:checked + label > span {
-        border: 10px solid var(--form-element-primary-color);
+        border: 10px solid var(--button-primary-bg-color);
     }
     input[type="checkbox"]:checked + label > span:before {
         content: "";
@@ -45,8 +45,8 @@
         left: 3px;
         width: 7px;
         height: 12px;
-        border-right: 2px solid var(--form-element-text-color);
-        border-bottom: 2px solid var(--form-element-text-color);
+        border-right: 2px solid var(--checkbox-check-color);
+        border-bottom: 2px solid var(--checkbox-check-color);
         transform: rotate(45deg);
         transform-origin: 0% 100%;
         animation: checkbox-check 500ms cubic-bezier(0.4, 0, 0.23, 1);

src/app/common/elements/cmdstrcode.less

@@ -36,6 +36,7 @@
     }
 
     .code-div {
+        background-color: var(--cmdstrcode-bg-color);
         display: flex;
         flex-direction: row;
         min-width: 100px;
@@ -48,6 +49,7 @@
             color: var(--cmdstrcode-text-color);
             white-space: pre;
             padding: 2px 8px 2px 8px;
+            background-color: var(--cmdstrcode-bg-color);
             font-size: var(--termfontsize);
             font-family: var(--termfontfamily);
             line-height: var(--termlineheight);

src/app/common/elements/dropdown.less

@@ -3,10 +3,9 @@
     height: 44px;
     min-width: 150px;
     width: 100%;
-    border: 2px solid var(--form-element-border-color);
+    border: 1px solid var(--dropdown-border-color);
     border-radius: 6px;
-    line-height: 22px;
-    background: var(--form-element-bg-color);
+    background: var(--dropdown-bg-color);
 
     &.no-label {
         height: 34px;
@@ -18,7 +17,7 @@
         top: 16px;
         font-size: 12.5px;
         transition: all 0.3s;
-        color: var(--form-element-label-color);
+        color: var(--dropdown-label-color);
         line-height: 10px;
 
         &.float {
@@ -89,15 +88,11 @@
     }
 
     &-error {
-        border-color: var(--form-element-error-color);
+        border-color: var(--dropdown-error-color);
     }
 
     &:focus {
-        border-color: var(--form-element-primary-color);
-    }
-
-    .lefticon {
-        color: var(--app-text-color);
+        border-color: var(--dropdown-focus-color);
     }
 }
 
@@ -114,13 +109,13 @@
     align-items: flex-start;
     gap: 4px;
     border-radius: 6px;
-    border: 2px solid var(--form-element-border-color);
-    background: var(--form-element-bg-color);
+    border: 1px solid var(--dropdown-border-color);
+    background: var(--dropdown-bg-color);
     // box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 3px 8px 0px rgba(0, 0, 0, 0.35), 0px 0px 0.5px 0px #fff inset,
     // 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
     animation-fill-mode: forwards;
     z-index: 1000;
-    color: var(--form-element-text-color);
+    color: var(--dropdown-text-color);
 }
 
 .wave-dropdown-menu-close {

src/app/common/elements/index.tsx

@@ -13,6 +13,7 @@ export { NumberField } from "./numberfield";
 export { PasswordField } from "./passwordfield";
 export { ResizableSidebar } from "./resizablesidebar";
 export { SettingsError } from "./settingserror";
+export { ShowWaveShellInstallPrompt } from "./showwaveshellinstallprompt";
 export { Status } from "./status";
 export { TextField } from "./textfield";
 export { Toggle } from "./toggle";