feat(terminal): upgrade xterm.js to 6.1.0 with synchronized output support

BUILD.md

@@ -51,9 +51,16 @@ For packaging, the following additional packages are required:
 
 #### Windows
 
-You will need the [Zig](https://ziglang.org/) compiler for statically linking CGO.
+You will need the following:
 
-You can find installation instructions for Zig on Windows [here](https://ziglang.org/learn/getting-started/#managers).
+- **[Zig](https://ziglang.org/)** — Required for statically linking CGO. See [installation instructions](https://ziglang.org/learn/getting-started/#managers).
+- **[PowerShell 7+](https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell-on-windows)** — Required for build scripts. Windows ships with PowerShell 5.1, but the build system requires PowerShell 7 (pwsh). Install via winget:
+
+```powershell
+winget install Microsoft.PowerShell
+```
+
+Or download from the [PowerShell releases page](https://github.com/PowerShell/PowerShell/releases).
 
 ### Task
 

Taskfile.yml

@@ -8,8 +8,8 @@ vars:
     BIN_DIR: "bin"
     VERSION:
         sh: node version.cjs
-    RMRF: '{{if eq OS "windows"}}powershell Remove-Item -Force -Recurse -ErrorAction SilentlyContinue{{else}}rm -rf{{end}}'
-    DATE: '{{if eq OS "windows"}}powershell Get-Date -UFormat{{else}}date{{end}}'
+    RMRF: '{{if eq OS "windows"}}pwsh -NoProfile -Command Remove-Item -Force -Recurse -ErrorAction SilentlyContinue{{else}}rm -rf{{end}}'
+    DATE: '{{if eq OS "windows"}}pwsh -NoProfile -Command Get-Date -UFormat{{else}}date{{end}}'
     ARTIFACTS_BUCKET: waveterm-github-artifacts/staging-w2
     RELEASES_BUCKET: dl.waveterm.dev/releases-w2
     WINGET_PACKAGE: CommandLine.Wave
@@ -223,7 +223,7 @@ tasks:
         desc: Build the wavesrv component for Windows platforms (only generates artifacts for the current architecture).
         platforms: [windows]
         cmds:
-            - cmd: powershell -Command "Remove-Item -Force -ErrorAction SilentlyContinue -Path dist/bin/wavesrv*"
+            - cmd: pwsh -NoProfile -Command "Remove-Item -Force -ErrorAction SilentlyContinue -Path dist/bin/wavesrv*"
               ignore_error: true
             - task: build:server:internal
               vars:
@@ -263,7 +263,7 @@ tasks:
             - cmd: rm -f dist/bin/wsh*
               platforms: [darwin, linux]
               ignore_error: true
-            - cmd: powershell -Command "Remove-Item -Force -ErrorAction SilentlyContinue -Path dist/bin/wsh*"
+            - cmd: pwsh -NoProfile -Command "Remove-Item -Force -ErrorAction SilentlyContinue -Path dist/bin/wsh*"
               platforms: [windows]
               ignore_error: true
             - task: build:wsh:internal
@@ -327,7 +327,7 @@ tasks:
             - cmd: "{{.RMRF}} dist/tsunamiscaffold"
               ignore_error: true
             - task: copyfiles:'tsunami/frontend/scaffold':'dist/tsunamiscaffold'
-            - cmd: '{{if eq OS "windows"}}powershell Copy-Item -Path tsunami/templates/empty-gomod.tmpl -Destination dist/tsunamiscaffold/go.mod{{else}}cp tsunami/templates/empty-gomod.tmpl dist/tsunamiscaffold/go.mod{{end}}'
+            - cmd: '{{if eq OS "windows"}}pwsh -NoProfile -Command Copy-Item -Path tsunami/templates/empty-gomod.tmpl -Destination dist/tsunamiscaffold/go.mod{{else}}cp tsunami/templates/empty-gomod.tmpl dist/tsunamiscaffold/go.mod{{end}}'
         deps:
             - tsunami:scaffold
         sources:
@@ -486,7 +486,7 @@ tasks:
     copyfiles:*:*:
         desc: Recursively copy directory and its contents.
         internal: true
-        cmd: '{{if eq OS "windows"}}powershell Copy-Item -Recurse -Force -Path {{index .MATCH 0}} -Destination {{index .MATCH 1}}{{else}}mkdir -p "$(dirname {{index .MATCH 1}})" && cp -r {{index .MATCH 0}} {{index .MATCH 1}}{{end}}'
+        cmd: '{{if eq OS "windows"}}pwsh -NoProfile -Command Copy-Item -Recurse -Force -Path {{index .MATCH 0}} -Destination {{index .MATCH 1}}{{else}}mkdir -p "$(dirname {{index .MATCH 1}})" && cp -r {{index .MATCH 0}} {{index .MATCH 1}}{{end}}'
 
     clean:
         desc: clean make/dist directories
@@ -539,7 +539,7 @@ tasks:
             - cmd: rm -f package.json
               platforms: [darwin, linux]
               ignore_error: true
-            - cmd: powershell -Command "Remove-Item -Force -ErrorAction SilentlyContinue -Path package.json"
+            - cmd: pwsh -NoProfile -Command "Remove-Item -Force -ErrorAction SilentlyContinue -Path package.json"
               platforms: [windows]
               ignore_error: true
             - npm --no-workspaces init -y --init-license Apache-2.0
@@ -585,26 +585,26 @@ tasks:
         cmds:
             - cmd: "{{.RMRF}} scaffold"
               ignore_error: true
-            - powershell New-Item -ItemType Directory -Force -Path scaffold
-            - powershell Copy-Item -Path ../templates/package.json.tmpl -Destination scaffold/package.json
-            - powershell -Command "Set-Location scaffold; npm install"
-            - powershell Move-Item -Path scaffold/node_modules -Destination scaffold/nm
-            - powershell Copy-Item -Recurse -Force -Path dist -Destination scaffold/
-            - powershell New-Item -ItemType Directory -Force -Path scaffold/dist/tw
-            - powershell Copy-Item -Path '../templates/*.go.tmpl' -Destination scaffold/
-            - powershell Copy-Item -Path ../templates/tailwind.css -Destination scaffold/
-            - powershell Copy-Item -Path ../templates/gitignore.tmpl -Destination scaffold/.gitignore
-            - powershell Copy-Item -Path 'src/element/*.tsx' -Destination scaffold/dist/tw/
-            - powershell Copy-Item -Path '../ui/*.go' -Destination scaffold/dist/tw/
-            - powershell Copy-Item -Path ../engine/errcomponent.go -Destination scaffold/dist/tw/
+            - pwsh -NoProfile -Command New-Item -ItemType Directory -Force -Path scaffold
+            - pwsh -NoProfile -Command Copy-Item -Path ../templates/package.json.tmpl -Destination scaffold/package.json
+            - pwsh -NoProfile -Command "Set-Location scaffold; npm install"
+            - pwsh -NoProfile -Command Move-Item -Path scaffold/node_modules -Destination scaffold/nm
+            - pwsh -NoProfile -Command Copy-Item -Recurse -Force -Path dist -Destination scaffold/
+            - pwsh -NoProfile -Command New-Item -ItemType Directory -Force -Path scaffold/dist/tw
+            - pwsh -NoProfile -Command Copy-Item -Path '../templates/*.go.tmpl' -Destination scaffold/
+            - pwsh -NoProfile -Command Copy-Item -Path ../templates/tailwind.css -Destination scaffold/
+            - pwsh -NoProfile -Command Copy-Item -Path ../templates/gitignore.tmpl -Destination scaffold/.gitignore
+            - pwsh -NoProfile -Command Copy-Item -Path 'src/element/*.tsx' -Destination scaffold/dist/tw/
+            - pwsh -NoProfile -Command Copy-Item -Path '../ui/*.go' -Destination scaffold/dist/tw/
+            - pwsh -NoProfile -Command Copy-Item -Path ../engine/errcomponent.go -Destination scaffold/dist/tw/
 
     tsunami:build:
         desc: Build the tsunami binary.
         cmds:
             - cmd: rm -f bin/tsunami*
               platforms: [darwin, linux]
               ignore_error: true
-            - cmd: powershell -Command "Remove-Item -Force -ErrorAction SilentlyContinue -Path bin/tsunami*"
+            - cmd: pwsh -NoProfile -Command "Remove-Item -Force -ErrorAction SilentlyContinue -Path bin/tsunami*"
               platforms: [windows]
               ignore_error: true
             - mkdir -p bin

frontend/app/view/term/fitaddon.ts

@@ -3,12 +3,13 @@
  * @license MIT
  */
 
-// This file is a copy of the original xterm.js file, with the following changes:
-// - removed the allowance for the scrollbar
+// This file is a custom FitAddon based on xterm.js official addon, with changes:
+// - Added noScrollbar flag to support macOS scrollbar behavior
+// - Updated for xterm.js 6.1.0 public API (terminal.dimensions)
+// - Replaced DOM-based scrollbar width measurement with config-based approach
 
 import type { FitAddon as IFitApi } from "@xterm/addon-fit";
-import type { ITerminalAddon, Terminal } from "@xterm/xterm";
-import { IRenderDimensions } from "@xterm/xterm/src/browser/renderer/shared/Types";
+import type { ITerminalAddon, Terminal, IRenderDimensions } from "@xterm/xterm";
 
 interface ITerminalDimensions {
     /**
@@ -24,6 +25,7 @@ interface ITerminalDimensions {
 
 const MINIMUM_COLS = 2;
 const MINIMUM_ROWS = 1;
+const DEFAULT_SCROLLBAR_WIDTH = 15; // Match xterm.js DEFAULT_SCROLL_BAR_WIDTH
 
 export class FitAddon implements ITerminalAddon, IFitApi {
     private _terminal: Terminal | undefined;
@@ -41,12 +43,7 @@ export class FitAddon implements ITerminalAddon, IFitApi {
             return;
         }
 
-        // TODO: Remove reliance on private API
-        const core = (this._terminal as any)._core;
-
-        // Force a full render
         if (this._terminal.rows !== dims.rows || this._terminal.cols !== dims.cols) {
-            core._renderService.clear();
             this._terminal.resize(dims.cols, dims.rows);
         }
     }
@@ -60,22 +57,25 @@ export class FitAddon implements ITerminalAddon, IFitApi {
             return undefined;
         }
 
-        // TODO: Remove reliance on private API
-        const core = (this._terminal as any)._core;
-        const dims: IRenderDimensions = core._renderService.dimensions;
+        // Use public API from xterm.js 6.1.0 (PR #5551)
+        // terminal.dimensions may be undefined during initialization or before first render
+        const dims: IRenderDimensions | undefined = this._terminal.dimensions;
+        if (!dims) {
+            return undefined;
+        }
 
         if (dims.css.cell.width === 0 || dims.css.cell.height === 0) {
             return undefined;
         }
 
-        // UPDATED CODE (removed reliance on FALLBACK_SCROLL_BAR_WIDTH in viewport)
-        const measuredScrollBarWidth =
-            core.viewport._viewportElement.offsetWidth - core.viewport._scrollArea.offsetWidth;
-        let scrollbarWidth = this._terminal.options.scrollback === 0 ? 0 : measuredScrollBarWidth;
-        if (this.noScrollbar) {
-            scrollbarWidth = 0;
+        let scrollbarWidth = 0;
+        if (!this.noScrollbar && this._terminal.options.scrollback !== 0) {
+            const configWidth = this._terminal.options.overviewRuler?.width ?? DEFAULT_SCROLLBAR_WIDTH;
+            // Validate scrollbar width to prevent invalid dimension calculations
+            scrollbarWidth = isNaN(configWidth) || configWidth < 0 || configWidth > 100
+                ? DEFAULT_SCROLLBAR_WIDTH
+                : configWidth;
         }
-        // END UPDATED CODE
 
         const parentElementStyle = window.getComputedStyle(this._terminal.element.parentElement);
         const parentElementHeight = parseInt(parentElementStyle.getPropertyValue("height"));

frontend/app/view/term/term.scss

@@ -147,6 +147,10 @@
     }
 
     .terminal {
+        // Legacy webkit scrollbar styles for .xterm-viewport native scrollbar.
+        // NOTE: In xterm.js 6.x, the scrollbar is rendered by DomScrollableElement,
+        // so these styles may only apply during fallback scenarios or if xterm.js
+        // still uses native scrollbar in some cases. Keep for backward compatibility.
         .xterm-viewport {
             &::-webkit-scrollbar {
                 width: 6px;
@@ -178,5 +182,19 @@
                 display: block;
             }
         }
+
+        // xterm.js 6.1.0+ DomScrollableElement scrollbar styles
+        .xterm-scrollable-element > .scrollbar > .slider {
+            background-color: var(--scrollbar-thumb-color);
+            border-radius: 4px;
+
+            &:hover {
+                background-color: var(--scrollbar-thumb-hover-color);
+            }
+
+            &.active {
+                background-color: var(--scrollbar-thumb-active-color);
+            }
+        }
     }
 }