save

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/build-helper.yml

@@ -46,6 +46,10 @@ jobs:
               with:
                   node-version: ${{env.NODE_VERSION}}
                   cache: "yarn"
+            - name: Install yarn
+              run: |
+                  corepack enable
+                  yarn install
             - name: Set Version
               id: set-version
               run: |

.github/workflows/regression.yml

@@ -1,26 +1,66 @@
 name: TestDriver.ai Regression Testing
-
 on:
-  push:
-    branches: ["main"]
-  pull_request:
-    branches: ["main"]
-  schedule:
-    - cron: "0 21 * * *" # every day at 9pm
-  workflow_dispatch:
+    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
 
 jobs:
-  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'
+    test:
+        name: TestDriver
+        runs-on: ubuntu-latest
+        steps:
+            - uses: dashcamio/testdriver@main
+              id: testdriver
+              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
+                      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 "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

.gitignore

@@ -22,3 +22,5 @@ test/
 .vscode/
 make/
 waveterm-builds.zip
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,50 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+import { webProd, webDev } from "../webpack/webpack.web";
+import { Configuration } from "webpack";
+
+const config: StorybookConfig = {
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        "@storybook/addon-onboarding",
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@chromatic-com/storybook",
+        "@storybook/addon-interactions",
+        "@storybook/addon-webpack5-compiler-swc",
+        "@storybook/addon-styling-webpack",
+    ],
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {},
+    },
+    docs: {
+        autodocs: "tag",
+    },
+    webpackFinal: (config, { configType }) => {
+        let configToMerge = webDev;
+        if (configType === "PRODUCTION") {
+            configToMerge = webProd;
+        }
+        const ret: Configuration = {
+            ...config,
+            entry: configToMerge.entry,
+            mode: configType === "PRODUCTION" ? "production" : "development",
+            module: { ...config.module, rules: [...(config.module?.rules ?? []), ...configToMerge.module.rules] },
+            resolve: {
+                ...config.resolve,
+                extensions: [...(config.resolve?.extensions ?? []), ...configToMerge.resolve.extensions],
+                alias: { ...config.resolve?.alias, ...configToMerge.resolve.alias },
+            },
+            plugins: [...(config.plugins ?? []), ...configToMerge.plugins],
+            devServer: configToMerge.devServer,
+            devtool: configToMerge.devtool,
+            output: {
+                ...config.output,
+                ...configToMerge.output,
+            },
+        };
+        console.log(JSON.stringify(ret, null, 4));
+        return ret;
+    },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;

.testdriver/prerun.sh

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

.yarnrc.yml

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

BUILD.md

@@ -11,13 +11,13 @@ 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
 ```
@@ -27,19 +27,20 @@ You also need a relatively modern nodejs with npm and yarn installed.
 -   Node can be installed from [https://nodejs.org](https://nodejs.org).
 -   npm can install yarn using:
 
-```
-npm install -g yarn
+```sh
+corepack enable
+yarn install
 ```
 
 ## Clone the Repo
 
-```
+```sh
 git clone git@github.com:wavetermdev/waveterm.git
 ```
 
 ## Building WaveShell / WaveSrv
 
-```
+```sh
 scripthaus run build-backend
 ```
 
@@ -49,7 +50,7 @@ This builds the Golang backends for Wave. The binaries will put in waveshell/bin
 
 Install modules (we use yarn):
 
-```
+```sh
 yarn
 ```
 
@@ -57,7 +58,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
 ```
 
@@ -65,7 +66,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,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

@@ -1,108 +1,126 @@
 {
-    "name": "waveterm",
-    "author": {
-        "name": "Command Line Inc",
-        "email": "info@commandline.dev"
-    },
-    "productName": "Wave",
-    "description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
-    "version": "0.7.2",
-    "main": "dist/emain.js",
-    "license": "Apache-2.0",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/wavetermdev/waveterm"
-    },
-    "homepage": "https://waveterm.dev",
-    "build": {
-        "appId": "dev.commandline.waveterm"
-    },
-    "dependencies": {
-        "@monaco-editor/react": "^4.5.1",
-        "@table-nav/core": "^0.0.7",
-        "@table-nav/react": "^0.0.7",
-        "@tanstack/match-sorter-utils": "^8.8.4",
-        "@tanstack/react-table": "^8.10.3",
-        "autobind-decorator": "^2.4.0",
-        "base64-js": "^1.5.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",
-        "mobx": "6.12",
-        "mobx-react": "^7.5.0",
-        "monaco-editor": "^0.44.0",
-        "mustache": "^4.2.0",
-        "node-fetch": "^3.2.10",
-        "overlayscrollbars": "^2.6.1",
-        "overlayscrollbars-react": "^0.5.5",
-        "papaparse": "^5.4.1",
-        "react": "^18.1.0",
-        "react-dom": "^18.1.0",
-        "react-markdown": "^9.0.0",
-        "remark": "^15.0.1",
-        "remark-gfm": "^4.0.0",
-        "sprintf-js": "^1.1.2",
-        "throttle-debounce": "^5.0.0",
-        "tsx-control-statements": "^5.1.1",
-        "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-webgl": "^0.16.0"
-    },
-    "devDependencies": {
-        "@babel/cli": "^7.17.10",
-        "@babel/core": "^7.18.2",
-        "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-decorators": "^7.18.2",
-        "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@babel/plugin-transform-react-jsx": "^7.17.12",
-        "@babel/plugin-transform-runtime": "^7.23.4",
-        "@babel/preset-env": "^7.18.2",
-        "@babel/preset-react": "^7.23.3",
-        "@babel/preset-typescript": "^7.17.12",
-        "@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",
-        "@types/react": "^18.0.12",
-        "@types/semver": "^7.5.6",
-        "@types/sprintf-js": "^1.1.3",
-        "@types/throttle-debounce": "^5.0.1",
-        "@types/uuid": "^9.0.7",
-        "@types/webpack-env": "^1.18.3",
-        "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",
-        "electron-builder": "^24.13.3",
-        "electron-builder-squirrel-windows": "^24.13.3",
-        "file-loader": "^6.2.0",
-        "http-server": "^14.1.1",
-        "less": "^4.1.2",
-        "less-loader": "^12.0.0",
-        "lodash-webpack-plugin": "^0.11.6",
-        "mini-css-extract-plugin": "^2.6.0",
-        "prettier": "^2.8.8",
-        "raw-loader": "^4.0.2",
-        "react-split-it": "^2.0.0",
-        "style-loader": "^3.3.1",
-        "typescript": "^5.0.0",
-        "webpack": "^5.73.0",
-        "webpack-bundle-analyzer": "^4.10.1",
-        "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.0.4",
-        "webpack-merge": "^5.8.0",
-        "yaml": "^2.4.0"
-    },
-    "scripts": {
-        "postinstall": "electron-builder install-app-deps"
-    }
+  "name": "waveterm",
+  "author": {
+    "name": "Command Line Inc",
+    "email": "info@commandline.dev"
+  },
+  "productName": "Wave",
+  "description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
+  "version": "0.7.3",
+  "main": "dist/emain.js",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wavetermdev/waveterm"
+  },
+  "homepage": "https://waveterm.dev",
+  "build": {
+    "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",
+    "@tanstack/match-sorter-utils": "^8.8.4",
+    "@tanstack/react-table": "^8.10.3",
+    "autobind-decorator": "^2.4.0",
+    "base64-js": "^1.5.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",
+    "mustache": "^4.2.0",
+    "node-fetch": "^3.2.10",
+    "overlayscrollbars": "^2.6.1",
+    "overlayscrollbars-react": "^0.5.5",
+    "papaparse": "^5.4.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-markdown": "^9.0.0",
+    "remark": "^15.0.1",
+    "remark-gfm": "^4.0.0",
+    "sprintf-js": "^1.1.2",
+    "throttle-debounce": "^5.0.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-webgl": "^0.16.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.2",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.18.2",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-react-jsx": "^7.17.12",
+    "@babel/plugin-transform-runtime": "^7.23.4",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.17.12",
+    "@chromatic-com/storybook": "^1.3.3",
+    "@electron/rebuild": "^3.6.0",
+    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/addon-interactions": "^8.0.9",
+    "@storybook/addon-links": "^8.0.9",
+    "@storybook/addon-onboarding": "^8.0.9",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.0.9",
+    "@storybook/react": "^8.0.9",
+    "@storybook/react-webpack5": "^8.0.9",
+    "@storybook/test": "^8.0.9",
+    "@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",
+    "@types/react": "^18.0.12",
+    "@types/semver": "^7.5.6",
+    "@types/sprintf-js": "^1.1.3",
+    "@types/throttle-debounce": "^5.0.1",
+    "@types/uuid": "^9.0.7",
+    "@types/webpack-env": "^1.18.3",
+    "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",
+    "electron-builder": "^24.13.3",
+    "electron-builder-squirrel-windows": "^24.13.3",
+    "file-loader": "^6.2.0",
+    "http-server": "^14.1.1",
+    "less": "^4.1.2",
+    "less-loader": "^12.0.0",
+    "lodash-webpack-plugin": "^0.11.6",
+    "mini-css-extract-plugin": "^2.6.0",
+    "prettier": "^2.8.8",
+    "raw-loader": "^4.0.2",
+    "react-split-it": "^2.0.0",
+    "storybook": "^8.0.9",
+    "style-loader": "4.0.0",
+    "typescript": "^5.0.0",
+    "webpack": "^5.73.0",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4",
+    "webpack-merge": "^5.8.0",
+    "yaml": "^2.4.0"
+  },
+  "scripts": {
+    "postinstall": "electron-builder install-app-deps",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "packageManager": "yarn@4.1.1"
 }

public/themes/default.css

@@ -42,16 +42,19 @@
     --app-bg-color: black;
     --app-accent-color: rgb(88, 193, 66);
     --app-accent-bg-color: rgba(88, 193, 66, 0.25);
+    --app-accent-bg-darker-color: rgba(88, 193, 66, 0.5);
     --app-text-color: rgb(211, 215, 207);
     --app-text-primary-color: rgb(255, 255, 255);
     --app-text-secondary-color: rgb(195, 200, 194);
     --app-text-disabled-color: rgb(173, 173, 173);
+    --app-text-bg-color: rgb(23, 23, 23);
+    --app-text-bg-disabled-color: rgb(51, 51, 51);
     --app-border-color: rgb(51, 51, 51);
-    --app-maincontent-bg-color: #333;
+    --app-maincontent-bg-color: rgb(51, 51, 51);
     --app-panel-bg-color: rgba(21, 23, 21, 1);
     --app-panel-bg-color-dev: rgb(21, 23, 48);
     --app-icon-color: rgb(139, 145, 138);
-    --app-icon-hover-color: #fff;
+    --app-icon-hover-color: rgb(255, 255, 255);
     --app-selected-mask-color: rgba(255, 255, 255, 0.06);
 
     /* global status colors */
@@ -122,18 +125,18 @@
 
     /* line colors */
     --line-sidebar-message-color: rgb(196, 160, 0);
-    --line-background: rgba(21, 23, 21, 1);
-    --line-avatar-color: #eceeec;
+    --line-background: var(--app-panel-bg-color);
+    --line-avatar-color: rgb(236, 238, 236);
     --line-text-color: rgb(211, 215, 207);
     --line-svg-fill-color: rgb(150, 152, 150);
-    --line-svg-hover-fill-color: #eceeec;
+    --line-svg-hover-fill-color: rgb(236, 238, 236);
     --line-separator-color: rgb(126, 126, 126);
     --line-error-color: var(--app-error-color);
     --line-warning-color: var(--app-warning-color);
-    --line-base-soft-blue-color: #729fcf;
+    --line-base-soft-blue-color: rgb(114, 159, 207);
     --line-active-border-color: var(--app-accent-color);
     --line-selected-bg-color: rgba(255, 255, 255, 0.05);
-    --line-selected-border-left-color: #777777;
+    --line-selected-border-left-color: rgb(119, 119, 119);
     --line-selected-error-border-color: rgba(204, 0, 0, 0.8);
     --line-selected-error-bg-color: rgb(19, 4, 3);
     --line-error-bg-color: rgba(200, 0, 0, 0.1);
@@ -152,22 +155,21 @@
     /* table colors */
     --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: #ccc;
-    --table-thead-bg-color: rgba(250, 250, 250, 0.02);
+    --table-thead-bright-border-color: rgb(204, 204, 204);
+    --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: #222;
-    --table-tr-selected-hover-bg-color: #333;
+    --table-tr-selected-bg-color: rgb(34, 34, 34);
+    --table-tr-selected-hover-bg-color: var(--app-maincontent-bg-color);
 
     /* cmdinput colors */
-    --cmdinput-textarea-bg-color: #171717;
+    --cmdinput-bg-color: var(--app-text-bg-color);
     --cmdinput-text-error-color: var(--term-red);
     --cmdinput-history-item-error-color: var(--term-bright-red);
     --cmdinput-history-item-selected-error-color: var(--term-bright-red);
-    --cmdinput-button-bg-color: rgb(88, 193, 66);
-    --cmdinput-comment-button-bg-color: rgb(57, 113, 255);
-    --cmdinput-disabled-icon-color: rgb(76, 81, 75, 1);
-    --cmdinput-history-bg-color: rgb(21, 23, 21, 1);
+    --cmdinput-button-bg-color: var(--tab-green);
+    --cmdinput-disabled-bg-color: var(--app-text-bg-disabled-color);
+    --cmdinput-history-bg-color: var(--app-bg-color);
 
     /* screen view color */
     --screen-view-text-caption-color: rgb(139, 145, 138);

public/themes/light.css

@@ -5,20 +5,20 @@
 @import url("./term-light.css");
 
 :root {
-    --app-bg-color: #fefefe;
+    --app-bg-color: rgb(254, 254, 254);
     --app-accent-color: rgb(75, 166, 57);
     --app-accent-bg-color: rgba(75, 166, 57, 0.2);
-    --app-text-color: #000;
-    --app-text-primary-color: rgb(0, 0, 0, 0.9);
-    --app-text-secondary-color: rgb(0, 0, 0, 0.7);
+    --app-text-color: rgb(0, 0, 0);
+    --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: #e0e0e0;
-    --app-panel-bg-color-dev: #e0e0e0;
-    --app-icon-color: rgb(80, 80, 80);
-    --app-icon-hover-color: rgb(100, 100, 100);
+    --app-panel-bg-color: rgb(224, 224, 224);
+    --app-panel-bg-color-dev: rgb(224, 224, 224);
+    --app-icon-color: rgb(110, 110, 110);
+    --app-icon-hover-color: rgb(80, 80, 80);
     --app-selected-mask-color: rgba(0, 0, 0, 0.06);
 
-    --input-bg-color: #eeeeee;
+    --input-bg-color: rgb(238, 238, 238);
 
     /* tab color */
     --tab-white: rgb(0, 0, 0, 0.6);
@@ -30,8 +30,8 @@
     --table-thead-bg-color: rgba(250, 250, 250, 0.15);
     --table-tr-border-bottom-color: rgba(0, 0, 0, 0.15);
     --table-tr-hover-bg-color: rgba(0, 0, 0, 0.15);
-    --table-tr-selected-bg-color: #dddddd;
-    --table-tr-selected-hover-bg-color: #cccccc;
+    --table-tr-selected-bg-color: rgb(221, 221, 221);
+    --table-tr-selected-hover-bg-color: rgb(204, 204, 204);
 
     /* form colors */
     --form-element-border-color: rgba(0, 0, 0, 0.3);
@@ -41,8 +41,8 @@
     --form-element-label-color: rgba(0, 0, 0, 0.6);
     --form-element-secondary-color: rgba(0, 0, 0, 0.09);
     --form-element-icon-color: rgb(0, 0, 0, 0.6);
-    --form-element-disabled-text-color: #b7b7b7;
-    --form-element-placeholder-color: #b7b7b7;
+    --form-element-disabled-text-color: rgb(183, 183, 183);
+    --form-element-placeholder-color: rgb(183, 183, 183);
 
     --markdown-bg-color: rgb(0, 0, 0, 0.1);
 
@@ -50,8 +50,6 @@
     --modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);
 
     /* cmd input */
-    --cmdinput-textarea-bg-color: rgba(0, 0, 0, 0.1);
-    --cmdinput-textarea-border-color: var(--form-element-border-color);
 
     /* scroll colors */
     --scrollbar-background-color: var(--app-bg-color);
@@ -59,20 +57,24 @@
     --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);
     --line-actions-active-color: rgba(0, 0, 0, 1);
 
-    --logo-button-hover-bg-color: #f0f0f0;
+    --logo-button-hover-bg-color: rgb(240, 240, 240);
 
     --xterm-viewport-border-color: rgba(0, 0, 0, 0.3);
 
-    --datepicker-cell-hover-bg-color: #f0f0f0;
+    --datepicker-cell-hover-bg-color: rgb(240, 240, 240);
     --datepicker-cell-other-text-color: rgba(0, 0, 0, 0.3);
     --datepicker-header-fade-color: rgba(0, 0, 0, 0.4);
-    --datepicker-year-header-bg-color: #f5f5f5;
-    --datepicker-year-header-border-color: #dcdcdc;
+    --datepicker-year-header-bg-color: rgb(245, 245, 245);
+    --datepicker-year-header-border-color: rgb(220, 220, 220);
 
     /* toggle colors */
     --toggle-thumb-color: var(--app-bg-color);

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)
@@ -115,15 +115,3 @@ 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 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";
@@ -22,15 +22,15 @@ import { DisconnectedModal, ClientStopModal } from "@/modals";
 import { ModalsProvider } from "@/modals/provider";
 import { Button } from "@/elements";
 import { ErrorBoundary } from "@/common/error/errorboundary";
-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);
@@ -80,6 +80,13 @@ class App extends React.Component<{}, {}> {
         rightSidebarModel.saveState(width, false);
     }
 
+    @boundMethod
+    handleTermThemesRendered() {
+        mobx.action(() => {
+            this.termThemesLoaded.set(true);
+        })();
+    }
+
     render() {
         const remotesModel = GlobalModel.remotesModel;
         const disconnected = !GlobalModel.ws.open.get() || !GlobalModel.waveSrvRunning.get();
@@ -90,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;
         }
 
@@ -118,52 +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 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">
-                    <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>
+            </>
         );
     }
 }