fix model type

* add command validation to shellapi.  mock out bash/zsh versions

* implement validate command fn bash and zsh

* test validate command

* change rtnstate commands to always end with a builtin, so we always get our exit trap to run

* simplify the rtnstate modification, don't add the 'wait' (as this is a different problem/feature)

* update schema

package.json

@@ -23,7 +23,6 @@
         "@table-nav/react": "^0.0.7",
         "@tanstack/match-sorter-utils": "^8.8.4",
         "@tanstack/react-table": "^8.10.3",
-        "@withfig/autocomplete": "^2.652.3",
         "autobind-decorator": "^2.4.0",
         "base64-js": "^1.5.1",
         "classnames": "^2.3.1",
@@ -78,7 +77,6 @@
         "@types/throttle-debounce": "^5.0.1",
         "@types/uuid": "^9.0.7",
         "@types/webpack-env": "^1.18.3",
-        "@withfig/autocomplete-types": "^1.30.0",
         "babel-loader": "^9.1.3",
         "babel-plugin-jsx-control-statements": "^4.1.2",
         "copy-webpack-plugin": "^12.0.0",
@@ -107,4 +105,4 @@
     "scripts": {
         "postinstall": "electron-builder install-app-deps"
     }
-}
+}

src/app/app.tsx

@@ -20,7 +20,7 @@ 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 cn from "classnames";
 import "./app.less";
@@ -124,9 +124,11 @@ class App extends React.Component<{}, {}> {
         const rightSidebarCollapsed = GlobalModel.rightSidebarModel.getCollapsed();
         const activeMainView = GlobalModel.activeMainView.get();
         const lightDarkClass = GlobalModel.isDarkTheme.get() ? "is-dark" : "is-light";
+        const termTheme = GlobalModel.getTermTheme();
+
         return (
             <div
-                key={"version-" + renderVersion}
+                key={`version- + ${renderVersion}`}
                 id="main"
                 className={cn(
                     "platform-" + platform,
@@ -151,6 +153,12 @@ class App extends React.Component<{}, {}> {
                     </div>
                 </If>
                 <div ref={this.mainContentRef} className="main-content">
+                    <TermStyleBlock
+                        scope="main"
+                        termTheme={termTheme}
+                        themeSrcEl={this.mainContentRef.current}
+                        themeKey="main"
+                    />
                     <MainSideBar parentRef={this.mainContentRef} />
                     <ErrorBoundary>
                         <PluginsView />

src/app/clientsettings/clientsettings.tsx

@@ -7,13 +7,13 @@ 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 { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown, Button } from "@/common/elements";
+import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
 import { commandRtnHandler, isBlank } from "@/util/util";
 import { getTermThemes } from "@/util/themeutil";
 import * as appconst from "@/app/appconst";
 
 import "./clientsettings.less";
-import { MainView } from "@/common/elements/mainview";
+import { MainView } from "../common/elements/mainview";
 
 class ClientSettingsKeybindings extends React.Component<{}, {}> {
     componentDidMount() {
@@ -76,14 +76,14 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
     @boundMethod
     handleChangeTermTheme(theme: string): void {
-        // For global terminal theme, the key is global, otherwise it's either
+        // For main terminal theme, the key is main, otherwise it's either
         // sessionId or screenId.
-        const currTheme = GlobalModel.getTermTheme()["global"];
+        const currTheme = GlobalModel.getTermTheme()["main"];
         if (currTheme == theme) {
             return;
         }
 
-        const prtn = GlobalCommandRunner.setGlobalTermTheme(theme, false);
+        const prtn = GlobalCommandRunner.setMainTermTheme(theme, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
@@ -208,7 +208,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const curFontFamily = GlobalModel.getTermFontFamily();
         const curTheme = GlobalModel.getThemeSource();
         const termThemes = getTermThemes(GlobalModel.termThemes, "Wave Default");
-        const currTermTheme = GlobalModel.getTermTheme()["global"] ?? termThemes[0].label;
+        const currTermTheme = GlobalModel.getTermTheme()["main"] ?? termThemes[0].label;
 
         return (
             <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>

src/app/common/elements/dropdown.less

@@ -5,7 +5,7 @@
     width: 100%;
     border: 2px solid var(--form-element-border-color);
     border-radius: 6px;
-    line-height: 22px;
+    line-height: 20px;
     background: var(--form-element-bg-color);
 
     &.no-label {
@@ -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>
                       ))}

src/app/common/elements/index.tsx

@@ -18,4 +18,5 @@ export { Toggle } from "./toggle";
 export { Tooltip } from "./tooltip";
 export { TabIcon } from "./tabicon";
 export { DatePicker } from "./datepicker";
+export { TermStyleBlock } from "./termstyleblock";
 export { CopyButton } from "./copybutton";

src/app/common/elements/termstyleblock.tsx

@@ -0,0 +1,117 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import * as mobxReact from "mobx-react";
+import * as mobx from "mobx";
+import { GlobalModel } from "@/models";
+import { isBlank } from "@/util/util";
+
+const VALID_CSS_VARIABLES = [
+    "--term-black",
+    "--term-red",
+    "--term-green",
+    "--term-yellow",
+    "--term-blue",
+    "--term-magenta",
+    "--term-cyan",
+    "--term-white",
+    "--term-bright-black",
+    "--term-bright-red",
+    "--term-bright-green",
+    "--term-bright-yellow",
+    "--term-bright-blue",
+    "--term-bright-magenta",
+    "--term-bright-cyan",
+    "--term-bright-white",
+    "--term-gray",
+    "--term-cmdtext",
+    "--term-foreground",
+    "--term-background",
+    "--term-selection-background",
+    "--term-cursor-accent",
+];
+
+@mobxReact.observer
+class TermStyleBlock extends React.Component<
+    { scope: "main" | "session" | "screen"; themeSrcEl: HTMLElement; themeKey: string; termTheme: TermThemeType },
+    { styleRules: string }
+> {
+    styleRules: OV<string> = mobx.observable.box("", { name: "StyleBlock-styleRules" });
+    theme: string;
+
+    componentDidMount(): void {
+        this.loadThemeStyles();
+    }
+
+    componentDidUpdate(prevProps): void {
+        const { themeKey, termTheme } = this.props;
+        const currTheme = termTheme[themeKey];
+        if (themeKey !== prevProps.themeKey || currTheme !== this.theme) {
+            this.loadThemeStyles();
+        }
+    }
+
+    isValidCSSColor(color) {
+        const element = document.createElement("div");
+        element.style.color = color;
+        return element.style.color !== "";
+    }
+
+    isValidTermCSSVariable(key, value) {
+        const cssVarName = `--term-${key}`;
+        console.log("cssVarName", cssVarName, "value", value);
+        return VALID_CSS_VARIABLES.includes(cssVarName);
+    }
+
+    camelCaseToKebabCase(str) {
+        return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+
+    loadThemeStyles() {
+        const { themeKey, termTheme, scope } = this.props;
+        const currTheme = termTheme[themeKey];
+
+        if (currTheme && currTheme !== this.theme && currTheme) {
+            const rtn = GlobalModel.getTermThemeJson(currTheme);
+            rtn.then((termThemeJson) => {
+                if (termThemeJson && typeof termThemeJson === "object") {
+                    const styleProperties = Object.entries(termThemeJson)
+                        .filter(([key, value]) => {
+                            const cssVarName = `--term-${this.camelCaseToKebabCase(key)}`;
+                            return VALID_CSS_VARIABLES.includes(cssVarName) && this.isValidCSSColor(value);
+                        })
+                        .map(([key, value]) => `--term-${key}: ${value};`)
+                        .join(" ");
+
+                    mobx.action(() => {
+                        this.styleRules.set(`:root { ${styleProperties} }`);
+                        GlobalModel.termThemeSrcEls.set(scope, this.props.themeSrcEl);
+                    })();
+                    GlobalModel.bumpTermRenderVersion();
+                    this.theme = currTheme;
+                } else {
+                    console.error("termThemeJson is not an object:", termThemeJson);
+                }
+            }).catch((error) => {
+                console.error("error loading theme styles:", error);
+            });
+        } else {
+            mobx.action(() => {
+                this.styleRules.set("");
+                GlobalModel.termThemeSrcEls.set(scope, null);
+            })();
+            this.theme = currTheme;
+            GlobalModel.bumpTermRenderVersion();
+        }
+    }
+
+    render() {
+        if (isBlank(this.styleRules.get())) {
+            return null;
+        }
+        return <style>{this.styleRules.get()}</style>;
+    }
+}
+
+export { TermStyleBlock };

src/app/history/history.tsx

@@ -649,11 +649,6 @@ class LineContainer extends React.Component<{ historyId: string; width: number }
         this.line = hvm.getLineById(this.historyItem.lineid);
     }
 
-    componentDidMount(): void {
-        GlobalModel.bumpTermRenderVersion();
-        GlobalModel.termThemeSrcEl.set(null);
-    }
-
     @boundMethod
     handleHeightChange(lineNum: number, newHeight: number, oldHeight: number): void {
         return;

src/app/workspace/cmdinput/autocomplete.tsx

@@ -1,28 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-import { SuggestionBlob } from "@/autocomplete/runtime/model";
-import { GlobalModel } from "@/models";
-import cn from "classnames";
-import { useMemo } from "react";
-
-export const AutocompleteSuggestions = async (props: { curLine: string }) => {
-    const inputModel = GlobalModel.inputModel;
-    const suggestions = await useMemo(async () => await inputModel.getSuggestions(), [props.curLine]);
-
-    if (!suggestions) {
-        return null;
-    }
-
-    const items = suggestions.suggestions.map((s) => `${s.icon} ${s.name}`);
-
-    return (
-        <div className="autocomplete-suggestions">
-            {items.map((item, idx) => (
-                <div key={idx} className={cn("autocomplete-item")}>
-                    {item}
-                </div>
-            ))}
-        </div>
-    );
-};

src/app/workspace/screen/newtabsettings.tsx

@@ -5,12 +5,10 @@ import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";
 import cn from "classnames";
 import { GlobalCommandRunner, GlobalModel, Screen } from "@/models";
-import { Button, TextField, Dropdown } from "@/elements";
-import { getRemoteStr, getRemoteStrWithAlias } from "@/common/prompt/prompt";
+import { TextField, Dropdown } from "@/elements";
+import { getRemoteStrWithAlias } from "@/common/prompt/prompt";
 import * as util from "@/util/util";
 import { TabIcon } from "@/elements/tabicon";
-import { ReactComponent as EllipseIcon } from "@/assets/icons/ellipse.svg";
-import { ReactComponent as Check12Icon } from "@/assets/icons/check12.svg";
 import { ReactComponent as GlobeIcon } from "@/assets/icons/globe.svg";
 import { ReactComponent as StatusCircleIcon } from "@/assets/icons/statuscircle.svg";
 import * as appconst from "@/app/appconst";
@@ -18,52 +16,6 @@ import * as appconst from "@/app/appconst";
 import "./screenview.less";
 import "./tabs.less";
 
-@mobxReact.observer
-class NewTabSettings extends React.Component<{ screen: Screen }, {}> {
-    errorMessage: OV<string | null> = mobx.observable.box(null, { name: "NewTabSettings-errorMessage" });
-
-    constructor(props) {
-        super(props);
-    }
-
-    @boundMethod
-    clickNewConnection(): void {
-        GlobalModel.remotesModel.openAddModal({ remoteedit: true });
-    }
-
-    render() {
-        let { screen } = this.props;
-        let rptr = screen.curRemote.get();
-        return (
-            <div className="newtab-container">
-                <div className="newtab-section name-section">
-                    <TabNameTextField screen={screen} errorMessage={this.errorMessage} />
-                </div>
-                <div className="newtab-spacer" />
-                <div className="newtab-section conn-section">
-                    <div className="unselectable">
-                        You're connected to <b>[{getRemoteStrWithAlias(rptr)}]</b>. Do you want to change it?
-                    </div>
-                    <div>
-                        <TabRemoteSelector screen={screen} errorMessage={this.errorMessage} />
-                    </div>
-                    <div className="text-caption cr-help-text">
-                        To change connection from the command line use `/connect [alias|user@host]`
-                    </div>
-                </div>
-                <div className="newtab-spacer" />
-                <div className="newtab-section">
-                    <TabIconSelector screen={screen} errorMessage={this.errorMessage} />
-                </div>
-                <div className="newtab-spacer" />
-                <div className="newtab-section">
-                    <TabColorSelector screen={screen} errorMessage={this.errorMessage} />
-                </div>
-            </div>
-        );
-    }
-}
-
 @mobxReact.observer
 class TabNameTextField extends React.Component<{ screen: Screen; errorMessage?: OV<string> }, {}> {
     @boundMethod
@@ -163,6 +115,10 @@ class TabRemoteSelector extends React.Component<{ screen: Screen; errorMessage?:
 
     @boundMethod
     selectRemote(cname: string): void {
+        if (cname == null) {
+            GlobalModel.remotesModel.openAddModal({ remoteedit: true });
+            return;
+        }
         mobx.action(() => {
             this.selectedRemoteCN.set(cname);
         })();
@@ -191,6 +147,14 @@ class TabRemoteSelector extends React.Component<{ screen: Screen; errorMessage?:
                 }
                 return a.remoteidx - b.remoteidx;
             });
+
+        options.push({
+            label: "New Connection",
+            value: null,
+            icon: <i className="fa-sharp fa-solid fa-plus"></i>,
+            noop: true,
+        });
+
         return options;
     }
 
@@ -210,6 +174,7 @@ class TabRemoteSelector extends React.Component<{ screen: Screen; errorMessage?:
         let curRemote = GlobalModel.getRemoteByName(selectedRemote);
         return (
             <Dropdown
+                label="Connection"
                 className="conn-dropdown"
                 options={this.getOptions()}
                 defaultValue={curRemote.remotecanonicalname}
@@ -227,4 +192,4 @@ class TabRemoteSelector extends React.Component<{ screen: Screen; errorMessage?:
     }
 }
 
-export { NewTabSettings, TabColorSelector, TabIconSelector, TabNameTextField, TabRemoteSelector };
+export { TabColorSelector, TabIconSelector, TabNameTextField, TabRemoteSelector };

src/app/workspace/screen/screenview.tsx

@@ -12,7 +12,7 @@ import { debounce } from "throttle-debounce";
 import dayjs from "dayjs";
 import { GlobalCommandRunner, ForwardLineContainer, GlobalModel, ScreenLines, Screen, Session } from "@/models";
 import localizedFormat from "dayjs/plugin/localizedFormat";
-import { Button } from "@/elements";
+import { Button, TermStyleBlock } from "@/elements";
 import { Line } from "@/app/line/linecomps";
 import { LinesView } from "@/app/line/linesview";
 import * as util from "@/util/util";
@@ -184,10 +184,19 @@ class ScreenView extends React.Component<{ session: Session; screen: Screen }, {
             winWidth = screenWidth - realWidth + "px";
             sidebarWidth = realWidth - MagicLayout.ScreenSidebarWidthPadding + "px";
         }
+        const termTheme = GlobalModel.getTermTheme();
+        const termRenderVersion = GlobalModel.termRenderVersion.get();
+
         return (
             <div className="screen-view" data-screenid={screen.screenId} ref={this.screenViewRef}>
+                <TermStyleBlock
+                    scope="screen"
+                    termTheme={termTheme}
+                    themeSrcEl={this.screenViewRef.current}
+                    themeKey={screen.screenId}
+                />
                 <ScreenWindowView
-                    key={screen.screenId + ":" + fontSize + ":" + dprStr}
+                    key={screen.screenId + ":" + fontSize + ":" + dprStr + ":" + termRenderVersion}
                     session={session}
                     screen={screen}
                     width={winWidth}

src/app/workspace/workspace.less

@@ -40,7 +40,7 @@
             border-bottom: none;
         }
 
-        .close-icon {
+        .close-button {
             position: absolute;
             right: 10px;
             top: 10px;
@@ -187,4 +187,8 @@
             }
         }
     }
+
+    .terminal-theme-dropdown {
+        width: 412px;
+    }
 }

src/app/workspace/workspaceview.tsx

@@ -15,10 +15,9 @@ import { ScreenTabs } from "./screen/tabs";
 import { ErrorBoundary } from "@/common/error/errorboundary";
 import { boundMethod } from "autobind-decorator";
 import type { Screen } from "@/models";
-import { Button } from "@/elements";
+import { Button, Dropdown, TermStyleBlock } from "@/elements";
 import { commandRtnHandler } from "@/util/util";
 import { getTermThemes } from "@/util/themeutil";
-import { Dropdown } from "@/elements/dropdown";
 import { getRemoteStrWithAlias } from "@/common/prompt/prompt";
 import { TabColorSelector, TabIconSelector, TabNameTextField, TabRemoteSelector } from "./screen/newtabsettings";
 import * as util from "@/util/util";
@@ -175,6 +174,7 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
                 <If condition={termThemes.length > 0}>
                     <div className="newtab-section">
                         <Dropdown
+                            label="Terminal Theme"
                             className="terminal-theme-dropdown"
                             options={termThemes}
                             defaultValue={currTermTheme}
@@ -208,59 +208,6 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
 @mobxReact.observer
 class WorkspaceView extends React.Component<{}, {}> {
     sessionRef = React.createRef<HTMLDivElement>();
-    theme: string;
-    themeReactionDisposer: mobx.IReactionDisposer;
-
-    componentDidMount() {
-        this.setupThemeReaction();
-    }
-
-    componentDidUpdate() {
-        this.setupThemeReaction();
-    }
-
-    setupThemeReaction() {
-        if (this.themeReactionDisposer) {
-            this.themeReactionDisposer();
-        }
-
-        // This handles session and screen-level terminal theming.
-        // Ideally, screen-level theming should be handled in the inner-level component, but
-        // the frequent mounting and unmounting of the screen view make it really difficult to work.
-        this.themeReactionDisposer = mobx.reaction(
-            () => {
-                return {
-                    termTheme: GlobalModel.getTermTheme(),
-                    session: GlobalModel.getActiveSession(),
-                    screen: GlobalModel.getActiveScreen(),
-                };
-            },
-            ({ termTheme, session, screen }) => {
-                let currTheme = termTheme[session.sessionId];
-                if (termTheme[screen.screenId]) {
-                    currTheme = termTheme[screen.screenId];
-                }
-                if (session && currTheme !== this.theme && this.sessionRef.current) {
-                    const reset = currTheme == null;
-                    const theme = currTheme ?? this.theme;
-                    const themeSrcEl = reset ? null : this.sessionRef.current;
-                    const rtn = GlobalModel.updateTermTheme(this.sessionRef.current, theme, reset);
-                    rtn.then(() => {
-                        GlobalModel.termThemeSrcEl.set(themeSrcEl);
-                    }).then(() => {
-                        GlobalModel.bumpTermRenderVersion();
-                    });
-                    this.theme = currTheme;
-                }
-            }
-        );
-    }
-
-    componentWillUnmount() {
-        if (this.themeReactionDisposer) {
-            this.themeReactionDisposer();
-        }
-    }
 
     @boundMethod
     toggleTabSettings() {
@@ -277,11 +224,11 @@ class WorkspaceView extends React.Component<{}, {}> {
             sessionId = session.sessionId;
             activeScreen = session.getActiveScreen();
         }
-
         const isHidden = GlobalModel.activeMainView.get() != "session";
         const mainSidebarModel = GlobalModel.mainSidebarModel;
-        const termRenderVersion = GlobalModel.termRenderVersion.get();
         const showTabSettings = GlobalModel.tabSettingsOpen.get();
+        const termTheme = GlobalModel.getTermTheme();
+
         return (
             <div
                 ref={this.sessionRef}
@@ -291,15 +238,23 @@ class WorkspaceView extends React.Component<{}, {}> {
                     width: `${window.innerWidth - mainSidebarModel.getWidth()}px`,
                 }}
             >
+                <If condition={session != null}>
+                    <TermStyleBlock
+                        scope="session"
+                        themeSrcEl={this.sessionRef.current}
+                        themeKey={session.sessionId}
+                        termTheme={termTheme}
+                    />
+                </If>
                 <If condition={!isHidden}>
                     <SessionKeybindings key="keybindings"></SessionKeybindings>
                 </If>
                 <ScreenTabs key={"tabs-" + sessionId} session={session} />
                 <If condition={activeScreen != null}>
                     <div key="pulldown" className={cn("tab-settings-pulldown", { closed: !showTabSettings })}>
-                        <button className="close-icon" onClick={this.toggleTabSettings}>
+                        <Button className="close-button secondary ghost" onClick={this.toggleTabSettings}>
                             <i className="fa-solid fa-sharp fa-xmark-large" />
-                        </button>
+                        </Button>
                         <TabSettings key={activeScreen.screenId} screen={activeScreen} />
                         <If condition={showTabSettings && !isHidden}>
                             <TabSettingsPulldownKeybindings />
@@ -307,11 +262,7 @@ class WorkspaceView extends React.Component<{}, {}> {
                     </div>
                 </If>
                 <ErrorBoundary key="eb">
-                    <ScreenView
-                        key={`screenview-${sessionId}-${termRenderVersion}`}
-                        session={session}
-                        screen={activeScreen}
-                    />
+                    <ScreenView key={`screenview-${sessionId}`} session={session} screen={activeScreen} />
                     <If condition={activeScreen != null}>
                         <CmdInput key={"cmdinput-" + sessionId} />
                     </If>

src/autocomplete/README.md

@@ -1,3 +0,0 @@
-# Autocomplete parser
-
-This is the autocomplete parser for Wave. Much of the runtime for this parser is forked from the [@microsoft/inshellisense project](https://github.com/microsoft/inshellisense). We've modified the exec code to proxy commands to the active `waveshell` instance. All suggestions, as with inshellisense, come from the [@withfig/autocomplete project](https://github.com/withfig/autocomplete). We will be supplementing these with some of our own autocomplete for our own `/slashcommands` and `metacommands`.

src/autocomplete/index.ts

@@ -1,2 +0,0 @@
-export * from "./runtime/runtime";
-export * from "./utils/shell";

src/autocomplete/runtime/generator.ts

@@ -1,65 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import log from "../utils/log";
-import { runTemplates } from "./template";
-import { buildExecuteShellCommand } from "./utils";
-
-const getGeneratorContext = (cwd: string): Fig.GeneratorContext => {
-    return {
-        environmentVariables: Object.fromEntries(
-            Object.entries(process.env).filter((entry): entry is [string, string] => entry[1] != null)
-        ),
-        currentWorkingDirectory: cwd,
-        currentProcess: "", // TODO: define current process
-        sshPrefix: "", // deprecated, should be empty
-        isDangerous: false,
-        searchTerm: "", // TODO: define search term
-    };
-};
-
-// TODO: add support for caching, trigger, & getQueryTerm
-export const runGenerator = async (
-    generator: Fig.Generator,
-    tokens: string[],
-    cwd: string
-): Promise<Fig.Suggestion[]> => {
-    // TODO: support trigger
-    const { script, postProcess, scriptTimeout, splitOn, custom, template, filterTemplateSuggestions } = generator;
-
-    const executeShellCommand = buildExecuteShellCommand(scriptTimeout ?? 5000);
-    const suggestions = [];
-    try {
-        if (script) {
-            const shellInput = typeof script === "function" ? script(tokens) : script;
-            const scriptOutput = Array.isArray(shellInput)
-                ? await executeShellCommand({ command: shellInput.at(0) ?? "", args: shellInput.slice(1), cwd })
-                : await executeShellCommand({ ...shellInput, cwd });
-
-            const scriptStdout = scriptOutput.stdout.trim();
-            if (postProcess) {
-                suggestions.push(...postProcess(scriptStdout, tokens));
-            } else if (splitOn) {
-                suggestions.push(...scriptStdout.split(splitOn).map((s) => ({ name: s })));
-            }
-        }
-
-        if (custom) {
-            suggestions.push(...(await custom(tokens, executeShellCommand, getGeneratorContext(cwd))));
-        }
-
-        if (template != null) {
-            const templateSuggestions = await runTemplates(template, cwd);
-            if (filterTemplateSuggestions) {
-                suggestions.push(...filterTemplateSuggestions(templateSuggestions));
-            } else {
-                suggestions.push(...templateSuggestions);
-            }
-        }
-        return suggestions;
-    } catch (e) {
-        const err = typeof e === "string" ? e : e instanceof Error ? e.message : e;
-        log.debug({ msg: "generator failed", err, script, splitOn, template });
-    }
-    return suggestions;
-};

src/autocomplete/runtime/model.ts

@@ -1,17 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-export type Suggestion = {
-  name: string;
-  allNames: string[];
-  description?: string;
-  icon: string;
-  priority: number;
-  insertValue?: string;
-};
-
-export type SuggestionBlob = {
-  suggestions: Suggestion[];
-  argumentDescription?: string;
-  charactersToDrop?: number;
-};

src/autocomplete/runtime/parser.ts

@@ -1,75 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-export type CommandToken = {
-  token: string;
-  complete: boolean;
-  isOption: boolean;
-  isPersistent?: boolean;
-  isPath?: boolean;
-  isPathComplete?: boolean;
-};
-
-const cmdDelim = /(\|\|)|(&&)|(;)|(\|)/;
-const spaceRegex = /\s/;
-
-export const parseCommand = (command: string): CommandToken[] => {
-  const lastCommand = command.split(cmdDelim).at(-1)?.trimStart();
-  return lastCommand ? lex(lastCommand) : [];
-};
-
-const lex = (command: string): CommandToken[] => {
-  const tokens: CommandToken[] = [];
-  let [readingQuotedString, readingFlag, readingCmd] = [false, false, false];
-  let readingIdx = 0;
-  let readingQuoteChar = "";
-
-  [...command].forEach((char, idx) => {
-    const reading = readingQuotedString || readingFlag || readingCmd;
-    if (!reading && (char === `'` || char === `"`)) {
-      [readingQuotedString, readingIdx, readingQuoteChar] = [true, idx, char];
-      return;
-    } else if (!reading && char === `-`) {
-      [readingFlag, readingIdx] = [true, idx];
-      return;
-    } else if (!reading && !spaceRegex.test(char)) {
-      [readingCmd, readingIdx] = [true, idx];
-      return;
-    }
-
-    if (readingQuotedString && char === readingQuoteChar && command.at(idx - 1) !== "\\") {
-      readingQuotedString = false;
-      const complete = idx + 1 < command.length && spaceRegex.test(command[idx + 1]);
-      tokens.push({
-        token: command.slice(readingIdx, idx + 1),
-        complete,
-        isOption: false,
-      });
-    } else if ((readingFlag && spaceRegex.test(char)) || char === "=") {
-      readingFlag = false;
-      tokens.push({
-        token: command.slice(readingIdx, idx),
-        complete: true,
-        isOption: true,
-      });
-    } else if (readingCmd && spaceRegex.test(char)) {
-      readingCmd = false;
-      tokens.push({
-        token: command.slice(readingIdx, idx),
-        complete: true,
-        isOption: false,
-      });
-    }
-  });
-
-  const reading = readingQuotedString || readingFlag || readingCmd;
-  if (reading) {
-    tokens.push({
-      token: command.slice(readingIdx),
-      complete: false,
-      isOption: readingFlag,
-    });
-  }
-
-  return tokens;
-};