feat: first pass at sftp installer for waveshell

This does not completely work yet. In particular, you must attempt to connect to the client before attempting an install. It also does not work for auto installation yet.
2026-04-22 15:26:58 -07:00 · 2024-02-15 19:06:14 -08:00
35 changed files with 5712 additions and 412 deletions
@@ -1,11 +1,45 @@
 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=
+github.com/kr/fs v0.1.0/go.mod h1:FFnZGqtBN9Gxj7eW1uZ42v5BccTP0vu6NEaFoC2HwRg=
+github.com/pkg/sftp v1.13.6/go.mod h1:tz1ryNURKu77RL+GuCzmoJYxQczL3wLNNpPWagdg4Qk=
+github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
+github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
 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/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
+golang.org/x/crypto v0.1.0/go.mod h1:RecgLatLF4+eUMCP1PoPZQb+cVrJcOPbHkTkbkB9sbw=
+golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
+golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
+golang.org/x/net v0.1.0/go.mod h1:Cx3nUiGt4eDBEyega/BKRp+/AlGL8hYe7U9odMt2Cco=
 golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
+golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.2.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
+golang.org/x/term v0.1.0/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
+golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
+golang.org/x/text v0.4.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
+golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 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=
+golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
@@ -1,4 +1,4 @@
-@import "@/common/themes/themes.less";
+@import "./common/themes/themes.less";

@font-face {
    font-family: "Martian Mono";
@@ -19,7 +19,7 @@ body {
    font-weight: 300;
    line-height: 1.5;
    background: @base-background-transparent;
-    color: var(--base-color);
+    color: @base-color;
 }

 body.is-dev {
@@ -33,7 +33,7 @@ textarea {
    font-weight: 300;
    line-height: 1.5;
    background: @base-background;
-    color: var(--base-color);
+    color: @base-color;
 }

 // typography
@@ -103,7 +103,7 @@ body code {
 }

 svg.icon {
-    fill: var(--base-color);
+    fill: @base-color;
    width: 100%;
    height: 100%;
    display: inline-block;
@@ -20,9 +20,6 @@ import { MainSideBar } from "./sidebar/sidebar";
 import { DisconnectedModal, ClientStopModal } from "./common/modals";
 import { ModalsProvider } from "./common/modals/provider";
 import { ErrorBoundary } from "./common/error/errorboundary";
-
-import "@/common/themes/fonts.less";
-import "@/common/themes/themes.less";
 import "./app.less";

 dayjs.extend(localizedFormat);
@@ -18,8 +18,7 @@ export const ConfirmKey_HideShellPrompt = "hideshellprompt";

 export const NoStrPos = -1;

-export const RemotePtyRows = 8;
-export const RemotePtyTotalRows = 25;
+export const RemotePtyRows = 8; // also in main.tsx
 export const RemotePtyCols = 80;
 export const ProdServerEndpoint = "http://127.0.0.1:1619";
 export const ProdServerWsEndpoint = "ws://127.0.0.1:1623";
@@ -14,7 +14,7 @@
        svg {
            width: 1.5em;
            height: 1.5em;
-            fill: var(--base-color);
+            fill: @base-color;
        }
    }

@@ -31,7 +31,7 @@
    .icon {
        width: 1em;
        height: 1em;
-        fill: var(--base-color);
+        fill: @base-color;
    }

    .bookmarks-list {
@@ -17,7 +17,7 @@
    i {
        display: inline;
        font-size: 13px;
-        fill: var(--base-color);
+        fill: @base-color;
        padding-top: 0.2em;
    }
 }
@@ -370,11 +370,7 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
                                ref={this.termRef}
                                data-remoteid={remote.remoteid}
                                style={{
-                                    height: textmeasure.termHeightFromRows(
-                                        appconst.RemotePtyRows,
-                                        termFontSize,
-                                        appconst.RemotePtyTotalRows
-                                    ),
+                                    height: textmeasure.termHeightFromRows(appconst.RemotePtyRows, termFontSize),
                                    width: termWidth,
                                }}
                            ></div>
@@ -1,9 +0,0 @@
-:root {
-    --fixed-font: "Martian Mono", sans-serif;
-    --terminal-font: "JetBrains Mono", sans-serif;
-
-    --text-s1-font: "Martian Mono", sans-serif;
-
-    --markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji";
-}
@@ -77,138 +77,3 @@
@markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
@markdown-highlight: rgb(35, 35, 35);
-
-:root {
-    --base-color: #eceeec;
-
-    // semantic vars based on  --base-color
-    --line-avatar-color: #eceeec;
-    --line-text-color: #f2f4f2;
-    --line-svg-fill: var(--line-text-color);
-    --line-svg-hover-fill: #eceeec;
-    --line-selected-border-color: rgb(193, 195, 193);
-    --line-separator-color: rgb(126, 126, 126);
-    --line-meta-line1-color: rgb(150, 152, 150);
-
-    --base-background: rgba(21, 23, 21, 1);
-
-    // semantic vars based on  --base-background
-    --line-background: rgba(21, 23, 21, 1);
-
-    --base-background-transparent: rgba(21, 23, 21, 0.7);
-    --base-background-dev: rgba(21, 23, 48, 0.7);
-    --base-border: rgba(241, 246, 243, 0.08);
-    --background-session: rgba(13, 13, 13, 0.85);
-    --background-session-components: rgba(48, 49, 48, 0.6);
-    --background-session-components-solid: rgb(33, 34, 33);
-    --wave-green: rgb(88, 193, 66);
-
-    // semantic vars based on  --wave-green
-    --line-status-success-fill: rgb(88, 193, 66);
-
-    --wave-green-faded: rgba(88, 193, 66, 0.4);
-
-    --cmd-input-border-color: rgba(88, 193, 66, 0.8);
-
-    --disabled-background: rgba(76, 81, 75, 1);
-    --disabled-color: #adadad;
-    --disabled-color-faded: rgba(173, 173, 173, 0.6);
-    --scrollbar-background: rgba(21, 23, 21, 1);
-    --scrollbar-thumb-background: rgb(134, 134, 134);
-    --button-background: rgb(38, 38, 38);
-    --button-disabled-background: rgb(30, 29, 29);
-    --success-green: rgb(38, 97, 26);
-    --error-red: #cc0000;
-
-    // semantic vars based on  --error-red
-    --line-base-error-color: #cc0000;
-
-    // semantic vars based on  --error-red
-    --line-status-error-fill: #cc0000;
-
-    --warning-yellow: #ffa500;
-
-    // semantic vars based on  --warning-yellow
-    --line-status-warning-fill: #ffa500;
-
-    --textarea-background: #2a2a2a;
-
-    --text-primary: #fff;
-    --text-secondary: #c3c8c2;
-    --text-caption: #8b918a;
-
-    --status-connected: #46a758;
-    --status-connecting: #f5d90a;
-    --status-error: #e54d2e;
-    --status-disconnected: #c3c8c2;
-
-    --term-black: #000000;
-    --term-red: #cc0000;
-
-    // semantic vars based on  --term-red
-    --line-load-error-text-color: #cc0000;
-
-    --term-green: #4e9a06;
-
-    // semantic vars based on  --term-green
-    --line-active-border-color: rgb(97, 158, 72);
-
-    --term-yellow: #c4a000;
-
-    // semantic vars based on --term-yellow
-    --line-base-yellow-color: #fce94f;
-
-    // semantic vars based on  --term-yellow
-    --line-sidebar-message-text-color: #c4a000;
-
-    --term-blue: #3465a4;
-    --term-cyan: #06989a;
-    --term-white: #d3d7cf;
-
-    // semantic vars based on  --term-white
-    --line-base-white-color: #d3d7cf;
-
-    --term-bright-red: #ef2929;
-    --term-bright-green: #58c142;
-    --term-bright-yellow: #fce94f;
-
-    --term-bright-blue: #32afff;
-    --term-bright-magenta: #ad7fa8;
-    --term-bright-cyan: #34e2e2;
-    --term-bright-white: #ffffff;
-
-    --button-bg-yellow: #e9be68;
-    --button-bg-red: #d06c68;
-
-    --history-error-red: #d06c68;
-
-    --history-selected-error-red: #f79494;
-
-    --tab-red: #e54d2e;
-    --tab-orange: #ef713b;
-    --tab-yellow: #e0b956;
-    --tab-green: #58c142;
-    --tab-mint: #4bffa9;
-    --tab-cyan: #4bdfff;
-    --tab-blue: #3971ff;
-    --tab-violet: #ba76ff;
-    --tab-pink: #e05677;
-    --tab-white: #ffffff;
-
-    --soft-blue: #729fcf;
-
-    // semantic vars based on  --soft-blue
-    --line-base-soft-blue-color: #729fcf;
-    --line-meta-user-color: #89afd7;
-
-    --active-menu-color: rgb(0, 71, 171);
-
-    --fixed-font: "Martian Mono", sans-serif;
-    --terminal-font: "JetBrains Mono", sans-serif;
-
-    --text-s1-font: "Martian Mono", sans-serif;
-
-    --markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji";
-    --markdown-highlight: rgb(35, 35, 35);
-}
@@ -6,7 +6,7 @@
    .icon {
        width: 1.3em !important;
        height: 1.3em !important;
-        fill: var(--base-color);
+        fill: @base-color;
    }

    .history-checkbox {
@@ -51,7 +51,7 @@
        svg {
            width: 1.5em;
            height: 1.5em;
-            fill: var(--base-color);
+            fill: @base-color;
        }
    }

@@ -70,7 +70,7 @@
            font-size: 1em;
            padding: 0.5em 1em;
            background-color: @background-session-components;
-            color: var(--base-color);
+            color: @base-color;
        }
    }

@@ -99,7 +99,7 @@
                .label {
                    display: inline;
                    vertical-align: middle;
-                    color: var(--base-color);
+                    color: @base-color;
                }
                .icon {
                    vertical-align: middle;
@@ -163,7 +163,7 @@

            .reset-button {
                margin-left: 1em;
-                color: var(--base-color);
+                color: @base-color;
                line-height: 1.75em;
            }
        }
@@ -388,7 +388,7 @@ class LineCmd extends React.Component<
        let height = 45 + 24; // height of zero height terminal
        const usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
        if (usedRows > 0) {
-            height = 48 + 24 + termHeightFromRows(usedRows, GlobalModel.termFontSize.get(), cmd.getTermMaxRows());
+            height = 48 + 24 + termHeightFromRows(usedRows, GlobalModel.termFontSize.get());
        }
        return height;
    }
@@ -1,3 +1,5 @@
+@import "@/common/themes/themes.less";
+
 .line.line-text {
    flex-direction: row;
    padding-top: 5px;
@@ -11,7 +13,7 @@
 }

 .line .load-error-text {
-    color: var(--line-load-error-text-color);
+    color: @term-red;
    padding-top: 5px;
 }

@@ -34,7 +36,7 @@
    }

    .sidebar-message {
-        color: var(--line-sidebar-message-text-color);
+        color: @term-yellow;
    }

    .line-header {
@@ -82,14 +84,11 @@
    }

    .meta.meta-line1 {
-        color: var(--line-meta-line1-color) !important;
+        margin-left: 2px;
+        color: rgba(@base-color, 0.6) !important;
        font-size: 11px;
    }

-    .meta.meta-line2 {
-        margin-left: -2px;
-    }
-
    &.has-rtnstate .terminal-wrapper {
        padding-bottom: 0;
    }
@@ -114,6 +113,11 @@
            overflow-x: hidden;
        }

+        .terminal {
+            margin-right: 8px;
+            padding: 0.25rem;
+        }
+
        &.cmd-done .terminal .xterm-cursor {
            display: none;
        }
@@ -130,7 +134,7 @@
        position: relative;

        .cmd-rtnstate-label {
-            font-family: var(--terminal-font);
+            font-family: @terminal-font;
            position: relative;
            font-size: 10px;
            z-index: 2;
@@ -138,13 +142,13 @@
            padding: 2px 5px 0px 5px;
            display: inline-block;
            font-size: 10px;
-            color: var(--line-base-white-color);
+            color: @term-white;
            background-color: #151715;
        }

        .cmd-rtnstate-diff {
-            font-family: var(--terminal-font);
-            color: var(--line-base-white-color);
+            font-family: @terminal-font;
+            color: @term-white;
            white-space: pre;
            margin-left: 10px;
            padding-left: 10px;
@@ -179,16 +183,16 @@
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
-    background: var(--line-background);
+    background: @base-background;
    border: 1px solid transparent;

    &.selected {
-        border: 1px solid var(--line-selected-border-color) !important;
+        border: 1px solid rgba(@base-color, 0.8) !important;
        box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
    }

    &.active {
-        border: 1px solid var(--line-active-border-color) !important;
+        border: 1px solid rgba(@wave-green, 0.8) !important;
        box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
    }

@@ -200,7 +204,7 @@
    &.line-simple {
        font-size: 11px;
        line-height: 1.2;
-        color: var(--line-text-color);
+        color: rgba(@base-color, 0.6);

        .simple-line-header {
            display: flex;
@@ -230,19 +234,19 @@
            height: 1em;
            margin: 0 0.5em;
            vertical-align: text-top;
-            fill: var(--line-avatar-color);
+            fill: @base-color;
        }

        .success {
-            fill: var(--line-status-success-fill);
+            fill: @wave-green;
        }

        .fail {
-            fill: var(--line-status-error-fill);
+            fill: @error-red;
        }

        .warning {
-            fill: var(--line-status-warning-fill);
+            fill: @warning-yellow;
        }
    }

@@ -273,8 +277,7 @@
        align-items: center;
        justify-content: center;
        font-weight: bold;
-        // color: @term-white;
-        color: var(--line-avatar-color);
+        color: @term-white;

        border-radius: 5px;
        position: relative;
@@ -306,30 +309,30 @@

        &.status-error {
            .status-icon {
-                color: var(--line-base-error-color);
+                color: @error-red;
            }
        }

        &.status-hangup {
            .status-icon {
-                color: var(--line-base-yellow-color);
+                color: @term-yellow;
            }
        }

        &.status-running {
-            background-color: var(--line-base-soft-blue-color);
+            background-color: @soft-blue;
        }

        &.status-waiting {
-            background-color: var(--line-base-yellow-color);
+            background-color: @term-yellow;
        }

        &.status-detached {
-            background-color: var(--line-base-soft-blue-color);
+            background-color: @soft-blue;
            .status-icon {
                top: 3px;
                right: 3px;
-                color: var(--line-base-soft-blue-color);
+                color: @term-white;
            }
        }
    }
@@ -352,7 +355,7 @@
        }

        .user {
-            color: var(--line-meta-user-color);
+            color: lighten(@soft-blue, 10%);
            font-weight: bold;
            margin-top: 1px;
            margin-right: 10px;
@@ -371,7 +374,7 @@
            svg {
                width: 1em;
                margin-right: 0.5em;
-                fill: var(--line-meta-line1-color);
+                fill: rgba(@base-color, 0.6);
            }
        }

@@ -385,9 +388,9 @@
            border-radius: 50%;
            line-height: 1em;
            svg {
-                fill: var(--line-meta-line1-color);
+                fill: rgba(@base-color, 0.6);
                &:hover {
-                    fill: var(--line-svg-hover-fill);
+                    fill: @base-color;
                }
            }
        }
@@ -416,7 +419,7 @@
        .cmdtext-overflow {
            flex-shrink: 0;
            padding-right: 2px;
-            color: var(--line-base-white-color);
+            color: @term-white;
            cursor: pointer;

            margin-top: 4px;
@@ -434,7 +437,7 @@
        .cmdtext-expanded {
            white-space: pre;

-            color: var(--line-base-white-color);
+            color: @term-white;
            padding-bottom: 5px;
        }
    }
@@ -452,7 +455,7 @@
 }

 .line.line-invalid {
-    color: var(--line-base-white-color);
+    color: @term-white;
    margin-left: 5px;
 }

@@ -463,7 +466,6 @@
    padding: 0 0 10px 0;
    flex-grow: 1;
    position: relative;
-    overflow-x: hidden;

    &::-webkit-scrollbar-thumb {
        background-color: transparent !important;
@@ -476,7 +478,7 @@
    &:focus,
    &:focus-within {
        &::-webkit-scrollbar-thumb {
-            background-color: var(--scrollbar-thumb-background) !important;
+            background-color: @scrollbar-thumb !important;
        }
    }

@@ -492,7 +494,7 @@
        display: flex;
        align-items: center;
        margin-top: 1em;
-        color: var(--line-separator-color);
+        color: rgba(@base-color, 0.5);
    }

    .line-sep::before,
@@ -500,7 +502,7 @@
        content: "";
        height: 1px;
        flex-grow: 1;
-        background-color: var(--line-separator-color);
+        background-color: rgba(@base-color, 0.5);
    }

    .line-sep::before {
@@ -18,6 +18,8 @@ let MagicLayout = {
    ScreenMinContentSize: 100,
    ScreenMaxContentSize: 5000,

+    // the 3 is for descenders, which get cut off in the terminal without this
+    TermDescendersHeight: 3,
    TermWidthBuffer: 15,

    TabWidth: 154,
@@ -23,7 +23,7 @@
            svg {
                width: 1.5em;
                height: 1.5em;
-                fill: var(--base-color);
+                fill: @base-color;
            }
        }
    }
@@ -119,6 +119,7 @@
    }

    .middle {
+        max-height: calc(100vh - 32em);
        padding: 4px 6px 8px 6px;
        border-bottom: 1px solid @base-border;
        .item {
@@ -141,10 +142,9 @@

    .bottom {
        position: absolute;
-        bottom: 2rem;
+        bottom: 2em;
        left: 0;
        width: 100%;
-        padding-top: 0.8rem;
    }

    .item {
@@ -221,7 +221,7 @@
    }

    .menu-label {
-        color: var(--base-color);
+        color: @base-color;
    }

    .menu-list {
@@ -64,7 +64,7 @@ interface MainSideBarProps {

@mobxReact.observer
 class MainSideBar extends React.Component<MainSideBarProps, {}> {
-    middleHeightSubtractor = mobx.observable.box(404);
+    sidebarRef = React.createRef<HTMLDivElement>();

    handleSessionClick(sessionId: string) {
        GlobalCommandRunner.switchSession(sessionId);
@@ -203,37 +203,14 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
        });
    }

-    /**
-     * Calculate the subtractor portion for the middle div's height calculation, which should be `100vh - subtractor`.
-     */
-    setMiddleHeightSubtractor() {
-        const windowHeight = window.innerHeight;
-        const bottomHeight = windowHeight - window.document.getElementById("sidebar-bottom")?.offsetTop;
-        const middleTop = document.getElementById("sidebar-middle")?.offsetTop;
-        const newMiddleHeightSubtractor = bottomHeight + middleTop;
-        if (!Number.isNaN(newMiddleHeightSubtractor)) {
-            mobx.action(() => {
-                this.middleHeightSubtractor.set(newMiddleHeightSubtractor);
-            })();
-        }
-    }
-
-    componentDidMount() {
-        this.setMiddleHeightSubtractor();
-    }
-
-    componentDidUpdate() {
-        this.setMiddleHeightSubtractor();
-    }
-
    render() {
-        const clientData = this.props.clientData;
+        let clientData = this.props.clientData;
        let needsUpdate = false;
        if (!clientData?.clientopts.noreleasecheck && !isBlank(clientData?.releaseinfo?.latestversion)) {
            needsUpdate = compareLoose(appconst.VERSION, clientData.releaseinfo.latestversion) < 0;
        }
-        const mainSidebar = GlobalModel.mainSidebarModel;
-        const isCollapsed = mainSidebar.getCollapsed();
+        let mainSidebar = GlobalModel.mainSidebarModel;
+        let isCollapsed = mainSidebar.getCollapsed();
        return (
            <ResizableSidebar
                className="main-sidebar"
@@ -294,16 +271,8 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
                                    </CenteredIcon>,
                                ]}
                            />
-                            <div
-                                className="middle hideScrollbarUntillHover"
-                                id="sidebar-middle"
-                                style={{
-                                    maxHeight: `calc(100vh - ${this.middleHeightSubtractor.get()}px)`,
-                                }}
-                            >
-                                {this.getSessions()}
-                            </div>
-                            <div className="bottom" id="sidebar-bottom">
+                            <div className="middle hideScrollbarUntillHover">{this.getSessions()}</div>
+                            <div className="bottom">
                                <If condition={needsUpdate}>
                                    <SideBarItem
                                        key="update-available"
@@ -91,7 +91,7 @@
            height: 1em;
            margin: 0 0.5em;
            vertical-align: text-top;
-            fill: var(--base-color);
+            fill: @base-color;
        }

        .warning {
@@ -109,7 +109,6 @@ class ScreenView extends React.Component<{ session: Session; screen: Screen }, {
            return <div className="screen-view" ref={this.screenViewRef}></div>;
        }
        let fontSize = GlobalModel.termFontSize.get();
-        let dprStr = sprintf("%0.3f", GlobalModel.devicePixelRatio.get());
        let viewOpts = screen.viewOpts.get();
        let hasSidebar = viewOpts?.sidebar?.open;
        let winWidth = "100%";
@@ -146,7 +145,7 @@ class ScreenView extends React.Component<{ session: Session; screen: Screen }, {
        return (
            <div className="screen-view" data-screenid={screen.screenId} ref={this.screenViewRef}>
                <ScreenWindowView
-                    key={screen.screenId + ":" + fontSize + ":" + dprStr}
+                    key={screen.screenId + ":" + fontSize}
                    session={session}
                    screen={screen}
                    width={winWidth}
@@ -177,7 +177,6 @@ function readAuthKey() {
    return authKeyStr.trim();
 }
 const reloadAcceleratorKey = unamePlatform == "darwin" ? "Option+R" : "Super+R";
-let cmdOrAlt = process.platform === "darwin" ? "Cmd" : "Alt";
 let menuTemplate: Electron.MenuItemConstructorOptions[] = [
    {
        role: "appMenu",
@@ -206,41 +205,9 @@ let menuTemplate: Electron.MenuItemConstructorOptions[] = [
            { role: "reload", accelerator: reloadAcceleratorKey },
            { role: "toggleDevTools" },
            { type: "separator" },
-            {
-                label: "Actual Size",
-                accelerator: cmdOrAlt + "+0",
-                click: () => {
-                    if (MainWindow == null) {
-                        return;
-                    }
-                    MainWindow.webContents.setZoomFactor(1);
-                    MainWindow.webContents.send("zoom-changed");
-                },
-            },
-            {
-                label: "Zoom In",
-                accelerator: cmdOrAlt + "+Plus",
-                click: () => {
-                    if (MainWindow == null) {
-                        return;
-                    }
-                    const zoomFactor = MainWindow.webContents.getZoomFactor();
-                    MainWindow.webContents.setZoomFactor(zoomFactor * 1.1);
-                    MainWindow.webContents.send("zoom-changed");
-                },
-            },
-            {
-                label: "Zoom Out",
-                accelerator: cmdOrAlt + "+-",
-                click: () => {
-                    if (MainWindow == null) {
-                        return;
-                    }
-                    const zoomFactor = MainWindow.webContents.getZoomFactor();
-                    MainWindow.webContents.setZoomFactor(zoomFactor / 1.1);
-                    MainWindow.webContents.send("zoom-changed");
-                },
-            },
+            { role: "resetZoom" },
+            { role: "zoomIn" },
+            { role: "zoomOut" },
            { type: "separator" },
            { role: "togglefullscreen" },
        ],
@@ -408,9 +375,6 @@ function createMainWindow(clientData: ClientDataType | null) {
    win.on("close", () => {
        MainWindow = null;
    });
-    win.webContents.on("zoom-changed", (e) => {
-        win.webContents.send("zoom-changed");
-    });
    win.webContents.setWindowOpenHandler(({ url, frameName }) => {
        if (url.startsWith("https://docs.waveterm.dev/")) {
            console.log("openExternal docs", url);
@@ -21,7 +21,6 @@ contextBridge.exposeInMainWorld("api", {
    onWCmd: (callback) => ipcRenderer.on("w-cmd", callback),
    onPCmd: (callback) => ipcRenderer.on("p-cmd", callback),
    onRCmd: (callback) => ipcRenderer.on("r-cmd", callback),
-    onZoomChanged: (callback) => ipcRenderer.on("zoom-changed", callback),
    onMetaArrowUp: (callback) => ipcRenderer.on("meta-arrowup", callback),
    onMetaArrowDown: (callback) => ipcRenderer.on("meta-arrowdown", callback),
    onMetaPageUp: (callback) => ipcRenderer.on("meta-pageup", callback),
--- a/Show More
+++ b/Show More