cmdinput keybindings (#627)

Contains the implementation of the block store

In this pr is a simple way to send and receive data through a database

I have implemented the base functionality as well as quite a few tests
to make sure that everything works
 
There are a few methods that have yet to be implemented, but
theoretically they should be implemented as calls to the other
functions, ie append should just be a call to WriteAt

This doesn't affect anything yet so it can safely be merged whenever. I
don't want this pr to stagnate like file view, so I'm happy to write
multiple prs for this

.github/workflows/regression.yml

@@ -1,26 +1,65 @@
 name: TestDriver.ai Regression Testing
-
 on:
   push:
-    branches: ["main"]
+    branches:
+      - main
   pull_request:
-    branches: ["main"]
+    branches:
+      - main
   schedule:
-    - cron: "0 21 * * *" # every day at 9pm
-  workflow_dispatch:
+    - cron: 0 21 * * *
+  workflow_dispatch: null
+  
+permissions:
+  contents: read  # To allow the action to read repository contents
+  pull-requests: write  # To allow the action to create/update pull request comments
 
 jobs:
   test:
-    name: "TestDriver"
+    name: TestDriver
     runs-on: ubuntu-latest
     steps:
       - uses: dashcamio/testdriver@main
         id: testdriver
-        # note that .testdriver/prerun.sh runs before this, so the app has launched already
         with:
+          version: v2.10.2
+          prerun: |
+            rm ~/Desktop/WITH-LOVE-FROM-AMERICA.txt
+            cd ~/actions-runner/_work/testdriver/testdriver/
+            brew install go
+            brew tap scripthaus-dev/scripthaus
+            brew install scripthaus
+            npm install -g yarn
+            scripthaus run build-backend
+            echo "Yarn"
+            yarn
+            echo "Rebuild"
+            scripthaus run electron-rebuild
+            echo "Webpack"
+            scripthaus run webpack-build
+            echo "Starting Electron"
+            scripthaus run electron 1>/dev/null 2>&1 &
+            echo "Electron Done"
+            exit
           prompt: |
-            2. click "Continue"
-            2. focus the Wave input with the keyboard shorcut Command + I
-            3. type 'ls' into the input
-            4. press return
-            5. validate Wave shows the result of 'ls'
+            1. wait 10 seconds
+            1. click "Continue"
+            1. click "Create new tab"
+            1. validate that overlapping text does not appear in the application
+            1. focus the Wave input with the keyboard shorcut Command + I
+            1. type 'ls' into the input
+            1. press return
+            1. validate Wave shows the result of 'ls'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: peter-evans/create-or-update-comment@v4
+        if: ${{always()}}
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            ## TestDriver Summary
+            ${{ steps.testdriver.outputs.markdown }}
+            ${{ steps.testdriver.outputs.summary }}
+          reactions: |
+            +1
+            -1

README.md

@@ -9,6 +9,8 @@
 
 # Wave Terminal
 
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fwavetermdev%2Fwaveterm.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fwavetermdev%2Fwaveterm?ref=badge_shield)
+
 Wave is an open-source AI-native terminal built for seamless workflows.
 
 Wave isn't just another terminal emulator; it's a rethink on how terminals are built. Wave combines command line with the power of the open web to help veteran CLI users and new developers alike.
@@ -56,3 +58,7 @@ Find more information in our [Contributions Guide](CONTRIBUTING.md), which inclu
 
 -   [Ways to contribute](CONTRIBUTING.md#contributing-to-wave-terminal)
 -   [Contribution guidelines](CONTRIBUTING.md#before-you-start)
+
+## License
+
+Wave Terminal is licensed under the Apache-2.0 License. For more information on our dependencies, see [here](./acknowledgements/README.md).

acknowledgements/README.md

@@ -1,20 +1,5 @@
 # Open-Source Acknowledgements
 
-We make use of many amazing open-source projects to build Wave Terminal. Here are the links to the latest acknowledgements for each of our components, including license disclaimers for each dependency:
+We make use of many amazing open-source projects to build Wave Terminal. We automatically generate license reports via FOSSA to comply with the license distribution requirements of our dependencies. Below is a summary of the licenses used by our product. Clicking on the image will take you to the full report on FOSSA's website.
 
-- [Frontend](./disclaimers/frontend.md)
-- [Backend](./disclaimers/backend.md)
-
-## Generating license disclaimers
-
-The license disclaimers for the backend are generated using the [go-licenses](https://github.com/google/go-licenses) tool. We supply a template file ([`go_licenses_report.tpl`](./go_licenses_report.tpl)) to generate a pretty print of the disclaimers for each dependency. This outputs to the file [`backend.md`](./disclaimers/backend.md).
-
-The license disclaimers for the frontend are generated using the [`yarn licenses` tool](https://classic.yarnpkg.com/lang/en/docs/cli/licenses/). This outputs to the file [`frontend.md`](./disclaimers/frontend.md).
-
-These disclaimer files linked above will be periodically regenerated to reflect new dependencies.
-
-The [`scripthaus.md` file](../scripthaus.md) contains scripts to generate the disclaimers and package them. To manually generate the disclaimers, run the following from the repository root directory:
-
-```bash
-scripthaus run generate-license-disclaimers
-```
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fwavetermdev%2Fwaveterm.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fwavetermdev%2Fwaveterm?ref=badge_large)

acknowledgements/go_licenses_report.tpl

@@ -1,16 +0,0 @@
-# Wave Terminal Backend Acknowledgements
-
-The following sets forth attribution notices for third party software that may be contained in portions of the Wave Terminal product.
-{{ range . }}
-## {{ .Name }}
-
-* Name: {{ .Name }}
-* Version: {{ .Version }}
-* License: [{{ .LicenseName }}]({{ .LicenseURL }})
-
-```txt
-{{ .LicenseText }}
-```
-
------
-{{ end }}

assets/default-keybindings.json

@@ -107,12 +107,12 @@
     {
       "command": "app:openConnectionsView", 
       "keys": [],
-      "commandStr": "/mainview connections"
+      "commandStr": ["/mainview connections"]
     },
     {
       "command": "app:openSettingsView", 
       "keys": [],
-      "commandStr": "/mainview clientsettings"
+      "commandStr": ["/mainview clientsettings"]
     },
     {
       "command": "app:newTab",
@@ -149,48 +149,39 @@
     },
     {
       "command": "app:selectTab-1",
-      "keys": ["Cmd:1"],
-      "commandStr":"/screen 1"
+      "keys": ["Cmd:1"]
     },
     {
       "command": "app:selectTab-2",
-      "keys": ["Cmd:2"],
-      "commandStr":"/screen 2"
+      "keys": ["Cmd:2"]
     },
     {
       "command": "app:selectTab-3",
-      "keys": ["Cmd:3"],
-      "commandStr":"/screen 3"
+      "keys": ["Cmd:3"]
     },
     {
       "command": "app:selectTab-4",
-      "keys": ["Cmd:4"],
-      "commandStr":"/screen 4"
+      "keys": ["Cmd:4"]
     },
     {
       "command": "app:selectTab-5",
-      "keys": ["Cmd:5"],
-      "commandStr":"/screen 5"
+      "keys": ["Cmd:5"]
     },
     {
       "command": "app:selectTab-6",
-      "keys": ["Cmd:6"],
-      "commandStr":"/screen 6"
+      "keys": ["Cmd:6"]
     },
     {
       "command": "app:selectTab-7",
-      "keys": ["Cmd:7"],
-      "commandStr":"/screen 7"
+      "keys": ["Cmd:7"]
     },
     {
       "command": "app:selectTab-8",
-      "keys": ["Cmd:8"],
-      "commandStr":"/screen 8"
+      "keys": ["Cmd:8"]
     },
     {
       "command": "app:selectTab-9",
-      "keys": ["Cmd:9"],
-      "commandStr":"/screen 9"
+      "keys": ["Cmd:9"]
     },
     {
       "command": "app:selectTabLeft",
@@ -202,48 +193,39 @@
     },
     {
       "command": "app:selectWorkspace-1",
-      "keys": ["Cmd:Ctrl:1"],
-      "commandStr": "/session 1"
+      "keys": ["Cmd:Ctrl:1"]
     },
     {
       "command": "app:selectWorkspace-2",
-      "keys": ["Cmd:Ctrl:2"],
-      "commandStr": "/session 2"
+      "keys": ["Cmd:Ctrl:2"]
     },
     {
       "command": "app:selectWorkspace-3",
-      "keys": ["Cmd:Ctrl:3"],
-      "commandStr": "/session 3"
+      "keys": ["Cmd:Ctrl:3"]
     },
     {
       "command": "app:selectWorkspace-4",
-      "keys": ["Cmd:Ctrl:4"],
-      "commandStr": "/session 4"
+      "keys": ["Cmd:Ctrl:4"]
     },
     {
       "command": "app:selectWorkspace-5",
-      "keys": ["Cmd:Ctrl:5"],
-      "commandStr": "/session 5"
+      "keys": ["Cmd:Ctrl:5"]
     },
     {
       "command": "app:selectWorkspace-6",
-      "keys": ["Cmd:Ctrl:6"],
-      "commandStr": "/session 6"
+      "keys": ["Cmd:Ctrl:6"]
     },
     {
       "command": "app:selectWorkspace-7",
-      "keys": ["Cmd:Ctrl:7"],
-      "commandStr": "/session 7"
+      "keys": ["Cmd:Ctrl:7"]
     },
     {
       "command": "app:selectWorkspace-8",
-      "keys": ["Cmd:Ctrl:8"],
-      "commandStr": "/session 8"
+      "keys": ["Cmd:Ctrl:8"]
     },
     {
       "command": "app:selectWorkspace-9",
-      "keys": ["Cmd:Ctrl:9"],
-      "commandStr": "/session 9"
+      "keys": ["Cmd:Ctrl:9"]
     },
     {
       "command": "app:toggleSidebar",
@@ -256,7 +238,7 @@
     {
       "command": "app:openBookmarksView",
       "keys": ["Cmd:b"],
-      "commandStr": "/bookmarks:show"
+      "commandStr": ["/bookmarks:show"]
     },
     {
       "command": "bookmarks:edit",
@@ -301,7 +283,7 @@
     {
       "command": "cmdinput:openHistory",
       "keys": ["Ctrl:r"],
-      "commandStr": "/history"
+      "commandStr": ["/history"]
     },
     {
       "command": "cmdinput:openAIChat",

package.json

@@ -6,7 +6,7 @@
     },
     "productName": "Wave",
     "description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
-    "version": "0.7.2",
+    "version": "0.7.3",
     "main": "dist/emain.js",
     "license": "Apache-2.0",
     "repository": {
@@ -18,6 +18,7 @@
         "appId": "dev.commandline.waveterm"
     },
     "dependencies": {
+        "@lexical/react": "^0.14.3",
         "@monaco-editor/react": "^4.5.1",
         "@table-nav/core": "^0.0.7",
         "@table-nav/react": "^0.0.7",
@@ -31,9 +32,10 @@
         "electron-squirrel-startup": "^1.0.0",
         "electron-updater": "^6.1.8",
         "framer-motion": "^10.16.16",
+        "lexical": "0.14.5",
         "mobx": "6.12",
         "mobx-react": "^7.5.0",
-        "monaco-editor": "^0.44.0",
+        "monaco-editor": "0.48.0",
         "mustache": "^4.2.0",
         "node-fetch": "^3.2.10",
         "overlayscrollbars": "^2.6.1",
@@ -50,8 +52,8 @@
         "uuid": "^9.0.0",
         "winston": "^3.8.2",
         "xterm": "^5.3.0",
-        "xterm-addon-web-links": "^0.9.0",
         "xterm-addon-serialize": "^0.11.0",
+        "xterm-addon-web-links": "^0.9.0",
         "xterm-addon-webgl": "^0.16.0"
     },
     "devDependencies": {
@@ -66,6 +68,7 @@
         "@babel/preset-env": "^7.18.2",
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.17.12",
+        "@electron/rebuild": "^3.6.0",
         "@svgr/webpack": "^8.1.0",
         "@types/classnames": "^2.3.1",
         "@types/electron": "^1.6.10",
@@ -80,8 +83,8 @@
         "babel-loader": "^9.1.3",
         "babel-plugin-jsx-control-statements": "^4.1.2",
         "copy-webpack-plugin": "^12.0.0",
-        "css-loader": "^6.7.1",
-        "electron": "^29.0.1",
+        "css-loader": "^7.1.0",
+        "electron": "^30.0.1",
         "electron-builder": "^24.13.3",
         "electron-builder-squirrel-windows": "^24.13.3",
         "file-loader": "^6.2.0",
@@ -93,7 +96,7 @@
         "prettier": "^2.8.8",
         "raw-loader": "^4.0.2",
         "react-split-it": "^2.0.0",
-        "style-loader": "^3.3.1",
+        "style-loader": "4.0.0",
         "typescript": "^5.0.0",
         "webpack": "^5.73.0",
         "webpack-bundle-analyzer": "^4.10.1",

public/index-dev.html

@@ -13,7 +13,6 @@
         <link rel="stylesheet" href="dist-dev/waveterm.css" />
 
         <link rel="stylesheet" id="theme-stylesheet" href="public/themes/themequery.css" />
-        <link rel="stylesheet" href="public/themes/test.css" />
     </head>
     <body>
         <div id="measure"></div>

public/themes/default.css

@@ -156,7 +156,7 @@
     --table-border-color: rgba(241, 246, 243, 0.15);
     --table-thead-border-top-color: rgba(250, 250, 250, 0.1);
     --table-thead-bright-border-color: rgb(204, 204, 204);
-    --table-thead-bg-color: rgba(250, 250, 250, 0.02);
+    --table-thead-bg-color: rgb(5, 5, 5);
     --table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
     --table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
     --table-tr-selected-bg-color: rgb(34, 34, 34);

public/themes/light.css

@@ -9,8 +9,8 @@
     --app-accent-color: rgb(75, 166, 57);
     --app-accent-bg-color: rgba(75, 166, 57, 0.2);
     --app-text-color: rgb(0, 0, 0);
-    --app-text-primary-color: rgb(0, 0, 0, 0.9);
-    --app-text-secondary-color: rgb(0, 0, 0, 0.7);
+    --app-text-primary-color: rgb(23, 23, 23);
+    --app-text-secondary-color: rgb(76, 76, 76);
     --app-border-color: rgb(139 145 138);
     --app-panel-bg-color: rgb(224, 224, 224);
     --app-panel-bg-color-dev: rgb(224, 224, 224);
@@ -57,6 +57,10 @@
     --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.4);
     --scrollbar-thumb-active-color: rgba(0, 0, 0, 0.5);
 
+    /* table colors */
+    --table-thead-bg-color: rgb(253, 253, 253);
+    --table-tr-selected-bg-color: rgb(216, 216, 216);
+
     /* line color */
     --line-actions-bg-color: rgba(0, 0, 0, 0.1);
     --line-actions-inactive-color: rgba(0, 0, 0, 0.3);

scripthaus.md

@@ -44,7 +44,7 @@ rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
 WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
-WAVESHELL_VERSION=v0.6
+WAVESHELL_VERSION=v0.7
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
 function buildWaveShell {
     (cd waveshell; CGO_ENABLED=0 GOOS=$1 GOARCH=$2 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-$WAVESHELL_VERSION-$1.$2 main-waveshell.go)
@@ -69,7 +69,7 @@ rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
 WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
-WAVESHELL_VERSION=v0.6
+WAVESHELL_VERSION=v0.7
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
 function buildWaveShell {
     (cd waveshell; CGO_ENABLED=0 GOOS=$1 GOARCH=$2 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-$WAVESHELL_VERSION-$1.$2 main-waveshell.go)
@@ -96,7 +96,7 @@ CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflag
 ```bash
 # @scripthaus command fullbuild-waveshell
 set -e
-WAVESHELL_VERSION=v0.6
+WAVESHELL_VERSION=v0.7
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
 function buildWaveShell {
     (cd waveshell; CGO_ENABLED=0 GOOS=$1 GOARCH=$2 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-$WAVESHELL_VERSION-$1.$2 main-waveshell.go)

src/app/app.tsx

@@ -4,10 +4,10 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
+import cn from "classnames";
+
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
-import dayjs from "dayjs";
-import localizedFormat from "dayjs/plugin/localizedFormat";
 import { GlobalModel } from "@/models";
 import { isBlank } from "@/util/util";
 import { WorkspaceView } from "./workspace/workspaceview";
@@ -20,18 +20,17 @@ import { MainSideBar } from "./sidebar/main";
 import { RightSideBar } from "./sidebar/right";
 import { DisconnectedModal, ClientStopModal } from "@/modals";
 import { ModalsProvider } from "@/modals/provider";
-import { Button, TermStyleBlock } from "@/elements";
+import { Button } from "@/elements";
 import { ErrorBoundary } from "@/common/error/errorboundary";
-import { For } from "tsx-control-statements/components";
-import cn from "classnames";
-import "./app.less";
+import { TermStyleList } from "@/elements";
 
-dayjs.extend(localizedFormat);
+import "./app.less";
 
 @mobxReact.observer
 class App extends React.Component<{}, {}> {
     dcWait: OV<boolean> = mobx.observable.box(false, { name: "dcWait" });
     mainContentRef: React.RefObject<HTMLDivElement> = React.createRef();
+    termThemesLoaded: OV<boolean> = mobx.observable.box(false, { name: "termThemesLoaded" });
 
     constructor(props: {}) {
         super(props);
@@ -81,19 +80,11 @@ class App extends React.Component<{}, {}> {
         rightSidebarModel.saveState(width, false);
     }
 
-    getSelector(themeKey: string) {
-        const sessions = GlobalModel.getSessionNames();
-        const screens = GlobalModel.getScreenNames();
-
-        if (themeKey === "main") {
-            return ":root";
-        } else if (themeKey in screens) {
-            return `.main-content [data-screenid="${themeKey}"]`;
-        } else if (themeKey in sessions) {
-            return `.main-content [data-sessionid="${themeKey}"]`;
-        }
-
-        return null;
+    @boundMethod
+    handleTermThemesRendered() {
+        mobx.action(() => {
+            this.termThemesLoaded.set(true);
+        })();
     }
 
     render() {
@@ -106,7 +97,8 @@ class App extends React.Component<{}, {}> {
 
         // 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) {
+        // wait for termThemes as well (this actually means that the "connect" packet has been received)
+        if (clientData == null || GlobalModel.termThemes.get() == null) {
             return null;
         }
 
@@ -134,62 +126,65 @@ class App extends React.Component<{}, {}> {
         if (dcWait) {
             setTimeout(() => this.updateDcWait(false), 0);
         }
+
         // 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 lightDarkClass = GlobalModel.isDarkTheme.get() ? "is-dark" : "is-light";
-        const termTheme = GlobalModel.getTermTheme();
-        const themeKey = null;
-
+        const mainClassName = cn(
+            "platform-" + platform,
+            {
+                "mainsidebar-collapsed": mainSidebarCollapsed,
+                "rightsidebar-collapsed": rightSidebarCollapsed,
+            },
+            lightDarkClass
+        );
         return (
-            <div
-                key={`version- + ${renderVersion}`}
-                id="main"
-                className={cn(
-                    "platform-" + platform,
-                    { "mainsidebar-collapsed": mainSidebarCollapsed, "rightsidebar-collapsed": rightSidebarCollapsed },
-                    lightDarkClass
-                )}
-                onContextMenu={this.handleContextMenu}
-            >
-                <If condition={mainSidebarCollapsed}>
-                    <div key="logo-button" className="logo-button-container">
-                        <div className="logo-button-spacer" />
-                        <div className="logo-button" onClick={this.openMainSidebar}>
-                            <img src="public/logos/wave-logo.png" alt="logo" />
+            <>
+                <TermStyleList onRendered={this.handleTermThemesRendered} />
+                <div
+                    key={`version- + ${renderVersion}`}
+                    id="main"
+                    className={mainClassName}
+                    onContextMenu={this.handleContextMenu}
+                >
+                    <If condition={this.termThemesLoaded.get()}>
+                        <If condition={mainSidebarCollapsed}>
+                            <div key="logo-button" className="logo-button-container">
+                                <div className="logo-button-spacer" />
+                                <div className="logo-button" onClick={this.openMainSidebar}>
+                                    <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-solid fa-sidebar-flip"></i>
+                                </Button>
+                            </div>
+                        </If>
+                        <div ref={this.mainContentRef} className="main-content">
+                            <MainSideBar parentRef={this.mainContentRef} />
+                            <ErrorBoundary>
+                                <PluginsView />
+                                <WorkspaceView />
+                                <HistoryView />
+                                <BookmarksView />
+                                <ConnectionsView model={remotesModel} />
+                                <ClientSettingsView model={remotesModel} />
+                            </ErrorBoundary>
+                            <RightSideBar parentRef={this.mainContentRef} />
                         </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">
-                    <For index="idx" each="themeKey" of={Object.keys(termTheme)}>
-                        <TermStyleBlock
-                            key={themeKey}
-                            themeName={termTheme[themeKey]}
-                            selector={this.getSelector(themeKey)}
-                        />
-                    </For>
-                    <MainSideBar parentRef={this.mainContentRef} />
-                    <ErrorBoundary>
-                        <PluginsView />
-                        <WorkspaceView />
-                        <HistoryView />
-                        <BookmarksView />
-                        <ConnectionsView model={remotesModel} />
-                        <ClientSettingsView model={remotesModel} />
-                    </ErrorBoundary>
-                    <RightSideBar parentRef={this.mainContentRef} />
+                        <ModalsProvider />
+                    </If>
                 </div>
-                <ModalsProvider />
-            </div>
+            </>
         );
     }
 }

src/app/appconst.ts

@@ -46,6 +46,10 @@ export const TabIcons = [
     "heart",
     "file",
 ];
+export const DefaultSudoPwStore = "on";
+export const DefaultSudoPwTimeoutMs = 5 * 60 * 1000;
+
+export const MaxWebSocketSendSize = 64 * 1024 - 100;
 
 // @ts-ignore
 export const VERSION = __WAVETERM_VERSION__;

src/app/clientsettings/clientsettings.less

@@ -1,6 +1,7 @@
 .clientsettings-view {
     .content {
-        padding: 14px 18px 0 30px;
+        padding: 14px 18px 14px 30px;
+        overflow-y: scroll;
     }
 
     .wave-dropdown {

src/app/clientsettings/clientsettings.tsx

@@ -6,7 +6,7 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
-import { GlobalModel, GlobalCommandRunner, RemotesModel, getApi } from "@/models";
+import { GlobalModel, GlobalCommandRunner, RemotesModel } from "@/models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
 import { commandRtnHandler, isBlank } from "@/util/util";
 import { getTermThemes } from "@/util/themeutil";
@@ -14,6 +14,7 @@ import * as appconst from "@/app/appconst";
 
 import "./clientsettings.less";
 import { MainView } from "../common/elements/mainview";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 
 class ClientSettingsKeybindings extends React.Component<{}, {}> {
     componentDidMount() {
@@ -70,19 +71,19 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
             return;
         }
         const prtn = GlobalCommandRunner.setTheme(themeSource, false);
-        getApi().setNativeThemeSource(themeSource);
+        GlobalModel.getElectronApi().setNativeThemeSource(themeSource);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
     handleChangeTermTheme(theme: string): void {
-        // For main terminal theme, the key is main, otherwise it's either
+        // For root terminal theme, the key is root, otherwise it's either
         // sessionId or screenId.
-        const currTheme = GlobalModel.getTermTheme()["main"];
+        const currTheme = GlobalModel.getTermThemeSettings()["root"];
         if (currTheme == theme) {
             return;
         }
-        const prtn = GlobalCommandRunner.setMainTermTheme(theme, false);
+        const prtn = GlobalCommandRunner.setRootTermTheme(theme, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
@@ -106,7 +107,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
             prtn = GlobalCommandRunner.releaseCheckAutoOff(false);
         }
         commandRtnHandler(prtn, this.errorMessage);
-        getApi().changeAutoUpdate(val);
+        GlobalModel.getElectronApi().changeAutoUpdate(val);
     }
 
     getFontSizes(): DropdownItem[] {
@@ -157,6 +158,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         commandRtnHandler(prtn, this.errorMessage);
     }
 
+    @boundMethod
+    inlineUpdateOpenAITimeout(newTimeout: string): void {
+        const prtn = GlobalCommandRunner.setClientOpenAISettings({ timeout: newTimeout });
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
     @boundMethod
     setErrorMessage(msg: string): void {
         mobx.action(() => {
@@ -191,6 +198,35 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         GlobalModel.clientSettingsViewModel.closeView();
     }
 
+    @boundMethod
+    getSudoPwStoreOptions(): DropdownItem[] {
+        const sudoCacheSources: DropdownItem[] = [];
+        sudoCacheSources.push({ label: "On", value: "on" });
+        sudoCacheSources.push({ label: "Off", value: "off" });
+        sudoCacheSources.push({ label: "On Without Timeout", value: "notimeout" });
+        return sudoCacheSources;
+    }
+
+    @boundMethod
+    handleChangeSudoPwStoreConfig(store: string) {
+        const prtn = GlobalCommandRunner.setSudoPwStore(store);
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
+    @boundMethod
+    handleChangeSudoPwTimeoutConfig(timeout: string) {
+        if (Number(timeout) != 0) {
+            const prtn = GlobalCommandRunner.setSudoPwTimeout(timeout);
+            commandRtnHandler(prtn, this.errorMessage);
+        }
+    }
+
+    @boundMethod
+    handleChangeSudoPwClearOnSleepConfig(clearOnSleep: boolean) {
+        const prtn = GlobalCommandRunner.setSudoPwClearOnSleep(clearOnSleep);
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
     render() {
         const isHidden = GlobalModel.activeMainView.get() != "clientsettings";
         if (isHidden) {
@@ -203,14 +239,25 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const maxTokensStr = String(
             openAIOpts.maxtokens == null || openAIOpts.maxtokens == 0 ? 1000 : openAIOpts.maxtokens
         );
+        const aiTimeoutStr = String(
+            openAIOpts.timeout == null || openAIOpts.timeout == 0 ? 10 : openAIOpts.timeout / 1000
+        );
         const curFontSize = GlobalModel.getTermFontSize();
         const curFontFamily = GlobalModel.getTermFontFamily();
         const curTheme = GlobalModel.getThemeSource();
-        const termThemes = getTermThemes(GlobalModel.termThemeOptions.get(), "Wave Default");
-        const currTermTheme = GlobalModel.getTermTheme()["main"] ?? termThemes[0].label;
+        const termThemes = getTermThemes(GlobalModel.termThemes.get(), "Wave Default");
+        const currTermTheme = GlobalModel.getTermThemeSettings()["root"] ?? termThemes[0].label;
+        const curSudoPwStore = GlobalModel.getSudoPwStore();
+        const curSudoPwTimeout = String(GlobalModel.getSudoPwTimeout());
+        const curSudoPwClearOnSleep = GlobalModel.getSudoPwClearOnSleep();
 
         return (
-            <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
+            <MainView
+                className="clientsettings-view"
+                title="Client Settings"
+                onClose={this.handleClose}
+                scrollable={true}
+            >
                 <If condition={!isHidden}>
                     <ClientSettingsKeybindings></ClientSettingsKeybindings>
                 </If>
@@ -342,6 +389,19 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                             />
                         </div>
                     </div>
+                    <div className="settings-field">
+                        <div className="settings-label">AI Timeout (seconds)</div>
+                        <div className="settings-input">
+                            <InlineSettingsTextEdit
+                                placeholder=""
+                                text={aiTimeoutStr}
+                                value={aiTimeoutStr}
+                                onChange={this.inlineUpdateOpenAITimeout}
+                                maxLength={10}
+                                showIcon={true}
+                            />
+                        </div>
+                    </div>
                     <div className="settings-field">
                         <div className="settings-label">Global Hotkey</div>
                         <div className="settings-input">
@@ -353,6 +413,40 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                             />
                         </div>
                     </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Remember Sudo Password</div>
+                        <div className="settings-input">
+                            <Dropdown
+                                className="hotkey-dropdown"
+                                options={this.getSudoPwStoreOptions()}
+                                defaultValue={curSudoPwStore}
+                                onChange={this.handleChangeSudoPwStoreConfig}
+                            />
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Sudo Timeout (Minutes)</div>
+                        <div className="settings-input">
+                            <InlineSettingsTextEdit
+                                placeholder=""
+                                text={curSudoPwTimeout}
+                                value={curSudoPwTimeout}
+                                onChange={this.handleChangeSudoPwTimeoutConfig}
+                                maxLength={6}
+                                showIcon={true}
+                                isNumber={true}
+                            />
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Clear Sudo Password on Sleep</div>
+                        <div className="settings-input">
+                            <Toggle
+                                checked={curSudoPwClearOnSleep}
+                                onChange={this.handleChangeSudoPwClearOnSleepConfig}
+                            />
+                        </div>
+                    </div>
                     <SettingsError errorMessage={this.errorMessage} />
                 </div>
             </MainView>

src/app/common/elements/dropdown.less

@@ -63,11 +63,14 @@
         display: flex;
         min-width: 120px;
         padding: 5px 8px;
-        justify-content: space-between;
         align-items: center;
         align-self: stretch;
         border-radius: 6px;
 
+        i {
+            margin-right: 8px;
+        }
+
         &-highlighted,
         &:hover {
             background: rgba(241, 246, 243, 0.08);

src/app/common/elements/dropdown.tsx

@@ -163,7 +163,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
         if (isOpen) {
             const option = options[highlightedIndex];
             if (option) {
-                this.handleSelect(option.value, undefined);
+                this.handleSelect(option, undefined);
             }
         } else {
             this.toggleDropdown();
@@ -185,18 +185,19 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
     handleKeyDown(event: React.KeyboardEvent) {}
 
     @boundMethod
-    handleSelect(value: string, event?: React.MouseEvent | React.KeyboardEvent) {
+    handleSelect({ value, noop }: DropdownItem, event?: React.MouseEvent | React.KeyboardEvent) {
         const { onChange } = this.props;
         if (event) {
             event.stopPropagation(); // This stops the event from bubbling up to the wrapper
         }
 
-        if (!("value" in this.props)) {
-            this.setState({ internalValue: value });
-        }
         onChange(value);
         this.setState({ isOpen: false, isTouched: true });
         this.unregisterKeybindings();
+
+        if (!("value" in this.props) && !noop) {
+            this.setState({ internalValue: value });
+        }
     }
 
     @boundMethod
@@ -245,10 +246,11 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
                               className={cn("wave-dropdown-item unselectable", {
                                   "wave-dropdown-item-highlighted": index === highlightedIndex,
                               })}
-                              onClick={(e) => this.handleSelect(option.value, e)}
+                              onClick={(e) => this.handleSelect(option, e)}
                               onMouseEnter={() => this.setState({ highlightedIndex: index })}
                               onMouseLeave={() => this.setState({ highlightedIndex: -1 })}
                           >
+                              {option.icon && <span className="wave-dropdown-item-icon">{option.icon}</span>}
                               {option.label}
                           </div>
                       ))}
@@ -256,7 +258,11 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
                   document.getElementById("app")!
               )
             : null;
-
+        let selectedOptionLabelStyle = {};
+        const wrapperClientWidth = this.wrapperRef.current?.clientWidth;
+        if ((wrapperClientWidth ?? 0) > 0) {
+            selectedOptionLabelStyle["width"] = Math.max(wrapperClientWidth - 55, 0);
+        }
         return (
             <div
                 className={cn("wave-dropdown", className, {
@@ -282,7 +288,10 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
                     </div>
                 </If>
                 <div
-                    className={cn("wave-dropdown-display unselectable", { "offset-left": decoration?.startDecoration })}
+                    className={cn("wave-dropdown-display unselectable truncate", {
+                        "offset-left": decoration?.startDecoration,
+                    })}
+                    style={selectedOptionLabelStyle}
                 >
                     {selectedOptionLabel}
                 </div>

src/app/common/elements/index.tsx

@@ -8,7 +8,6 @@ export { InputDecoration } from "./inputdecoration";
 export { LinkButton } from "./linkbutton";
 export { Markdown } from "./markdown";
 export { Modal } from "./modal";
-export { NumberField } from "./numberfield";
 export { PasswordField } from "./passwordfield";
 export { ResizableSidebar } from "./resizablesidebar";
 export { SettingsError } from "./settingserror";
@@ -18,5 +17,5 @@ export { Toggle } from "./toggle";
 export { Tooltip } from "./tooltip";
 export { TabIcon } from "./tabicon";
 export { DatePicker } from "./datepicker";
-export { TermStyleBlock } from "./termstyleblock";
+export { TermStyleList } from "./termstyle";
 export { CopyButton } from "./copybutton";

src/app/common/elements/inlinesettingstextedit.tsx

@@ -22,6 +22,7 @@ class InlineSettingsTextEdit extends React.Component<
         maxLength: number;
         placeholder: string;
         showIcon?: boolean;
+        isNumber?: boolean;
     },
     {}
 > {
@@ -46,6 +47,12 @@ class InlineSettingsTextEdit extends React.Component<
 
     @boundMethod
     handleChangeText(e: any): void {
+        const isNumber = this.props.isNumber ?? false;
+        const value = e.target.value;
+        if (isNumber && value !== "" && !/^\d*$/.test(value)) {
+            return;
+        }
+
         mobx.action(() => {
             this.tempText.set(e.target.value);
         })();
@@ -131,7 +138,7 @@ class InlineSettingsTextEdit extends React.Component<
                         </div>
                         <div className="control">
                             <div
-                                onClick={this.cancelChange}
+                                onMouseDown={this.cancelChange}
                                 title="Cancel (Esc)"
                                 className="button is-prompt-danger is-outlined is-small"
                             >
@@ -142,7 +149,7 @@ class InlineSettingsTextEdit extends React.Component<
                         </div>
                         <div className="control">
                             <div
-                                onClick={this.confirmChange}
+                                onMouseDown={this.confirmChange}
                                 title="Confirm (Enter)"
                                 className="button is-wave-green is-outlined is-small"
                             >