merge branch 'main' into use-ssh-library

This is the first part of a change that allows the backend to request
user input from the frontend. Essentially, the backend will send a
request for the user to answer some query, and the frontend will send
that answer back. It is blocking, so it needs to be used within a
goroutine.

There is some placeholder code in the frontend that will be updated in
future commits. Similarly, there is some debug code in the backend
remote.go file.

.vscode/settings.json

@@ -1,21 +1,4 @@
 {
     "editor.formatOnSave": true,
-    "[javascript]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "[javascriptreact]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "[typescript]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "[typescriptreact]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "[less]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "[css]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    }
-}
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

src/app/app.tsx

@@ -30,7 +30,6 @@ type OV<V> = mobx.IObservableValue<V>;
 @mobxReact.observer
 class App extends React.Component<{}, {}> {
     dcWait: OV<boolean> = mobx.observable.box(false, { name: "dcWait" });
-    mainContentRef: React.RefObject<HTMLDivElement> = React.createRef();
 
     constructor(props: any) {
         super(props);
@@ -76,13 +75,6 @@ class App extends React.Component<{}, {}> {
         let hasClientStop = GlobalModel.getHasClientStop();
         let dcWait = this.dcWait.get();
         let platform = GlobalModel.getPlatform();
-        let clientData = GlobalModel.clientData.get();
-
-        // 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) {
-            return null;
-        }
 
         if (disconnected || hasClientStop) {
             if (!dcWait) {
@@ -90,8 +82,8 @@ class App extends React.Component<{}, {}> {
             }
             return (
                 <div id="main" className={"platform-" + platform} onContextMenu={this.handleContextMenu}>
-                    <div ref={this.mainContentRef} className="main-content">
-                        <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
+                    <div className="main-content">
+                        <MainSideBar />
                         <div className="session-view" />
                     </div>
                     <If condition={dcWait}>
@@ -110,8 +102,8 @@ class App extends React.Component<{}, {}> {
         }
         return (
             <div id="main" className={"platform-" + platform} onContextMenu={this.handleContextMenu}>
-                <div ref={this.mainContentRef} className="main-content">
-                    <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
+                <div className="main-content">
+                    <MainSideBar />
                     <ErrorBoundary>
                         <PluginsView />
                         <WorkspaceView />

src/app/common/common.tsx

@@ -9,12 +9,11 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
-import { RemoteType } from "../../types/types";
+import { RemoteType, StatusIndicatorLevel } from "../../types/types";
 import ReactDOM from "react-dom";
-import { GlobalModel, GlobalCommandRunner } from "../../model/model";
+import { GlobalModel } from "../../model/model";
 import * as appconst from "../appconst";
 import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "../../util/keyutil";
-import { MagicLayout } from "../magiclayout";
 
 import { ReactComponent as CheckIcon } from "../assets/icons/line/check.svg";
 import { ReactComponent as CopyIcon } from "../assets/icons/history/copy.svg";
@@ -1266,166 +1265,6 @@ In order to use Wave's advanced features like unified history and persistent ses
     });
 }
 
-interface ResizableSidebarProps {
-    parentRef: React.RefObject<HTMLElement>;
-    position: "left" | "right";
-    enableSnap?: boolean;
-    className?: string;
-    children?: (toggleCollapsed: () => void) => React.ReactNode;
-    toggleCollapse?: () => void;
-}
-
-@mobxReact.observer
-class ResizableSidebar extends React.Component<ResizableSidebarProps> {
-    resizeStartWidth: number = 0;
-    startX: number = 0;
-    prevDelta: number = 0;
-    prevDragDirection: string = null;
-    disposeReaction: any;
-
-    @boundMethod
-    startResizing(event: React.MouseEvent<HTMLDivElement>) {
-        event.preventDefault();
-
-        const { parentRef, position } = this.props;
-        const parentRect = parentRef.current?.getBoundingClientRect();
-
-        if (!parentRect) return;
-
-        if (position === "right") {
-            this.startX = parentRect.right - event.clientX;
-        } else {
-            this.startX = event.clientX - parentRect.left;
-        }
-
-        const mainSidebarModel = GlobalModel.mainSidebarModel;
-        const collapsed = mainSidebarModel.getCollapsed();
-
-        this.resizeStartWidth = mainSidebarModel.getWidth();
-        document.addEventListener("mousemove", this.onMouseMove);
-        document.addEventListener("mouseup", this.stopResizing);
-
-        document.body.style.cursor = "col-resize";
-        mobx.action(() => {
-            mainSidebarModel.setTempWidthAndTempCollapsed(this.resizeStartWidth, collapsed);
-            mainSidebarModel.isDragging.set(true);
-        })();
-    }
-
-    @boundMethod
-    onMouseMove(event: MouseEvent) {
-        event.preventDefault();
-
-        const { parentRef, enableSnap, position } = this.props;
-        const parentRect = parentRef.current?.getBoundingClientRect();
-        const mainSidebarModel = GlobalModel.mainSidebarModel;
-
-        if (!mainSidebarModel.isDragging.get() || !parentRect) return;
-
-        let delta: number, newWidth: number;
-
-        if (position === "right") {
-            delta = parentRect.right - event.clientX - this.startX;
-        } else {
-            delta = event.clientX - parentRect.left - this.startX;
-        }
-
-        newWidth = this.resizeStartWidth + delta;
-
-        if (enableSnap) {
-            const minWidth = MagicLayout.MainSidebarMinWidth;
-            const snapPoint = minWidth + MagicLayout.MainSidebarSnapThreshold;
-            const dragResistance = MagicLayout.MainSidebarDragResistance;
-            let dragDirection: string;
-
-            if (delta - this.prevDelta > 0) {
-                dragDirection = "+";
-            } else if (delta - this.prevDelta == 0) {
-                if (this.prevDragDirection == "+") {
-                    dragDirection = "+";
-                } else {
-                    dragDirection = "-";
-                }
-            } else {
-                dragDirection = "-";
-            }
-
-            this.prevDelta = delta;
-            this.prevDragDirection = dragDirection;
-
-            if (newWidth - dragResistance > minWidth && newWidth < snapPoint && dragDirection == "+") {
-                newWidth = snapPoint;
-                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, false);
-            } else if (newWidth + dragResistance < snapPoint && dragDirection == "-") {
-                newWidth = minWidth;
-                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, true);
-            } else if (newWidth > snapPoint) {
-                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, false);
-            }
-        } else {
-            if (newWidth <= MagicLayout.MainSidebarMinWidth) {
-                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, true);
-            } else {
-                mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, false);
-            }
-        }
-    }
-
-    @boundMethod
-    stopResizing() {
-        let mainSidebarModel = GlobalModel.mainSidebarModel;
-
-        GlobalCommandRunner.clientSetSidebar(
-            mainSidebarModel.tempWidth.get(),
-            mainSidebarModel.tempCollapsed.get()
-        ).finally(() => {
-            mobx.action(() => {
-                mainSidebarModel.isDragging.set(false);
-            })();
-        });
-
-        document.removeEventListener("mousemove", this.onMouseMove);
-        document.removeEventListener("mouseup", this.stopResizing);
-        document.body.style.cursor = "";
-    }
-
-    @boundMethod
-    toggleCollapsed() {
-        const mainSidebarModel = GlobalModel.mainSidebarModel;
-
-        const tempCollapsed = mainSidebarModel.getCollapsed();
-        const width = mainSidebarModel.getWidth(true);
-        mainSidebarModel.setTempWidthAndTempCollapsed(width, !tempCollapsed);
-        GlobalCommandRunner.clientSetSidebar(width, !tempCollapsed);
-    }
-
-    render() {
-        const { className, children } = this.props;
-        const mainSidebarModel = GlobalModel.mainSidebarModel;
-        const width = mainSidebarModel.getWidth();
-        const isCollapsed = mainSidebarModel.getCollapsed();
-
-        return (
-            <div className={cn("sidebar", className, { collapsed: isCollapsed })} style={{ width }}>
-                <div className="sidebar-content">{children(this.toggleCollapsed)}</div>
-                <div
-                    className="sidebar-handle"
-                    style={{
-                        position: "absolute",
-                        top: 0,
-                        [this.props.position === "left" ? "right" : "left"]: 0,
-                        bottom: 0,
-                        width: "5px",
-                        cursor: "col-resize",
-                    }}
-                    onMouseDown={this.startResizing}
-                    onDoubleClick={this.toggleCollapsed}
-                ></div>
-            </div>
-        );
-    }
-}
-
 export {
     CmdStrCode,
     Toggle,
@@ -1447,6 +1286,5 @@ export {
     LinkButton,
     Status,
     Modal,
-    ResizableSidebar,
     ShowWaveShellInstallPrompt,
 };

src/app/common/icons/icons.less

@@ -48,33 +48,13 @@
     }
 }
 
-/* 
-The following accounts for a debounce in the status indicator. We will only display the status indicator icon if the parent indicates that it should be visible AND one of the following is true:
-1. There is a status to be shown.
-2. There is a spinner to be shown and the required delay has passed.
-*/
-.status-indicator-visible {
-    &.spinner-visible,
-    &.output,
-    &.error,
-    &.success {
-        .positional-icon-visible;
-    }
-
-    // This is set by the timeout in the status indicator component.
-    &.spinner-visible {
-        #spinner {
-            visibility: visible;
-        }
-    }
-}
-
 .status-indicator {
     #spinner,
     #indicator {
         visibility: hidden;
     }
     .spin #spinner {
+        visibility: visible;
         stroke: @term-white;
     }
     &.error #indicator {

src/app/common/icons/icons.tsx

@@ -2,27 +2,17 @@ import React from "react";
 import { StatusIndicatorLevel } from "../../../types/types";
 import cn from "classnames";
 import { ReactComponent as SpinnerIndicator } from "../../assets/icons/spinner-indicator.svg";
-import { boundMethod } from "autobind-decorator";
-import * as mobx from "mobx";
-import * as mobxReact from "mobx-react";
-
-import { ReactComponent as RotateIconSvg } from "../../assets/icons/line/rotate.svg";
 
 interface PositionalIconProps {
     children?: React.ReactNode;
     className?: string;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
-    divRef?: React.RefObject<HTMLDivElement>;
 }
 
 export class FrontIcon extends React.Component<PositionalIconProps> {
     render() {
         return (
-            <div
-                ref={this.props.divRef}
-                className={cn("front-icon", "positional-icon", this.props.className)}
-                onClick={this.props.onClick}
-            >
+            <div className={cn("front-icon", "positional-icon", this.props.className)}>
                 <div className="positional-icon-inner">{this.props.children}</div>
             </div>
         );
@@ -32,11 +22,7 @@ export class FrontIcon extends React.Component<PositionalIconProps> {
 export class CenteredIcon extends React.Component<PositionalIconProps> {
     render() {
         return (
-            <div
-                ref={this.props.divRef}
-                className={cn("centered-icon", "positional-icon", this.props.className)}
-                onClick={this.props.onClick}
-            >
+            <div className={cn("centered-icon", "positional-icon", this.props.className)} onClick={this.props.onClick}>
                 <div className="positional-icon-inner">{this.props.children}</div>
             </div>
         );
@@ -57,182 +43,35 @@ export class ActionsIcon extends React.Component<ActionsIconProps> {
     }
 }
 
-class SyncSpin extends React.Component<{
-    classRef?: React.RefObject<HTMLDivElement>;
-    children?: React.ReactNode;
-    shouldSync?: boolean;
-}> {
-    listenerAdded: boolean = false;
-
-    componentDidMount() {
-        this.syncSpinner();
-    }
-
-    componentDidUpdate() {
-        this.syncSpinner();
-    }
-
-    componentWillUnmount(): void {
-        const classRef = this.props.classRef;
-        if (classRef.current != null && this.listenerAdded) {
-            const elem = classRef.current;
-            const svgElem = elem.querySelector("svg");
-            if (svgElem != null) {
-                svgElem.removeEventListener("animationstart", this.handleAnimationStart);
-            }
-        }
-    }
-
-    @boundMethod
-    handleAnimationStart(e: AnimationEvent) {
-        const classRef = this.props.classRef;
-        if (classRef.current == null) {
-            return;
-        }
-        const svgElem = classRef.current.querySelector("svg");
-        if (svgElem == null) {
-            return;
-        }
-        const animArr = svgElem.getAnimations();
-        if (animArr == null || animArr.length == 0) {
-            return;
-        }
-        animArr[0].startTime = 0;
-    }
-
-    syncSpinner() {
-        const { classRef, shouldSync } = this.props;
-        const shouldSyncVal = shouldSync ?? true;
-        if (!shouldSyncVal || classRef.current == null) {
-            return;
-        }
-        const elem = classRef.current;
-        const svgElem = elem.querySelector("svg");
-        if (svgElem == null) {
-            return;
-        }
-        if (!this.listenerAdded) {
-            svgElem.addEventListener("animationstart", this.handleAnimationStart);
-            this.listenerAdded = true;
-        }
-        const animArr = svgElem.getAnimations();
-        if (animArr == null || animArr.length == 0) {
-            return;
-        }
-        animArr[0].startTime = 0;
-    }
-
-    render() {
-        return this.props.children;
-    }
-}
-
 interface StatusIndicatorProps {
-    /**
-     * The level of the status indicator. This will determine the color of the status indicator.
-     */
     level: StatusIndicatorLevel;
     className?: string;
-    /**
-     * If true, a spinner will be shown around the status indicator.
-     */
     runningCommands?: boolean;
 }
 
-/**
- * This component is used to show the status of a command. It will show a spinner around the status indicator if there are running commands. It will also delay showing the spinner for a short time to prevent flickering.
- */
-@mobxReact.observer
 export class StatusIndicator extends React.Component<StatusIndicatorProps> {
-    iconRef: React.RefObject<HTMLDivElement> = React.createRef();
-    spinnerVisible: mobx.IObservableValue<boolean> = mobx.observable.box(false);
-    timeout: NodeJS.Timeout;
-
-    clearSpinnerTimeout() {
-        if (this.timeout) {
-            clearTimeout(this.timeout);
-            this.timeout = null;
-        }
-        mobx.action(() => {
-            this.spinnerVisible.set(false);
-        })();
-    }
-
-    /**
-     * This will apply a delay after there is a running command before showing the spinner. This prevents flickering for commands that return quickly.
-     */
-    updateMountCallback() {
-        const runningCommands = this.props.runningCommands ?? false;
-        if (runningCommands && !this.timeout) {
-            this.timeout = setTimeout(
-                mobx.action(() => {
-                    this.spinnerVisible.set(true);
-                }),
-                100
-            );
-        } else if (!runningCommands) {
-            this.clearSpinnerTimeout();
-        }
-    }
-
-    componentDidUpdate(): void {
-        this.updateMountCallback();
-    }
-
-    componentDidMount(): void {
-        this.updateMountCallback();
-    }
-
-    componentWillUnmount(): void {
-        this.clearSpinnerTimeout();
-    }
-
     render() {
         const { level, className, runningCommands } = this.props;
-        const spinnerVisible = this.spinnerVisible.get();
         let statusIndicator = null;
-        if (level != StatusIndicatorLevel.None || spinnerVisible) {
-            let indicatorLevelClass = null;
+        if (level != StatusIndicatorLevel.None || runningCommands) {
+            let levelClass = null;
             switch (level) {
                 case StatusIndicatorLevel.Output:
-                    indicatorLevelClass = "output";
+                    levelClass = "output";
                     break;
                 case StatusIndicatorLevel.Success:
-                    indicatorLevelClass = "success";
+                    levelClass = "success";
                     break;
                 case StatusIndicatorLevel.Error:
-                    indicatorLevelClass = "error";
+                    levelClass = "error";
                     break;
             }
-
-            const spinnerVisibleClass = spinnerVisible ? "spinner-visible" : null;
             statusIndicator = (
-                <CenteredIcon
-                    divRef={this.iconRef}
-                    className={cn(className, indicatorLevelClass, spinnerVisibleClass, "status-indicator")}
-                >
-                    <SpinnerIndicator className={spinnerVisible ? "spin" : null} />
+                <CenteredIcon className={cn(className, levelClass, "status-indicator")}>
+                    <SpinnerIndicator className={runningCommands ? "spin" : null} />
                 </CenteredIcon>
             );
         }
-        return (
-            <SyncSpin classRef={this.iconRef} shouldSync={runningCommands}>
-                {statusIndicator}
-            </SyncSpin>
-        );
-    }
-}
-
-export class RotateIcon extends React.Component<{
-    className?: string;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-}> {
-    iconRef: React.RefObject<HTMLDivElement> = React.createRef();
-    render() {
-        return (
-            <SyncSpin classRef={this.iconRef}>
-                <RotateIconSvg className={this.props.className ?? ""} />
-            </SyncSpin>
-        );
+        return statusIndicator;
     }
 }

src/app/line/linecomps.tsx

@@ -13,6 +13,8 @@ import { GlobalModel, GlobalCommandRunner, Cmd, getTermPtyData } from "../../mod
 import { termHeightFromRows } from "../../util/textmeasure";
 import type {
     LineType,
+    RemoteType,
+    RemotePtrType,
     RenderModeType,
     RendererOpts,
     RendererPluginType,
@@ -22,6 +24,11 @@ import type {
 } from "../../types/types";
 import cn from "classnames";
 
+import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.svg";
+import { ReactComponent as PinIcon } from "../assets/icons/pin.svg";
+import { ReactComponent as PlusIcon } from "../assets/icons/plus.svg";
+import { ReactComponent as MinusIcon } from "../assets/icons/minus.svg";
+
 import type { LineContainerModel } from "../../model/model";
 import { renderCmdText } from "../common/common";
 import { SimpleBlobRenderer } from "../../plugins/core/basicrenderer";
@@ -37,13 +44,12 @@ import * as appconst from "../appconst";
 import { ReactComponent as CheckIcon } from "../assets/icons/line/check.svg";
 import { ReactComponent as CommentIcon } from "../assets/icons/line/comment.svg";
 import { ReactComponent as QuestionIcon } from "../assets/icons/line/question.svg";
+import { ReactComponent as RotateIcon } from "../assets/icons/line/rotate.svg";
 import { ReactComponent as WarningIcon } from "../assets/icons/line/triangle-exclamation.svg";
 import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
 import { ReactComponent as FillIcon } from "../assets/icons/line/fill.svg";
 import { ReactComponent as GearIcon } from "../assets/icons/line/gear.svg";
 
-import { RotateIcon } from "../common/icons/icons";
-
 import "./lines.less";
 
 dayjs.extend(localizedFormat);
@@ -53,12 +59,12 @@ type OV<V> = mobx.IObservableValue<V>;
 @mobxReact.observer
 class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRightClick?: (e: any) => void }, {}> {
     render() {
-        const { line, cmd } = this.props;
-        const lineNumStr = (line.linenumtemp ? "~" : "#") + String(line.linenum);
-        const status = cmd != null ? cmd.getStatus() : "done";
-        const rtnstate = cmd != null ? cmd.getRtnState() : false;
-        const exitcode = cmd != null ? cmd.getExitCode() : 0;
-        const isComment = line.linetype == "text";
+        let { line, cmd } = this.props;
+        let lineNumStr = (line.linenumtemp ? "~" : "#") + String(line.linenum);
+        let status = cmd != null ? cmd.getStatus() : "done";
+        let rtnstate = cmd != null ? cmd.getRtnState() : false;
+        let exitcode = cmd != null ? cmd.getExitCode() : 0;
+        let isComment = line.linetype == "text";
         let icon = null;
         let iconTitle = null;
         if (isComment) {
@@ -136,7 +142,7 @@ class LineCmd extends React.Component<
     }
 
     checkStateDiffLoad(): void {
-        const { screen, line, staticRender, visible } = this.props;
+        let { screen, line, staticRender, visible } = this.props;
         if (staticRender) {
             return;
         }
@@ -147,7 +153,7 @@ class LineCmd extends React.Component<
             }
             return;
         }
-        const cmd = screen.getCmd(line);
+        let cmd = screen.getCmd(line);
         if (cmd == null || !cmd.getRtnState() || this.rtnStateDiffFetched) {
             return;
         }
@@ -161,15 +167,15 @@ class LineCmd extends React.Component<
         if (this.rtnStateDiffFetched) {
             return;
         }
-        const { line } = this.props;
+        let { line } = this.props;
         this.rtnStateDiffFetched = true;
-        const usp = new URLSearchParams({
+        let usp = new URLSearchParams({
             linenum: String(line.linenum),
             screenid: line.screenid,
             lineid: line.lineid,
         });
-        const url = GlobalModel.getBaseHostPort() + "/api/rtnstate?" + usp.toString();
-        const fetchHeaders = GlobalModel.getFetchHeaders();
+        let url = GlobalModel.getBaseHostPort() + "/api/rtnstate?" + usp.toString();
+        let fetchHeaders = GlobalModel.getFetchHeaders();
         fetch(url, { headers: fetchHeaders })
             .then((resp) => {
                 if (!resp.ok) {
@@ -227,7 +233,7 @@ class LineCmd extends React.Component<
                 </React.Fragment>
             );
         }
-        const isMultiLine = lineutil.isMultiLineCmdText(cmd.getCmdStr());
+        let isMultiLine = lineutil.isMultiLineCmdText(cmd.getCmdStr());
         return (
             <div key="meta2" className="meta meta-line2" ref={this.cmdTextRef}>
                 <div className="metapart-mono cmdtext">
@@ -246,7 +252,7 @@ class LineCmd extends React.Component<
 
     // TODO: this might not be necessary anymore because we're using this.lastHeight
     getSnapshotBeforeUpdate(prevProps, prevState): { height: number } {
-        const elem = this.lineRef.current;
+        let elem = this.lineRef.current;
         if (elem == null) {
             return { height: 0 };
         }
@@ -260,25 +266,25 @@ class LineCmd extends React.Component<
     }
 
     checkCmdText() {
-        const metaElem = this.cmdTextRef.current;
+        let metaElem = this.cmdTextRef.current;
         if (metaElem == null || metaElem.childNodes.length == 0) {
             return;
         }
-        const metaElemWidth = metaElem.offsetWidth;
+        let metaElemWidth = metaElem.offsetWidth;
         if (metaElemWidth == 0) {
             return;
         }
-        const metaChild = metaElem.firstChild;
+        let metaChild = metaElem.firstChild;
         if (metaChild == null) {
             return;
         }
-        const children = metaChild.childNodes;
+        let children = metaChild.childNodes;
         let childWidth = 0;
         for (let i = 0; i < children.length; i++) {
             let ch = children[i];
             childWidth += ch.offsetWidth;
         }
-        const isOverflow = childWidth > metaElemWidth;
+        let isOverflow = childWidth > metaElemWidth;
         if (isOverflow && isOverflow != this.isOverflow.get()) {
             mobx.action(() => {
                 this.isOverflow.set(isOverflow);
@@ -291,16 +297,16 @@ class LineCmd extends React.Component<
         if (this.props.onHeightChange == null) {
             return;
         }
-        const { line } = this.props;
+        let { line } = this.props;
         let curHeight = 0;
-        const elem = this.lineRef.current;
+        let elem = this.lineRef.current;
         if (elem != null) {
             curHeight = elem.offsetHeight;
         }
         if (this.lastHeight == curHeight) {
             return;
         }
-        const lastHeight = this.lastHeight;
+        let lastHeight = this.lastHeight;
         this.lastHeight = curHeight;
         this.props.onHeightChange(line.linenum, curHeight, lastHeight);
         // console.log("line height change: ", line.linenum, lastHeight, "=>", curHeight);
@@ -308,13 +314,13 @@ class LineCmd extends React.Component<
 
     @boundMethod
     handleClick() {
-        const { line, noSelect } = this.props;
+        let { line, noSelect } = this.props;
         if (noSelect) {
             return;
         }
-        const sel = window.getSelection();
+        let sel = window.getSelection();
         if (this.lineRef.current != null) {
-            const selText = sel.toString();
+            let selText = sel.toString();
             if (sel.anchorNode != null && this.lineRef.current.contains(sel.anchorNode) && !isBlank(selText)) {
                 return;
             }
@@ -324,7 +330,7 @@ class LineCmd extends React.Component<
 
     @boundMethod
     clickStar() {
-        const { line } = this.props;
+        let { line } = this.props;
         if (!line.star || line.star == 0) {
             GlobalCommandRunner.lineStar(line.lineid, 1);
         } else {
@@ -334,7 +340,7 @@ class LineCmd extends React.Component<
 
     @boundMethod
     clickPin() {
-        const { line } = this.props;
+        let { line } = this.props;
         if (!line.pinned) {
             GlobalCommandRunner.linePin(line.lineid, true);
         } else {
@@ -344,19 +350,19 @@ class LineCmd extends React.Component<
 
     @boundMethod
     clickBookmark() {
-        const { line } = this.props;
+        let { line } = this.props;
         GlobalCommandRunner.lineBookmark(line.lineid);
     }
 
     @boundMethod
     clickDelete() {
-        const { line } = this.props;
+        let { line } = this.props;
         GlobalCommandRunner.lineDelete(line.lineid, true);
     }
 
     @boundMethod
     clickRestart() {
-        const { line } = this.props;
+        let { line } = this.props;
         GlobalCommandRunner.lineRestart(line.lineid, true);
     }
 
@@ -369,7 +375,7 @@ class LineCmd extends React.Component<
 
     @boundMethod
     clickMoveToSidebar() {
-        const { line } = this.props;
+        let { line } = this.props;
         GlobalCommandRunner.screenSidebarAddLine(line.lineid);
     }
 
@@ -384,20 +390,20 @@ class LineCmd extends React.Component<
     }
 
     getIsHidePrompt(): boolean {
-        const { line } = this.props;
+        let { line } = this.props;
         let rendererPlugin: RendererPluginType = null;
-        const isNoneRenderer = line.renderer == "none";
+        let isNoneRenderer = line.renderer == "none";
         if (!isBlank(line.renderer) && line.renderer != "terminal" && !isNoneRenderer) {
             rendererPlugin = PluginModel.getRendererPluginByName(line.renderer);
         }
-        const hidePrompt = rendererPlugin?.hidePrompt;
+        let hidePrompt = rendererPlugin != null && rendererPlugin.hidePrompt;
         return hidePrompt;
     }
 
     getTerminalRendererHeight(cmd: Cmd): number {
-        const { screen, line, width } = this.props;
+        let { screen, line, width, renderMode } = this.props;
         let height = 45 + 24; // height of zero height terminal
-        const usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
+        let usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
         if (usedRows > 0) {
             height = 48 + 24 + termHeightFromRows(usedRows, GlobalModel.termFontSize.get());
         }
@@ -406,7 +412,7 @@ class LineCmd extends React.Component<
 
     @boundMethod
     onAvatarRightClick(e: any): void {
-        const { line, noSelect } = this.props;
+        let { line, noSelect } = this.props;
         if (noSelect) {
             return;
         }
@@ -420,20 +426,20 @@ class LineCmd extends React.Component<
     }
 
     renderSimple() {
-        const { screen, line } = this.props;
-        const cmd = screen.getCmd(line);
+        let { screen, line } = this.props;
+        let cmd = screen.getCmd(line);
         let height: number = 0;
         if (isBlank(line.renderer) || line.renderer == "terminal") {
             height = this.getTerminalRendererHeight(cmd);
         } else {
             // header is 16px tall with hide-prompt, 36px otherwise
-            const { screen, line, width } = this.props;
-            const hidePrompt = this.getIsHidePrompt();
-            const usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
+            let { screen, line, width } = this.props;
+            let hidePrompt = this.getIsHidePrompt();
+            let usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
             height = (hidePrompt ? 16 + 6 : 36 + 6) + usedRows;
         }
-        const formattedTime = lineutil.getLineDateTimeStr(line.ts);
-        const mainDivCn = cn("line", "line-cmd", "line-simple");
+        let formattedTime = lineutil.getLineDateTimeStr(line.ts);
+        let mainDivCn = cn("line", "line-cmd", "line-simple");
         return (
             <div
                 className={mainDivCn}
@@ -473,16 +479,15 @@ class LineCmd extends React.Component<
         if (restartTs != null && restartTs > 0) {
             formattedTime = "restarted @ " + lineutil.getLineDateTimeStr(restartTs);
             timeTitle = "original start time " + lineutil.getLineDateTimeStr(line.ts);
-        } else {
+        }
+        else {
             formattedTime = lineutil.getLineDateTimeStr(line.ts);
         }
         let renderer = line.renderer;
         return (
             <div key="meta1" className="meta meta-line1">
                 <SmallLineAvatar line={line} cmd={cmd} />
-                <div title={timeTitle} className="ts">
-                    {formattedTime}
-                </div>
+                <div title={timeTitle} className="ts">{formattedTime}</div>
                 <div>&nbsp;</div>
                 <If condition={!isBlank(renderer) && renderer != "terminal"}>
                     <div className="renderer">
@@ -501,7 +506,7 @@ class LineCmd extends React.Component<
     }
 
     getRendererOpts(cmd: Cmd): RendererOpts {
-        const { screen } = this.props;
+        let { screen } = this.props;
         return {
             maxSize: screen.getMaxContentSize(),
             idealSize: screen.getIdealContentSize(),
@@ -511,9 +516,9 @@ class LineCmd extends React.Component<
     }
 
     makeRendererModelInitializeParams(): RendererModelInitializeParams {
-        const { screen, line } = this.props;
-        const context = lineutil.getRendererContext(line);
-        const cmd = screen.getCmd(line); // won't be null
+        let { screen, line } = this.props;
+        let context = lineutil.getRendererContext(line);
+        let cmd = screen.getCmd(line); // won't be null
         let savedHeight = screen.getContentHeight(context);
         if (savedHeight == null) {
             if (line.contentheight != null && line.contentheight != -1) {
@@ -522,7 +527,7 @@ class LineCmd extends React.Component<
                 savedHeight = 0;
             }
         }
-        const api = {
+        let api = {
             saveHeight: (height: number) => {
                 screen.setContentHeight(lineutil.getRendererContext(line), height);
             },
@@ -576,12 +581,12 @@ class LineCmd extends React.Component<
     };
 
     render() {
-        const { screen, line, width, staticRender, visible } = this.props;
-        const isVisible = visible.get();
+        let { screen, line, width, staticRender, visible } = this.props;
+        let isVisible = visible.get();
         if (staticRender || !isVisible) {
             return this.renderSimple();
         }
-        const cmd = screen.getCmd(line);
+        let cmd = screen.getCmd(line);
         if (cmd == null) {
             return (
                 <div
@@ -595,17 +600,19 @@ class LineCmd extends React.Component<
                 </div>
             );
         }
-        const isSelected = mobx
+        let status = cmd.getStatus();
+        let lineNumStr = (line.linenumtemp ? "~" : "") + String(line.linenum);
+        let isSelected = mobx
             .computed(() => screen.getSelectedLine() == line.linenum, {
                 name: "computed-isSelected",
             })
             .get();
-        const isPhysicalFocused = mobx
+        let isPhysicalFocused = mobx
             .computed(() => screen.getIsFocused(line.linenum), {
                 name: "computed-getIsFocused",
             })
             .get();
-        const isFocused = mobx
+        let isFocused = mobx
             .computed(
                 () => {
                     let screenFocusType = screen.getFocusType();
@@ -614,7 +621,7 @@ class LineCmd extends React.Component<
                 { name: "computed-isFocused" }
             )
             .get();
-        const shouldCmdFocus = mobx
+        let shouldCmdFocus = mobx
             .computed(
                 () => {
                     let screenFocusType = screen.getFocusType();
@@ -623,7 +630,7 @@ class LineCmd extends React.Component<
                 { name: "computed-shouldCmdFocus" }
             )
             .get();
-        const isInSidebar = mobx
+        let isInSidebar = mobx
             .computed(
                 () => {
                     return screen.isSidebarOpen() && screen.isLineIdInSidebar(line.lineid);
@@ -631,10 +638,11 @@ class LineCmd extends React.Component<
                 { name: "computed-isInSidebar" }
             )
             .get();
-        const isRunning = cmd.isRunning();
-        const isExpanded = this.isCmdExpanded.get();
-        const rsdiff = this.rtnStateDiff.get();
-        const mainDivCn = cn(
+        let isStatic = staticRender;
+        let isRunning = cmd.isRunning();
+        let isExpanded = this.isCmdExpanded.get();
+        let rsdiff = this.rtnStateDiff.get();
+        let mainDivCn = cn(
             "line",
             "line-cmd",
             { selected: isSelected },
@@ -643,18 +651,18 @@ class LineCmd extends React.Component<
             { "has-rtnstate": cmd.getRtnState() }
         );
         let rendererPlugin: RendererPluginType = null;
-        const isNoneRenderer = line.renderer == "none";
+        let isNoneRenderer = line.renderer == "none";
         if (!isBlank(line.renderer) && line.renderer != "terminal" && !isNoneRenderer) {
             rendererPlugin = PluginModel.getRendererPluginByName(line.renderer);
         }
-        const rendererType = lineutil.getRendererType(line);
-        const hidePrompt = rendererPlugin?.hidePrompt;
-        const termFontSize = GlobalModel.termFontSize.get();
+        let rendererType = lineutil.getRendererType(line);
+        let hidePrompt = rendererPlugin != null && rendererPlugin.hidePrompt;
+        let termFontSize = GlobalModel.termFontSize.get();
         let rtnStateDiffSize = termFontSize - 2;
         if (rtnStateDiffSize < 10) {
             rtnStateDiffSize = Math.max(termFontSize, 10);
         }
-        const containerType = screen.getContainerType();
+        let containerType = screen.getContainerType();
         return (
             <div
                 className={mainDivCn}
@@ -673,7 +681,7 @@ class LineCmd extends React.Component<
                         <If condition={!hidePrompt}>{this.renderCmdText(cmd)}</If>
                     </div>
                     <div key="restart" title="Restart Command" className="line-icon" onClick={this.clickRestart}>
-                        <i className="fa-sharp fa-regular fa-arrows-rotate" />
+                        <i className="fa-sharp fa-regular fa-arrows-rotate"/>
                     </div>
                     <div key="delete" title="Delete Line (&#x2318;D)" className="line-icon" onClick={this.clickDelete}>
                         <i className="fa-sharp fa-regular fa-trash" />
@@ -813,7 +821,7 @@ class Line extends React.Component<
     {}
 > {
     render() {
-        const line = this.props.line;
+        let line = this.props.line;
         if (line.archived) {
             return null;
         }
@@ -839,7 +847,7 @@ class LineText extends React.Component<
 > {
     @boundMethod
     clickHandler() {
-        const { line, noSelect } = this.props;
+        let { line, noSelect } = this.props;
         if (noSelect) {
             return;
         }
@@ -848,7 +856,7 @@ class LineText extends React.Component<
 
     @boundMethod
     onAvatarRightClick(e: any): void {
-        const { line, noSelect } = this.props;
+        let { line, noSelect } = this.props;
         if (noSelect) {
             return;
         }
@@ -862,19 +870,19 @@ class LineText extends React.Component<
     }
 
     render() {
-        const { screen, line } = this.props;
-        const formattedTime = lineutil.getLineDateTimeStr(line.ts);
-        const isSelected = mobx
+        let { screen, line, renderMode } = this.props;
+        let formattedTime = lineutil.getLineDateTimeStr(line.ts);
+        let isSelected = mobx
             .computed(() => screen.getSelectedLine() == line.linenum, {
                 name: "computed-isSelected",
             })
             .get();
-        const isFocused = mobx
+        let isFocused = mobx
             .computed(() => screen.getFocusType() == "cmd", {
                 name: "computed-isFocused",
             })
             .get();
-        const mainClass = cn("line", "line-text", "focus-parent");
+        let mainClass = cn("line", "line-text", "focus-parent");
         return (
             <div
                 className={mainClass}

src/app/magiclayout.ts

@@ -27,12 +27,6 @@ let MagicLayout = {
     ScreenSidebarWidthPadding: 5,
     ScreenSidebarMinWidth: 200,
     ScreenSidebarHeaderHeight: 28,
-
-    MainSidebarMinWidth: 75,
-    MainSidebarMaxWidth: 300,
-    MainSidebarSnapThreshold: 90,
-    MainSidebarDragResistance: 50,
-    MainSidebarDefaultWidth: 240,
 };
 
 let m = MagicLayout;

src/app/sidebar/sidebar.less

@@ -3,13 +3,14 @@
 
 .main-sidebar {
     padding: 0;
+    min-width: 20rem;
+    max-width: 20rem;
     display: flex;
     flex-direction: column;
     position: relative;
     font-size: 12.5px;
     line-height: 20px;
     backdrop-filter: blur(4px);
-    z-index: 20;
 
     .title-bar-drag {
         -webkit-app-region: drag;
@@ -23,6 +24,7 @@
     &.collapsed {
         width: 6em;
         min-width: 6em;
+
         .arrow-container,
         .collapse-button {
             transform: rotate(180deg);
@@ -32,7 +34,7 @@
             margin-top: 26px;
 
             .top,
-            .workspaces,
+            .workspaces-item,
             .middle,
             .bottom,
             .separator {
@@ -48,7 +50,7 @@
                 justify-content: center;
                 align-items: center;
 
-                .logo-container {
+                .logo-container img {
                     width: 45px;
                 }
 
@@ -84,14 +86,10 @@
         display: flex;
         flex-direction: row;
 
-        .logo-container {
-            flex-shrink: 0;
-            width: 100px;
-        }
-
         .spacer {
             flex-grow: 1;
         }
+
         img {
             width: 100px;
         }
@@ -129,7 +127,9 @@
                     0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
             }
             .index {
-                font-size: 10px;
+                font-size: 0.8em;
+                text-align: center;
+                width: 2em;
             }
             .hotkey {
                 float: left !important;
@@ -152,6 +152,7 @@
         margin-left: 6px;
         border-radius: 4px;
         opacity: 1;
+        transition: opacity 0.1s ease-in-out, visibility 0.1s step-end;
         width: inherit;
         max-width: inherit;
         min-width: inherit;
@@ -178,7 +179,6 @@
             float: right;
             margin-right: 6px;
             letter-spacing: 6px;
-            margin-left: auto;
         }
         &:hover {
             :not(.disabled) .hotkey {
@@ -190,20 +190,15 @@
         }
 
         &:not(:hover) .status-indicator {
-            .status-indicator-visible;
+            .positional-icon-visible;
         }
-
-        &.workspaces {
-            cursor: default;
-            .add-workspace {
-                cursor: pointer;
-                .positional-icon-visible;
-                float: right;
-                padding: 2px;
-                margin-right: 6px;
-                .fa-plus {
-                    font-size: 13px;
-                }
+        .add_workspace {
+            float: right;
+            padding: 2px;
+            margin-right: 6px;
+            transition: transform 0.3s ease-in-out;
+            svg {
+                fill: @base-color;
             }
         }
 

src/app/sidebar/sidebar.tsx

@@ -7,19 +7,19 @@ import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import dayjs from "dayjs";
-import type { ClientDataType, RemoteType } from "../../types/types";
+import type { RemoteType } from "../../types/types";
 import { If } from "tsx-control-statements/components";
 import { compareLoose } from "semver";
 
 import { ReactComponent as LeftChevronIcon } from "../assets/icons/chevron_left.svg";
 import { ReactComponent as AppsIcon } from "../assets/icons/apps.svg";
 import { ReactComponent as WorkspacesIcon } from "../assets/icons/workspaces.svg";
+import { ReactComponent as AddIcon } from "../assets/icons/add.svg";
 import { ReactComponent as SettingsIcon } from "../assets/icons/settings.svg";
 
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import { GlobalModel, GlobalCommandRunner, Session, VERSION } from "../../model/model";
 import { isBlank, openLink } from "../../util/util";
-import { ResizableSidebar } from "../common/common";
 import * as constants from "../appconst";
 
 import "./sidebar.less";
@@ -27,6 +27,8 @@ import { ActionsIcon, CenteredIcon, FrontIcon, StatusIndicator } from "../common
 
 dayjs.extend(localizedFormat);
 
+type OV<V> = mobx.IObservableValue<V>;
+
 class SideBarItem extends React.Component<{
     frontIcon: React.ReactNode;
     contents: React.ReactNode | string;
@@ -58,14 +60,16 @@ class HotKeyIcon extends React.Component<{ hotkey: string }> {
     }
 }
 
-interface MainSideBarProps {
-    parentRef: React.RefObject<HTMLElement>;
-    clientData: ClientDataType;
-}
-
 @mobxReact.observer
-class MainSideBar extends React.Component<MainSideBarProps, {}> {
-    sidebarRef = React.createRef<HTMLDivElement>();
+class MainSideBar extends React.Component<{}, {}> {
+    collapsed: mobx.IObservableValue<boolean> = mobx.observable.box(false);
+
+    @boundMethod
+    toggleCollapsed() {
+        mobx.action(() => {
+            this.collapsed.set(!this.collapsed.get());
+        })();
+    }
 
     handleSessionClick(sessionId: string) {
         GlobalCommandRunner.switchSession(sessionId);
@@ -172,9 +176,9 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
 
     getSessions() {
         if (!GlobalModel.sessionListLoaded.get()) return <div className="item">loading ...</div>;
-        const sessionList: Session[] = [];
-        const activeSessionId = GlobalModel.activeSessionId.get();
-        for (const session of GlobalModel.sessionList) {
+        let sessionList = [];
+        let activeSessionId = GlobalModel.activeSessionId.get();
+        for (let session of GlobalModel.sessionList) {
             if (!session.archived.get() || session.sessionId == activeSessionId) {
                 sessionList.push(session);
             }
@@ -186,7 +190,6 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
             const sessionRunningCommands = sessionScreens.some((screen) => screen.numRunningCmds.get() > 0);
             return (
                 <SideBarItem
-                    key={session.sessionId}
                     className={`${isActive ? "active" : ""}`}
                     frontIcon={<span className="index">{index + 1}</span>}
                     contents={session.name.get()}
@@ -205,116 +208,97 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
     }
 
     render() {
-        let clientData = this.props.clientData;
+        let isCollapsed = this.collapsed.get();
+        let clientData = GlobalModel.clientData.get();
         let needsUpdate = false;
         if (!clientData?.clientopts.noreleasecheck && !isBlank(clientData?.releaseinfo?.latestversion)) {
             needsUpdate = compareLoose(VERSION, clientData.releaseinfo.latestversion) < 0;
         }
-        let mainSidebar = GlobalModel.mainSidebarModel;
-        let isCollapsed = mainSidebar.getCollapsed();
         return (
-            <ResizableSidebar
-                className="main-sidebar"
-                position="left"
-                enableSnap={true}
-                parentRef={this.props.parentRef}
-            >
-                {(toggleCollapse) => (
-                    <React.Fragment>
-                        <div className="title-bar-drag" />
-                        <div className="contents">
-                            <div className="logo">
-                                <If condition={isCollapsed}>
-                                    <div className="logo-container" onClick={toggleCollapse}>
-                                        <img src="public/logos/wave-logo.png" />
-                                    </div>
-                                </If>
-                                <If condition={!isCollapsed}>
-                                    <div className="logo-container">
-                                        <img src="public/logos/wave-dark.png" />
-                                    </div>
-                                    <div className="spacer" />
-                                    <div className="collapse-button" onClick={toggleCollapse}>
-                                        <LeftChevronIcon className="icon" />
-                                    </div>
-                                </If>
+            <div className={cn("main-sidebar", { collapsed: isCollapsed }, { "is-dev": GlobalModel.isDev })}>
+                <div className="title-bar-drag" />
+                <div className="contents">
+                    <div className="logo">
+                        <If condition={isCollapsed}>
+                            <div className="logo-container" onClick={this.toggleCollapsed}>
+                                <img src="public/logos/wave-logo.png" />
                             </div>
-                            <div className="separator" />
-                            <div className="top">
-                                <SideBarItem
-                                    key="history"
-                                    frontIcon={<i className="fa-sharp fa-regular fa-clock-rotate-left icon" />}
-                                    contents="History"
-                                    endIcons={[<HotKeyIcon key="hotkey" hotkey="H" />]}
-                                    onClick={this.handleHistoryClick}
-                                />
-                                {/* <SideBarItem className="hoverEffect unselectable" frontIcon={<FavoritesIcon className="icon" />} contents="Favorites" endIcon={<span className="hotkey">&#x2318;B</span>} onClick={this.handleBookmarksClick}/> */}
-                                <SideBarItem
-                                    key="connections"
-                                    frontIcon={<i className="fa-sharp fa-regular fa-globe icon " />}
-                                    contents="Connections"
-                                    onClick={this.handleConnectionsClick}
-                                />
+                        </If>
+                        <If condition={!isCollapsed}>
+                            <div className="logo-container">
+                                <img src="public/logos/wave-dark.png" />
                             </div>
-                            <div className="separator" />
+                            <div className="spacer" />
+                            <div className="collapse-button" onClick={this.toggleCollapsed}>
+                                <LeftChevronIcon className="icon" />
+                            </div>
+                        </If>
+                    </div>
+                    <div className="separator" />
+                    <div className="top">
+                        <SideBarItem
+                            frontIcon={<i className="fa-sharp fa-regular fa-clock-rotate-left icon" />}
+                            contents="History"
+                            endIcons={[<HotKeyIcon key="hotkey" hotkey="H" />]}
+                            onClick={this.handleHistoryClick}
+                        />
+                        {/* <SideBarItem className="hoverEffect unselectable" frontIcon={<FavoritesIcon className="icon" />} contents="Favorites" endIcon={<span className="hotkey">&#x2318;B</span>} onClick={this.handleBookmarksClick}/> */}
+                        <SideBarItem
+                            frontIcon={<i className="fa-sharp fa-regular fa-globe icon " />}
+                            contents="Connections"
+                            onClick={this.handleConnectionsClick}
+                        />
+                    </div>
+                    <div className="separator" />
+                    <SideBarItem
+                        frontIcon={<WorkspacesIcon className="icon" />}
+                        contents="Workspaces"
+                        endIcons={[
+                            <div
+                                key="add_workspace"
+                                className="add_workspace hoverEffect"
+                                onClick={this.handleNewSession}
+                            >
+                                <AddIcon />
+                            </div>,
+                        ]}
+                    />
+                    <div className="middle hideScrollbarUntillHover">{this.getSessions()}</div>
+                    <div className="bottom">
+                        <If condition={needsUpdate}>
                             <SideBarItem
-                                key="workspaces"
-                                className="workspaces"
-                                frontIcon={<WorkspacesIcon className="icon" />}
-                                contents="Workspaces"
-                                endIcons={[
-                                    <CenteredIcon
-                                        key="add-workspace"
-                                        className="add-workspace hoverEffect"
-                                        onClick={this.handleNewSession}
-                                    >
-                                        <i className="fa-sharp fa-solid fa-plus"></i>
-                                    </CenteredIcon>,
-                                ]}
+                                className="updateBanner"
+                                frontIcon={<i className="fa-sharp fa-regular fa-circle-up icon" />}
+                                contents="Update Available"
+                                onClick={() => openLink("https://www.waveterm.dev/download?ref=upgrade")}
                             />
-                            <div className="middle hideScrollbarUntillHover">{this.getSessions()}</div>
-                            <div className="bottom">
-                                <If condition={needsUpdate}>
-                                    <SideBarItem
-                                        key="update-available"
-                                        className="updateBanner"
-                                        frontIcon={<i className="fa-sharp fa-regular fa-circle-up icon" />}
-                                        contents="Update Available"
-                                        onClick={() => openLink("https://www.waveterm.dev/download?ref=upgrade")}
-                                    />
-                                </If>
-                                <If condition={GlobalModel.isDev}>
-                                    <SideBarItem
-                                        key="apps"
-                                        frontIcon={<AppsIcon className="icon" />}
-                                        contents="Apps"
-                                        onClick={this.handlePluginsClick}
-                                        endIcons={[<HotKeyIcon key="hotkey" hotkey="A" />]}
-                                    />
-                                </If>
-                                <SideBarItem
-                                    key="settings"
-                                    frontIcon={<SettingsIcon className="icon" />}
-                                    contents="Settings"
-                                    onClick={this.handleSettingsClick}
-                                />
-                                <SideBarItem
-                                    key="documentation"
-                                    frontIcon={<i className="fa-sharp fa-regular fa-circle-question icon" />}
-                                    contents="Documentation"
-                                    onClick={() => openLink("https://docs.waveterm.dev")}
-                                />
-                                <SideBarItem
-                                    key="discord"
-                                    frontIcon={<i className="fa-brands fa-discord icon" />}
-                                    contents="Discord"
-                                    onClick={() => openLink("https://discord.gg/XfvZ334gwU")}
-                                />
-                            </div>
-                        </div>
-                    </React.Fragment>
-                )}
-            </ResizableSidebar>
+                        </If>
+                        <If condition={GlobalModel.isDev}>
+                            <SideBarItem
+                                frontIcon={<AppsIcon className="icon" />}
+                                contents="Apps"
+                                onClick={this.handlePluginsClick}
+                                endIcons={[<HotKeyIcon key="hotkey" hotkey="A" />]}
+                            />
+                        </If>
+                        <SideBarItem
+                            frontIcon={<SettingsIcon className="icon" />}
+                            contents="Settings"
+                            onClick={this.handleSettingsClick}
+                        />
+                        <SideBarItem
+                            frontIcon={<i className="fa-sharp fa-regular fa-circle-question icon" />}
+                            contents="Documentation"
+                            onClick={() => openLink("https://docs.waveterm.dev")}
+                        />
+                        <SideBarItem
+                            frontIcon={<i className="fa-brands fa-discord icon" />}
+                            contents="Discord"
+                            onClick={() => openLink("https://discord.gg/XfvZ334gwU")}
+                        />
+                    </div>
+                </div>
+            </div>
         );
     }
 }

src/app/workspace/cmdinput/cmdinput.tsx

@@ -5,25 +5,28 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
-import { If } from "tsx-control-statements/components";
+import { If, Choose, When, Otherwise } from "tsx-control-statements/components";
 import cn from "classnames";
 import dayjs from "dayjs";
 import type { RemoteType, RemoteInstanceType, RemotePtrType } from "../../../types/types";
 import localizedFormat from "dayjs/plugin/localizedFormat";
-import { GlobalModel, GlobalCommandRunner, Screen } from "../../../model/model";
-import { renderCmdText } from "../../common/common";
+import { GlobalModel, GlobalCommandRunner, Screen, ScreenLines } from "../../../model/model";
+import { renderCmdText, Button } from "../../common/common";
 import { TextAreaInput } from "./textareainput";
 import { InfoMsg } from "./infomsg";
 import { HistoryInfo } from "./historyinfo";
 import { Prompt } from "../../common/prompt/prompt";
 import { ReactComponent as ExecIcon } from "../../assets/icons/exec.svg";
-import { RotateIcon } from "../../common/icons/icons";
+import { ReactComponent as RotateIcon } from "../../assets/icons/line/rotate.svg";
+import "./cmdinput.less";
 import { AIChat } from "./aichat";
 
-import "./cmdinput.less";
-
 dayjs.extend(localizedFormat);
 
+const TDots = "⋮";
+
+type OV<V> = mobx.IObservableValue<V>;
+
 @mobxReact.observer
 class CmdInput extends React.Component<{}, {}> {
     cmdInputRef: React.RefObject<any> = React.createRef();
@@ -34,11 +37,11 @@ class CmdInput extends React.Component<{}, {}> {
     }
 
     updateCmdInputHeight() {
-        const elem = this.cmdInputRef.current;
+        let elem = this.cmdInputRef.current;
         if (elem == null) {
             return;
         }
-        const height = elem.offsetHeight;
+        let height = elem.offsetHeight;
         if (height == GlobalModel.inputModel.cmdInputHeight) {
             return;
         }
@@ -47,7 +50,7 @@ class CmdInput extends React.Component<{}, {}> {
         })();
     }
 
-    componentDidUpdate(): void {
+    componentDidUpdate(prevProps, prevState, snapshot: {}): void {
         this.updateCmdInputHeight();
     }
 
@@ -84,7 +87,7 @@ class CmdInput extends React.Component<{}, {}> {
         e.preventDefault();
         e.stopPropagation();
 
-        const inputModel = GlobalModel.inputModel;
+        let inputModel = GlobalModel.inputModel;
         if (inputModel.historyShow.get()) {
             inputModel.resetHistory();
         } else {
@@ -110,9 +113,9 @@ class CmdInput extends React.Component<{}, {}> {
     }
 
     render() {
-        const model = GlobalModel;
-        const inputModel = model.inputModel;
-        const screen = GlobalModel.getActiveScreen();
+        let model = GlobalModel;
+        let inputModel = model.inputModel;
+        let screen = GlobalModel.getActiveScreen();
         let ri: RemoteInstanceType = null;
         let rptr: RemotePtrType = null;
         if (screen != null) {
@@ -126,13 +129,15 @@ class CmdInput extends React.Component<{}, {}> {
             feState = ri.festate;
         }
         feState = feState || {};
-        const infoShow = inputModel.infoShow.get();
-        const historyShow = !infoShow && inputModel.historyShow.get();
-        const aiChatShow = inputModel.aIChatShow.get();
-        const focusVal = inputModel.physicalInputFocused.get();
-        const inputMode: string = inputModel.inputMode.get();
-        const textAreaInputKey = screen == null ? "null" : screen.screenId;
-        const win = GlobalModel.getScreenLinesById(screen.screenId);
+        let infoShow = inputModel.infoShow.get();
+        let historyShow = !infoShow && inputModel.historyShow.get();
+        let aiChatShow = inputModel.aIChatShow.get();
+        let infoMsg = inputModel.infoMsg.get();
+        let hasInfo = infoMsg != null;
+        let focusVal = inputModel.physicalInputFocused.get();
+        let inputMode: string = inputModel.inputMode.get();
+        let textAreaInputKey = screen == null ? "null" : screen.screenId;
+        let win = GlobalModel.getScreenLinesById(screen.screenId);
         let numRunningLines = 0;
         if (win != null) {
             numRunningLines = mobx.computed(() => win.getRunningCmdLines().length).get();
@@ -227,17 +232,11 @@ class CmdInput extends React.Component<{}, {}> {
                         {focusVal && (
                             <div className="cmd-btn hoverEffect">
                                 <If condition={historyShow}>
-                                    <div className="hint-elem" onMouseDown={this.clickHistoryHint}>
-                                        close (esc)
-                                    </div>
+                                    <div className="hint-elem" onMouseDown={this.clickHistoryHint}>close (esc)</div>
                                 </If>
                                 <If condition={!historyShow}>
-                                    <div className="hint-elem" onMouseDown={this.clickHistoryHint}>
-                                        history (ctrl-r)
-                                    </div>
-                                    <div className="hint-elem" onMouseDown={this.clickAIHint}>
-                                        AI (ctrl-space)
-                                    </div>
+                                    <div className="hint-elem" onMouseDown={this.clickHistoryHint}>history (ctrl-r)</div>
+                                    <div className="hint-elem" onMouseDown={this.clickAIHint}>AI (ctrl-space)</div>
                                 </If>
                             </div>
                         )}

src/app/workspace/screen/tabs.less

@@ -287,7 +287,7 @@
         }
 
         &:not(:hover) .status-indicator {
-            .status-indicator-visible;
+            .positional-icon-visible;
         }
 
         &:hover {

src/app/workspace/workspace.less

@@ -8,12 +8,12 @@
     &.is-hidden {
         display: none;
     }
+    max-width: calc(100% - 20.5em);
     background: @background-session;
     border: 1px solid @base-border;
     border-radius: 8px;
-    // transition: width 0.2s ease;
+    transition: width 0.2s ease;
     margin-bottom: 0.5em;
-    margin-right: 0.5em;
 
     .center-message {
         display: flex;
@@ -24,3 +24,6 @@
         color: @text-secondary;
     }
 }
+.collapsed + .session-view {
+    max-width: calc(100% - 6.7em);
+}

src/app/workspace/workspaceview.tsx

@@ -27,33 +27,20 @@ class WorkspaceView extends React.Component<{}, {}> {
         if (session == null) {
             return (
                 <div className="session-view">
-                    <div className="center-message">
-                        <div>(no active workspace)</div>
-                    </div>
+                    <div className="center-message"><div>(no active workspace)</div></div>
                 </div>
             );
         }
         let activeScreen = session.getActiveScreen();
         let cmdInputHeight = model.inputModel.cmdInputHeight.get();
         if (cmdInputHeight == 0) {
-            cmdInputHeight = MagicLayout.CmdInputHeight; // this is the base size of cmdInput (measured using devtools)
+            cmdInputHeight = MagicLayout.CmdInputHeight;  // this is the base size of cmdInput (measured using devtools)
         }
-        cmdInputHeight += MagicLayout.CmdInputBottom; // reference to .cmd-input, bottom: 12px
+        cmdInputHeight += MagicLayout.CmdInputBottom;  // reference to .cmd-input, bottom: 12px
         let isHidden = GlobalModel.activeMainView.get() != "session";
-        let mainSidebarModel = GlobalModel.mainSidebarModel;
-
-        // Has to calc manually because when tabs overflow, the width of the session view is increased for some reason causing inconsistent width.
-        // 6px is the right margin of session view.
-        let width = window.innerWidth - 6 - mainSidebarModel.getWidth();
 
         return (
-            <div
-                className={cn("session-view", { "is-hidden": isHidden })}
-                data-sessionid={session.sessionId}
-                style={{
-                    width: `${width}px`,
-                }}
-            >
+            <div className={cn("session-view", { "is-hidden": isHidden })} data-sessionid={session.sessionId}>
                 <ScreenTabs key={"tabs-" + session.sessionId} session={session} />
                 <ErrorBoundary>
                     <ScreenView key={"screenview-" + session.sessionId} session={session} screen={activeScreen} />

src/model/model.ts

@@ -7,7 +7,6 @@ import { sprintf } from "sprintf-js";
 import { v4 as uuidv4 } from "uuid";
 import { boundMethod } from "autobind-decorator";
 import { debounce } from "throttle-debounce";
-import * as mobxReact from "mobx-react";
 import {
     handleJsonFetchResponse,
     base64ToString,
@@ -51,6 +50,9 @@ import {
     HistoryViewDataType,
     AlertMessageType,
     HistorySearchParams,
+    UserInputRequest,
+    UserInputResponse,
+    UserInputResponsePacket,
     FocusTypeStrs,
     ScreenLinesType,
     HistoryTypeStrs,
@@ -2618,77 +2620,6 @@ class ClientSettingsViewModel {
         })();
     }
 }
-class MainSidebarModel {
-    tempWidth: OV<number> = mobx.observable.box(null, {
-        name: "MainSidebarModel-tempWidth",
-    });
-    tempCollapsed: OV<boolean> = mobx.observable.box(null, {
-        name: "MainSidebarModel-tempCollapsed",
-    });
-    isDragging: OV<boolean> = mobx.observable.box(false, {
-        name: "MainSidebarModel-isDragging",
-    });
-
-    setTempWidthAndTempCollapsed(newWidth: number, newCollapsed: boolean): void {
-        const width = Math.max(MagicLayout.MainSidebarMinWidth, Math.min(newWidth, MagicLayout.MainSidebarMaxWidth));
-
-        mobx.action(() => {
-            this.tempWidth.set(width);
-            this.tempCollapsed.set(newCollapsed);
-        })();
-    }
-
-    /**
-     * Gets the intended width for the sidebar. If the sidebar is being dragged, returns the tempWidth. If the sidebar is collapsed, returns the default width.
-     * @param ignoreCollapse If true, returns the persisted width even if the sidebar is collapsed.
-     * @returns The intended width for the sidebar or the default width if the sidebar is collapsed. Can be overridden using ignoreCollapse.
-     */
-    getWidth(ignoreCollapse: boolean = false): number {
-        const clientData = GlobalModel.clientData.get();
-        let width = clientData?.clientopts?.mainsidebar?.width ?? MagicLayout.MainSidebarDefaultWidth;
-        if (this.isDragging.get()) {
-            if (this.tempWidth.get() == null && width == null) {
-                return MagicLayout.MainSidebarDefaultWidth;
-            }
-            if (this.tempWidth.get() == null) {
-                return width;
-            }
-            return this.tempWidth.get();
-        }
-        // Set by CLI and collapsed
-        if (this.getCollapsed()) {
-            if (ignoreCollapse) {
-                return width;
-            } else {
-                return MagicLayout.MainSidebarMinWidth;
-            }
-        } else {
-            if (width <= MagicLayout.MainSidebarMinWidth) {
-                width = MagicLayout.MainSidebarDefaultWidth;
-            }
-            const snapPoint = MagicLayout.MainSidebarMinWidth + MagicLayout.MainSidebarSnapThreshold;
-            if (width < snapPoint || width > MagicLayout.MainSidebarMaxWidth) {
-                width = MagicLayout.MainSidebarDefaultWidth;
-            }
-        }
-        return width;
-    }
-
-    getCollapsed(): boolean {
-        const clientData = GlobalModel.clientData.get();
-        const collapsed = clientData?.clientopts?.mainsidebar?.collapsed;
-        if (this.isDragging.get()) {
-            if (this.tempCollapsed.get() == null && collapsed == null) {
-                return false;
-            }
-            if (this.tempCollapsed.get() == null) {
-                return collapsed;
-            }
-            return this.tempCollapsed.get();
-        }
-        return collapsed;
-    }
-}
 
 class BookmarksModel {
     bookmarks: OArr<BookmarkType> = mobx.observable.array([], {
@@ -3459,7 +3390,6 @@ class Model {
     connectionViewModel: ConnectionsViewModel;
     clientSettingsViewModel: ClientSettingsViewModel;
     modalsModel: ModalsModel;
-    mainSidebarModel: MainSidebarModel;
     clientData: OV<ClientDataType> = mobx.observable.box(null, {
         name: "clientData",
     });
@@ -3486,7 +3416,6 @@ class Model {
         this.remotesModalModel = new RemotesModalModel();
         this.remotesModel = new RemotesModel();
         this.modalsModel = new ModalsModel();
-        this.mainSidebarModel = new MainSidebarModel();
         let isWaveSrvRunning = getApi().getWaveSrvStatus();
         this.waveSrvRunning = mobx.observable.box(isWaveSrvRunning, {
             name: "model-wavesrv-running",
@@ -4174,15 +4103,28 @@ class Model {
         if ("openaicmdinfochat" in update) {
             this.inputModel.setOpenAICmdInfoChat(update.openaicmdinfochat);
         }
-        if ("screenstatusindicators" in update) {
-            for (const indicator of update.screenstatusindicators) {
-                this.getScreenById_single(indicator.screenid)?.setStatusIndicator(indicator.status);
-            }
+        if ("screenstatusindicator" in update) {
+            this.getScreenById_single(update.screenstatusindicator.screenid)?.setStatusIndicator(
+                update.screenstatusindicator.status
+            );
         }
         if ("screennumrunningcommands" in update) {
-            for (const snc of update.screennumrunningcommands) {
-                this.getScreenById_single(snc.screenid)?.setNumRunningCmds(snc.num);
-            }
+            this.getScreenById_single(update.screennumrunningcommands.screenid)?.setNumRunningCmds(
+                update.screennumrunningcommands.num
+            );
+        }
+        if ("userinputrequest" in update) {
+            let userInputRequest: UserInputRequest = update.userinputrequest;
+            let userInputResponse: UserInputResponse = {
+                type: "text",
+                text: "what wonderful weather we're having",
+            };
+            let userInputResponsePacket: UserInputResponsePacket = {
+                type: "userinputresp",
+                requestid: userInputRequest.requestid,
+                response: userInputResponse,
+            };
+            this.ws.pushMessage(userInputResponsePacket);
         }
     }
 
@@ -5054,11 +4996,6 @@ class CommandRunner {
         return GlobalModel.submitCommand("client", "setconfirmflag", [flag, valueStr], kwargs, false);
     }
 
-    clientSetSidebar(width: number, collapsed: boolean): Promise<CommandRtnType> {
-        let kwargs = { nohist: "1", width: `${width}`, collapsed: collapsed ? "1" : "0" };
-        return GlobalModel.submitCommand("client", "setsidebar", null, kwargs, false);
-    }
-
     editBookmark(bookmarkId: string, desc: string, cmdstr: string) {
         let kwargs = {
             nohist: "1",

src/types/types.ts

@@ -326,8 +326,9 @@ type ModelUpdateType = {
     remoteview?: RemoteViewType;
     openaicmdinfochat?: OpenAICmdInfoChatMessageType[];
     alertmessage?: AlertMessageType;
-    screenstatusindicators?: ScreenStatusIndicatorUpdateType[];
-    screennumrunningcommands?: ScreenNumRunningCommandsUpdateType[];
+    screenstatusindicator?: ScreenStatusIndicatorUpdateType;
+    screennumrunningcommands?: ScreenNumRunningCommandsUpdateType;
+    userinputrequest?: UserInputRequest;
 };
 
 type HistoryViewDataType = {
@@ -524,10 +525,6 @@ type ClientOptsType = {
     noreleasecheck: boolean;
     acceptedtos: number;
     confirmflags: ConfirmFlagsType;
-    mainsidebar: {
-        collapsed: boolean;
-        width: number;
-    };
 };
 
 type ReleaseInfoType = {
@@ -590,6 +587,24 @@ type HistorySearchParams = {
     filterCmds?: boolean;
 };
 
+type UserInputRequest = {
+    requestid: string;
+    querytext: string;
+    responsetype: string;
+};
+
+type UserInputResponse = {
+    type: string;
+    text?: string;
+    confirm?: boolean;
+};
+
+type UserInputResponsePacket = {
+    type: string;
+    requestid: string;
+    response: UserInputResponse;
+};
+
 type RenderModeType = "normal" | "collapsed" | "expanded";
 
 type WebScreen = {
@@ -775,6 +790,9 @@ export type {
     RenderModeType,
     AlertMessageType,
     HistorySearchParams,
+    UserInputRequest,
+    UserInputResponse,
+    UserInputResponsePacket,
     ScreenLinesType,
     FocusTypeStrs,
     HistoryTypeStrs,

wavesrv/pkg/cmdrunner/cmdrunner.go

@@ -92,7 +92,6 @@ var TabIcons = []string{"square", "sparkle", "fire", "ghost", "cloud", "compass"
 var RemoteColorNames = []string{"red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange"}
 var RemoteSetArgs = []string{"alias", "connectmode", "key", "password", "autoinstall", "color"}
 var ConfirmFlags = []string{"hideshellprompt"}
-var SidebarNames = []string{"main"}
 
 var ScreenCmds = []string{"run", "comment", "cd", "cr", "clear", "sw", "reset", "signal", "chat"}
 var NoHistCmds = []string{"_compgen", "line", "history", "_killserver"}
@@ -219,7 +218,6 @@ func init() {
 	registerCmdFn("client:notifyupdatewriter", ClientNotifyUpdateWriterCommand)
 	registerCmdFn("client:accepttos", ClientAcceptTosCommand)
 	registerCmdFn("client:setconfirmflag", ClientConfirmFlagCommand)
-	registerCmdFn("client:setsidebar", ClientSetSidebarCommand)
 
 	registerCmdFn("sidebar:open", SidebarOpenCommand)
 	registerCmdFn("sidebar:close", SidebarCloseCommand)
@@ -4465,62 +4463,6 @@ func ClientConfirmFlagCommand(ctx context.Context, pk *scpacket.FeCommandPacketT
 	return update, nil
 }
 
-func ClientSetSidebarCommand(ctx context.Context, pk *scpacket.FeCommandPacketType) (sstore.UpdatePacket, error) {
-	clientData, err := sstore.EnsureClientData(ctx)
-	if err != nil {
-		return nil, fmt.Errorf("cannot retrieve client data: %v", err)
-	}
-
-	// Handle collapsed
-	collapsed, ok := pk.Kwargs["collapsed"]
-	if !ok {
-		return nil, fmt.Errorf("collapsed key not provided")
-	}
-	collapsedValue := resolveBool(collapsed, false)
-
-	// Handle width
-	var width int
-	if w, exists := pk.Kwargs["width"]; exists {
-		width, err = resolveNonNegInt(w, 0)
-		if err != nil {
-			return nil, fmt.Errorf("error resolving width: %v", err)
-		}
-	} else if clientData.ClientOpts.MainSidebar != nil {
-		width = clientData.ClientOpts.MainSidebar.Width
-	}
-
-	// Initialize SidebarCollapsed if it's nil
-	if clientData.ClientOpts.MainSidebar == nil {
-		clientData.ClientOpts.MainSidebar = new(sstore.SidebarValueType)
-	}
-
-	// Set the sidebar values
-	var sv sstore.SidebarValueType
-	sv.Collapsed = collapsedValue
-	if width != 0 {
-		sv.Width = width
-	}
-	clientData.ClientOpts.MainSidebar = &sv
-
-	// Update client data
-	err = sstore.SetClientOpts(ctx, clientData.ClientOpts)
-	if err != nil {
-		return nil, fmt.Errorf("error updating client data: %v", err)
-	}
-
-	// Retrieve updated client data
-	clientData, err = sstore.EnsureClientData(ctx)
-	if err != nil {
-		return nil, fmt.Errorf("cannot retrieve updated client data: %v", err)
-	}
-
-	update := &sstore.ModelUpdate{
-		ClientData: clientData,
-	}
-
-	return update, nil
-}
-
 func validateOpenAIAPIToken(key string) error {
 	if len(key) > MaxOpenAIAPITokenLen {
 		return fmt.Errorf("invalid openai token, too long")

wavesrv/pkg/remote/remote.go

@@ -40,7 +40,7 @@ import (
 	"golang.org/x/mod/semver"
 )
 
-const UseSshLibrary = false
+const UseSshLibrary = true
 
 const RemoteTypeMShell = "mshell"
 const DefaultTerm = "xterm-256color"

wavesrv/pkg/remote/sshclient.go

@@ -6,6 +6,7 @@ package remote
 import (
 	"errors"
 	"fmt"
+	"log"
 	"os"
 	"os/user"
 	"strconv"
@@ -60,6 +61,14 @@ func ConnectToClient(opts *sstore.SSHOpts) (*ssh.Client, error) {
 		identityFile = configIdentity
 	}
 
+	// test code
+	request := &sstore.UserInputRequestType{
+		ResponseType: "text",
+		QueryText:    "unused",
+	}
+	response, _ := sstore.MainBus.GetUserInput(request)
+	log.Printf("response: %s\n", response.Text)
+
 	hostKeyCallback := ssh.InsecureIgnoreHostKey()
 	var authMethods []ssh.AuthMethod
 	publicKeyAuth, err := createPublicKeyAuth(identityFile, opts.SSHPassword)

wavesrv/pkg/scpacket/scpacket.go

@@ -20,6 +20,7 @@ const WatchScreenPacketStr = "watchscreen"
 const FeInputPacketStr = "feinput"
 const RemoteInputPacketStr = "remoteinput"
 const CmdInputTextPacketStr = "cmdinputtext"
+const UserInputResponsePacketStr = "userinputresp"
 
 type FeCommandPacketType struct {
 	Type        string            `json:"type"`
@@ -92,12 +93,19 @@ type CmdInputTextPacketType struct {
 	Text     utilfn.StrWithPos `json:"text"`
 }
 
+type UserInputResponsePacketType struct {
+	Type      string                        `json:"type"`
+	RequestId string                        `json:"requestid"`
+	Response  *sstore.UserInputResponseType `json:"response"`
+}
+
 func init() {
 	packet.RegisterPacketType(FeCommandPacketStr, reflect.TypeOf(FeCommandPacketType{}))
 	packet.RegisterPacketType(WatchScreenPacketStr, reflect.TypeOf(WatchScreenPacketType{}))
 	packet.RegisterPacketType(FeInputPacketStr, reflect.TypeOf(FeInputPacketType{}))
 	packet.RegisterPacketType(RemoteInputPacketStr, reflect.TypeOf(RemoteInputPacketType{}))
 	packet.RegisterPacketType(CmdInputTextPacketStr, reflect.TypeOf(CmdInputTextPacketType{}))
+	packet.RegisterPacketType(UserInputResponsePacketStr, reflect.TypeOf(UserInputResponsePacketType{}))
 }
 
 func (*CmdInputTextPacketType) GetType() string {
@@ -139,3 +147,7 @@ func MakeRemoteInputPacket() *RemoteInputPacketType {
 func (*RemoteInputPacketType) GetType() string {
 	return RemoteInputPacketStr
 }
+
+func (*UserInputResponsePacketType) GetType() string {
+	return UserInputResponsePacketStr
+}

wavesrv/pkg/scws/scws.go

@@ -158,7 +158,6 @@ func (ws *WSState) ReplaceShell(shell *wsshell.WSShell) {
 	return
 }
 
-// returns all state required to display current UI
 func (ws *WSState) handleConnection() error {
 	ctx, cancelFn := context.WithTimeout(context.Background(), 5*time.Second)
 	defer cancelFn()
@@ -168,8 +167,6 @@ func (ws *WSState) handleConnection() error {
 	}
 	remotes := remote.GetAllRemoteRuntimeState()
 	update.Remotes = remotes
-	// restore status indicators
-	update.ScreenStatusIndicators, update.ScreenNumRunningCommands = sstore.GetCurrentIndicatorState()
 	update.Connect = true
 	err = ws.Shell.WriteJson(update)
 	if err != nil {
@@ -281,6 +278,15 @@ func (ws *WSState) processMessage(msgBytes []byte) error {
 		sstore.ScreenMemSetCmdInputText(cmdInputPk.ScreenId, cmdInputPk.Text, cmdInputPk.SeqNum)
 		return nil
 	}
+	if pk.GetType() == scpacket.UserInputResponsePacketStr {
+		userInputRespPk := pk.(*scpacket.UserInputResponsePacketType)
+		uich, ok := sstore.MainBus.UserInputCh[userInputRespPk.RequestId]
+		if !ok {
+			return fmt.Errorf("received User Input Response with invalid Id (%s): %v\n", userInputRespPk.RequestId, err)
+		}
+		uich <- userInputRespPk.Response
+		return nil
+	}
 	return fmt.Errorf("got ws bad message: %v", pk.GetType())
 }