re-render terminal when theme is updated

.github/workflows/build-helper.yml

@@ -45,15 +45,14 @@ jobs:
             - uses: actions/setup-node@v4
               with:
                   node-version: ${{env.NODE_VERSION}}
-            - name: Install yarn
-              run: |
-                  corepack enable
-                  yarn install
+                  cache: "yarn"
             - name: Set Version
               id: set-version
               run: |
                   VERSION=$(node -e 'console.log(require("./version.js"))')
                   echo "WAVETERM_VERSION=${VERSION}" >> "$GITHUB_OUTPUT"
+            - name: Install Yarn Dependencies
+              run: yarn --frozen-lockfile
             - name: Build ${{ matrix.platform }}/${{ matrix.arch }}
               run: scripthaus run ${{ matrix.scripthaus }}
               env:

.github/workflows/regression.yml

@@ -1,66 +1,26 @@
 name: TestDriver.ai Regression Testing
-on:
-    push:
-        branches:
-            - main
-    pull_request:
-        branches:
-            - main
-    schedule:
-        - 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
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+  schedule:
+    - cron: "0 21 * * *" # every day at 9pm
+  workflow_dispatch:
 
 jobs:
-    test:
-        name: TestDriver
-        runs-on: ubuntu-latest
-        steps:
-            - uses: dashcamio/testdriver@main
-              id: testdriver
-              with:
-                    version: v2.12.5
-                  prerun: |
-                      rm ~/Desktop/WITH-LOVE-FROM-AMERICA.txt
-                      cd ~/actions-runner/_work/testdriver/testdriver/
-                      brew install go
-                      brew tap scripthaus-dev/scripthaus
-                      brew install corepack
-                      brew install scripthaus
-                      corepack enable
-                      yarn install
-                      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: |
-                      1. wait 10 seconds
-                      1. click "Get Started"
-                      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
+  test:
+    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:
+          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'

.gitignore

@@ -22,12 +22,3 @@ test/
 .vscode/
 make/
 waveterm-builds.zip
-
-# Yarn Modern
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions

.testdriver/prerun.sh

@@ -3,8 +3,7 @@ cd ~/actions-runner/_work/testdriver/testdriver/
 brew install go
 brew tap scripthaus-dev/scripthaus
 brew install scripthaus
-corepack enable
-yarn install
+npm install -g yarn
 scripthaus run build-backend
 echo "Yarn"
 yarn

.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

BUILD.md

@@ -11,43 +11,35 @@ If you install the production version of Wave, you'll see a semi-transparent gra
 
 Download and install Go (must be at least go 1.18):
 
-```sh
+```
 brew install go
 ```
 
 Download and install ScriptHaus (to run the build commands):
 
-```sh
+```
 brew tap scripthaus-dev/scripthaus
 brew install scripthaus
 ```
 
 You also need a relatively modern nodejs with npm and yarn installed.
 
-Node can be installed from [https://nodejs.org](https://nodejs.org).
+-   Node can be installed from [https://nodejs.org](https://nodejs.org).
+-   npm can install yarn using:
 
-We use Yarn Modern to manage our packages. The recommended way to install Yarn Modern is using Corepack, a new utility shipped by NodeJS that lets you manage your package manager versioning as you would any packages.
-
-If you installed NodeJS from the official feed (via the website or using NVM), this should come preinstalled. If you use Homebrew or some other feed, you may need to manually install Corepack using `npm install -g corepack`.
-
-For more information on Corepack, check out [this link](https://yarnpkg.com/corepack).
-
-Once you've verified that you have Corepack installed, run the following script to set up Yarn for the repository:
-
-```sh
-corepack enable
-yarn install
+```
+npm install -g yarn
 ```
 
 ## Clone the Repo
 
-```sh
+```
 git clone git@github.com:wavetermdev/waveterm.git
 ```
 
 ## Building WaveShell / WaveSrv
 
-```sh
+```
 scripthaus run build-backend
 ```
 
@@ -57,7 +49,7 @@ This builds the Golang backends for Wave. The binaries will put in waveshell/bin
 
 Install modules (we use yarn):
 
-```sh
+```
 yarn
 ```
 
@@ -65,7 +57,7 @@ yarn
 
 We use webpack to build both the React and Electron App Wrapper code. They are both run together using:
 
-```sh
+```
 scripthaus run webpack-watch
 ```
 
@@ -73,7 +65,7 @@ scripthaus run webpack-watch
 
 Now that webpack is running (and watching for file changes) we can finally run the WaveTerm Dev Client! To start the client run:
 
-```sh
+```
 scripthaus run electron
 ```
 

README.md

@@ -9,8 +9,6 @@
 
 # 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.
@@ -58,7 +56,3 @@ 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,5 +1,20 @@
 # Open-Source Acknowledgements
 
-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. For a full report, see [here](https://app.fossa.com/reports/24d13570-624b-4450-8c22-756e513060c9?full=true) (the page may take 20-30s to load).
+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:
 
-[![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)
+- [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
+```

acknowledgements/go_licenses_report.tpl

@@ -0,0 +1,16 @@
+# 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,39 +149,48 @@
     },
     {
       "command": "app:selectTab-1",
-      "keys": ["Cmd:1"]
+      "keys": ["Cmd:1"],
+      "commandStr":"/screen 1"
     },
     {
       "command": "app:selectTab-2",
-      "keys": ["Cmd:2"]
+      "keys": ["Cmd:2"],
+      "commandStr":"/screen 2"
     },
     {
       "command": "app:selectTab-3",
-      "keys": ["Cmd:3"]
+      "keys": ["Cmd:3"],
+      "commandStr":"/screen 3"
     },
     {
       "command": "app:selectTab-4",
-      "keys": ["Cmd:4"]
+      "keys": ["Cmd:4"],
+      "commandStr":"/screen 4"
     },
     {
       "command": "app:selectTab-5",
-      "keys": ["Cmd:5"]
+      "keys": ["Cmd:5"],
+      "commandStr":"/screen 5"
     },
     {
       "command": "app:selectTab-6",
-      "keys": ["Cmd:6"]
+      "keys": ["Cmd:6"],
+      "commandStr":"/screen 6"
     },
     {
       "command": "app:selectTab-7",
-      "keys": ["Cmd:7"]
+      "keys": ["Cmd:7"],
+      "commandStr":"/screen 7"
     },
     {
       "command": "app:selectTab-8",
-      "keys": ["Cmd:8"]
+      "keys": ["Cmd:8"],
+      "commandStr":"/screen 8"
     },
     {
       "command": "app:selectTab-9",
-      "keys": ["Cmd:9"]
+      "keys": ["Cmd:9"],
+      "commandStr":"/screen 9"
     },
     {
       "command": "app:selectTabLeft",
@@ -193,39 +202,48 @@
     },
     {
       "command": "app:selectWorkspace-1",
-      "keys": ["Cmd:Ctrl:1"]
+      "keys": ["Cmd:Ctrl:1"],
+      "commandStr": "/session 1"
     },
     {
       "command": "app:selectWorkspace-2",
-      "keys": ["Cmd:Ctrl:2"]
+      "keys": ["Cmd:Ctrl:2"],
+      "commandStr": "/session 2"
     },
     {
       "command": "app:selectWorkspace-3",
-      "keys": ["Cmd:Ctrl:3"]
+      "keys": ["Cmd:Ctrl:3"],
+      "commandStr": "/session 3"
     },
     {
       "command": "app:selectWorkspace-4",
-      "keys": ["Cmd:Ctrl:4"]
+      "keys": ["Cmd:Ctrl:4"],
+      "commandStr": "/session 4"
     },
     {
       "command": "app:selectWorkspace-5",
-      "keys": ["Cmd:Ctrl:5"]
+      "keys": ["Cmd:Ctrl:5"],
+      "commandStr": "/session 5"
     },
     {
       "command": "app:selectWorkspace-6",
-      "keys": ["Cmd:Ctrl:6"]
+      "keys": ["Cmd:Ctrl:6"],
+      "commandStr": "/session 6"
     },
     {
       "command": "app:selectWorkspace-7",
-      "keys": ["Cmd:Ctrl:7"]
+      "keys": ["Cmd:Ctrl:7"],
+      "commandStr": "/session 7"
     },
     {
       "command": "app:selectWorkspace-8",
-      "keys": ["Cmd:Ctrl:8"]
+      "keys": ["Cmd:Ctrl:8"],
+      "commandStr": "/session 8"
     },
     {
       "command": "app:selectWorkspace-9",
-      "keys": ["Cmd:Ctrl:9"]
+      "keys": ["Cmd:Ctrl:9"],
+      "commandStr": "/session 9"
     },
     {
       "command": "app:toggleSidebar",
@@ -238,7 +256,7 @@
     {
       "command": "app:openBookmarksView",
       "keys": ["Cmd:b"],
-      "commandStr": ["/bookmarks:show"]
+      "commandStr": "/bookmarks:show"
     },
     {
       "command": "bookmarks:edit",
@@ -283,7 +301,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.5",
+    "version": "0.7.2",
     "main": "dist/emain.js",
     "license": "Apache-2.0",
     "repository": {
@@ -18,7 +18,6 @@
         "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",
@@ -26,19 +25,18 @@
         "@tanstack/react-table": "^8.10.3",
         "autobind-decorator": "^2.4.0",
         "base64-js": "^1.5.1",
-        "clsx": "^2.1.1",
+        "classnames": "^2.3.1",
         "dayjs": "^1.11.3",
         "dompurify": "^3.0.2",
         "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.48.0",
+        "monaco-editor": "^0.44.0",
         "mustache": "^4.2.0",
         "node-fetch": "^3.2.10",
-        "overlayscrollbars": "^2.7.3",
+        "overlayscrollbars": "^2.6.1",
         "overlayscrollbars-react": "^0.5.5",
         "papaparse": "^5.4.1",
         "react": "^18.1.0",
@@ -48,13 +46,12 @@
         "remark-gfm": "^4.0.0",
         "sprintf-js": "^1.1.2",
         "throttle-debounce": "^5.0.0",
-        "tinycolor2": "^1.6.0",
         "tsx-control-statements": "^5.1.1",
         "uuid": "^9.0.0",
         "winston": "^3.8.2",
         "xterm": "^5.3.0",
-        "xterm-addon-serialize": "^0.11.0",
         "xterm-addon-web-links": "^0.9.0",
+        "xterm-addon-serialize": "^0.11.0",
         "xterm-addon-webgl": "^0.16.0"
     },
     "devDependencies": {
@@ -69,8 +66,8 @@
         "@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",
         "@types/node": "^20.11.0",
         "@types/papaparse": "^5.3.10",
@@ -83,8 +80,8 @@
         "babel-loader": "^9.1.3",
         "babel-plugin-jsx-control-statements": "^4.1.2",
         "copy-webpack-plugin": "^12.0.0",
-        "css-loader": "^7.1.0",
-        "electron": "^30.0.1",
+        "css-loader": "^6.7.1",
+        "electron": "^29.0.1",
         "electron-builder": "^24.13.3",
         "electron-builder-squirrel-windows": "^24.13.3",
         "file-loader": "^6.2.0",
@@ -96,7 +93,7 @@
         "prettier": "^2.8.8",
         "raw-loader": "^4.0.2",
         "react-split-it": "^2.0.0",
-        "style-loader": "4.0.0",
+        "style-loader": "^3.3.1",
         "typescript": "^5.0.0",
         "webpack": "^5.73.0",
         "webpack-bundle-analyzer": "^4.10.1",
@@ -107,6 +104,5 @@
     },
     "scripts": {
         "postinstall": "electron-builder install-app-deps"
-    },
-    "packageManager": "yarn@4.1.1"
+    }
 }

public/index-dev.html

@@ -13,6 +13,7 @@
         <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: rgb(5, 5, 5);
+    --table-thead-bg-color: rgba(250, 250, 250, 0.02);
     --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(23, 23, 23);
-    --app-text-secondary-color: rgb(76, 76, 76);
+    --app-text-primary-color: rgb(0, 0, 0, 0.9);
+    --app-text-secondary-color: rgb(0, 0, 0, 0.7);
     --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,10 +57,6 @@
     --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.7
+WAVESHELL_VERSION=v0.6
 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.7
+WAVESHELL_VERSION=v0.6
 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.7
+WAVESHELL_VERSION=v0.6
 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)
@@ -115,3 +115,15 @@ scripthaus run fullbuild-waveshell
 echo building wavesrv
 scripthaus run build-wavesrv
 ```
+
+```bash
+# @scripthaus command generate-license-disclaimers
+DISCLAIMER_DIR="./acknowledgements"
+DISCLAIMER_OUTPUT_DIR="$DISCLAIMER_DIR/disclaimers"
+if [ -d "$DISCLAIMER_OUTPUT_DIR" ]; then
+    rm -rf "$DISCLAIMER_OUTPUT_DIR"
+fi
+mkdir "$DISCLAIMER_OUTPUT_DIR"
+go run github.com/google/go-licenses@latest report ./wavesrv/... ./waveshell/... --template "$DISCLAIMER_DIR/go_licenses_report.tpl" --ignore github.com/wavetermdev/waveterm > "$DISCLAIMER_OUTPUT_DIR/backend.md"
+yarn licenses generate-disclaimer > "$DISCLAIMER_OUTPUT_DIR/frontend.md"
+```

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 { clsx } from "clsx";
-
 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,17 +20,18 @@ 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 { Button, TermStyleBlock } from "@/elements";
 import { ErrorBoundary } from "@/common/error/errorboundary";
-import { TermStyleList } from "@/elements";
-
+import { For } from "tsx-control-statements/components";
+import cn from "classnames";
 import "./app.less";
 
+dayjs.extend(localizedFormat);
+
 @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);
@@ -80,11 +81,19 @@ class App extends React.Component<{}, {}> {
         rightSidebarModel.saveState(width, false);
     }
 
-    @boundMethod
-    handleTermThemesRendered() {
-        mobx.action(() => {
-            this.termThemesLoaded.set(true);
-        })();
+    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;
     }
 
     render() {
@@ -97,8 +106,7 @@ 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.
-        // wait for termThemes as well (this actually means that the "connect" packet has been received)
-        if (clientData == null || GlobalModel.termThemes.get() == null) {
+        if (clientData == null) {
             return null;
         }
 
@@ -126,65 +134,62 @@ 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 mainClassName = clsx(
-            "platform-" + platform,
-            {
-                "mainsidebar-collapsed": mainSidebarCollapsed,
-                "rightsidebar-collapsed": rightSidebarCollapsed,
-            },
-            lightDarkClass
-        );
+        const termTheme = GlobalModel.getTermTheme();
+        const themeKey = null;
+
         return (
-            <>
-                <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
+                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" />
                         </div>
-                        <ModalsProvider />
-                    </If>
+                    </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} />
                 </div>
-            </>
+                <ModalsProvider />
+            </div>
         );
     }
 }

src/app/appconst.ts

@@ -46,10 +46,6 @@ 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__;