split models/model

* split settings modals

* init

* init

* remove styles not related to checkbox

* remove styles not related to CmdStrCode

* renderCmdText doesn't need styles

* remove styles not related to dropdown

* IconButton doesn't need styles because it extends Button

* remove old connections

* InfoMessage conmponent no longer needed

* fix import error

* remove styles not related to InlineSettingsTextEdit

* remove styles not related to InputDecoration

* LinkButton doesn't need styles cos it's extends Button component

* remove styles not related to markdown

* remove styles not related to modal

* NumberField doesn't need styles cos it extends TextField

* remove styles not related to PasswordField

* RemoteStatusLight no longer used. It's replaced by Status component.

* remove styles not related to ResizableSidebar

* SettingsError doesn't need styles cos it uses classnames in app.less

* remove styles not related to Status

* remove styles not related to TextField

* remove styles not related to Toggle

* remove styles not related to Tooltip

README.md

@@ -10,7 +10,7 @@
 
 # Wave Terminal 
 
-A open-source, cross-platform, modern terminal for seamless workflows.
+A open-source, cross-platform, AI-integrated, modern terminal 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.
 
@@ -18,6 +18,7 @@ Wave isn't just another terminal emulator; it's a rethink on how terminals are b
 * Persistent sessions that can restore state across network disconnections and reboots
 * Searchable contextual command history across all remote sessions (saved locally)
 * Workspaces, tabs, and command blocks to keep you organized
+* AI Integration with ChatGPT (or ChatGPT compatible APIs) to help write commands and get answers inline
 
 ## Installation
 
@@ -35,6 +36,7 @@ brew install --cask wave
 * Homepage — https://www.waveterm.dev
 * Download Page — https://www.waveterm.dev/download
 * Documentation — https://docs.waveterm.dev/
+* Blog — https://blog.waveterm.dev/
 * Quick Start Guide — https://docs.waveterm.dev/quickstart/
 * Discord Community — https://discord.gg/XfvZ334gwU
 

src/app/app.tsx

@@ -9,7 +9,7 @@ import { If } from "tsx-control-statements/components";
 import dayjs from "dayjs";
 import type { ContextMenuOpts } from "../types/types";
 import localizedFormat from "dayjs/plugin/localizedFormat";
-import { GlobalModel } from "../model/model";
+import { GlobalModel } from "../models";
 import { isBlank } from "../util/util";
 import { WorkspaceView } from "./workspace/workspaceview";
 import { PluginsView } from "./pluginsview/pluginsview";
@@ -32,7 +32,7 @@ class App extends React.Component<{}, {}> {
     dcWait: OV<boolean> = mobx.observable.box(false, { name: "dcWait" });
     mainContentRef: React.RefObject<HTMLDivElement> = React.createRef();
 
-    constructor(props: any) {
+    constructor(props: {}) {
         super(props);
         if (GlobalModel.isDev) document.body.className = "is-dev";
     }

src/app/appconst.ts

@@ -16,3 +16,33 @@ export const LineContainer_Sidebar = "sidebar";
 export const ConfirmKey_HideShellPrompt = "hideshellprompt";
 
 export const NoStrPos = -1;
+
+export const RemotePtyRows = 8; // also in main.tsx
+export const RemotePtyCols = 80;
+export const ProdServerEndpoint = "http://127.0.0.1:1619";
+export const ProdServerWsEndpoint = "ws://127.0.0.1:1623";
+export const DevServerEndpoint = "http://127.0.0.1:8090";
+export const DevServerWsEndpoint = "ws://127.0.0.1:8091";
+export const DefaultTermFontSize = 12;
+export const MinFontSize = 8;
+export const MaxFontSize = 24;
+export const InputChunkSize = 500;
+export const RemoteColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange"];
+export const TabColors = ["red", "orange", "yellow", "green", "mint", "cyan", "blue", "violet", "pink", "white"];
+export const TabIcons = [
+    "sparkle",
+    "fire",
+    "ghost",
+    "cloud",
+    "compass",
+    "crown",
+    "droplet",
+    "graduation-cap",
+    "heart",
+    "file",
+];
+
+// @ts-ignore
+export const VERSION = __WAVETERM_VERSION__;
+// @ts-ignore
+export const BUILD = __WAVETERM_BUILD__;

src/app/bookmarks/bookmarks.tsx

@@ -8,7 +8,7 @@ import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";
 import cn from "classnames";
 import type { BookmarkType } from "../../types/types";
-import { GlobalModel } from "../../model/model";
+import { GlobalModel } from "../../models";
 import { CmdStrCode, Markdown } from "../common/elements";
 
 import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
@@ -19,8 +19,16 @@ import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.svg"
 
 import "./bookmarks.less";
 
+type BookmarkProps = {
+    bookmark: BookmarkType;
+};
+
 @mobxReact.observer
-class Bookmark extends React.Component<{ bookmark: BookmarkType }, {}> {
+class Bookmark extends React.Component<BookmarkProps, {}> {
+    constructor(props: BookmarkProps) {
+        super(props);
+    }
+
     @boundMethod
     handleDeleteClick(): void {
         let { bookmark } = this.props;
@@ -179,6 +187,10 @@ class Bookmark extends React.Component<{ bookmark: BookmarkType }, {}> {
 
 @mobxReact.observer
 class BookmarksView extends React.Component<{}, {}> {
+    constructor(props: {}) {
+        super(props);
+    }
+
     @boundMethod
     closeView(): void {
         GlobalModel.bookmarksModel.closeView();

src/app/clientsettings/clientsettings.tsx

@@ -6,24 +6,20 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
-import { GlobalModel, GlobalCommandRunner, MinFontSize, MaxFontSize, RemotesModel } from "../../model/model";
+import { GlobalModel, GlobalCommandRunner, RemotesModel } from "../../models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "../common/elements";
-import { CommandRtnType, ClientDataType } from "../../types/types";
+import * as types from "../../types/types";
 import { commandRtnHandler, isBlank } from "../../util/util";
+import * as appconst from "../appconst";
 
 import "./clientsettings.less";
 
-type OV<V> = mobx.IObservableValue<V>;
-
-// @ts-ignore
-const VERSION = __WAVETERM_VERSION__;
-// @ts-ignore
-const BUILD = __WAVETERM_BUILD__;
-
 @mobxReact.observer
 class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
-    fontSizeDropdownActive: OV<boolean> = mobx.observable.box(false, { name: "clientSettings-fontSizeDropdownActive" });
+    fontSizeDropdownActive: types.OV<boolean> = mobx.observable.box(false, {
-    errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
+        name: "clientSettings-fontSizeDropdownActive",
+    });
+    errorMessage: types.OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
 
     @boundMethod
     dismissError(): void {
@@ -52,7 +48,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
     @boundMethod
     handleChangeTelemetry(val: boolean): void {
-        let prtn: Promise<CommandRtnType> = null;
+        let prtn: Promise<types.CommandRtnType> = null;
         if (val) {
             prtn = GlobalCommandRunner.telemetryOn(false);
         } else {
@@ -63,7 +59,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
     @boundMethod
     handleChangeReleaseCheck(val: boolean): void {
-        let prtn: Promise<CommandRtnType> = null;
+        let prtn: Promise<types.CommandRtnType> = null;
         if (val) {
             prtn = GlobalCommandRunner.releaseCheckAutoOn(false);
         } else {
@@ -74,7 +70,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
     getFontSizes(): any {
         let availableFontSizes: { label: string; value: number }[] = [];
-        for (let s = MinFontSize; s <= MaxFontSize; s++) {
+        for (let s = appconst.MinFontSize; s <= appconst.MaxFontSize; s++) {
             availableFontSizes.push({ label: s + "px", value: s });
         }
         return availableFontSizes;
@@ -116,7 +112,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
             return null;
         }
 
-        let cdata: ClientDataType = GlobalModel.clientData.get();
+        let cdata: types.ClientDataType = GlobalModel.clientData.get();
         let openAIOpts = cdata.openaiopts ?? {};
         let apiTokenStr = isBlank(openAIOpts.apitoken) ? "(not set)" : "********";
         let maxTokensStr = String(
@@ -151,7 +147,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                     <div className="settings-field">
                         <div className="settings-label">Client Version</div>
                         <div className="settings-input">
-                            {VERSION} {BUILD}
+                            {appconst.VERSION} {appconst.BUILD}
                         </div>
                     </div>
                     <div className="settings-field">

src/app/common/elements/markdown.tsx

@@ -6,7 +6,7 @@ import * as mobxReact from "mobx-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import cn from "classnames";
-import { GlobalModel } from "../../../model/model";
+import { GlobalModel } from "../../../models";
 
 import "./markdown.less";
 

src/app/common/elements/resizablesidebar.tsx

@@ -6,7 +6,7 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
-import { GlobalModel, GlobalCommandRunner } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner } from "../../../models";
 import { MagicLayout } from "../../magiclayout";
 
 import "./resizablesidebar.less";

src/app/common/elements/showwaveshellinstallprompt.tsx

@@ -1,7 +1,7 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { GlobalModel } from "../../../model/model";
+import { GlobalModel } from "../../../models";
 import * as appconst from "../../appconst";
 
 function ShowWaveShellInstallPrompt(callbackFn: () => void) {

src/app/common/modals/about.tsx

@@ -5,18 +5,14 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
-import { GlobalModel } from "../../../model/model";
+import { GlobalModel } from "../../../models";
 import { Modal, LinkButton } from "../elements";
 import * as util from "../../../util/util";
+import * as appconst from "../../appconst";
 
 import logo from "../../assets/waveterm-logo-with-bg.svg";
 import "./about.less";
 
-// @ts-ignore
-const VERSION = __WAVETERM_VERSION__;
-// @ts-ignore
-let BUILD = __WAVETERM_BUILD__;
-
 @mobxReact.observer
 class AboutModal extends React.Component<{}, {}> {
     @boundMethod
@@ -42,7 +38,7 @@ class AboutModal extends React.Component<{}, {}> {
         return (
             <div className="status updated">
                 <div className="text-selectable">
-                    Client Version {VERSION} ({BUILD})
+                    Client Version {appconst.VERSION} ({appconst.BUILD})
                 </div>
             </div>
         );
@@ -55,7 +51,7 @@ class AboutModal extends React.Component<{}, {}> {
                         <span>Up to Date</span>
                     </div>
                     <div className="selectable">
-                        Client Version {VERSION} ({BUILD})
+                        Client Version {appconst.VERSION} ({appconst.BUILD})
                     </div>
                 </div>
             );
@@ -67,7 +63,7 @@ class AboutModal extends React.Component<{}, {}> {
                     <span>Outdated Version</span>
                 </div>
                 <div className="selectable">
-                    Client Version {VERSION} ({BUILD})
+                    Client Version {appconst.VERSION} ({appconst.BUILD})
                 </div>
                 <div>
                     <button onClick={this.updateApp} className="button color-green text-secondary">

src/app/common/modals/alert.tsx

@@ -6,7 +6,7 @@ import * as mobxReact from "mobx-react";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
 import { Markdown, Modal, Button, Checkbox } from "../elements";
-import { GlobalModel, GlobalCommandRunner } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner } from "../../../models";
 
 import "./alert.less";
 

src/app/common/modals/clientstop.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
-import { GlobalModel } from "../../../model/model";
+import { GlobalModel } from "../../../models";
 import { Modal, Button } from "../elements";
 
 import "./clientstop.less";

src/app/common/modals/createremoteconn.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 } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner, RemotesModel } from "../../../models";
 import * as T from "../../../types/types";
 import {
     Modal,

src/app/common/modals/disconnected.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
-import { GlobalModel } from "../../../model/model";
+import { GlobalModel } from "../../../models";
 import { Modal, Button } from "../elements";
 
 import "./disconnected.less";

src/app/common/modals/editremoteconn.tsx

@@ -6,7 +6,7 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { If } from "tsx-control-statements/components";
 import { boundMethod } from "autobind-decorator";
-import { GlobalModel, GlobalCommandRunner, RemotesModel } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner, RemotesModel } from "../../../models";
 import * as T from "../../../types/types";
 import { Modal, TextField, InputDecoration, Dropdown, PasswordField, Tooltip } from "../elements";
 import * as util from "../../../util/util";

src/app/common/modals/linesettings.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
-import { GlobalModel, GlobalCommandRunner } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner } from "../../../models";
 import { SettingsError, Modal, Dropdown } from "../elements";
 import { LineType, RendererPluginType } from "../../../types/types";
 import { PluginModel } from "../../../plugins/plugins";

src/app/common/modals/provider.tsx

@@ -3,7 +3,7 @@
 
 import * as React from "react";
 import * as mobxReact from "mobx-react";
-import { GlobalModel } from "../../../model/model";
+import { GlobalModel } from "../../../models";
 import { TosModal } from "./tos";
 
 @mobxReact.observer

src/app/common/modals/screensettings.tsx

@@ -7,7 +7,7 @@ import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";
 import cn from "classnames";
-import { GlobalModel, GlobalCommandRunner, TabColors, TabIcons, Screen } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner, Screen } from "../../../models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Modal, Dropdown, Tooltip } from "../elements";
 import { RemoteType } from "../../../types/types";
 import * as util from "../../../util/util";
@@ -15,6 +15,7 @@ import { commandRtnHandler } from "../../../util/util";
 import { ReactComponent as SquareIcon } from "../../assets/icons/tab/square.svg";
 import { ReactComponent as GlobeIcon } from "../../assets/icons/globe.svg";
 import { ReactComponent as StatusCircleIcon } from "../../assets/icons/statuscircle.svg";
+import * as appconst from "../../appconst";
 
 import "./screensettings.less";
 
@@ -281,7 +282,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                                     <span className="tab-color-name">{screen.getTabColor()}</span>
                                 </div>
                                 <div className="tab-color-sep">|</div>
-                                <For each="color" of={TabColors}>
+                                <For each="color" of={appconst.TabColors}>
                                     <div
                                         key={color}
                                         className="tab-color-select"
@@ -307,7 +308,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                                     <span className="tab-icon-name">{screen.getTabIcon()}</span>
                                 </div>
                                 <div className="tab-icon-sep">|</div>
-                                <For each="icon" index="index" of={TabIcons}>
+                                <For each="icon" index="index" of={appconst.TabIcons}>
                                     <div
                                         key={`${color}-${index}`}
                                         className="tab-icon-select"

src/app/common/modals/sessionsettings.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
-import { GlobalModel, GlobalCommandRunner, Session } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner, Session } from "../../../models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Modal, Tooltip } from "../elements";
 import * as util from "../../../util/util";
 import { commandRtnHandler } from "../../../util/util";

src/app/common/modals/tabswitcher.tsx

@@ -7,10 +7,10 @@ import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { For } from "tsx-control-statements/components";
 import cn from "classnames";
-import { GlobalModel, GlobalCommandRunner } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner } from "../../../models";
 import { Modal, TextField, InputDecoration, Tooltip } from "../elements";
 import * as util from "../../../util/util";
-import { Screen } from "../../../model/model";
+import { Screen } from "../../../models";
 import { ReactComponent as SquareIcon } from "../../assets/icons/tab/square.svg";
 
 import "./tabswitcher.less";

src/app/common/modals/tos.tsx

@@ -4,7 +4,7 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import { boundMethod } from "autobind-decorator";
-import { GlobalModel, GlobalCommandRunner } from "../../../model/model";
+import { GlobalModel, GlobalCommandRunner } from "../../../models";
 import { Toggle, Modal, Button } from "../elements";
 import * as util from "../../../util/util";
 import { ClientDataType } from "../../../types/types";