Fix ARM build (#230)

* Fix macOS 26 GPU performance issue by upgrading to Electron 38

Upgrades Electron from 34.5.1 to 38.6.0 to resolve excessive WindowServer
GPU usage on macOS 26 (Sequoia). This issue was caused by Electron's
override of the private _cornerMask API, which forced the compositor to
treat window masks as dynamic rather than static, resulting in persistent
high GPU load.

Changes:
- Upgrade electron: 34.5.1 → 38.6.0
- Upgrade electron-mksnapshot: 34.5.1 → 38.6.0
- Upgrade @electron/rebuild: ^3.7.1 → ^3.7.2
- Upgrade node-abi: ^3.67.0 → ^3.81.0 (required for Electron 38 support)

The fix was introduced in Electron 36.9.2, 37.6.0, 38.2.0, and all later
versions. We're upgrading to 38.6.0 as it's the latest stable version
compatible with Node 20.11.0.

Fixes: electron/electron#48376

* Use optional chaining

Signed-off-by: Philip Peterson <1326208+philip-peterson@users.noreply.github.com>

---------

Signed-off-by: Philip Peterson <1326208+philip-peterson@users.noreply.github.com>
Co-authored-by: Philip Peterson <1326208+philip-peterson@users.noreply.github.com>

.eslintrc.json

@@ -3,7 +3,9 @@
     "react",
     "prettier",
     "@typescript-eslint",
-    "eslint-comments"
+    "eslint-comments",
+    "lodash",
+    "import"
   ],
   "extends": [
     "eslint:recommended",
@@ -32,7 +34,11 @@
   "settings": {
     "react": {
       "version": "detect"
-    }
+    },
+    "import/resolver": {
+      "typescript": {}
+    },
+    "import/internal-regex": "^(electron|react)$"
   },
   "rules": {
     "func-names": [
@@ -59,7 +65,16 @@
         "bracketSameLine": false
       }
     ],
-    "eslint-comments/no-unused-disable": "error"
+    "eslint-comments/no-unused-disable": "error",
+    "react/no-unknown-property":[
+      "error",
+      {
+        "ignore": [
+          "jsx",
+          "global"
+        ]
+      }
+    ]
   },
   "overrides": [
     {
@@ -83,7 +98,33 @@
         "@typescript-eslint/no-shadow": ["error"],
         "@typescript-eslint/no-unsafe-assignment": "off",
         "@typescript-eslint/no-unsafe-member-access": "off",
-        "@typescript-eslint/restrict-template-expressions": "off"
+        "@typescript-eslint/restrict-template-expressions": "off",
+        "@typescript-eslint/consistent-type-imports": [ "error", { "disallowTypeAnnotations": false } ],
+        "lodash/prop-shorthand": [ "error", "always" ],
+        "lodash/import-scope": [ "error", "method" ],
+        "lodash/collection-return": "error",
+        "lodash/collection-method-value": "error",
+        "import/no-extraneous-dependencies": "error",
+        "import/no-anonymous-default-export": "error",
+        "import/order": [
+          "error",
+          {
+            "groups": [
+              "builtin",
+              "internal",
+              "external",
+              "parent",
+              "sibling",
+              "index"
+            ],
+            "newlines-between": "always",
+            "alphabetize": {
+              "order": "asc",
+              "orderImportKind": "desc",
+              "caseInsensitive": true
+            }
+          }
+        ]
       }
     },
     {

.github/actions/build-linux-arm/action.yml

@@ -0,0 +1,137 @@
+name: 'Build Linux ARM'
+description: 'Cross-compiles Hyper app for ARMv7l and ARM64 using arm-runner'
+inputs:
+  node-version:
+    description: 'Node.js version to use'
+    required: true
+  matrix-name:
+    description: 'Matrix name (arch)'
+    required: true
+  matrix-cpu:
+    description: 'CPU architecture'
+    required: true
+  matrix-image:
+    description: 'Base OS image for ARM emulation'
+    required: true
+  upload-artifact:
+    description: 'Whether to upload artifacts'
+    required: false
+    default: 'true'
+runs:
+  using: 'composite'
+  steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+
+    - name: Set up Python 3.10
+      uses: actions/setup-python@v5
+      with:
+        python-version: '3.10'
+
+    - name: Fix node-gyp and Python
+      shell: bash
+      run: |
+        python3 -m pip install packaging setuptools
+
+    - name: Get yarn cache directory path
+      shell: bash
+      id: yarn-cache-dir-path
+      run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+    - uses: actions/cache/restore@v4
+      with:
+        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock', 'app/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+
+    - name: Delete old electron headers
+      # These can sometimes be present on a freshly-provisioned github runner, so remove them
+      shell: bash
+      run: |
+        rm -rf ~/.electron-gyp || true
+
+    - name: Install dependencies and tools
+      shell: bash
+      run: |
+        yarn install
+        sudo apt update
+        sudo apt install libarchive-tools
+    
+    - name: Rebuild node-pty and all native modules for ARM
+      uses: pguyot/arm-runner-action@v2.6.5
+      with:
+        image_additional_mb: 2000
+        base_image: ${{ inputs.matrix-image }}
+        cpu: ${{ inputs.matrix-cpu }}
+        shell: bash
+        copy_artifact_path: target
+        copy_artifact_dest: target
+        commands: |
+          # Install Python distutils in the ARM container
+          sudo apt-get update
+          sudo apt-get install -y python3-pip python3-setuptools python3-dev
+          pip3 install setuptools --break-system-packages || pip3 install setuptools
+          
+          cd target
+          # TODO upgrade node to 20.11.0 to match NODE_VERSION
+          wget https://nodejs.org/dist/v18.16.0/node-v18.16.0-linux-${{ inputs.matrix-name }}.tar.xz
+          tar -xJf node-v18.16.0-linux-${{ inputs.matrix-name }}.tar.xz
+          sudo cp node-v18.16.0-linux-${{ inputs.matrix-name }}/* /usr/local/ -R
+          rm node-v18.16.0-linux-${{ inputs.matrix-name }}.tar.xz
+
+          cd ..
+          npm run rebuild-node-pty
+
+          cd target
+          npx electron-rebuild
+
+    - name: Compile
+      shell: bash
+      run: yarn run build
+
+    - name: Chown rebuilt node_modules
+      shell: bash
+      run: |
+        sudo chown -R $USER:$USER target/node_modules
+
+    - name: Prepare v8 snapshot (only armv7l)
+      if: ${{ inputs.matrix-name == 'armv7l' }}
+      shell: bash
+      run: |
+        sudo dpkg --add-architecture i386
+        sudo apt update
+        sudo apt install -y libglib2.0-0:i386 libexpat1:i386 libgcc-s1:i386
+        npm_config_arch=armv7l yarn run v8-snapshot:arch
+    
+    - name: Build final Electron App for ARM
+      shell: bash
+      run: |
+        yarn run electron-builder -p never -l deb rpm AppImage pacman --${{ inputs.matrix-name }} -c electron-builder-linux-ci.json
+      env:
+        GH_TOKEN: ${{ env.GH_TOKEN }}
+
+    - name: Archive Build Artifacts
+      if: ${{ inputs.upload-artifact == 'true' }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: hyper-linux-${{ inputs.matrix-name }}
+        path: |
+          dist/*.snap
+          dist/*.AppImage
+          dist/*.deb
+          dist/*.rpm
+          dist/*.pacman
+
+#    - name: Run E2E Tests on Linux
+#      if: runner.os == 'Linux'
+#      uses: GabrielBB/xvfb-action@v1.7
+#      with:
+#        run: |
+#          yarn run test
+#

.github/actions/build/action.yml

@@ -0,0 +1,172 @@
+name: 'Build'
+description: 'Builds, tests, and packages the app for release'
+inputs:
+  node-version:
+    description: 'Node.js version to use'
+    required: true
+  matrix-name:
+    description: 'Matrix Name'
+    required: true
+  matrix-os:
+    description: 'Matrix OS'
+    required: true
+  upload-artifact:
+    description: 'Whether to upload artifacts'
+    required: false
+    default: 'true'
+runs:
+  using: 'composite'
+  steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+    
+    - name: Use Node.js ${{ env.NODE_VERSION }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+    
+    - name: Set up Python 3.10
+      uses: actions/setup-python@v5
+      with:
+        python-version: '3.10'
+
+    - name: Fix node-gyp and Python
+      shell: bash
+      run: |
+        if [[ "$RUNNER_OS" == "macOS" ]]; then
+          brew install python-setuptools python-packaging
+        else
+          python3 -m pip install $EXTRA_ARGS packaging setuptools
+        fi
+
+    - name: Get yarn cache directory path
+      shell: bash
+      id: yarn-cache-dir-path
+      run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+    - uses: actions/cache/restore@v4
+      with:
+        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock', 'app/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+
+    - name: Delete old electron headers
+      # These can sometimes be present on a freshly-provisioned github runner, so remove them
+      shell: bash
+      run: |
+        rm -rf ~/.electron-gyp || true
+
+    - name: Install
+      shell: bash
+      run: yarn install
+      env:
+        npm_config_node_gyp: ${{ github.workspace }}${{ runner.os == 'Windows' && '\node_modules\node-gyp\bin\node-gyp.js' || '/node_modules/node-gyp/bin/node-gyp.js' }}
+
+    - name: Install libarchive-tools
+      shell: bash
+      if: runner.os == 'Linux'
+      run: |
+        sudo apt update
+        sudo apt install libarchive-tools
+  
+    - name: Rebuild native modules for Electron
+      shell: bash
+      run: npx electron-rebuild
+
+    - name: Lint and Run Unit Tests
+      shell: bash
+      run: yarn run test
+
+    - name: Getting Build Icon
+      shell: bash
+      if: github.ref == 'refs/heads/canary' || github.base_ref == 'canary'
+      run: |
+        cp build/canary.ico build/icon.ico
+        cp build/canary.icns build/icon.icns
+
+    - name: Build
+      shell: bash
+      run: |
+        if [ -z "$CSC_LINK" ] ; then unset CSC_LINK ; fi
+        if [ -z "$CSC_KEY_PASSWORD" ] ; then unset CSC_KEY_PASSWORD ; fi
+        if [ -z "$WIN_CSC_LINK" ] ; then unset WIN_CSC_LINK ; fi
+        if [ -z "$WIN_CSC_KEY_PASSWORD" ] ; then unset WIN_CSC_KEY_PASSWORD ; fi
+        if [ -z "$APPLE_ID" ] ; then unset APPLE_ID ; fi
+        if [ -z "$APPLE_APP_SPECIFIC_PASSWORD" ] ; then unset APPLE_APP_SPECIFIC_PASSWORD ; fi
+
+        yarn run dist
+      env:
+        GH_TOKEN: ${{ env.GH_TOKEN }}
+        CSC_LINK: ${{ env.MAC_CERT_P12_BASE64 }}
+        CSC_KEY_PASSWORD: ${{ env.MAC_CERT_P12_PASSWORD }}
+        WIN_CSC_LINK: ${{ env.WIN_CERT_P12_BASE64 }}
+        WIN_CSC_KEY_PASSWORD: ${{ env.WIN_CERT_P12_PASSWORD }}
+        APPLE_ID: ${{ env.APPLE_ID }}
+        APPLE_APP_SPECIFIC_PASSWORD: ${{ env.APPLE_PASSWORD }}
+
+    - name: Archive Build Artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: hyper-${{ runner.os }}-${{ inputs.matrix-name }}
+        path: |
+          dist/*.dmg
+          dist/*.snap
+          dist/*.AppImage
+          dist/*.deb
+          dist/*.pacman
+          dist/*.exe
+
+    - name: Run E2E Tests
+      shell: bash
+      if: runner.os != 'Linux'
+      run: yarn run test:e2e --verbose
+
+    - name: Run E2E Tests on Linux
+      if: runner.os == 'Linux'
+      uses: GabrielBB/xvfb-action@v1.7
+      with:
+        run: |
+          yarn run test:e2e
+      env:
+        SHELL: /bin/bash
+        DEBUG: "pw:browser*"
+
+    - name: Archive E2E test screenshot
+      uses: actions/upload-artifact@v4
+      with:
+        name: e2e-${{ inputs.matrix-os }}-${{ strategy.job-index }}
+        path: dist/tmp/*.png
+
+    - name: Save the pr number in an artifact
+      shell: bash
+      if: github.event_name == 'pull_request'
+      env:
+        PR_NUM: ${{ github.event.number }}
+      run: echo $PR_NUM > pr_num.txt
+
+    - name: Upload the pr num
+      uses: actions/upload-artifact@v4
+      if: github.event_name == 'pull_request'
+      with:
+        name: pr_num
+        path: ./pr_num.txt
+
+    - uses: actions/cache/save@v4
+      if: github.event_name == 'push'
+      with:
+        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock', 'app/yarn.lock') }}
+
+#    - name: Run E2E Tests (non-Linux)
+#      if: runner.os != 'Linux'
+#      shell: bash
+#      run: yarn run test:e2e --verbose
+#
+#    - name: Run E2E Tests on Linux
+#      if: runner.os == 'Linux'
+#      uses: GabrielBB/xvfb-action@v1.7
+#      with:
+#        run: |
+#          yarn run test
+#

.github/dependabot.yml

@@ -5,17 +5,31 @@ updates:
   schedule:
     interval: weekly
     time: '11:00'
-  open-pull-requests-limit: 30
   target-branch: canary
   versioning-strategy: increase
+  commit-message:
+    prefix: "chore(deps-dev):"
+  groups:
+    minorAndPatch:
+      update-types:
+        - "minor"
+        - "patch"
+  open-pull-requests-limit: 100
 - package-ecosystem: npm
   directory: "/app"
   schedule:
     interval: weekly
     time: '11:00'
-  open-pull-requests-limit: 30
   target-branch: canary
   versioning-strategy: increase
+  commit-message:
+    prefix: "chore(deps):"
+  groups:
+    minorAndPatch:
+      update-types:
+        - "minor"
+        - "patch"
+  open-pull-requests-limit: 100
 - package-ecosystem: github-actions
   directory: "/"
   schedule:

.github/pull_request_template.md

@@ -1,8 +1 @@
-<!-- Hi there! Thanks for submitting a PR! We're excited to see what you've got for us.
-
-- To help whoever reviews your PR, it'd be extremely helpful for you to list whether your PR is ready to be merged,
-If there's anything left to do and if there are any related PRs
-- It'd also be extremely helpful to enable us to update your PR incase we need to rebase or what-not by checking `Allow edits from maintainers`
-- If your PR changes some API, please make a PR for hyper website too: https://github.com/vercel/hyper-site.
-
-Thanks, again! -->
+<!-- Please check `Allow edits from maintainers`. Thanks! -->

.github/workflows/ci.yml

@@ -0,0 +1,154 @@
+name: Node CI
+on:
+  push:
+    branches:
+  workflow_dispatch:
+defaults:
+  run:
+    shell: bash
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NODE_VERSION: 20.11.0
+  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+#  CSC_LINK: ${{ secrets.MAC_CERT_P12_BASE64 }}
+#  CSC_KEY_PASSWORD: ${{ secrets.MAC_CERT_P12_PASSWORD }}
+#  WIN_CSC_LINK: ${{ secrets.WIN_CERT_P12_BASE64 }}
+#  WIN_CSC_KEY_PASSWORD: ${{ secrets.WIN_CERT_P12_PASSWORD }}
+#  APPLE_ID: ${{ secrets.APPLE_ID }}
+#  APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+
+jobs:
+  build-ubuntu:
+    name: Build Ubuntu
+    runs-on: ubuntu-latest
+    concurrency:
+      group: build-ubuntu-${{ github.ref }}
+      cancel-in-progress: false
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Build
+        uses: ./.github/actions/build
+        env:
+          NODE_VERSION: ${{ env.NODE_VERSION }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          matrix-os: ubuntu-latest
+          matrix-name: ubuntu
+          upload-artifact: false
+
+  build-macos:
+    name: Build macOS
+    runs-on: macos-latest
+    concurrency:
+      group: build-macos-${{ github.ref }}
+      cancel-in-progress: false
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Build
+        uses: ./.github/actions/build
+        env:
+          NODE_VERSION: ${{ env.NODE_VERSION }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          matrix-os: macos-latest
+          matrix-name: macos
+          upload-artifact: false
+
+  build-windows:
+    name: Build Windows
+    runs-on: windows-latest
+    concurrency:
+      group: build-win-${{ github.ref }}
+      cancel-in-progress: false
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Build
+        uses: ./.github/actions/build
+        env:
+          NODE_VERSION: ${{ env.NODE_VERSION }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          matrix-os: windows-latest
+          matrix-name: win
+          upload-artifact: false
+
+  # ARM Linux:
+
+  build-linux-armv7l:
+    name: Build Linux ARMv7l
+    runs-on: ubuntu-latest
+    concurrency:
+      group: build-linux-armv7l-${{ github.ref }}
+      cancel-in-progress: false
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU and binfmt
+        run: |
+          # Install qemu-user-static
+          sudo apt-get update
+          sudo apt-get install -y qemu-user-static binfmt-support python3-setuptools
+          
+          # Install distutils for node-gyp
+          sudo apt-get install -y python3-distutils || sudo apt-get install -y python3-dev python-is-python3
+
+
+          # Download and install binfmt configurations
+          wget https://github.com/qemu/qemu/raw/master/scripts/qemu-binfmt-conf.sh
+          chmod +x qemu-binfmt-conf.sh
+          sudo ./qemu-binfmt-conf.sh --qemu-path /usr/bin --qemu-suffix -static --debian
+
+          # Import the binfmt configurations
+          sudo update-binfmts --import qemu-arm
+          sudo update-binfmts --import qemu-aarch64
+
+          # Verify they exist
+          ls -la /proc/sys/fs/binfmt_misc/qemu-arm* || true
+
+      - name: Build ARMv7l
+        uses: ./.github/actions/build-linux-arm
+        env:
+          NODE_VERSION: ${{ env.NODE_VERSION }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          matrix-name: armv7l
+          matrix-cpu: cortex-a8
+          matrix-image: raspios_lite:latest
+          upload-artifact: false
+
+  build-linux-arm64:
+    name: Build Linux ARM64
+    runs-on: ubuntu-latest
+    concurrency:
+      group: build-linux-arm64-${{ github.ref }}
+      cancel-in-progress: false
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Build ARM64
+        uses: ./.github/actions/build-linux-arm
+        env:
+          NODE_VERSION: ${{ env.NODE_VERSION }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          matrix-name: arm64
+          matrix-cpu: cortex-a53
+          matrix-image: raspios_lite_arm64:latest
+          upload-artifact: false

.github/workflows/codeql-analysis.yml

@@ -35,11 +35,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -50,7 +50,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -64,4 +64,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v3

.github/workflows/e2e_comment.yml

@@ -14,14 +14,14 @@ jobs:
           WORKFLOW_RUN_INFO: ${{ toJSON(github.event.workflow_run) }}
         run: echo "$WORKFLOW_RUN_INFO"
       - name: Download Artifacts
-        uses: dawidd6/action-download-artifact@v2.24.2
+        uses: dawidd6/action-download-artifact@v6
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: nodejs.yml
           run_id: ${{ github.event.workflow_run.id }}
           name: e2e
       - name: Get PR number
-        uses: dawidd6/action-download-artifact@v2.24.2
+        uses: dawidd6/action-download-artifact@v6
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: nodejs.yml
@@ -29,7 +29,7 @@ jobs:
           name: pr_num
       - name: Read the pr_num file
         id: pr_num_reader
-        uses: juliangruber/read-file-action@v1.1.6
+        uses: juliangruber/read-file-action@v1.1.7
         with:
           path: ./pr_num.txt
       - name: List images

.github/workflows/nodejs.yml

@@ -1,81 +0,0 @@
-name: Node CI
-on:
-  push:
-    branches:
-      - master
-      - canary
-  pull_request:
-defaults:
-  run:
-    shell: bash
-jobs:
-  build:
-    runs-on: ${{matrix.os}}
-    strategy:
-      matrix:
-        node-version: [16.x]
-        os:
-          - macos-12
-          - ubuntu-18.04
-          - windows-latest
-      fail-fast: false
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: yarn
-          cache-dependency-path: |
-            yarn.lock
-            app/yarn.lock
-      - name: Install
-        run: yarn install
-      - name: Lint and Run Unit Tests
-        run: yarn run test
-      - name: Getting Build Icon
-        if: github.ref == 'refs/heads/canary' || github.base_ref == 'canary'
-        run: |
-          cp build/canary.ico build/icon.ico
-          cp build/canary.icns build/icon.icns
-      - name: Build
-        run: if [ ! -z "$CSC_LINK" ] ; then yarn run dist ; else unset CSC_LINK && unset WIN_CSC_LINK && yarn run dist --publish=never ; fi
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CSC_LINK: ${{ secrets.MAC_CERT_P12_BASE64 }}
-          CSC_KEY_PASSWORD: ${{ secrets.MAC_CERT_P12_PASSWORD }}
-          WIN_CSC_LINK: ${{ secrets.WIN_CERT_P12_BASE64 }}
-          WIN_CSC_KEY_PASSWORD: ${{ secrets.WIN_CERT_P12_PASSWORD }}
-          APPLE_ID: ${{ secrets.APPLE_ID }}
-          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
-      - name: Archive Build Artifacts
-        uses: LabhanshAgrawal/upload-artifact@v3
-        with:
-          path: |
-            dist/*.dmg
-            dist/*.snap
-            dist/*.AppImage
-            dist/*.deb
-            dist/*.rpm
-            dist/*.exe
-      - name: Run E2E Tests
-        if: runner.os != 'Linux'
-        run: yarn run test:e2e
-      - name: Archive E2E test screenshot
-        if: runner.os != 'Linux'
-        uses: actions/upload-artifact@v3
-        with:
-          name: e2e
-          path: dist/tmp/*.png
-      - name: Save the pr number in an artifact
-        if: github.event_name == 'pull_request'
-        env:
-          PR_NUM: ${{ github.event.number }}
-        run: echo $PR_NUM > pr_num.txt
-      - name: Upload the pr num
-        uses: actions/upload-artifact@v3
-        if: github.event_name == 'pull_request'
-        with:
-          name: pr_num
-          path: ./pr_num.txt

.github/workflows/release.yml

@@ -0,0 +1,194 @@
+name: Create Release
+
+on:
+  push:
+    tags:
+      - "v*"
+  workflow_dispatch:
+
+concurrency:
+  group: release-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NODE_VERSION: 20.11.0
+  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  CSC_LINK: ${{ secrets.MAC_CERT_P12_BASE64 }}
+  CSC_KEY_PASSWORD: ${{ secrets.MAC_CERT_P12_PASSWORD }}
+  WIN_CSC_LINK: ${{ secrets.WIN_CERT_P12_BASE64 }}
+  WIN_CSC_KEY_PASSWORD: ${{ secrets.WIN_CERT_P12_PASSWORD }}
+  APPLE_ID: ${{ secrets.APPLE_ID }}
+  APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+
+jobs:
+  build-ubuntu:
+    name: Build Ubuntu
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Build
+        uses: ./.github/actions/build
+        env:
+          NODE_VERSION: ${{ env.NODE_VERSION }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          matrix-os: ubuntu-latest
+          matrix-name: ubuntu
+          upload-artifact: true
+
+  build-macos:
+    name: Build macOS
+    runs-on: macos-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Build
+        uses: ./.github/actions/build
+        env:
+          NODE_VERSION: ${{ env.NODE_VERSION }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          matrix-os: macos-latest
+          matrix-name: macos
+          upload-artifact: true
+
+  build-windows:
+    name: Build Windows
+    runs-on: windows-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Build
+        uses: ./.github/actions/build
+        env:
+          NODE_VERSION: ${{ env.NODE_VERSION }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          matrix-os: windows-latest
+          matrix-name: win
+          upload-artifact: true
+
+  # ARM Linux:
+
+  build-linux-armv7l:
+    name: Build Linux ARMv7l
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU and binfmt
+        run: |
+          # Install qemu-user-static
+          sudo apt-get update
+          sudo apt-get install -y qemu-user-static binfmt-support python3-setuptools
+          
+          # Install distutils for node-gyp
+          sudo apt-get install -y python3-distutils || sudo apt-get install -y python3-dev python-is-python3
+
+          # Download and install binfmt configurations
+          wget https://github.com/qemu/qemu/raw/master/scripts/qemu-binfmt-conf.sh
+          chmod +x qemu-binfmt-conf.sh
+          sudo ./qemu-binfmt-conf.sh --qemu-path /usr/bin --qemu-suffix -static --debian
+
+          # Import the binfmt configurations
+          sudo update-binfmts --import qemu-arm
+          sudo update-binfmts --import qemu-aarch64
+
+          # Verify they exist
+          ls -la /proc/sys/fs/binfmt_misc/qemu-arm* || true
+
+      - name: Build ARMv7l
+        uses: ./.github/actions/build-linux-arm
+        env:
+          NODE_VERSION: ${{ env.NODE_VERSION }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          matrix-name: armv7l
+          matrix-cpu: cortex-a8
+          matrix-image: raspios_lite:latest
+          upload-artifact: true
+
+  build-linux-arm64:
+    name: Build Linux ARM64
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Build ARM64
+        uses: ./.github/actions/build-linux-arm
+        env:
+          NODE_VERSION: ${{ env.NODE_VERSION }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          matrix-name: arm64
+          matrix-cpu: cortex-a53
+          matrix-image: raspios_lite_arm64:latest
+          upload-artifact: true
+
+  ###
+
+  upload-release:
+    name: Upload and Create Release
+    needs:
+      - build-ubuntu
+      - build-macos
+      - build-windows
+      - build-linux-armv7l
+      - build-linux-arm64
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download all artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: ./artifacts
+
+      - name: List downloaded artifacts
+        run: ls -R ./artifacts
+
+      - name: Ensure non-empty artifacts
+        run: |
+          echo "Checking for zero-byte files in artifacts/..."
+          find artifacts/ -type f -empty -print -delete
+          echo "Cleaned up any zero-byte files."
+          echo "Remaining files:"
+          ls -R artifacts/
+
+      - name: Dump release assets for debugging
+        if: always()
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub CLI needs this
+        run: |
+          echo "Fetching release assets for tag: ${{ github.ref_name }}"
+          gh release view "${{ github.ref_name }}" --repo "${{ github.repository }}" --json assets --jq '.assets[] | "\(.name) - \(.url)"' || true
+
+      - name: Create GitHub Release
+        # Pinned to work around https://github.com/softprops/action-gh-release/issues/445
+        uses: softprops/action-gh-release@v2.0.5
+        env:
+          NODE_VERSION: ${{ env.NODE_VERSION }}
+          ACTIONS_STEP_DEBUG: true
+        with:
+          preserve_order: true
+          overwrite: true
+          name: Release ${{ github.ref_name }}
+          tag_name: ${{ github.ref }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          draft: true
+          files: |
+            artifacts/**/*.dmg
+            artifacts/**/*.snap
+            artifacts/**/*.AppImage
+            artifacts/**/*.deb
+            artifacts/**/*.pacman
+            artifacts/**/*.exe

.husky/pre-push

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn test

.node-version

@@ -0,0 +1 @@
+20.11.0

.nvmrc

@@ -0,0 +1 @@
+20.11.0

.yarnrc.yml

@@ -0,0 +1 @@
+yarnPath: .yarn/releases/yarn-classic.cjs

README.md

@@ -1,19 +1,24 @@
-![](https://assets.vercel.com/image/upload/v1549723846/repositories/hyper/hyper-3-repo-banner.png)
-
 <p align="center">
-  <a aria-label="Vercel logo" href="https://vercel.com">
-    <img src="https://img.shields.io/badge/MADE%20BY%20Vercel-000000.svg?style=for-the-badge&logo=vercel&labelColor=000000&logoWidth=20">
-  </a>
- </p>
+<img alt="hyper - modern web-based terminal" height=150 src="https://github.com/user-attachments/assets/3096f20a-8116-45ce-8c5e-0f1106107484">
+</p>
+
+<p>
+  <a aria-label="Vercel logo" href="https://vercel.com"><img 
+    src="https://img.shields.io/badge/MADE%20BY%20Vercel-000000.svg?style=for-the-badge&logo=vercel&labelColor=000000&logoWidth=20"
+  /></a> <a aria-label="Quine logo" href="https://quineglobal.com"><img
+     width="143" height="28" alt="forked-by-quine" src="https://github.com/user-attachments/assets/57decaa2-7d8c-4d13-ada7-ff6b964346f7"
+  /></a>
+</p>
+
+[![Node CI](https://github.com/quine-global/hyper/actions/workflows/ci.yml/badge.svg?branch=canary)](https://github.com/quine-global/hyper/actions/workflows/ci.yml)
 
-[![Node CI](https://github.com/vercel/hyper/workflows/Node%20CI/badge.svg?event=push)](https://github.com/vercel/hyper/actions?query=workflow%3A%22Node+CI%22+branch%3Acanary+event%3Apush)
 [![Changelog #213](https://img.shields.io/badge/changelog-%23213-lightgrey.svg)](https://changelog.com/213)
 
 For more details, head to: https://hyper.is
 
 ## Project goals
 
-The goal of the project is to create a beautiful and extensible experience for command-line interface users, built on open web standards. In the beginning, our focus will be primarily around speed, stability and the development of the correct API for extension authors.
+The goal of the project is to create a beautiful and customizable experience for command-line interface users, built on open web standards. We have picked up where Vercel left off, and intend to first offer stability, followed by a more tailored experience. We will still support customizability, but stability of theming APIs is not a goal.
 
 In the future, we anticipate the community will come up with innovative additions to enhance what could be the simplest, most powerful and well-tested interface for productivity.
 

app/auto-updater-linux.ts

@@ -1,6 +1,7 @@
-import fetch from 'electron-fetch';
 import {EventEmitter} from 'events';
 
+import fetch from 'electron-fetch';
+
 class AutoUpdater extends EventEmitter implements Electron.AutoUpdater {
   updateURL!: string;
   quitAndInstall() {
@@ -26,13 +27,12 @@ class AutoUpdater extends EventEmitter implements Electron.AutoUpdater {
           this.emit('update-not-available');
           return;
         }
-        return res.json().then(({name, notes, pub_date}) => {
+        return res.json().then(({name, notes, pub_date}: {name: string; notes: string; pub_date: string}) => {
           // Only name is mandatory, needed to construct release URL.
           if (!name) {
             throw new Error('Malformed server response: release name is missing.');
           }
-          // If `null` is passed to Date constructor, current time will be used. This doesn't work with `undefined`
-          const date = new Date(pub_date || null);
+          const date = pub_date ? new Date(pub_date) : new Date();
           this.emit('update-available', {}, notes, name, date);
         });
       })
@@ -47,4 +47,6 @@ class AutoUpdater extends EventEmitter implements Electron.AutoUpdater {
   }
 }
 
-export default new AutoUpdater();
+const autoUpdaterLinux = new AutoUpdater();
+
+export default autoUpdaterLinux;

app/commands.ts

@@ -1,4 +1,6 @@
-import {app, Menu, BrowserWindow} from 'electron';
+import {app, Menu} from 'electron';
+import type {BrowserWindow} from 'electron';
+
 import {openConfig, getConfig} from './config';
 import {updatePlugins} from './plugins';
 import {installCLI} from './utils/cli-install';
@@ -144,6 +146,22 @@ const commands: Record<string, (focusedWindow?: BrowserWindow) => void> = {
   };
 });
 
+//Profile specific commands
+getConfig().profiles.forEach((profile) => {
+  commands[`window:new:${profile.name}`] = () => {
+    setTimeout(() => app.createWindow(undefined, undefined, profile.name), 0);
+  };
+  commands[`tab:new:${profile.name}`] = (focusedWindow) => {
+    focusedWindow?.rpc.emit('termgroup add req', {profile: profile.name});
+  };
+  commands[`pane:splitRight:${profile.name}`] = (focusedWindow) => {
+    focusedWindow?.rpc.emit('split request vertical', {profile: profile.name});
+  };
+  commands[`pane:splitDown:${profile.name}`] = (focusedWindow) => {
+    focusedWindow?.rpc.emit('split request horizontal', {profile: profile.name});
+  };
+});
+
 export const execCommand = (command: string, focusedWindow?: BrowserWindow) => {
   const fn = commands[command];
   if (fn) {

app/config.ts

@@ -1,11 +1,14 @@
+import {app} from 'electron';
+
 import chokidar from 'chokidar';
-import notify from './notify';
+
+import type {parsedConfig, configOptions} from '../typings/config';
+
 import {_import, getDefaultConfig} from './config/import';
 import _openConfig from './config/open';
 import {cfgPath, cfgDir} from './config/paths';
+import notify from './notify';
 import {getColorMap} from './utils/colors';
-import {parsedConfig, configOptions} from '../lib/config';
-import {app} from 'electron';
 
 const watchers: Function[] = [];
 let cfg: parsedConfig = {} as any;
@@ -78,8 +81,30 @@ export const getConfigDir = () => {
   return cfgDir;
 };
 
+export const getDefaultProfile = () => {
+  return cfg.config.defaultProfile || cfg.config.profiles[0]?.name || 'default';
+};
+
+// get config for the default profile, keeping it for backward compatibility
 export const getConfig = () => {
-  return cfg.config;
+  return getProfileConfig(getDefaultProfile());
+};
+
+export const getProfiles = () => {
+  return cfg.config.profiles;
+};
+
+export const getProfileConfig = (profileName: string): configOptions => {
+  const {profiles, defaultProfile, ...baseConfig} = cfg.config;
+  const profileConfig = profiles.find((p) => p.name === profileName)?.config || {};
+  for (const key in profileConfig) {
+    if (typeof baseConfig[key] === 'object' && !Array.isArray(baseConfig[key])) {
+      baseConfig[key] = {...baseConfig[key], ...profileConfig[key]};
+    } else {
+      baseConfig[key] = profileConfig[key];
+    }
+  }
+  return {...baseConfig, defaultProfile, profiles};
 };
 
 export const openConfig = () => {

app/config/config-default.json

@@ -61,7 +61,15 @@
     "disableAutoUpdates": false,
     "autoUpdatePlugins": true,
     "preserveCWD": true,
-    "screenReaderMode": false
+    "screenReaderMode": false,
+    "imageSupport": true,
+    "defaultProfile": "default",
+    "profiles": [
+      {
+        "name": "default",
+        "config": {}
+      }
+    ]
   },
   "plugins": [],
   "localPlugins": [],

app/config/import.ts

@@ -1,10 +1,11 @@
-import {readFileSync} from 'fs-extra';
-import {sync as mkdirpSync} from 'mkdirp';
-import {defaultCfg, cfgPath, plugs, defaultPlatformKeyPath} from './paths';
-import {_init} from './init';
+import {readFileSync, mkdirpSync} from 'fs-extra';
+
+import type {rawConfig} from '../../typings/config';
 import notify from '../notify';
-import {rawConfig} from '../../lib/config';
+
+import {_init} from './init';
 import {migrateHyper3Config} from './migrate';
+import {defaultCfg, cfgPath, plugs, defaultPlatformKeyPath} from './paths';
 
 let defaultConfig: rawConfig;
 

app/config/init.ts

@@ -1,12 +1,14 @@
 import vm from 'vm';
+
+import merge from 'lodash/merge';
+
+import type {parsedConfig, rawConfig, configOptions} from '../../typings/config';
 import notify from '../notify';
 import mapKeys from '../utils/map-keys';
-import {parsedConfig, rawConfig, configOptions} from '../../lib/config';
-import _ from 'lodash';
 
 const _extract = (script?: vm.Script): Record<string, any> => {
   const module: Record<string, any> = {};
-  script?.runInNewContext({module});
+  script?.runInNewContext({module}, {displayErrors: true});
   if (!module.exports) {
     throw new Error('Error reading configuration: `module.exports` not set');
   }
@@ -16,10 +18,10 @@ const _extract = (script?: vm.Script): Record<string, any> => {
 
 const _syntaxValidation = (cfg: string) => {
   try {
-    return new vm.Script(cfg, {filename: '.hyper.js', displayErrors: true});
+    return new vm.Script(cfg, {filename: '.hyper.js'});
   } catch (_err) {
     const err = _err as {name: string};
-    notify(`Error loading config: ${err.name}`, `${err}`, {error: err});
+    notify(`Error loading config: ${err.name}`, JSON.stringify(err), {error: err});
   }
 };
 
@@ -32,7 +34,19 @@ const _init = (userCfg: rawConfig, defaultCfg: rawConfig): parsedConfig => {
   return {
     config: (() => {
       if (userCfg?.config) {
-        return _.merge({}, defaultCfg.config, userCfg.config);
+        const conf = userCfg.config;
+        conf.defaultProfile = conf.defaultProfile || 'default';
+        conf.profiles = conf.profiles || [];
+        conf.profiles = conf.profiles.length > 0 ? conf.profiles : [{name: 'default', config: {}}];
+        conf.profiles = conf.profiles.map((p, i) => ({
+          ...p,
+          name: p.name || `profile-${i + 1}`,
+          config: p.config || {}
+        }));
+        if (!conf.profiles.map((p) => p.name).includes(conf.defaultProfile)) {
+          conf.defaultProfile = conf.profiles[0].name;
+        }
+        return merge({}, defaultCfg.config, conf);
       } else {
         notify('Error reading configuration: `config` key is missing');
         return defaultCfg.config || ({} as configOptions);
@@ -41,8 +55,8 @@ const _init = (userCfg: rawConfig, defaultCfg: rawConfig): parsedConfig => {
     // Merging platform specific keymaps with user defined keymaps
     keymaps: mapKeys({...defaultCfg.keymaps, ...userCfg?.keymaps}),
     // Ignore undefined values in plugin and localPlugins array Issue #1862
-    plugins: (userCfg?.plugins && userCfg.plugins.filter(Boolean)) || [],
-    localPlugins: (userCfg?.localPlugins && userCfg.localPlugins.filter(Boolean)) || []
+    plugins: userCfg?.plugins?.filter(Boolean) || [],
+    localPlugins: userCfg?.localPlugins?.filter(Boolean) || []
   };
 };
 

app/config/migrate.ts

@@ -1,11 +1,14 @@
-import {parse, prettyPrint} from 'recast';
-import {builders, namedTypes} from 'ast-types';
-import * as babelParser from 'recast/parsers/babel';
-import {copy, copySync, existsSync, readFileSync, writeFileSync} from 'fs-extra';
 import {dirname, resolve} from 'path';
-import _ from 'lodash';
+
+import {builders, namedTypes} from 'ast-types';
+import type {ExpressionKind} from 'ast-types/lib/gen/kinds';
+import {copy, copySync, existsSync, readFileSync, writeFileSync} from 'fs-extra';
+import merge from 'lodash/merge';
+import {parse, prettyPrint} from 'recast';
+import * as babelParser from 'recast/parsers/babel';
 
 import notify from '../notify';
+
 import {_extractDefault} from './init';
 import {cfgDir, cfgPath, defaultCfg, legacyCfgPath, plugs, schemaFile, schemaPath} from './paths';
 
@@ -63,7 +66,7 @@ export function configToPlugin(code: string): string {
   });
   const statements = ast.program.body;
   let moduleExportsNode: namedTypes.AssignmentExpression | null = null;
-  let configNode: any = null;
+  let configNode: ExpressionKind | null = null;
 
   for (const statement of statements) {
     if (namedTypes.ExpressionStatement.check(statement)) {
@@ -86,7 +89,7 @@ export function configToPlugin(code: string): string {
               namedTypes.Identifier.check(property.key) &&
               property.key.name === 'config'
             ) {
-              configNode = property.value;
+              configNode = property.value as ExpressionKind;
               if (namedTypes.ObjectExpression.check(property.value)) {
                 configNode = removeProperties(property.value);
               }
@@ -165,7 +168,7 @@ export const migrateHyper3Config = () => {
   try {
     const legacyCfgRaw = readFileSync(legacyCfgPath, 'utf8');
     const legacyCfgData = _extractDefault(legacyCfgRaw);
-    newCfgData = _.merge({}, defaultCfgData, legacyCfgData);
+    newCfgData = merge({}, defaultCfgData, legacyCfgData);
 
     const pluginCode = configToPlugin(legacyCfgRaw);
     if (pluginCode) {

app/config/open.ts

@@ -1,8 +1,11 @@
-import {shell} from 'electron';
-import {cfgPath} from './paths';
-import * as Registry from 'native-reg';
 import {exec} from 'child_process';
 
+import {shell} from 'electron';
+
+import * as Registry from 'native-reg';
+
+import {cfgPath} from './paths';
+
 const getUserChoiceKey = () => {
   try {
     // Load FileExts keys for .js files
@@ -57,7 +60,7 @@ const openNotepad = (file: string) =>
     });
   });
 
-export default () => {
+const openConfig = () => {
   // Windows opens .js files with  WScript.exe by default
   // If the user hasn't set up an editor for .js files, we fallback to notepad.
   if (process.platform === 'win32') {
@@ -73,3 +76,5 @@ export default () => {
   }
   return shell.openPath(cfgPath).then((error) => error === '');
 };
+
+export default openConfig;

app/config/paths.ts

@@ -1,8 +1,10 @@
 // This module exports paths, names, and other metadata that is referenced
-import {homedir} from 'os';
-import {app} from 'electron';
 import {statSync} from 'fs';
+import {homedir} from 'os';
 import {resolve, join} from 'path';
+
+import {app} from 'electron';
+
 import isDev from 'electron-is-dev';
 
 const cfgFile = 'hyper.json';
@@ -15,15 +17,15 @@ const homeDirectory = homedir();
 let cfgDir = process.env.XDG_CONFIG_HOME
   ? join(process.env.XDG_CONFIG_HOME, 'Hyper')
   : process.platform === 'win32'
-  ? app.getPath('userData')
-  : join(homeDirectory, '.config', 'Hyper');
+    ? app.getPath('userData')
+    : join(homeDirectory, '.config', 'Hyper');
 
 const legacyCfgPath = join(
   process.env.XDG_CONFIG_HOME !== undefined
     ? join(process.env.XDG_CONFIG_HOME, 'hyper')
     : process.platform == 'win32'
-    ? app.getPath('userData')
-    : homedir(),
+      ? app.getPath('userData')
+      : homedir(),
   '.hyper.js'
 );
 

app/config/schema.json

@@ -24,25 +24,19 @@
                 }
             ],
             "description": "A string or number representing text font weight."
-        }
-    },
-    "properties": {
-        "config": {
+        },
+        "Partial<profileConfigOptions>": {
             "properties": {
-                "autoUpdatePlugins": {
-                    "description": "if `true` (default), Hyper will update plugins every 5 hours\nyou can also set it to a custom time e.g. `1d` or `2h`",
-                    "type": [
-                        "string",
-                        "boolean"
-                    ]
-                },
                 "backgroundColor": {
                     "description": "terminal background color\n\nopacity is only supported on macOS",
                     "type": "string"
                 },
                 "bell": {
                     "description": "Supported Options:\n1. 'SOUND' -> Enables the bell as a sound\n2. false: turns off the bell",
-                    "type": "string"
+                    "enum": [
+                        "SOUND",
+                        false
+                    ]
                 },
                 "bellSound": {
                     "description": "base64 encoded string of the sound file to use for the bell\nif null, the default bell will be used",
@@ -163,14 +157,6 @@
                     ],
                     "type": "string"
                 },
-                "defaultSSHApp": {
-                    "description": "if `true` hyper will be set as the default protocol client for SSH",
-                    "type": "boolean"
-                },
-                "disableAutoUpdates": {
-                    "description": "if `true` hyper will not check for updates",
-                    "type": "boolean"
-                },
                 "disableLigatures": {
                     "description": "if `false` Hyper will use ligatures provided by some fonts",
                     "type": "boolean"
@@ -202,6 +188,10 @@
                     "description": "color of the text",
                     "type": "string"
                 },
+                "imageSupport": {
+                    "description": "Whether to enable Sixel and iTerm2 inline image protocol support or not.",
+                    "type": "boolean"
+                },
                 "letterSpacing": {
                     "description": "letter spacing as a relative unit",
                     "type": "number"
@@ -253,11 +243,11 @@
                     "type": "string"
                 },
                 "shell": {
-                    "description": "the shell to run when spawning a new session (i.e. /usr/local/bin/fish)\nif left empty, your system's login shell will be used by default\n\nWindows\n- Make sure to use a full path if the binary name doesn't work\n- Remove `--login` in shellArgs\n\nWindows Subsystem for Linux (WSL) - previously Bash on Windows\n- Example: `C:\\\\Windows\\\\System32\\\\wsl.exe`\n\nGit-bash on Windows\n- Example: `C:\\\\Program Files\\\\Git\\\\bin\\\\bash.exe`\n\nPowerShell on Windows\n- Example: `C:\\\\WINDOWS\\\\System32\\\\WindowsPowerShell\\\\v1.0\\\\powershell.exe`\n\nCygwin\n- Example: `C:\\\\cygwin64\\\\bin\\\\bash.exe`\n\nGit Bash\n- Example: `C:\\\\Program Files\\\\Git\\\\git-cmd.exe`\nThen Add `--command=usr/bin/bash.exe` to shellArgs",
+                    "description": "the shell to run when spawning a new session (e.g. /usr/local/bin/fish)\nif left empty, your system's login shell will be used by default\n\nWindows\n- Make sure to use a full path if the binary name doesn't work\n- Remove `--login` in shellArgs\n\nWindows Subsystem for Linux (WSL) - previously Bash on Windows\n- Example: `C:\\\\Windows\\\\System32\\\\wsl.exe`\n\nGit-bash on Windows\n- Example: `C:\\\\Program Files\\\\Git\\\\bin\\\\bash.exe`\n\nPowerShell on Windows\n- Example: `C:\\\\WINDOWS\\\\System32\\\\WindowsPowerShell\\\\v1.0\\\\powershell.exe`\n\nCygwin\n- Example: `C:\\\\cygwin64\\\\bin\\\\bash.exe`\n\nGit Bash\n- Example: `C:\\\\Program Files\\\\Git\\\\git-cmd.exe`\nThen Add `--command=usr/bin/bash.exe` to shellArgs",
                     "type": "string"
                 },
                 "shellArgs": {
-                    "description": "for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)\nby default `['--login']` will be used",
+                    "description": "for setting shell arguments (e.g. for using interactive shellArgs: `['-i']`)\nby default `['--login']` will be used",
                     "items": {
                         "type": "string"
                     },
@@ -287,17 +277,6 @@
                 "uiFontFamily": {
                     "type": "string"
                 },
-                "updateChannel": {
-                    "description": "choose either `'stable'` for receiving highly polished, or `'canary'` for less polished but more frequent updates",
-                    "enum": [
-                        "canary",
-                        "stable"
-                    ],
-                    "type": "string"
-                },
-                "useConpty": {
-                    "type": "boolean"
-                },
                 "webGLRenderer": {
                     "description": "Whether to use the WebGL renderer. Set it to false to use canvas-based\nrendering (slower, but supports transparent backgrounds)",
                     "type": "boolean"
@@ -332,50 +311,414 @@
                     "type": "string"
                 }
             },
-            "required": [
-                "autoUpdatePlugins",
-                "backgroundColor",
-                "bell",
-                "bellSound",
-                "bellSoundURL",
-                "borderColor",
-                "colors",
-                "copyOnSelect",
-                "css",
-                "cursorAccentColor",
-                "cursorBlink",
-                "cursorColor",
-                "cursorShape",
-                "defaultSSHApp",
-                "disableAutoUpdates",
-                "disableLigatures",
-                "env",
-                "fontFamily",
-                "fontSize",
-                "fontWeight",
-                "fontWeightBold",
-                "foregroundColor",
-                "letterSpacing",
-                "lineHeight",
-                "macOptionSelectionMode",
-                "padding",
-                "preserveCWD",
-                "quickEdit",
-                "screenReaderMode",
-                "scrollback",
-                "selectionColor",
-                "shell",
-                "shellArgs",
-                "showHamburgerMenu",
-                "showWindowControls",
-                "termCSS",
-                "updateChannel",
-                "webGLRenderer",
-                "webLinksActivationKey",
-                "workingDirectory"
-            ],
             "type": "object"
         },
+        "configOptions": {
+            "allOf": [
+                {
+                    "properties": {
+                        "autoUpdatePlugins": {
+                            "description": "if `true` (default), Hyper will update plugins every 5 hours\nyou can also set it to a custom time e.g. `1d` or `2h`",
+                            "type": [
+                                "string",
+                                "boolean"
+                            ]
+                        },
+                        "defaultSSHApp": {
+                            "description": "if `true` hyper will be set as the default protocol client for SSH",
+                            "type": "boolean"
+                        },
+                        "disableAutoUpdates": {
+                            "description": "if `true` hyper will not check for updates",
+                            "type": "boolean"
+                        },
+                        "updateChannel": {
+                            "description": "choose either `'stable'` for receiving highly polished, or `'canary'` for less polished but more frequent updates",
+                            "enum": [
+                                "canary",
+                                "stable"
+                            ],
+                            "type": "string"
+                        },
+                        "useConpty": {
+                            "type": "boolean"
+                        }
+                    },
+                    "required": [
+                        "autoUpdatePlugins",
+                        "defaultSSHApp",
+                        "disableAutoUpdates",
+                        "updateChannel"
+                    ],
+                    "type": "object"
+                },
+                {
+                    "properties": {
+                        "backgroundColor": {
+                            "description": "terminal background color\n\nopacity is only supported on macOS",
+                            "type": "string"
+                        },
+                        "bell": {
+                            "description": "Supported Options:\n1. 'SOUND' -> Enables the bell as a sound\n2. false: turns off the bell",
+                            "enum": [
+                                "SOUND",
+                                false
+                            ]
+                        },
+                        "bellSound": {
+                            "description": "base64 encoded string of the sound file to use for the bell\nif null, the default bell will be used",
+                            "type": [
+                                "string",
+                                "null"
+                            ]
+                        },
+                        "bellSoundURL": {
+                            "description": "An absolute file path to a sound file on the machine.",
+                            "type": [
+                                "string",
+                                "null"
+                            ]
+                        },
+                        "borderColor": {
+                            "description": "border color (window, tabs)",
+                            "type": "string"
+                        },
+                        "colors": {
+                            "description": "the full list. if you're going to provide the full color palette,\nincluding the 6 x 6 color cubes and the grayscale map, just provide\nan array here instead of a color map object",
+                            "properties": {
+                                "black": {
+                                    "type": "string"
+                                },
+                                "blue": {
+                                    "type": "string"
+                                },
+                                "cyan": {
+                                    "type": "string"
+                                },
+                                "green": {
+                                    "type": "string"
+                                },
+                                "lightBlack": {
+                                    "type": "string"
+                                },
+                                "lightBlue": {
+                                    "type": "string"
+                                },
+                                "lightCyan": {
+                                    "type": "string"
+                                },
+                                "lightGreen": {
+                                    "type": "string"
+                                },
+                                "lightMagenta": {
+                                    "type": "string"
+                                },
+                                "lightRed": {
+                                    "type": "string"
+                                },
+                                "lightWhite": {
+                                    "type": "string"
+                                },
+                                "lightYellow": {
+                                    "type": "string"
+                                },
+                                "magenta": {
+                                    "type": "string"
+                                },
+                                "red": {
+                                    "type": "string"
+                                },
+                                "white": {
+                                    "type": "string"
+                                },
+                                "yellow": {
+                                    "type": "string"
+                                }
+                            },
+                            "required": [
+                                "black",
+                                "blue",
+                                "cyan",
+                                "green",
+                                "lightBlack",
+                                "lightBlue",
+                                "lightCyan",
+                                "lightGreen",
+                                "lightMagenta",
+                                "lightRed",
+                                "lightWhite",
+                                "lightYellow",
+                                "magenta",
+                                "red",
+                                "white",
+                                "yellow"
+                            ],
+                            "type": "object"
+                        },
+                        "copyOnSelect": {
+                            "description": "if `true` selected text will automatically be copied to the clipboard",
+                            "type": "boolean"
+                        },
+                        "css": {
+                            "description": "custom CSS to embed in the main window",
+                            "type": "string"
+                        },
+                        "cursorAccentColor": {
+                            "description": "terminal text color under BLOCK cursor",
+                            "type": "string"
+                        },
+                        "cursorBlink": {
+                            "description": "set to `true` for blinking cursor",
+                            "type": "boolean"
+                        },
+                        "cursorColor": {
+                            "description": "terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)",
+                            "type": "string"
+                        },
+                        "cursorShape": {
+                            "description": "`'BEAM'` for |, `'UNDERLINE'` for _, `'BLOCK'` for █",
+                            "enum": [
+                                "BEAM",
+                                "BLOCK",
+                                "UNDERLINE"
+                            ],
+                            "type": "string"
+                        },
+                        "disableLigatures": {
+                            "description": "if `false` Hyper will use ligatures provided by some fonts",
+                            "type": "boolean"
+                        },
+                        "env": {
+                            "additionalProperties": {
+                                "type": "string"
+                            },
+                            "description": "for environment variables",
+                            "type": "object"
+                        },
+                        "fontFamily": {
+                            "description": "font family with optional fallbacks",
+                            "type": "string"
+                        },
+                        "fontSize": {
+                            "description": "default font size in pixels for all tabs",
+                            "type": "number"
+                        },
+                        "fontWeight": {
+                            "$ref": "#/definitions/FontWeight",
+                            "description": "default font weight eg:'normal', '400', 'bold'"
+                        },
+                        "fontWeightBold": {
+                            "$ref": "#/definitions/FontWeight",
+                            "description": "font weight for bold characters eg:'normal', '600', 'bold'"
+                        },
+                        "foregroundColor": {
+                            "description": "color of the text",
+                            "type": "string"
+                        },
+                        "imageSupport": {
+                            "description": "Whether to enable Sixel and iTerm2 inline image protocol support or not.",
+                            "type": "boolean"
+                        },
+                        "letterSpacing": {
+                            "description": "letter spacing as a relative unit",
+                            "type": "number"
+                        },
+                        "lineHeight": {
+                            "description": "line height as a relative unit",
+                            "type": "number"
+                        },
+                        "macOptionSelectionMode": {
+                            "description": "choose either `'vertical'`, if you want the column mode when Option key is hold during selection (Default)\nor `'force'`, if you want to force selection regardless of whether the terminal is in mouse events mode\n(inside tmux or vim with mouse mode enabled for example).",
+                            "type": "string"
+                        },
+                        "modifierKeys": {
+                            "properties": {
+                                "altIsMeta": {
+                                    "type": "boolean"
+                                },
+                                "cmdIsMeta": {
+                                    "type": "boolean"
+                                }
+                            },
+                            "required": [
+                                "altIsMeta",
+                                "cmdIsMeta"
+                            ],
+                            "type": "object"
+                        },
+                        "padding": {
+                            "description": "custom padding (CSS format, i.e.: `top right bottom left` or `top horizontal bottom` or `vertical horizontal` or `all`)",
+                            "type": "string"
+                        },
+                        "preserveCWD": {
+                            "description": "set to true to preserve working directory when creating splits or tabs",
+                            "type": "boolean"
+                        },
+                        "quickEdit": {
+                            "description": "if `true` on right click selected text will be copied or pasted if no\nselection is present (`true` by default on Windows and disables the context menu feature)",
+                            "type": "boolean"
+                        },
+                        "screenReaderMode": {
+                            "description": "set to true to enable screen reading apps (like NVDA) to read the contents of the terminal",
+                            "type": "boolean"
+                        },
+                        "scrollback": {
+                            "type": "number"
+                        },
+                        "selectionColor": {
+                            "description": "terminal selection color",
+                            "type": "string"
+                        },
+                        "shell": {
+                            "description": "the shell to run when spawning a new session (e.g. /usr/local/bin/fish)\nif left empty, your system's login shell will be used by default\n\nWindows\n- Make sure to use a full path if the binary name doesn't work\n- Remove `--login` in shellArgs\n\nWindows Subsystem for Linux (WSL) - previously Bash on Windows\n- Example: `C:\\\\Windows\\\\System32\\\\wsl.exe`\n\nGit-bash on Windows\n- Example: `C:\\\\Program Files\\\\Git\\\\bin\\\\bash.exe`\n\nPowerShell on Windows\n- Example: `C:\\\\WINDOWS\\\\System32\\\\WindowsPowerShell\\\\v1.0\\\\powershell.exe`\n\nCygwin\n- Example: `C:\\\\cygwin64\\\\bin\\\\bash.exe`\n\nGit Bash\n- Example: `C:\\\\Program Files\\\\Git\\\\git-cmd.exe`\nThen Add `--command=usr/bin/bash.exe` to shellArgs",
+                            "type": "string"
+                        },
+                        "shellArgs": {
+                            "description": "for setting shell arguments (e.g. for using interactive shellArgs: `['-i']`)\nby default `['--login']` will be used",
+                            "items": {
+                                "type": "string"
+                            },
+                            "type": "array"
+                        },
+                        "showHamburgerMenu": {
+                            "description": "if you're using a Linux setup which show native menus, set to false\n\ndefault: `true` on Linux, `true` on Windows, ignored on macOS",
+                            "enum": [
+                                "",
+                                false,
+                                true
+                            ]
+                        },
+                        "showWindowControls": {
+                            "description": "set to `false` if you want to hide the minimize, maximize and close buttons\n\nadditionally, set to `'left'` if you want them on the left, like in Ubuntu\n\ndefault: `true` on Windows and Linux, ignored on macOS",
+                            "enum": [
+                                "",
+                                false,
+                                "left",
+                                true
+                            ]
+                        },
+                        "termCSS": {
+                            "description": "custom CSS to embed in the terminal window",
+                            "type": "string"
+                        },
+                        "uiFontFamily": {
+                            "type": "string"
+                        },
+                        "webGLRenderer": {
+                            "description": "Whether to use the WebGL renderer. Set it to false to use canvas-based\nrendering (slower, but supports transparent backgrounds)",
+                            "type": "boolean"
+                        },
+                        "webLinksActivationKey": {
+                            "description": "keypress required for weblink activation: [ctrl | alt | meta | shift]",
+                            "enum": [
+                                "",
+                                "alt",
+                                "ctrl",
+                                "meta",
+                                "shift"
+                            ],
+                            "type": "string"
+                        },
+                        "windowSize": {
+                            "description": "Initial window size in pixels",
+                            "items": [
+                                {
+                                    "type": "number"
+                                },
+                                {
+                                    "type": "number"
+                                }
+                            ],
+                            "maxItems": 2,
+                            "minItems": 2,
+                            "type": "array"
+                        },
+                        "workingDirectory": {
+                            "description": "set custom startup directory (must be an absolute path)",
+                            "type": "string"
+                        }
+                    },
+                    "required": [
+                        "backgroundColor",
+                        "bell",
+                        "bellSound",
+                        "bellSoundURL",
+                        "borderColor",
+                        "colors",
+                        "copyOnSelect",
+                        "css",
+                        "cursorAccentColor",
+                        "cursorBlink",
+                        "cursorColor",
+                        "cursorShape",
+                        "disableLigatures",
+                        "env",
+                        "fontFamily",
+                        "fontSize",
+                        "fontWeight",
+                        "fontWeightBold",
+                        "foregroundColor",
+                        "imageSupport",
+                        "letterSpacing",
+                        "lineHeight",
+                        "macOptionSelectionMode",
+                        "padding",
+                        "preserveCWD",
+                        "quickEdit",
+                        "screenReaderMode",
+                        "scrollback",
+                        "selectionColor",
+                        "shell",
+                        "shellArgs",
+                        "showHamburgerMenu",
+                        "showWindowControls",
+                        "termCSS",
+                        "webGLRenderer",
+                        "webLinksActivationKey",
+                        "workingDirectory"
+                    ],
+                    "type": "object"
+                },
+                {
+                    "properties": {
+                        "defaultProfile": {
+                            "description": "The default profile name to use when launching a new session",
+                            "type": "string"
+                        },
+                        "profiles": {
+                            "description": "A list of profiles to use",
+                            "items": {
+                                "properties": {
+                                    "config": {
+                                        "$ref": "#/definitions/Partial<profileConfigOptions>",
+                                        "description": "Specify all the options you want to override for each profile.\nOptions set here override the defaults set in the root."
+                                    },
+                                    "name": {
+                                        "type": "string"
+                                    }
+                                },
+                                "required": [
+                                    "config",
+                                    "name"
+                                ],
+                                "type": "object"
+                            },
+                            "type": "array"
+                        }
+                    },
+                    "required": [
+                        "defaultProfile",
+                        "profiles"
+                    ],
+                    "type": "object"
+                }
+            ]
+        }
+    },
+    "properties": {
+        "config": {
+            "$ref": "#/definitions/configOptions"
+        },
         "keymaps": {
             "additionalProperties": {
                 "anyOf": [

app/config/windows.ts

@@ -1,5 +1,6 @@
+import type {BrowserWindow} from 'electron';
+
 import Config from 'electron-store';
-import {BrowserWindow} from 'electron';
 
 export const defaults = {
   windowPosition: [50, 50] as [number, number],

app/ext-modules.d.ts

@@ -1,8 +0,0 @@
-declare module 'git-describe' {
-  export function gitDescribe(...args: any[]): void;
-}
-
-declare module 'default-shell' {
-  const val: string;
-  export default val;
-}

app/index.d.ts

@@ -1 +0,0 @@
-// Dummy file, required by tsc

app/index.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/order
 import {cfgPath} from './config/paths';
 
 // Print diagnostic information for a few arguments instead of running Hyper.
@@ -11,25 +12,29 @@ if (['--help', '-v', '--version'].includes(process.argv[1])) {
 }
 
 // Enable remote module
+// eslint-disable-next-line import/order
 import {initialize as remoteInitialize} from '@electron/remote/main';
 remoteInitialize();
 
+// set up config
+// eslint-disable-next-line import/order
+import * as config from './config';
+config.setup();
+
 // Native
 import {resolve} from 'path';
 
 // Packages
 import {app, BrowserWindow, Menu, screen} from 'electron';
-import {gitDescribe} from 'git-describe';
+
 import isDev from 'electron-is-dev';
-import * as config from './config';
+import {gitDescribe} from 'git-describe';
+import parseUrl from 'parse-url';
 
-// set up config
-config.setup();
-
-import * as plugins from './plugins';
-import {installCLI} from './utils/cli-install';
 import * as AppMenu from './menus/menu';
+import * as plugins from './plugins';
 import {newWindow} from './ui/window';
+import {installCLI} from './utils/cli-install';
 import * as windowUtils from './utils/window-utils';
 
 const windowSet = new Set<BrowserWindow>([]);
@@ -57,7 +62,7 @@ if (isDev) {
   console.log('running in dev mode');
 
   // Override default appVersion which is set from package.json
-  gitDescribe({customArguments: ['--tags']}, (error: any, gitInfo: any) => {
+  gitDescribe({customArguments: ['--tags']}, (error: any, gitInfo: {raw: string}) => {
     if (!error) {
       app.setVersion(gitInfo.raw);
     }
@@ -73,15 +78,13 @@ async function installDevExtensions(isDev_: boolean) {
   if (!isDev_) {
     return [];
   }
-  const installer = await import('electron-devtools-installer');
+  const {default: installer, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS} = await import('electron-devtools-installer');
 
-  const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'] as const;
+  const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];
   const forceDownload = Boolean(process.env.UPGRADE_EXTENSIONS);
 
   return Promise.all(
-    extensions.map((name) =>
-      installer.default(installer[name], {forceDownload, loadExtensionOptions: {allowFileAccess: true}})
-    )
+    extensions.map((extension) => installer(extension, {forceDownload, loadExtensionOptions: {allowFileAccess: true}}))
   );
 }
 
@@ -91,9 +94,10 @@ app.on('ready', () =>
     .then(() => {
       function createWindow(
         fn?: (win: BrowserWindow) => void,
-        options: {size?: [number, number]; position?: [number, number]} = {}
+        options: {size?: [number, number]; position?: [number, number]} = {},
+        profileName: string = config.getDefaultProfile()
       ) {
-        const cfg = plugins.getDecoratedConfig();
+        const cfg = plugins.getDecoratedConfig(profileName);
 
         const winSet = config.getWin();
         let [startX, startY] = winSet.position;
@@ -135,10 +139,14 @@ app.on('ready', () =>
           [startX, startY] = config.windowDefaults.windowPosition;
         }
 
-        const hwin = newWindow({width, height, x: startX, y: startY}, cfg, fn);
+        const hwin = newWindow({width, height, x: startX, y: startY}, cfg, fn, profileName);
         windowSet.add(hwin);
         void hwin.loadURL(url);
 
+        hwin.once('ready-to-show', () => {
+          hwin.show();
+        });
+
         // the window can be closed by the browser process itself
         hwin.on('close', () => {
           hwin.clean();
@@ -182,7 +190,7 @@ app.on('ready', () =>
               }
             }
           ]);
-          app.dock.setMenu(dockMenu);
+          app.dock?.setMenu(dockMenu);
         }
 
         Menu.setApplicationMenu(AppMenu.buildMenu(menu));
@@ -234,6 +242,6 @@ app.on('open-file', (_event, path) => {
 
 app.on('open-url', (_event, sshUrl) => {
   GetWindow((win: BrowserWindow) => {
-    win.rpc.emit('open ssh', sshUrl);
+    win.rpc.emit('open ssh', parseUrl(sshUrl));
   });
 });

app/menus/menu.ts

@@ -1,20 +1,22 @@
 // Packages
-import {app, dialog, Menu, BrowserWindow} from 'electron';
+import {app, dialog, Menu} from 'electron';
+import type {BrowserWindow} from 'electron';
 
 // Utilities
+import {execCommand} from '../commands';
 import {getConfig} from '../config';
 import {icon} from '../config/paths';
-import viewMenu from './menus/view';
-import shellMenu from './menus/shell';
-import editMenu from './menus/edit';
-import toolsMenu from './menus/tools';
-import windowMenu from './menus/window';
-import helpMenu from './menus/help';
-import darwinMenu from './menus/darwin';
 import {getDecoratedKeymaps} from '../plugins';
-import {execCommand} from '../commands';
 import {getRendererTypes} from '../utils/renderer-utils';
 
+import darwinMenu from './menus/darwin';
+import editMenu from './menus/edit';
+import helpMenu from './menus/help';
+import shellMenu from './menus/shell';
+import toolsMenu from './menus/tools';
+import viewMenu from './menus/view';
+import windowMenu from './menus/window';
+
 const appName = app.name;
 const appVersion = app.getVersion();
 
@@ -54,14 +56,30 @@ export const createMenu = (
     void dialog.showMessageBox({
       title: `About ${appName}`,
       message: `${appName} ${appVersion} (${updateChannel})`,
-      detail: `Renderers: ${renderers}\nPlugins: ${pluginList}\n\nCreated by Guillermo Rauch\nCopyright © 2022 Vercel, Inc.`,
+      detail: `
+        Renderers: ${renderers}
+        Plugins: ${pluginList}
+
+        Maintained by QUINE Global
+        Copyright © 2025
+
+        Created by Guillermo Rauch
+        Copyright © 2022 Vercel, Inc.
+      `
+        .split('\n')
+        .map((z) => z.trim())
+        .join('\n'),
       buttons: [],
       icon: icon as any
     });
   };
   const menu = [
     ...(process.platform === 'darwin' ? [darwinMenu(commandKeys, execCommand, showAbout)] : []),
-    shellMenu(commandKeys, execCommand),
+    shellMenu(
+      commandKeys,
+      (command, focusedWindow) => execCommand(command, focusedWindow as BrowserWindow | undefined),
+      getConfig().profiles.map((p) => p.name)
+    ),
     editMenu(commandKeys, execCommand),
     viewMenu(commandKeys, execCommand),
     toolsMenu(commandKeys, execCommand),

app/menus/menus/darwin.ts

@@ -1,8 +1,9 @@
 // This menu label is overrided by OSX to be the appName
 // The label is set to appName here so it matches actual behavior
-import {app, BrowserWindow, MenuItemConstructorOptions} from 'electron';
+import {app} from 'electron';
+import type {BrowserWindow, MenuItemConstructorOptions} from 'electron';
 
-export default (
+const darwinMenu = (
   commandKeys: Record<string, string>,
   execCommand: (command: string, focusedWindow?: BrowserWindow) => void,
   showAbout: () => void
@@ -54,3 +55,5 @@ export default (
     ]
   };
 };
+
+export default darwinMenu;

app/menus/menus/edit.ts

@@ -1,6 +1,6 @@
-import {BrowserWindow, MenuItemConstructorOptions} from 'electron';
+import type {BrowserWindow, MenuItemConstructorOptions} from 'electron';
 
-export default (
+const editMenu = (
   commandKeys: Record<string, string>,
   execCommand: (command: string, focusedWindow?: BrowserWindow) => void
 ) => {
@@ -38,7 +38,7 @@ export default (
       label: 'Select All',
       accelerator: commandKeys['editor:selectAll'],
       click(item, focusedWindow) {
-        execCommand('editor:selectAll', focusedWindow);
+        execCommand('editor:selectAll', focusedWindow as BrowserWindow | undefined);
       }
     },
     {
@@ -51,28 +51,28 @@ export default (
           label: 'Previous word',
           accelerator: commandKeys['editor:movePreviousWord'],
           click(item, focusedWindow) {
-            execCommand('editor:movePreviousWord', focusedWindow);
+            execCommand('editor:movePreviousWord', focusedWindow as BrowserWindow | undefined);
           }
         },
         {
           label: 'Next word',
           accelerator: commandKeys['editor:moveNextWord'],
           click(item, focusedWindow) {
-            execCommand('editor:moveNextWord', focusedWindow);
+            execCommand('editor:moveNextWord', focusedWindow as BrowserWindow | undefined);
           }
         },
         {
           label: 'Line beginning',
           accelerator: commandKeys['editor:moveBeginningLine'],
           click(item, focusedWindow) {
-            execCommand('editor:moveBeginningLine', focusedWindow);
+            execCommand('editor:moveBeginningLine', focusedWindow as BrowserWindow | undefined);
           }
         },
         {
           label: 'Line end',
           accelerator: commandKeys['editor:moveEndLine'],
           click(item, focusedWindow) {
-            execCommand('editor:moveEndLine', focusedWindow);
+            execCommand('editor:moveEndLine', focusedWindow as BrowserWindow | undefined);
           }
         }
       ]
@@ -84,28 +84,28 @@ export default (
           label: 'Previous word',
           accelerator: commandKeys['editor:deletePreviousWord'],
           click(item, focusedWindow) {
-            execCommand('editor:deletePreviousWord', focusedWindow);
+            execCommand('editor:deletePreviousWord', focusedWindow as BrowserWindow | undefined);
           }
         },
         {
           label: 'Next word',
           accelerator: commandKeys['editor:deleteNextWord'],
           click(item, focusedWindow) {
-            execCommand('editor:deleteNextWord', focusedWindow);
+            execCommand('editor:deleteNextWord', focusedWindow as BrowserWindow | undefined);
           }
         },
         {
           label: 'Line beginning',
           accelerator: commandKeys['editor:deleteBeginningLine'],
           click(item, focusedWindow) {
-            execCommand('editor:deleteBeginningLine', focusedWindow);
+            execCommand('editor:deleteBeginningLine', focusedWindow as BrowserWindow | undefined);
           }
         },
         {
           label: 'Line end',
           accelerator: commandKeys['editor:deleteEndLine'],
           click(item, focusedWindow) {
-            execCommand('editor:deleteEndLine', focusedWindow);
+            execCommand('editor:deleteEndLine', focusedWindow as BrowserWindow | undefined);
           }
         }
       ]
@@ -117,14 +117,14 @@ export default (
       label: 'Clear Buffer',
       accelerator: commandKeys['editor:clearBuffer'],
       click(item, focusedWindow) {
-        execCommand('editor:clearBuffer', focusedWindow);
+        execCommand('editor:clearBuffer', focusedWindow as BrowserWindow | undefined);
       }
     },
     {
       label: 'Search',
       accelerator: commandKeys['editor:search'],
       click(item, focusedWindow) {
-        execCommand('editor:search', focusedWindow);
+        execCommand('editor:search', focusedWindow as BrowserWindow | undefined);
       }
     }
   ];
@@ -147,3 +147,5 @@ export default (
     submenu
   };
 };
+
+export default editMenu;

app/menus/menus/help.ts

@@ -1,10 +1,14 @@
 import {release} from 'os';
-import {app, shell, MenuItemConstructorOptions, dialog, clipboard} from 'electron';
+
+import {app, shell, dialog, clipboard} from 'electron';
+import type {MenuItemConstructorOptions} from 'electron';
+
 import {getConfig, getPlugins} from '../../config';
-const {arch, env, platform, versions} = process;
 import {version} from '../../package.json';
 
-export default (commands: Record<string, string>, showAbout: () => void): MenuItemConstructorOptions => {
+const {arch, env, platform, versions} = process;
+
+const helpMenu = (commands: Record<string, string>, showAbout: () => void): MenuItemConstructorOptions => {
   const submenu: MenuItemConstructorOptions[] = [
     {
       label: `${app.name} Website`,
@@ -57,11 +61,11 @@ ${JSON.stringify(getPlugins(), null, 2)}
 \`\`\`
 </details>`;
 
-        const issueURL = `https://github.com/vercel/hyper/issues/new?body=${encodeURIComponent(body)}`;
+        const issueURL = `https://github.com/quine-global/hyper/issues/new?body=${encodeURIComponent(body)}`;
         const copyAndSend = () => {
           clipboard.writeText(body);
           void shell.openExternal(
-            `https://github.com/vercel/hyper/issues/new?body=${encodeURIComponent(
+            `https://github.com/quine-global/hyper/issues/new?body=${encodeURIComponent(
               '<!-- We have written the needed data into your clipboard because it was too large to send. ' +
                 'Please paste. -->\n'
             )}`
@@ -106,3 +110,5 @@ ${JSON.stringify(getPlugins(), null, 2)}
     submenu
   };
 };
+
+export default helpMenu;

app/menus/menus/shell.ts

@@ -1,8 +1,9 @@
-import {BrowserWindow, MenuItemConstructorOptions} from 'electron';
+import type {BaseWindow, MenuItemConstructorOptions} from 'electron';
 
-export default (
+const shellMenu = (
   commandKeys: Record<string, string>,
-  execCommand: (command: string, focusedWindow?: BrowserWindow) => void
+  execCommand: (command: string, focusedWindow?: BaseWindow) => void,
+  profiles: string[]
 ): MenuItemConstructorOptions => {
   const isMac = process.platform === 'darwin';
 
@@ -43,6 +44,47 @@ export default (
       {
         type: 'separator'
       },
+      ...profiles.map(
+        (profile): MenuItemConstructorOptions => ({
+          label: profile,
+          submenu: [
+            {
+              label: 'New Tab',
+              accelerator: commandKeys[`tab:new:${profile}`],
+              click(item, focusedWindow) {
+                execCommand(`tab:new:${profile}`, focusedWindow);
+              }
+            },
+            {
+              label: 'New Window',
+              accelerator: commandKeys[`window:new:${profile}`],
+              click(item, focusedWindow) {
+                execCommand(`window:new:${profile}`, focusedWindow);
+              }
+            },
+            {
+              type: 'separator'
+            },
+            {
+              label: 'Split Down',
+              accelerator: commandKeys[`pane:splitDown:${profile}`],
+              click(item, focusedWindow) {
+                execCommand(`pane:splitDown:${profile}`, focusedWindow);
+              }
+            },
+            {
+              label: 'Split Right',
+              accelerator: commandKeys[`pane:splitRight:${profile}`],
+              click(item, focusedWindow) {
+                execCommand(`pane:splitRight:${profile}`, focusedWindow);
+              }
+            }
+          ]
+        })
+      ),
+      {
+        type: 'separator'
+      },
       {
         label: 'Close',
         accelerator: commandKeys['pane:close'],
@@ -58,3 +100,5 @@ export default (
     ]
   };
 };
+
+export default shellMenu;

app/menus/menus/tools.ts

@@ -1,6 +1,6 @@
-import {BrowserWindow, MenuItemConstructorOptions} from 'electron';
+import type {BrowserWindow, MenuItemConstructorOptions} from 'electron';
 
-export default (
+const toolsMenu = (
   commands: Record<string, string>,
   execCommand: (command: string, focusedWindow?: BrowserWindow) => void
 ): MenuItemConstructorOptions => {
@@ -45,3 +45,5 @@ export default (
     ]
   };
 };
+
+export default toolsMenu;

app/menus/menus/view.ts

@@ -1,6 +1,6 @@
-import {BrowserWindow, MenuItemConstructorOptions} from 'electron';
+import type {BrowserWindow, MenuItemConstructorOptions} from 'electron';
 
-export default (
+const viewMenu = (
   commandKeys: Record<string, string>,
   execCommand: (command: string, focusedWindow?: BrowserWindow) => void
 ): MenuItemConstructorOptions => {
@@ -11,21 +11,21 @@ export default (
         label: 'Reload',
         accelerator: commandKeys['window:reload'],
         click(item, focusedWindow) {
-          execCommand('window:reload', focusedWindow);
+          execCommand('window:reload', focusedWindow as BrowserWindow);
         }
       },
       {
         label: 'Full Reload',
         accelerator: commandKeys['window:reloadFull'],
         click(item, focusedWindow) {
-          execCommand('window:reloadFull', focusedWindow);
+          execCommand('window:reloadFull', focusedWindow as BrowserWindow);
         }
       },
       {
         label: 'Developer Tools',
         accelerator: commandKeys['window:devtools'],
         click: (item, focusedWindow) => {
-          execCommand('window:devtools', focusedWindow);
+          execCommand('window:devtools', focusedWindow as BrowserWindow);
         }
       },
       {
@@ -35,23 +35,25 @@ export default (
         label: 'Reset Zoom Level',
         accelerator: commandKeys['zoom:reset'],
         click(item, focusedWindow) {
-          execCommand('zoom:reset', focusedWindow);
+          execCommand('zoom:reset', focusedWindow as BrowserWindow);
         }
       },
       {
         label: 'Zoom In',
         accelerator: commandKeys['zoom:in'],
         click(item, focusedWindow) {
-          execCommand('zoom:in', focusedWindow);
+          execCommand('zoom:in', focusedWindow as BrowserWindow);
         }
       },
       {
         label: 'Zoom Out',
         accelerator: commandKeys['zoom:out'],
         click(item, focusedWindow) {
-          execCommand('zoom:out', focusedWindow);
+          execCommand('zoom:out', focusedWindow as BrowserWindow);
         }
       }
     ]
   };
 };
+
+export default viewMenu;

app/menus/menus/window.ts

@@ -1,6 +1,6 @@
-import {BrowserWindow, MenuItemConstructorOptions} from 'electron';
+import type {BrowserWindow, MenuItemConstructorOptions} from 'electron';
 
-export default (
+const windowMenu = (
   commandKeys: Record<string, string>,
   execCommand: (command: string, focusedWindow?: BrowserWindow) => void
 ): MenuItemConstructorOptions => {
@@ -37,14 +37,14 @@ export default (
             label: 'Previous',
             accelerator: commandKeys['tab:prev'],
             click: (item, focusedWindow) => {
-              execCommand('tab:prev', focusedWindow);
+              execCommand('tab:prev', focusedWindow as BrowserWindow);
             }
           },
           {
             label: 'Next',
             accelerator: commandKeys['tab:next'],
             click: (item, focusedWindow) => {
-              execCommand('tab:next', focusedWindow);
+              execCommand('tab:next', focusedWindow as BrowserWindow);
             }
           },
           {
@@ -63,14 +63,14 @@ export default (
             label: 'Previous',
             accelerator: commandKeys['pane:prev'],
             click: (item, focusedWindow) => {
-              execCommand('pane:prev', focusedWindow);
+              execCommand('pane:prev', focusedWindow as BrowserWindow);
             }
           },
           {
             label: 'Next',
             accelerator: commandKeys['pane:next'],
             click: (item, focusedWindow) => {
-              execCommand('pane:next', focusedWindow);
+              execCommand('pane:next', focusedWindow as BrowserWindow);
             }
           }
         ]
@@ -84,7 +84,7 @@ export default (
       {
         label: 'Toggle Always on Top',
         click: (item, focusedWindow) => {
-          execCommand('window:toggleKeepOnTop', focusedWindow);
+          execCommand('window:toggleKeepOnTop', focusedWindow as BrowserWindow);
         }
       },
       {
@@ -94,3 +94,5 @@ export default (
     ]
   };
 };
+
+export default windowMenu;

app/notifications.ts

@@ -1,7 +1,9 @@
-import ms from 'ms';
+import type {BrowserWindow} from 'electron';
+
 import fetch from 'electron-fetch';
+import ms from 'ms';
+
 import {version} from './package.json';
-import {BrowserWindow} from 'electron';
 
 const NEWS_URL = 'https://hyper-news.now.sh';
 
@@ -22,7 +24,7 @@ export default function fetchNotifications(win: BrowserWindow) {
   })
     .then((res) => res.json())
     .then((data) => {
-      const {message} = data || {};
+      const message: {text: string; url: string; dismissable: boolean} | '' = data.message || '';
       if (typeof message !== 'object' && message !== '') {
         throw new Error('Bad response');
       }

app/notify.ts

@@ -1,4 +1,5 @@
 import {app, Notification} from 'electron';
+
 import {icon} from './config/paths';
 
 export default function notify(title: string, body = '', details: {error?: any} = {}) {

app/package.json

@@ -2,43 +2,50 @@
   "name": "hyper",
   "productName": "Hyper",
   "description": "A terminal built on web technologies",
-  "version": "4.0.0-canary.2",
+  "version": "4.0.0-q-canary.8",
   "license": "MIT",
   "author": {
     "name": "ZEIT, Inc.",
     "email": "team@zeit.co"
   },
-  "repository": "zeit/hyper",
+  "repository": "quine-global/hyper",
+  "scripts": {
+    "postinstall": "npx patch-package"
+  },
   "dependencies": {
-    "@babel/parser": "7.20.7",
-    "@electron/remote": "2.0.9",
+    "@babel/parser": "7.27.0",
+    "@electron/remote": "2.1.2",
+    "ast-types": "^0.16.1",
     "async-retry": "1.3.3",
-    "chokidar": "^3.5.3",
+    "chokidar": "^3.6.0",
     "color": "4.2.3",
     "default-shell": "1.0.1",
+    "electron-devtools-installer": "3.2.1",
     "electron-fetch": "1.9.1",
     "electron-is-dev": "2.0.0",
-    "electron-store": "8.1.0",
-    "fs-extra": "11.1.0",
+    "electron-store": "8.2.0",
+    "fs-extra": "11.3.0",
     "git-describe": "4.1.1",
     "lodash": "4.17.21",
-    "mkdirp": "1.0.4",
     "ms": "2.1.3",
     "native-process-working-directory": "^1.0.2",
-    "node-pty": "0.11.0-beta27",
+    "node-pty": "1.1.0-beta33",
     "os-locale": "5.0.0",
-    "parse-url": "8.1.0",
-    "pify": "5.0.0",
+    "parse-url": "9.2.0",
     "queue": "6.0.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "recast": "0.22.0",
-    "semver": "7.3.8",
+    "quine-electron-drag-click": "2.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "recast": "0.23.11",
+    "semver": "7.7.1",
     "shell-env": "3.0.1",
     "sudo-prompt": "^9.2.1",
-    "uuid": "9.0.0"
+    "uuid": "10.0.0"
   },
   "optionalDependencies": {
     "native-reg": "1.1.1"
+  },
+  "devDependencies": {
+    "node-gyp": "^10.2.0"
   }
 }

app/plugins.ts

@@ -1,22 +1,28 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import {app, dialog, BrowserWindow, App, ipcMain} from 'electron';
-import {resolve, basename} from 'path';
+import {exec, execFile} from 'child_process';
 import {writeFileSync} from 'fs';
+import {resolve, basename} from 'path';
+import {promisify} from 'util';
+
+import {app, dialog, ipcMain as _ipcMain} from 'electron';
+import type {BrowserWindow, App, MenuItemConstructorOptions} from 'electron';
+import React from 'react';
+
 import Config from 'electron-store';
 import ms from 'ms';
-import React from 'react';
 import ReactDom from 'react-dom';
+
+import type {IpcMainWithCommands} from '../typings/common';
+import type {configOptions} from '../typings/config';
+
 import * as config from './config';
+import {plugs} from './config/paths';
 import notify from './notify';
 import {availableExtensions} from './plugins/extensions';
 import {install} from './plugins/install';
-import {plugs} from './config/paths';
 import mapKeys from './utils/map-keys';
-import {configOptions} from '../lib/config';
-import {promisify} from 'util';
-import {exec, execFile} from 'child_process';
 
 // local storage
 const cache = new Config();
@@ -205,7 +211,7 @@ function syncPackageJSON() {
     description: 'Auto-generated from `hyper.json`!',
     private: true,
     version: '0.0.1',
-    repository: 'vercel/hyper',
+    repository: 'quine-global/hyper',
     license: 'MIT',
     homepage: 'https://hyper.is',
     dependencies
@@ -276,7 +282,7 @@ function requirePlugins(): any[] {
   const {plugins: plugins_, localPlugins} = paths;
 
   const load = (path_: string) => {
-    let mod: any;
+    let mod: Record<string, any>;
     try {
       mod = require(path_);
       const exposed = mod && Object.keys(mod).some((key) => availableExtensions.has(key));
@@ -312,7 +318,7 @@ function requirePlugins(): any[] {
     ...localPlugins.filter((p) => basename(p) !== 'migrated-hyper3-config')
   ]
     .map(load)
-    .filter((v) => Boolean(v));
+    .filter((v): v is Record<string, any> => Boolean(v));
 }
 
 export const onApp = (app_: App) => {
@@ -415,7 +421,7 @@ export const getDeprecatedConfig = () => {
   return deprecated;
 };
 
-export const decorateMenu = (tpl: any) => {
+export const decorateMenu = (tpl: MenuItemConstructorOptions[]) => {
   return decorateObject(tpl, 'decorateMenu');
 };
 
@@ -423,8 +429,8 @@ export const getDecoratedEnv = (baseEnv: Record<string, string>) => {
   return decorateObject(baseEnv, 'decorateEnv');
 };
 
-export const getDecoratedConfig = () => {
-  const baseConfig = config.getConfig();
+export const getDecoratedConfig = (profile: string) => {
+  const baseConfig = config.getProfileConfig(profile);
   const decoratedConfig = decorateObject(baseConfig, 'decorateConfig');
   const fixedConfig = config.fixConfigDefaults(decoratedConfig);
   const translatedConfig = config.htermConfigTranslate(fixedConfig);
@@ -456,12 +462,19 @@ export const decorateSessionClass = <T>(Session: T): T => {
 
 export {toDependencies as _toDependencies};
 
-ipcMain.handle('child_process.exec', (event, args) => {
-  const {command, options} = args;
+const ipcMain = _ipcMain as IpcMainWithCommands;
+
+ipcMain.handle('child_process.exec', (event, command, options) => {
   return promisify(exec)(command, options);
 });
 
-ipcMain.handle('child_process.execFile', (event, _args) => {
-  const {file, args, options} = _args;
+ipcMain.handle('child_process.execFile', (event, file, args, options) => {
   return promisify(execFile)(file, args, options);
 });
+
+ipcMain.handle('getLoadedPluginVersions', () => getLoadedPluginVersions());
+ipcMain.handle('getPaths', () => getPaths());
+ipcMain.handle('getBasePaths', () => getBasePaths());
+ipcMain.handle('getDeprecatedConfig', () => getDeprecatedConfig());
+ipcMain.handle('getDecoratedConfig', (e, profile) => getDecoratedConfig(profile));
+ipcMain.handle('getDecoratedKeymaps', () => getDecoratedKeymaps());

app/plugins/install.ts

@@ -1,6 +1,8 @@
 import cp from 'child_process';
-import queue from 'queue';
+
 import ms from 'ms';
+import queue from 'queue';
+
 import {yarn, plugs} from '../config/paths';
 
 export const install = (fn: (err: string | null) => void) => {

app/rpc.ts

@@ -1,15 +1,22 @@
 import {EventEmitter} from 'events';
-import {ipcMain, BrowserWindow} from 'electron';
+
+import {ipcMain} from 'electron';
+import type {BrowserWindow, IpcMainEvent} from 'electron';
+
 import {v4 as uuidv4} from 'uuid';
 
-export class Server extends EventEmitter {
+import type {TypedEmitter, MainEvents, RendererEvents, FilterNever} from '../typings/common';
+
+export class Server {
+  emitter: TypedEmitter<MainEvents>;
   destroyed = false;
   win: BrowserWindow;
   id!: string;
+
   constructor(win: BrowserWindow) {
-    super();
+    this.emitter = new EventEmitter();
     this.win = win;
-    this.ipcListener = this.ipcListener.bind(this);
+    this.emit = this.emit.bind(this);
 
     if (this.destroyed) {
       return;
@@ -18,14 +25,13 @@ export class Server extends EventEmitter {
     const uid = uuidv4();
     this.id = uid;
 
-    // eslint-disable-next-line @typescript-eslint/unbound-method
     ipcMain.on(uid, this.ipcListener);
 
     // we intentionally subscribe to `on` instead of `once`
     // to support reloading the window and re-initializing
     // the channel
     this.wc.on('did-finish-load', () => {
-      this.wc.send('init', uid);
+      this.wc.send('init', uid, win.profileName);
     });
   }
 
@@ -33,23 +39,35 @@ export class Server extends EventEmitter {
     return this.win.webContents;
   }
 
-  ipcListener(event: any, {ev, data}: {ev: string; data: any}) {
-    super.emit(ev, data);
-  }
+  ipcListener = <U extends keyof MainEvents>(event: IpcMainEvent, {ev, data}: {ev: U; data: MainEvents[U]}) =>
+    this.emitter.emit(ev, data);
 
-  emit(ch: string, data: any = {}): any {
+  on = <U extends keyof MainEvents>(ev: U, fn: (arg0: MainEvents[U]) => void) => {
+    this.emitter.on(ev, fn);
+    return this;
+  };
+
+  once = <U extends keyof MainEvents>(ev: U, fn: (arg0: MainEvents[U]) => void) => {
+    this.emitter.once(ev, fn);
+    return this;
+  };
+
+  emit<U extends Exclude<keyof RendererEvents, FilterNever<RendererEvents>>>(ch: U): boolean;
+  emit<U extends FilterNever<RendererEvents>>(ch: U, data: RendererEvents[U]): boolean;
+  emit<U extends keyof RendererEvents>(ch: U, data?: RendererEvents[U]) {
     // This check is needed because data-batching can cause extra data to be
     // emitted after the window has already closed
     if (!this.win.isDestroyed()) {
       this.wc.send(this.id, {ch, data});
+      return true;
     }
+    return false;
   }
 
   destroy() {
-    this.removeAllListeners();
+    this.emitter.removeAllListeners();
     this.wc.removeAllListeners();
     if (this.id) {
-      // eslint-disable-next-line @typescript-eslint/unbound-method
       ipcMain.removeListener(this.id, this.ipcListener);
     } else {
       // mark for `genUid` in constructor
@@ -58,6 +76,8 @@ export class Server extends EventEmitter {
   }
 }
 
-export default (win: BrowserWindow) => {
+const createRPC = (win: BrowserWindow) => {
   return new Server(win);
 };
+
+export default createRPC;

app/session.ts

@@ -1,14 +1,17 @@
 import {EventEmitter} from 'events';
-import {StringDecoder} from 'string_decoder';
-import defaultShell from 'default-shell';
-import {getDecoratedEnv} from './plugins';
-import {productName, version} from './package.json';
-import * as config from './config';
-import {IPty, IWindowsPtyForkOptions, spawn as npSpawn} from 'node-pty';
-import {cliScriptPath} from './config/paths';
 import {dirname} from 'path';
-import shellEnv from 'shell-env';
+import {StringDecoder} from 'string_decoder';
+
+import defaultShell from 'default-shell';
+import type {IPty, IWindowsPtyForkOptions, spawn as npSpawn} from 'node-pty';
 import osLocale from 'os-locale';
+import shellEnv from 'shell-env';
+
+import * as config from './config';
+import {cliScriptPath} from './config/paths';
+import {productName, version} from './package.json';
+import {getDecoratedEnv} from './plugins';
+import {getFallBackShellConfig} from './utils/shell-fallback';
 
 const createNodePtyError = () =>
   new Error(
@@ -23,7 +26,6 @@ try {
   throw createNodePtyError();
 }
 
-const envFromConfig = config.getConfig().env || {};
 const useConpty = config.getConfig().useConpty;
 
 // Max duration to batch session data before sending it to the renderer process.
@@ -56,7 +58,7 @@ class DataBatcher extends EventEmitter {
     this.timeout = null;
   }
 
-  write(chunk: Buffer) {
+  write(chunk: Buffer | string) {
     if (this.data.length + chunk.length >= BATCH_MAX_SIZE) {
       // We've reached the max batch size. Flush it and start another one
       if (this.timeout) {
@@ -66,7 +68,7 @@ class DataBatcher extends EventEmitter {
       this.flush();
     }
 
-    this.data += this.decoder.write(chunk);
+    this.data += typeof chunk === 'string' ? chunk : this.decoder.write(chunk);
 
     if (!this.timeout) {
       this.timeout = setTimeout(() => this.flush(), BATCH_DURATION_MS);
@@ -84,11 +86,12 @@ class DataBatcher extends EventEmitter {
 
 interface SessionOptions {
   uid: string;
-  rows: number;
-  cols: number;
-  cwd: string;
-  shell: string;
-  shellArgs: string[];
+  rows?: number;
+  cols?: number;
+  cwd?: string;
+  shell?: string;
+  shellArgs?: string[];
+  profile: string;
 }
 export default class Session extends EventEmitter {
   pty: IPty | null;
@@ -96,6 +99,7 @@ export default class Session extends EventEmitter {
   shell: string | null;
   ended: boolean;
   initTimestamp: number;
+  profile!: string;
   constructor(options: SessionOptions) {
     super();
     this.pty = null;
@@ -106,22 +110,25 @@ export default class Session extends EventEmitter {
     this.init(options);
   }
 
-  init({uid, rows, cols: columns, cwd, shell: _shell, shellArgs: _shellArgs}: SessionOptions) {
+  init({uid, rows, cols, cwd, shell: _shell, shellArgs: _shellArgs, profile}: SessionOptions) {
+    this.profile = profile;
+    const envFromConfig = config.getProfileConfig(profile).env || {};
+    const defaultShellArgs = ['--login'];
+
+    const shell = _shell || defaultShell;
+    const shellArgs = _shellArgs || defaultShellArgs;
+
     const cleanEnv =
       process.env['APPIMAGE'] && process.env['APPDIR'] ? shellEnv.sync(_shell || defaultShell) : process.env;
-    const baseEnv = Object.assign(
-      {},
-      cleanEnv,
-      {
-        LANG: `${osLocale.sync().replace(/-/, '_')}.UTF-8`,
-        TERM: 'xterm-256color',
-        COLORTERM: 'truecolor',
-        TERM_PROGRAM: productName,
-        TERM_PROGRAM_VERSION: version
-      },
-      envFromConfig
-    );
-
+    const baseEnv: Record<string, string> = {
+      ...cleanEnv,
+      LANG: `${osLocale.sync().replace(/-/, '_')}.UTF-8`,
+      TERM: 'xterm-256color',
+      COLORTERM: 'truecolor',
+      TERM_PROGRAM: productName,
+      TERM_PROGRAM_VERSION: version,
+      ...envFromConfig
+    };
     // path to AppImage mount point is added to PATH environment variable automatically
     // which conflicts with the cli
     if (baseEnv['APPIMAGE'] && baseEnv['APPDIR']) {
@@ -137,10 +144,8 @@ export default class Session extends EventEmitter {
       delete baseEnv.GOOGLE_API_KEY;
     }
 
-    const defaultShellArgs = ['--login'];
-
     const options: IWindowsPtyForkOptions = {
-      cols: columns,
+      cols,
       rows,
       cwd,
       env: getDecoratedEnv(baseEnv)
@@ -151,9 +156,6 @@ export default class Session extends EventEmitter {
       options.useConpty = useConpty;
     }
 
-    const shell = _shell || defaultShell;
-    const shellArgs = _shellArgs || defaultShellArgs;
-
     try {
       this.pty = spawn(shell, shellArgs, options);
     } catch (_err) {
@@ -170,7 +172,7 @@ export default class Session extends EventEmitter {
       if (this.ended) {
         return;
       }
-      this.batcher?.write(chunk as any);
+      this.batcher?.write(chunk);
     });
 
     this.batcher.on('flush', (data: string) => {
@@ -183,15 +185,32 @@ export default class Session extends EventEmitter {
         // this will inform users in case there are errors in the config instead of instant exit
         const runDuration = new Date().getTime() - this.initTimestamp;
         if (e.exitCode > 0 && runDuration < 1000) {
-          const defaultShellConfig = {shell: defaultShell, shellArgs: defaultShellArgs};
-          const msg = `
+          const fallBackShellConfig = getFallBackShellConfig(shell, shellArgs, defaultShell, defaultShellArgs);
+          if (fallBackShellConfig) {
+            const msg = `
 shell exited in ${runDuration} ms with exit code ${e.exitCode}
 please check the shell config: ${JSON.stringify({shell, shellArgs}, undefined, 2)}
-fallback to default shell config: ${JSON.stringify(defaultShellConfig, undefined, 2)}
+using fallback shell config: ${JSON.stringify(fallBackShellConfig, undefined, 2)}
 `;
-          console.warn(msg);
-          this.batcher?.write(msg.replace(/\n/g, '\r\n') as any);
-          this.init({uid, rows, cols: columns, cwd, ...defaultShellConfig});
+            console.warn(msg);
+            this.batcher?.write(msg.replace(/\n/g, '\r\n'));
+            this.init({
+              uid,
+              rows,
+              cols,
+              cwd,
+              shell: fallBackShellConfig.shell,
+              shellArgs: fallBackShellConfig.shellArgs,
+              profile
+            });
+          } else {
+            const msg = `
+shell exited in ${runDuration} ms with exit code ${e.exitCode}
+No fallback available, please check the shell config.
+`;
+            console.warn(msg);
+            this.batcher?.write(msg.replace(/\n/g, '\r\n'));
+          }
         } else {
           this.ended = true;
           this.emit('exit');

app/tsconfig.json

@@ -1,12 +1,20 @@
 {
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
+    "declaration": true,
     "declarationDir": "../dist/tmp/appdts/",
     "outDir": "../target/",
+    "composite": true,
     "noImplicitAny": false
   },
   "include": [
     "./**/*",
-    "./package.json"
+    "./package.json",
+    "../typings/extend-electron.d.ts",
+    "../typings/ext-modules.d.ts"
+  ],
+  "exclude": [
+    "../dist/**/*",
+    "../target/**/*"
   ]
 }

app/ui/contextmenu.ts

@@ -1,8 +1,11 @@
+import type {MenuItemConstructorOptions, BrowserWindow} from 'electron';
+
+import {execCommand} from '../commands';
+import {getProfiles} from '../config';
 import editMenu from '../menus/menus/edit';
 import shellMenu from '../menus/menus/shell';
-import {execCommand} from '../commands';
 import {getDecoratedKeymaps} from '../plugins';
-import {MenuItemConstructorOptions, BrowserWindow} from 'electron';
+
 const separator: MenuItemConstructorOptions = {type: 'separator'};
 
 const getCommandKeys = (keymaps: Record<string, string[]>): Record<string, string> =>
@@ -20,14 +23,20 @@ const filterCutCopy = (selection: string, menuItem: MenuItemConstructorOptions)
   return menuItem;
 };
 
-export default (
+const contextMenuTemplate = (
   createWindow: (fn?: (win: BrowserWindow) => void, options?: Record<string, any>) => BrowserWindow,
   selection: string
 ) => {
   const commandKeys = getCommandKeys(getDecoratedKeymaps());
-  const _shell = shellMenu(commandKeys, execCommand).submenu as MenuItemConstructorOptions[];
+  const _shell = shellMenu(
+    commandKeys,
+    (command, focusedWindow) => execCommand(command, focusedWindow as BrowserWindow | undefined),
+    getProfiles().map((p) => p.name)
+  ).submenu as MenuItemConstructorOptions[];
   const _edit = editMenu(commandKeys, execCommand).submenu.filter(filterCutCopy.bind(null, selection));
   return _edit
     .concat(separator, _shell)
     .filter((menuItem) => !Object.prototype.hasOwnProperty.call(menuItem, 'enabled') || menuItem.enabled);
 };
+
+export default contextMenuTemplate;

app/ui/window.ts

@@ -1,28 +1,41 @@
-import {app, BrowserWindow, shell, Menu, BrowserWindowConstructorOptions, Event} from 'electron';
+import {existsSync} from 'fs';
 import {isAbsolute, normalize, sep} from 'path';
 import {URL, fileURLToPath} from 'url';
-import {v4 as uuidv4} from 'uuid';
-import isDev from 'electron-is-dev';
-import updater from '../updater';
-import toElectronBackgroundColor from '../utils/to-electron-background-color';
-import {icon, homeDirectory} from '../config/paths';
-import createRPC from '../rpc';
-import notify from '../notify';
-import fetchNotifications from '../notifications';
-import Session from '../session';
-import contextMenuTemplate from './contextmenu';
-import {execCommand} from '../commands';
-import {setRendererType, unsetRendererType} from '../utils/renderer-utils';
-import {decorateSessionOptions, decorateSessionClass} from '../plugins';
+
+import {app, BrowserWindow, shell, Menu} from 'electron';
+import type {BrowserWindowConstructorOptions} from 'electron';
+
 import {enable as remoteEnable} from '@electron/remote/main';
-import {configOptions} from '../../lib/config';
+import isDev from 'electron-is-dev';
 import {getWorkingDirectoryFromPID} from 'native-process-working-directory';
-import {existsSync} from 'fs';
+import electronDragClick from 'quine-electron-drag-click';
+import {v4 as uuidv4} from 'uuid';
+
+import type {sessionExtraOptions} from '../../typings/common';
+import type {configOptions} from '../../typings/config';
+import {execCommand} from '../commands';
+import {getDefaultProfile} from '../config';
+import {icon, homeDirectory} from '../config/paths';
+import fetchNotifications from '../notifications';
+import notify from '../notify';
+import {decorateSessionOptions, decorateSessionClass} from '../plugins';
+import createRPC from '../rpc';
+import Session from '../session';
+import updater from '../updater';
+import {setRendererType, unsetRendererType} from '../utils/renderer-utils';
+import toElectronBackgroundColor from '../utils/to-electron-background-color';
+
+import contextMenuTemplate from './contextmenu';
+
+if (process.platform === 'darwin') {
+  electronDragClick();
+}
 
 export function newWindow(
   options_: BrowserWindowConstructorOptions,
   cfg: configOptions,
-  fn?: (win: BrowserWindow) => void
+  fn?: (win: BrowserWindow) => void,
+  profileName: string = getDefaultProfile()
 ): BrowserWindow {
   const classOpts = Object.assign({uid: uuidv4()});
   app.plugins.decorateWindowClass(classOpts);
@@ -48,6 +61,8 @@ export function newWindow(
   };
   const window = new BrowserWindow(app.plugins.getDecoratedBrowserOptions(winOpts));
 
+  window.profileName = profileName;
+
   // Enable remote module on this window
   remoteEnable(window.webContents);
 
@@ -60,28 +75,13 @@ export function newWindow(
   const sessions = new Map<string, Session>();
 
   const updateBackgroundColor = () => {
-    const cfg_ = app.plugins.getDecoratedConfig();
+    const cfg_ = app.plugins.getDecoratedConfig(profileName);
     window.setBackgroundColor(toElectronBackgroundColor(cfg_.backgroundColor || '#000'));
   };
 
-  // set working directory
-  let argPath = process.argv[1];
-  if (argPath && process.platform === 'win32') {
-    if (/[a-zA-Z]:"/.test(argPath)) {
-      argPath = argPath.replace('"', sep);
-    }
-    argPath = normalize(argPath + sep);
-  }
-  let workingDirectory = homeDirectory;
-  if (argPath && isAbsolute(argPath)) {
-    workingDirectory = argPath;
-  } else if (cfg.workingDirectory && isAbsolute(cfg.workingDirectory)) {
-    workingDirectory = cfg.workingDirectory;
-  }
-
   // config changes
   const cfgUnsubscribe = app.config.subscribe(() => {
-    const cfg_ = app.plugins.getDecoratedConfig();
+    const cfg_ = app.plugins.getDecoratedConfig(profileName);
 
     // notify renderer
     window.webContents.send('config change');
@@ -124,34 +124,58 @@ export function newWindow(
     }
   });
 
-  function createSession(extraOptions: any = {}) {
+  function createSession(extraOptions: sessionExtraOptions = {}) {
     const uid = uuidv4();
-    const extraOptionsFiltered: any = {};
+    const extraOptionsFiltered: sessionExtraOptions = {};
     Object.keys(extraOptions).forEach((key) => {
       if (extraOptions[key] !== undefined) extraOptionsFiltered[key] = extraOptions[key];
     });
 
+    const profile = extraOptionsFiltered.profile || profileName;
+    const activeSession = extraOptionsFiltered.activeUid ? sessions.get(extraOptionsFiltered.activeUid) : undefined;
     let cwd = '';
-    if (cfg.preserveCWD === undefined || cfg.preserveCWD) {
-      const activePID = extraOptionsFiltered.activeUid && sessions.get(extraOptionsFiltered.activeUid)?.pty?.pid;
-      try {
-        cwd = activePID && getWorkingDirectoryFromPID(activePID);
-      } catch (error) {
-        console.error(error);
+    if (cfg.preserveCWD !== false && activeSession && activeSession.profile === profile) {
+      const activePID = activeSession.pty?.pid;
+      if (activePID !== undefined) {
+        try {
+          cwd = getWorkingDirectoryFromPID(activePID) || '';
+        } catch (error) {
+          console.error(error);
+        }
       }
       cwd = cwd && isAbsolute(cwd) && existsSync(cwd) ? cwd : '';
     }
 
+    const profileCfg = app.plugins.getDecoratedConfig(profile);
+
+    // set working directory
+    let argPath = process.argv[1];
+    if (argPath && process.platform === 'win32') {
+      if (/[a-zA-Z]:"/.test(argPath)) {
+        argPath = argPath.replace('"', sep);
+      }
+      argPath = normalize(argPath + sep);
+    }
+    let workingDirectory = homeDirectory;
+    if (argPath && isAbsolute(argPath)) {
+      workingDirectory = argPath;
+    } else if (profileCfg.workingDirectory && isAbsolute(profileCfg.workingDirectory)) {
+      workingDirectory = profileCfg.workingDirectory;
+    }
+
     // remove the rows and cols, the wrong value of them will break layout when init create
     const defaultOptions = Object.assign(
       {
         cwd: cwd || workingDirectory,
         splitDirection: undefined,
-        shell: cfg.shell,
-        shellArgs: cfg.shellArgs && Array.from(cfg.shellArgs)
+        shell: profileCfg.shell,
+        shellArgs: profileCfg.shellArgs && Array.from(profileCfg.shellArgs)
       },
       extraOptionsFiltered,
-      {uid}
+      {
+        profile: extraOptionsFiltered.profile || profileName,
+        uid
+      }
     );
     const options = decorateSessionOptions(defaultOptions);
     const DecoratedSession = decorateSessionClass(Session);
@@ -171,7 +195,8 @@ export function newWindow(
       splitDirection: options.splitDirection,
       shell: session.shell,
       pid: session.pty ? session.pty.pid : null,
-      activeUid: options.activeUid
+      activeUid: options.activeUid ?? undefined,
+      profile: options.profile
     });
 
     session.on('data', (data: string) => {
@@ -206,8 +231,8 @@ export function newWindow(
       session.resize({cols, rows});
     }
   });
-  rpc.on('data', ({uid, data, escaped}: {uid: string; data: string; escaped: boolean}) => {
-    const session = sessions.get(uid);
+  rpc.on('data', ({uid, data, escaped}) => {
+    const session = uid && sessions.get(uid);
     if (session) {
       if (escaped) {
         const escapedData = session.shell?.endsWith('cmd.exe')
@@ -237,11 +262,12 @@ export function newWindow(
   // Same deal as above, grabbing the window titlebar when the window
   // is maximized on Windows results in unmaximize, without hitting any
   // app buttons
-  for (const ev of ['maximize', 'unmaximize', 'minimize', 'restore'] as any) {
-    window.on(ev, () => {
-      rpc.emit('windowGeometry change', {isMaximized: window.isMaximized()});
-    });
-  }
+  const onGeometryChange = () => rpc.emit('windowGeometry change', {isMaximized: window.isMaximized()});
+  window.on('maximize', onGeometryChange);
+  window.on('unmaximize', onGeometryChange);
+  window.on('minimize', onGeometryChange);
+  window.on('restore', onGeometryChange);
+
   window.on('move', () => {
     const position = window.getPosition();
     rpc.emit('move', {bounds: {x: position[0], y: position[1]}});
@@ -255,10 +281,10 @@ export function newWindow(
   });
   // pass on the full screen events from the window to react
   rpc.win.on('enter-full-screen', () => {
-    rpc.emit('enter full screen', {});
+    rpc.emit('enter full screen');
   });
   rpc.win.on('leave-full-screen', () => {
-    rpc.emit('leave full screen', {});
+    rpc.emit('leave full screen');
   });
   const deleteSessions = () => {
     sessions.forEach((session, key) => {
@@ -276,22 +302,33 @@ export function newWindow(
     }
   });
 
-  const handleDrop = (event: Event, url: string) => {
+  const handleDroppedURL = (url: string) => {
     const protocol = typeof url === 'string' && new URL(url).protocol;
     if (protocol === 'file:') {
-      event.preventDefault();
       const path = fileURLToPath(url);
-      rpc.emit('session data send', {data: path, escaped: true});
+      return {uid: null, data: path, escaped: true};
     } else if (protocol === 'http:' || protocol === 'https:') {
-      event.preventDefault();
-      rpc.emit('session data send', {data: url});
+      return {uid: null, data: url};
     }
   };
 
   // If file is dropped onto the terminal window, navigate and new-window events are prevented
-  // and his path is added to active session.
-  window.webContents.on('will-navigate', handleDrop);
-  window.webContents.on('new-window', handleDrop);
+  // and it's path is added to active session.
+  window.webContents.on('will-navigate', (event, url) => {
+    const data = handleDroppedURL(url);
+    if (data) {
+      event.preventDefault();
+      rpc.emit('session data send', data);
+    }
+  });
+  window.webContents.setWindowOpenHandler(({url}) => {
+    const data = handleDroppedURL(url);
+    if (data) {
+      rpc.emit('session data send', data);
+      return {action: 'deny'};
+    }
+    return {action: 'allow'};
+  });
 
   // expose internals to extension authors
   window.rpc = rpc;

app/updater.ts

@@ -1,12 +1,29 @@
 // Packages
-import electron, {app, BrowserWindow, AutoUpdater} from 'electron';
-import ms from 'ms';
+import electron, {app} from 'electron';
+import type {BrowserWindow, AutoUpdater as OriginalAutoUpdater} from 'electron';
+
 import retry from 'async-retry';
+import ms from 'ms';
 
 // Utilities
+import autoUpdaterLinux from './auto-updater-linux';
+import {getDefaultProfile} from './config';
 import {version} from './package.json';
 import {getDecoratedConfig} from './plugins';
-import autoUpdaterLinux from './auto-updater-linux';
+
+// Necessary due to typescript not handling overloads well
+type AutoUpdaterEvent =
+  | 'error'
+  | 'checking-for-update'
+  | 'before-quit-for-update'
+  | 'update-downloaded'
+  | 'update-available'
+  | 'update-not-available';
+
+interface AutoUpdater extends OriginalAutoUpdater {
+  on(event: AutoUpdaterEvent, listener: Function): this;
+  removeListener(event: AutoUpdaterEvent, listener: Function): this;
+}
 
 const {platform} = process;
 const isLinux = platform === 'linux';
@@ -15,7 +32,7 @@ const autoUpdater: AutoUpdater = isLinux ? autoUpdaterLinux : electron.autoUpdat
 
 const getDecoratedConfigWithRetry = async () => {
   return await retry(() => {
-    const content = getDecoratedConfig();
+    const content = getDecoratedConfig(getDefaultProfile());
     if (!content) {
       throw new Error('No config content loaded');
     }
@@ -69,28 +86,23 @@ async function init() {
   isInit = true;
 }
 
-export default (win: BrowserWindow) => {
+const updater = (win: BrowserWindow) => {
   if (!isInit) {
     void init();
   }
 
   const {rpc} = win;
 
-  const onupdate = (
-    ev: Event,
-    releaseNotes: string,
-    releaseName: string,
-    date: Date,
-    updateUrl: string,
-    onQuitAndInstall: any
-  ) => {
-    const releaseUrl = updateUrl || `https://github.com/vercel/hyper/releases/tag/${releaseName}`;
-    rpc.emit('update available', {releaseNotes, releaseName, releaseUrl, canInstall: !!onQuitAndInstall});
+  const onupdate = (ev: Event, releaseNotes: string, releaseName: string, date: Date, updateUrl: string) => {
+    const releaseUrl = updateUrl || `https://github.com/quine-global/hyper/releases/tag/${releaseName}`;
+    rpc.emit('update available', {releaseNotes, releaseName, releaseUrl, canInstall: !isLinux});
   };
 
-  const eventName: any = isLinux ? 'update-available' : 'update-downloaded';
-
-  autoUpdater.on(eventName, onupdate);
+  if (isLinux) {
+    autoUpdater.on('update-available', onupdate);
+  } else {
+    autoUpdater.on('update-downloaded', onupdate);
+  }
 
   rpc.once('quit and install', () => {
     autoUpdater.quitAndInstall();
@@ -111,6 +123,12 @@ export default (win: BrowserWindow) => {
   });
 
   win.on('close', () => {
-    autoUpdater.removeListener(eventName, onupdate);
+    if (isLinux) {
+      autoUpdater.removeListener('update-available', onupdate);
+    } else {
+      autoUpdater.removeListener('update-downloaded', onupdate);
+    }
   });
 };
+
+export default updater;

app/utils/cli-install.ts

@@ -1,20 +1,23 @@
-import pify from 'pify';
-import fs from 'fs';
+import {existsSync, readlink, symlink} from 'fs';
 import path from 'path';
-import notify from '../notify';
-import {cliScriptPath, cliLinkPath} from '../config/paths';
+import {promisify} from 'util';
+
+import {clipboard, dialog} from 'electron';
+
+import {mkdirpSync} from 'fs-extra';
 import * as Registry from 'native-reg';
 import type {ValueType} from 'native-reg';
 import sudoPrompt from 'sudo-prompt';
-import {clipboard, dialog} from 'electron';
-import {mkdirpSync} from 'fs-extra';
 
-const readlink = pify(fs.readlink);
-const symlink = pify(fs.symlink);
-const sudoExec = pify(sudoPrompt.exec, {multiArgs: true});
+import {cliScriptPath, cliLinkPath} from '../config/paths';
+import notify from '../notify';
+
+const readLink = promisify(readlink);
+const symLink = promisify(symlink);
+const sudoExec = promisify(sudoPrompt.exec);
 
 const checkInstall = () => {
-  return readlink(cliLinkPath)
+  return readLink(cliLinkPath)
     .then((link) => link === cliScriptPath)
     .catch((err) => {
       if (err.code === 'ENOENT') {
@@ -32,14 +35,14 @@ const addSymlink = async (silent: boolean) => {
       return;
     }
     console.log('Linking HyperCLI');
-    if (!fs.existsSync(path.dirname(cliLinkPath))) {
+    if (!existsSync(path.dirname(cliLinkPath))) {
       try {
         mkdirpSync(path.dirname(cliLinkPath));
       } catch (err) {
         throw `Failed to create directory ${path.dirname(cliLinkPath)} - ${err}`;
       }
     }
-    await symlink(cliScriptPath, cliLinkPath);
+    await symLink(cliScriptPath, cliLinkPath);
   } catch (_err) {
     const err = _err as {code: string};
     // 'EINVAL' is returned by readlink,

app/utils/map-keys.ts

@@ -11,7 +11,7 @@ const generatePrefixedCommand = (command: string, shortcuts: string[]) => {
   return result;
 };
 
-export default (config: Record<string, string[] | string>) => {
+const mapKeys = (config: Record<string, string[] | string>) => {
   return Object.keys(config).reduce((keymap: Record<string, string[]>, command: string) => {
     if (!command) {
       return keymap;
@@ -39,3 +39,5 @@ export default (config: Record<string, string[] | string>) => {
     return keymap;
   }, {});
 };
+
+export default mapKeys;

app/utils/shell-fallback.ts

@@ -0,0 +1,25 @@
+export const getFallBackShellConfig = (
+  shell: string,
+  shellArgs: string[],
+  defaultShell: string,
+  defaultShellArgs: string[]
+): {
+  shell: string;
+  shellArgs: string[];
+} | null => {
+  if (shellArgs.length > 0) {
+    return {
+      shell,
+      shellArgs: []
+    };
+  }
+
+  if (shell != defaultShell) {
+    return {
+      shell: defaultShell,
+      shellArgs: defaultShellArgs
+    };
+  }
+
+  return null;
+};

app/utils/system-context-menu.ts

@@ -9,7 +9,7 @@ const regKeys = [
 ];
 const regParts = [
   {key: 'command', name: '', value: `${appPath} "%V"`},
-  {name: '', value: 'Open Hyper here'},
+  {name: '', value: 'Open &Hyper here'},
   {name: 'Icon', value: `${appPath}`}
 ];
 

app/utils/to-electron-background-color.ts

@@ -4,7 +4,7 @@ import Color from 'color';
 // returns a background color that's in hex
 // format including the alpha channel (e.g.: `#00000050`)
 // input can be any css value (rgb, hsl, string…)
-export default (bgColor: string) => {
+const toElectronBackgroundColor = (bgColor: string) => {
   const color = Color(bgColor);
 
   if (color.alpha() === 1) {
@@ -15,3 +15,5 @@ export default (bgColor: string) => {
   const alphaHex = Math.round(color.alpha() * 255).toString(16);
   return `#${alphaHex}${color.hex().toString().slice(1)}`;
 };
+
+export default toElectronBackgroundColor;

ava-e2e.config.js

@@ -2,5 +2,8 @@ module.exports = {
   files: ['test/*'],
   extensions: ['ts'],
   require: ['ts-node/register/transpile-only'],
-  timeout: '30s'
+  timeout: '2m',
+  verbose: true,
+  // Due to permissions issues, Windows needs cache turned off
+  cache: false
 };

ava.config.js

@@ -1,5 +1,8 @@
 module.exports = {
   files: ['test/unit/*'],
   extensions: ['ts'],
-  require: ['ts-node/register/transpile-only']
+  require: ['ts-node/register/transpile-only'],
+  verbose: true,
+  // Due to permissions issues, Windows needs cache turned off
+  cache: false
 };

bin/cp-snapshot.js

@@ -1,5 +1,7 @@
+
 const path = require('path');
 const fs = require('fs');
+const fsPromises = require('fs/promises');
 const {Arch} = require('electron-builder');
 
 function copySnapshot(pathToElectron, archToCopy) {
@@ -9,30 +11,32 @@ function copySnapshot(pathToElectron, archToCopy) {
   const pathToBlobV8 = path.resolve(__dirname, '..', 'cache', archToCopy, v8ContextFileName);
 
   console.log('Copying v8 snapshots from', pathToBlob, 'to', pathToElectron);
+  fs.mkdirSync(pathToElectron, { recursive: true });
   fs.copyFileSync(pathToBlob, path.join(pathToElectron, snapshotFileName));
   fs.copyFileSync(pathToBlobV8, path.join(pathToElectron, v8ContextFileName));
 }
 
 function getPathToElectron() {
+  const electronPath = require.resolve('electron');
+
   switch (process.platform) {
     case 'darwin':
       return path.resolve(
-        __dirname,
+        electronPath,
         '..',
-        'node_modules/electron/dist/Electron.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Resources'
+        '..',
+        '..',
+        'dist/Electron.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Resources'
       );
     case 'win32':
     case 'linux':
-      return path.resolve(__dirname, '..', 'node_modules', 'electron', 'dist');
+      return path.resolve(electronPath, '..', '..', '..', 'dist');
   }
 }
 
+
 function getV8ContextFileName(archToCopy) {
-  if (process.platform === 'darwin') {
-    return `v8_context_snapshot${archToCopy === 'arm64' ? '.arm64' : '.x86_64'}.bin`;
-  } else {
-    return `v8_context_snapshot.bin`;
-  }
+  return `snapshot_blob.bin`;
 }
 
 exports.default = async (context) => {
@@ -42,6 +46,7 @@ exports.default = async (context) => {
       ? `${context.appOutDir}/Hyper.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Resources`
       : context.appOutDir;
   copySnapshot(pathToElectron, archToCopy);
+  useLoaderScriptFix(context);
 };
 
 if (require.main === module) {
@@ -51,3 +56,33 @@ if (require.main === module) {
     copySnapshot(pathToElectron, archToCopy);
   }
 }
+
+
+// copied and modified from https://github.com/gergof/electron-builder-sandbox-fix/blob/master/lib/index.js
+// copied and modified from https://github.com/Adamant-im/adamant-im/blob/7b20272a717833ffb0b49b034ab9974118fc59ec/scripts/electron/sandboxFix.js
+
+const useLoaderScriptFix = async (params) => {
+  if (params.electronPlatformName !== 'linux') {
+    // this fix is only required on linux
+    return
+  }
+
+  const executable = path.join(params.appOutDir, params.packager.executableName)
+
+  const loaderScript = `#!/usr/bin/env bash
+set -u
+SCRIPT_DIR="$( cd "$( dirname "\${BASH_SOURCE[0]}" )" && pwd )"
+exec "$SCRIPT_DIR/${params.packager.executableName}.bin" "--no-sandbox" "$@"
+`
+
+  try {
+    await fsPromises.rename(executable, executable + '.bin')
+    await fsPromises.writeFile(executable, loaderScript)
+    await fsPromises.chmod(executable, 0o755)
+  } catch (e) {
+    console.error('failed to create loader for sandbox fix: ' + e.message)
+    throw new Error('Failed to create loader for sandbox fix')
+  }
+
+  console.log('sandbox fix successfully applied')
+}

bin/mk-snapshot.js

@@ -9,7 +9,18 @@ const excludedModules = {};
 
 const crossArchDirs = ['clang_x86_v8_arm', 'clang_x64_v8_arm64', 'win_clang_x64'];
 
+const archMap = {
+  x64: 'x86_64',
+  arm64: 'arm64'
+};
+
 async function main() {
+  const npmConfigArch = process.env.npm_config_arch;
+  if (!npmConfigArch) {
+    throw new Error('env var npm_config_arch is not specified')
+  }
+
+
   const baseDirPath = path.resolve(__dirname, '..');
 
   console.log('Creating a linked script..');
@@ -27,11 +38,25 @@ async function main() {
   // Verify if we will be able to use this in `mksnapshot`
   vm.runInNewContext(result.snapshotScript, undefined, {filename: snapshotScriptPath, displayErrors: true});
 
-  const outputBlobPath = `${baseDirPath}/cache/${process.env.npm_config_arch}`;
+  const outputBlobPath = `${baseDirPath}/cache/${npmConfigArch}`;
   await mkdirp(outputBlobPath);
 
+  let mksnapshotBinPath
+  if (process.platform === 'win32') {
+    mksnapshotBinPath = 
+      require.resolve(
+        path.join("electron-mksnapshot", "bin", "mksnapshot.exe")
+      );
+  } else {
+    mksnapshotBinPath = 
+      require.resolve(
+        path.join("electron-mksnapshot", "bin", "mksnapshot")
+      );
+  }
+
+  mksnapshotBinPath = path.dirname(mksnapshotBinPath);
+
   if (process.platform !== 'darwin') {
-    const mksnapshotBinPath = `${baseDirPath}/node_modules/electron-mksnapshot/bin`;
     const matchingDirs = crossArchDirs.map((dir) => `${mksnapshotBinPath}/${dir}`).filter((dir) => fs.existsSync(dir));
     for (const dir of matchingDirs) {
       if (fs.existsSync(`${mksnapshotBinPath}/gen/v8/embedded.S`)) {
@@ -41,11 +66,19 @@ async function main() {
     }
   }
   
+  const startupBlobPath = path.join(outputBlobPath, 'snapshot_blob.bin');
+
   console.log(`Generating startup blob in "${outputBlobPath}"`);
-  childProcess.execFileSync(
-    path.resolve(__dirname, '..', 'node_modules', '.bin', 'mksnapshot' + (process.platform === 'win32' ? '.cmd' : '')),
-    [snapshotScriptPath, '--output_dir', outputBlobPath]
+  const res = childProcess.execFileSync(
+    require.resolve(`electron-mksnapshot/bin/mksnapshot${process.platform === 'win32' ? '.exe' : ''}`),
+    [
+      '--startup-src=' + snapshotScriptPath,
+      '--startup-blob=' + startupBlobPath,
+      `--target-arch=${archMap[process.env.npm_config_arch]}`,
+      //'--v8-context-snapshot=' + v8SnapshotPath
+    ]
   );
+  console.log('result:', res.toString())
 }
 
 main().catch((err) => console.error(err));

bin/notarize.js

@@ -1,14 +1,15 @@
-const { notarize } = require("electron-notarize");
-
 exports.default = async function notarizing(context) {
+
   const { electronPlatformName, appOutDir } = context;
   if (electronPlatformName !== "darwin" || !process.env.APPLE_ID || !process.env.APPLE_PASSWORD) {
     return;
   }
 
+  const { notarize } = await import('@electron/notarize');
+
   const appName = context.packager.appInfo.productFilename;
   return await notarize({
-    appBundleId: "co.zeit.hyper",
+    appBundleId: "com.quineglobal.hyper",
     appPath: `${appOutDir}/${appName}.app`,
     appleId: process.env.APPLE_ID,
     appleIdPassword: process.env.APPLE_PASSWORD

bin/snapshot-libs.js

@@ -7,25 +7,25 @@ require('normalize-url');
 require('parse-url');
 require('php-escape-shell');
 require('plist');
-require('react-deep-force-update');
-require('react-dom');
-require('react-redux');
-require('react');
 require('redux-thunk');
 require('redux');
 require('reselect');
 require('seamless-immutable');
 require('stylis');
-require('xterm-addon-unicode11');
+require('@xterm/addon-unicode11');
 // eslint-disable-next-line no-constant-condition
 if (false) {
   require('args');
   require('mousetrap');
   require('open');
-  require('xterm-addon-fit');
-  require('xterm-addon-ligatures');
-  require('xterm-addon-search');
-  require('xterm-addon-web-links');
-  require('xterm-addon-webgl');
-  require('xterm');
+  require('react-dom');
+  require('react-redux');
+  require('react');
+  require('@xterm/addon-fit');
+  require('@xterm/addon-image');
+  require('@xterm/addon-search');
+  require('@xterm/addon-web-links');
+  require('@xterm/addon-webgl');
+  require('@xterm/addon-canvas');
+  require('@xterm/xterm');
 }

build/win/installer.nsh

@@ -1,15 +1,15 @@
 !macro customInstall
-  WriteRegStr HKCU "Software\Classes\Directory\Background\shell\Hyper" "" "Open Hyper here"
-  WriteRegStr HKCU "Software\Classes\Directory\Background\shell\Hyper" "Icon" "$appExe"
-  WriteRegStr HKCU "Software\Classes\Directory\Background\shell\Hyper\command" "" `$appExe "%V"`
+  WriteRegStr HKCU "Software\Classes\Directory\Background\shell\Hyper" "" "Open &Hyper here"
+  WriteRegStr HKCU "Software\Classes\Directory\Background\shell\Hyper" "Icon" `"$appExe"`
+  WriteRegStr HKCU "Software\Classes\Directory\Background\shell\Hyper\command" "" `"$appExe" "%V"`
 
-  WriteRegStr HKCU "Software\Classes\Directory\shell\Hyper" "" "Open Hyper here"
-  WriteRegStr HKCU "Software\Classes\Directory\shell\Hyper" "Icon" "$appExe"
-  WriteRegStr HKCU "Software\Classes\Directory\shell\Hyper\command" "" `$appExe "%V"`
+  WriteRegStr HKCU "Software\Classes\Directory\shell\Hyper" "" "Open &Hyper here"
+  WriteRegStr HKCU "Software\Classes\Directory\shell\Hyper" "Icon" `"$appExe"`
+  WriteRegStr HKCU "Software\Classes\Directory\shell\Hyper\command" "" `"$appExe" "%V"`
 
-  WriteRegStr HKCU "Software\Classes\Drive\shell\Hyper" "" "Open Hyper here"
-  WriteRegStr HKCU "Software\Classes\Drive\shell\Hyper" "Icon" "$appExe"
-  WriteRegStr HKCU "Software\Classes\Drive\shell\Hyper\command" "" `$appExe "%V"`
+  WriteRegStr HKCU "Software\Classes\Drive\shell\Hyper" "" "Open &Hyper here"
+  WriteRegStr HKCU "Software\Classes\Drive\shell\Hyper" "Icon" `"$appExe"`
+  WriteRegStr HKCU "Software\Classes\Drive\shell\Hyper\command" "" `"$appExe" "%V"`
 !macroend
 
 !macro customUnInstall

cli/api.ts

@@ -2,18 +2,20 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import fs from 'fs';
 import os from 'os';
+import path from 'path';
+
 import got from 'got';
 import registryUrlModule from 'registry-url';
+
 const registryUrl = registryUrlModule();
-import path from 'path';
 
 // If the user defines XDG_CONFIG_HOME they definitely want their config there,
 // otherwise use the home directory in linux/mac and userdata in windows
 const applicationDirectory = process.env.XDG_CONFIG_HOME
   ? path.join(process.env.XDG_CONFIG_HOME, 'Hyper')
   : process.platform === 'win32'
-  ? path.join(process.env.APPDATA!, 'Hyper')
-  : path.join(os.homedir(), '.config', 'Hyper');
+    ? path.join(process.env.APPDATA!, 'Hyper')
+    : path.join(os.homedir(), '.config', 'Hyper');
 
 const devConfigFileName = path.join(__dirname, `../hyper.json`);
 
@@ -30,7 +32,7 @@ const fileName =
 function memoize<T extends (...args: any[]) => any>(fn: T): T {
   let hasResult = false;
   let result: any;
-  return ((...args: any[]) => {
+  return ((...args: Parameters<T>) => {
     if (!hasResult) {
       result = fn(...args);
       hasResult = true;

cli/index.ts

@@ -1,16 +1,20 @@
 // This is a CLI tool, using console is OK
 /* eslint no-console: 0 */
-import {spawn, exec, SpawnOptions} from 'child_process';
-import {isAbsolute, resolve} from 'path';
+import {spawn, exec} from 'child_process';
+import type {SpawnOptions} from 'child_process';
 import {existsSync} from 'fs';
-import {version} from '../app/package.json';
-import pify from 'pify';
+import {isAbsolute, resolve} from 'path';
+import {promisify} from 'util';
+
 import args from 'args';
 import chalk from 'chalk';
-import open from 'open';
 import _columnify from 'columnify';
 import got from 'got';
+import open from 'open';
 import ora from 'ora';
+
+import {version} from '../app/package.json';
+
 import * as api from './api';
 
 let commandPromise: Promise<void> | undefined;
@@ -191,8 +195,10 @@ const main = (argv: string[]) => {
     version: false,
     mri: {
       boolean: ['v', 'verbose']
-    }
-  } as any);
+    },
+    mainColor: 'yellow',
+    subColor: 'dim'
+  });
 
   if (commandPromise) {
     return commandPromise;
@@ -228,11 +234,11 @@ const main = (argv: string[]) => {
     options['stdio'] = 'ignore';
     if (process.platform === 'darwin') {
       //Use `open` to prevent multiple Hyper process
-      const cmd = `open -b co.zeit.hyper ${args_}`;
+      const cmd = `open -b com.quineglobal.hyper ${args_}`;
       const opts = {
         env
       };
-      return pify(exec)(cmd, opts);
+      return promisify(exec)(cmd, opts);
     }
   }
 

electron-builder-linux-ci.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "http://json.schemastore.org/electron-builder",
+  "extends": "electron-builder.json",
+  "afterSign": null,
+  "npmRebuild": false
+}

electron-builder.json

@@ -1,6 +1,5 @@
 {
-  "$schema": "http://json.schemastore.org/electron-builder",
-  "appId": "co.zeit.hyper",
+  "appId": "com.quineglobal.hyper",
   "afterSign": "./bin/notarize.js",
   "afterPack": "./bin/cp-snapshot.js",
   "directories": {
@@ -17,43 +16,27 @@
       ]
     }
   ],
+  "artifactName": "${productName}-${version}-${arch}.${ext}",
   "linux": {
     "category": "TerminalEmulator",
     "target": [
-      {
-        "target": "deb",
-        "arch": [
-          "x64",
-          "arm64"
-        ]
-      },
-      {
-        "target": "AppImage",
-        "arch": [
-          "x64",
-          "arm64"
-        ]
-      },
-      {
-        "target": "rpm",
-        "arch": [
-          "x64",
-          "arm64"
-        ]
-      },
-      {
-        "target": "snap",
-        "arch": [
-          "x64"
-        ]
-      }
+      "deb",
+      "AppImage",
+      "snap",
+      "pacman"
     ]
   },
   "win": {
-    "target": [
-      "nsis"
-    ],
-    "rfc3161TimeStampServer": "http://timestamp.comodoca.com"
+    "target": {
+      "target": "nsis",
+      "arch": [
+        "x64",
+        "arm64"
+      ]
+    },
+    "signtoolOptions": {
+      "timeStampServer": "http://timestamp.comodoca.com"
+    }
   },
   "nsis": {
     "include": "build/win/installer.nsh",
@@ -120,13 +103,6 @@
     "compression": "bzip2",
     "afterInstall": "./build/linux/after-install.tpl"
   },
-  "rpm": {
-    "afterInstall": "./build/linux/after-install.tpl",
-    "fpm": [
-      "--rpm-rpmbuild-define",
-      "_build_id_links none"
-    ]
-  },
   "snap": {
     "confinement": "classic",
     "publish": "github"

lib/actions/config.ts

@@ -1,6 +1,6 @@
-import {CONFIG_LOAD, CONFIG_RELOAD} from '../constants/config';
-import {HyperActions} from '../hyper';
-import {configOptions} from '../config';
+import type {configOptions} from '../../typings/config';
+import {CONFIG_LOAD, CONFIG_RELOAD} from '../../typings/constants/config';
+import type {HyperActions} from '../../typings/hyper';
 
 export function loadConfig(config: configOptions): HyperActions {
   return {

lib/actions/header.ts

@@ -1,14 +1,15 @@
-import {CLOSE_TAB, CHANGE_TAB} from '../constants/tabs';
+import {CLOSE_TAB, CHANGE_TAB} from '../../typings/constants/tabs';
 import {
   UI_WINDOW_MAXIMIZE,
   UI_WINDOW_UNMAXIMIZE,
   UI_OPEN_HAMBURGER_MENU,
   UI_WINDOW_MINIMIZE,
   UI_WINDOW_CLOSE
-} from '../constants/ui';
+} from '../../typings/constants/ui';
+import type {HyperDispatch} from '../../typings/hyper';
 import rpc from '../rpc';
+
 import {userExitTermGroup, setActiveGroup} from './term-groups';
-import {HyperDispatch} from '../hyper';
 
 export function closeTab(uid: string) {
   return (dispatch: HyperDispatch) => {
@@ -39,7 +40,7 @@ export function maximize() {
     dispatch({
       type: UI_WINDOW_MAXIMIZE,
       effect() {
-        rpc.emit('maximize', null);
+        rpc.emit('maximize');
       }
     });
   };
@@ -50,7 +51,7 @@ export function unmaximize() {
     dispatch({
       type: UI_WINDOW_UNMAXIMIZE,
       effect() {
-        rpc.emit('unmaximize', null);
+        rpc.emit('unmaximize');
       }
     });
   };
@@ -72,7 +73,7 @@ export function minimize() {
     dispatch({
       type: UI_WINDOW_MINIMIZE,
       effect() {
-        rpc.emit('minimize', null);
+        rpc.emit('minimize');
       }
     });
   };
@@ -83,7 +84,7 @@ export function close() {
     dispatch({
       type: UI_WINDOW_CLOSE,
       effect() {
-        rpc.emit('close', null);
+        rpc.emit('close');
       }
     });
   };

lib/actions/index.ts

@@ -1,6 +1,6 @@
+import {INIT} from '../../typings/constants';
+import type {HyperDispatch} from '../../typings/hyper';
 import rpc from '../rpc';
-import {INIT} from '../constants';
-import {HyperDispatch} from '../hyper';
 
 export default function init() {
   return (dispatch: HyperDispatch) => {

lib/actions/notifications.ts

@@ -1,5 +1,5 @@
-import {NOTIFICATION_MESSAGE, NOTIFICATION_DISMISS} from '../constants/notifications';
-import {HyperActions} from '../hyper';
+import {NOTIFICATION_MESSAGE, NOTIFICATION_DISMISS} from '../../typings/constants/notifications';
+import type {HyperActions} from '../../typings/hyper';
 
 export function dismissNotification(id: string): HyperActions {
   return {

lib/actions/sessions.ts

@@ -1,6 +1,4 @@
-import rpc from '../rpc';
-import {keys} from '../utils/object';
-import findBySession from '../utils/term-groups';
+import type {Session} from '../../typings/common';
 import {
   SESSION_ADD,
   SESSION_RESIZE,
@@ -14,10 +12,13 @@ import {
   SESSION_USER_DATA,
   SESSION_SET_XTERM_TITLE,
   SESSION_SEARCH
-} from '../constants/sessions';
-import {HyperState, session, HyperDispatch, HyperActions} from '../hyper';
+} from '../../typings/constants/sessions';
+import type {HyperState, HyperDispatch, HyperActions} from '../../typings/hyper';
+import rpc from '../rpc';
+import {keys} from '../utils/object';
+import findBySession from '../utils/term-groups';
 
-export function addSession({uid, shell, pid, cols, rows, splitDirection, activeUid}: session) {
+export function addSession({uid, shell, pid, cols = null, rows = null, splitDirection, activeUid, profile}: Session) {
   return (dispatch: HyperDispatch, getState: () => HyperState) => {
     const {sessions} = getState();
     const now = Date.now();
@@ -30,20 +31,20 @@ export function addSession({uid, shell, pid, cols, rows, splitDirection, activeU
       rows,
       splitDirection,
       activeUid: activeUid ? activeUid : sessions.activeUid,
-      now
+      now,
+      profile
     });
   };
 }
 
-export function requestSession() {
+export function requestSession(profile: string | undefined) {
   return (dispatch: HyperDispatch, getState: () => HyperState) => {
     dispatch({
       type: SESSION_REQUEST,
       effect: () => {
         const {ui} = getState();
-        // the cols and rows from preview session maybe not accurate. so remove.
-        const {/*cols, rows,*/ cwd} = ui;
-        rpc.emit('new', {cwd});
+        const {cwd} = ui;
+        rpc.emit('new', {cwd, profile});
       }
     });
   };
@@ -140,7 +141,7 @@ export function openSearch(uid?: string) {
     dispatch({
       type: SESSION_SEARCH,
       uid: targetUid,
-      value: true
+      value: new Date()
     });
   };
 }
@@ -152,7 +153,7 @@ export function closeSearch(uid?: string, keyEvent?: any) {
       dispatch({
         type: SESSION_SEARCH,
         uid: targetUid,
-        value: false
+        value: null
       });
     } else {
       if (keyEvent) {
@@ -162,7 +163,7 @@ export function closeSearch(uid?: string, keyEvent?: any) {
   };
 }
 
-export function sendSessionData(uid: string | null, data: any, escaped?: boolean | null) {
+export function sendSessionData(uid: string | null, data: string, escaped?: boolean) {
   return (dispatch: HyperDispatch, getState: () => HyperState) => {
     dispatch({
       type: SESSION_USER_DATA,

lib/actions/term-groups.ts

@@ -1,28 +1,32 @@
-import rpc from '../rpc';
+import {SESSION_REQUEST} from '../../typings/constants/sessions';
 import {
   DIRECTION,
   TERM_GROUP_RESIZE,
   TERM_GROUP_REQUEST,
   TERM_GROUP_EXIT,
   TERM_GROUP_EXIT_ACTIVE
-} from '../constants/term-groups';
-import {SESSION_REQUEST} from '../constants/sessions';
-import findBySession from '../utils/term-groups';
+} from '../../typings/constants/term-groups';
+import type {ITermState, ITermGroup, HyperState, HyperDispatch, HyperActions} from '../../typings/hyper';
+import rpc from '../rpc';
 import {getRootGroups} from '../selectors';
+import findBySession from '../utils/term-groups';
+
 import {setActiveSession, ptyExitSession, userExitSession} from './sessions';
-import {ITermState, ITermGroup, HyperState, HyperDispatch, HyperActions} from '../hyper';
 
 function requestSplit(direction: 'VERTICAL' | 'HORIZONTAL') {
-  return (activeUid: string) =>
+  return (_activeUid: string | undefined, _profile: string | undefined) =>
     (dispatch: HyperDispatch, getState: () => HyperState): void => {
       dispatch({
         type: SESSION_REQUEST,
         effect: () => {
           const {ui, sessions} = getState();
+          const activeUid = _activeUid ? _activeUid : sessions.activeUid;
+          const profile = _profile ? _profile : activeUid ? sessions.sessions[activeUid].profile : window.profileName;
           rpc.emit('new', {
             splitDirection: direction,
             cwd: ui.cwd,
-            activeUid: activeUid ? activeUid : sessions.activeUid
+            activeUid,
+            profile
           });
         }
       });
@@ -40,17 +44,20 @@ export function resizeTermGroup(uid: string, sizes: number[]): HyperActions {
   };
 }
 
-export function requestTermGroup(activeUid: string) {
+export function requestTermGroup(_activeUid: string | undefined, _profile: string | undefined) {
   return (dispatch: HyperDispatch, getState: () => HyperState) => {
     dispatch({
       type: TERM_GROUP_REQUEST,
       effect: () => {
         const {ui, sessions} = getState();
         const {cwd} = ui;
+        const activeUid = _activeUid ? _activeUid : sessions.activeUid;
+        const profile = _profile ? _profile : activeUid ? sessions.sessions[activeUid].profile : window.profileName;
         rpc.emit('new', {
           isNewGroup: true,
           cwd,
-          activeUid: activeUid ? activeUid : sessions.activeUid
+          activeUid,
+          profile
         });
       }
     });

lib/actions/ui.ts

@@ -1,10 +1,9 @@
+import {stat} from 'fs';
+import type {Stats} from 'fs';
+
+import type parseUrl from 'parse-url';
 import {php_escapeshellcmd as escapeShellCmd} from 'php-escape-shell';
-import {isExecutable} from '../utils/file';
-import {getRootGroups} from '../selectors';
-import findBySession from '../utils/term-groups';
-import notify from '../utils/notify';
-import rpc from '../rpc';
-import {requestSession, sendSessionData, setActiveSession} from './sessions';
+
 import {
   UI_FONT_SIZE_SET,
   UI_FONT_SIZE_INCR,
@@ -24,14 +23,18 @@ import {
   UI_OPEN_SSH_URL,
   UI_CONTEXTMENU_OPEN,
   UI_COMMAND_EXEC
-} from '../constants/ui';
+} from '../../typings/constants/ui';
+import type {HyperState, HyperDispatch, HyperActions, ITermGroups} from '../../typings/hyper';
+import rpc from '../rpc';
+import {getRootGroups} from '../selectors';
+import {isExecutable} from '../utils/file';
+import notify from '../utils/notify';
+import findBySession from '../utils/term-groups';
 
+import {requestSession, sendSessionData, setActiveSession} from './sessions';
 import {setActiveGroup} from './term-groups';
-import parseUrl from 'parse-url';
-import {HyperState, HyperDispatch, HyperActions, ITermGroups} from '../hyper';
-import {stat, Stats} from 'fs';
 
-export function openContextMenu(uid: string, selection: any) {
+export function openContextMenu(uid: string, selection: string) {
   return (dispatch: HyperDispatch, getState: () => HyperState) => {
     dispatch({
       type: UI_CONTEXTMENU_OPEN,
@@ -269,11 +272,11 @@ export function openFile(path: string) {
             }
             rpc.once('session add', ({uid}) => {
               rpc.once('session data', () => {
-                dispatch(sendSessionData(uid, command, null));
+                dispatch(sendSessionData(uid, command));
               });
             });
           }
-          dispatch(requestSession());
+          dispatch(requestSession(undefined));
         });
       }
     });
@@ -292,12 +295,11 @@ export function leaveFullScreen(): HyperActions {
   };
 }
 
-export function openSSH(url: string) {
+export function openSSH(parsedUrl: ReturnType<typeof parseUrl>) {
   return (dispatch: HyperDispatch) => {
     dispatch({
       type: UI_OPEN_SSH_URL,
       effect() {
-        const parsedUrl = parseUrl(url, true);
         let command = `${parsedUrl.protocol} ${parsedUrl.user ? `${parsedUrl.user}@` : ''}${parsedUrl.resource}`;
 
         if (parsedUrl.port) command += ` -p ${parsedUrl.port}`;
@@ -306,11 +308,11 @@ export function openSSH(url: string) {
 
         rpc.once('session add', ({uid}) => {
           rpc.once('session data', () => {
-            dispatch(sendSessionData(uid, command, null));
+            dispatch(sendSessionData(uid, command));
           });
         });
 
-        dispatch(requestSession());
+        dispatch(requestSession(undefined));
       }
     });
   };

lib/actions/updater.ts

@@ -1,12 +1,12 @@
-import {UPDATE_INSTALL, UPDATE_AVAILABLE} from '../constants/updater';
+import {UPDATE_INSTALL, UPDATE_AVAILABLE} from '../../typings/constants/updater';
+import type {HyperActions} from '../../typings/hyper';
 import rpc from '../rpc';
-import {HyperActions} from '../hyper';
 
 export function installUpdate(): HyperActions {
   return {
     type: UPDATE_INSTALL,
     effect: () => {
-      rpc.emit('quit and install', null);
+      rpc.emit('quit and install');
     }
   };
 }

lib/command-registry.ts

@@ -1,9 +1,7 @@
-import {require as remoteRequire} from '@electron/remote';
-import {HyperDispatch} from './hyper';
-import {closeSearch} from './actions/sessions';
-// TODO: Should be updates to new async API https://medium.com/@nornagon/electrons-remote-module-considered-harmful-70d69500f31
+import type {HyperDispatch} from '../typings/hyper';
 
-const {getDecoratedKeymaps} = remoteRequire('./plugins') as typeof import('../app/plugins');
+import {closeSearch} from './actions/sessions';
+import {ipcRenderer} from './utils/ipc';
 
 let commands: Record<string, (event: any, dispatch: HyperDispatch) => void> = {
   'editor:search-close': (e, dispatch) => {
@@ -12,8 +10,8 @@ let commands: Record<string, (event: any, dispatch: HyperDispatch) => void> = {
   }
 };
 
-export const getRegisteredKeys = () => {
-  const keymaps = getDecoratedKeymaps();
+export const getRegisteredKeys = async () => {
+  const keymaps = await ipcRenderer.invoke('getDecoratedKeymaps');
 
   return Object.keys(keymaps).reduce((result: Record<string, string>, actionName) => {
     const commandKeys = keymaps[actionName];

lib/components/header.tsx

@@ -1,27 +1,27 @@
-import React from 'react';
+import React, {forwardRef, useState} from 'react';
 
+import type {HeaderProps} from '../../typings/hyper';
 import {decorate, getTabsProps} from '../utils/plugins';
 
 import Tabs_ from './tabs';
-import {HeaderProps} from '../hyper';
 
 const Tabs = decorate(Tabs_, 'Tabs');
 
-export default class Header extends React.PureComponent<HeaderProps> {
-  headerMouseDownWindowX!: number;
-  headerMouseDownWindowY!: number;
+const Header = forwardRef<HTMLElement, HeaderProps>((props, ref) => {
+  const [headerMouseDownWindowX, setHeaderMouseDownWindowX] = useState<number>(0);
+  const [headerMouseDownWindowY, setHeaderMouseDownWindowY] = useState<number>(0);
 
-  onChangeIntent = (active: string) => {
+  const onChangeIntent = (active: string) => {
     // we ignore clicks if they're a byproduct of a drag
     // motion to move the window
-    if (window.screenX !== this.headerMouseDownWindowX || window.screenY !== this.headerMouseDownWindowY) {
+    if (window.screenX !== headerMouseDownWindowX || window.screenY !== headerMouseDownWindowY) {
       return;
     }
 
-    this.props.onChangeTab(active);
+    props.onChangeTab(active);
   };
 
-  handleHeaderMouseDown = () => {
+  const handleHeaderMouseDown = () => {
     // the hack of all hacks, this prevents the term
     // iframe from losing focus, for example, when
     // the user drags the nav around
@@ -30,43 +30,43 @@ export default class Header extends React.PureComponent<HeaderProps> {
 
     // persist start positions of a potential drag motion
     // to differentiate dragging from clicking
-    this.headerMouseDownWindowX = window.screenX;
-    this.headerMouseDownWindowY = window.screenY;
+    setHeaderMouseDownWindowX(window.screenX);
+    setHeaderMouseDownWindowY(window.screenY);
   };
 
-  handleHamburgerMenuClick = (event: React.MouseEvent) => {
+  const handleHamburgerMenuClick = (event: React.MouseEvent) => {
     let {right: x, bottom: y} = event.currentTarget.getBoundingClientRect();
     x -= 15; // to compensate padding
     y -= 12; // ^ same
-    this.props.openHamburgerMenu({x, y});
+    props.openHamburgerMenu({x, y});
   };
 
-  handleMaximizeClick = () => {
-    if (this.props.maximized) {
-      this.props.unmaximize();
+  const handleMaximizeClick = () => {
+    if (props.maximized) {
+      props.unmaximize();
     } else {
-      this.props.maximize();
+      props.maximize();
     }
   };
 
-  handleMinimizeClick = () => {
-    this.props.minimize();
+  const handleMinimizeClick = () => {
+    props.minimize();
   };
 
-  handleCloseClick = () => {
-    this.props.close();
+  const handleCloseClick = () => {
+    props.close();
   };
 
-  getWindowHeaderConfig() {
-    const {showHamburgerMenu, showWindowControls} = this.props;
+  const getWindowHeaderConfig = () => {
+    const {showHamburgerMenu, showWindowControls} = props;
 
     const defaults = {
-      hambMenu: !this.props.isMac, // show by default on windows and linux
-      winCtrls: !this.props.isMac // show by default on Windows and Linux
+      hambMenu: !props.isMac, // show by default on windows and linux
+      winCtrls: !props.isMac // show by default on Windows and Linux
     };
 
     // don't allow the user to change defaults on macOS
-    if (this.props.isMac) {
+    if (props.isMac) {
       return defaults;
     }
 
@@ -74,182 +74,187 @@ export default class Header extends React.PureComponent<HeaderProps> {
       hambMenu: showHamburgerMenu === '' ? defaults.hambMenu : showHamburgerMenu,
       winCtrls: showWindowControls === '' ? defaults.winCtrls : showWindowControls
     };
+  };
+
+  const {isMac} = props;
+  const {borderColor} = props;
+  let title = 'Hyper';
+  if (props.tabs.length === 1 && props.tabs[0].title) {
+    // if there's only one tab we use its title as the window title
+    title = props.tabs[0].title;
   }
+  const {hambMenu, winCtrls} = getWindowHeaderConfig();
+  const left = winCtrls === 'left';
+  const maxButtonHref = props.maximized
+    ? './renderer/assets/icons.svg#restore-window'
+    : './renderer/assets/icons.svg#maximize-window';
 
-  render() {
-    const {isMac} = this.props;
-    const props = getTabsProps(this.props, {
-      tabs: this.props.tabs,
-      borderColor: this.props.borderColor,
-      onClose: this.props.onCloseTab,
-      onChange: this.onChangeIntent,
-      fullScreen: this.props.fullScreen
-    });
-    const {borderColor} = props;
-    let title = 'Hyper';
-    if (props.tabs.length === 1 && props.tabs[0].title) {
-      // if there's only one tab we use its title as the window title
-      title = props.tabs[0].title;
-    }
-    const {hambMenu, winCtrls} = this.getWindowHeaderConfig();
-    const left = winCtrls === 'left';
-    const maxButtonHref = this.props.maximized
-      ? './renderer/assets/icons.svg#restore-window'
-      : './renderer/assets/icons.svg#maximize-window';
-
-    return (
-      <header
-        className={`header_header ${isMac && 'header_headerRounded'}`}
-        onMouseDown={this.handleHeaderMouseDown}
-        onMouseUp={() => window.focusActiveTerm()}
-        onDoubleClick={this.handleMaximizeClick}
-      >
-        {!isMac && (
-          <div
-            className={`header_windowHeader ${props.tabs.length > 1 ? 'header_windowHeaderWithBorder' : ''}`}
-            style={{borderColor}}
-          >
-            {hambMenu && (
-              <svg
-                className={`header_shape ${left ? 'header_hamburgerMenuRight' : 'header_hamburgerMenuLeft'}`}
-                onClick={this.handleHamburgerMenuClick}
-              >
-                <use xlinkHref="./renderer/assets/icons.svg#hamburger-menu" />
-              </svg>
-            )}
-            <span className="header_appTitle">{title}</span>
-            {winCtrls && (
-              <div className={`header_windowControls ${left ? 'header_windowControlsLeft' : ''}`}>
-                <div className={`${left ? 'header_minimizeWindowLeft' : ''}`} onClick={this.handleMinimizeClick}>
-                  <svg className="header_shape">
-                    <use xlinkHref="./renderer/assets/icons.svg#minimize-window" />
-                  </svg>
-                </div>
-                <div className={`${left ? 'header_maximizeWindowLeft' : ''}`} onClick={this.handleMaximizeClick}>
-                  <svg className="header_shape">
-                    <use xlinkHref={maxButtonHref} />
-                  </svg>
-                </div>
-                <div
-                  className={`header_closeWindow ${left ? 'header_closeWindowLeft' : ''}`}
-                  onClick={this.handleCloseClick}
-                >
-                  <svg className="header_shape">
-                    <use xlinkHref="./renderer/assets/icons.svg#close-window" />
-                  </svg>
-                </div>
+  return (
+    <header
+      className={`header_header ${isMac && 'header_headerRounded'}`}
+      onMouseDown={handleHeaderMouseDown}
+      onMouseUp={() => window.focusActiveTerm()}
+      onDoubleClick={handleMaximizeClick}
+      ref={ref}
+    >
+      {!isMac && (
+        <div
+          className={`header_windowHeader ${props.tabs.length > 1 ? 'header_windowHeaderWithBorder' : ''}`}
+          style={{borderColor}}
+        >
+          {hambMenu && (
+            <svg
+              className={`header_shape ${left ? 'header_hamburgerMenuRight' : 'header_hamburgerMenuLeft'}`}
+              onClick={handleHamburgerMenuClick}
+            >
+              <use xlinkHref="./renderer/assets/icons.svg#hamburger-menu" />
+            </svg>
+          )}
+          <span className="header_appTitle">{title}</span>
+          {winCtrls && (
+            <div className={`header_windowControls ${left ? 'header_windowControlsLeft' : ''}`}>
+              <div className={`${left ? 'header_minimizeWindowLeft' : ''}`} onClick={handleMinimizeClick}>
+                <svg className="header_shape">
+                  <use xlinkHref="./renderer/assets/icons.svg#minimize-window" />
+                </svg>
               </div>
-            )}
-          </div>
-        )}
-        {this.props.customChildrenBefore}
-        <Tabs {...props} />
-        {this.props.customChildren}
+              <div className={`${left ? 'header_maximizeWindowLeft' : ''}`} onClick={handleMaximizeClick}>
+                <svg className="header_shape">
+                  <use xlinkHref={maxButtonHref} />
+                </svg>
+              </div>
+              <div className={`header_closeWindow ${left ? 'header_closeWindowLeft' : ''}`} onClick={handleCloseClick}>
+                <svg className="header_shape">
+                  <use xlinkHref="./renderer/assets/icons.svg#close-window" />
+                </svg>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+      {props.customChildrenBefore}
+      <Tabs
+        {...getTabsProps(props, {
+          tabs: props.tabs,
+          borderColor: props.borderColor,
+          backgroundColor: props.backgroundColor,
+          onClose: props.onCloseTab,
+          onChange: onChangeIntent,
+          fullScreen: props.fullScreen,
+          defaultProfile: props.defaultProfile,
+          profiles: props.profiles.asMutable({deep: true}),
+          openNewTab: props.openNewTab
+        })}
+      />
+      {props.customChildren}
 
-        <style jsx>{`
-          .header_header {
-            position: fixed;
-            top: 1px;
-            left: 1px;
-            right: 1px;
-            z-index: 100;
-          }
+      <style jsx>{`
+        .header_header {
+          position: fixed;
+          top: 1px;
+          left: 1px;
+          right: 1px;
+          z-index: 100;
+        }
 
-          .header_headerRounded {
-            border-top-left-radius: 4px;
-            border-top-right-radius: 4px;
-          }
+        .header_headerRounded {
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+        }
 
-          .header_windowHeader {
-            height: 34px;
-            width: 100%;
-            position: fixed;
-            top: 1px;
-            left: 1px;
-            right: 1px;
-            -webkit-app-region: drag;
-            -webkit-user-select: none;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
+        .header_windowHeader {
+          height: 34px;
+          width: 100%;
+          position: fixed;
+          top: 1px;
+          left: 1px;
+          right: 1px;
+          -webkit-app-region: drag;
+          -webkit-user-select: none;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
 
-          .header_windowHeaderWithBorder {
-            border-color: #ccc;
-            border-bottom-style: solid;
-            border-bottom-width: 1px;
-          }
+        .header_windowHeaderWithBorder {
+          border-color: #ccc;
+          border-bottom-style: solid;
+          border-bottom-width: 1px;
+        }
 
-          .header_appTitle {
-            font-size: 12px;
-          }
+        .header_appTitle {
+          font-size: 12px;
+        }
 
-          .header_shape,
-          .header_shape > svg {
-            width: 40px;
-            height: 34px;
-            padding: 12px 15px 12px 15px;
-            -webkit-app-region: no-drag;
-            color: #fff;
-            opacity: 0.5;
-            shape-rendering: crispEdges;
-          }
+        .header_shape,
+        .header_shape > svg {
+          width: 40px;
+          height: 34px;
+          padding: 12px 15px 12px 15px;
+          -webkit-app-region: no-drag;
+          color: #fff;
+          opacity: 0.5;
+          shape-rendering: crispEdges;
+        }
 
-          .header_shape:hover {
-            opacity: 1;
-          }
+        .header_shape:hover {
+          opacity: 1;
+        }
 
-          .header_shape:active {
-            opacity: 0.3;
-          }
+        .header_shape:active {
+          opacity: 0.3;
+        }
 
-          .header_hamburgerMenuLeft {
-            position: fixed;
-            top: 0;
-            left: 0;
-          }
+        .header_hamburgerMenuLeft {
+          position: fixed;
+          top: 0;
+          left: 0;
+        }
 
-          .header_hamburgerMenuRight {
-            position: fixed;
-            top: 0;
-            right: 0;
-          }
+        .header_hamburgerMenuRight {
+          position: fixed;
+          top: 0;
+          right: 0;
+        }
 
-          .header_windowControls {
-            display: flex;
-            width: 120px;
-            height: 34px;
-            justify-content: space-between;
-            position: fixed;
-            top: 0;
-            right: 0;
-          }
+        .header_windowControls {
+          display: flex;
+          width: 120px;
+          height: 34px;
+          justify-content: space-between;
+          position: fixed;
+          top: 0;
+          right: 0;
+        }
 
-          .header_windowControlsLeft {
-            left: 0px;
-          }
+        .header_windowControlsLeft {
+          left: 0px;
+        }
 
-          .header_closeWindowLeft {
-            order: 1;
-          }
+        .header_closeWindowLeft {
+          order: 1;
+        }
 
-          .header_minimizeWindowLeft {
-            order: 2;
-          }
+        .header_minimizeWindowLeft {
+          order: 2;
+        }
 
-          .header_maximizeWindowLeft {
-            order: 3;
-          }
+        .header_maximizeWindowLeft {
+          order: 3;
+        }
 
-          .header_closeWindow:hover {
-            color: #fe354e;
-          }
+        .header_closeWindow:hover {
+          color: #fe354e;
+        }
 
-          .header_closeWindow:active {
-            color: #fe354e;
-          }
-        `}</style>
-      </header>
-    );
-  }
-}
+        .header_closeWindow:active {
+          color: #fe354e;
+        }
+      `}</style>
+    </header>
+  );
+});
+
+Header.displayName = 'Header';
+
+export default Header;

lib/components/new-tab.tsx

@@ -0,0 +1,149 @@
+import React, {useRef, useState} from 'react';
+
+import {VscChevronDown} from '@react-icons/all-files/vsc/VscChevronDown';
+import useClickAway from 'react-use/lib/useClickAway';
+
+import type {configOptions} from '../../typings/config';
+
+interface Props {
+  defaultProfile: string;
+  profiles: configOptions['profiles'];
+  openNewTab: (name: string) => void;
+  backgroundColor: string;
+  borderColor: string;
+  tabsVisible: boolean;
+}
+const isMac = /Mac/.test(navigator.userAgent);
+
+const DropdownButton = ({defaultProfile, profiles, openNewTab, backgroundColor, borderColor, tabsVisible}: Props) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const ref = useRef(null);
+
+  const toggleDropdown = () => {
+    setDropdownOpen(!dropdownOpen);
+  };
+
+  useClickAway(ref, () => {
+    setDropdownOpen(false);
+  });
+
+  return (
+    <div
+      ref={ref}
+      title="New Tab"
+      className={`new_tab ${tabsVisible ? 'tabs_visible' : 'tabs_hidden'}`}
+      onClick={toggleDropdown}
+      onDoubleClick={(e) => e.stopPropagation()}
+      onBlur={() => setDropdownOpen(false)}
+    >
+      <VscChevronDown style={{verticalAlign: 'middle'}} />
+
+      {dropdownOpen && (
+        <ul
+          key="dropdown"
+          className="profile_dropdown"
+          style={{
+            borderColor,
+            backgroundColor
+          }}
+        >
+          {profiles.map((profile) => (
+            <li
+              key={profile.name}
+              onClick={() => {
+                openNewTab(profile.name);
+                setDropdownOpen(false);
+              }}
+              className={`profile_dropdown_item ${
+                profile.name === defaultProfile && profiles.length > 1 ? 'profile_dropdown_item_default' : ''
+              }`}
+            >
+              {profile.name}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <style jsx>{`
+        .profile_dropdown {
+          border-width: 1px;
+          border-style: solid;
+          border-bottom-width: 0px;
+          border-right-width: 0px;
+          position: absolute;
+          top: 33px;
+          right: 0px;
+          z-index: 1000;
+          padding: 0px;
+          margin: 0px;
+          list-style-type: none;
+          white-space: nowrap;
+          min-width: 120px;
+        }
+
+        .profile_dropdown_item {
+          padding: 0px 20px;
+          height: 34px;
+          line-height: 34px;
+          cursor: pointer;
+          font-size: 12px;
+          color: #fff;
+          background-color: transparent;
+          border-width: 0px;
+          border-style: solid;
+          border-color: transparent;
+          border-bottom-width: 1px;
+          border-bottom-style: solid;
+          border-bottom-color: ${borderColor};
+          text-align: start;
+          text-transform: capitalize;
+        }
+
+        .profile_dropdown_item:hover {
+          background-color: ${borderColor};
+        }
+
+        .profile_dropdown_item_default {
+          font-weight: bold;
+        }
+
+        .new_tab {
+          background: transparent;
+          color: #fff;
+          border-left: 1px;
+          border-bottom: 1px;
+          border-left-style: solid;
+          border-bottom-style: solid;
+          border-left-width: 1px;
+          border-bottom-width: 1px;
+          cursor: pointer;
+          font-size: 12px;
+          height: 34px;
+          line-height: 34px;
+          padding: 0 16px;
+          position: relative;
+          text-align: center;
+          -webkit-user-select: none;
+          ${isMac ? '-webkit-app-region: drag;' : ''}
+          top: '0px';
+        }
+
+        .tabs_visible {
+          border-color: ${borderColor};
+        }
+
+        .tabs_hidden {
+          border-color: transparent;
+          position: absolute;
+          right: 0px;
+        }
+
+        .tabs_hidden:hover {
+          border-color: ${borderColor};
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default DropdownButton;

lib/components/notification.tsx

@@ -1,115 +1,110 @@
-import React from 'react';
-import {NotificationProps, NotificationState} from '../hyper';
+import React, {forwardRef, useEffect, useRef, useState} from 'react';
 
-export default class Notification extends React.PureComponent<NotificationProps, NotificationState> {
-  dismissTimer!: NodeJS.Timeout;
-  constructor(props: NotificationProps) {
-    super(props);
-    this.state = {
-      dismissing: false
-    };
-  }
+import type {NotificationProps} from '../../typings/hyper';
 
-  componentDidMount() {
-    if (this.props.dismissAfter) {
-      this.setDismissTimer();
-    }
-  }
+const Notification = forwardRef<HTMLDivElement, React.PropsWithChildren<NotificationProps>>((props, ref) => {
+  const dismissTimer = useRef<NodeJS.Timeout | undefined>(undefined);
+  const [dismissing, setDismissing] = useState(false);
 
-  componentDidUpdate(prevProps: NotificationProps, prevState: NotificationState) {
+  useEffect(() => {
+    setDismissTimer();
+  }, []);
+
+  useEffect(() => {
     // if we have a timer going and the notification text
     // changed we reset the timer
-    if (this.props.text !== prevProps.text) {
-      if (prevProps.dismissAfter) {
-        this.resetDismissTimer();
-      }
-      if (prevState.dismissing) {
-        this.setState({dismissing: false});
-      }
-    }
-  }
+    resetDismissTimer();
+    setDismissing(false);
+  }, [props.text]);
 
-  handleDismiss = () => {
-    this.setState({dismissing: true});
+  const handleDismiss = () => {
+    setDismissing(true);
   };
 
-  onElement = (el: HTMLDivElement | null) => {
+  const onElement = (el: HTMLDivElement | null) => {
     if (el) {
       el.addEventListener('webkitTransitionEnd', () => {
-        if (this.state.dismissing) {
-          this.props.onDismiss();
+        if (dismissing) {
+          props.onDismiss();
         }
       });
-      const {backgroundColor} = this.props;
+      const {backgroundColor} = props;
       if (backgroundColor) {
         el.style.setProperty('background-color', backgroundColor, 'important');
       }
+
+      if (ref) {
+        if (typeof ref === 'function') ref(el);
+        else ref.current = el;
+      }
     }
   };
 
-  setDismissTimer() {
-    this.dismissTimer = setTimeout(() => {
-      this.handleDismiss();
-    }, this.props.dismissAfter);
-  }
+  const setDismissTimer = () => {
+    if (typeof props.dismissAfter === 'number') {
+      dismissTimer.current = setTimeout(() => {
+        handleDismiss();
+      }, props.dismissAfter);
+    }
+  };
 
-  resetDismissTimer() {
-    clearTimeout(this.dismissTimer);
-    this.setDismissTimer();
-  }
+  const resetDismissTimer = () => {
+    clearTimeout(dismissTimer.current);
+    setDismissTimer();
+  };
 
-  componentWillUnmount() {
-    clearTimeout(this.dismissTimer);
-  }
+  useEffect(() => {
+    return () => {
+      clearTimeout(dismissTimer.current);
+    };
+  }, []);
 
-  render() {
-    const {backgroundColor, color} = this.props;
-    const opacity = this.state.dismissing ? 0 : 1;
-    return (
-      <div ref={this.onElement} style={{opacity, backgroundColor, color}} className="notification_indicator">
-        {this.props.customChildrenBefore}
-        {this.props.children || this.props.text}
-        {this.props.userDismissable ? (
-          <a
-            className="notification_dismissLink"
-            onClick={this.handleDismiss}
-            style={{color: this.props.userDismissColor}}
-          >
-            [x]
-          </a>
-        ) : null}
-        {this.props.customChildren}
+  const {backgroundColor, color} = props;
+  const opacity = dismissing ? 0 : 1;
+  return (
+    <div ref={onElement} style={{opacity, backgroundColor, color}} className="notification_indicator">
+      {props.customChildrenBefore}
+      {props.children || props.text}
+      {props.userDismissable ? (
+        <a className="notification_dismissLink" onClick={handleDismiss} style={{color: props.userDismissColor}}>
+          [x]
+        </a>
+      ) : null}
+      {props.customChildren}
 
-        <style jsx>{`
-          .notification_indicator {
-            display: inline-block;
-            cursor: default;
-            -webkit-user-select: none;
-            background: rgba(255, 255, 255, 0.2);
-            padding: 8px 14px 9px;
-            margin-left: 10px;
-            transition: 150ms opacity ease;
-            color: #fff;
-            font-size: 12px;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
-              'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-          }
+      <style jsx>{`
+        .notification_indicator {
+          display: inline-block;
+          cursor: default;
+          -webkit-user-select: none;
+          background: rgba(255, 255, 255, 0.2);
+          padding: 8px 14px 9px;
+          margin-left: 10px;
+          transition: 150ms opacity ease;
+          color: #fff;
+          font-size: 12px;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+            'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+        }
 
-          .notification_dismissLink {
-            position: relative;
-            left: 4px;
-            cursor: pointer;
-            font-weight: 600;
-            color: currentColor;
-            transition: font-weight 0.1s ease-in-out;
-          }
+        .notification_dismissLink {
+          position: relative;
+          left: 4px;
+          cursor: pointer;
+          font-weight: 600;
+          color: currentColor;
+          transition: font-weight 0.1s ease-in-out;
+        }
 
-          .notification_dismissLink:hover,
-          .notification_dismissLink:focus {
-            font-weight: 900;
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
+        .notification_dismissLink:hover,
+        .notification_dismissLink:focus {
+          font-weight: 900;
+        }
+      `}</style>
+    </div>
+  );
+});
+
+Notification.displayName = 'Notification';
+
+export default Notification;

lib/components/notifications.tsx

@@ -1,132 +1,132 @@
-import React from 'react';
+import React, {forwardRef} from 'react';
 
+import type {NotificationsProps} from '../../typings/hyper';
 import {decorate} from '../utils/plugins';
 
 import Notification_ from './notification';
-import {NotificationsProps} from '../hyper';
 
 const Notification = decorate(Notification_, 'Notification');
 
-export default class Notifications extends React.PureComponent<NotificationsProps> {
-  render() {
-    return (
-      <div className="notifications_view">
-        {this.props.customChildrenBefore}
-        {this.props.fontShowing && (
-          <Notification
-            key="font"
-            backgroundColor="rgba(255, 255, 255, .2)"
-            text={`${this.props.fontSize}px`}
-            userDismissable={false}
-            onDismiss={this.props.onDismissFont}
-            dismissAfter={1000}
-          />
-        )}
+const Notifications = forwardRef<HTMLDivElement, NotificationsProps>((props, ref) => {
+  return (
+    <div className="notifications_view" ref={ref}>
+      {props.customChildrenBefore}
+      {props.fontShowing && (
+        <Notification
+          key="font"
+          backgroundColor="rgba(255, 255, 255, .2)"
+          text={`${props.fontSize}px`}
+          userDismissable={false}
+          onDismiss={props.onDismissFont}
+          dismissAfter={1000}
+        />
+      )}
 
-        {this.props.resizeShowing && (
-          <Notification
-            key="resize"
-            backgroundColor="rgba(255, 255, 255, .2)"
-            text={`${this.props.cols}x${this.props.rows}`}
-            userDismissable={false}
-            onDismiss={this.props.onDismissResize}
-            dismissAfter={1000}
-          />
-        )}
+      {props.resizeShowing && (
+        <Notification
+          key="resize"
+          backgroundColor="rgba(255, 255, 255, .2)"
+          text={`${props.cols}x${props.rows}`}
+          userDismissable={false}
+          onDismiss={props.onDismissResize}
+          dismissAfter={1000}
+        />
+      )}
 
-        {this.props.messageShowing && (
-          <Notification
-            key="message"
-            backgroundColor="#FE354E"
-            color="#fff"
-            text={this.props.messageText}
-            onDismiss={this.props.onDismissMessage}
-            userDismissable={this.props.messageDismissable}
-          >
-            {this.props.messageURL
-              ? [
-                  this.props.messageText,
-                  ' (',
-                  <a
-                    key="link"
-                    style={{color: '#fff'}}
-                    onClick={(ev) => {
-                      void window.require('electron').shell.openExternal(ev.currentTarget.href);
-                      ev.preventDefault();
-                    }}
-                    href={this.props.messageURL}
-                  >
-                    more
-                  </a>,
-                  ') '
-                ]
-              : null}
-          </Notification>
-        )}
-
-        {this.props.updateShowing && (
-          <Notification
-            key="update"
-            backgroundColor="#18E179"
-            color="#000"
-            text={`Version ${this.props.updateVersion} ready`}
-            onDismiss={this.props.onDismissUpdate}
-            userDismissable
-          >
-            Version <b>{this.props.updateVersion}</b> ready.
-            {this.props.updateNote && ` ${this.props.updateNote.trim().replace(/\.$/, '')}`} (
-            <a
-              style={{color: '#000'}}
-              onClick={(ev) => {
-                void window.require('electron').shell.openExternal(ev.currentTarget.href);
-                ev.preventDefault();
-              }}
-              href={`https://github.com/vercel/hyper/releases/tag/${this.props.updateVersion}`}
-            >
-              notes
-            </a>
-            ).{' '}
-            {this.props.updateCanInstall ? (
+      {props.messageShowing && (
+        <Notification
+          key="message"
+          backgroundColor="#FE354E"
+          color="#fff"
+          text={props.messageText}
+          onDismiss={props.onDismissMessage}
+          userDismissable={props.messageDismissable}
+        >
+          {props.messageURL ? (
+            <>
+              {props.messageText} (
               <a
-                style={{
-                  cursor: 'pointer',
-                  textDecoration: 'underline',
-                  fontWeight: 'bold'
-                }}
-                onClick={this.props.onUpdateInstall}
-              >
-                Restart
-              </a>
-            ) : (
-              <a
-                style={{
-                  color: '#000',
-                  cursor: 'pointer',
-                  textDecoration: 'underline',
-                  fontWeight: 'bold'
-                }}
+                style={{color: '#fff'}}
                 onClick={(ev) => {
                   void window.require('electron').shell.openExternal(ev.currentTarget.href);
                   ev.preventDefault();
                 }}
-                href={this.props.updateReleaseUrl!}
+                href={props.messageURL}
               >
-                Download
+                more
               </a>
-            )}
-            .{' '}
-          </Notification>
-        )}
-        {this.props.customChildren}
+              )
+            </>
+          ) : null}
+        </Notification>
+      )}
 
-        <style jsx>{`
-          .notifications_view {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
+      {props.updateShowing && (
+        <Notification
+          key="update"
+          backgroundColor="#18E179"
+          color="#000"
+          text={`Version ${props.updateVersion} ready`}
+          onDismiss={props.onDismissUpdate}
+          userDismissable
+        >
+          Version <b>{props.updateVersion}</b> ready.
+          {props.updateNote && ` ${props.updateNote.trim().replace(/\.$/, '')}`} (
+          <a
+            style={{color: '#000'}}
+            onClick={(ev) => {
+              void window.require('electron').shell.openExternal(ev.currentTarget.href);
+              ev.preventDefault();
+            }}
+            href={`https://github.com/quine-global/hyper/releases/tag/${props.updateVersion}`}
+          >
+            notes
+          </a>
+          ).{' '}
+          {props.updateCanInstall ? (
+            <a
+              style={{
+                cursor: 'pointer',
+                textDecoration: 'underline',
+                fontWeight: 'bold'
+              }}
+              onClick={props.onUpdateInstall}
+            >
+              Restart
+            </a>
+          ) : (
+            <a
+              style={{
+                color: '#000',
+                cursor: 'pointer',
+                textDecoration: 'underline',
+                fontWeight: 'bold'
+              }}
+              onClick={(ev) => {
+                void window.require('electron').shell.openExternal(ev.currentTarget.href);
+                ev.preventDefault();
+              }}
+              href={props.updateReleaseUrl!}
+            >
+              Download
+            </a>
+          )}
+          .{' '}
+        </Notification>
+      )}
+      {props.customChildren}
+
+      <style jsx>{`
+        .notifications_view {
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+        }
+      `}</style>
+    </div>
+  );
+});
+
+Notifications.displayName = 'Notifications';
+
+export default Notifications;

lib/components/searchBox.tsx

@@ -1,13 +1,15 @@
-import React, {useCallback} from 'react';
-import {SearchBoxProps} from '../hyper';
-import {VscArrowUp} from '@react-icons/all-files/vsc/VscArrowUp';
+import React, {useCallback, useRef, useEffect, forwardRef} from 'react';
+
 import {VscArrowDown} from '@react-icons/all-files/vsc/VscArrowDown';
-import {VscClose} from '@react-icons/all-files/vsc/VscClose';
+import {VscArrowUp} from '@react-icons/all-files/vsc/VscArrowUp';
 import {VscCaseSensitive} from '@react-icons/all-files/vsc/VscCaseSensitive';
+import {VscClose} from '@react-icons/all-files/vsc/VscClose';
 import {VscRegex} from '@react-icons/all-files/vsc/VscRegex';
 import {VscWholeWord} from '@react-icons/all-files/vsc/VscWholeWord';
 import clsx from 'clsx';
 
+import type {SearchBoxProps} from '../../typings/hyper';
+
 type SearchButtonColors = {
   foregroundColor: string;
   selectionColor: string;
@@ -82,179 +84,163 @@ const SearchButton = ({
   );
 };
 
-class SearchBox extends React.PureComponent<SearchBoxProps> {
-  searchTerm: string;
-  input: HTMLInputElement | null = null;
-  searchButtonColors: SearchButtonColors;
+const SearchBox = forwardRef<HTMLDivElement, SearchBoxProps>((props, ref) => {
+  const {
+    caseSensitive,
+    dateFocused,
+    wholeWord,
+    regex,
+    results,
+    toggleCaseSensitive,
+    toggleWholeWord,
+    toggleRegex,
+    next,
+    prev,
+    close,
+    backgroundColor,
+    foregroundColor,
+    borderColor,
+    selectionColor,
+    font
+  } = props;
 
-  constructor(props: SearchBoxProps) {
-    super(props);
-    this.searchTerm = '';
-    this.searchButtonColors = {
-      backgroundColor: this.props.borderColor,
-      selectionColor: this.props.selectionColor,
-      foregroundColor: this.props.foregroundColor
-    };
-  }
+  const searchTermRef = useRef<string>('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
-  handleChange = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    this.searchTerm = event.currentTarget.value;
-    if (event.shiftKey && event.key === 'Enter') {
-      this.props.prev(this.searchTerm);
-    } else if (event.key === 'Enter') {
-      this.props.next(this.searchTerm);
+  const handleChange = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      searchTermRef.current = event.currentTarget.value;
+      if (event.shiftKey && event.key === 'Enter') {
+        prev(searchTermRef.current);
+      } else if (event.key === 'Enter') {
+        next(searchTermRef.current);
+      }
+    },
+    [prev, next]
+  );
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [inputRef.current]);
+
+  useEffect(() => {
+    if (!dateFocused) {
+      return;
     }
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, [dateFocused]);
+
+  const searchButtonColors: SearchButtonColors = {
+    backgroundColor: borderColor,
+    selectionColor,
+    foregroundColor
   };
 
-  componentDidMount(): void {
-    this.input?.focus();
-  }
+  return (
+    <div className="flex-row search-container" ref={ref}>
+      <div className="flex-row search-box">
+        <input className="search-input" type="text" onKeyDown={handleChange} ref={inputRef} placeholder="Search" />
 
-  render() {
-    const {
-      caseSensitive,
-      wholeWord,
-      regex,
-      results,
-      toggleCaseSensitive,
-      toggleWholeWord,
-      toggleRegex,
-      next,
-      prev,
-      close,
-      backgroundColor,
-      foregroundColor,
-      borderColor,
-      selectionColor,
-      font
-    } = this.props;
+        <SearchButton onClick={toggleCaseSensitive} active={caseSensitive} title="Match Case" {...searchButtonColors}>
+          <VscCaseSensitive size="14px" />
+        </SearchButton>
 
-    return (
-      <div className="flex-row search-container">
-        <div className="flex-row search-box">
-          <input
-            className="search-input"
-            type="text"
-            onKeyDown={this.handleChange}
-            ref={(input) => {
-              this.input = input;
-            }}
-            placeholder="Search"
-          ></input>
+        <SearchButton onClick={toggleWholeWord} active={wholeWord} title="Match Whole Word" {...searchButtonColors}>
+          <VscWholeWord size="14px" />
+        </SearchButton>
 
-          <SearchButton
-            onClick={toggleCaseSensitive}
-            active={caseSensitive}
-            title="Match Case"
-            {...this.searchButtonColors}
-          >
-            <VscCaseSensitive size="14px" />
-          </SearchButton>
+        <SearchButton onClick={toggleRegex} active={regex} title="Use Regular Expression" {...searchButtonColors}>
+          <VscRegex size="14px" />
+        </SearchButton>
+      </div>
 
-          <SearchButton
-            onClick={toggleWholeWord}
-            active={wholeWord}
-            title="Match Whole Word"
-            {...this.searchButtonColors}
-          >
-            <VscWholeWord size="14px" />
-          </SearchButton>
-
-          <SearchButton
-            onClick={toggleRegex}
-            active={regex}
-            title="Use Regular Expression"
-            {...this.searchButtonColors}
-          >
-            <VscRegex size="14px" />
-          </SearchButton>
-        </div>
-
-        <span style={{minWidth: '60px', marginLeft: '4px'}}>
-          {results === undefined
-            ? ''
-            : results.resultCount === 0
+      <span style={{minWidth: '60px', marginLeft: '4px'}}>
+        {results === undefined
+          ? ''
+          : results.resultCount === 0
             ? 'No results'
             : `${results.resultIndex + 1} of ${results.resultCount}`}
-        </span>
+      </span>
 
-        <div className="flex-row">
-          <SearchButton
-            onClick={() => prev(this.searchTerm)}
-            active={false}
-            title="Previous Match"
-            {...this.searchButtonColors}
-          >
-            <VscArrowUp size="14px" />
-          </SearchButton>
+      <div className="flex-row">
+        <SearchButton
+          onClick={() => prev(searchTermRef.current)}
+          active={false}
+          title="Previous Match"
+          {...searchButtonColors}
+        >
+          <VscArrowUp size="14px" />
+        </SearchButton>
 
-          <SearchButton
-            onClick={() => next(this.searchTerm)}
-            active={false}
-            title="Next Match"
-            {...this.searchButtonColors}
-          >
-            <VscArrowDown size="14px" />
-          </SearchButton>
+        <SearchButton
+          onClick={() => next(searchTermRef.current)}
+          active={false}
+          title="Next Match"
+          {...searchButtonColors}
+        >
+          <VscArrowDown size="14px" />
+        </SearchButton>
 
-          <SearchButton onClick={() => close()} active={false} title="Close" {...this.searchButtonColors}>
-            <VscClose size="14px" />
-          </SearchButton>
-        </div>
-
-        <style jsx>
-          {`
-            .search-container {
-              background-color: ${backgroundColor};
-              border: 1px solid ${borderColor};
-              border-radius: 2px;
-              position: absolute;
-              right: 13px;
-              top: 4px;
-              z-index: 10;
-              padding: 4px;
-              font-family: ${font};
-              font-size: 12px;
-            }
-
-            .search-input {
-              outline: none;
-              background-color: transparent;
-              border: none;
-              color: ${foregroundColor};
-              align-self: stretch;
-              width: 100px;
-            }
-
-            .flex-row {
-              display: flex;
-              flex-direction: row;
-              justify-content: space-between;
-              align-items: center;
-              gap: 4px;
-            }
-
-            .search-box {
-              border: none;
-              border-radius: 2px;
-              outline: ${borderColor} solid 1px;
-              background-color: ${backgroundColor};
-              color: ${foregroundColor};
-              padding: 0px 4px;
-            }
-
-            .search-input::placeholder {
-              color: ${foregroundColor};
-            }
-
-            .search-box:focus-within {
-              outline: ${selectionColor} solid 2px;
-            }
-          `}
-        </style>
+        <SearchButton onClick={close} active={false} title="Close" {...searchButtonColors}>
+          <VscClose size="14px" />
+        </SearchButton>
       </div>
-    );
-  }
-}
+
+      <style jsx>
+        {`
+          .search-container {
+            background-color: ${backgroundColor};
+            border: 1px solid ${borderColor};
+            border-radius: 2px;
+            position: absolute;
+            right: 13px;
+            top: 4px;
+            z-index: 10;
+            padding: 4px;
+            font-family: ${font};
+            font-size: 12px;
+          }
+
+          .search-input {
+            outline: none;
+            background-color: transparent;
+            border: none;
+            color: ${foregroundColor};
+            align-self: stretch;
+            width: 100px;
+          }
+
+          .flex-row {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            gap: 4px;
+          }
+
+          .search-box {
+            border: none;
+            border-radius: 2px;
+            outline: ${borderColor} solid 1px;
+            background-color: ${backgroundColor};
+            color: ${foregroundColor};
+            padding: 0px 4px;
+          }
+
+          .search-input::placeholder {
+            color: ${foregroundColor};
+          }
+
+          .search-box:focus-within {
+            outline: ${selectionColor} solid 2px;
+          }
+        `}
+      </style>
+    </div>
+  );
+});
+
+SearchBox.displayName = 'SearchBox';
 
 export default SearchBox;

lib/components/split-pane.tsx

@@ -1,219 +1,191 @@
-import React from 'react';
-import _ from 'lodash';
-import {SplitPaneProps} from '../hyper';
+import React, {useState, useEffect, useRef, forwardRef} from 'react';
 
-export default class SplitPane extends React.PureComponent<SplitPaneProps, {dragging: boolean}> {
-  dragPanePosition!: number;
-  dragTarget!: Element;
-  panes!: Element[];
-  paneIndex!: number;
-  d1!: 'height' | 'width';
-  d2!: 'top' | 'left';
-  d3!: 'clientX' | 'clientY';
-  panesSize!: number;
-  dragging!: boolean;
-  constructor(props: SplitPaneProps) {
-    super(props);
-    this.state = {dragging: false};
-  }
+import sum from 'lodash/sum';
 
-  componentDidUpdate(prevProps: SplitPaneProps) {
-    if (this.state.dragging && prevProps.sizes !== this.props.sizes) {
-      // recompute positions for ongoing dragging
-      this.dragPanePosition = this.dragTarget.getBoundingClientRect()[this.d2];
-    }
-  }
+import type {SplitPaneProps} from '../../typings/hyper';
 
-  setupPanes(ev: any) {
-    this.panes = Array.from(ev.target.parentNode.childNodes);
-    this.paneIndex = this.panes.indexOf(ev.target);
-    this.paneIndex -= Math.ceil(this.paneIndex / 2);
-  }
+const SplitPane = forwardRef<HTMLDivElement, SplitPaneProps>((props, ref) => {
+  const dragPanePosition = useRef<number>(0);
+  const dragTarget = useRef<HTMLDivElement | null>(null);
+  const paneIndex = useRef<number>(0);
+  const d1 = props.direction === 'horizontal' ? 'height' : 'width';
+  const d2 = props.direction === 'horizontal' ? 'top' : 'left';
+  const d3 = props.direction === 'horizontal' ? 'clientY' : 'clientX';
+  const panesSize = useRef<number | null>(null);
+  const [dragging, setDragging] = useState(false);
 
-  handleAutoResize = (ev: React.MouseEvent) => {
+  const handleAutoResize = (ev: React.MouseEvent<HTMLDivElement>, index: number) => {
     ev.preventDefault();
 
-    this.setupPanes(ev);
+    paneIndex.current = index;
 
-    const sizes_ = this.getSizes();
-    sizes_[this.paneIndex] = 0;
-    sizes_[this.paneIndex + 1] = 0;
+    const sizes_ = getSizes();
+    sizes_[paneIndex.current] = 0;
+    sizes_[paneIndex.current + 1] = 0;
 
-    const availableWidth = 1 - _.sum(sizes_);
-    sizes_[this.paneIndex] = availableWidth / 2;
-    sizes_[this.paneIndex + 1] = availableWidth / 2;
+    const availableWidth = 1 - sum(sizes_);
+    sizes_[paneIndex.current] = availableWidth / 2;
+    sizes_[paneIndex.current + 1] = availableWidth / 2;
 
-    this.props.onResize(sizes_);
+    props.onResize(sizes_);
   };
 
-  handleDragStart = (ev: any) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  const handleDragStart = (ev: React.MouseEvent<HTMLDivElement>, index: number) => {
     ev.preventDefault();
-    this.setState({dragging: true});
-    window.addEventListener('mousemove', this.onDrag);
-    window.addEventListener('mouseup', this.onDragEnd);
+    setDragging(true);
+    window.addEventListener('mousemove', onDrag);
+    window.addEventListener('mouseup', onDragEnd);
 
-    // dimensions to consider
-    if (this.props.direction === 'horizontal') {
-      this.d1 = 'height';
-      this.d2 = 'top';
-      this.d3 = 'clientY';
-    } else {
-      this.d1 = 'width';
-      this.d2 = 'left';
-      this.d3 = 'clientX';
-    }
-
-    this.dragTarget = ev.target;
-    this.dragPanePosition = this.dragTarget.getBoundingClientRect()[this.d2];
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    this.panesSize = ev.target.parentNode.getBoundingClientRect()[this.d1];
-    this.setupPanes(ev);
+    const target = ev.target as HTMLDivElement;
+    dragTarget.current = target;
+    dragPanePosition.current = dragTarget.current.getBoundingClientRect()[d2];
+    panesSize.current = target.parentElement!.getBoundingClientRect()[d1];
+    paneIndex.current = index;
   };
 
-  getSizes() {
-    const {sizes} = this.props;
+  const getSizes = () => {
+    const {sizes} = props;
     let sizes_: number[];
 
     if (sizes) {
       sizes_ = [...sizes.asMutable()];
     } else {
-      const total = (this.props.children as React.ReactNodeArray).length;
+      const total = props.children.length;
       const count = new Array<number>(total).fill(1 / total);
 
       sizes_ = count;
     }
     return sizes_;
-  }
+  };
 
-  onDrag = (ev: MouseEvent) => {
-    const sizes_ = this.getSizes();
+  const onDrag = (ev: MouseEvent) => {
+    const sizes_ = getSizes();
 
-    const i = this.paneIndex;
-    const pos = ev[this.d3];
-    const d = Math.abs(this.dragPanePosition - pos) / this.panesSize;
-    if (pos > this.dragPanePosition) {
+    const i = paneIndex.current;
+    const pos = ev[d3];
+    const d = Math.abs(dragPanePosition.current - pos) / panesSize.current!;
+    if (pos > dragPanePosition.current) {
       sizes_[i] += d;
       sizes_[i + 1] -= d;
     } else {
       sizes_[i] -= d;
       sizes_[i + 1] += d;
     }
-    this.props.onResize(sizes_);
+    props.onResize(sizes_);
   };
 
-  onDragEnd = () => {
-    if (this.state.dragging) {
-      window.removeEventListener('mousemove', this.onDrag);
-      window.removeEventListener('mouseup', this.onDragEnd);
-      this.setState({dragging: false});
-    }
+  const onDragEnd = () => {
+    window.removeEventListener('mousemove', onDrag);
+    window.removeEventListener('mouseup', onDragEnd);
+    setDragging(false);
   };
 
-  render() {
-    const children = this.props.children as React.ReactNodeArray;
-    const {direction, borderColor} = this.props;
-    const sizeProperty = direction === 'horizontal' ? 'height' : 'width';
-    // workaround for the fact that if we don't specify
-    // sizes, sometimes flex fails to calculate the
-    // right height for the horizontal panes
-    const sizes = this.props.sizes || new Array<number>(children.length).fill(1 / children.length);
-    return (
-      <div className={`splitpane_panes splitpane_panes_${direction}`}>
-        {React.Children.map(children, (child, i) => {
-          const style = {
-            // flexBasis doesn't work for the first horizontal pane, height need to be specified
-            [sizeProperty]: `${sizes[i] * 100}%`,
-            flexBasis: `${sizes[i] * 100}%`,
-            flexGrow: 0
-          };
-          return [
-            <div key="pane" className="splitpane_pane" style={style}>
+  useEffect(() => {
+    return () => {
+      onDragEnd();
+    };
+  }, []);
+
+  const {children, direction, borderColor} = props;
+  const sizeProperty = direction === 'horizontal' ? 'height' : 'width';
+  // workaround for the fact that if we don't specify
+  // sizes, sometimes flex fails to calculate the
+  // right height for the horizontal panes
+  const sizes = props.sizes || new Array<number>(children.length).fill(1 / children.length);
+  return (
+    <div className={`splitpane_panes splitpane_panes_${direction}`} ref={ref}>
+      {children.map((child, i) => {
+        const style = {
+          // flexBasis doesn't work for the first horizontal pane, height need to be specified
+          [sizeProperty]: `${sizes[i] * 100}%`,
+          flexBasis: `${sizes[i] * 100}%`,
+          flexGrow: 0
+        };
+
+        return (
+          <React.Fragment key={i}>
+            <div className="splitpane_pane" style={style}>
               {child}
-            </div>,
-            i < children.length - 1 ? (
+            </div>
+            {i < children.length - 1 ? (
               <div
-                key="divider"
-                onMouseDown={this.handleDragStart}
-                onDoubleClick={this.handleAutoResize}
+                onMouseDown={(e) => handleDragStart(e, i)}
+                onDoubleClick={(e) => handleAutoResize(e, i)}
                 style={{backgroundColor: borderColor}}
                 className={`splitpane_divider splitpane_divider_${direction}`}
               />
-            ) : null
-          ];
-        })}
-        <div style={{display: this.state.dragging ? 'block' : 'none'}} className="splitpane_shim" />
+            ) : null}
+          </React.Fragment>
+        );
+      })}
+      <div style={{display: dragging ? 'block' : 'none'}} className="splitpane_shim" />
 
-        <style jsx>{`
-          .splitpane_panes {
-            display: flex;
-            flex: 1;
-            outline: none;
-            position: relative;
-            width: 100%;
-            height: 100%;
-          }
+      <style jsx>{`
+        .splitpane_panes {
+          display: flex;
+          flex: 1;
+          outline: none;
+          position: relative;
+          width: 100%;
+          height: 100%;
+        }
 
-          .splitpane_panes_vertical {
-            flex-direction: row;
-          }
+        .splitpane_panes_vertical {
+          flex-direction: row;
+        }
 
-          .splitpane_panes_horizontal {
-            flex-direction: column;
-          }
+        .splitpane_panes_horizontal {
+          flex-direction: column;
+        }
 
-          .splitpane_pane {
-            flex: 1;
-            outline: none;
-            position: relative;
-          }
+        .splitpane_pane {
+          flex: 1;
+          outline: none;
+          position: relative;
+        }
 
-          .splitpane_divider {
-            box-sizing: border-box;
-            z-index: 1;
-            background-clip: padding-box;
-            flex-shrink: 0;
-          }
+        .splitpane_divider {
+          box-sizing: border-box;
+          z-index: 1;
+          background-clip: padding-box;
+          flex-shrink: 0;
+        }
 
-          .splitpane_divider_vertical {
-            border-left: 5px solid rgba(255, 255, 255, 0);
-            border-right: 5px solid rgba(255, 255, 255, 0);
-            width: 11px;
-            margin: 0 -5px;
-            cursor: col-resize;
-          }
+        .splitpane_divider_vertical {
+          border-left: 5px solid rgba(255, 255, 255, 0);
+          border-right: 5px solid rgba(255, 255, 255, 0);
+          width: 11px;
+          margin: 0 -5px;
+          cursor: col-resize;
+        }
 
-          .splitpane_divider_horizontal {
-            height: 11px;
-            margin: -5px 0;
-            border-top: 5px solid rgba(255, 255, 255, 0);
-            border-bottom: 5px solid rgba(255, 255, 255, 0);
-            cursor: row-resize;
-            width: 100%;
-          }
+        .splitpane_divider_horizontal {
+          height: 11px;
+          margin: -5px 0;
+          border-top: 5px solid rgba(255, 255, 255, 0);
+          border-bottom: 5px solid rgba(255, 255, 255, 0);
+          cursor: row-resize;
+          width: 100%;
+        }
 
-          /*
-            this shim is used to make sure mousemove events
-            trigger in all the draggable area of the screen
-            this is not the case due to hterm's <iframe>
-          */
-          .splitpane_shim {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: transparent;
-          }
-        `}</style>
-      </div>
-    );
-  }
+        /*
+          this shim is used to make sure mousemove events
+          trigger in all the draggable area of the screen
+          this is not the case due to hterm's <iframe>
+        */
+        .splitpane_shim {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: transparent;
+        }
+      `}</style>
+    </div>
+  );
+});
 
-  componentWillUnmount() {
-    // ensure drag end
-    if (this.dragging) {
-      this.onDragEnd();
-    }
-  }
-}
+SplitPane.displayName = 'SplitPane';
+
+export default SplitPane;

lib/components/style-sheet.tsx

@@ -1,24 +1,31 @@
-import React from 'react';
-import {StyleSheetProps} from '../hyper';
+import React, {forwardRef} from 'react';
 
-export default class StyleSheet extends React.PureComponent<StyleSheetProps> {
-  render() {
-    const {borderColor} = this.props;
+import {useDevicePixelRatio} from 'use-device-pixel-ratio';
 
-    return (
-      <style jsx global>{`
-        ::-webkit-scrollbar {
-          width: 5px;
-        }
-        ::-webkit-scrollbar-thumb {
-          -webkit-border-radius: 10px;
-          border-radius: 10px;
-          background: ${borderColor};
-        }
-        ::-webkit-scrollbar-thumb:window-inactive {
-          background: ${borderColor};
-        }
-      `}</style>
-    );
-  }
-}
+import type {StyleSheetProps} from '../../typings/hyper';
+
+const StyleSheet = forwardRef<HTMLStyleElement, StyleSheetProps>((props, ref) => {
+  const {borderColor} = props;
+
+  const dpr = useDevicePixelRatio();
+
+  return (
+    <style jsx global ref={ref}>{`
+      ::-webkit-scrollbar {
+        width: ${5 * dpr}px;
+      }
+      ::-webkit-scrollbar-thumb {
+        -webkit-border-radius: 10px;
+        border-radius: 10px;
+        background: ${borderColor};
+      }
+      ::-webkit-scrollbar-thumb:window-inactive {
+        background: ${borderColor};
+      }
+    `}</style>
+  );
+});
+
+StyleSheet.displayName = 'StyleSheet';
+
+export default StyleSheet;

lib/components/tab.tsx

@@ -1,164 +1,179 @@
-import React from 'react';
-import {TabProps} from '../hyper';
+import React, {useEffect, useRef} from 'react';
 
-export default class Tab extends React.PureComponent<TabProps> {
-  constructor(props: TabProps) {
-    super(props);
-  }
+import type {TabProps} from '../../typings/hyper';
 
-  handleClick = (event: React.MouseEvent) => {
+const Tab = (props: TabProps) => {
+  const handleClick = (event: React.MouseEvent) => {
     const isLeftClick = event.nativeEvent.which === 1;
 
-    if (isLeftClick && !this.props.isActive) {
-      this.props.onSelect();
+    if (isLeftClick && !props.isActive) {
+      props.onSelect();
     }
   };
 
-  handleMouseUp = (event: React.MouseEvent) => {
+  const handleMouseUp = (event: React.MouseEvent) => {
     const isMiddleClick = event.nativeEvent.which === 2;
 
     if (isMiddleClick) {
-      this.props.onClose();
+      props.onClose();
     }
   };
 
-  render() {
-    const {isActive, isFirst, isLast, borderColor, hasActivity} = this.props;
+  const ref = useRef<HTMLLIElement>(null);
 
-    return (
-      <React.Fragment>
-        <li
-          onClick={this.props.onClick}
-          style={{borderColor}}
-          className={`tab_tab ${isFirst ? 'tab_first' : ''} ${isActive ? 'tab_active' : ''} ${
-            isFirst && isActive ? 'tab_firstActive' : ''
-          } ${hasActivity ? 'tab_hasActivity' : ''}`}
+  useEffect(() => {
+    if (props.lastFocused) {
+      ref?.current?.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }, [props.lastFocused]);
+
+  const {isActive, isFirst, isLast, borderColor, hasActivity} = props;
+
+  return (
+    <>
+      <li
+        onClick={props.onClick}
+        style={{borderColor}}
+        className={`tab_tab ${isFirst ? 'tab_first' : ''} ${isActive ? 'tab_active' : ''} ${
+          isFirst && isActive ? 'tab_firstActive' : ''
+        } ${hasActivity ? 'tab_hasActivity' : ''}`}
+        ref={ref}
+      >
+        {props.customChildrenBefore}
+        <span
+          className={`tab_text ${isLast ? 'tab_textLast' : ''} ${isActive ? 'tab_textActive' : ''}`}
+          onClick={handleClick}
+          onMouseUp={handleMouseUp}
         >
-          {this.props.customChildrenBefore}
-          <span
-            className={`tab_text ${isLast ? 'tab_textLast' : ''} ${isActive ? 'tab_textActive' : ''}`}
-            onClick={this.handleClick}
-            onMouseUp={this.handleMouseUp}
-          >
-            <span title={this.props.text} className="tab_textInner">
-              {this.props.text}
-            </span>
+          <span title={props.text} className="tab_textInner">
+            {props.text}
           </span>
-          <i className="tab_icon" onClick={this.props.onClose}>
-            <svg className="tab_shape">
-              <use xlinkHref="./renderer/assets/icons.svg#close-tab" />
-            </svg>
-          </i>
-          {this.props.customChildren}
-        </li>
+        </span>
+        <i className="tab_icon" onClick={props.onClose}>
+          <svg className="tab_shape">
+            <use xlinkHref="./renderer/assets/icons.svg#close-tab" />
+          </svg>
+        </i>
+        {props.customChildren}
+      </li>
 
-        <style jsx>{`
-          .tab_tab {
-            color: #ccc;
-            border-color: #ccc;
-            border-bottom-width: 1px;
-            border-bottom-style: solid;
-            border-left-width: 1px;
-            border-left-style: solid;
-            list-style-type: none;
-            flex-grow: 1;
-            position: relative;
-          }
+      <style jsx>{`
+        .tab_tab {
+          color: #ccc;
+          border-color: #ccc;
+          border-bottom-width: 1px;
+          border-bottom-style: solid;
+          border-left-width: 1px;
+          border-left-style: solid;
+          list-style-type: none;
+          flex-grow: 1;
+          position: relative;
+          min-width: 10em;
+        }
 
-          .tab_tab:hover {
-            color: #ccc;
-          }
+        .tab_tab:hover {
+          color: #ccc;
+        }
 
-          .tab_first {
-            border-left-width: 0;
-            padding-left: 1px;
-          }
+        .tab_first {
+          border-left-width: 0;
+          padding-left: 1px;
+        }
 
-          .tab_firstActive {
-            border-left-width: 1px;
-            padding-left: 0;
-          }
+        .tab_firstActive {
+          border-left-width: 1px;
+          padding-left: 0;
+        }
 
-          .tab_active {
-            color: #fff;
-            border-bottom-width: 0;
-          }
-          .tab_active:hover {
-            color: #fff;
-          }
+        .tab_active {
+          color: #fff;
+          border-bottom-width: 0;
+        }
+        .tab_active:hover {
+          color: #fff;
+        }
 
-          .tab_hasActivity {
-            color: #50e3c2;
-          }
+        .tab_hasActivity {
+          color: #50e3c2;
+        }
 
-          .tab_hasActivity:hover {
-            color: #50e3c2;
-          }
+        .tab_hasActivity:hover {
+          color: #50e3c2;
+        }
 
-          .tab_text {
-            transition: color 0.2s ease;
-            height: 34px;
-            display: block;
-            width: 100%;
-            position: relative;
-            overflow: hidden;
-          }
+        .tab_text {
+          transition: color 0.2s ease;
+          height: 34px;
+          display: block;
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+        }
 
-          .tab_textInner {
-            position: absolute;
-            left: 24px;
-            right: 24px;
-            top: 0;
-            bottom: 0;
-            text-align: center;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
+        .tab_textInner {
+          position: absolute;
+          left: 24px;
+          right: 24px;
+          top: 0;
+          bottom: 0;
+          text-align: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
 
-          .tab_icon {
-            transition: opacity 0.2s ease, color 0.2s ease, transform 0.25s ease, background-color 0.1s ease;
-            pointer-events: none;
-            position: absolute;
-            right: 7px;
-            top: 10px;
-            display: inline-block;
-            width: 14px;
-            height: 14px;
-            border-radius: 100%;
-            color: #e9e9e9;
-            opacity: 0;
-            transform: scale(0.95);
-          }
+        .tab_icon {
+          transition:
+            opacity 0.2s ease,
+            color 0.2s ease,
+            transform 0.25s ease,
+            background-color 0.1s ease;
+          pointer-events: none;
+          position: absolute;
+          right: 7px;
+          top: 10px;
+          display: inline-block;
+          width: 14px;
+          height: 14px;
+          border-radius: 100%;
+          color: #e9e9e9;
+          opacity: 0;
+          transform: scale(0.95);
+        }
 
-          .tab_icon:hover {
-            background-color: rgba(255, 255, 255, 0.13);
-            color: #fff;
-          }
+        .tab_icon:hover {
+          background-color: rgba(255, 255, 255, 0.13);
+          color: #fff;
+        }
 
-          .tab_icon:active {
-            background-color: rgba(255, 255, 255, 0.1);
-            color: #909090;
-          }
+        .tab_icon:active {
+          background-color: rgba(255, 255, 255, 0.1);
+          color: #909090;
+        }
 
-          .tab_tab:hover .tab_icon {
-            opacity: 1;
-            transform: none;
-            pointer-events: all;
-          }
+        .tab_tab:hover .tab_icon {
+          opacity: 1;
+          transform: none;
+          pointer-events: all;
+        }
 
-          .tab_shape {
-            position: absolute;
-            left: 4px;
-            top: 4px;
-            width: 6px;
-            height: 6px;
-            vertical-align: middle;
-            fill: currentColor;
-            shape-rendering: crispEdges;
-          }
-        `}</style>
-      </React.Fragment>
-    );
-  }
-}
+        .tab_shape {
+          position: absolute;
+          left: 4px;
+          top: 4px;
+          width: 6px;
+          height: 6px;
+          vertical-align: middle;
+          fill: currentColor;
+          shape-rendering: crispEdges;
+        }
+      `}</style>
+    </>
+  );
+};
+
+Tab.displayName = 'Tab';
+
+export default Tab;

lib/components/tabs.tsx

@@ -1,105 +1,142 @@
-import React from 'react';
+import React, {forwardRef, useEffect, useState} from 'react';
 
+import debounce from 'lodash/debounce';
+
+import type {ITab, TabsProps} from '../../typings/hyper';
 import {decorate, getTabProps} from '../utils/plugins';
 
+import DropdownButton from './new-tab';
 import Tab_ from './tab';
-import {TabsProps} from '../hyper';
 
 const Tab = decorate(Tab_, 'Tab');
 const isMac = /Mac/.test(navigator.userAgent);
 
-export default class Tabs extends React.PureComponent<TabsProps> {
-  render() {
-    const {tabs = [], borderColor, onChange, onClose, fullScreen} = this.props;
+const Tabs = forwardRef<HTMLElement, TabsProps>((props, ref) => {
+  const {tabs = [], borderColor, onChange, onClose, fullScreen} = props;
 
-    const hide = !isMac && tabs.length === 1;
+  const [shouldFocusCounter, setShouldFocusCounter] = useState({
+    index: 0,
+    when: undefined as Date | undefined
+  });
 
-    return (
-      <nav className={`tabs_nav ${hide ? 'tabs_hiddenNav' : ''}`}>
-        {this.props.customChildrenBefore}
-        {tabs.length === 1 && isMac ? <div className="tabs_title">{tabs[0].title}</div> : null}
-        {tabs.length > 1
-          ? [
-              <ul key="list" className={`tabs_list ${fullScreen && isMac ? 'tabs_fullScreen' : ''}`}>
-                {tabs.map((tab, i) => {
-                  const {uid, title, isActive, hasActivity} = tab;
-                  const props = getTabProps(tab, this.props, {
-                    text: title === '' ? 'Shell' : title,
-                    isFirst: i === 0,
-                    isLast: tabs.length - 1 === i,
-                    borderColor,
-                    isActive,
-                    hasActivity,
-                    onSelect: onChange.bind(null, uid),
-                    onClose: onClose.bind(null, uid)
-                  });
-                  return <Tab key={`tab-${uid}`} {...props} />;
-                })}
-              </ul>,
-              isMac && (
-                <div
-                  key="shim"
-                  style={{borderColor}}
-                  className={`tabs_borderShim ${fullScreen ? 'tabs_borderShimUndo' : ''}`}
-                />
-              )
-            ]
-          : null}
-        {this.props.customChildren}
+  const scrollToActiveTab = debounce((currTabs: ITab[]) => {
+    const activeTab = currTabs.findIndex((t) => t.isActive);
+    setShouldFocusCounter({
+      index: activeTab,
+      when: new Date()
+    });
+  }, 100);
 
-        <style jsx>{`
-          .tabs_nav {
-            font-size: 12px;
-            height: 34px;
-            line-height: 34px;
-            vertical-align: middle;
-            color: #9b9b9b;
-            cursor: default;
-            position: relative;
-            -webkit-user-select: none;
-            -webkit-app-region: ${isMac ? 'drag' : ''};
-            top: ${isMac ? '0px' : '34px'};
-          }
+  useEffect(() => {
+    scrollToActiveTab(tabs);
+  }, [tabs, tabs.length]);
 
-          .tabs_hiddenNav {
-            display: none;
-          }
+  const hide = !isMac && tabs.length === 1;
 
-          .tabs_title {
-            text-align: center;
-            color: #fff;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            padding-left: 76px;
-            padding-right: 76px;
-          }
+  return (
+    <nav className={`tabs_nav ${hide ? 'tabs_hiddenNav' : ''}`} ref={ref}>
+      {props.customChildrenBefore}
+      {tabs.length === 1 && isMac ? <div className="tabs_title">{tabs[0].title}</div> : null}
+      {tabs.length > 1 ? (
+        <>
+          <ul key="list" className={`tabs_list ${fullScreen && isMac ? 'tabs_fullScreen' : ''}`}>
+            {tabs.map((tab, i) => {
+              const {uid, title, isActive, hasActivity} = tab;
+              const tabProps = getTabProps(tab, props, {
+                text: title === '' ? 'Shell' : title,
+                isFirst: i === 0,
+                isLast: tabs.length - 1 === i,
+                borderColor,
+                isActive,
+                hasActivity,
+                onSelect: onChange.bind(null, uid),
+                onClose: onClose.bind(null, uid),
+                lastFocused: undefined as Date | undefined
+              });
+              if (shouldFocusCounter.index === i) {
+                tabProps.lastFocused = shouldFocusCounter.when;
+              }
+              return <Tab key={`tab-${uid}`} {...tabProps} />;
+            })}
+          </ul>
+          {isMac && (
+            <div
+              key="shim"
+              style={{borderColor}}
+              className={`tabs_borderShim ${fullScreen ? 'tabs_borderShimUndo' : ''}`}
+            />
+          )}
+        </>
+      ) : null}
+      <DropdownButton {...props} tabsVisible={tabs.length > 1} />
+      {props.customChildren}
 
-          .tabs_list {
-            max-height: 34px;
-            display: flex;
-            flex-flow: row;
-            margin-left: ${isMac ? '76px' : '0'};
-          }
+      <style jsx>{`
+        .tabs_nav {
+          font-size: 12px;
+          height: 34px;
+          line-height: 34px;
+          vertical-align: middle;
+          color: #9b9b9b;
+          cursor: default;
+          position: relative;
+          -webkit-user-select: none;
+          -webkit-app-region: ${isMac ? 'drag' : ''};
+          top: ${isMac ? '0px' : '34px'};
+          display: flex;
+          flex-flow: row;
+        }
 
-          .tabs_fullScreen {
-            margin-left: -1px;
-          }
+        .tabs_hiddenNav {
+          display: none;
+        }
 
-          .tabs_borderShim {
-            position: absolute;
-            width: 76px;
-            bottom: 0;
-            border-color: #ccc;
-            border-bottom-style: solid;
-            border-bottom-width: 1px;
-          }
+        .tabs_title {
+          text-align: center;
+          color: #fff;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          padding-left: 76px;
+          padding-right: 76px;
+          flex-grow: 1;
+        }
 
-          .tabs_borderShimUndo {
-            border-bottom-width: 0px;
-          }
-        `}</style>
-      </nav>
-    );
-  }
-}
+        .tabs_list {
+          max-height: 34px;
+          display: flex;
+          flex-flow: row;
+          margin-left: ${isMac ? '76px' : '0'};
+          flex-grow: 1;
+          overflow-x: auto;
+        }
+
+        .tabs_list::-webkit-scrollbar,
+        .tabs_list::-webkit-scrollbar-button {
+          display: none;
+        }
+
+        .tabs_fullScreen {
+          margin-left: -1px;
+        }
+
+        .tabs_borderShim {
+          position: absolute;
+          width: 76px;
+          bottom: 0;
+          border-color: #ccc;
+          border-bottom-style: solid;
+          border-bottom-width: 1px;
+        }
+
+        .tabs_borderShimUndo {
+          border-bottom-width: 0px;
+        }
+      `}</style>
+    </nav>
+  );
+});
+
+Tabs.displayName = 'Tabs';
+
+export default Tabs;

lib/components/term-group.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
+
 import {connect} from 'react-redux';
-import {decorate, getTermProps, getTermGroupProps} from '../utils/plugins';
+
+import type {HyperState, HyperDispatch, TermGroupProps, TermGroupOwnProps} from '../../typings/hyper';
 import {resizeTermGroup} from '../actions/term-groups';
-import Term_ from './term';
+import {decorate, getTermProps, getTermGroupProps} from '../utils/plugins';
+
 import SplitPane_ from './split-pane';
-import {HyperState, HyperDispatch, TermGroupProps, TermGroupOwnProps} from '../hyper';
+import Term_ from './term';
 
 const Term = decorate(Term_, 'Term');
 const SplitPane = decorate(SplitPane_, 'SplitPane');
@@ -82,7 +85,6 @@ class TermGroup_ extends React.PureComponent<TermGroupProps> {
       letterSpacing: this.props.letterSpacing,
       modifierKeys: this.props.modifierKeys,
       padding: this.props.padding,
-      url: session.url,
       cleared: session.cleared,
       search: session.search,
       cols: session.cols,
@@ -106,6 +108,8 @@ class TermGroup_ extends React.PureComponent<TermGroupProps> {
       macOptionSelectionMode: this.props.macOptionSelectionMode,
       disableLigatures: this.props.disableLigatures,
       screenReaderMode: this.props.screenReaderMode,
+      windowsPty: this.props.windowsPty,
+      imageSupport: this.props.imageSupport,
       uid
     });
 

lib/components/term.tsx

@@ -1,24 +1,33 @@
-import React from 'react';
-import {Terminal, ITerminalOptions, IDisposable} from 'xterm';
-import {FitAddon} from 'xterm-addon-fit';
-import {WebLinksAddon} from 'xterm-addon-web-links';
-import {SearchAddon, ISearchDecorationOptions} from 'xterm-addon-search';
-import {WebglAddon} from 'xterm-addon-webgl';
-import {LigaturesAddon} from 'xterm-addon-ligatures';
-import {Unicode11Addon} from 'xterm-addon-unicode11';
 import {clipboard, shell} from 'electron';
+import React from 'react';
+
+import {CanvasAddon} from '@xterm/addon-canvas';
+import {FitAddon} from '@xterm/addon-fit';
+import {ImageAddon} from '@xterm/addon-image';
+import {LigaturesAddon} from '@xterm/addon-ligatures';
+import {SearchAddon} from '@xterm/addon-search';
+import type {ISearchDecorationOptions} from '@xterm/addon-search';
+import {Unicode11Addon} from '@xterm/addon-unicode11';
+import {WebLinksAddon} from '@xterm/addon-web-links';
+import {WebglAddon} from '@xterm/addon-webgl';
+import {Terminal} from '@xterm/xterm';
+import type {ITerminalOptions, IDisposable} from '@xterm/xterm';
 import Color from 'color';
+import isEqual from 'lodash/isEqual';
+import pickBy from 'lodash/pickBy';
+
+import type {TermProps} from '../../typings/hyper';
 import terms from '../terms';
 import processClipboard from '../utils/paste';
-import _SearchBox from './searchBox';
-import {TermProps} from '../hyper';
-import {ObjectTypedKeys} from '../utils/object';
 import {decorate} from '../utils/plugins';
-import 'xterm/css/xterm.css';
+
+import _SearchBox from './searchBox';
+
+import '@xterm/xterm/css/xterm.css';
 
 const SearchBox = decorate(_SearchBox, 'SearchBox');
 
-const isWindows = ['Windows', 'Win16', 'Win32', 'WinCE'].includes(navigator.platform);
+const isWindows = ['Windows', 'Win16', 'Win32', 'WinCE'].includes(navigator.platform) || process.platform === 'win32';
 
 // map old hterm constants to xterm.js
 const CURSOR_STYLES = {
@@ -42,7 +51,7 @@ const isWebgl2Supported = (() => {
 const getTermOptions = (props: TermProps): ITerminalOptions => {
   // Set a background color only if it is opaque
   const needTransparency = Color(props.backgroundColor).alpha() < 1;
-  const backgroundColor = needTransparency ? 'transparent' : props.backgroundColor;
+  const backgroundColor = needTransparency ? 'rgba(0,0,0,0)' : props.backgroundColor;
 
   return {
     macOptionIsMeta: props.modifierKeys.altIsMeta,
@@ -57,14 +66,14 @@ const getTermOptions = (props: TermProps): ITerminalOptions => {
     letterSpacing: props.letterSpacing,
     allowTransparency: needTransparency,
     macOptionClickForcesSelection: props.macOptionSelectionMode === 'force',
-    bellStyle: props.bell === 'SOUND' ? 'sound' : 'none',
     windowsMode: isWindows,
+    ...(isWindows && props.windowsPty && {windowsPty: props.windowsPty}),
     theme: {
       foreground: props.foregroundColor,
       background: backgroundColor,
       cursor: props.cursorColor,
       cursorAccent: props.cursorAccentColor,
-      selection: props.selectionColor,
+      selectionBackground: props.selectionColor,
       black: props.colors.black,
       red: props.colors.red,
       green: props.colors.green,
@@ -83,7 +92,8 @@ const getTermOptions = (props: TermProps): ITerminalOptions => {
       brightWhite: props.colors.lightWhite
     },
     screenReaderMode: props.screenReaderMode,
-    overviewRulerWidth: 20
+    overviewRulerWidth: 20,
+    allowProposedApi: true
   };
 };
 
@@ -107,7 +117,8 @@ export default class Term extends React.PureComponent<
   termWrapperRef: HTMLElement | null;
   termOptions: ITerminalOptions;
   disposableListeners: IDisposable[];
-  termDefaultBellSound: string | null;
+  defaultBellSound: HTMLAudioElement | null;
+  bellSound: HTMLAudioElement | null;
   fitAddon: FitAddon;
   searchAddon: SearchAddon;
   static rendererTypes: Record<string, string>;
@@ -131,7 +142,8 @@ export default class Term extends React.PureComponent<
     this.termWrapperRef = null;
     this.termOptions = {};
     this.disposableListeners = [];
-    this.termDefaultBellSound = null;
+    this.defaultBellSound = null;
+    this.bellSound = null;
     this.fitAddon = new FitAddon();
     this.searchAddon = new SearchAddon();
     this.searchDecorations = {
@@ -158,7 +170,14 @@ export default class Term extends React.PureComponent<
 
     this.termOptions = getTermOptions(props);
     this.term = props.term || new Terminal(this.termOptions);
-    this.termDefaultBellSound = this.term.getOption('bellSound');
+    this.defaultBellSound = new Audio(
+      // Source: https://freesound.org/people/altemark/sounds/45759/
+      // This sound is released under the Creative Commons Attribution 3.0 Unported
+      // (CC BY 3.0) license. It was created by 'altemark'. No modifications have been
+      // made, apart from the conversion to base64.
+      'data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4LjMyLjEwNAAAAAAAAAAAAAAA//tQxAADB8AhSmxhIIEVCSiJrDCQBTcu3UrAIwUdkRgQbFAZC1CQEwTJ9mjRvBA4UOLD8nKVOWfh+UlK3z/177OXrfOdKl7pyn3Xf//WreyTRUoAWgBgkOAGbZHBgG1OF6zM82DWbZaUmMBptgQhGjsyYqc9ae9XFz280948NMBWInljyzsNRFLPWdnZGWrddDsjK1unuSrVN9jJsK8KuQtQCtMBjCEtImISdNKJOopIpBFpNSMbIHCSRpRR5iakjTiyzLhchUUBwCgyKiweBv/7UsQbg8isVNoMPMjAAAA0gAAABEVFGmgqK////9bP/6XCykxBTUUzLjEwMKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq'
+    );
+    this.setBellSound(props.bell, props.bellSound);
 
     // The parent element for the terminal is attached and removed manually so
     // that we can preserve it across mounts and unmounts of the component
@@ -186,9 +205,9 @@ export default class Term extends React.PureComponent<
       }
       Term.reportRenderer(props.uid, useWebGL ? 'WebGL' : 'Canvas');
 
-      const shallActivateWebLink = (event: Record<string, any> | undefined): boolean => {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        return event && (!props.webLinksActivationKey || event[`${props.webLinksActivationKey}Key`]);
+      const shallActivateWebLink = (event: MouseEvent): boolean => {
+        if (!event) return false;
+        return props.webLinksActivationKey ? event[`${props.webLinksActivationKey}Key`] : true;
       };
 
       // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -196,29 +215,34 @@ export default class Term extends React.PureComponent<
       this.term.loadAddon(this.fitAddon);
       this.term.loadAddon(this.searchAddon);
       this.term.loadAddon(
-        new WebLinksAddon(
-          (event: MouseEvent | undefined, uri: string) => {
-            if (shallActivateWebLink(event)) void shell.openExternal(uri);
-          },
-          {
-            // prevent default electron link handling to allow selection, e.g. via double-click
-            willLinkActivate: (event: MouseEvent | undefined) => {
-              event?.preventDefault();
-              return shallActivateWebLink(event);
-            },
-            priority: Date.now()
-          }
-        )
+        new WebLinksAddon((event, uri) => {
+          if (shallActivateWebLink(event)) void shell.openExternal(uri);
+        })
       );
       this.term.open(this.termRef);
+
       if (useWebGL) {
-        this.term.loadAddon(new WebglAddon());
+        const webglAddon = new WebglAddon();
+        this.term.loadAddon(webglAddon);
+        webglAddon.onContextLoss(() => {
+          console.warn('WebGL context lost. Falling back to canvas-based rendering.');
+          webglAddon.dispose();
+          this.term.loadAddon(new CanvasAddon());
+        });
+      } else {
+        this.term.loadAddon(new CanvasAddon());
       }
+
       if (props.disableLigatures !== true && !useWebGL) {
         this.term.loadAddon(new LigaturesAddon());
       }
+
       this.term.loadAddon(new Unicode11Addon());
       this.term.unicode.activeVersion = '11';
+
+      if (props.imageSupport) {
+        this.term.loadAddon(new ImageAddon());
+      }
     } else {
       // get the cached plugins
       this.fitAddon = props.fitAddon!;
@@ -252,6 +276,10 @@ export default class Term extends React.PureComponent<
       this.disposableListeners.push(this.term.onData(props.onData));
     }
 
+    this.term.onBell(() => {
+      this.ringBell();
+    });
+
     if (props.onResize) {
       this.disposableListeners.push(
         this.term.onResize(({cols, rows}) => {
@@ -393,6 +421,18 @@ export default class Term extends React.PureComponent<
     return !e.catched;
   }
 
+  setBellSound(bell: 'SOUND' | false, sound: string | null) {
+    if (bell && bell.toUpperCase() === 'SOUND') {
+      this.bellSound = sound ? new Audio(sound) : this.defaultBellSound;
+    } else {
+      this.bellSound = null;
+    }
+  }
+
+  ringBell() {
+    void this.bellSound?.play();
+  }
+
   componentDidUpdate(prevProps: TermProps) {
     if (!prevProps.cleared && this.props.cleared) {
       this.clear();
@@ -400,40 +440,19 @@ export default class Term extends React.PureComponent<
 
     const nextTermOptions = getTermOptions(this.props);
 
-    // Use bellSound in nextProps if it exists
-    // otherwise use the default sound found in xterm.
-    nextTermOptions.bellSound = this.props.bellSound || this.termDefaultBellSound!;
+    if (prevProps.bell !== this.props.bell || prevProps.bellSound !== this.props.bellSound) {
+      this.setBellSound(this.props.bell, this.props.bellSound);
+    }
 
     if (prevProps.search && !this.props.search) {
       this.closeSearchBox();
     }
 
     // Update only options that have changed.
-    ObjectTypedKeys(nextTermOptions)
-      .filter((option) => option !== 'theme' && nextTermOptions[option] !== this.termOptions[option])
-      .forEach((option) => {
-        try {
-          this.term.setOption(option, nextTermOptions[option]);
-        } catch (_e) {
-          const e = _e as {message: string};
-          if (/The webgl renderer only works with the webgl char atlas/i.test(e.message)) {
-            // Ignore this because the char atlas will also be changed
-          } else {
-            throw e;
-          }
-        }
-      });
-
-    // Do we need to update theme?
-    const shouldUpdateTheme =
-      !this.termOptions.theme ||
-      nextTermOptions.rendererType !== this.termOptions.rendererType ||
-      ObjectTypedKeys(nextTermOptions.theme!).some(
-        (option) => nextTermOptions.theme![option] !== this.termOptions.theme![option]
-      );
-    if (shouldUpdateTheme) {
-      this.term.setOption('theme', nextTermOptions.theme);
-    }
+    this.term.options = pickBy(
+      nextTermOptions,
+      (value, key) => !isEqual(this.termOptions[key as keyof ITerminalOptions], value)
+    );
 
     this.termOptions = nextTermOptions;
 
@@ -499,6 +518,7 @@ export default class Term extends React.PureComponent<
         {this.props.customChildren}
         {this.props.search ? (
           <SearchBox
+            dateFocused={this.props.search}
             next={this.searchNext}
             prev={this.searchPrevious}
             close={this.closeSearchBox}

lib/components/terms.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
-import {decorate, getTermGroupProps} from '../utils/plugins';
+
+import type {TermsProps, HyperDispatch} from '../../typings/hyper';
 import {registerCommandHandlers} from '../command-registry';
-import TermGroup_ from './term-group';
-import StyleSheet_ from './style-sheet';
-import {TermsProps, HyperDispatch} from '../hyper';
-import Term from './term';
 import {ObjectTypedKeys} from '../utils/object';
+import {decorate, getTermGroupProps} from '../utils/plugins';
+
+import StyleSheet_ from './style-sheet';
+import type Term from './term';
+import TermGroup_ from './term-group';
 
 const TermGroup = decorate(TermGroup_, 'TermGroup');
 const StyleSheet = decorate(StyleSheet_, 'StyleSheet');
 
 const isMac = /Mac/.test(navigator.userAgent);
 
-export default class Terms extends React.Component<TermsProps> {
+export default class Terms extends React.Component<React.PropsWithChildren<TermsProps>> {
   terms: Record<string, Term>;
   registerCommands: (cmds: Record<string, (e: any, dispatch: HyperDispatch) => void>) => void;
   constructor(props: TermsProps, context: any) {
@@ -119,6 +121,8 @@ export default class Terms extends React.Component<TermsProps> {
             macOptionSelectionMode: this.props.macOptionSelectionMode,
             disableLigatures: this.props.disableLigatures,
             screenReaderMode: this.props.screenReaderMode,
+            windowsPty: this.props.windowsPty,
+            imageSupport: this.props.imageSupport,
             parentProps: this.props
           });
 

lib/containers/header.ts

@@ -1,10 +1,11 @@
 import {createSelector} from 'reselect';
 
-import Header from '../components/header';
+import type {HyperState, HyperDispatch, ITab} from '../../typings/hyper';
 import {closeTab, changeTab, maximize, openHamburgerMenu, unmaximize, minimize, close} from '../actions/header';
-import {connect} from '../utils/plugins';
+import {requestTermGroup} from '../actions/term-groups';
+import Header from '../components/header';
 import {getRootGroups} from '../selectors';
-import {HyperState, HyperDispatch, ITab} from '../hyper';
+import {connect} from '../utils/plugins';
 
 const isMac = /Mac/.test(navigator.userAgent);
 
@@ -38,7 +39,9 @@ const mapStateToProps = (state: HyperState) => {
     maximized: state.ui.maximized,
     fullScreen: state.ui.fullScreen,
     showHamburgerMenu: state.ui.showHamburgerMenu,
-    showWindowControls: state.ui.showWindowControls
+    showWindowControls: state.ui.showWindowControls,
+    defaultProfile: state.ui.defaultProfile,
+    profiles: state.ui.profiles
   };
 };
 
@@ -70,6 +73,10 @@ const mapDispatchToProps = (dispatch: HyperDispatch) => {
 
     close: () => {
       dispatch(close());
+    },
+
+    openNewTab: (profile: string) => {
+      dispatch(requestTermGroup(undefined, profile));
     }
   };
 };

lib/containers/hyper.tsx

@@ -1,149 +1,142 @@
-import React from 'react';
-import Mousetrap, {MousetrapInstance} from 'mousetrap';
+import React, {forwardRef, useEffect, useRef} from 'react';
 
-import {connect} from '../utils/plugins';
-import * as uiActions from '../actions/ui';
-import {getRegisteredKeys, getCommandHandler, shouldPreventDefault} from '../command-registry';
+import Mousetrap from 'mousetrap';
+import type {MousetrapInstance} from 'mousetrap';
 import stylis from 'stylis';
 
+import type {HyperState, HyperProps, HyperDispatch} from '../../typings/hyper';
+import * as uiActions from '../actions/ui';
+import {getRegisteredKeys, getCommandHandler, shouldPreventDefault} from '../command-registry';
+import type Terms from '../components/terms';
+import {connect} from '../utils/plugins';
+
 import {HeaderContainer} from './header';
-import TermsContainer from './terms';
 import NotificationsContainer from './notifications';
-import {HyperState, HyperProps, HyperDispatch} from '../hyper';
-import Terms from '../components/terms';
+import TermsContainer from './terms';
 
 const isMac = /Mac/.test(navigator.userAgent);
 
-class Hyper extends React.PureComponent<HyperProps> {
-  mousetrap!: MousetrapInstance;
-  terms!: Terms;
-  constructor(props: HyperProps) {
-    super(props);
-  }
+const Hyper = forwardRef<HTMLDivElement, HyperProps>((props, ref) => {
+  const mousetrap = useRef<MousetrapInstance | null>(null);
+  const terms = useRef<Terms | null>(null);
 
-  componentDidUpdate(prev: HyperProps) {
-    if (this.props.backgroundColor !== prev.backgroundColor) {
-      // this can be removed when `setBackgroundColor` in electron
-      // starts working again
-      document.body.style.backgroundColor = this.props.backgroundColor;
-    }
-    const {lastConfigUpdate} = this.props;
-    if (lastConfigUpdate && lastConfigUpdate !== prev.lastConfigUpdate) {
-      this.attachKeyListeners();
-    }
-    if (prev.activeSession !== this.props.activeSession) {
-      this.handleFocusActive(this.props.activeSession!);
-    }
-  }
+  useEffect(() => {
+    void attachKeyListeners();
+  }, [props.lastConfigUpdate]);
+  useEffect(() => {
+    handleFocusActive(props.activeSession);
+  }, [props.activeSession]);
 
-  handleFocusActive = (uid?: string) => {
-    const term = uid && this.terms.getTermByUid(uid);
+  const handleFocusActive = (uid?: string | null) => {
+    const term = uid && terms.current?.getTermByUid(uid);
     if (term) {
       term.focus();
     }
   };
 
-  handleSelectAll = () => {
-    const term = this.terms.getActiveTerm();
+  const handleSelectAll = () => {
+    const term = terms.current?.getActiveTerm();
     if (term) {
       term.selectAll();
     }
   };
 
-  attachKeyListeners() {
-    if (!this.mousetrap) {
+  const attachKeyListeners = async () => {
+    if (!mousetrap.current) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      this.mousetrap = new (Mousetrap as any)(window, true);
-      this.mousetrap.stopCallback = () => {
+      mousetrap.current = new (Mousetrap as any)(window, true);
+      mousetrap.current!.stopCallback = () => {
         // All events should be intercepted even if focus is in an input/textarea
         return false;
       };
     } else {
-      this.mousetrap.reset();
+      mousetrap.current.reset();
     }
 
-    const keys = getRegisteredKeys();
+    const keys = await getRegisteredKeys();
     Object.keys(keys).forEach((commandKeys) => {
-      this.mousetrap.bind(
+      mousetrap.current?.bind(
         commandKeys,
         (e) => {
           const command = keys[commandKeys];
-          // We should tell to xterm that it should ignore this event.
+          // We should tell xterm to ignore this event.
           (e as any).catched = true;
-          this.props.execCommand(command, getCommandHandler(command), e);
+          props.execCommand(command, getCommandHandler(command), e);
           shouldPreventDefault(command) && e.preventDefault();
         },
         'keydown'
       );
     });
-  }
+  };
 
-  componentDidMount() {
-    this.attachKeyListeners();
-    window.rpc.on('term selectAll', this.handleSelectAll);
-  }
+  useEffect(() => {
+    void attachKeyListeners();
+    window.rpc.on('term selectAll', handleSelectAll);
+  }, []);
 
-  onTermsRef = (terms: Terms) => {
-    this.terms = terms;
+  const onTermsRef = (_terms: Terms | null) => {
+    terms.current = _terms;
     window.focusActiveTerm = (uid?: string) => {
       if (uid) {
-        this.handleFocusActive(uid);
+        handleFocusActive(uid);
       } else {
-        this.terms.getActiveTerm().focus();
+        terms.current?.getActiveTerm()?.focus();
       }
     };
   };
 
-  componentWillUnmount() {
-    document.body.style.backgroundColor = 'inherit';
-    this.mousetrap?.reset();
-  }
+  useEffect(() => {
+    return () => {
+      mousetrap.current?.reset();
+    };
+  }, []);
 
-  render() {
-    const {isMac: isMac_, customCSS, uiFontFamily, borderColor, maximized, fullScreen} = this.props;
-    const borderWidth = isMac_ ? '' : `${maximized ? '0' : '1'}px`;
-    stylis.set({prefix: false});
-    return (
-      <div id="hyper">
-        <div
-          style={{fontFamily: uiFontFamily, borderColor, borderWidth}}
-          className={`hyper_main ${isMac_ && 'hyper_mainRounded'} ${fullScreen ? 'fullScreen' : ''}`}
-        >
-          <HeaderContainer />
-          <TermsContainer ref_={this.onTermsRef} />
-          {this.props.customInnerChildren}
-        </div>
-
-        <NotificationsContainer />
-
-        {this.props.customChildren}
-
-        <style jsx>
-          {`
-            .hyper_main {
-              position: fixed;
-              top: 0;
-              left: 0;
-              right: 0;
-              bottom: 0;
-              border: 1px solid #333;
-            }
-
-            .hyper_mainRounded {
-              border-radius: 10px;
-            }
-          `}
-        </style>
-
-        {/*
-          Add custom CSS to Hyper.
-          We add a scope to the customCSS so that it can get around the weighting applied by styled-jsx
-        */}
-        <style dangerouslySetInnerHTML={{__html: stylis('#hyper', customCSS)}} />
+  const {isMac: isMac_, customCSS, uiFontFamily, borderColor, maximized, fullScreen} = props;
+  const borderWidth = isMac_ ? '' : `${maximized ? '0' : '1'}px`;
+  stylis.set({prefix: false});
+  return (
+    <div id="hyper" ref={ref}>
+      <div
+        style={{fontFamily: uiFontFamily, borderColor, borderWidth}}
+        className={`hyper_main ${isMac_ && 'hyper_mainRounded'} ${fullScreen ? 'fullScreen' : ''}`}
+      >
+        <HeaderContainer />
+        <TermsContainer ref_={onTermsRef} />
+        {props.customInnerChildren}
       </div>
-    );
-  }
-}
+
+      <NotificationsContainer />
+
+      {props.customChildren}
+
+      <style jsx>
+        {`
+          .hyper_main {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 1px solid #333;
+          }
+
+          .hyper_mainRounded {
+            border-radius: 10.5px;
+            overflow: hidden;
+          }
+        `}
+      </style>
+
+      {/*
+        Add custom CSS to Hyper.
+        We add a scope to the customCSS so that it can get around the weighting applied by styled-jsx
+      */}
+      <style dangerouslySetInnerHTML={{__html: stylis('#hyper', customCSS)}} />
+    </div>
+  );
+});
+
+Hyper.displayName = 'Hyper';
 
 const mapStateToProps = (state: HyperState) => {
   return {

lib/containers/notifications.ts

@@ -1,8 +1,8 @@
-import Notifications from '../components/notifications';
-import {installUpdate} from '../actions/updater';
-import {connect} from '../utils/plugins';
+import type {HyperState, HyperDispatch} from '../../typings/hyper';
 import {dismissNotification} from '../actions/notifications';
-import {HyperState, HyperDispatch} from '../hyper';
+import {installUpdate} from '../actions/updater';
+import Notifications from '../components/notifications';
+import {connect} from '../utils/plugins';
 
 const mapStateToProps = (state: HyperState) => {
   const {ui} = state;

lib/containers/terms.ts

@@ -1,5 +1,4 @@
-import Terms from '../components/terms';
-import {connect} from '../utils/plugins';
+import type {HyperState, HyperDispatch} from '../../typings/hyper';
 import {
   resizeSession,
   sendSessionData,
@@ -8,10 +7,10 @@ import {
   openSearch,
   closeSearch
 } from '../actions/sessions';
-
 import {openContextMenu} from '../actions/ui';
+import Terms from '../components/terms';
 import {getRootGroups} from '../selectors';
-import {HyperState, HyperDispatch} from '../hyper';
+import {connect} from '../utils/plugins';
 
 const mapStateToProps = (state: HyperState) => {
   const {sessions} = state.sessions;
@@ -53,13 +52,15 @@ const mapStateToProps = (state: HyperState) => {
     webLinksActivationKey: state.ui.webLinksActivationKey,
     macOptionSelectionMode: state.ui.macOptionSelectionMode,
     disableLigatures: state.ui.disableLigatures,
-    screenReaderMode: state.ui.screenReaderMode
+    screenReaderMode: state.ui.screenReaderMode,
+    windowsPty: state.ui.windowsPty,
+    imageSupport: state.ui.imageSupport
   };
 };
 
 const mapDispatchToProps = (dispatch: HyperDispatch) => {
   return {
-    onData(uid: string, data: any) {
+    onData(uid: string, data: string) {
       dispatch(sendSessionData(uid, data));
     },
 
@@ -83,7 +84,7 @@ const mapDispatchToProps = (dispatch: HyperDispatch) => {
       dispatch(closeSearch(uid));
     },
 
-    onContextMenu(uid: string, selection: any) {
+    onContextMenu(uid: string, selection: string) {
       dispatch(setActiveSession(uid));
       dispatch(openContextMenu(uid, selection));
     }

lib/ext-modules.d.ts

@@ -1,11 +0,0 @@
-declare module 'php-escape-shell' {
-  export function php_escapeshellcmd(path: string): string;
-}
-
-declare module 'parse-url' {
-  export default function (...args: any[]): any;
-}
-
-declare module 'react-deep-force-update' {
-  export default function (...args: any[]): any;
-}

lib/index.tsx

@@ -1,24 +1,25 @@
 import './v8-snapshot-util';
 import {webFrame} from 'electron';
-import forceUpdate from 'react-deep-force-update';
-import {Provider} from 'react-redux';
 import React from 'react';
-import {render} from 'react-dom';
 
-import rpc from './rpc';
+import {createRoot} from 'react-dom/client';
+import {Provider} from 'react-redux';
+
+import type {configOptions} from '../typings/config';
+
+import {loadConfig, reloadConfig} from './actions/config';
 import init from './actions/index';
-import * as config from './utils/config';
-import * as plugins from './utils/plugins';
-import {getBase64FileData} from './utils/file';
-import * as uiActions from './actions/ui';
-import * as updaterActions from './actions/updater';
+import {addNotificationMessage} from './actions/notifications';
 import * as sessionActions from './actions/sessions';
 import * as termGroupActions from './actions/term-groups';
-import {addNotificationMessage} from './actions/notifications';
-import {loadConfig, reloadConfig} from './actions/config';
+import * as uiActions from './actions/ui';
+import * as updaterActions from './actions/updater';
 import HyperContainer from './containers/hyper';
+import rpc from './rpc';
 import configureStore from './store/configure-store';
-import {configOptions} from './config';
+import * as config from './utils/config';
+import {getBase64FileData} from './utils/file';
+import * as plugins from './utils/plugins';
 
 // On Linux, the default zoom was somehow changed with Electron 3 (or maybe 2).
 // Setting zoom factor to 1.2 brings back the normal default size
@@ -156,16 +157,16 @@ rpc.on('session search close', () => {
   store_.dispatch(sessionActions.closeSearch());
 });
 
-rpc.on('termgroup add req', ({activeUid}) => {
-  store_.dispatch(termGroupActions.requestTermGroup(activeUid));
+rpc.on('termgroup add req', ({activeUid, profile}) => {
+  store_.dispatch(termGroupActions.requestTermGroup(activeUid, profile));
 });
 
-rpc.on('split request horizontal', ({activeUid}) => {
-  store_.dispatch(termGroupActions.requestHorizontalSplit(activeUid));
+rpc.on('split request horizontal', ({activeUid, profile}) => {
+  store_.dispatch(termGroupActions.requestHorizontalSplit(activeUid, profile));
 });
 
-rpc.on('split request vertical', ({activeUid}) => {
-  store_.dispatch(termGroupActions.requestVerticalSplit(activeUid));
+rpc.on('split request vertical', ({activeUid, profile}) => {
+  store_.dispatch(termGroupActions.requestVerticalSplit(activeUid, profile));
 });
 
 rpc.on('reset fontSize req', () => {
@@ -204,8 +205,8 @@ rpc.on('open file', ({path}) => {
   store_.dispatch(uiActions.openFile(path));
 });
 
-rpc.on('open ssh', (url) => {
-  store_.dispatch(uiActions.openSSH(url));
+rpc.on('open ssh', (parsedUrl) => {
+  store_.dispatch(uiActions.openSSH(parsedUrl));
 });
 
 rpc.on('update available', ({releaseName, releaseNotes, releaseUrl, canInstall}) => {
@@ -232,14 +233,14 @@ rpc.on('leave full screen', () => {
   store_.dispatch(uiActions.leaveFullScreen());
 });
 
-const app = render(
+const root = createRoot(document.getElementById('mount')!);
+
+root.render(
   <Provider store={store_}>
     <HyperContainer />
-  </Provider>,
-  document.getElementById('mount')
+  </Provider>
 );
 
 rpc.on('reload', () => {
   plugins.reload();
-  forceUpdate(app);
 });

lib/reducers/index.ts

@@ -1,8 +1,11 @@
-import {combineReducers, Reducer} from 'redux';
-import ui from './ui';
+import {combineReducers} from 'redux';
+import type {Reducer} from 'redux';
+
+import type {HyperActions, HyperState} from '../../typings/hyper';
+
 import sessions from './sessions';
 import termGroups from './term-groups';
-import {HyperActions, HyperState} from '../hyper';
+import ui from './ui';
 
 export default combineReducers({
   ui,

lib/reducers/sessions.ts

@@ -1,5 +1,5 @@
 import Immutable from 'seamless-immutable';
-import {decorateSessionsReducer} from '../utils/plugins';
+
 import {
   SESSION_ADD,
   SESSION_PTY_EXIT,
@@ -11,8 +11,9 @@ import {
   SESSION_SET_XTERM_TITLE,
   SESSION_SET_CWD,
   SESSION_SEARCH
-} from '../constants/sessions';
-import {sessionState, session, Mutable, ISessionReducer} from '../hyper';
+} from '../../typings/constants/sessions';
+import type {sessionState, session, Mutable, ISessionReducer} from '../../typings/hyper';
+import {decorateSessionsReducer} from '../utils/plugins';
 
 const initialState: sessionState = Immutable<Mutable<sessionState>>({
   sessions: {},
@@ -25,17 +26,17 @@ function Session(obj: Immutable.DeepPartial<session>) {
     title: '',
     cols: null,
     rows: null,
-    url: null,
     cleared: false,
-    search: false,
+    search: null,
     shell: '',
-    pid: null
+    pid: null,
+    profile: ''
   };
   return Immutable(x).merge(obj);
 }
 
 function deleteSession(state: sessionState, uid: string) {
-  return state.updateIn(['sessions'], (sessions: typeof state['sessions']) => {
+  return state.updateIn(['sessions'], (sessions: (typeof state)['sessions']) => {
     const sessions_ = sessions.asMutable();
     delete sessions_[uid];
     return sessions_;
@@ -52,7 +53,8 @@ const reducer: ISessionReducer = (state = initialState, action) => {
           rows: action.rows,
           uid: action.uid,
           shell: action.shell ? action.shell.split('/').pop() : null,
-          pid: action.pid
+          pid: action.pid,
+          profile: action.profile
         })
       );
 

lib/reducers/term-groups.ts

@@ -1,10 +1,13 @@
+import Immutable from 'seamless-immutable';
+import type {Immutable as ImmutableType} from 'seamless-immutable';
 import {v4 as uuidv4} from 'uuid';
-import Immutable, {Immutable as ImmutableType} from 'seamless-immutable';
-import {TERM_GROUP_EXIT, TERM_GROUP_RESIZE} from '../constants/term-groups';
-import {SESSION_ADD, SESSION_SET_ACTIVE, SessionAddAction} from '../constants/sessions';
-import findBySession from '../utils/term-groups';
+
+import {SESSION_ADD, SESSION_SET_ACTIVE} from '../../typings/constants/sessions';
+import type {SessionAddAction} from '../../typings/constants/sessions';
+import {TERM_GROUP_EXIT, TERM_GROUP_RESIZE} from '../../typings/constants/term-groups';
+import type {ITermGroup, ITermState, ITermGroups, ITermGroupReducer, Mutable} from '../../typings/hyper';
 import {decorateTermGroupsReducer} from '../utils/plugins';
-import {ITermGroup, ITermState, ITermGroups, ITermGroupReducer, Mutable} from '../hyper';
+import findBySession from '../utils/term-groups';
 
 const MIN_SIZE = 0.05;
 const initialState: ITermState = Immutable<Mutable<ITermState>>({

lib/reducers/ui.ts

@@ -1,6 +1,18 @@
-import Immutable, {Immutable as ImmutableType} from 'seamless-immutable';
-import {decorateUIReducer} from '../utils/plugins';
-import {CONFIG_LOAD, CONFIG_RELOAD} from '../constants/config';
+import {release} from 'os';
+
+import Immutable from 'seamless-immutable';
+import type {Immutable as ImmutableType} from 'seamless-immutable';
+
+import {CONFIG_LOAD, CONFIG_RELOAD} from '../../typings/constants/config';
+import {NOTIFICATION_MESSAGE, NOTIFICATION_DISMISS} from '../../typings/constants/notifications';
+import {
+  SESSION_ADD,
+  SESSION_RESIZE,
+  SESSION_PTY_DATA,
+  SESSION_PTY_EXIT,
+  SESSION_SET_ACTIVE,
+  SESSION_SET_CWD
+} from '../../typings/constants/sessions';
 import {
   UI_FONT_SIZE_SET,
   UI_FONT_SIZE_RESET,
@@ -10,23 +22,17 @@ import {
   UI_WINDOW_GEOMETRY_CHANGED,
   UI_ENTER_FULLSCREEN,
   UI_LEAVE_FULLSCREEN
-} from '../constants/ui';
-import {NOTIFICATION_MESSAGE, NOTIFICATION_DISMISS} from '../constants/notifications';
-import {
-  SESSION_ADD,
-  SESSION_RESIZE,
-  SESSION_PTY_DATA,
-  SESSION_PTY_EXIT,
-  SESSION_SET_ACTIVE,
-  SESSION_SET_CWD
-} from '../constants/sessions';
-import {UPDATE_AVAILABLE} from '../constants/updater';
-import {uiState, Mutable, IUiReducer} from '../hyper';
+} from '../../typings/constants/ui';
+import {UPDATE_AVAILABLE} from '../../typings/constants/updater';
+import type {uiState, Mutable, IUiReducer} from '../../typings/hyper';
+import {decorateUIReducer} from '../utils/plugins';
+
+const isWindows = ['Windows', 'Win16', 'Win32', 'WinCE'].includes(navigator.platform) || process.platform === 'win32';
 
 const allowedCursorShapes = new Set(['BEAM', 'BLOCK', 'UNDERLINE']);
 const allowedCursorBlinkValues = new Set([true, false]);
 const allowedBells = new Set(['SOUND', 'false', false]);
-const allowedHamburgerMenuValues = new Set([true, false]);
+const allowedHamburgerMenuValues = new Set([true, false, ''] as const);
 const allowedWindowControlsValues = new Set([true, false, 'left']);
 
 // Populate `config-default.js` from this :)
@@ -50,6 +56,7 @@ const initial: uiState = Immutable<Mutable<uiState>>({
   fontSmoothingOverride: 'antialiased',
   fontWeight: 'normal',
   fontWeightBold: 'bold',
+  imageSupport: true,
   lineHeight: 1,
   letterSpacing: 0,
   css: '',
@@ -108,7 +115,9 @@ const initial: uiState = Immutable<Mutable<uiState>>({
   webLinksActivationKey: '',
   macOptionSelectionMode: 'vertical',
   disableLigatures: true,
-  screenReaderMode: false
+  screenReaderMode: false,
+  defaultProfile: '',
+  profiles: []
 });
 
 const reducer: IUiReducer = (state = initial, action) => {
@@ -210,7 +219,7 @@ const reducer: IUiReducer = (state = initial, action) => {
             }
 
             if (allowedBells.has(config.bell)) {
-              ret.bell = config.bell;
+              ret.bell = (config.bell as any) === 'false' ? false : config.bell;
             }
 
             if (config.bellSoundURL !== state.bellSoundURL) {
@@ -235,7 +244,7 @@ const reducer: IUiReducer = (state = initial, action) => {
               ret.modifierKeys = config.modifierKeys;
             }
 
-            if (allowedHamburgerMenuValues.has(config.showHamburgerMenu as any)) {
+            if (allowedHamburgerMenuValues.has(config.showHamburgerMenu)) {
               ret.showHamburgerMenu = config.showHamburgerMenu;
             }
 
@@ -269,6 +278,27 @@ const reducer: IUiReducer = (state = initial, action) => {
               ret.screenReaderMode = config.screenReaderMode;
             }
 
+            const buildNumber = parseInt(release().split('.').at(-1) || '0', 10);
+            if (isWindows && !Number.isNaN(buildNumber) && buildNumber > 0) {
+              const useConpty = typeof config.useConpty === 'boolean' ? config.useConpty : buildNumber >= 18309;
+              ret.windowsPty = {
+                backend: useConpty ? 'conpty' : 'winpty',
+                buildNumber
+              };
+            }
+
+            if (config.imageSupport !== undefined) {
+              ret.imageSupport = config.imageSupport;
+            }
+
+            if (config.defaultProfile !== undefined) {
+              ret.defaultProfile = config.defaultProfile;
+            }
+
+            if (config.profiles !== undefined) {
+              ret.profiles = config.profiles;
+            }
+
             ret._lastUpdate = now;
 
             return ret;
@@ -431,13 +461,7 @@ const reducer: IUiReducer = (state = initial, action) => {
     }
   }
 
-  if (
-    typeof state.cols !== 'undefined' &&
-    state.cols !== null &&
-    typeof state.rows !== 'undefined' &&
-    state.rows !== null &&
-    (state.rows !== state_.rows || state.cols !== state_.cols)
-  ) {
+  if (state.cols !== null && state.rows !== null && (state.rows !== state_.rows || state.cols !== state_.cols)) {
     state_ = state_.merge({notifications: {resize: true}}, {deep: true});
   }
 

lib/rpc.ts

@@ -1,3 +1,5 @@
 import RPC from './utils/rpc';
 
-export default new RPC();
+const rpc = new RPC();
+
+export default rpc;

lib/selectors.ts

@@ -1,5 +1,6 @@
 import {createSelector} from 'reselect';
-import {HyperState} from './hyper';
+
+import type {HyperState} from '../typings/hyper';
 
 const getTermGroups = ({termGroups}: Pick<HyperState, 'termGroups'>) => termGroups.termGroups;
 export const getRootGroups = createSelector(getTermGroups, (termGroups) =>

lib/store/configure-store.dev.ts

@@ -1,15 +1,21 @@
+import {composeWithDevTools} from '@redux-devtools/extension';
 import {createStore, applyMiddleware} from 'redux';
-import _thunk, {ThunkMiddleware} from 'redux-thunk';
+import _thunk from 'redux-thunk';
+import type {ThunkMiddleware} from 'redux-thunk';
+
+import type {HyperState, HyperActions} from '../../typings/hyper';
 import rootReducer from '../reducers/index';
 import effects from '../utils/effects';
 import * as plugins from '../utils/plugins';
+
 import writeMiddleware from './write-middleware';
-import {composeWithDevTools} from 'redux-devtools-extension';
-import {HyperState, HyperActions} from '../hyper';
+
 const thunk: ThunkMiddleware<HyperState, HyperActions> = _thunk;
 
-export default () => {
+const configureStoreForDevelopment = () => {
   const enhancer = composeWithDevTools(applyMiddleware(thunk, plugins.middleware, thunk, writeMiddleware, effects));
 
   return createStore(rootReducer, enhancer);
 };
+
+export default configureStoreForDevelopment;