cleanup line-height/padding for code blocks

This adds support for Arch Linux via pacman. It also updates the product tagline in package.json and the "About" modal. It also removes the unused "Help" menu and updates the copyright year in About and fixes the window icon display on Linux.

.github/workflows/build-helper.yml

@@ -27,7 +27,7 @@ jobs:
               if: matrix.platform == 'linux'
               run: |
                   sudo apt-get update
-                  sudo apt-get install rpm
+                  sudo apt-get install --no-install-recommends -y libarchive-tools libopenjp2-tools rpm
             - uses: actions/setup-go@v5
               with:
                   go-version: ${{env.GO_VERSION}}

README.md

@@ -9,7 +9,7 @@
 
 # Wave Terminal
 
-An open-source, cross-platform, AI-integrated, modern terminal for seamless workflows.
+Wave is an open-source AI-native terminal built for seamless workflows.
 
 Wave isn't just another terminal emulator; it's a rethink on how terminals are built. Wave combines command line with the power of the open web to help veteran CLI users and new developers alike.
 
@@ -17,13 +17,14 @@ Wave isn't just another terminal emulator; it's a rethink on how terminals are b
 -   Persistent sessions that can restore state across network disconnections and reboots
 -   Searchable contextual command history across all remote sessions (saved locally)
 -   Workspaces, tabs, and command blocks to keep you organized
+-   CodeEdit, to edit local and remote files with a VSCode-like inline editor
 -   AI Integration with ChatGPT (or ChatGPT compatible APIs) to help write commands and get answers inline
 
 ![WaveTerm Screenshot](./assets/wave-screenshot.jpeg)
 
 ## Installation
 
-Wave Terminal works with MacOS and Linux (preliminary).
+Wave Terminal works with MacOS and Linux.
 
 Install Wave Terminal from: [www.waveterm.dev/download](https://www.waveterm.dev/download)
 
@@ -49,7 +50,7 @@ brew install --cask wave
 
 ## Contributing
 
-Wave uses Github Project for tracking issues.
+Wave uses Github Issues for issue tracking.
 
 Find more information in our [Contributions Guide](CONTRIBUTING.md), which includes:
 

buildres/download-staged-artifact.sh

@@ -13,4 +13,4 @@ fi
 DOWNLOAD_DIR=$VERSION-staged
 rm -rf $DOWNLOAD_DIR
 mkdir -p $DOWNLOAD_DIR
-aws s3 cp s3://waveterm-github-artifacts/staging/$VERSION/ $DOWNLOAD_DIR/ --recursive
+aws s3 cp s3://waveterm-github-artifacts/staging/$VERSION/ $DOWNLOAD_DIR/ --recursive --profile $AWS_PROFILE

buildres/publish-from-staging.sh

@@ -9,4 +9,13 @@ if [ -z "$VERSION" ]; then
     exit
 fi
 
-aws s3 cp s3://waveterm-github-artifacts/staging/$VERSION/ s3://dl.waveterm.dev/releases/ --recursive
+ORIGIN="waveterm-github-artifacts/staging/$VERSION/"
+DESTINATION="dl.waveterm.dev/releases/"
+
+OUTPUT=$(aws s3 cp s3://$ORIGIN s3://$DESTINATION --recursive --profile $AWS_PROFILE)
+
+for line in $OUTPUT; do
+    PREFIX=${line%%${DESTINATION}*}
+    SUFFIX=${line:${#PREFIX}}
+    echo "https://$SUFFIX"
+done

electron-builder.config.js

@@ -73,7 +73,7 @@ const config = {
         executableName: pkg.productName,
         category: "TerminalEmulator",
         icon: "public/waveterm.icns",
-        target: ["zip", "deb", "rpm", "AppImage"],
+        target: ["zip", "deb", "rpm", "AppImage", "pacman"],
         synopsis: pkg.description,
         description: null,
         desktop: {

package.json

@@ -5,7 +5,7 @@
         "email": "info@commandline.dev"
     },
     "productName": "Wave",
-    "description": "An open-source, cross-platform, AI-integrated, modern terminal for seamless workflows.",
+    "description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
     "version": "0.7.0",
     "main": "dist/emain.js",
     "license": "Apache-2.0",

public/themes/default.css

@@ -60,6 +60,7 @@
     --app-panel-bg-color-dev: rgb(21, 23, 48);
     --app-icon-color: rgb(139, 145, 138);
     --app-icon-hover-color: #fff;
+    --app-selected-mask-color: rgba(255, 255, 255, 0.06);
 
     /* icon colors */
 
@@ -188,7 +189,7 @@
     /* table colors */
     --table-border-color: rgba(241, 246, 243, 0.15);
     --table-thead-border-top-color: rgba(250, 250, 250, 0.1);
-    --table-thead-border-bottom-color: var(--table-border-color);
+    --table-thead-bright-border-color: #ccc;
     --table-thead-bg-color: rgba(250, 250, 250, 0.02);
     --table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
     --table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);

public/themes/light.css

@@ -17,6 +17,7 @@
     --app-panel-bg-color-dev: #e0e0e0;
     --app-icon-color: rgb(80, 80, 80);
     --app-icon-hover-color: rgb(100, 100, 100);
+    --app-selected-mask-color: rgba(0, 0, 0, 0.06);
 
     --input-bg-color: #eeeeee;
 
@@ -47,6 +48,10 @@
     --form-element-label-color: rgba(0, 0, 0, 0.6);
     --form-element-secondary-color: rgba(0, 0, 0, 0.09);
     --form-element-icon-color: rgb(0, 0, 0, 0.6);
+    --form-element-disabled-text-color: #b7b7b7;
+    --form-element-placeholder-color: #b7b7b7;
+
+    --markdown-bg-color: rgb(0, 0, 0, 0.1);
 
     /* modal colors */
     --modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);

src/app/clientsettings/clientsettings.tsx

@@ -166,7 +166,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const curTheme = GlobalModel.getTheme();
 
         return (
-            <MainView viewName="clientsettings" title="Client Settings" onClose={this.handleClose}>
+            <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
                 <div className="content">
                     <div className="settings-field">
                         <div className="settings-label">Term Font Size</div>

src/app/common/elements/dropdown.less

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

src/app/common/elements/mainview.tsx

@@ -10,17 +10,17 @@ import "./mainview.less";
 
 @mobxReact.observer
 class MainView extends React.Component<{
-    viewName: string;
     title: string;
     onClose: () => void;
     children: React.ReactNode;
+    className?: string;
 }> {
     render() {
         const sidebarModel = GlobalModel.mainSidebarModel;
         const maxWidthSubtractor = sidebarModel.getCollapsed() ? 0 : sidebarModel.getWidth();
         return (
             <div
-                className={cn("mainview", `${this.props.viewName}-view`)}
+                className={cn("mainview", this.props.className)}
                 style={{ maxWidth: `calc(100vw - ${maxWidthSubtractor}px)` }}
             >
                 <div className="header-container bottom-border">

src/app/common/elements/markdown.less

@@ -8,19 +8,6 @@
         margin-bottom: 10px;
     }
 
-    code {
-        background-color: var(--markdown-bg-color);
-        color: var(--app-text-color);
-        font-family: var(--termfontfamily);
-        border-radius: 4px;
-    }
-
-    code.inline {
-        padding-top: 0;
-        padding-bottom: 0;
-        font-family: var(--termfontfamily);
-    }
-
     .title {
         color: var(--app-text-color);
         margin-top: 16px;
@@ -62,14 +49,29 @@
     pre {
         background-color: var(--markdown-bg-color);
         margin: 4px 10px 4px 10px;
-        padding: 6px 6px 6px 10px;
+        padding: 0.7em;
         border-radius: 4px;
+
+        code {
+            background-color: transparent;
+            padding: 0;
+            line-height: normal;
+        }
     }
 
     pre.selected {
         outline: 2px solid var(--markdown-outline-color);
     }
 
+    code {
+        color: var(--app-text-color);
+        font-family: var(--termfontfamily);
+        border-radius: 4px;
+        background-color: var(--markdown-bg-color);
+        padding: 0.15em 0.5em;
+        line-height: 1.5;
+    }
+
     .title {
         font-weight: semibold;
         padding-top: 6px;

src/app/common/elements/markdown.tsx

@@ -24,7 +24,7 @@ function HeaderRenderer(props: any, hnum: number): any {
 }
 
 function CodeRenderer(props: any): any {
-    return <code className={cn({ inline: props.inline })}>{props.children}</code>;
+    return <code>{props.children}</code>;
 }
 
 @mobxReact.observer

src/app/common/elements/textfield.less

@@ -64,6 +64,10 @@
             &.offset-left {
                 padding: 5px 16px 5px 0;
             }
+
+            input::placeholder {
+                color: var(--form-element-placeholder-color);
+            }
         }
     }
 

src/app/common/modals/about.tsx

@@ -75,6 +75,7 @@ class AboutModal extends React.Component<{}, {}> {
     }
 
     render() {
+        const currentDate = new Date();
         return (
             <Modal className="about-modal">
                 <Modal.Header onClose={this.closeModal} title="About" />
@@ -86,9 +87,9 @@ class AboutModal extends React.Component<{}, {}> {
                         <div className="text-wrapper">
                             <div>Wave Terminal</div>
                             <div className="text-standard">
-                                Modern Terminal for
+                                Open-Source AI-Native Terminal
                                 <br />
-                                Seamless Workflow
+                                Built for Seamless Workflows
                             </div>
                         </div>
                     </div>
@@ -122,7 +123,9 @@ class AboutModal extends React.Component<{}, {}> {
                             Acknowledgements
                         </LinkButton>
                     </div>
-                    <div className="about-section text-standard">&copy; 2023 Command Line Inc.</div>
+                    <div className="about-section text-standard">
+                        &copy; {currentDate.getFullYear()} Command Line Inc.
+                    </div>
                 </div>
             </Modal>
         );

src/app/common/modals/disconnected.tsx

@@ -90,7 +90,7 @@ class DisconnectedModal extends React.Component<{}, {}> {
                         onClick={this.restartServer}
                         leftIcon={<i className="fa-sharp fa-solid fa-triangle-exclamation"></i>}
                     >
-                        Restart Server
+                        Restart Wave Backend
                     </Button>
                 </div>
             </Modal>

src/app/common/modals/tabswitcher.less

@@ -74,7 +74,7 @@
                     .focused-option {
                         border: 1px solid rgba(241, 246, 243, 0.15);
                         border-radius: 4px;
-                        background: rgba(255, 255, 255, 0.06);
+                        background: var(--app-selected-mask-color);
                     }
                 }
             }

src/app/connections/connections.less

@@ -28,7 +28,7 @@
 
         thead {
             border-radius: var(--sizing-2-xs, 4px);
-            border-bottom: 2px solid var(--table-thead-border-bottom-color);
+            border-bottom: 2px solid var(--table-thead-bright-border-color);
 
             th {
                 height: 32px;

src/app/connections/connections.tsx

@@ -126,7 +126,7 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
         let item: RemoteType = null;
 
         return (
-            <MainView viewName="connections" title="Connections" onClose={this.handleClose}>
+            <MainView className="connections-view" title="Connections" onClose={this.handleClose}>
                 <table
                     className="connections-table"
                     cellSpacing="0"

src/app/history/history.less

@@ -1,5 +1,6 @@
 .history-view {
     padding-bottom: 10px;
+    min-height: 0;
 
     .icon {
         width: 1.5em !important;
@@ -8,6 +9,14 @@
         fill: var(--app-text-color);
     }
 
+    .mainview-content {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        padding: 10px 10px 0 10px;
+        min-height: 0;
+    }
+
     .history-checkbox {
         &.state-unchecked {
             width: 16px;
@@ -51,16 +60,6 @@
             color: var(--app-text-color);
         }
 
-        .main-search {
-            .field {
-                width: 80%;
-            }
-
-            input::placeholder {
-                color: #777;
-            }
-        }
-
         .advanced-search {
             display: flex;
             flex-direction: row;
@@ -68,37 +67,7 @@
 
             .workspace-dropdown,
             .remote-dropdown {
-                width: 200px;
-            }
-
-            .dropdown {
-                font-size: 0.8em;
-                padding: 0.5em 1em;
-                .label {
-                    display: inline;
-                    vertical-align: middle;
-                    color: var(--app-text-color);
-                }
-                .icon {
-                    vertical-align: middle;
-                    margin-left: 1em;
-                }
-            }
-
-            .session-dropdown,
-            .remote-dropdown {
-                .dropdown-item {
-                    color: var(--app-text-color);
-                    cursor: pointer;
-                    &:hover {
-                        background-color: #666;
-                    }
-                }
-
-                .dropdown-content {
-                    border-radius: 0 0 4px 4px;
-                    width: 16em;
-                }
+                width: 170px;
             }
 
             .remote-dropdown {
@@ -115,10 +84,6 @@
                 align-items: center;
                 height: 34px;
 
-                &.is-active {
-                    background-color: #666;
-                }
-
                 .checkbox-container {
                     position: relative;
                     top: 2px;
@@ -151,7 +116,7 @@
         margin-top: 10px;
         margin-left: 10px;
         align-items: center;
-        height: 32px;
+        height: 35px;
         flex-shrink: 0;
 
         .is-hidden {
@@ -159,8 +124,14 @@
         }
 
         &.is-top {
-            border-top: 1px solid #333;
+            border-bottom: 2px solid var(--table-thead-bright-border-color);
+            border-top: 1px solid var(--table-thead-border-top-color);
             padding-top: 4px;
+            padding-bottom: 4px;
+        }
+
+        &.is-bottom {
+            border-top: 2px solid var(--table-thead-bright-border-color);
         }
 
         .trash-icon {
@@ -175,7 +146,7 @@
 
         .control-button {
             cursor: pointer;
-            color: #aaa;
+            color: var(--form-element-label-color);
             margin-left: 12px;
 
             .icon {
@@ -215,8 +186,11 @@
 
             &.is-disabled {
                 cursor: default;
-                color: #777;
                 font-weight: normal;
+
+                .icon {
+                    fill: var(--form-element-disabled-text-color);
+                }
             }
         }
 
@@ -230,7 +204,7 @@
         flex-direction: row;
         justify-content: center;
         padding: 30px 0 30px 0;
-        border: 1px solid white;
+        border: 1px solid var(--app-border-color);
         border-radius: 3px;
         margin: 20px 50px 20px 20px;
     }
@@ -239,16 +213,24 @@
         flex-grow: 1;
         min-height: 200px;
         overflow-y: auto;
+        height: calc(100vh - 186px); // 186px is sum of all the heights above the history-scroll-region
     }
 
     .history-table {
         margin: 0px 10px 10px 10px;
-        table-layout: fixed;
-        border-top: 2px solid #ccc;
+        display: flex;
+        flex-direction: column;
         width: calc(100% - 20px);
+        flex-grow: 1;
+        min-height: 200px;
 
-        tr.active-history-item {
-            td {
+        .row.active-history-item {
+            display: flex;
+            border-bottom: 1px solid var(--table-tr-border-bottom-color);
+            align-items: center;
+            padding: 0 10px;
+
+            .cell {
                 padding-right: 10px;
 
                 .line-container {
@@ -287,12 +269,13 @@
             }
         }
 
-        tr.history-item {
+        .row.history-item {
             padding: 0 10px 0 10px;
             display: flex;
             border-bottom: 1px solid var(--table-tr-border-bottom-color);
             align-items: center;
             color: var(--app-text-color);
+            font: var(--base-font);
 
             &.is-selected {
                 background-color: var(--table-tr-selected-bg-color);
@@ -310,41 +293,27 @@
                 }
             }
 
-            td {
+            .cell {
+                display: flex;
                 padding-top: 5px;
                 padding-bottom: 5px;
                 padding-left: 5px;
             }
 
-            td.selectbox {
-                flex: 0 0 auto;
-                flex-basis: 25px;
+            .selectbox {
+                flex: 0 0 30px;
                 cursor: pointer;
             }
 
-            td.bookmark {
-                flex: 0 0 auto;
-                flex-basis: 20px;
-                margin-right: 1em;
-                cursor: pointer;
-            }
-
-            td.ts {
-                flex: 0 0 auto;
-                flex-basis: 86px;
-                margin-left: 24px;
-            }
-
-            td.workspace {
-                flex: 0 0 auto;
-                flex-basis: 120px;
+            .workspace {
+                flex: 0 0 120px;
                 text-overflow: ellipsis;
                 margin-left: 24px;
+                overflow: hidden;
             }
 
-            td.remote {
-                flex: 0 0 auto;
-                flex-basis: 150px;
+            .remote {
+                flex: 0 0 150px;
                 text-overflow: ellipsis;
                 padding-right: 5px;
                 max-width: 150px;
@@ -352,29 +321,53 @@
                 margin-left: 24px;
             }
 
-            td.cmdstr {
-                color: var(--app-text-color);
-                flex: 1 0 0;
+            .ts {
+                flex: 0 0 86px;
+                margin-left: 24px;
+            }
+
+            .cmdstr {
+                flex-grow: 1;
                 border-radius: 3px;
                 white-space: pre;
                 max-height: 70px;
                 min-width: 300px;
-                padding-top: 4px;
-                padding-bottom: 4px;
-                overflow: hidden;
+                padding-top: 0;
+                padding-bottom: 0;
+                overflow-x: auto;
+                position: relative;
+
+                .cmdstr-code {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: flex-end;
+                    padding-top: 4px;
+                    padding-bottom: 4px;
+                }
+
+                .actions-block {
+                    display: flex;
+                    flex-direction: row;
+
+                    .action-item:hover {
+                        color: var(--app-text-color);
+                        cursor: pointer;
+                    }
 
-                .use-button {
                     visibility: hidden;
                 }
 
-                &:hover .use-button {
-                    visibility: visible;
+                .activate-item-spacer {
+                    cursor: pointer;
                 }
             }
 
-            td.downarrow {
-                display: flex;
-                width: 32px;
+            &:hover .cmdstr .actions-block {
+                visibility: visible;
+            }
+
+            .downarrow {
+                flex: 0 0 32px;
                 justify-content: center;
                 align-items: center;
                 align-self: stretch;