save work

Merge branch 'main' into evan/newton
Bump electron to version 28 (#225 )
2026-04-22 15:26:58 -07:00 · 2024-01-13 11:05:20 -08:00 · 2024-01-12 12:09:57 -08:00 · 2024-01-11 19:08:17 -08:00 · 2024-01-11 18:57:15 -08:00 · 2024-01-11 18:31:07 -08:00
122 changed files with 32242 additions and 2356 deletions
@@ -0,0 +1,57 @@
+name: "Build MacOS x64"
+on: workflow_dispatch
+env:
+    WAVETERM_VERSION: 0.5.3
+    GO_VERSION: '1.21.5'
+    NODE_VERSION: '21.5.0'
+jobs:
+    runbuild-x64:
+        name: "Build MacOS x64"
+        runs-on: macos-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-go@v4
+              with:
+                go-version: ${{env.GO_VERSION}}
+                cache-dependency-path: |
+                    wavesrv/go.sum
+                    waveshell/go.sum
+            - run: brew tap scripthaus-dev/scripthaus
+            - run: brew install scripthaus
+            - uses: actions/setup-node@v4
+              with:
+                node-version: ${{env.NODE_VERSION}}
+                cache: 'yarn'
+            - run: yarn --frozen-lockfile
+            - run: scripthaus run build-package
+            - uses: actions/upload-artifact@v3
+              with:
+                name: waveterm-build-darwin-x64
+                path: out/make/zip/darwin/x64/*.zip
+                retention-days: 2
+    runbuild-arm64:
+        name: "Build MacOS arm64"
+        runs-on: macos-latest-xlarge
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-go@v4
+              with:
+                go-version: ${{env.GO_VERSION}}
+                cache-dependency-path: |
+                    wavesrv/go.sum
+                    waveshell/go.sum
+            - run: brew tap scripthaus-dev/scripthaus
+            - run: brew install scripthaus
+            - uses: actions/setup-node@v4
+              with:
+                node-version: ${{env.NODE_VERSION}}
+                cache: 'yarn'
+            - run: yarn --frozen-lockfile
+            - run: scripthaus run build-package
+            - uses: actions/upload-artifact@v3
+              with:
+                name: waveterm-build-darwin-arm64
+                path: out/make/zip/darwin/arm64/*.zip
+                retention-days: 2
+
+
@@ -0,0 +1,81 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '36 5 * * 5'
+
+jobs:
+  analyze:
+    name: Analyze
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners
+    # Consider using larger runners for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    timeout-minutes: ${{ (matrix.language == 'swift' && 120) || 360 }}
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'go', 'javascript-typescript' ]
+        # CodeQL supports [ 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift' ]
+        # Use only 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use only 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # 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
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ 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
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines.
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #     echo "Run, Build Application using script"
+    #     ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2
+      with:
+        category: "/language:${{matrix.language}}"
@@ -25,6 +25,11 @@ Wave Terminal works with MacOS and Linux (preliminary).

 Install Wave Terminal from: [www.waveterm.dev/download](https://www.waveterm.dev/download)

+Also available as a homebrew cask for MacOS:
+```
+brew install --cask wave
+```
+
 ## Links

 * Homepage &mdash; https://www.waveterm.dev
@@ -0,0 +1,20 @@
+# Open-Source Acknowledgements
+
+We make use of many amazing open-source projects to build Wave Terminal. Here are the links to the latest acknowledgements for each of our components, including license disclaimers for each dependency:
+
+- [Frontend](./disclaimers/frontend.md)
+- [Backend](./disclaimers/backend.md)
+
+## Generating license disclaimers
+
+The license disclaimers for the backend are generated using the [go-licenses](https://github.com/google/go-licenses) tool. We supply a template file ([`go_licenses_report.tpl`](./go_licenses_report.tpl)) to generate a pretty print of the disclaimers for each dependency. This outputs to the file [`backend.md`](./disclaimers/backend.md).
+
+The license disclaimers for the frontend are generated using the [`yarn licenses` tool](https://classic.yarnpkg.com/lang/en/docs/cli/licenses/). This outputs to the file [`frontend.md`](./disclaimers/frontend.md).
+
+These three disclaimer files linked above will be periodically regenerated to reflect new dependencies.
+
+The [`scripthaus.md` file](../scripthaus.md) contains scripts to genrate the disclaimers and package them. To manually generate the disclaimers, run the following from the repository root directory:
+
+```bash
+scripthaus run generate-license-disclaimers
+```
@@ -0,0 +1,16 @@
+# Wave Terminal Backend Acknowledgements
+
+The following sets forth attribution notices for third party software that may be contained in portions of the Wave Terminal product.
+{{ range . }}
+## {{ .Name }}
+
+* Name: {{ .Name }}
+* Version: {{ .Version }}
+* License: [{{ .LicenseName }}]({{ .LicenseURL }})
+
+```txt
+{{ .LicenseText }}
+```
+
+-----
+{{ end }}
@@ -1,7 +1,7 @@
 #!/bin/bash

 # assumes we have Wave-darwin-x64-[version].zip and Wave-darwin-arm64-[version].zip in current directory
-VERSION=0.5.1
+VERSION=0.5.3
 rm -rf temp
 mkdir temp
 mkdir temp/x64
@@ -1,4 +1,7 @@
-go 1.18
+go 1.21
+
+toolchain go1.21.5

 use ./wavesrv
-use ./waveshell
+
+use ./waveshell
@@ -1,6 +1,25 @@
+github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
+github.com/golang/protobuf v1.5.2/go.mod h1:XVQd3VNwM+JqD3oG2Ue2ip4fOMUkwXdXDdiuN0vRsmY=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/google/go-querystring v1.1.0 h1:AnCroh3fv4ZBgVIf1Iwtovgjaw/GiKJo8M8yD/fhyJ8=
+github.com/google/go-querystring v1.1.0/go.mod h1:Kcdr2DB4koayq7X8pmAG4sNG59So17icRSOU623lUBU=
+github.com/google/renameio/v2 v2.0.0/go.mod h1:BtmJXm5YlszgC+TD4HOEEUFgkJP3nLxehU6hfe7jRt4=
+github.com/kevinburke/ssh_config v1.2.0 h1:x584FjTGwHzMwvHx18PXxbBVzfnxogHaAReU4gf13a4=
+github.com/kevinburke/ssh_config v1.2.0/go.mod h1:CT57kijsi8u/K/BOFA39wgDQJ9CxiF4nAY/ojJ6r6mM=
+github.com/kr/pretty v0.3.1/go.mod h1:hoEshYVHaxMs3cyo3Yncou5ZscifuDolrwPKZanG3xk=
+github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
+github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8/go.mod h1:HKlIX3XHQyzLZPlr7++PzdhaXEj94dEiJgZDTsxEqUI=
+github.com/pkg/diff v0.0.0-20210226163009-20ebb0f2a09e/go.mod h1:pJLUxLENpZxwdsKMEsNbx1VGcRFpLqf3715MtcvvzbA=
+github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
+github.com/wavetermdev/ssh_config v0.0.0-20240109090616-36c8da3d7376 h1:tFhJgTu7lgd+hldLfPSzDCoWUpXI8wHKR3rxq5jTLkQ=
+github.com/wavetermdev/ssh_config v0.0.0-20240109090616-36c8da3d7376/go.mod h1:q2RIzfka+BXARoNexmF9gkxEX7DmvbW9P4hIVx2Kg4M=
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
 golang.org/x/sync v0.2.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/term v0.15.0/go.mod h1:BDl952bC7+uMoWR75FIrCDx79TPU9oHkTZ9yRbYOrX0=
 golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
 golang.org/x/tools v0.9.1/go.mod h1:owI94Op576fPu3cIGQeHs3joujW/2Oc6MtlxbF5dfNc=
+google.golang.org/appengine v1.6.7/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc=
+google.golang.org/protobuf v1.28.1/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
@@ -2,7 +2,7 @@
    "name": "waveterm",
    "author": "Command Line Inc",
    "productName": "Wave",
-    "version": "0.5.1",
+    "version": "0.5.3",
    "main": "dist/emain.js",
    "license": "Apache-2.0",
    "dependencies": {
@@ -11,11 +11,14 @@
        "@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",
        "dayjs": "^1.11.3",
        "dompurify": "^3.0.2",
        "electron-squirrel-startup": "^1.0.0",
+        "framer-motion": "^10.16.16",
        "mobx": "6.12",
        "mobx-react": "^7.5.0",
        "monaco-editor": "^0.44.0",
@@ -24,7 +27,6 @@
        "papaparse": "^5.4.1",
        "react": "^18.1.0",
        "react-dom": "^18.1.0",
-        "react-json-view": "^1.21.3",
        "react-markdown": "^9.0.0",
        "remark": "^15.0.1",
        "remark-gfm": "^4.0.0",
@@ -33,7 +35,8 @@
        "tsx-control-statements": "^4.1.1",
        "uuid": "^9.0.0",
        "winston": "^3.8.2",
-        "xterm": "^5.0.0"
+        "xterm": "^5.0.0",
+        "xterm-addon-web-links": "^0.9.0"
    },
    "devDependencies": {
        "@babel/cli": "^7.17.10",
@@ -47,17 +50,17 @@
        "@babel/preset-env": "^7.18.2",
        "@babel/preset-react": "^7.23.3",
        "@babel/preset-typescript": "^7.17.12",
-        "@electron-forge/cli": "^6.0.0-beta.70",
-        "@electron-forge/maker-deb": "^6.0.0-beta.70",
-        "@electron-forge/maker-rpm": "^6.0.0-beta.70",
-        "@electron-forge/maker-snap": "^6.4.2",
-        "@electron-forge/maker-squirrel": "^6.0.0-beta.70",
-        "@electron-forge/maker-zip": "^6.0.0-beta.70",
+        "@electron-forge/cli": "^7.2.0",
+        "@electron-forge/maker-deb": "^7.2.0",
+        "@electron-forge/maker-rpm": "^7.2.0",
+        "@electron-forge/maker-snap": "^7.2.0",
+        "@electron-forge/maker-squirrel": "^7.2.0",
+        "@electron-forge/maker-zip": "^7.2.0",
        "@electron/rebuild": "^3.4.0",
        "@svgr/webpack": "^8.1.0",
        "@types/classnames": "^2.3.1",
        "@types/electron": "^1.6.10",
-        "@types/node": "20.10.3",
+        "@types/node": "20.11.0",
        "@types/papaparse": "^5.3.10",
        "@types/react": "^18.0.12",
        "@types/sprintf-js": "^1.1.3",
@@ -68,7 +71,7 @@
        "babel-plugin-jsx-control-statements": "^4.1.2",
        "copy-webpack-plugin": "^11.0.0",
        "css-loader": "^6.7.1",
-        "electron": "27.1.3",
+        "electron": "28.1.3",
        "file-loader": "^6.2.0",
        "http-server": "^14.1.1",
        "less": "^4.1.2",
@@ -79,7 +82,7 @@
        "raw-loader": "^4.0.2",
        "react-split-it": "^2.0.0",
        "style-loader": "^3.3.1",
-        "typescript": "^4.7.3",
+        "typescript": "^5.0.0",
        "webpack": "^5.73.0",
        "webpack-bundle-analyzer": "^4.10.1",
        "webpack-cli": "^5.1.4",
@@ -27,7 +27,7 @@ node_modules/.bin/electron-rebuild
 ```bash
 # @scripthaus command electron
 # @scripthaus cd :playbook
-WAVETERM_DEV=1 PCLOUD_ENDPOINT="https://ot2e112zx5.execute-api.us-west-2.amazonaws.com/dev" node_modules/.bin/electron dist-dev/emain.js
+WAVETERM_DEV=1 PCLOUD_ENDPOINT="https://ot2e112zx5.execute-api.us-west-2.amazonaws.com/dev" PCLOUD_WS_ENDPOINT="wss://5lfzlg5crl.execute-api.us-west-2.amazonaws.com/dev/" node_modules/.bin/electron dist-dev/emain.js
 ```

 ```bash
@@ -100,3 +100,15 @@ scripthaus run fullbuild-waveshell
 echo building wavesrv
 scripthaus run build-wavesrv
 ```
+
+```bash
+# @scripthaus command generate-license-disclaimers
+DISCLAIMER_DIR="./acknowledgements"
+DISCLAIMER_OUTPUT_DIR="$DISCLAIMER_DIR/disclaimers"
+if [ -d "$DISCLAIMER_OUTPUT_DIR" ]; then
+    rm -rf "$DISCLAIMER_OUTPUT_DIR"
+fi
+mkdir "$DISCLAIMER_OUTPUT_DIR"
+go run github.com/google/go-licenses@latest report ./wavesrv/... ./waveshell/... --template "$DISCLAIMER_DIR/go_licenses_report.tpl" --ignore github.com/wavetermdev/waveterm > "$DISCLAIMER_OUTPUT_DIR/backend.md"
+yarn licenses generate-disclaimer > "$DISCLAIMER_OUTPUT_DIR/frontend.md"
+```
@@ -476,17 +476,26 @@ a.a-block {
    }
 }

+.icon.color-default,
+.icon.color-green {
+    path,
+    circle {
+        fill: @tab-green;
+    }
+
+    i {
+        color: @tab-green;
+    }
+}
+
 .icon.color-red {
    path,
    circle {
        fill: @tab-red;
    }
-}

-.icon.color-green {
-    path,
-    circle {
-        fill: @tab-green;
+    i {
+        color: @tab-red;
    }
 }

@@ -495,6 +504,10 @@ a.a-block {
    circle {
        fill: @tab-orange;
    }
+
+    i {
+        color: @tab-orange;
+    }
 }

 .icon.color-blue {
@@ -502,6 +515,10 @@ a.a-block {
    circle {
        fill: @tab-blue;
    }
+
+    i {
+        color: @tab-blue;
+    }
 }

 .icon.color-yellow {
@@ -509,6 +526,10 @@ a.a-block {
    circle {
        fill: @tab-yellow;
    }
+
+    i {
+        color: @tab-yellow;
+    }
 }

 .icon.color-pink {
@@ -516,6 +537,10 @@ a.a-block {
    circle {
        fill: @tab-pink;
    }
+
+    i {
+        color: @tab-pink;
+    }
 }

 .icon.color-mint {
@@ -523,6 +548,10 @@ a.a-block {
    circle {
        fill: @tab-mint;
    }
+
+    i {
+        color: @tab-mint;
+    }
 }

 .icon.color-cyan {
@@ -530,6 +559,10 @@ a.a-block {
    circle {
        fill: @tab-cyan;
    }
+
+    i {
+        color: @tab-cyan;
+    }
 }

 .icon.color-violet {
@@ -537,6 +570,10 @@ a.a-block {
    circle {
        fill: @tab-violet;
    }
+
+    i {
+        color: @tab-violet;
+    }
 }

 .icon.color-white {
@@ -544,6 +581,10 @@ a.a-block {
    circle {
        fill: @tab-white;
    }
+
+    i {
+        color: @tab-white;
+    }
 }

 .status-icon.status-connected {
@@ -16,14 +16,9 @@ import { PluginsView } from "./pluginsview/pluginsview";
 import { BookmarksView } from "./bookmarks/bookmarks";
 import { HistoryView } from "./history/history";
 import { ConnectionsView } from "./connections/connections";
-import {
-    ScreenSettingsModal,
-    SessionSettingsModal,
-    LineSettingsModal,
-    ClientSettingsModal,
-} from "./common/modals/settings";
 import { MainSideBar } from "./sidebar/sidebar";
-import { DisconnectedModal, ClientStopModal, ModalsProvider } from "./common/modals/modals";
+import { DisconnectedModal, ClientStopModal } from "./common/modals";
+import { ModalsProvider } from "./common/modals/provider";
 import { ErrorBoundary } from "./common/error/errorboundary";
 import "./app.less";

@@ -74,10 +69,6 @@ class App extends React.Component<{}, {}> {
    }

    render() {
-        let screenSettingsModal = GlobalModel.screenSettingsModal.get();
-        let sessionSettingsModal = GlobalModel.sessionSettingsModal.get();
-        let lineSettingsModal = GlobalModel.lineSettingsModal.get();
-        let clientSettingsModal = GlobalModel.clientSettingsModal.get();
        let remotesModel = GlobalModel.remotesModel;
        let disconnected = !GlobalModel.ws.open.get() || !GlobalModel.waveSrvRunning.get();
        let hasClientStop = GlobalModel.getHasClientStop();
@@ -121,22 +112,6 @@ class App extends React.Component<{}, {}> {
                    </ErrorBoundary>
                </div>
                <ModalsProvider />
-                <If condition={screenSettingsModal != null}>
-                    <ScreenSettingsModal
-                        key={screenSettingsModal.sessionId + ":" + screenSettingsModal.screenId}
-                        sessionId={screenSettingsModal.sessionId}
-                        screenId={screenSettingsModal.screenId}
-                    />
-                </If>
-                <If condition={sessionSettingsModal != null}>
-                    <SessionSettingsModal key={sessionSettingsModal} sessionId={sessionSettingsModal} />
-                </If>
-                <If condition={lineSettingsModal != null}>
-                    <LineSettingsModal key={String(lineSettingsModal)} linenum={lineSettingsModal} />
-                </If>
-                <If condition={clientSettingsModal}>
-                    <ClientSettingsModal />
-                </If>
            </div>
        );
    }
@@ -3,3 +3,16 @@ export const CREATE_REMOTE = "createRemote";
 export const VIEW_REMOTE = "viewRemote";
 export const EDIT_REMOTE = "editRemote";
 export const ALERT = "alert";
+export const SCREEN_SETTINGS = "screenSettings";
+export const SESSION_SETTINGS = "sessionSettings";
+export const LINE_SETTINGS = "lineSettings";
+export const CLIENT_SETTINGS = "clientSettings";
+export const TAB_SWITCHER = "tabSwitcher";
+
+export const LineContainer_Main = "main";
+export const LineContainer_History = "history";
+export const LineContainer_Sidebar = "sidebar";
+
+export const ConfirmKey_HideShellPrompt = "hideshellprompt";
+
+export const NoStrPos = -1;
@@ -134,7 +134,7 @@
    position: relative;
    display: inline-block;
    width: 40px;
-    height: 23px;
+    height: 22px;

    input {
        opacity: 0;
@@ -160,8 +160,8 @@
        content: "";
        height: 18px;
        width: 18px;
-        left: 3px;
-        bottom: 3px;
+        left: 2px;
+        bottom: 2px;
        background-color: @term-white;
        transition: 0.5s;
        border-radius: 50%;
@@ -188,14 +188,14 @@
        position: relative;
        display: flex;
        align-items: center;
-        color: #9e9e9e;
+        color: @term-bright-white;
        transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);
    }
    input[type="checkbox"] + label > span {
        display: flex;
        justify-content: center;
        align-items: center;
-        margin-right: 16px;
+        margin-right: 10px;
        width: 20px;
        height: 20px;
        background: transparent;
@@ -205,10 +205,6 @@
        transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);
    }

-    input[type="checkbox"] + label:hover,
-    input[type="checkbox"]:focus + label {
-        color: #fff;
-    }
    input[type="checkbox"] + label:hover > span,
    input[type="checkbox"]:focus + label > span {
        background: rgba(255, 255, 255, 0.1);
@@ -356,7 +352,7 @@
        background-color: @markdown-highlight;
        color: @term-white;
        font-family: @terminal-font;
-        display: inline-block;
+        border-radius: 4px;
    }

    code.inline {
@@ -407,6 +403,13 @@
        background-color: @markdown-highlight;
        margin: 4px 10px 4px 10px;
        padding: 6px 6px 6px 10px;
+        border-radius: 4px;
+    }
+    
+    pre.selected {
+        border-style: solid;
+        outline-width: 2px;
+        border-color: @term-green; 
    }

    .title.is-1 {
@@ -610,7 +613,7 @@
    position: relative;
    background-color: transparent;
    height: 44px;
-    min-width: 412px;
+    min-width: 150px;
    width: 100%;
    border: 1px solid var(--element-separator, rgba(241, 246, 243, 0.15));
    border-radius: 6px;
@@ -618,6 +621,10 @@
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
        0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;

+    &.no-label {
+        height: 34px;
+    }
+
    &-label {
        position: absolute;
        left: 16px;
@@ -833,6 +840,14 @@
            }
        }
    }
+
+    &.no-label {
+        height: 34px;
+
+        input {
+            height: 32px;
+        }
+    }
 }

 .wave-input-decoration {
@@ -841,7 +856,7 @@
    justify-content: center;

    i {
-        font-size: 16px;
+        font-size: 13px;
    }
 }

@@ -865,11 +880,11 @@
    background-color: #444;
    border-radius: 5px;
    overflow: hidden;
-    max-width: 300px;
+    width: 300px;

    i {
        display: inline;
-        font-size: 16px;
+        font-size: 13px;
        fill: @base-color;
        padding-top: 0.2em;
    }
@@ -1114,6 +1129,11 @@
            line-height: 20px;
            border-bottom: 1px solid rgba(250, 250, 250, 0.1);

+            .wave-modal-title {
+                color: #eceeec;
+                font-size: 15px;
+            }
+
            button {
                i {
                    font-size: 18px;
@@ -1132,8 +1152,8 @@
            width: 100%;
            padding: 0 20px 20px;

-            button:first-child {
-                margin-right: 8px;
+            button:last-child {
+                margin-left: 8px;
            }
        }
    }
@@ -11,6 +11,7 @@ import cn from "classnames";
 import { If } from "tsx-control-statements/components";
 import type { RemoteType } from "../../types/types";
 import ReactDOM from "react-dom";
+import { GlobalModel } from "../../model/model";

 import { ReactComponent as CheckIcon } from "../assets/icons/line/check.svg";
 import { ReactComponent as CopyIcon } from "../assets/icons/history/copy.svg";
@@ -99,23 +100,57 @@ class Toggle extends React.Component<{ checked: boolean; onChange: (value: boole
 }

 class Checkbox extends React.Component<
-    { checked: boolean; onChange: (value: boolean) => void; label: React.ReactNode; id: string },
-    {}
+    {
+        checked?: boolean;
+        defaultChecked?: boolean;
+        onChange: (value: boolean) => void;
+        label: React.ReactNode;
+        className?: string;
+        id?: string;
+    },
+    { checkedInternal: boolean }
 > {
+    generatedId;
+    static idCounter = 0;
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            checkedInternal: this.props.checked !== undefined ? this.props.checked : Boolean(this.props.defaultChecked),
+        };
+        this.generatedId = `checkbox-${Checkbox.idCounter++}`;
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.props.checked !== undefined && this.props.checked !== prevProps.checked) {
+            this.setState({ checkedInternal: this.props.checked });
+        }
+    }
+
+    handleChange = (e) => {
+        const newChecked = e.target.checked;
+        if (this.props.checked === undefined) {
+            this.setState({ checkedInternal: newChecked });
+        }
+        this.props.onChange(newChecked);
+    };
+
    render() {
-        const { checked, onChange, label, id } = this.props;
+        const { label, className, id } = this.props;
+        const { checkedInternal } = this.state;
+        const checkboxId = id || this.generatedId;

        return (
-            <div className="checkbox">
+            <div className={cn("checkbox", className)}>
                <input
                    type="checkbox"
-                    id={id}
-                    checked={checked}
-                    onChange={(e) => onChange(e.target.checked)}
-                    aria-checked={checked}
+                    id={checkboxId}
+                    checked={checkedInternal}
+                    onChange={this.handleChange}
+                    aria-checked={checkedInternal}
                    role="checkbox"
                />
-                <label htmlFor={id}>
+                <label htmlFor={checkboxId}>
                    <span></span>
                    {label}
                </label>
@@ -150,6 +185,7 @@ interface TooltipProps {
    message: React.ReactNode;
    icon?: React.ReactNode; // Optional icon property
    children: React.ReactNode;
+    className?: string;
 }

 interface TooltipState {
@@ -185,8 +221,8 @@ class Tooltip extends React.Component<TooltipProps, TooltipState> {
        if (iconElement) {
            const rect = iconElement.getBoundingClientRect();
            return {
-                top: `${rect.bottom + window.scrollY - 29.5}px`,
-                left: `${rect.left + window.scrollX + rect.width / 2 - 19}px`,
+                top: `${rect.bottom + window.scrollY - 29}px`,
+                left: `${rect.left + window.scrollX + rect.width / 2 - 17.5}px`,
            };
        }
        return {};
@@ -199,7 +235,7 @@ class Tooltip extends React.Component<TooltipProps, TooltipState> {
        const style = this.calculatePosition();

        return ReactDOM.createPortal(
-            <div className="wave-tooltip" style={style}>
+            <div className={cn("wave-tooltip", this.props.className)} style={style}>
                {this.props.icon && <div className="wave-tooltip-icon">{this.props.icon}</div>}
                <div className="wave-tooltip-message">{this.props.message}</div>
            </div>,
@@ -230,6 +266,8 @@ interface ButtonProps {
    rightIcon?: React.ReactNode;
    color?: string;
    style?: React.CSSProperties;
+    autoFocus?: boolean;
+    className?: string;
 }

 class Button extends React.Component<ButtonProps> {
@@ -256,6 +294,7 @@ class Button extends React.Component<ButtonProps> {
                onClick={this.handleClick}
                disabled={disabled}
                style={style}
+                autoFocus={this.props.autoFocus}
            >
                {leftIcon && <span className="icon-left">{leftIcon}</span>}
                {children}
@@ -282,25 +321,24 @@ export default IconButton;

 interface LinkButtonProps extends ButtonProps {
    href: string;
+    rel?: string;
    target?: string;
 }

-class LinkButton extends IconButton {
+class LinkButton extends React.Component<LinkButtonProps> {
    render() {
-        // @ts-ignore
-        const { href, target, leftIcon, rightIcon, children, theme, variant }: LinkButtonProps = this.props;
+        const { leftIcon, rightIcon, children, className, ...rest } = this.props;

        return (
-            <a href={href} target={target} className={`wave-button link-button`}>
-                <button {...this.props} className={`icon-button ${theme} ${variant}`}>
-                    {leftIcon && <span className="icon-left">{leftIcon}</span>}
-                    {children}
-                    {rightIcon && <span className="icon-right">{rightIcon}</span>}
-                </button>
+            <a {...rest} className={cn(`wave-button link-button`, className)}>
+                {leftIcon && <span className="icon-left">{leftIcon}</span>}
+                {children}
+                {rightIcon && <span className="icon-right">{rightIcon}</span>}
            </a>
        );
    }
 }
+
 interface StatusProps {
    status: "green" | "red" | "gray" | "yellow";
    text: string;
@@ -331,7 +369,7 @@ interface TextFieldDecorationProps {
    endDecoration?: React.ReactNode;
 }
 interface TextFieldProps {
-    label: string;
+    label?: string;
    value?: string;
    className?: string;
    onChange?: (value: string) => void;
@@ -387,7 +425,7 @@ class TextField extends React.Component<TextFieldProps, TextFieldState> {
    // Method to handle blur at the component level
    @boundMethod
    handleComponentBlur() {
-        if (this.inputRef.current && this.inputRef.current.contains(document.activeElement)) {
+        if (this.inputRef.current?.contains(document.activeElement)) {
            this.inputRef.current.blur();
        }
    }
@@ -440,14 +478,15 @@ class TextField extends React.Component<TextFieldProps, TextFieldState> {
        const { focused, internalValue, error } = this.state;

        // Decide if the input should behave as controlled or uncontrolled
-        const inputValue = value !== undefined ? value : internalValue;
+        const inputValue = value ?? internalValue;

        return (
            <div
-                className={cn(`wave-textfield ${className || ""}`, {
+                className={cn("wave-textfield", className, {
                    focused: focused,
                    error: error,
                    disabled: disabled,
+                    "no-label": !label,
                })}
                onFocus={this.handleComponentFocus}
                onBlur={this.handleComponentBlur}
@@ -455,15 +494,17 @@ class TextField extends React.Component<TextFieldProps, TextFieldState> {
            >
                {decoration?.startDecoration && <>{decoration.startDecoration}</>}
                <div className="wave-textfield-inner">
-                    <label
-                        className={cn("wave-textfield-inner-label", {
-                            float: this.state.hasContent || this.state.focused || placeholder,
-                            "offset-left": decoration?.startDecoration,
-                        })}
-                        htmlFor={label}
-                    >
-                        {label}
-                    </label>
+                    <If condition={label}>
+                        <label
+                            className={cn("wave-textfield-inner-label", {
+                                float: this.state.hasContent || this.state.focused || placeholder,
+                                "offset-left": decoration?.startDecoration,
+                            })}
+                            htmlFor={label}
+                        >
+                            {label}
+                        </label>
+                    </If>
                    <input
                        className={cn("wave-textfield-inner-input", { "offset-left": decoration?.startDecoration })}
                        ref={this.inputRef}
@@ -507,34 +548,10 @@ class NumberField extends TextField {
        }
    }

-    @boundMethod
-    handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
-        // Allow backspace, delete, tab, escape, and enter
-        if (
-            [46, 8, 9, 27, 13].includes(event.keyCode) ||
-            // Allow: Ctrl+A, Ctrl+C, Ctrl+X
-            ((event.keyCode === 65 || event.keyCode === 67 || event.keyCode === 88) && event.ctrlKey === true) ||
-            // Allow: home, end, left, right
-            (event.keyCode >= 35 && event.keyCode <= 39)
-        ) {
-            return; // let it happen, don't do anything
-        }
-        // Ensure that it is a number and stop the keypress
-        if (
-            (event.shiftKey || event.keyCode < 48 || event.keyCode > 57) &&
-            (event.keyCode < 96 || event.keyCode > 105)
-        ) {
-            event.preventDefault();
-        }
-    }
-
    render() {
        // Use the render method from TextField but add the onKeyDown handler
        const renderedTextField = super.render();
-
-        return React.cloneElement(renderedTextField, {
-            onKeyDown: this.handleKeyDown,
-        });
+        return React.cloneElement(renderedTextField);
    }
 }

@@ -572,7 +589,7 @@ class PasswordField extends TextField {
    render() {
        const { decoration, className, placeholder, maxLength, label } = this.props;
        const { focused, internalValue, error, passwordVisible } = this.state;
-        const inputValue = this.props.value !== undefined ? this.props.value : internalValue;
+        const inputValue = this.props.value ?? internalValue;

        // The input should always receive the real value
        const inputProps = {
@@ -797,7 +814,7 @@ class InfoMessage extends React.Component<{ width: number; children: React.React
 function LinkRenderer(props: any): any {
    let newUrl = "https://extern?" + encodeURIComponent(props.href);
    return (
-        <a href={newUrl} target="_blank">
+        <a href={newUrl} target="_blank" rel={"noopener"}>
            {props.children}
        </a>
    );
@@ -812,9 +829,67 @@ function CodeRenderer(props: any): any {
 }

@mobxReact.observer
-class Markdown extends React.Component<{ text: string; style?: any; extraClassName?: string }, {}> {
+class CodeBlockMarkdown extends React.Component<
+    { children: React.ReactNode; blockText: string; codeSelectSelectedIndex?: number },
+    {}
+> {
+    blockIndex: number;
+    blockRef: React.RefObject<HTMLPreElement>;
+
+    constructor(props) {
+        super(props);
+        this.blockRef = React.createRef();
+        this.blockIndex = GlobalModel.inputModel.addCodeBlockToCodeSelect(this.blockRef);
+    }
+
+    render() {
+        let codeText = this.props.blockText;
+        let clickHandler: (e: React.MouseEvent<HTMLElement>, blockIndex: number) => void;
+        let inputModel = GlobalModel.inputModel;
+        clickHandler = (e: React.MouseEvent<HTMLElement>, blockIndex: number) => {
+            inputModel.setCodeSelectSelectedCodeBlock(blockIndex);
+        };
+        let selected = this.blockIndex == this.props.codeSelectSelectedIndex;
+        return (
+            <pre
+                ref={this.blockRef}
+                className={cn({ selected: selected })}
+                onClick={(event) => clickHandler(event, this.blockIndex)}
+            >
+                {this.props.children}
+            </pre>
+        );
+    }
+}
+
+@mobxReact.observer
+class Markdown extends React.Component<
+    { text: string; style?: any; extraClassName?: string; codeSelect?: boolean },
+    {}
+> {
+    CodeBlockRenderer(props: any, codeSelect: boolean, codeSelectIndex: number): any {
+        let codeText = codeSelect ? props.node.children[0].children[0].value : props.children;
+        if (codeText) {
+            codeText = codeText.replace(/\n$/, ""); // remove trailing newline
+        }
+        if (codeSelect) {
+            return (
+                <CodeBlockMarkdown blockText={codeText} codeSelectSelectedIndex={codeSelectIndex}>
+                    {props.children}
+                </CodeBlockMarkdown>
+            );
+        } else {
+            let clickHandler = (e: React.MouseEvent<HTMLElement>) => {
+                navigator.clipboard.writeText(codeText);
+            };
+            return <pre onClick={(event) => clickHandler(event)}>{props.children}</pre>;
+        }
+    }
+
    render() {
        let text = this.props.text;
+        let codeSelect = this.props.codeSelect;
+        let curCodeSelectIndex = GlobalModel.inputModel.getCodeSelectSelectedIndex();
        let markdownComponents = {
            a: LinkRenderer,
            h1: (props) => HeaderRenderer(props, 1),
@@ -823,7 +898,8 @@ class Markdown extends React.Component<{ text: string; style?: any; extraClassNa
            h4: (props) => HeaderRenderer(props, 4),
            h5: (props) => HeaderRenderer(props, 5),
            h6: (props) => HeaderRenderer(props, 6),
-            code: CodeRenderer,
+            code: (props) => CodeRenderer(props),
+            pre: (props) => this.CodeBlockRenderer(props, codeSelect, curCodeSelectIndex),
        };
        return (
            <div className={cn("markdown content", this.props.extraClassName)} style={this.props.style}>
@@ -864,7 +940,7 @@ interface DropdownDecorationProps {
 }

 interface DropdownProps {
-    label: string;
+    label?: string;
    options: { value: string; label: string }[];
    value?: string;
    className?: string;
@@ -1031,7 +1107,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
        const { label, options, value, placeholder, decoration, className, required } = this.props;
        const { isOpen, internalValue, highlightedIndex, isTouched } = this.state;

-        const currentValue = value !== undefined ? value : internalValue;
+        const currentValue = value ?? internalValue;
        const selectedOptionLabel =
            options.find((option) => option.value === currentValue)?.label || placeholder || internalValue;

@@ -1051,7 +1127,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
                      {options.map((option, index) => (
                          <div
                              key={option.value}
-                              className={cn("wave-dropdown-item", {
+                              className={cn("wave-dropdown-item unselectable", {
                                  "wave-dropdown-item-highlighted": index === highlightedIndex,
                              })}
                              onClick={(e) => this.handleSelect(option.value, e)}
@@ -1068,8 +1144,9 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {

        return (
            <div
-                className={cn(`wave-dropdown ${className || ""}`, {
+                className={cn("wave-dropdown", className, {
                    "wave-dropdown-error": isError,
+                    "no-label": !label,
                })}
                ref={this.wrapperRef}
                tabIndex={0}
@@ -1078,15 +1155,19 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
                onFocus={this.handleFocus}
            >
                {decoration?.startDecoration && <>{decoration.startDecoration}</>}
+                <If condition={label}>
+                    <div
+                        className={cn("wave-dropdown-label unselectable", {
+                            float: shouldLabelFloat,
+                            "offset-left": decoration?.startDecoration,
+                        })}
+                    >
+                        {label}
+                    </div>
+                </If>
                <div
-                    className={cn("wave-dropdown-label", {
-                        float: shouldLabelFloat,
-                        "offset-left": decoration?.startDecoration,
-                    })}
+                    className={cn("wave-dropdown-display unselectable", { "offset-left": decoration?.startDecoration })}
                >
-                    {label}
-                </div>
-                <div className={cn("wave-dropdown-display", { "offset-left": decoration?.startDecoration })}>
                    {selectedOptionLabel}
                </div>
                <div className={cn("wave-dropdown-arrow", { "wave-dropdown-arrow-rotate": isOpen })}>
@@ -1100,16 +1181,18 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
 }

 interface ModalHeaderProps {
-    onClose: () => void;
+    onClose?: () => void;
    title: string;
 }

 const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, title }) => (
    <div className="wave-modal-header">
-        {<div>{title}</div>}
-        <IconButton theme="secondary" variant="ghost" onClick={onClose}>
-            <i className="fa-sharp fa-solid fa-xmark"></i>
-        </IconButton>
+        {<div className="wave-modal-title">{title}</div>}
+        <If condition={onClose}>
+            <IconButton theme="secondary" variant="ghost" onClick={onClose}>
+                <i className="fa-sharp fa-solid fa-xmark"></i>
+            </IconButton>
+        </If>
    </div>
 );

@@ -1159,7 +1242,7 @@ class Modal extends React.Component<ModalProps> {
    }

    render() {
-        return ReactDOM.createPortal(this.renderModal(), document.getElementById("app") as HTMLElement);
+        return ReactDOM.createPortal(this.renderModal(), document.getElementById("app"));
    }
 }

@@ -0,0 +1,114 @@
+@import "../../../app/common/themes/themes.less";
+
+.about-modal {
+    .wave-modal-content {
+        gap: 24px;
+
+        .wave-modal-body {
+            margin-bottom: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 24px;
+
+            .about-section {
+                display: flex;
+                align-items: center;
+                gap: 16px;
+                align-self: stretch;
+                width: 100%;
+
+                .logo-wrapper {
+                    width: 72px;
+                    height: 72px;
+                    flex-shrink: 0;
+
+                    img {
+                        border-radius: 10px;
+                    }
+                }
+
+                .text-wrapper {
+                    display: flex;
+                    align-items: flex-start;
+                    flex-direction: column;
+                    gap: 4px;
+                    align-self: stretch;
+                    font-style: normal;
+                    line-height: 20px;
+
+                    div:first-child {
+                        color: @term-bright-white;
+                        font-size: 14.5px;
+                    }
+
+                    div:last-child {
+                        color: @term-white;
+                        text-align: left;
+                    }
+                }
+
+                .status {
+                    div {
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 5px;
+
+                        i {
+                            font-size: 16px;
+                            margin-right: 10px;
+                        }
+                    }
+
+                    div:first-child + div {
+                        color: @term-white;
+                    }
+                }
+
+                .status.updated {
+                    div {
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 5px;
+
+                        i {
+                            color: @term-green;
+                        }
+                    }
+                }
+
+                .status.outdated {
+                    div {
+                        i {
+                            color: @term-yellow;
+                        }
+                    }
+
+                    button {
+                        margin-top: 5px;
+                    }
+                }
+            }
+
+            .about-section:nth-child(3) {
+                display: flex;
+                align-items: flex-start;
+                gap: 10px;
+
+                .wave-button-link {
+                    display: flex;
+                    align-items: center;
+
+                    i {
+                        font-size: 16px;
+                    }
+                }
+            }
+
+            .about-section:last-child {
+                margin-bottom: 24px;
+                color: @term-white;
+            }
+        }
+    }
+}
@@ -0,0 +1,136 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import * as mobxReact from "mobx-react";
+import * as mobx from "mobx";
+import { boundMethod } from "autobind-decorator";
+import { GlobalModel } from "../../../model/model";
+import { Modal, LinkButton } from "../common";
+import * as util from "../../../util/util";
+
+import logo from "../../assets/waveterm-logo-with-bg.svg";
+import "./about.less";
+
+// @ts-ignore
+const VERSION = __WAVETERM_VERSION__;
+// @ts-ignore
+let BUILD = __WAVETERM_BUILD__;
+
+@mobxReact.observer
+class AboutModal extends React.Component<{}, {}> {
+    @boundMethod
+    closeModal(): void {
+        mobx.action(() => {
+            GlobalModel.modalsModel.popModal();
+        })();
+    }
+
+    @boundMethod
+    isUpToDate(): boolean {
+        return true;
+    }
+
+    @boundMethod
+    updateApp(): void {
+        // GlobalCommandRunner.updateApp();
+    }
+
+    @boundMethod
+    getStatus(isUpToDate: boolean): JSX.Element {
+        // TODO no up-to-date status reporting
+        return (
+            <div className="status updated">
+                <div className="text-selectable">
+                    Client Version {VERSION} ({BUILD})
+                </div>
+            </div>
+        );
+
+        if (isUpToDate) {
+            return (
+                <div className="status updated">
+                    <div>
+                        <i className="fa-sharp fa-solid fa-circle-check" />
+                        <span>Up to Date</span>
+                    </div>
+                    <div className="selectable">
+                        Client Version {VERSION} ({BUILD})
+                    </div>
+                </div>
+            );
+        }
+        return (
+            <div className="status outdated">
+                <div>
+                    <i className="fa-sharp fa-solid fa-triangle-exclamation" />
+                    <span>Outdated Version</span>
+                </div>
+                <div className="selectable">
+                    Client Version {VERSION} ({BUILD})
+                </div>
+                <div>
+                    <button onClick={this.updateApp} className="button color-green text-secondary">
+                        Update
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <Modal className="about-modal">
+                <Modal.Header onClose={this.closeModal} title="About" />
+                <div className="wave-modal-body">
+                    <div className="about-section">
+                        <div className="logo-wrapper">
+                            <img src={logo} alt="logo" />
+                        </div>
+                        <div className="text-wrapper">
+                            <div>Wave Terminal</div>
+                            <div className="text-standard">
+                                Modern Terminal for
+                                <br />
+                                Seamless Workflow
+                            </div>
+                        </div>
+                    </div>
+                    <div className="about-section text-standard">{this.getStatus(this.isUpToDate())}</div>
+                    <div className="about-section">
+                        <LinkButton
+                            className="secondary solid"
+                            href={util.makeExternLink("https://github.com/wavetermdev/waveterm")}
+                            target="_blank"
+                            leftIcon={<i className="fa-brands fa-github"></i>}
+                        >
+                            Github
+                        </LinkButton>
+                        <LinkButton
+                            className="secondary solid"
+                            href={util.makeExternLink("https://www.waveterm.dev/")}
+                            target="_blank"
+                            leftIcon={<i className="fa-sharp fa-light fa-globe"></i>}
+                        >
+                            Website
+                        </LinkButton>
+                        <LinkButton
+                            className="secondary solid"
+                            href={util.makeExternLink(
+                                "https://github.com/wavetermdev/waveterm/blob/main/acknowledgements/README.md"
+                            )}
+                            target="_blank"
+                            rel={"noopener"}
+                            leftIcon={<i className="fa-sharp fa-light fa-heart"></i>}
+                        >
+                            Acknowledgements
+                        </LinkButton>
+                    </div>
+                    <div className="about-section text-standard">&copy; 2023 Command Line Inc.</div>
+                </div>
+            </Modal>
+        );
+    }
+}
+
+export { AboutModal };
@@ -0,0 +1,11 @@
+@import "../../../app/common/themes/themes.less";
+
+.alert-modal {
+    width: 500px;
+
+    .wave-modal-content {
+        .wave-modal-body {
+            padding: 40px 20px;
+        }
+    }
+}
--- a/Show More
+++ b/Show More