save

.github/workflows/publish.yml

@@ -0,0 +1,30 @@
+name: Publish a new release
+on:
+    release:
+        types: [published]
+env:
+    NODE_VERSION: "21.5.0"
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: ${{env.NODE_VERSION}}
+                  cache: "yarn"
+            - name: Get the version
+              id: get_version
+              run: |
+                  VERSION=$(node -e 'console.log(require("./version.js"))')
+                  echo "WAVETERM_VERSION=${VERSION}" >> "$GITHUB_OUTPUT"
+            - name: Download staged artifacts
+              run: |
+                  . ./buildres/download-staged-artifacts.sh
+              env:
+                  AWS_ACCESS_KEY_ID: "${{ secrets.S3_USERID }}"
+                  AWS_SECRET_ACCESS_KEY: "${{ secrets.S3_SECRETKEY }}"
+                  AWS_DEFAULT_REGION: us-west-2
+            - name: Generate Flatpak manifest
+              run: node buildres/flatpak/generate-flatpak-manifest.js

buildres/flatpak/dev.commandline.waveterm.yml

@@ -0,0 +1,116 @@
+app-id: com.visualstudio.code
+default-branch: stable
+runtime: org.freedesktop.Sdk
+runtime-version: '23.08'
+sdk: org.freedesktop.Sdk
+base: org.electronjs.Electron2.BaseApp
+base-version: '23.08'
+command: code
+tags: [proprietary]
+separate-locales: false
+finish-args:
+  - --require-version=0.10.3
+  - --share=network
+  - --share=ipc
+  - --socket=x11
+  - --socket=pulseaudio
+  - --socket=ssh-auth
+  - --device=all
+  - --allow=devel
+  - --filesystem=host
+  - --env=NPM_CONFIG_GLOBALCONFIG=/app/etc/npmrc
+  - --env=LD_LIBRARY_PATH=/app/lib
+  # required to fix cursor scaling on wayland
+  - --env=XCURSOR_PATH=/run/host/user-share/icons:/run/host/share/icons
+  - --system-talk-name=org.freedesktop.login1
+  - --talk-name=org.freedesktop.Notifications
+  - --talk-name=org.freedesktop.secrets
+  - --talk-name=org.freedesktop.Flatpak
+  - --talk-name=com.canonical.AppMenu.Registrar
+  - --talk-name=com.canonical.AppMenu.Registrar.*
+add-extensions:
+  com.visualstudio.code.tool:
+    directory: tools
+    subdirectories: true
+    version: '23.08'
+    add-ld-path: lib
+    no-autodownload: true
+cleanup:
+  - /include
+  - /lib/pkgconfig
+  - /share/gtk-doc
+  - '*.la'
+modules:
+  - shared-modules/libusb/libusb.json
+
+  - name: vscode
+    buildsystem: simple
+    build-commands:
+      - install -D code.sh /app/bin/code
+      - install -Dm644 vscode_64.png /app/share/icons/hicolor/64x64/apps/com.visualstudio.code.png
+      - install -Dm644 vscode_128.png /app/share/icons/hicolor/128x128/apps/com.visualstudio.code.png
+      - install -Dm644 vscode_256.png /app/share/icons/hicolor/256x256/apps/com.visualstudio.code.png
+      - install -Dm644 vscode_512.png /app/share/icons/hicolor/512x512/apps/com.visualstudio.code.png
+      - install -Dm644 com.visualstudio.code.metainfo.xml -t /app/share/metainfo
+      - install -Dm644 com.visualstudio.code.desktop -t /app/share/applications
+      - install -Dm644 com.visualstudio.code-url-handler.desktop -t /app/share/applications
+      - install -Dm644 com.visualstudio.code-workspace.xml -t /app/share/mime/packages
+      - install -Dm644 npmrc -t /app/etc
+      - install -Dm644 flatpak-warning.txt -t /app/share/vscode
+      - install -D apply_extra -t /app/bin
+      - cp /usr/bin/ar /app/bin
+      - ARCH_TRIPLE=$(gcc --print-multiarch) && cp /usr/lib/${ARCH_TRIPLE}/libbfd-*.so
+        /app/lib
+      - ARCH_TRIPLE=$(gcc --print-multiarch) && ln -s /usr/lib/${ARCH_TRIPLE}/libtinfo.so/app/lib/libtinfo.so.5
+      - mkdir /app/tools
+    sources:
+      - type: script
+        dest-filename: apply_extra
+        commands:
+          - ar x code.deb
+          - tar xf data.tar.xz
+          - mv usr/share/code vscode
+          - rm -r code.deb control.tar.* data.tar.xz debian-binary usr
+      - type: file
+        path: code.sh
+      - type: file
+        path: flatpak-warning.txt
+      - type: file
+        path: npmrc
+      - type: file
+        path: com.visualstudio.code.metainfo.xml
+      - type: file
+        path: com.visualstudio.code.desktop
+      - type: file
+        path: com.visualstudio.code-url-handler.desktop
+      - type: file
+        path: com.visualstudio.code-workspace.xml
+      - type: file
+        path: icons/vscode_64.png
+      - type: file
+        path: icons/vscode_128.png
+      - type: file
+        path: icons/vscode_256.png
+      - type: file
+        path: icons/vscode_512.png
+      - type: extra-data
+        filename: code.deb
+        only-arches: [x86_64]
+        url: <to-replace>
+        sha256: <to-replace>
+        size: <to-replace>
+        x-checker-data:
+          type: electron-updater
+          url: https://dl.waveterm.dev/releases/latest-linux.yml
+          is-main-source: true
+
+  - name: host-spawn
+    buildsystem: simple
+    build-commands:
+      - install -Dm755 host-spawn /app/bin/host-spawn
+    sources:
+      - type: file
+        url: https://github.com/1player/host-spawn/releases/download/1.5.0/host-spawn-x86_64
+        sha256: dbf67e7e111c4fe1edb0c642cbb4193064ca5b384aeb1054fc2befba6ed88b83
+        dest-filename: host-spawn
+        only-arches: [x86_64]

buildres/flatpak/generate-flatpak-manifest.js

@@ -0,0 +1,16 @@
+// Updates the Flatpak manifest with the latest values for the staged artifact
+// Usage: node generate-flatpak-manifest.js <path-to-staging-directory>
+
+const path = require("path");
+const fs = require("fs");
+const yaml = require("yaml");
+
+async function generateFlatpakManifest(stagingDir) {
+    const latestYmlPath = path.join(stagingDir, "latest-linux.yml");
+    const latestYml = yaml.parse(fs.readFileSync(latestYmlPath, "utf8"));
+    const manifestPath = path.join(stagingDir, "dev.commandline.waveterm.yml");
+    const manifestYml = yaml.parse(fs.readFileSync(manifestPath, "utf8"));
+    const latestDeb = latestYml.files.find((file) => file.url.endsWith(".deb"));
+    const latestDebUrl = `https://dl.waveterm.dev/releases/${latestDeb.url}`;
+    const latestDebSha512 = latestDeb.sha512;
+    

package.json

@@ -6,7 +6,7 @@
     },
     "productName": "Wave",
     "description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
-    "version": "0.7.1",
+    "version": "0.7.0",
     "main": "dist/emain.js",
     "license": "Apache-2.0",
     "repository": {

public/themes/default.css

@@ -44,14 +44,10 @@
     --floating-logo-width: 40px;
     --floating-logo-height: var(--screentabs-height);
 
-    /* right sidebar triggers */
-    --floating-right-sidebar-triggers-width-darwin: 50px;
-    --floating-right-sidebar-triggers-width: 40px;
-
     /* global colors */
     --app-bg-color: black;
     --app-accent-color: rgb(88, 193, 66);
-    --app-accent-bg-color: rgba(88, 193, 66, 0.25);
+    --app-accent-bg-color: rgba(88, 193, 66, 0.2);
     --app-error-color: rgb(229, 77, 46);
     --app-warning-color: rgb(224, 185, 86);
     --app-success-color: rgb(78, 154, 6);
@@ -156,6 +152,7 @@
     --line-text-color: rgb(211, 215, 207);
     --line-svg-fill-color: rgb(150, 152, 150);
     --line-svg-hover-fill-color: #eceeec;
+    --line-selected-border-color: rgb(193, 195, 193);
     --line-separator-color: rgb(126, 126, 126);
     --line-error-color: var(--app-error-color);
     --line-warning-color: var(--app-warning-color);
@@ -222,5 +219,5 @@
     --modal-bg-color: var(--app-bg-color);
     --modal-header-bottom-border-color: rgba(241, 246, 243, 0.15);
 
-    --logo-button-hover-bg-color: var(--app-accent-bg-color);
+    --logo-button-hover-bg-color: #1e1e1e;
 }

public/themes/light.css

@@ -23,7 +23,6 @@
 
     /* tab color */
     --tab-white: rgb(0, 0, 0, 0.6);
-    --tab-mint: rgb(70, 235, 156);
 
     /* button colors */
     --button-text-color: rgb(50, 50, 50); /* Dark gray for light theme */
@@ -73,4 +72,6 @@
 
     /* toggle colors */
     --toggle-thumb-color: var(--app-bg-color);
+
+    --logo-button-hover-bg-color: #f0f0f0;
 }

src/app/app.less

@@ -302,25 +302,6 @@ a.a-block {
     }
 }
 
-.right-sidebar-triggers {
-    position: absolute;
-    z-index: 25;
-    right: 0px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    pointer-events: none;
-    height: 38px;
-    padding: 0 5px;
-
-    .right-sidebar-trigger {
-        cursor: pointer;
-        user-select: none;
-        -webkit-app-region: no-drag;
-        pointer-events: all;
-    }
-}
-
 .copied-indicator {
     position: absolute;
     top: 0;

src/app/app.tsx

@@ -16,12 +16,10 @@ import { BookmarksView } from "./bookmarks/bookmarks";
 import { HistoryView } from "./history/history";
 import { ConnectionsView } from "./connections/connections";
 import { ClientSettingsView } from "./clientsettings/clientsettings";
-import { MainSideBar } from "./sidebar/main";
-import { RightSideBar } from "./sidebar/right";
-import { DisconnectedModal, ClientStopModal } from "@/modals";
-import { ModalsProvider } from "@/modals/provider";
-import { Button } from "@/elements";
-import { ErrorBoundary } from "@/common/error/errorboundary";
+import { MainSideBar } from "./sidebar/sidebar";
+import { DisconnectedModal, ClientStopModal } from "./common/modals";
+import { ModalsProvider } from "./common/modals/provider";
+import { ErrorBoundary } from "./common/error/errorboundary";
 import cn from "classnames";
 import "./app.less";
 
@@ -67,17 +65,9 @@ class App extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    openMainSidebar() {
-        const mainSidebarModel = GlobalModel.mainSidebarModel;
-        const width = mainSidebarModel.getWidth(true);
-        mainSidebarModel.saveState(width, false);
-    }
-
-    @boundMethod
-    openRightSidebar() {
-        const rightSidebarModel = GlobalModel.rightSidebarModel;
-        const width = rightSidebarModel.getWidth(true);
-        rightSidebarModel.saveState(width, false);
+    openSidebar() {
+        const width = GlobalModel.mainSidebarModel.getWidth(true);
+        GlobalCommandRunner.clientSetSidebar(width, false);
     }
 
     render() {
@@ -120,36 +110,23 @@ class App extends React.Component<{}, {}> {
         }
         // used to force a full reload of the application
         const renderVersion = GlobalModel.renderVersion.get();
-        const mainSidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
-        const rightSidebarCollapsed = GlobalModel.rightSidebarModel.getCollapsed();
-        const activeMainView = GlobalModel.activeMainView.get();
+        const sidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
         const lightDarkClass = GlobalModel.isThemeDark() ? "is-dark" : "is-light";
         return (
             <div
                 key={"version-" + renderVersion}
                 id="main"
-                className={cn(
-                    "platform-" + platform,
-                    { "mainsidebar-collapsed": mainSidebarCollapsed, "rightsidebar-collapsed": rightSidebarCollapsed },
-                    lightDarkClass
-                )}
+                className={cn("platform-" + platform, { "sidebar-collapsed": sidebarCollapsed }, lightDarkClass)}
                 onContextMenu={this.handleContextMenu}
             >
-                <If condition={mainSidebarCollapsed}>
+                <If condition={sidebarCollapsed}>
                     <div key="logo-button" className="logo-button-container">
                         <div className="logo-button-spacer" />
-                        <div className="logo-button" onClick={this.openMainSidebar}>
+                        <div className="logo-button" onClick={this.openSidebar}>
                             <img src="public/logos/wave-logo.png" alt="logo" />
                         </div>
                     </div>
                 </If>
-                <If condition={GlobalModel.isDev && rightSidebarCollapsed && activeMainView == "session"}>
-                    <div className="right-sidebar-triggers">
-                        <Button className="secondary ghost right-sidebar-trigger" onClick={this.openRightSidebar}>
-                            <i className="fa-sharp fa-regular fa-lightbulb"></i>
-                        </Button>
-                    </div>
-                </If>
                 <div ref={this.mainContentRef} className="main-content">
                     <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
                     <ErrorBoundary>
@@ -160,7 +137,6 @@ class App extends React.Component<{}, {}> {
                         <ConnectionsView model={remotesModel} />
                         <ClientSettingsView model={remotesModel} />
                     </ErrorBoundary>
-                    <RightSideBar parentRef={this.mainContentRef} clientData={clientData} />
                 </div>
                 <ModalsProvider />
             </div>

src/app/bookmarks/bookmarks.tsx

@@ -22,59 +22,6 @@ type BookmarkProps = {
     bookmark: BookmarkType;
 };
 
-class BookmarkKeybindings extends React.Component<{}, {}> {
-    @boundMethod
-    componentDidMount(): void {
-        let keybindManager = GlobalModel.keybindManager;
-        let bookmarksModel = GlobalModel.bookmarksModel;
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:cancel", (waveEvent) => {
-            bookmarksModel.handleUserClose();
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:deleteItem", (waveEvent) => {
-            bookmarksModel.handleUserDelete();
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectAbove", (waveEvent) => {
-            bookmarksModel.handleUserNavigate(-1);
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectBelow", (waveEvent) => {
-            bookmarksModel.handleUserNavigate(1);
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectPageAbove", (waveEvent) => {
-            bookmarksModel.handleUserNavigate(-10);
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectPageBelow", (waveEvent) => {
-            bookmarksModel.handleUserNavigate(10);
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "generic:confirm", (waveEvent) => {
-            bookmarksModel.handleUserConfirm();
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "bookmarks:edit", (waveEvent) => {
-            bookmarksModel.handleUserEdit();
-            return true;
-        });
-        keybindManager.registerKeybinding("mainview", "bookmarks", "bookmarks:copy", (waveEvent) => {
-            bookmarksModel.handleUserCopy();
-            return true;
-        });
-    }
-
-    @boundMethod
-    componentWillUnmount() {
-        GlobalModel.keybindManager.unregisterDomain("bookmarks");
-    }
-
-    render() {
-        return null;
-    }
-}
-
 @mobxReact.observer
 class Bookmark extends React.Component<BookmarkProps, {}> {
     @boundMethod
@@ -247,9 +194,6 @@ class BookmarksView extends React.Component<{}, {}> {
         let bookmark: BookmarkType = null;
         return (
             <MainView className="bookmarks-view" title="Bookmarks" onClose={this.handleClose}>
-                <If condition={!isHidden}>
-                    <BookmarkKeybindings></BookmarkKeybindings>
-                </If>
                 <div className="bookmarks-list">
                     <For index="idx" each="bookmark" of={bookmarks}>
                         <Bookmark key={bookmark.bookmarkid} bookmark={bookmark} />

src/app/common/elements/button.less

@@ -5,6 +5,7 @@
     font: inherit;
     cursor: pointer;
     outline: inherit;
+
     display: flex;
     padding: 6px 16px;
     align-items: center;
@@ -14,8 +15,7 @@
     line-height: 1.5;
 
     &.primary {
-        color: var(--form-element-text-color);
-        background: var(--form-element-primary-color);
+        background: none;
 
         i {
             fill: var(--form-element-primary-color);
@@ -31,12 +31,11 @@
         }
 
         &.outlined {
-            background: none;
             border: 1px solid var(--form-element-primary-color);
         }
 
         &.ghost {
-            background: none;
+            // Styles for .ghost are already defined above
         }
 
         &:hover {
@@ -47,9 +46,6 @@
     &.secondary {
         color: var(--form-element-text-color);
         background: none;
-        color: var(--form-element-text-color);
-        background: var(--form-element-secondary-color);
-        box-shadow: none;
 
         &.solid {
             color: var(--form-element-text-color);
@@ -58,12 +54,10 @@
         }
 
         &.outlined {
-            background: none;
             border: 1px solid var(--form-element-secondary-color);
         }
 
         &.ghost {
-            background: none;
             padding: 6px 10px;
 
             i {

src/app/common/elements/button.tsx

@@ -1,15 +1,24 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
 import * as React from "react";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 
 import "./button.less";
 
+type ButtonVariantType = "outlined" | "solid" | "ghost";
+type ButtonThemeType = "primary" | "secondary";
+
 interface ButtonProps {
+    theme?: ButtonThemeType;
     children: React.ReactNode;
     onClick?: () => void;
     disabled?: boolean;
+    variant?: ButtonVariantType;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
+    color?: string;
     style?: React.CSSProperties;
     autoFocus?: boolean;
     className?: string;
@@ -18,8 +27,10 @@ interface ButtonProps {
 
 class Button extends React.Component<ButtonProps> {
     static defaultProps = {
+        theme: "primary",
+        variant: "solid",
+        color: "",
         style: {},
-        className: "primary",
     };
 
     @boundMethod
@@ -30,11 +41,31 @@ class Button extends React.Component<ButtonProps> {
     }
 
     render() {
-        const { leftIcon, rightIcon, children, disabled, style, autoFocus, termInline, className } = this.props;
+        const {
+            leftIcon,
+            rightIcon,
+            theme,
+            children,
+            disabled,
+            variant,
+            color,
+            style,
+            autoFocus,
+            termInline,
+            className,
+        } = this.props;
 
         return (
             <button
-                className={cn("wave-button", { disabled }, { "term-inline": termInline }, className)}
+                className={cn(
+                    "wave-button",
+                    theme,
+                    variant,
+                    color,
+                    { disabled: disabled },
+                    { "term-inline": termInline },
+                    className
+                )}
                 onClick={this.handleClick}
                 disabled={disabled}
                 style={style}

src/app/common/elements/iconbutton.tsx

@@ -0,0 +1,21 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import { Button } from "./button";
+class IconButton extends Button {
+    render() {
+        const { children, theme, variant = "solid", ...rest } = this.props;
+        const className = `wave-button icon-button ${theme} ${variant}`;
+
+        return (
+            <button {...rest} className={className}>
+                {children}
+            </button>
+        );
+    }
+}
+
+export default IconButton;
+
+export { IconButton };

src/app/common/elements/index.tsx

@@ -3,6 +3,7 @@ export { Checkbox } from "./checkbox";
 export { CmdStrCode } from "./cmdstrcode";
 export { renderCmdText } from "./cmdtext";
 export { Dropdown } from "./dropdown";
+export { IconButton } from "./iconbutton";
 export { InlineSettingsTextEdit } from "./inlinesettingstextedit";
 export { InputDecoration } from "./inputdecoration";
 export { LinkButton } from "./linkbutton";

src/app/common/elements/mainview.less

@@ -9,10 +9,6 @@
         display: none;
     }
 
-    .header-container {
-        border-bottom: 1px solid var(--app-border-color);
-    }
-
     .header {
         -webkit-app-region: drag;
         display: flex;
@@ -22,6 +18,7 @@
         vertical-align: middle;
         padding: 0 10px 0 10px;
         margin: 0;
+        border-bottom: 1px solid var(--app-border-color);
 
         .title {
             font-size: var(--title-font-size);
@@ -45,10 +42,10 @@
 
 // This ensures the tab bar does not collide with the floating logo. The floating logo sits above the sidebar when it is not collapsed, so no additional margin is needed in that case.
 // More margin is given on macOS to account for the traffic light buttons
-#main.platform-darwin.mainsidebar-collapsed .header-container {
-    padding-left: var(--floating-logo-width-darwin);
+#main.platform-darwin.sidebar-collapsed .header {
+    margin-left: var(--floating-logo-width-darwin);
 }
 
-#main:not(.platform-darwin).mainsidebar-collapsed .header-container {
-    padding-left: var(--floating-logo-width);
+#main:not(.platform-darwin).sidebar-collapsed .header {
+    margin-left: var(--floating-logo-width);
 }

src/app/common/elements/mainview.tsx

@@ -23,7 +23,7 @@ class MainView extends React.Component<{
                 className={cn("mainview", this.props.className)}
                 style={{ maxWidth: `calc(100vw - ${maxWidthSubtractor}px)` }}
             >
-                <div className="header-container">
+                <div className="header-container bottom-border">
                     <header className="header">
                         <div className="title text-primary">{this.props.title}</div>
                         <div className="close-div hoverEffect" title="Close (Escape)" onClick={this.props.onClose}>

src/app/common/elements/modal.tsx

@@ -6,6 +6,7 @@ import * as mobx from "mobx";
 import { If } from "tsx-control-statements/components";
 import ReactDOM from "react-dom";
 import { Button } from "./button";
+import { IconButton } from "./iconbutton";
 
 import "./modal.less";
 
@@ -18,9 +19,9 @@ const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, title }) => (
     <div className="wave-modal-header">
         {<div className="wave-modal-title">{title}</div>}
         <If condition={onClose}>
-            <Button className="secondary ghost" onClick={onClose}>
+            <IconButton theme="secondary" variant="ghost" onClick={onClose}>
                 <i className="fa-sharp fa-solid fa-xmark"></i>
-            </Button>
+            </IconButton>
         </If>
     </div>
 );
@@ -35,15 +36,11 @@ interface ModalFooterProps {
 const ModalFooter: React.FC<ModalFooterProps> = ({ onCancel, onOk, cancelLabel = "Cancel", okLabel = "Ok" }) => (
     <div className="wave-modal-footer">
         {onCancel && (
-            <Button className="secondary" onClick={onCancel}>
+            <Button theme="secondary" onClick={onCancel}>
                 {cancelLabel}
             </Button>
         )}
-        {onOk && (
-            <Button className="primary" onClick={onOk}>
-                {okLabel}
-            </Button>
-        )}
+        {onOk && <Button onClick={onOk}>{okLabel}</Button>}
     </div>
 );
 

src/app/common/elements/resizablesidebar.tsx

@@ -6,7 +6,7 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
-import { GlobalCommandRunner, SidebarModel } from "@/models";
+import { GlobalModel, GlobalCommandRunner } from "@/models";
 import { MagicLayout } from "@/app/magiclayout";
 
 import "./resizablesidebar.less";
@@ -14,7 +14,6 @@ import "./resizablesidebar.less";
 interface ResizableSidebarProps {
     parentRef: React.RefObject<HTMLElement>;
     position: "left" | "right";
-    model: SidebarModel;
     enableSnap?: boolean;
     className?: string;
     children?: (toggleCollapsed: () => void) => React.ReactNode;
@@ -33,7 +32,7 @@ class ResizableSidebar extends React.Component<ResizableSidebarProps> {
     startResizing(event: React.MouseEvent<HTMLDivElement>) {
         event.preventDefault();
 
-        const { parentRef, position, model } = this.props;
+        const { parentRef, position } = this.props;
         const parentRect = parentRef.current?.getBoundingClientRect();
 
         if (!parentRect) return;
@@ -44,16 +43,17 @@ class ResizableSidebar extends React.Component<ResizableSidebarProps> {
             this.startX = event.clientX - parentRect.left;
         }
 
-        const collapsed = model.getCollapsed();
+        const mainSidebarModel = GlobalModel.mainSidebarModel;
+        const collapsed = mainSidebarModel.getCollapsed();
 
-        this.resizeStartWidth = model.getWidth();
+        this.resizeStartWidth = mainSidebarModel.getWidth();
         document.addEventListener("mousemove", this.onMouseMove);
         document.addEventListener("mouseup", this.stopResizing);
 
         document.body.style.cursor = "col-resize";
         mobx.action(() => {
-            model.setTempWidthAndTempCollapsed(this.resizeStartWidth, collapsed);
-            model.isDragging.set(true);
+            mainSidebarModel.setTempWidthAndTempCollapsed(this.resizeStartWidth, collapsed);
+            mainSidebarModel.isDragging.set(true);
         })();
     }
 
@@ -61,10 +61,11 @@ class ResizableSidebar extends React.Component<ResizableSidebarProps> {
     onMouseMove(event: MouseEvent) {
         event.preventDefault();
 
-        const { parentRef, enableSnap, position, model } = this.props;
+        const { parentRef, enableSnap, position } = this.props;
         const parentRect = parentRef.current?.getBoundingClientRect();
+        const mainSidebarModel = GlobalModel.mainSidebarModel;
 
-        if (!model.isDragging.get() || !parentRect) return;
+        if (!mainSidebarModel.isDragging.get() || !parentRect) return;
 
         let delta: number, newWidth: number;
 
@@ -99,27 +100,34 @@ class ResizableSidebar extends React.Component<ResizableSidebarProps> {
 
             if (newWidth - dragResistance > minWidth && newWidth < snapPoint && dragDirection == "+") {
                 newWidth = snapPoint;
-                model.setTempWidthAndTempCollapsed(newWidth, false);
+                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, false);
             } else if (newWidth + dragResistance < snapPoint && dragDirection == "-") {
                 newWidth = minWidth;
-                model.setTempWidthAndTempCollapsed(newWidth, true);
+                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, true);
             } else if (newWidth > snapPoint) {
-                model.setTempWidthAndTempCollapsed(newWidth, false);
+                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, false);
             }
         } else {
             if (newWidth <= MagicLayout.MainSidebarMinWidth) {
-                model.setTempWidthAndTempCollapsed(newWidth, true);
+                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, true);
             } else {
-                model.setTempWidthAndTempCollapsed(newWidth, false);
+                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, false);
             }
         }
     }
 
     @boundMethod
     stopResizing() {
-        const { model } = this.props;
+        let mainSidebarModel = GlobalModel.mainSidebarModel;
 
-        model.saveState(model.tempWidth.get(), model.tempCollapsed.get());
+        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);
@@ -128,18 +136,19 @@ class ResizableSidebar extends React.Component<ResizableSidebarProps> {
 
     @boundMethod
     toggleCollapsed() {
-        const { model } = this.props;
+        const mainSidebarModel = GlobalModel.mainSidebarModel;
 
-        const tempCollapsed = model.getCollapsed();
-        const width = model.getWidth(true);
-        model.setTempWidthAndTempCollapsed(width, !tempCollapsed);
-        model.saveState(width, !tempCollapsed);
+        const tempCollapsed = mainSidebarModel.getCollapsed();
+        const width = mainSidebarModel.getWidth(true);
+        mainSidebarModel.setTempWidthAndTempCollapsed(width, !tempCollapsed);
+        GlobalCommandRunner.clientSetSidebar(width, !tempCollapsed);
     }
 
     render() {
-        const { className, children, model } = this.props;
-        const width = model.getWidth();
-        const isCollapsed = model.getCollapsed();
+        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, minWidth: width }}>

src/app/common/modals/alert.tsx

@@ -54,7 +54,7 @@ class AlertModal extends React.Component<{}, {}> {
                 </div>
                 <div className="wave-modal-footer">
                     <If condition={isConfirm}>
-                        <Button className="secondary" onClick={this.closeModal}>
+                        <Button theme="secondary" onClick={this.closeModal}>
                             Cancel
                         </Button>
                         <Button autoFocus={true} onClick={this.handleOK}>

src/app/common/modals/clientstop.tsx

@@ -31,7 +31,7 @@ class ClientStopModal extends React.Component<{}, {}> {
                             </If>
                             <div>
                                 <Button
-                                    className="secondary"
+                                    theme="secondary"
                                     onClick={this.refreshClient}
                                     leftIcon={<i className="fa-sharp fa-solid fa-rotate"></i>}
                                 >

src/app/common/modals/disconnected.tsx

@@ -75,7 +75,7 @@ class DisconnectedModal extends React.Component<{}, {}> {
                 </div>
                 <div className="wave-modal-footer">
                     <Button
-                        className="secondary"
+                        theme="secondary"
                         onClick={this.tryReconnect}
                         leftIcon={
                             <span className="icon">
@@ -86,7 +86,7 @@ class DisconnectedModal extends React.Component<{}, {}> {
                         Try Reconnect
                     </Button>
                     <Button
-                        className="secondary"
+                        theme="secondary"
                         onClick={this.restartServer}
                         leftIcon={<i className="fa-sharp fa-solid fa-triangle-exclamation"></i>}
                     >