fix default font

* reorganize line styles, split lines.less into lines.less and line.less

* switch everyone to use termFontSize getter (easier to find usages)

* better font-family font-size update logic

* update line styles, clean up more

* replace icons, fix line heights

* make paddings/margins more consistent

* fix more margins, make command completions use termfontfamily

* updates for cmdinput margins, font sizes, etc.

* fix more font sizes and margins (mostly command input)

* add comment

.github/workflows/build-helper.yml

@@ -5,65 +5,30 @@ env:
     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]
+    runbuild:
+        strategy:
+            matrix:
+                include:
+                    - platform: "darwin"
+                      arch: "x64"
+                      runner: "macos-latest"
+                      scripthaus: "build-package"
+                    - platform: "darwin"
+                      arch: "arm64"
+                      runner: "macos-latest-xlarge"
+                      scripthaus: "build-package"
+                    - platform: "linux"
+                      arch: "x64"
+                      runner: "ubuntu-latest"
+                      scripthaus: "build-package-linux"
+        runs-on: ${{ matrix.runner }}
         steps:
             - uses: actions/checkout@v4
             - uses: actions/checkout@v4
               with:
                   repository: scripthaus-dev/scripthaus
                   path: scripthaus
-            - uses: actions/setup-go@v4
+            - uses: actions/setup-go@v5
               with:
                   go-version: ${{env.GO_VERSION}}
                   cache-dependency-path: |
@@ -80,21 +45,24 @@ jobs:
                   node-version: ${{env.NODE_VERSION}}
                   cache: "yarn"
             - run: yarn --frozen-lockfile
-            - run: ./scripthaus/scripthaus run build-package-linux
+            - run: ./scripthaus/scripthaus run ${{ matrix.scripthaus }}
+            - uses: actions/upload-artifact@v4
+              with:
+                  name: waveterm-build-${{ matrix.platform }}-${{ matrix.arch }}
+                  path: out/make/zip/${{ matrix.platform }}/${{ matrix.arch }}/*.zip
+                  retention-days: 2
+    upload:
+        name: "Upload Builds"
+        runs-on: ubuntu-latest
+        needs: [runbuild]
+        steps:
             - 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/codeql.yml

@@ -12,70 +12,69 @@
 name: "CodeQL"
 
 on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
-  schedule:
-    - cron: '36 5 * * 5'
+    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
+    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
+        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
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v3
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      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.
-        # 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.
+            # Initializes the CodeQL tools for scanning.
+            - name: Initialize CodeQL
+              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.
+                  # 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
+                  # 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@v3
 
-    # 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@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
 
-    # ℹ️ 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.
 
-    #   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
 
-    # - run: |
-    #     echo "Run, Build Application using script"
-    #     ./location_of_script_within_repo/buildscript.sh
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
-      with:
-        category: "/language:${{matrix.language}}"
+            - name: Perform CodeQL Analysis
+              uses: github/codeql-action/analyze@v3
+              with:
+                  category: "/language:${{matrix.language}}"

README.md

@@ -1,8 +1,8 @@
 <p align="center">
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="./assets/wave-logo_horizontal-coloronblack.svg">
-    <source media="(prefers-color-scheme: light)" srcset="./assets/wave-logo_horizontal-coloronwhite.svg">
-    <img alt="Wave Terminal Logo" src="./assets/wave-logo_horizontal-coloronwhite.svg" width="352" height="59" style="max-width: 100%;">
+    <source media="(prefers-color-scheme: dark)" srcset="./assets/waveterm-logo-horizontal-dark.png">
+    <source media="(prefers-color-scheme: light)" srcset="./assets/waveterm-logo-horizontal-light.png">
+    <img alt="Wave Terminal Logo" src="./assets/waveterm-logo-horizontal-light.png" width="240" height="80" style="max-width: 100%;">
   </picture>
   <br/>
 </p>

go.work.sum

@@ -1,3 +1,4 @@
+github.com/aws/aws-sdk-go-v2/service/s3 v1.27.11 h1:3/gm/JTX9bX8CpzTgIlrtYpB3EVBDxyg/GY/QdcIEZw=
 github.com/google/go-querystring v1.1.0 h1:AnCroh3fv4ZBgVIf1Iwtovgjaw/GiKJo8M8yD/fhyJ8=
 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=

src/app/app.less

@@ -1,14 +1,13 @@
 @import "./common/themes/themes.less";
 
-@font-face {
-    font-family: "Martian Mono";
-    src: url("./assets/fonts/MartianMono-VariableFont_wdth,wght.ttf") format("truetype");
-    font-weight: normal;
-    font-style: normal;
-}
-
 :root {
     --fa-style-family: "Font Awesome 6 Sharp";
+
+    // these variables are overridden by user settings
+    --termfontfamily: "JetBrains Mono", monospace;
+    --termfontsize: 12px;
+    --termlineheight: 15px;
+    --termpad: 7px; // padding value (scaled to termfontsize)
 }
 
 html,
@@ -18,12 +17,14 @@ body {
     font-size: 12px;
     font-weight: 300;
     line-height: 1.5;
-    background: @base-background-transparent;
+    background-color: black;
     color: @base-color;
 }
 
-body.is-dev {
-    background-color: @base-background-dev;
+body {
+    &.is-dev .sidebar {
+        // background-color: @base-background-dev;
+    }
 }
 
 textarea {
@@ -98,7 +99,7 @@ body a {
 }
 
 body code {
-    font-family: @terminal-font;
+    font-family: var(--termfontfamily);
     background-color: transparent;
 }
 
@@ -196,6 +197,11 @@ svg.icon {
     position: absolute;
     top: 0;
     left: 0;
+    background-color: @base-background;
+    border-top: 1px solid @thin-border-color;
+    border-right: 1px solid @thin-border-color;
+    border-left: 1px solid @thin-border-color;
+    border-radius: 10px 10px 0 0;
 }
 
 input[type="checkbox"] {
@@ -232,6 +238,7 @@ a.a-block {
         display: flex;
         flex-direction: row;
         height: 100%;
+        position: relative;
 
         .history-view,
         .bookmarks-view,
@@ -247,6 +254,17 @@ a.a-block {
             }
             overflow: auto;
         }
+
+        .main-content-bottom-color {
+            position: absolute;
+            width: 100%;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 30%;
+            pointer-events: none;
+            background-color: @main-content-bottom-background;
+        }
     }
 }
 
@@ -312,7 +330,7 @@ a.a-block {
     }
 
     .mono {
-        font-family: @terminal-font;
+        font-family: var(--termfontfamily);
     }
 }
 

src/app/app.tsx

@@ -105,9 +105,17 @@ class App extends React.Component<{}, {}> {
         if (dcWait) {
             setTimeout(() => this.updateDcWait(false), 0);
         }
+        // used to force a full reload of the application
+        let renderVersion = GlobalModel.renderVersion.get();
         return (
-            <div id="main" className={"platform-" + platform} onContextMenu={this.handleContextMenu}>
+            <div
+                key={"version-" + renderVersion}
+                id="main"
+                className={"platform-" + platform}
+                onContextMenu={this.handleContextMenu}
+            >
                 <div ref={this.mainContentRef} className="main-content">
+                    <div className="main-content-bottom-color" />
                     <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
                     <ErrorBoundary>
                         <PluginsView />

src/app/appconst.ts

@@ -16,9 +16,12 @@ export const LineContainer_Sidebar = "sidebar";
 
 export const ConfirmKey_HideShellPrompt = "hideshellprompt";
 
+export const DefaultTermFontFamily = "JetBrains Mono";
+
 export const NoStrPos = -1;
 
-export const RemotePtyRows = 8; // also in main.tsx
+export const RemotePtyRows = 8;
+export const RemotePtyTotalRows = 25;
 export const RemotePtyCols = 80;
 export const ProdServerEndpoint = "http://127.0.0.1:1619";
 export const ProdServerWsEndpoint = "ws://127.0.0.1:1623";

src/app/bookmarks/bookmarks.tsx

@@ -160,7 +160,7 @@ class Bookmark extends React.Component<BookmarkProps, {}> {
                 <div className="bookmark-id-div">{bm.bookmarkid.substr(0, 8)}</div>
                 <div className="bookmark-content">
                     <If condition={hasDesc}>
-                        <Markdown text={markdown} />
+                        <Markdown text={markdown} extraClassName="bottom-margin" />
                     </If>
                     <CmdStrCode
                         cmdstr={bm.cmdstr}

src/app/clientsettings/clientsettings.less

@@ -26,6 +26,10 @@
         padding: 0 18px 0 30px;
     }
 
+    .wave-dropdown {
+        width: 200px;
+    }
+
     // 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 {

src/app/clientsettings/clientsettings.tsx

@@ -15,9 +15,6 @@ import "./clientsettings.less";
 
 @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
@@ -30,8 +27,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
     @boundMethod
     handleChangeFontSize(fontSize: string): void {
         const newFontSize = Number(fontSize);
-        this.fontSizeDropdownActive.set(false);
-        if (GlobalModel.termFontSize.get() == newFontSize) {
+        if (GlobalModel.getTermFontSize() == newFontSize) {
             return;
         }
         const prtn = GlobalCommandRunner.setTermFontSize(newFontSize, false);
@@ -39,10 +35,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
     }
 
     @boundMethod
-    togglefontSizeDropdown(): void {
-        mobx.action(() => {
-            this.fontSizeDropdownActive.set(!this.fontSizeDropdownActive.get());
-        })();
+    handleChangeFontFamily(fontFamily: string): void {
+        if (GlobalModel.getTermFontFamily() == fontFamily) {
+            return;
+        }
+        const prtn = GlobalCommandRunner.setTermFontFamily(fontFamily, false);
+        commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
@@ -75,6 +73,13 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         return availableFontSizes;
     }
 
+    getFontFamilies(): DropdownItem[] {
+        const availableFontFamilies: DropdownItem[] = [];
+        availableFontFamilies.push({ label: "JetBrains Mono", value: "JetBrains Mono" });
+        availableFontFamilies.push({ label: "Hack", value: "Hack" });
+        return availableFontFamilies;
+    }
+
     @boundMethod
     inlineUpdateOpenAIModel(newModel: string): void {
         const prtn = GlobalCommandRunner.setClientOpenAISettings({ model: newModel });
@@ -139,7 +144,8 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const maxTokensStr = String(
             openAIOpts.maxtokens == null || openAIOpts.maxtokens == 0 ? 1000 : openAIOpts.maxtokens
         );
-        const curFontSize = GlobalModel.termFontSize.get();
+        const curFontSize = GlobalModel.getTermFontSize();
+        const curFontFamily = GlobalModel.getTermFontFamily();
 
         return (
             <div className={cn("view clientsettings-view")}>
@@ -161,6 +167,17 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                             />
                         </div>
                     </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Term Font Family</div>
+                        <div className="settings-input">
+                            <Dropdown
+                                className="font-size-dropdown"
+                                options={this.getFontFamilies()}
+                                defaultValue={curFontFamily}
+                                onChange={this.handleChangeFontFamily}
+                            />
+                        </div>
+                    </div>
                     <div className="settings-field">
                         <div className="settings-label">Client ID</div>
                         <div className="settings-input">{cdata.clientid}</div>

src/app/common/elements/markdown.less

@@ -2,22 +2,25 @@
 
 .markdown {
     color: @term-white;
-    margin-bottom: 10px;
     font-family: @markdown-font;
     font-size: 14px;
     overflow-wrap: break-word;
 
+    &.bottom-margin {
+        margin-bottom: 10px;
+    }
+
     code {
         background-color: @markdown-highlight;
         color: @term-white;
-        font-family: @terminal-font;
+        font-family: var(--termfontfamily);
         border-radius: 4px;
     }
 
     code.inline {
         padding-top: 0;
         padding-bottom: 0;
-        font-family: @terminal-font;
+        font-family: var(--termfontfamily);
     }
 
     .title {

src/app/common/modals/alert.tsx

@@ -41,7 +41,7 @@ class AlertModal extends React.Component<{}, {}> {
                 <Modal.Header onClose={this.closeModal} title={title} />
                 <div className="wave-modal-body">
                     <If condition={message?.markdown}>
-                        <Markdown text={message?.message ?? ""} />
+                        <Markdown text={message?.message ?? ""} extraClassName="bottom-margin" />
                     </If>
                     <If condition={!message?.markdown}>{message?.message}</If>
                     <If condition={message.confirmflag}>

src/app/common/modals/userinput.tsx

@@ -59,7 +59,7 @@ export const UserInputModal = (userInputRequest: UserInputRequest) => {
             <div className="wave-modal-body">
                 <div className="userinput-query">
                     <If condition={userInputRequest.markdown}>
-                        <Markdown text={userInputRequest.querytext} />
+                        <Markdown text={userInputRequest.querytext} extraClassName="bottom-margin" />
                     </If>
                     <If condition={!userInputRequest.markdown}>{userInputRequest.querytext}</If>
                 </div>