Simplify logic for startResizing width calculation (#269)

* Apply Red's suggestion and move width logic to getWidth

* remove unnecessary

* a little more

* remove comment

.github/workflows/build-helper.yml

@@ -0,0 +1,100 @@
+name: "Build Helper"
+on: workflow_dispatch
+env:
+    WAVETERM_VERSION: 0.6.1
+    GO_VERSION: "1.21.5"
+    NODE_VERSION: "21.5.0"
+jobs:
+    runbuild-darwin-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@v4
+              with:
+                  name: waveterm-build-darwin-x64
+                  path: out/make/zip/darwin/x64/*.zip
+                  retention-days: 2
+    runbuild-darwin-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@v4
+              with:
+                  name: waveterm-build-darwin-arm64
+                  path: out/make/zip/darwin/arm64/*.zip
+                  retention-days: 2
+    runbuild-linux:
+        name: "Build Linux x64"
+        runs-on: ubuntu-latest
+        needs: [runbuild-darwin-x64, runbuild-darwin-arm64]
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/checkout@v4
+              with:
+                  repository: scripthaus-dev/scripthaus
+                  path: scripthaus
+            - uses: actions/setup-go@v4
+              with:
+                  go-version: ${{env.GO_VERSION}}
+                  cache-dependency-path: |
+                      wavesrv/go.sum
+                      waveshell/go.sum
+                      scripthaus/go.sum
+            - run: |
+                  go work use ./scripthaus;
+                  cd scripthaus;
+                  go get ./...;
+                  CGO_ENABLED=1 go build -o scripthaus cmd/main.go
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: ${{env.NODE_VERSION}}
+                  cache: "yarn"
+            - run: yarn --frozen-lockfile
+            - run: ./scripthaus/scripthaus run build-package-linux
+            - uses: actions/download-artifact@v4
+              with:
+                  merge-multiple: true
+                  path: buildtemp
+            - run: |
+                  mv out/make/zip/linux/x64/Wave-linux-x64-$WAVETERM_VERSION.zip buildtemp/waveterm-linux-x64-v$WAVETERM_VERSION.zip
+            - run: (cd buildtemp; zip ../waveterm-builds.zip *)
+            - run: aws s3 cp waveterm-builds.zip s3://waveterm-github-artifacts/
+              env:
+                  AWS_ACCESS_KEY_ID: "${{ secrets.S3_USERID }}"
+                  AWS_SECRET_ACCESS_KEY: "${{ secrets.S3_SECRETKEY }}"
+                  AWS_DEFAULT_REGION: us-west-2
+            - uses: actions/upload-artifact@v4
+              with:
+                  name: waveterm-builds
+                  path: buildtemp
+                  retention-days: 2

.github/workflows/build-macos-x64.yml

@@ -1,57 +0,0 @@
-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
-
-

.github/workflows/codeql.yml

@@ -49,7 +49,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -63,7 +63,7 @@ jobs:
     # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ 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
@@ -76,6 +76,6 @@ jobs:
     #     ./location_of_script_within_repo/buildscript.sh
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v3
       with:
         category: "/language:${{matrix.language}}"

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["esbenp.prettier-vscode", "golang.go", "dbaeumer.vscode-eslint"]
+}

.vscode/settings.json

@@ -0,0 +1,21 @@
+{
+    "editor.formatOnSave": true,
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[javascriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[less]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[css]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+}

acknowledgements/disclaimers/backend.md

@@ -1131,6 +1131,67 @@ Exhibit B - “Incompatible With Secondary Licenses” Notice
  OTHER DEALINGS IN THE SOFTWARE.
 
 
+```
+
+-----
+
+## github.com/kevinburke/ssh_config
+
+* Name: github.com/kevinburke/ssh_config
+* Version: v0.0.0-20240109090616-36c8da3d7376
+* License: [MIT](https://github.com/wavetermdev/ssh_config/blob/36c8da3d7376/LICENSE)
+
+```txt
+Copyright (c) 2017 Kevin Burke.
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+===================
+
+The lexer and parser borrow heavily from github.com/pelletier/go-toml. The
+license for that project is copied below.
+
+The MIT License (MIT)
+
+Copyright (c) 2013 - 2017 Thomas Pelletier, Eric Anderton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
 ```
 
 -----

buildres/build-universal.sh

@@ -1,12 +1,21 @@
 #!/bin/bash
 
 # assumes we have Wave-darwin-x64-[version].zip and Wave-darwin-arm64-[version].zip in current directory
-VERSION=0.5.3
+VERSION=0.6.1
 rm -rf temp
+rm -rf builds
 mkdir temp
 mkdir temp/x64
-X64_ZIP="Wave-darwin-x64-$VERSION.zip"
-ARM64_ZIP="Wave-darwin-arm64-$VERSION.zip"
+aws s3 cp s3://waveterm-github-artifacts/waveterm-builds.zip .
+BUILDS_ZIP=waveterm-builds.zip
+if ! [ -f $BUILDS_ZIP ]; then
+    echo "no $BUILDS_ZIP found";
+    exit 1;
+fi
+echo "unzipping $BUILDS_ZIP"
+unzip -q $BUILDS_ZIP -d builds
+X64_ZIP="builds/Wave-darwin-x64-$VERSION.zip"
+ARM64_ZIP="builds/Wave-darwin-arm64-$VERSION.zip"
 if ! [ -f $X64_ZIP ]; then
     echo "no $X64_ZIP found";
     exit 1;
@@ -48,4 +57,6 @@ DMG_NAME="waveterm-macos-universal-${DMG_VERSION}.dmg"
   $DMG_NAME \
   "temp/Wave.app"
 echo "success, created $DMG_NAME"
+mv $DMG_NAME builds/
+rm builds/Wave-darwin-*.zip
 spctl -a -vvv -t install temp/Wave.app/

buildres/osx-sign.js

@@ -7,10 +7,10 @@ signAsync({
     app: "temp/Wave.app",
     binaries: [
         waveAppPath + "/Contents/Resources/app/bin/wavesrv",
-        waveAppPath + "/Contents/Resources/app/bin/mshell/mshell-v0.3-linux.amd64",
-        waveAppPath + "/Contents/Resources/app/bin/mshell/mshell-v0.3-linux.arm64",
-        waveAppPath + "/Contents/Resources/app/bin/mshell/mshell-v0.3-darwin.amd64",
-        waveAppPath + "/Contents/Resources/app/bin/mshell/mshell-v0.3-darwin.arm64",
+        waveAppPath + "/Contents/Resources/app/bin/mshell/mshell-v0.4-linux.amd64",
+        waveAppPath + "/Contents/Resources/app/bin/mshell/mshell-v0.4-linux.arm64",
+        waveAppPath + "/Contents/Resources/app/bin/mshell/mshell-v0.4-darwin.amd64",
+        waveAppPath + "/Contents/Resources/app/bin/mshell/mshell-v0.4-darwin.arm64",
     ],
 }).then(() => {
     console.log("signing success");

go.work

@@ -1,7 +1,4 @@
-go 1.21
-
-toolchain go1.21.5
+go 1.18
 
 use ./wavesrv
-
-use ./waveshell
+use ./waveshell

go.work.sum

@@ -1,25 +1,11 @@
-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=

package.json

@@ -2,7 +2,7 @@
     "name": "waveterm",
     "author": "Command Line Inc",
     "productName": "Wave",
-    "version": "0.5.3",
+    "version": "0.6.1",
     "main": "dist/emain.js",
     "license": "Apache-2.0",
     "dependencies": {

scripthaus.md

@@ -44,10 +44,10 @@ rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
-(cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.amd64 main-waveshell.go)
-(cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.arm64 main-waveshell.go)
-(cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.amd64 main-waveshell.go)
-(cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.arm64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.amd64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.arm64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.amd64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.arm64 main-waveshell.go)
 (cd wavesrv; CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-X main.BuildTime=$(date +'%Y%m%d%H%M')" -o ../bin/wavesrv ./cmd)
 node_modules/.bin/electron-forge make
 ```
@@ -60,10 +60,10 @@ rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
-(cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.amd64 main-waveshell.go)
-(cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.arm64 main-waveshell.go)
-(cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.amd64 main-waveshell.go)
-(cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.arm64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.amd64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.arm64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.amd64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.arm64 main-waveshell.go)
 # adds -extldflags=-static, *only* on linux (macos does not support fully static binaries) to avoid a glibc dependency
 (cd wavesrv; CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-linkmode 'external' -extldflags=-static $GO_LDFLAGS" -o ../bin/wavesrv ./cmd)
 node_modules/.bin/electron-forge make
@@ -86,10 +86,10 @@ CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflag
 set -e
 cd waveshell
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
-CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.amd64 main-waveshell.go
-CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.arm64 main-waveshell.go
-CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.amd64 main-waveshell.go
-CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.arm64 main-waveshell.go
+CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.amd64 main-waveshell.go
+CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.arm64 main-waveshell.go
+CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.amd64 main-waveshell.go
+CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.arm64 main-waveshell.go
 ```
 
 ```bash

src/app/app.less

@@ -99,9 +99,6 @@ body a {
 
 body code {
     font-family: @terminal-font;
-}
-
-body code {
     background-color: transparent;
 }
 
@@ -123,11 +120,19 @@ svg.icon {
 }
 
 .hideScrollbarUntillHover {
-    overflow: hidden;
-    &:hover,
-    &:focus,
-    &:focus-within {
-        overflow: auto;
+    overflow: scroll;
+
+    &::-webkit-scrollbar-thumb,
+    &::-webkit-scrollbar-track {
+        display: none;
+    }
+
+    &::-webkit-scrollbar-corner {
+        display: none;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+        display: block;
     }
 }
 
@@ -622,3 +627,40 @@ a.a-block {
 .text-selectable {
     user-select: text;
 }
+
+.spin {
+    animation: infiniteRotate 2s linear infinite;
+
+    @keyframes infiniteRotate {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+}
+
+.view {
+    background-color: @background-session;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: auto;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    border-radius: 8px;
+    border: 1px solid rgba(241, 246, 243, 0.08);
+
+    .header {
+        margin: 24px 18px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .close-div {
+            font-size: 1.5em;
+        }
+    }
+}

src/app/app.tsx

@@ -16,6 +16,7 @@ import { PluginsView } from "./pluginsview/pluginsview";
 import { BookmarksView } from "./bookmarks/bookmarks";
 import { HistoryView } from "./history/history";
 import { ConnectionsView } from "./connections/connections";
+import { ClientSettingsView } from "./clientsettings/clientsettings";
 import { MainSideBar } from "./sidebar/sidebar";
 import { DisconnectedModal, ClientStopModal } from "./common/modals";
 import { ModalsProvider } from "./common/modals/provider";
@@ -29,6 +30,7 @@ type OV<V> = mobx.IObservableValue<V>;
 @mobxReact.observer
 class App extends React.Component<{}, {}> {
     dcWait: OV<boolean> = mobx.observable.box(false, { name: "dcWait" });
+    mainContentRef: React.RefObject<HTMLDivElement> = React.createRef();
 
     constructor(props: any) {
         super(props);
@@ -74,6 +76,13 @@ class App extends React.Component<{}, {}> {
         let hasClientStop = GlobalModel.getHasClientStop();
         let dcWait = this.dcWait.get();
         let platform = GlobalModel.getPlatform();
+        let clientData = GlobalModel.clientData.get();
+
+        // Previously, this is done in sidebar.tsx but it causes flicker when clientData is null cos screen-view shifts around.
+        // Doing it here fixes the flicker cos app is not rendered until clientData is populated.
+        if (clientData == null) {
+            return null;
+        }
 
         if (disconnected || hasClientStop) {
             if (!dcWait) {
@@ -81,8 +90,8 @@ class App extends React.Component<{}, {}> {
             }
             return (
                 <div id="main" className={"platform-" + platform} onContextMenu={this.handleContextMenu}>
-                    <div className="main-content">
-                        <MainSideBar />
+                    <div ref={this.mainContentRef} className="main-content">
+                        <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
                         <div className="session-view" />
                     </div>
                     <If condition={dcWait}>
@@ -101,14 +110,15 @@ class App extends React.Component<{}, {}> {
         }
         return (
             <div id="main" className={"platform-" + platform} onContextMenu={this.handleContextMenu}>
-                <div className="main-content">
-                    <MainSideBar />
+                <div ref={this.mainContentRef} className="main-content">
+                    <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
                     <ErrorBoundary>
                         <PluginsView />
                         <WorkspaceView />
                         <HistoryView />
                         <BookmarksView />
                         <ConnectionsView model={remotesModel} />
+                        <ClientSettingsView model={remotesModel} />
                     </ErrorBoundary>
                 </div>
                 <ModalsProvider />

src/app/assets/icons/spinner-indicator.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="440" height="440" version="1.1" viewBox="0 0 116.42 116.42" xmlns="http://www.w3.org/2000/svg">
+ <circle id="indicator" cx="58.266" cy="58.266" r="28.311" stroke-width=".19016"/>
+ <path id="spinner" d="m107.2 58.21a48.988 48.988 0 0 1-48.988 48.988" fill="none" stroke="#000" stroke-width="16.856" style="paint-order:normal"/>
+</svg>

src/app/clientsettings/clientsettings.less

@@ -0,0 +1,200 @@
+@import "../../app/common/themes/themes.less";
+
+.clientsettings-view {
+    background-color: @background-session;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: auto;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    border-radius: 8px;
+    border: 1px solid rgba(241, 246, 243, 0.08);
+    background: rgba(13, 13, 13, 0.85);
+
+    .header {
+        margin: 24px 18px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: 20px;
+        border-bottom: 1px solid white;
+    }
+
+    .content {
+        padding: 0 18px 0 30px;
+    }
+
+    // just marked these as important since we're keeping the
+    // settings-field styles below this intact until we figure out what do with them
+    .settings-field {
+        &:not(:first-child) {
+            margin-top: 15px !important;
+        }
+
+        .settings-label {
+            width: 250px !important;
+        }
+    }
+
+    // @TODO: These styles are duplicated in the settings modals
+    .settings-field {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        &.settings-field.sub-field {
+            .settings-label {
+                font-weight: normal;
+
+                text-align: right;
+                padding-right: 20px;
+            }
+        }
+
+        &.settings-error {
+            color: @term-red;
+            margin-top: 20px;
+            padding: 10px;
+            border-radius: 5px;
+            background-color: #200707;
+            border: 1px solid @term-red;
+            font-weight: bold;
+
+            .error-dismiss {
+                padding: 2px;
+                cursor: pointer;
+            }
+        }
+
+        .settings-label {
+            font-weight: bold;
+            width: 12em;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            margin-right: 10px;
+
+            .info-message {
+                margin-left: 5px;
+            }
+        }
+
+        .settings-input {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            &.settings-clickable {
+                cursor: pointer;
+            }
+
+            &.inline-edit.edit-active {
+                input.input {
+                    padding: 0;
+                    height: 20px;
+                }
+
+                .button {
+                    height: 20px;
+                }
+            }
+
+            input {
+                padding: 4px;
+                border-radius: 3px;
+            }
+
+            .control {
+                .icon {
+                    width: 1.5em;
+                    height: 1.5em;
+                    margin: 0;
+                }
+            }
+
+            .tab-color-icon.color-default path {
+                fill: @tab-green;
+            }
+            .tab-color-icon.color-green path {
+                fill: @tab-green;
+            }
+            .tab-color-icon.color-orange path {
+                fill: @tab-orange;
+            }
+            .tab-color-icon.color-red path {
+                fill: @tab-red;
+            }
+            .tab-color-icon.color-yellow path {
+                fill: @tab-yellow;
+            }
+            .tab-color-icon.color-blue path {
+                fill: @tab-blue;
+            }
+            .tab-color-icon.color-mint path {
+                fill: @tab-mint;
+            }
+            .tab-color-icon.color-cyan path {
+                fill: @tab-cyan;
+            }
+            .tab-color-icon.color-white path {
+                fill: @tab-white;
+            }
+            .tab-color-icon.color-violet path {
+                fill: @tab-violet;
+            }
+            .tab-color-icon.color-pink path {
+                fill: @tab-pink;
+            }
+
+            .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 {
+                    margin-left: 1em;
+                }
+
+                .tab-color-select,
+                .tab-icon-select {
+                    cursor: pointer;
+                    margin: 5px;
+                    &:hover {
+                        outline: 2px solid white;
+                    }
+                }
+            }
+
+            .action-text {
+                margin-left: 20px;
+
+                color: @term-red;
+            }
+
+            .settings-share-link {
+                width: 160px;
+            }
+        }
+
+        &:not(:first-child) {
+            margin-top: 10px;
+        }
+    }
+}

src/app/clientsettings/clientsettings.tsx

@@ -0,0 +1,222 @@
+// 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 cn from "classnames";
+import { GlobalModel, GlobalCommandRunner, MinFontSize, MaxFontSize, RemotesModel } from "../../model/model";
+import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "../common/common";
+import { CommandRtnType, ClientDataType } from "../../types/types";
+import { commandRtnHandler, isBlank } from "../../util/util";
+
+import "./clientsettings.less";
+
+type OV<V> = mobx.IObservableValue<V>;
+
+// @ts-ignore
+const VERSION = __WAVETERM_VERSION__;
+// @ts-ignore
+const BUILD = __WAVETERM_BUILD__;
+
+@mobxReact.observer
+class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
+    fontSizeDropdownActive: OV<boolean> = mobx.observable.box(false, { name: "clientSettings-fontSizeDropdownActive" });
+    errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
+
+    @boundMethod
+    dismissError(): void {
+        mobx.action(() => {
+            this.errorMessage.set(null);
+        })();
+    }
+
+    @boundMethod
+    handleChangeFontSize(fontSize: string): void {
+        let newFontSize = Number(fontSize);
+        this.fontSizeDropdownActive.set(false);
+        if (GlobalModel.termFontSize.get() == newFontSize) {
+            return;
+        }
+        let prtn = GlobalCommandRunner.setTermFontSize(newFontSize, false);
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
+    @boundMethod
+    togglefontSizeDropdown(): void {
+        mobx.action(() => {
+            this.fontSizeDropdownActive.set(!this.fontSizeDropdownActive.get());
+        })();
+    }
+
+    @boundMethod
+    handleChangeTelemetry(val: boolean): void {
+        let prtn: Promise<CommandRtnType> = null;
+        if (val) {
+            prtn = GlobalCommandRunner.telemetryOn(false);
+        } else {
+            prtn = GlobalCommandRunner.telemetryOff(false);
+        }
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
+    @boundMethod
+    handleChangeReleaseCheck(val: boolean): void {
+        let prtn: Promise<CommandRtnType> = null;
+        if (val) {
+            prtn = GlobalCommandRunner.releaseCheckAutoOn(false);
+        } else {
+            prtn = GlobalCommandRunner.releaseCheckAutoOff(false);
+        }
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
+    getFontSizes(): any {
+        let availableFontSizes: { label: string; value: number }[] = [];
+        for (let s = MinFontSize; s <= MaxFontSize; s++) {
+            availableFontSizes.push({ label: s + "px", value: s });
+        }
+        return availableFontSizes;
+    }
+
+    @boundMethod
+    inlineUpdateOpenAIModel(newModel: string): void {
+        let prtn = GlobalCommandRunner.setClientOpenAISettings({ model: newModel });
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
+    @boundMethod
+    inlineUpdateOpenAIToken(newToken: string): void {
+        let prtn = GlobalCommandRunner.setClientOpenAISettings({ apitoken: newToken });
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
+    @boundMethod
+    inlineUpdateOpenAIMaxTokens(newMaxTokensStr: string): void {
+        let prtn = GlobalCommandRunner.setClientOpenAISettings({ maxtokens: newMaxTokensStr });
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
+    @boundMethod
+    setErrorMessage(msg: string): void {
+        mobx.action(() => {
+            this.errorMessage.set(msg);
+        })();
+    }
+
+    @boundMethod
+    handleClose(): void {
+        GlobalModel.clientSettingsViewModel.closeView();
+    }
+
+    render() {
+        let isHidden = GlobalModel.activeMainView.get() != "clientsettings";
+        if (isHidden) {
+            return null;
+        }
+
+        let cdata: ClientDataType = GlobalModel.clientData.get();
+        let openAIOpts = cdata.openaiopts ?? {};
+        let apiTokenStr = isBlank(openAIOpts.apitoken) ? "(not set)" : "********";
+        let maxTokensStr = String(
+            openAIOpts.maxtokens == null || openAIOpts.maxtokens == 0 ? 1000 : openAIOpts.maxtokens
+        );
+        let curFontSize = GlobalModel.termFontSize.get();
+
+        return (
+            <div className={cn("view clientsettings-view")}>
+                <header className="header">
+                    <div className="clientsettings-title text-primary">Client Settings</div>
+                    <div className="close-div hoverEffect" title="Close (Escape)" onClick={this.handleClose}>
+                        <i className="fa-sharp fa-solid fa-xmark"></i>
+                    </div>
+                </header>
+                <div className="content">
+                    <div className="settings-field">
+                        <div className="settings-label">Term Font Size</div>
+                        <div className="settings-input">
+                            <Dropdown
+                                className="font-size-dropdown"
+                                options={this.getFontSizes()}
+                                defaultValue={`${curFontSize}px`}
+                                onChange={this.handleChangeFontSize}
+                            />
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Client ID</div>
+                        <div className="settings-input">{cdata.clientid}</div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Client Version</div>
+                        <div className="settings-input">
+                            {VERSION} {BUILD}
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">DB Version</div>
+                        <div className="settings-input">{cdata.dbversion}</div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Basic Telemetry</div>
+                        <div className="settings-input">
+                            <Toggle checked={!cdata.clientopts.notelemetry} onChange={this.handleChangeTelemetry} />
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Check for Updates</div>
+                        <div className="settings-input">
+                            <Toggle
+                                checked={!cdata.clientopts.noreleasecheck}
+                                onChange={this.handleChangeReleaseCheck}
+                            />
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">OpenAI Token</div>
+                        <div className="settings-input">
+                            <InlineSettingsTextEdit
+                                placeholder=""
+                                text={apiTokenStr}
+                                value={""}
+                                onChange={this.inlineUpdateOpenAIToken}
+                                maxLength={100}
+                                showIcon={true}
+                            />
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">OpenAI Model</div>
+                        <div className="settings-input">
+                            <InlineSettingsTextEdit
+                                placeholder="gpt-3.5-turbo"
+                                text={isBlank(openAIOpts.model) ? "gpt-3.5-turbo" : openAIOpts.model}
+                                value={openAIOpts.model ?? ""}
+                                onChange={this.inlineUpdateOpenAIModel}
+                                maxLength={100}
+                                showIcon={true}
+                            />
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">OpenAI MaxTokens</div>
+                        <div className="settings-input">
+                            <InlineSettingsTextEdit
+                                placeholder=""
+                                text={maxTokensStr}
+                                value={maxTokensStr}
+                                onChange={this.inlineUpdateOpenAIMaxTokens}
+                                maxLength={10}
+                                showIcon={true}
+                            />
+                        </div>
+                    </div>
+                    <SettingsError errorMessage={this.errorMessage} />
+                </div>
+            </div>
+        );
+    }
+}
+
+export { ClientSettingsView };

src/app/common/common.less

@@ -405,11 +405,9 @@
         padding: 6px 6px 6px 10px;
         border-radius: 4px;
     }
-    
+
     pre.selected {
-        border-style: solid;
-        outline-width: 2px;
-        border-color: @term-green; 
+        outline: 2px solid @term-green;
     }
 
     .title.is-1 {
@@ -611,7 +609,6 @@
 
 .wave-dropdown {
     position: relative;
-    background-color: transparent;
     height: 44px;
     min-width: 150px;
     width: 100%;
@@ -717,9 +714,7 @@
     top: 100%;
     left: 0;
     right: 0;
-    z-index: 0;
     margin-top: 2px;
-    padding: 0;
     max-height: 200px;
     overflow-y: auto;
     padding: 6px;
@@ -777,7 +772,6 @@
     min-width: 412px;
     gap: 6px;
     border: 1px solid var(--element-separator, rgba(241, 246, 243, 0.15));
-    border-radius: 6px;
     background: var(--element-hover-2, rgba(255, 255, 255, 0.06));
     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;
@@ -933,7 +927,6 @@
     background: none;
     color: inherit;
     border: none;
-    padding: 0;
     font: inherit;
     cursor: pointer;
     outline: inherit;

src/app/common/common.tsx

@@ -9,9 +9,12 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
-import type { RemoteType } from "../../types/types";
+import { RemoteType } from "../../types/types";
 import ReactDOM from "react-dom";
-import { GlobalModel } from "../../model/model";
+import { GlobalModel, GlobalCommandRunner } from "../../model/model";
+import * as appconst from "../appconst";
+import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "../../util/keyutil";
+import { MagicLayout } from "../magiclayout";
 
 import { ReactComponent as CheckIcon } from "../assets/icons/line/check.svg";
 import { ReactComponent as CopyIcon } from "../assets/icons/history/copy.svg";
@@ -116,7 +119,7 @@ class Checkbox extends React.Component<
     constructor(props) {
         super(props);
         this.state = {
-            checkedInternal: this.props.checked !== undefined ? this.props.checked : Boolean(this.props.defaultChecked),
+            checkedInternal: this.props.checked ?? Boolean(this.props.defaultChecked),
         };
         this.generatedId = `checkbox-${Checkbox.idCounter++}`;
     }
@@ -286,15 +289,16 @@ class Button extends React.Component<ButtonProps> {
     }
 
     render() {
-        const { leftIcon, rightIcon, theme, children, disabled, variant, color, style } = this.props;
+        const { leftIcon, rightIcon, theme, children, disabled, variant, color, style, autoFocus, className } =
+            this.props;
 
         return (
             <button
-                className={cn("wave-button", theme, variant, color, { disabled: disabled })}
+                className={cn("wave-button", theme, variant, color, { disabled: disabled }, className)}
                 onClick={this.handleClick}
                 disabled={disabled}
                 style={style}
-                autoFocus={this.props.autoFocus}
+                autoFocus={autoFocus}
             >
                 {leftIcon && <span className="icon-left">{leftIcon}</span>}
                 {children}
@@ -713,13 +717,14 @@ class InlineSettingsTextEdit extends React.Component<
 
     @boundMethod
     handleKeyDown(e: any): void {
-        if (e.code == "Enter") {
+        let waveEvent = adaptFromReactOrNativeKeyEvent(e);
+        if (checkKeyPressed(waveEvent, "Enter")) {
             e.preventDefault();
             e.stopPropagation();
             this.confirmChange();
             return;
         }
-        if (e.code == "Escape") {
+        if (checkKeyPressed(waveEvent, "Escape")) {
             e.preventDefault();
             e.stopPropagation();
             this.cancelChange();
@@ -829,10 +834,7 @@ function CodeRenderer(props: any): any {
 }
 
 @mobxReact.observer
-class CodeBlockMarkdown extends React.Component<
-    { children: React.ReactNode; blockText: string; codeSelectSelectedIndex?: number },
-    {}
-> {
+class CodeBlockMarkdown extends React.Component<{ children: React.ReactNode; codeSelectSelectedIndex?: number }, {}> {
     blockIndex: number;
     blockRef: React.RefObject<HTMLPreElement>;
 
@@ -843,7 +845,6 @@ class CodeBlockMarkdown extends React.Component<
     }
 
     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) => {
@@ -868,19 +869,15 @@ class Markdown extends React.Component<
     {}
 > {
     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>
-            );
+            return <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex}>{props.children}</CodeBlockMarkdown>;
         } else {
-            let clickHandler = (e: React.MouseEvent<HTMLElement>) => {
-                navigator.clipboard.writeText(codeText);
+            const clickHandler = (e: React.MouseEvent<HTMLElement>) => {
+                let blockText = (e.target as HTMLElement).innerText;
+                if (blockText) {
+                    blockText = blockText.replace(/\n$/, ""); // remove trailing newline
+                    navigator.clipboard.writeText(blockText);
+                }
             };
             return <pre onClick={(event) => clickHandler(event)}>{props.children}</pre>;
         }
@@ -903,7 +900,9 @@ class Markdown extends React.Component<
         };
         return (
             <div className={cn("markdown content", this.props.extraClassName)} style={this.props.style}>
-                <ReactMarkdown children={text} remarkPlugins={[remarkGfm]} components={markdownComponents} />
+                <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+                    {text}
+                </ReactMarkdown>
             </div>
         );
     }
@@ -1246,6 +1245,187 @@ class Modal extends React.Component<ModalProps> {
     }
 }
 
+function ShowWaveShellInstallPrompt(callbackFn: () => void) {
+    let message: string = `
+In order to use Wave's advanced features like unified history and persistent sessions, Wave installs a small, open-source helper program called WaveShell on your remote machine.  WaveShell does not open any external ports and only communicates with your *local* Wave terminal instance over ssh.  For more information please see [the docs](https://docs.waveterm.dev/reference/waveshell).        
+        `;
+    message = message.trim();
+    let prtn = GlobalModel.showAlert({
+        message: message,
+        confirm: true,
+        markdown: true,
+        confirmflag: appconst.ConfirmKey_HideShellPrompt,
+    });
+    prtn.then((confirm) => {
+        if (!confirm) {
+            return;
+        }
+        if (callbackFn) {
+            callbackFn();
+        }
+    });
+}
+
+interface ResizableSidebarProps {
+    parentRef: React.RefObject<HTMLElement>;
+    position: "left" | "right";
+    enableSnap?: boolean;
+    className?: string;
+    children?: (toggleCollapsed: () => void) => React.ReactNode;
+    toggleCollapse?: () => void;
+}
+
+@mobxReact.observer
+class ResizableSidebar extends React.Component<ResizableSidebarProps> {
+    resizeStartWidth: number = 0;
+    startX: number = 0;
+    prevDelta: number = 0;
+    prevDragDirection: string = null;
+    disposeReaction: any;
+
+    @boundMethod
+    startResizing(event: React.MouseEvent<HTMLDivElement>) {
+        event.preventDefault();
+
+        const { parentRef, position } = this.props;
+        const parentRect = parentRef.current?.getBoundingClientRect();
+
+        if (!parentRect) return;
+
+        if (position === "right") {
+            this.startX = parentRect.right - event.clientX;
+        } else {
+            this.startX = event.clientX - parentRect.left;
+        }
+
+        const mainSidebarModel = GlobalModel.mainSidebarModel;
+        const collapsed = mainSidebarModel.getCollapsed();
+
+        this.resizeStartWidth = mainSidebarModel.getWidth();
+        document.addEventListener("mousemove", this.onMouseMove);
+        document.addEventListener("mouseup", this.stopResizing);
+
+        document.body.style.cursor = "col-resize";
+        mobx.action(() => {
+            mainSidebarModel.setTempWidthAndTempCollapsed(this.resizeStartWidth, collapsed);
+            mainSidebarModel.isDragging.set(true);
+        })();
+    }
+
+    @boundMethod
+    onMouseMove(event: MouseEvent) {
+        event.preventDefault();
+
+        const { parentRef, enableSnap, position } = this.props;
+        const parentRect = parentRef.current?.getBoundingClientRect();
+        const mainSidebarModel = GlobalModel.mainSidebarModel;
+
+        if (!mainSidebarModel.isDragging.get() || !parentRect) return;
+
+        let delta: number, newWidth: number;
+
+        if (position === "right") {
+            delta = parentRect.right - event.clientX - this.startX;
+        } else {
+            delta = event.clientX - parentRect.left - this.startX;
+        }
+
+        newWidth = this.resizeStartWidth + delta;
+
+        if (enableSnap) {
+            const minWidth = MagicLayout.MainSidebarMinWidth;
+            const snapPoint = minWidth + MagicLayout.MainSidebarSnapThreshold;
+            const dragResistance = MagicLayout.MainSidebarDragResistance;
+            let dragDirection: string;
+
+            if (delta - this.prevDelta > 0) {
+                dragDirection = "+";
+            } else if (delta - this.prevDelta == 0) {
+                if (this.prevDragDirection == "+") {
+                    dragDirection = "+";
+                } else {
+                    dragDirection = "-";
+                }
+            } else {
+                dragDirection = "-";
+            }
+
+            this.prevDelta = delta;
+            this.prevDragDirection = dragDirection;
+
+            if (newWidth - dragResistance > minWidth && newWidth < snapPoint && dragDirection == "+") {
+                newWidth = snapPoint;
+                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, false);
+            } else if (newWidth + dragResistance < snapPoint && dragDirection == "-") {
+                newWidth = minWidth;
+                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, true);
+            } else if (newWidth > snapPoint) {
+                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, false);
+            }
+        } else {
+            if (newWidth <= MagicLayout.MainSidebarMinWidth) {
+                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, true);
+            } else {
+                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, false);
+            }
+        }
+    }
+
+    @boundMethod
+    stopResizing() {
+        let mainSidebarModel = GlobalModel.mainSidebarModel;
+
+        GlobalCommandRunner.clientSetSidebar(
+            mainSidebarModel.tempWidth.get(),
+            mainSidebarModel.tempCollapsed.get()
+        ).finally(() => {
+            mobx.action(() => {
+                mainSidebarModel.isDragging.set(false);
+            })();
+        });
+
+        document.removeEventListener("mousemove", this.onMouseMove);
+        document.removeEventListener("mouseup", this.stopResizing);
+        document.body.style.cursor = "";
+    }
+
+    @boundMethod
+    toggleCollapsed() {
+        const mainSidebarModel = GlobalModel.mainSidebarModel;
+
+        const tempCollapsed = mainSidebarModel.getCollapsed();
+        const width = mainSidebarModel.getWidth(true);
+        mainSidebarModel.setTempWidthAndTempCollapsed(width, !tempCollapsed);
+        GlobalCommandRunner.clientSetSidebar(width, !tempCollapsed);
+    }
+
+    render() {
+        const { className, children } = this.props;
+        const mainSidebarModel = GlobalModel.mainSidebarModel;
+        const width = mainSidebarModel.getWidth();
+        const isCollapsed = mainSidebarModel.getCollapsed();
+
+        return (
+            <div className={cn("sidebar", className, { collapsed: isCollapsed })} style={{ width }}>
+                <div className="sidebar-content">{children(this.toggleCollapsed)}</div>
+                <div
+                    className="sidebar-handle"
+                    style={{
+                        position: "absolute",
+                        top: 0,
+                        [this.props.position === "left" ? "right" : "left"]: 0,
+                        bottom: 0,
+                        width: "5px",
+                        cursor: "col-resize",
+                    }}
+                    onMouseDown={this.startResizing}
+                    onDoubleClick={this.toggleCollapsed}
+                ></div>
+            </div>
+        );
+    }
+}
+
 export {
     CmdStrCode,
     Toggle,
@@ -1267,4 +1447,6 @@ export {
     LinkButton,
     Status,
     Modal,
+    ResizableSidebar,
+    ShowWaveShellInstallPrompt,
 };