bump to v0.6.2

* Apply Red's suggestion and move width logic to getWidth

* remove unnecessary

* a little more

* remove comment

.github/workflows/build-helper.yml

@@ -1,9 +1,9 @@
 name: "Build Helper"
 on: workflow_dispatch
 env:
-    WAVETERM_VERSION: 0.6.0
-    GO_VERSION: '1.21.5'
-    NODE_VERSION: '21.5.0'
+    WAVETERM_VERSION: 0.6.2
+    GO_VERSION: "1.21.5"
+    NODE_VERSION: "21.5.0"
 jobs:
     runbuild-darwin-x64:
         name: "Build MacOS x64"
@@ -12,23 +12,23 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-go@v4
               with:
-                go-version: ${{env.GO_VERSION}}
-                cache-dependency-path: |
-                    wavesrv/go.sum
-                    waveshell/go.sum
+                  go-version: ${{env.GO_VERSION}}
+                  cache-dependency-path: |
+                      wavesrv/go.sum
+                      waveshell/go.sum
             - run: brew tap scripthaus-dev/scripthaus
             - run: brew install scripthaus
             - uses: actions/setup-node@v4
               with:
-                node-version: ${{env.NODE_VERSION}}
-                cache: 'yarn'
+                  node-version: ${{env.NODE_VERSION}}
+                  cache: "yarn"
             - run: yarn --frozen-lockfile
             - run: scripthaus run build-package
             - uses: actions/upload-artifact@v4
               with:
-                name: waveterm-build-darwin-x64
-                path: out/make/zip/darwin/x64/*.zip
-                retention-days: 2
+                  name: waveterm-build-darwin-x64
+                  path: out/make/zip/darwin/x64/*.zip
+                  retention-days: 2
     runbuild-darwin-arm64:
         name: "Build MacOS arm64"
         runs-on: macos-latest-xlarge
@@ -36,23 +36,23 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-go@v4
               with:
-                go-version: ${{env.GO_VERSION}}
-                cache-dependency-path: |
-                    wavesrv/go.sum
-                    waveshell/go.sum
+                  go-version: ${{env.GO_VERSION}}
+                  cache-dependency-path: |
+                      wavesrv/go.sum
+                      waveshell/go.sum
             - run: brew tap scripthaus-dev/scripthaus
             - run: brew install scripthaus
             - uses: actions/setup-node@v4
               with:
-                node-version: ${{env.NODE_VERSION}}
-                cache: 'yarn'
+                  node-version: ${{env.NODE_VERSION}}
+                  cache: "yarn"
             - run: yarn --frozen-lockfile
             - run: scripthaus run build-package
             - uses: actions/upload-artifact@v4
               with:
-                name: waveterm-build-darwin-arm64
-                path: out/make/zip/darwin/arm64/*.zip
-                retention-days: 2
+                  name: waveterm-build-darwin-arm64
+                  path: out/make/zip/darwin/arm64/*.zip
+                  retention-days: 2
     runbuild-linux:
         name: "Build Linux x64"
         runs-on: ubuntu-latest
@@ -61,42 +61,40 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/checkout@v4
               with:
-                repository: scripthaus-dev/scripthaus
-                path: scripthaus
+                  repository: scripthaus-dev/scripthaus
+                  path: scripthaus
             - uses: actions/setup-go@v4
               with:
-                go-version: ${{env.GO_VERSION}}
-                cache-dependency-path: |
-                    wavesrv/go.sum
-                    waveshell/go.sum
-                    scripthaus/go.sum
+                  go-version: ${{env.GO_VERSION}}
+                  cache-dependency-path: |
+                      wavesrv/go.sum
+                      waveshell/go.sum
+                      scripthaus/go.sum
             - run: |
-                go work use ./scripthaus;
-                cd scripthaus;
-                go get ./...;
-                CGO_ENABLED=1 go build -o scripthaus cmd/main.go
+                  go work use ./scripthaus;
+                  cd scripthaus;
+                  go get ./...;
+                  CGO_ENABLED=1 go build -o scripthaus cmd/main.go
             - uses: actions/setup-node@v4
               with:
-                node-version: ${{env.NODE_VERSION}}
-                cache: 'yarn'
+                  node-version: ${{env.NODE_VERSION}}
+                  cache: "yarn"
             - run: yarn --frozen-lockfile
             - run: ./scripthaus/scripthaus run build-package-linux
             - uses: actions/download-artifact@v4
               with:
-                merge-multiple: true
-                path: buildtemp
+                  merge-multiple: true
+                  path: buildtemp
             - run: |
-                mv out/make/zip/linux/x64/Wave-linux-x64-$WAVETERM_VERSION.zip buildtemp/waveterm-linux-x64-v$WAVETERM_VERSION.zip
+                  mv out/make/zip/linux/x64/Wave-linux-x64-$WAVETERM_VERSION.zip buildtemp/waveterm-linux-x64-v$WAVETERM_VERSION.zip
             - run: (cd buildtemp; zip ../waveterm-builds.zip *)
             - run: aws s3 cp waveterm-builds.zip s3://waveterm-github-artifacts/
               env:
-                AWS_ACCESS_KEY_ID: "${{ secrets.S3_USERID }}"
-                AWS_SECRET_ACCESS_KEY: "${{ secrets.S3_SECRETKEY }}"
-                AWS_DEFAULT_REGION: us-west-2
+                  AWS_ACCESS_KEY_ID: "${{ secrets.S3_USERID }}"
+                  AWS_SECRET_ACCESS_KEY: "${{ secrets.S3_SECRETKEY }}"
+                  AWS_DEFAULT_REGION: us-west-2
             - uses: actions/upload-artifact@v4
               with:
-                name: waveterm-builds
-                path: buildtemp
-                retention-days: 2
-
-
+                  name: waveterm-builds
+                  path: buildtemp
+                  retention-days: 2

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["esbenp.prettier-vscode", "golang.go", "dbaeumer.vscode-eslint"]
+}

.vscode/settings.json

@@ -0,0 +1,21 @@
+{
+    "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"
+    }
+}

acknowledgements/disclaimers/backend.md

@@ -1131,6 +1131,67 @@ Exhibit B - “Incompatible With Secondary Licenses” Notice
  OTHER DEALINGS IN THE SOFTWARE.
 
 
+```
+
+-----
+
+## github.com/kevinburke/ssh_config
+
+* Name: github.com/kevinburke/ssh_config
+* Version: v0.0.0-20240109090616-36c8da3d7376
+* License: [MIT](https://github.com/wavetermdev/ssh_config/blob/36c8da3d7376/LICENSE)
+
+```txt
+Copyright (c) 2017 Kevin Burke.
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+===================
+
+The lexer and parser borrow heavily from github.com/pelletier/go-toml. The
+license for that project is copied below.
+
+The MIT License (MIT)
+
+Copyright (c) 2013 - 2017 Thomas Pelletier, Eric Anderton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
 ```
 
 -----

buildres/build-universal.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 # assumes we have Wave-darwin-x64-[version].zip and Wave-darwin-arm64-[version].zip in current directory
-VERSION=0.6.0
+VERSION=0.6.2
 rm -rf temp
 rm -rf builds
 mkdir temp

package.json

@@ -2,7 +2,7 @@
     "name": "waveterm",
     "author": "Command Line Inc",
     "productName": "Wave",
-    "version": "0.6.0",
+    "version": "0.6.2",
     "main": "dist/emain.js",
     "license": "Apache-2.0",
     "dependencies": {

src/app/app.less

@@ -99,9 +99,6 @@ body a {
 
 body code {
     font-family: @terminal-font;
-}
-
-body code {
     background-color: transparent;
 }
 
@@ -123,11 +120,19 @@ svg.icon {
 }
 
 .hideScrollbarUntillHover {
-    overflow: hidden;
-    &:hover,
-    &:focus,
-    &:focus-within {
-        overflow: auto;
+    overflow: scroll;
+
+    &::-webkit-scrollbar-thumb,
+    &::-webkit-scrollbar-track {
+        display: none;
+    }
+
+    &::-webkit-scrollbar-corner {
+        display: none;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+        display: block;
     }
 }
 
@@ -625,13 +630,13 @@ a.a-block {
 
 .spin {
     animation: infiniteRotate 2s linear infinite;
-    
+
     @keyframes infiniteRotate {
         from {
-            transform:rotate(0deg);
+            transform: rotate(0deg);
         }
         to {
-            transform:rotate(360deg);
+            transform: rotate(360deg);
         }
     }
 }
@@ -647,7 +652,6 @@ a.a-block {
     margin-right: 10px;
     border-radius: 8px;
     border: 1px solid rgba(241, 246, 243, 0.08);
-    background: rgba(13, 13, 13, 0.85);
 
     .header {
         margin: 24px 18px;

src/app/app.tsx

@@ -30,6 +30,7 @@ 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);
@@ -75,6 +76,13 @@ 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) {
@@ -82,8 +90,8 @@ class App extends React.Component<{}, {}> {
             }
             return (
                 <div id="main" className={"platform-" + platform} onContextMenu={this.handleContextMenu}>
-                    <div className="main-content">
-                        <MainSideBar />
+                    <div ref={this.mainContentRef} className="main-content">
+                        <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
                         <div className="session-view" />
                     </div>
                     <If condition={dcWait}>
@@ -102,8 +110,8 @@ class App extends React.Component<{}, {}> {
         }
         return (
             <div id="main" className={"platform-" + platform} onContextMenu={this.handleContextMenu}>
-                <div className="main-content">
-                    <MainSideBar />
+                <div ref={this.mainContentRef} className="main-content">
+                    <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
                     <ErrorBoundary>
                         <PluginsView />
                         <WorkspaceView />

src/app/assets/icons/spinner-indicator.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="440" height="440" version="1.1" viewBox="0 0 116.42 116.42" xmlns="http://www.w3.org/2000/svg">
+ <circle id="indicator" cx="58.266" cy="58.266" r="28.311" stroke-width=".19016"/>
+ <path id="spinner" d="m107.2 58.21a48.988 48.988 0 0 1-48.988 48.988" fill="none" stroke="#000" stroke-width="16.856" style="paint-order:normal"/>
+</svg>

src/app/common/common.less

@@ -405,7 +405,7 @@
         padding: 6px 6px 6px 10px;
         border-radius: 4px;
     }
-    
+
     pre.selected {
         outline: 2px solid @term-green;
     }
@@ -609,7 +609,6 @@
 
 .wave-dropdown {
     position: relative;
-    background-color: transparent;
     height: 44px;
     min-width: 150px;
     width: 100%;
@@ -715,9 +714,7 @@
     top: 100%;
     left: 0;
     right: 0;
-    z-index: 0;
     margin-top: 2px;
-    padding: 0;
     max-height: 200px;
     overflow-y: auto;
     padding: 6px;
@@ -775,7 +772,6 @@
     min-width: 412px;
     gap: 6px;
     border: 1px solid var(--element-separator, rgba(241, 246, 243, 0.15));
-    border-radius: 6px;
     background: var(--element-hover-2, rgba(255, 255, 255, 0.06));
     box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
         0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
@@ -931,7 +927,6 @@
     background: none;
     color: inherit;
     border: none;
-    padding: 0;
     font: inherit;
     cursor: pointer;
     outline: inherit;
@@ -1156,18 +1151,3 @@
         }
     }
 }
-
-.status-indicator {
-    position: relative;
-    top: 1px;
-
-    &.error {
-        color: @term-red;
-    }
-    &.success {
-        color: @term-green;
-    }
-    &.output {
-        color: @term-white;
-    }
-}

src/app/common/common.tsx

@@ -9,10 +9,12 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
-import { RemoteType, StatusIndicatorLevel } from "../../types/types";
+import { RemoteType } from "../../types/types";
 import ReactDOM from "react-dom";
-import { GlobalModel } from "../../model/model";
+import { GlobalModel, GlobalCommandRunner } 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";
@@ -117,7 +119,7 @@ class Checkbox extends React.Component<
     constructor(props) {
         super(props);
         this.state = {
-            checkedInternal: this.props.checked !== undefined ? this.props.checked : Boolean(this.props.defaultChecked),
+            checkedInternal: this.props.checked ?? Boolean(this.props.defaultChecked),
         };
         this.generatedId = `checkbox-${Checkbox.idCounter++}`;
     }
@@ -287,15 +289,16 @@ class Button extends React.Component<ButtonProps> {
     }
 
     render() {
-        const { leftIcon, rightIcon, theme, children, disabled, variant, color, style } = this.props;
+        const { leftIcon, rightIcon, theme, children, disabled, variant, color, style, autoFocus, className } =
+            this.props;
 
         return (
             <button
-                className={cn("wave-button", theme, variant, color, { disabled: disabled })}
+                className={cn("wave-button", theme, variant, color, { disabled: disabled }, className)}
                 onClick={this.handleClick}
                 disabled={disabled}
                 style={style}
-                autoFocus={this.props.autoFocus}
+                autoFocus={autoFocus}
             >
                 {leftIcon && <span className="icon-left">{leftIcon}</span>}
                 {children}
@@ -714,13 +717,14 @@ class InlineSettingsTextEdit extends React.Component<
 
     @boundMethod
     handleKeyDown(e: any): void {
-        if (e.code == "Enter") {
+        let waveEvent = adaptFromReactOrNativeKeyEvent(e);
+        if (checkKeyPressed(waveEvent, "Enter")) {
             e.preventDefault();
             e.stopPropagation();
             this.confirmChange();
             return;
         }
-        if (e.code == "Escape") {
+        if (checkKeyPressed(waveEvent, "Escape")) {
             e.preventDefault();
             e.stopPropagation();
             this.cancelChange();
@@ -868,7 +872,7 @@ class Markdown extends React.Component<
         if (codeSelect) {
             return <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex}>{props.children}</CodeBlockMarkdown>;
         } else {
-            let clickHandler = (e: React.MouseEvent<HTMLElement>) => {
+            const clickHandler = (e: React.MouseEvent<HTMLElement>) => {
                 let blockText = (e.target as HTMLElement).innerText;
                 if (blockText) {
                     blockText = blockText.replace(/\n$/, ""); // remove trailing newline
@@ -896,7 +900,9 @@ class Markdown extends React.Component<
         };
         return (
             <div className={cn("markdown content", this.props.extraClassName)} style={this.props.style}>
-                <ReactMarkdown children={text} remarkPlugins={[remarkGfm]} components={markdownComponents} />
+                <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+                    {text}
+                </ReactMarkdown>
             </div>
         );
     }
@@ -1239,38 +1245,6 @@ class Modal extends React.Component<ModalProps> {
     }
 }
 
-interface StatusIndicatorProps {
-    level: StatusIndicatorLevel;
-    className?: string;
-}
-
-class StatusIndicator extends React.Component<StatusIndicatorProps> {
-    render() {
-        const statusIndicatorLevel = this.props.level;
-        let statusIndicator = null;
-        if (statusIndicatorLevel != StatusIndicatorLevel.None) {
-            let statusIndicatorClass = null;
-            switch (statusIndicatorLevel) {
-                case StatusIndicatorLevel.Output:
-                    statusIndicatorClass = "output";
-                    break;
-                case StatusIndicatorLevel.Success:
-                    statusIndicatorClass = "success";
-                    break;
-                case StatusIndicatorLevel.Error:
-                    statusIndicatorClass = "error";
-                    break;
-            }
-            statusIndicator = (
-                <div
-                    className={`${this.props.className} fa-sharp fa-solid fa-circle-small status-indicator ${statusIndicatorClass}`}
-                ></div>
-            );
-        }
-        return statusIndicator;
-    }
-}
-
 function ShowWaveShellInstallPrompt(callbackFn: () => void) {
     let message: string = `
 In order to use Wave's advanced features like unified history and persistent sessions, Wave installs a small, open-source helper program called WaveShell on your remote machine.  WaveShell does not open any external ports and only communicates with your *local* Wave terminal instance over ssh.  For more information please see [the docs](https://docs.waveterm.dev/reference/waveshell).        
@@ -1292,6 +1266,166 @@ 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,
@@ -1313,6 +1447,6 @@ export {
     LinkButton,
     Status,
     Modal,
-    StatusIndicator,
+    ResizableSidebar,
     ShowWaveShellInstallPrompt,
 };

src/app/common/icons/icons.less

@@ -0,0 +1,92 @@
+@import "../../../app/common/themes/themes.less";
+
+.front-icon {
+    margin-right: 5px;
+}
+
+.positional-icon-visible {
+    display: inline-block;
+}
+
+.positional-icon-hidden {
+    display: none;
+}
+
+.positional-icon {
+    display: none;
+    width: 20px;
+    height: 20px;
+    .svg-icon svg {
+        width: 14px;
+        height: 14px;
+    }
+    font-size: 16px;
+}
+
+.positional-icon-inner {
+    display: flex;
+    width: inherit;
+    height: 100%;
+    line-height: inherit;
+    align-items: center;
+    justify-content: center;
+    & > div,
+    i,
+    .svg-icon,
+    span {
+        width: 20px;
+        display: flex;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+.actions {
+    .icon {
+        font-size: 14px;
+    }
+}
+
+/* 
+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 {
+        stroke: @term-white;
+    }
+    &.error #indicator {
+        visibility: visible;
+        fill: @term-red;
+    }
+    &.success #indicator {
+        visibility: visible;
+        fill: @term-green;
+    }
+    &.output #indicator {
+        visibility: visible;
+        fill: @term-white;
+    }
+}

src/app/common/icons/icons.tsx

@@ -0,0 +1,238 @@
+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="positional-icon-inner">{this.props.children}</div>
+            </div>
+        );
+    }
+}
+
+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="positional-icon-inner">{this.props.children}</div>
+            </div>
+        );
+    }
+}
+
+interface ActionsIconProps {
+    onClick: React.MouseEventHandler<HTMLDivElement>;
+}
+
+export class ActionsIcon extends React.Component<ActionsIconProps> {
+    render() {
+        return (
+            <CenteredIcon className="actions" onClick={this.props.onClick}>
+                <div className="icon hoverEffect fa-sharp fa-solid fa-1x fa-ellipsis-vertical"></div>
+            </CenteredIcon>
+        );
+    }
+}
+
+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;
+            switch (level) {
+                case StatusIndicatorLevel.Output:
+                    indicatorLevelClass = "output";
+                    break;
+                case StatusIndicatorLevel.Success:
+                    indicatorLevelClass = "success";
+                    break;
+                case StatusIndicatorLevel.Error:
+                    indicatorLevelClass = "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>
+            );
+        }
+        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>
+        );
+    }
+}

src/app/common/modals/editremoteconn.less

@@ -20,6 +20,12 @@
                 width: 100%;
             }
 
+            .import-edit-warning {
+                display: flex;
+                flex-direction: row;
+                align-items: flex-start;
+            }
+
             .name-actions-section {
                 margin-bottom: 10px;
                 display: flex;

src/app/common/modals/editremoteconn.tsx

@@ -58,6 +58,10 @@ class EditRemoteConnModal extends React.Component<{}, {}> {
         return this.selectedRemote?.local;
     }
 
+    isImportedRemote(): boolean {
+        return this.selectedRemote?.sshconfigsrc == "sshconfig-import";
+    }
+
     componentDidMount(): void {
         mobx.action(() => {
             this.tempAlias.set(this.selectedRemote?.remotealias);
@@ -259,6 +263,27 @@ class EditRemoteConnModal extends React.Component<{}, {}> {
         );
     }
 
+    renderImportedRemoteEditWarning() {
+        return (
+            <div className="import-edit-warning">
+                <Tooltip
+                    message={
+                        <span>
+                            Most options for connections imported from an ssh config file cannot be edited. For these
+                            changes, you must edit the config file and import it again. The shell preference can be
+                            edited, but will return to the default if you import again. It will stay changed if you
+                            follow <a href="https://docs.waveterm.dev/features/sshconfig-imports">this procedure</a>.
+                        </span>
+                    }
+                    icon={<i className="fa-sharp fa-regular fa-fw fa-triangle-exclamation" />}
+                >
+                    <i className="fa-sharp fa-regular fa-fw fa-triangle-exclamation" />
+                </Tooltip>
+                &nbsp;SSH Config Import Behavior
+            </div>
+        );
+    }
+
     renderAuthMode() {
         let authMode = this.tempAuthMode.get();
         return (
@@ -344,6 +369,7 @@ class EditRemoteConnModal extends React.Component<{}, {}> {
             return null;
         }
         let isLocal = this.isLocalRemote();
+        let isImported = this.isImportedRemote();
         return (
             <Modal className="erconn-modal">
                 <Modal.Header title="Edit Connection" onClose={this.model.closeModal} />
@@ -351,9 +377,10 @@ class EditRemoteConnModal extends React.Component<{}, {}> {
                     <div className="name-actions-section">
                         <div className="name text-primary">{util.getRemoteName(this.selectedRemote)}</div>
                     </div>
-                    <If condition={!isLocal}>{this.renderAlias()}</If>
-                    <If condition={!isLocal}>{this.renderAuthMode()}</If>
-                    <If condition={!isLocal}>{this.renderConnectMode()}</If>
+                    <If condition={!isLocal && !isImported}>{this.renderAlias()}</If>
+                    <If condition={!isLocal && !isImported}>{this.renderAuthMode()}</If>
+                    <If condition={!isLocal && !isImported}>{this.renderConnectMode()}</If>
+                    <If condition={isImported}>{this.renderImportedRemoteEditWarning()}</If>
                     {this.renderShellPref()}
                     <If condition={!util.isBlank(this.remoteEdit?.errorstr)}>
                         <div className="settings-field settings-error">Error: {this.remoteEdit?.errorstr}</div>

src/app/common/modals/modals.tsx

@@ -1026,17 +1026,6 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
             cancelInstallButton = <></>;
         }
         if (remote.sshconfigsrc == "sshconfig-import") {
-            updateAuthButton = (
-                <Button theme="secondary" disabled={true}>
-                    Edit
-                    <Tooltip
-                        message={`Connections imported from an ssh config file cannot be edited inside waveterm. To edit these, you must edit the config file and import it again.`}
-                        icon={<i className="fa-sharp fa-regular fa-fw fa-ban" />}
-                    >
-                        <i className="fa-sharp fa-regular fa-fw fa-ban" />
-                    </Tooltip>
-                </Button>
-            );
             archiveButton = (
                 <Button theme="secondary" onClick={() => this.clickArchive()}>
                     Delete

src/app/common/modals/viewremoteconndetail.tsx

@@ -209,17 +209,6 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
             cancelInstallButton = <></>;
         }
         if (remote.sshconfigsrc == "sshconfig-import") {
-            updateAuthButton = (
-                <Button theme="secondary" disabled={true}>
-                    Edit
-                    <Tooltip
-                        message={`Connections imported from an ssh config file cannot be edited inside waveterm. To edit these, you must edit the config file and import it again.`}
-                        icon={<i className="fa-sharp fa-regular fa-fw fa-ban" />}
-                    >
-                        <i className="fa-sharp fa-regular fa-fw fa-ban" />
-                    </Tooltip>
-                </Button>
-            );
             archiveButton = (
                 <Button theme="secondary" onClick={() => this.clickArchive()}>
                     Delete

src/app/history/history.tsx

@@ -15,6 +15,7 @@ import localizedFormat from "dayjs/plugin/localizedFormat";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import { Line } from "../line/linecomps";
 import { CmdStrCode } from "../common/common";
+import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "../../util/keyutil";
 
 import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.svg";
 import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
@@ -95,14 +96,14 @@ function formatSessionName(snames: Record<string, string>, sessionId: string): s
 }
 
 @mobxReact.observer
-class HistoryCheckbox extends React.Component<{ checked: boolean, partialCheck?: boolean, onClick?: () => void }, {}> {
+class HistoryCheckbox extends React.Component<{ checked: boolean; partialCheck?: boolean; onClick?: () => void }, {}> {
     @boundMethod
     clickHandler(): void {
         if (this.props.onClick) {
             this.props.onClick();
         }
     }
-    
+
     render() {
         if (this.props.checked) {
             return <CheckedCheckbox onClick={this.clickHandler} className="history-checkbox checkbox-icon" />;
@@ -110,14 +111,18 @@ class HistoryCheckbox extends React.Component<{ checked: boolean, partialCheck?:
         if (this.props.partialCheck) {
             return (
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                    <rect x="0.5" y="0.5" width="15" height="15" rx="3.5" fill="#D5FEAF" fill-opacity="0.026"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 8C4 6.89543 4.89543 6 6 6H10C11.1046 6 12 6.89543 12 8C12 9.10457 11.1046 10 10 10H6C4.89543 10 4 9.10457 4 8Z" fill="#58C142"/>
-                    <rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="#3B3F3A"/>
+                    <rect x="0.5" y="0.5" width="15" height="15" rx="3.5" fill="#D5FEAF" fill-opacity="0.026" />
+                    <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M4 8C4 6.89543 4.89543 6 6 6H10C11.1046 6 12 6.89543 12 8C12 9.10457 11.1046 10 10 10H6C4.89543 10 4 9.10457 4 8Z"
+                        fill="#58C142"
+                    />
+                    <rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="#3B3F3A" />
                 </svg>
-            );            
-        }
-        else {
-            return <div onClick={this.clickHandler} className="history-checkbox state-unchecked"/>
+            );
+        } else {
+            return <div onClick={this.clickHandler} className="history-checkbox state-unchecked" />;
         }
     }
 }
@@ -207,7 +212,8 @@ class HistoryView extends React.Component<{}, {}> {
 
     @boundMethod
     searchKeyDown(e: any) {
-        if (e.code == "Enter") {
+        let waveEvent = adaptFromReactOrNativeKeyEvent(e);
+        if (checkKeyPressed(waveEvent, "Enter")) {
             e.preventDefault();
             GlobalModel.historyViewModel.submitSearch();
             return;
@@ -452,8 +458,8 @@ class HistoryView extends React.Component<{}, {}> {
                                 <div onClick={this.toggleSessionDropdown}>
                                     <span className="label">
                                         {hvm.searchSessionId.get() == null
-                                        ? "Limit Workspace"
-                                        : formatSessionName(snames, hvm.searchSessionId.get())}
+                                            ? "Limit Workspace"
+                                            : formatSessionName(snames, hvm.searchSessionId.get())}
                                     </span>
                                     <AngleDownIcon className="icon" />
                                 </div>
@@ -486,8 +492,8 @@ class HistoryView extends React.Component<{}, {}> {
                                 <div onClick={this.toggleRemoteDropdown}>
                                     <span className="label">
                                         {hvm.searchRemoteId.get() == null
-                                        ? "Limit Remote"
-                                        : formatRemoteName(rnames, { remoteid: hvm.searchRemoteId.get() })}
+                                            ? "Limit Remote"
+                                            : formatRemoteName(rnames, { remoteid: hvm.searchRemoteId.get() })}
                                     </span>
                                     <AngleDownIcon className="icon" />
                                 </div>
@@ -513,9 +519,7 @@ class HistoryView extends React.Component<{}, {}> {
                                 </div>
                             </div>
                             <div className="fromts">
-                                <div className="fromts-text">
-                                    From:&nbsp;
-                                </div>
+                                <div className="fromts-text">From:&nbsp;</div>
                                 <div className="hoverEffect">
                                     <input
                                         type="date"
@@ -550,7 +554,10 @@ class HistoryView extends React.Component<{}, {}> {
                 </div>
                 <div className={cn("control-bar", "is-top", { "is-hidden": items.length == 0 })}>
                     <div className="control-checkbox" onClick={this.handleControlCheckbox} title="Toggle Selection">
-                        <HistoryCheckbox checked={numSelected > 0 && numSelected == items.length} partialCheck={numSelected > 0}/>
+                        <HistoryCheckbox
+                            checked={numSelected > 0 && numSelected == items.length}
+                            partialCheck={numSelected > 0}
+                        />
                     </div>
                     <div
                         className={cn(
@@ -562,7 +569,7 @@ class HistoryView extends React.Component<{}, {}> {
                     >
                         <span>
                             <TrashIcon className="trash-icon" title="Purge Selected Items" />
-            &nbsp;Delete Items
+                            &nbsp;Delete Items
                         </span>
                     </div>
                     <div className="spacer" />
@@ -591,7 +598,7 @@ class HistoryView extends React.Component<{}, {}> {
                                 className={cn("history-item", { "is-selected": hvm.selectedItems.get(item.historyid) })}
                             >
                                 <td className="selectbox" onClick={() => this.handleSelect(item.historyid)}>
-                                    <HistoryCheckbox checked={hvm.selectedItems.get(item.historyid)}/>
+                                    <HistoryCheckbox checked={hvm.selectedItems.get(item.historyid)} />
                                 </td>
                                 <td className="cmdstr">
                                     <HistoryCmdStr
@@ -608,13 +615,31 @@ class HistoryView extends React.Component<{}, {}> {
                                 <td className="ts text-standard">{getHistoryViewTs(nowDate, item.ts)}</td>
                                 <td className="downarrow" onClick={() => this.activateItem(item.historyid)}>
                                     <If condition={activeItemId != item.historyid}>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                            <path d="M12.1297 6.62492C12.3999 6.93881 12.3645 7.41237 12.0506 7.68263L8.48447 10.7531C8.20296 10.9955 7.78645 10.9952 7.50519 10.7526L3.94636 7.68213C3.63274 7.41155 3.59785 6.93796 3.86843 6.62434C4.13901 6.31072 4.6126 6.27583 4.92622 6.54641L7.99562 9.19459L11.0719 6.54591C11.3858 6.27565 11.8594 6.31102 12.1297 6.62492Z" fill="#C3C8C2"/>
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            width="16"
+                                            height="16"
+                                            viewBox="0 0 16 16"
+                                            fill="none"
+                                        >
+                                            <path
+                                                d="M12.1297 6.62492C12.3999 6.93881 12.3645 7.41237 12.0506 7.68263L8.48447 10.7531C8.20296 10.9955 7.78645 10.9952 7.50519 10.7526L3.94636 7.68213C3.63274 7.41155 3.59785 6.93796 3.86843 6.62434C4.13901 6.31072 4.6126 6.27583 4.92622 6.54641L7.99562 9.19459L11.0719 6.54591C11.3858 6.27565 11.8594 6.31102 12.1297 6.62492Z"
+                                                fill="#C3C8C2"
+                                            />
                                         </svg>
                                     </If>
                                     <If condition={activeItemId == item.historyid}>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                            <path d="M3.87035 9.37508C3.60009 9.06119 3.63546 8.58763 3.94936 8.31737L7.51553 5.24692C7.79704 5.00455 8.21355 5.00476 8.49481 5.24742L12.0536 8.31787C12.3673 8.58845 12.4022 9.06204 12.1316 9.37566C11.861 9.68928 11.3874 9.72417 11.0738 9.45359L8.00438 6.80541L4.92806 9.45409C4.61416 9.72435 4.14061 9.68898 3.87035 9.37508Z" fill="#C3C8C2"/>
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            width="16"
+                                            height="16"
+                                            viewBox="0 0 16 16"
+                                            fill="none"
+                                        >
+                                            <path
+                                                d="M3.87035 9.37508C3.60009 9.06119 3.63546 8.58763 3.94936 8.31737L7.51553 5.24692C7.79704 5.00455 8.21355 5.00476 8.49481 5.24742L12.0536 8.31787C12.3673 8.58845 12.4022 9.06204 12.1316 9.37566C11.861 9.68928 11.3874 9.72417 11.0738 9.45359L8.00438 6.80541L4.92806 9.45409C4.61416 9.72435 4.14061 9.68898 3.87035 9.37508Z"
+                                                fill="#C3C8C2"
+                                            />
                                         </svg>
                                     </If>
                                 </td>

src/app/line/linecomps.tsx

@@ -13,8 +13,6 @@ import { GlobalModel, GlobalCommandRunner, Cmd, getTermPtyData } from "../../mod
 import { termHeightFromRows } from "../../util/textmeasure";
 import type {
     LineType,
-    RemoteType,
-    RemotePtrType,
     RenderModeType,
     RendererOpts,
     RendererPluginType,
@@ -24,11 +22,6 @@ 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";
@@ -44,12 +37,13 @@ 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);
@@ -59,12 +53,12 @@ type OV<V> = mobx.IObservableValue<V>;
 @mobxReact.observer
 class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRightClick?: (e: any) => void }, {}> {
     render() {
-        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";
+        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 icon = null;
         let iconTitle = null;
         if (isComment) {
@@ -142,7 +136,7 @@ class LineCmd extends React.Component<
     }
 
     checkStateDiffLoad(): void {
-        let { screen, line, staticRender, visible } = this.props;
+        const { screen, line, staticRender, visible } = this.props;
         if (staticRender) {
             return;
         }
@@ -153,7 +147,7 @@ class LineCmd extends React.Component<
             }
             return;
         }
-        let cmd = screen.getCmd(line);
+        const cmd = screen.getCmd(line);
         if (cmd == null || !cmd.getRtnState() || this.rtnStateDiffFetched) {
             return;
         }
@@ -167,15 +161,15 @@ class LineCmd extends React.Component<
         if (this.rtnStateDiffFetched) {
             return;
         }
-        let { line } = this.props;
+        const { line } = this.props;
         this.rtnStateDiffFetched = true;
-        let usp = new URLSearchParams({
+        const usp = new URLSearchParams({
             linenum: String(line.linenum),
             screenid: line.screenid,
             lineid: line.lineid,
         });
-        let url = GlobalModel.getBaseHostPort() + "/api/rtnstate?" + usp.toString();
-        let fetchHeaders = GlobalModel.getFetchHeaders();
+        const url = GlobalModel.getBaseHostPort() + "/api/rtnstate?" + usp.toString();
+        const fetchHeaders = GlobalModel.getFetchHeaders();
         fetch(url, { headers: fetchHeaders })
             .then((resp) => {
                 if (!resp.ok) {
@@ -233,7 +227,7 @@ class LineCmd extends React.Component<
                 </React.Fragment>
             );
         }
-        let isMultiLine = lineutil.isMultiLineCmdText(cmd.getCmdStr());
+        const isMultiLine = lineutil.isMultiLineCmdText(cmd.getCmdStr());
         return (
             <div key="meta2" className="meta meta-line2" ref={this.cmdTextRef}>
                 <div className="metapart-mono cmdtext">
@@ -252,7 +246,7 @@ class LineCmd extends React.Component<
 
     // TODO: this might not be necessary anymore because we're using this.lastHeight
     getSnapshotBeforeUpdate(prevProps, prevState): { height: number } {
-        let elem = this.lineRef.current;
+        const elem = this.lineRef.current;
         if (elem == null) {
             return { height: 0 };
         }
@@ -266,25 +260,25 @@ class LineCmd extends React.Component<
     }
 
     checkCmdText() {
-        let metaElem = this.cmdTextRef.current;
+        const metaElem = this.cmdTextRef.current;
         if (metaElem == null || metaElem.childNodes.length == 0) {
             return;
         }
-        let metaElemWidth = metaElem.offsetWidth;
+        const metaElemWidth = metaElem.offsetWidth;
         if (metaElemWidth == 0) {
             return;
         }
-        let metaChild = metaElem.firstChild;
+        const metaChild = metaElem.firstChild;
         if (metaChild == null) {
             return;
         }
-        let children = metaChild.childNodes;
+        const children = metaChild.childNodes;
         let childWidth = 0;
         for (let i = 0; i < children.length; i++) {
             let ch = children[i];
             childWidth += ch.offsetWidth;
         }
-        let isOverflow = childWidth > metaElemWidth;
+        const isOverflow = childWidth > metaElemWidth;
         if (isOverflow && isOverflow != this.isOverflow.get()) {
             mobx.action(() => {
                 this.isOverflow.set(isOverflow);
@@ -297,16 +291,16 @@ class LineCmd extends React.Component<
         if (this.props.onHeightChange == null) {
             return;
         }
-        let { line } = this.props;
+        const { line } = this.props;
         let curHeight = 0;
-        let elem = this.lineRef.current;
+        const elem = this.lineRef.current;
         if (elem != null) {
             curHeight = elem.offsetHeight;
         }
         if (this.lastHeight == curHeight) {
             return;
         }
-        let lastHeight = this.lastHeight;
+        const lastHeight = this.lastHeight;
         this.lastHeight = curHeight;
         this.props.onHeightChange(line.linenum, curHeight, lastHeight);
         // console.log("line height change: ", line.linenum, lastHeight, "=>", curHeight);
@@ -314,13 +308,13 @@ class LineCmd extends React.Component<
 
     @boundMethod
     handleClick() {
-        let { line, noSelect } = this.props;
+        const { line, noSelect } = this.props;
         if (noSelect) {
             return;
         }
-        let sel = window.getSelection();
+        const sel = window.getSelection();
         if (this.lineRef.current != null) {
-            let selText = sel.toString();
+            const selText = sel.toString();
             if (sel.anchorNode != null && this.lineRef.current.contains(sel.anchorNode) && !isBlank(selText)) {
                 return;
             }
@@ -330,7 +324,7 @@ class LineCmd extends React.Component<
 
     @boundMethod
     clickStar() {
-        let { line } = this.props;
+        const { line } = this.props;
         if (!line.star || line.star == 0) {
             GlobalCommandRunner.lineStar(line.lineid, 1);
         } else {
@@ -340,7 +334,7 @@ class LineCmd extends React.Component<
 
     @boundMethod
     clickPin() {
-        let { line } = this.props;
+        const { line } = this.props;
         if (!line.pinned) {
             GlobalCommandRunner.linePin(line.lineid, true);
         } else {
@@ -350,16 +344,22 @@ class LineCmd extends React.Component<
 
     @boundMethod
     clickBookmark() {
-        let { line } = this.props;
+        const { line } = this.props;
         GlobalCommandRunner.lineBookmark(line.lineid);
     }
 
     @boundMethod
     clickDelete() {
-        let { line } = this.props;
+        const { line } = this.props;
         GlobalCommandRunner.lineDelete(line.lineid, true);
     }
 
+    @boundMethod
+    clickRestart() {
+        const { line } = this.props;
+        GlobalCommandRunner.lineRestart(line.lineid, true);
+    }
+
     @boundMethod
     clickMinimize() {
         mobx.action(() => {
@@ -369,7 +369,7 @@ class LineCmd extends React.Component<
 
     @boundMethod
     clickMoveToSidebar() {
-        let { line } = this.props;
+        const { line } = this.props;
         GlobalCommandRunner.screenSidebarAddLine(line.lineid);
     }
 
@@ -384,20 +384,20 @@ class LineCmd extends React.Component<
     }
 
     getIsHidePrompt(): boolean {
-        let { line } = this.props;
+        const { line } = this.props;
         let rendererPlugin: RendererPluginType = null;
-        let isNoneRenderer = line.renderer == "none";
+        const isNoneRenderer = line.renderer == "none";
         if (!isBlank(line.renderer) && line.renderer != "terminal" && !isNoneRenderer) {
             rendererPlugin = PluginModel.getRendererPluginByName(line.renderer);
         }
-        let hidePrompt = rendererPlugin != null && rendererPlugin.hidePrompt;
+        const hidePrompt = rendererPlugin?.hidePrompt;
         return hidePrompt;
     }
 
     getTerminalRendererHeight(cmd: Cmd): number {
-        let { screen, line, width, renderMode } = this.props;
+        const { screen, line, width } = this.props;
         let height = 45 + 24; // height of zero height terminal
-        let usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
+        const usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
         if (usedRows > 0) {
             height = 48 + 24 + termHeightFromRows(usedRows, GlobalModel.termFontSize.get());
         }
@@ -406,7 +406,7 @@ class LineCmd extends React.Component<
 
     @boundMethod
     onAvatarRightClick(e: any): void {
-        let { line, noSelect } = this.props;
+        const { line, noSelect } = this.props;
         if (noSelect) {
             return;
         }
@@ -420,20 +420,20 @@ class LineCmd extends React.Component<
     }
 
     renderSimple() {
-        let { screen, line } = this.props;
-        let cmd = screen.getCmd(line);
+        const { screen, line } = this.props;
+        const 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
-            let { screen, line, width } = this.props;
-            let hidePrompt = this.getIsHidePrompt();
-            let usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
+            const { screen, line, width } = this.props;
+            const hidePrompt = this.getIsHidePrompt();
+            const usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
             height = (hidePrompt ? 16 + 6 : 36 + 6) + usedRows;
         }
-        let formattedTime = lineutil.getLineDateTimeStr(line.ts);
-        let mainDivCn = cn("line", "line-cmd", "line-simple");
+        const formattedTime = lineutil.getLineDateTimeStr(line.ts);
+        const mainDivCn = cn("line", "line-cmd", "line-simple");
         return (
             <div
                 className={mainDivCn}
@@ -467,12 +467,22 @@ class LineCmd extends React.Component<
     renderMeta1(cmd: Cmd) {
         let { line } = this.props;
         let termOpts = cmd.getTermOpts();
-        let formattedTime = lineutil.getLineDateTimeStr(line.ts);
+        let formattedTime: string = "";
+        let restartTs = cmd.getRestartTs();
+        let timeTitle: string = null;
+        if (restartTs != null && restartTs > 0) {
+            formattedTime = "restarted @ " + lineutil.getLineDateTimeStr(restartTs);
+            timeTitle = "original start time " + lineutil.getLineDateTimeStr(line.ts);
+        } else {
+            formattedTime = lineutil.getLineDateTimeStr(line.ts);
+        }
         let renderer = line.renderer;
         return (
             <div key="meta1" className="meta meta-line1">
                 <SmallLineAvatar line={line} cmd={cmd} />
-                <div className="ts">{formattedTime}</div>
+                <div title={timeTitle} className="ts">
+                    {formattedTime}
+                </div>
                 <div>&nbsp;</div>
                 <If condition={!isBlank(renderer) && renderer != "terminal"}>
                     <div className="renderer">
@@ -491,7 +501,7 @@ class LineCmd extends React.Component<
     }
 
     getRendererOpts(cmd: Cmd): RendererOpts {
-        let { screen } = this.props;
+        const { screen } = this.props;
         return {
             maxSize: screen.getMaxContentSize(),
             idealSize: screen.getIdealContentSize(),
@@ -501,9 +511,9 @@ class LineCmd extends React.Component<
     }
 
     makeRendererModelInitializeParams(): RendererModelInitializeParams {
-        let { screen, line } = this.props;
-        let context = lineutil.getRendererContext(line);
-        let cmd = screen.getCmd(line); // won't be null
+        const { screen, line } = this.props;
+        const context = lineutil.getRendererContext(line);
+        const cmd = screen.getCmd(line); // won't be null
         let savedHeight = screen.getContentHeight(context);
         if (savedHeight == null) {
             if (line.contentheight != null && line.contentheight != -1) {
@@ -512,7 +522,7 @@ class LineCmd extends React.Component<
                 savedHeight = 0;
             }
         }
-        let api = {
+        const api = {
             saveHeight: (height: number) => {
                 screen.setContentHeight(lineutil.getRendererContext(line), height);
             },
@@ -566,12 +576,12 @@ class LineCmd extends React.Component<
     };
 
     render() {
-        let { screen, line, width, staticRender, visible } = this.props;
-        let isVisible = visible.get();
+        const { screen, line, width, staticRender, visible } = this.props;
+        const isVisible = visible.get();
         if (staticRender || !isVisible) {
             return this.renderSimple();
         }
-        let cmd = screen.getCmd(line);
+        const cmd = screen.getCmd(line);
         if (cmd == null) {
             return (
                 <div
@@ -585,19 +595,17 @@ class LineCmd extends React.Component<
                 </div>
             );
         }
-        let status = cmd.getStatus();
-        let lineNumStr = (line.linenumtemp ? "~" : "") + String(line.linenum);
-        let isSelected = mobx
+        const isSelected = mobx
             .computed(() => screen.getSelectedLine() == line.linenum, {
                 name: "computed-isSelected",
             })
             .get();
-        let isPhysicalFocused = mobx
+        const isPhysicalFocused = mobx
             .computed(() => screen.getIsFocused(line.linenum), {
                 name: "computed-getIsFocused",
             })
             .get();
-        let isFocused = mobx
+        const isFocused = mobx
             .computed(
                 () => {
                     let screenFocusType = screen.getFocusType();
@@ -606,7 +614,7 @@ class LineCmd extends React.Component<
                 { name: "computed-isFocused" }
             )
             .get();
-        let shouldCmdFocus = mobx
+        const shouldCmdFocus = mobx
             .computed(
                 () => {
                     let screenFocusType = screen.getFocusType();
@@ -615,7 +623,7 @@ class LineCmd extends React.Component<
                 { name: "computed-shouldCmdFocus" }
             )
             .get();
-        let isInSidebar = mobx
+        const isInSidebar = mobx
             .computed(
                 () => {
                     return screen.isSidebarOpen() && screen.isLineIdInSidebar(line.lineid);
@@ -623,11 +631,10 @@ class LineCmd extends React.Component<
                 { name: "computed-isInSidebar" }
             )
             .get();
-        let isStatic = staticRender;
-        let isRunning = cmd.isRunning();
-        let isExpanded = this.isCmdExpanded.get();
-        let rsdiff = this.rtnStateDiff.get();
-        let mainDivCn = cn(
+        const isRunning = cmd.isRunning();
+        const isExpanded = this.isCmdExpanded.get();
+        const rsdiff = this.rtnStateDiff.get();
+        const mainDivCn = cn(
             "line",
             "line-cmd",
             { selected: isSelected },
@@ -636,18 +643,18 @@ class LineCmd extends React.Component<
             { "has-rtnstate": cmd.getRtnState() }
         );
         let rendererPlugin: RendererPluginType = null;
-        let isNoneRenderer = line.renderer == "none";
+        const isNoneRenderer = line.renderer == "none";
         if (!isBlank(line.renderer) && line.renderer != "terminal" && !isNoneRenderer) {
             rendererPlugin = PluginModel.getRendererPluginByName(line.renderer);
         }
-        let rendererType = lineutil.getRendererType(line);
-        let hidePrompt = rendererPlugin != null && rendererPlugin.hidePrompt;
-        let termFontSize = GlobalModel.termFontSize.get();
+        const rendererType = lineutil.getRendererType(line);
+        const hidePrompt = rendererPlugin?.hidePrompt;
+        const termFontSize = GlobalModel.termFontSize.get();
         let rtnStateDiffSize = termFontSize - 2;
         if (rtnStateDiffSize < 10) {
             rtnStateDiffSize = Math.max(termFontSize, 10);
         }
-        let containerType = screen.getContainerType();
+        const containerType = screen.getContainerType();
         return (
             <div
                 className={mainDivCn}
@@ -665,6 +672,9 @@ class LineCmd extends React.Component<
                         {this.renderMeta1(cmd)}
                         <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" />
+                    </div>
                     <div key="delete" title="Delete Line (&#x2318;D)" className="line-icon" onClick={this.clickDelete}>
                         <i className="fa-sharp fa-regular fa-trash" />
                     </div>
@@ -803,7 +813,7 @@ class Line extends React.Component<
     {}
 > {
     render() {
-        let line = this.props.line;
+        const line = this.props.line;
         if (line.archived) {
             return null;
         }
@@ -829,7 +839,7 @@ class LineText extends React.Component<
 > {
     @boundMethod
     clickHandler() {
-        let { line, noSelect } = this.props;
+        const { line, noSelect } = this.props;
         if (noSelect) {
             return;
         }
@@ -838,7 +848,7 @@ class LineText extends React.Component<
 
     @boundMethod
     onAvatarRightClick(e: any): void {
-        let { line, noSelect } = this.props;
+        const { line, noSelect } = this.props;
         if (noSelect) {
             return;
         }
@@ -852,19 +862,19 @@ class LineText extends React.Component<
     }
 
     render() {
-        let { screen, line, renderMode } = this.props;
-        let formattedTime = lineutil.getLineDateTimeStr(line.ts);
-        let isSelected = mobx
+        const { screen, line } = this.props;
+        const formattedTime = lineutil.getLineDateTimeStr(line.ts);
+        const isSelected = mobx
             .computed(() => screen.getSelectedLine() == line.linenum, {
                 name: "computed-isSelected",
             })
             .get();
-        let isFocused = mobx
+        const isFocused = mobx
             .computed(() => screen.getFocusType() == "cmd", {
                 name: "computed-isFocused",
             })
             .get();
-        let mainClass = cn("line", "line-text", "focus-parent");
+        const mainClass = cn("line", "line-text", "focus-parent");
         return (
             <div
                 className={mainClass}