docs(browser): fix layer rules — renderer/dom is integration, not platform

Co-authored-by: Daniel Imms <Tyriar@users.noreply.github.com>

.agents/skills/benchmark/SKILL.md

@@ -1,7 +1,11 @@
 ---
-applyTo: '**/*.benchmark.ts'
+name: benchmark
+description: Run and author benchmark tests in xterm.js. Use when editing benchmark files, working in `*.benchmark.ts`, or when asked how to run the full benchmark suite, a single benchmark file, or a single benchmark case.
 ---
-# Benchmark run instructions
+
+# Benchmark Run Instructions
+
+## Running Benchmarks
 
 - Full suite: `npm run benchmark`
 - Single benchmark file:
@@ -11,8 +15,14 @@ applyTo: '**/*.benchmark.ts'
   - Use `-t` to get the path, then:
   - `npm run benchmark -- -s "<path>" out-test/benchmark/Event.benchmark.js`
 
-When writing instructions, use `RuntimeCase` to measure pure runtime in ms, use `ThroughputRuntimeCase` when measuring throughput in MB/s.
+## Benchmark Case Selection
+
+When writing benchmark instructions:
+
+- Use `RuntimeCase` to measure pure runtime in ms.
+- Use `ThroughputRuntimeCase` when measuring throughput in MB/s.
+
+## Notes
 
-Notes:
 - Benchmarks run from built JS in `out-test/benchmark/*.benchmark.js`.
 - Keep `NODE_PATH=./out` (handled by the npm script).

.agents/skills/unit-test/SKILL.md

@@ -1,7 +1,11 @@
 ---
-applyTo: '**/*.test.ts'
+name: unit-test
+description: Write and review xterm.js unit tests with project conventions. Use when editing `*.test.ts` files or when asked for test authoring guidelines.
 ---
-When writing unit tests follow these rules:
+
+# Unit Test Instructions
+
+When writing unit tests, follow these rules:
 
 - When writing unit tests for addons, always create a real xterm.js instance instead of mocking it.
 - Prefer `assert.ok` over `assert.notStrictEqual` when checking something is undefined or not.

.github/hooks/setupRepo.json

@@ -1,10 +0,0 @@
-{
-	"hooks": {
-		"SessionStart": [
-			{
-				"type": "command",
-				"command": "npm run agent:setup-repo"
-			}
-		]
-	}
-}

.github/workflows/ci.yml

@@ -207,31 +207,31 @@ jobs:
     - name: Build demo server
       run: npm run esbuild-demo-server
     - name: Integration tests (core) # Tests use 50% workers to reduce flakiness
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=core
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=core
     - name: Integration tests (addon-attach)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-attach
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-attach
     - name: Integration tests (addon-clipboard)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-clipboard
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-clipboard
     - name: Integration tests (addon-fit)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-fit
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-fit
     - name: Integration tests (addon-image)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-image
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-image
     - name: Integration tests (addon-progress)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-progress
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-progress
     - name: Integration tests (addon-search)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-search
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-search
     - name: Integration tests (addon-serialize)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-serialize
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-serialize
     - name: Integration tests (addon-unicode-graphemes)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-unicode-graphemes
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-unicode-graphemes
     - name: Integration tests (addon-unicode11)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-unicode11
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-unicode11
     - name: Integration tests (addon-web-fonts)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-web-fonts
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-web-fonts
     - name: Integration tests (addon-web-links)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-web-links
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-web-links
     - name: Integration tests (addon-webgl)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-webgl
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-webgl
 
   release-dry-run:
     needs: build

.gitignore

@@ -22,6 +22,10 @@ build/
 yarn.lock
 test-results/
 
+# Tracing/debug files
+.cursor/nal-trace/
+.cursor/*.log
+
 # Keep bundled code out of Git
 dist/
 demo/dist/

AGENTS.md

@@ -57,6 +57,13 @@ export class MyAddon implements ITerminalAddon {
 - Proposed APIs require `allowProposedApi: true` option
 - Constructor-only options (cols, rows) cannot be changed after instantiation
 
+**Disposable Management**:
+- When a disposable object can be replaced over time, prefer a registered `MutableDisposable` over manual dispose/reassign logic.
+- Register it on the owning class (for example, `this._register(new MutableDisposable())`) and assign through `.value`; this automatically disposes the previous value and avoids accidentally leaking resources.
+
+**TypeScript Constants**:
+- Prefer `const enum` over top-level `const` declarations for primitive constants when appropriate, since values are inlined and avoid runtime property lookups.
+
 **Testing Utilities**: Use `TestUtils.ts` helpers:
 - `openTerminal(ctx, options)` for setup
 - `pollFor(page, fn, expectedValue)` for async assertions
@@ -91,3 +98,15 @@ const cell = line?.getCell(0);
 ## Writing unit tests
 
 - Unit tests live alongside the source code file of the thing it's testing with a .test.ts suffix.
+
+## Cursor Cloud specific instructions
+
+**Demo server**: Start with `npm start` (port 3000). The demo server uses node-pty to spawn real shell sessions over WebSocket. Integration tests auto-start it via Playwright's `webServer` config, so you don't need to start it manually for `npm run test-integration`.
+
+**Build before testing**: Always run `npm run build && npm run esbuild` before `npm run test-unit`. Integration tests also need `npm run esbuild-demo-client` and `npm run esbuild-demo-server`. The update script handles this automatically on session start.
+
+**No external services**: This project has zero external dependencies (no databases, Docker, or APIs). Everything runs locally with Node.js.
+
+**TypeScript compiler**: The project uses `tsgo` (native TypeScript compiler preview) rather than standard `tsc`. It's installed via the `@typescript/native-preview` package.
+
+**Lint only changed files**: Prefer `npm run lint-changes` over `npm run lint` when iterating on code changes — it's significantly faster.

README.md

@@ -252,6 +252,8 @@ Xterm.js is used in many world-class applications to provide great terminal expe
 - [**EmuDevz**](https://afska.github.io/emudevz): A free coding game where players learn how to build an emulator from scratch.
 - [**SSH Connection Manager**](https://github.com/Amtrend/ssh-manager): Modern web-based SSH terminal and SFTP manager with AES-256 encryption, PWA support, and session management.
 - [**WooTTY**](https://github.com/icoretech/wootty): Flawless browser terminal for real operators.
+- [**Orca**](https://github.com/stablyai/orca): Agentic development environment for 100x builders.
+- [**4bit**](https://ciembor.github.io/4bit): Terminal Color Scheme Designer.
 - [And much more...](https://github.com/xtermjs/xterm.js/network/dependents?package_id=UGFja2FnZS0xNjYzMjc4OQ%3D%3D)
 
 Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it on our list. Please add any new contributions to the end of the list.

addons/addon-clipboard/package.json

@@ -21,8 +21,5 @@
     "package": "../../node_modules/.bin/webpack",
     "prepublishOnly": "npm run package",
     "start": "node ../../demo/start"
-  },
-  "dependencies": {
-    "js-base64": "^3.7.5"
   }
 }

addons/addon-clipboard/src/ClipboardAddon.ts

@@ -4,8 +4,7 @@
  */
 
 import type { IDisposable, ITerminalAddon, Terminal } from '@xterm/xterm';
-import { type IClipboardProvider, ClipboardSelectionType, type IBase64 } from '@xterm/addon-clipboard';
-import { Base64 as JSBase64 } from 'js-base64';
+import { type IClipboardProvider, type IBase64 } from '@xterm/addon-clipboard';
 
 export class ClipboardAddon implements ITerminalAddon {
   private _terminal?: Terminal;
@@ -25,7 +24,7 @@ export class ClipboardAddon implements ITerminalAddon {
     return this._disposable?.dispose();
   }
 
-  private _readText(sel: ClipboardSelectionType, data: string): void {
+  private _readText(sel: string, data: string): void {
     const b64 = this._base64.encodeText(data);
     this._terminal?.input(`\x1b]52;${sel};${b64}\x07`, false);
   }
@@ -36,7 +35,7 @@ export class ClipboardAddon implements ITerminalAddon {
       return true;
     }
 
-    const pc = args[0] as ClipboardSelectionType;
+    const pc = args[0];
     const pd = args[1];
     if (pd === '?') {
       const text = this._provider.readText(pc);
@@ -70,30 +69,23 @@ export class ClipboardAddon implements ITerminalAddon {
 }
 
 export class BrowserClipboardProvider implements IClipboardProvider {
-  public async readText(selection: ClipboardSelectionType): Promise<string> {
-    if (selection !== 'c') {
-      return Promise.resolve('');
-    }
+  public readText(selection: string): Promise<string> {
     return navigator.clipboard.readText();
   }
 
-  public async writeText(selection: ClipboardSelectionType, text: string): Promise<void> {
-    if (selection !== 'c') {
-      return Promise.resolve();
-    }
+  public writeText(selection: string, text: string): Promise<void> {
     return navigator.clipboard.writeText(text);
   }
 }
 
 export class Base64 implements IBase64 {
   public encodeText(data: string): string {
-    return JSBase64.encode(data);
+    return btoa(data);
   }
   public decodeText(data: string): string {
-    const text = JSBase64.decode(data);
-    if (!JSBase64.isValid(data) || JSBase64.encode(text) !== data) {
-      return '';
-    }
-    return text;
+    try {
+      return atob(data);
+    } catch {}
+    return '';
   }
 }

addons/addon-clipboard/test/ClipboardAddon.test.ts

@@ -20,7 +20,7 @@ test.describe('ClipboardAddon', () => {
 
   test.beforeEach(async ({}, testInfo) => {
     // DEBT: This test doesn't work since the migration to @playwright/test
-    if (ctx.browser.browserType().name() !== 'chromium') {
+    if (ctx.browser.browserType().name() === 'webkit') {
       testInfo.skip();
       return;
     }
@@ -48,6 +48,14 @@ test.describe('ClipboardAddon', () => {
       await ctx.proxy.write(`\x1b]52;c;${testDataEncoded}\x07`);
       deepEqual(await ctx.page.evaluate(() => window.navigator.clipboard.readText()), testDataDecoded);
     });
+    test('primary selection', async () => {
+      await ctx.proxy.write(`\x1b]52;p;${testDataEncoded}\x07`);
+      deepEqual(await ctx.page.evaluate(() => window.navigator.clipboard.readText()), testDataDecoded);
+    });
+    test('empty selection (default)', async () => {
+      await ctx.proxy.write(`\x1b]52;;${testDataEncoded}\x07`);
+      deepEqual(await ctx.page.evaluate(() => window.navigator.clipboard.readText()), testDataDecoded);
+    });
     test('invalid base64 string', async () => {
       await ctx.proxy.write(`\x1b]52;c;${testDataEncoded}invalid\x07`);
       deepEqual(await ctx.page.evaluate(() => window.navigator.clipboard.readText()), '');
@@ -60,15 +68,24 @@ test.describe('ClipboardAddon', () => {
   });
 
   test.describe('read data', async function (): Promise<any> {
-    test('simple string', async () => {
+    test.beforeAll(async () => {
       await ctx.page.evaluate(`
         window.data = [];
         window.term.onData(e => data.push(e));
       `);
+    });
+    test('simple string', async () => {
+      await ctx.page.evaluate('window.data.length = 0;');
       await ctx.page.evaluate(() => window.navigator.clipboard.writeText('hello world'));
       await ctx.proxy.write(`\x1b]52;c;?\x07`);
       deepEqual(await ctx.page.evaluate('window.data'), [`\x1b]52;c;${testDataEncoded}\x07`]);
     });
+    test('primary selection', async () => {
+      await ctx.page.evaluate('window.data.length = 0;');
+      await ctx.page.evaluate(() => window.navigator.clipboard.writeText('hello world'));
+      await ctx.proxy.write(`\x1b]52;p;?\x07`);
+      deepEqual(await ctx.page.evaluate('window.data'), [`\x1b]52;p;${testDataEncoded}\x07`]);
+    });
     test('clear clipboard', async () => {
       await ctx.proxy.write(`\x1b]52;c;!\x07`);
       await ctx.proxy.write(`\x1b]52;c;?\x07`);

addons/addon-clipboard/typings/addon-clipboard.d.ts

@@ -30,18 +30,6 @@ declare module '@xterm/addon-clipboard' {
     public dispose(): void
   }
 
-  /**
-   * Clipboard selection type. This is used to specify which selection buffer to
-   * read or write to.
-   * - SYSTEM `c`: The system clipboard.
-   * - PRIMARY `p`: The primary clipboard. This is provided for compatibility
-   *  with Linux X11.
-   */
-  export const enum ClipboardSelectionType {
-    SYSTEM = 'c',
-    PRIMARY = 'p',
-  }
-
   export interface IBase64 {
     /**
     * Converts a utf-8 string to a base64 string.
@@ -78,36 +66,39 @@ declare module '@xterm/addon-clipboard' {
   export interface IClipboardProvider {
     /**
      * Gets the clipboard content.
-     * @param selection The clipboard selection to read.
+     * @param selection The clipboard selection to read (see OSC 52 spec of xterm).
      * @returns A promise that resolves with clipboard selection data.
      */
-    readText(selection: ClipboardSelectionType): string | Promise<string>;
+    readText(selection: string): string | Promise<string>;
 
     /**
      * Sets the clipboard content.
-     * @param selection The clipboard selection to set.
+     * @param selection The clipboard selection to set (see OSC 52 spec of xterm).
      * @param data The clipboard text to write.
      */
-    writeText(selection: ClipboardSelectionType, text: string): void | Promise<void>;
+    writeText(selection: string, text: string): void | Promise<void>;
   }
 
   /**
-   * The clipboard provider interface that enables xterm.js to access the system clipboard.
+   * The clipboard provider interface that enables xterm.js to access the browser clipboard.
+   *
+   * Note this this clipboard provider does not implement own cut buffers as xterm does,
+   * but redirect the selection parameter always to navigator.clipboard.
    */
   export class BrowserClipboardProvider implements IClipboardProvider{
     /**
      * Reads text from the clipboard.
-     * @param selection The selection type to read from.
+     * @param selection The selection type to read from (always refers to navigator.clipboard).
      * @returns A promise that resolves with the text from the clipboard.
      */
-    public readText(selection: ClipboardSelectionType): Promise<string>;
+    public readText(selection: string): Promise<string>;
 
     /**
      * Writes text to the clipboard.
-     * @param selection The selection type to write to.
+     * @param selection The selection type to write to (always refers to navigator.clipboard).
      * @param data The text to write to the clipboard.
      * @returns A promise that resolves when the text has been written to the clipboard.
      */
-    public writeText(selection: ClipboardSelectionType, data: string): Promise<void>;
+    public writeText(selection: string, data: string): Promise<void>;
   }
 }

addons/addon-fit/src/FitAddon.ts

@@ -19,8 +19,10 @@ interface ITerminalDimensions {
   cols: number;
 }
 
-const MINIMUM_COLS = 2;
-const MINIMUM_ROWS = 1;
+const enum Constants {
+  MINIMUM_COLS = 2,
+  MINIMUM_ROWS = 1
+}
 
 function getWindow(e: Node): Window {
   if (e?.ownerDocument?.defaultView) {
@@ -86,8 +88,8 @@ export class FitAddon implements ITerminalAddon, IFitApi {
     const availableHeight = parentElementHeight - elementPaddingVer;
     const availableWidth = parentElementWidth - elementPaddingHor - scrollbarWidth;
     const geometry = {
-      cols: Math.max(MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)),
-      rows: Math.max(MINIMUM_ROWS, Math.floor(availableHeight / dims.css.cell.height))
+      cols: Math.max(Constants.MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)),
+      rows: Math.max(Constants.MINIMUM_ROWS, Math.floor(availableHeight / dims.css.cell.height))
     };
     return geometry;
   }

addons/addon-image/README.md

@@ -1,6 +1,7 @@
 ## @xterm/addon-image
 
-Inline image output in xterm.js. Supports SIXEL and iTerm's inline image protocol (IIP).
+Inline image output in xterm.js. Supports SIXEL, iTerm's inline image protocol (IIP)
+and partially Kitty's terminal graphics prtocol (TGP).
 
 
 ![](fixture/example.png)
@@ -25,14 +26,14 @@ const customSettings: IImageAddonOptions = {
   pixelLimit: 16777216,       // max. pixel size of a single image
   sixelSupport: true,         // enable sixel support
   sixelScrolling: true,       // whether to scroll on image output
-  sixelPaletteLimit: 256,     // initial sixel palette size
-  sixelSizeLimit: 25000000,   // size limit of a single sixel sequence
+  sixelPaletteLimit: 4096,    // initial sixel palette size
+  sixelSizeLimit: 33554432,   // size limit of a single sixel sequence
   storageLimit: 128,          // FIFO storage limit in MB
   showPlaceholder: true,      // whether to show a placeholder for evicted images
   iipSupport: true,           // enable iTerm IIP support
-  iipSizeLimit: 20000000,     // size limit of a single IIP sequence
+  iipSizeLimit: 33554432,     // size limit of a single IIP sequence
   kittySupport: true,         // enable Kitty graphics support
-  kittySizeLimit: 20000000    // size limit of a single Kitty sequence
+  kittySizeLimit: 33554432    // size limit of a single Kitty sequence
 }
 
 // initialization
@@ -43,9 +44,6 @@ terminal.loadAddon(imageAddon);
 
 ### General Notes
 
-- *IMPORTANT:* The worker approach as done in previous releases got removed.
-  The addon contructor no longer expects a worker path as first argument.
-
 - By default the addon will activate these `windowOptions` reports on the terminal:
   - getWinSizePixels (CSI 14 t)
   - getCellSizePixels (CSI 16 t)
@@ -73,7 +71,7 @@ terminal.loadAddon(imageAddon);
 
 - **Cursor Positioning**  
   If scrolling is set, the cursor will be placed at the first image column of the last image row (VT340 mode).
-  Other cursor positioning modes as used by xterm or mintty are not supported.
+  Other cursor positioning modes as used by xterm or mintty are not supported for sixel.
 
 - **SIXEL Palette Handling**  
   By default the addon limits the palette size to 256 registers (as demanded by the DEC specification).
@@ -100,17 +98,24 @@ terminal.loadAddon(imageAddon);
   Set by default, change it with `{iipSupport: true}`.
 
   The IIP implementation has the following features / restrictions (sequence will silently fail for unmet conditions):
-  - Supported formats: PNG, JPEG and GIF
+  - Supported formats: PNG, JPEG, GIF and QOI
   - No animation support.
   - Image type hinting is not supported (always deducted from data header).
   - File download is not supported.
   - Filename gets parsed but not used.
   - Strict base64 handling as of RFC4648 §4 (standard alphabet, optional padding, no separator bytes allowed).
-  - Payload size may not exceed CEIL(sizeParameter * 4 / 3).
   - Image scaling beyond terminal viewport size is allowed (e.g. `width=200%`).
   - Image pixel size is restricted by `pixelLimit` (pre- and post resizing).
-  - Size parameter is restricted by `iipSizeLimit`.
-  - Cursor positioning behaves the same as for sixel (see above).
+  - Playload size is restricted by `iipSizeLimit`.
+  - size parameter is not mandatory anymore.
+  - Cursor gets positioned at the next cell of the last image line.
+  - ReportCellSize sequence is supported.
+  - Hi-res display support is currently limited (image gets blurred).
+
+- **Kitty Graphics Support (TGP)**  
+  Set by default, change it with `{kittySupport: true}`.
+
+  Note that the kitty graphics support is still WIP.
 
 
 ### Storage and Drawing Settings
@@ -127,6 +132,7 @@ The addon exposes two properties to interact with the storage limits at runtime:
 By default the addon will show a placeholder pattern for evicted images that are still part
 of the terminal (e.g. in the scrollback). The pattern can be deactivated by toggling `showPlaceholder`.
 
+
 ### Image Data Retrieval
 
 The addon provides the following API endpoints to retrieve raw image data as canvas:
@@ -140,6 +146,7 @@ The addon provides the following API endpoints to retrieve raw image data as can
   The buffer position is the 0-based absolute index (including scrollback at top).
   Note that the canvas gets created and data copied over for every call, thus it is not suitable for performance critical actions.
 
+
 ### Memory Usage
 
 The addon does most image processing in Javascript and therefore can occupy a rather big amount of memory. To get an idea where the memory gets eaten, lets look at the data flow and processing steps:
@@ -180,8 +187,8 @@ _How can I adjust the memory usage?_
   A constructor setting, thus you would have to anticipate, whether (multiple) terminals in your page gonna do lots of concurrent decoding. Since this is normally not the case and the memory usage is only temporarily peaking, a rather high value should work even with multiple terminals in one page.
 - `storageLimit`  
   A constructor and a runtime setting. In conjunction with `storageUsage` you can do runtime checks and adjust the limit to your needs. If you have to lower the limit below the current usage, images will be removed in FIFO order and may turn into a placeholder in the terminal's scrollback (if `showPlaceholder` is set). When adjusting keep in mind to leave enough room for memory peaking for decoding.
-- `sixelSizeLimit`  
-  A constructor setting. This has only a small impact on peaking memory during decoding. It is meant to avoid processing of overly big or broken SIXEL sequences at an earlier phase, thus may stop the decoder from entering its memory intensive task for potentially invalid data.
+- `sixelSizeLimit | iipSizeLimit | kittySizeLimit`  
+  Constructor settings. This has only a small impact on peaking memory during decoding. It is meant to avoid processing of overly big or broken image sequences at an earlier phase, thus may stop the invoked decoders from entering memory intensive tasks for potentially invalid data.
 
 
 ### Terminal Interaction
@@ -211,23 +218,5 @@ _How can I adjust the memory usage?_
 
 ### Status
 
-- Sixel support and image handling in xterm.js is considered beta quality.
-- IIP support is in alpha stage. Please file a bug for any awkwardities.
-
-
-### Changelog
-
-- 0.5.0 integrate with xtermjs base repo (at v0.4.3)
-- 0.4.3 defer canvas creation
-- 0.4.2 fix image canvas resize
-- 0.4.1 compat release for xterm.js 5.2.0
-- 0.4.0 IIP support
-- 0.3.1 compat release for xterm.js 5.1.0
-- 0.3.0 important change: worker removed from addon
-- 0.2.0 compat release for xterm.js 5.0.0
-- 0.1.3 bugfix: avoid striping
-- 0.1.2 bugfix: reset clear flag
-- 0.1.1 bugfixes:
-  - clear sticky image tiles on render
-  - create folder from bootstrap.sh
-  - fix peer dependency in package.json
+- Sixel and IIP support and image handling in xterm.js is considered beta quality.
+- Kitty support is in alpha stage. Please file a bug for any awkwardities or missing features.

addons/addon-image/package.json

@@ -25,6 +25,6 @@
   },
   "devDependencies": {
     "sixel": "^0.16.0",
-    "xterm-wasm-parts": "^0.3.0"
+    "xterm-wasm-parts": "^0.4.1"
   }
 }

addons/addon-image/src/IIPHandler.ts

@@ -7,7 +7,8 @@ import { ImageRenderer } from './ImageRenderer';
 import { IIPImageStorage } from './IIPImageStorage';
 import { CELL_SIZE_DEFAULT } from './ImageStorage';
 import Base64Decoder from 'xterm-wasm-parts/lib/base64/Base64Decoder.wasm';
-import { HeaderParser, IHeaderFields, HeaderState } from './IIPHeaderParser';
+import QoiDecoder from 'xterm-wasm-parts/lib/qoi/QoiDecoder.wasm';
+import { HeaderParser, IHeaderFields, HeaderState, SequenceType } from './IIPHeaderParser';
 import { imageType, UNSUPPORTED_TYPE } from './IIPMetrics';
 
 // Local const enum mirror - esbuild can't inline const enums from external packages
@@ -22,6 +23,7 @@ const enum DecoderConst {
 
 // default IIP header values
 const DEFAULT_HEADER: IHeaderFields = {
+  type: SequenceType.INVALID,
   name: 'Unnamed file',
   size: 0,
   width: 'auto',
@@ -36,7 +38,10 @@ export class IIPHandler implements IOscHandler, IResetHandler {
   private _hp = new HeaderParser();
   private _header: IHeaderFields = DEFAULT_HEADER;
   private _dec: Base64Decoder;
+  private _qoiDec: QoiDecoder;
   private _metrics = UNSUPPORTED_TYPE;
+  private _isMultipart = false;
+  private _abortMulti = false;
 
   constructor(
     private readonly _opts: IImageAddonOptions,
@@ -47,13 +52,17 @@ export class IIPHandler implements IOscHandler, IResetHandler {
     const maxEncodedBytes = Math.ceil(this._opts.iipSizeLimit * 4 / 3);
     const initialBytes = Math.min(DecoderConst.INITIAL_DATA, maxEncodedBytes);
     this._dec = new Base64Decoder(DecoderConst.KEEP_DATA, maxEncodedBytes, initialBytes);
+    this._qoiDec = new QoiDecoder(DecoderConst.KEEP_DATA);
   }
 
-  public reset(): void {}
+  public reset(): void {
+    this._hp.reset();
+    this._dec.release();
+    this._qoiDec.release();
+  }
 
   public start(): void {
     this._aborted = false;
-    this._header = DEFAULT_HEADER;
     this._metrics  = UNSUPPORTED_TYPE;
     this._hp.reset();
   }
@@ -73,15 +82,27 @@ export class IIPHandler implements IOscHandler, IResetHandler {
         return;
       }
       if (dataPos > 0) {
-        this._header = Object.assign({}, DEFAULT_HEADER, this._hp.fields);
-        if (!this._header.inline || !this._header.size || this._header.size > this._opts.iipSizeLimit) {
+        const seqType = this._hp.fields.type;
+        if (seqType === SequenceType.FILE) {
+          if (this._isMultipart) {
+            this._isMultipart = false;
+            this._abortMulti = false;
+            this._dec.release();
+          }
+          this._header = Object.assign({}, DEFAULT_HEADER, this._hp.fields);
+          if (!this._header.inline) {
+            this._aborted = true;
+            return;
+          }
+          this._dec.init();
+        } else if (this._abortMulti) {
           this._aborted = true;
           return;
         }
-        this._dec.init();
         if ((this._dec.put(data.subarray(dataPos, end)) as number) !== DecoderConst.OK) {
           this._dec.release();
           this._aborted = true;
+          if (this._isMultipart) this._abortMulti = true;
         }
       }
     }
@@ -90,22 +111,58 @@ export class IIPHandler implements IOscHandler, IResetHandler {
   public end(success: boolean): boolean | Promise<boolean> {
     if (this._aborted) return true;
 
+    if (this._hp.state !== HeaderState.END) {
+      if (this._hp.end()) return true;
+    }
+    const seqType = this._hp.fields.type;
+
+    if (seqType === SequenceType.FILEPART) return true;
+
+    if (seqType === SequenceType.REPORTCELLSIZE) {
+      // OSC 1337 ; ReportCellSize=[height];[width];[scale] ST
+      let width = CELL_SIZE_DEFAULT.width;
+      let height = CELL_SIZE_DEFAULT.height;
+      if (this._renderer.dimensions) {
+        width = this._renderer.dimensions.css.canvas.width / this._coreTerminal.cols;
+        height = this._renderer.dimensions.css.canvas.height / this._coreTerminal.rows;
+      }
+      const scale = this._coreTerminal._core._coreBrowserService?.dpr ?? 1;
+      const report = `\x1b]1337;ReportCellSize=${height.toFixed(3)};${width.toFixed(3)};${scale.toFixed(3)}\x1b\\`;
+      this._coreTerminal.input(report, false);
+      return true;
+    }
+
+    if (seqType === SequenceType.MULTIPARTFILE) {
+      this._header = Object.assign({}, DEFAULT_HEADER, this._hp.fields);
+      this._isMultipart = true;
+      this._abortMulti = false;
+      this._dec.release();
+      this._dec.init();
+      return true;
+    }
+
+    if (seqType === SequenceType.FILEEND) {
+      if (!this._isMultipart) return true;
+      this._isMultipart = false;
+      if (this._abortMulti || this._header.type !== SequenceType.MULTIPARTFILE) return true;
+    }
+
+    // fallthrough for SequenceType.FILE & SequenceType.FILEEND
+
     let w = 0;
     let h = 0;
 
     // early exit condition chain
-    let cond: number | boolean = true;
+    let cond: number | boolean;
     if (cond = success) {
       if (cond = !this._dec.end()) {
-        if (cond = this._dec.data8.length === this._header.size) {
-          this._metrics = imageType(this._dec.data8);
-          if (cond = this._metrics.mime !== 'unsupported') {
-            w = this._metrics.width;
-            h = this._metrics.height;
-            if (cond = w && h && w * h < this._opts.pixelLimit) {
-              [w, h] = this._resize(w, h).map(Math.floor);
-              cond = w && h && w * h < this._opts.pixelLimit;
-            }
+        this._metrics = imageType(this._dec.data8);
+        if (cond = this._metrics.mime !== 'unsupported') {
+          w = this._metrics.width;
+          h = this._metrics.height;
+          if (cond = w && h && w * h < this._opts.pixelLimit) {
+            [w, h] = this._resize(w, h).map(Math.floor);
+            cond = w && h && w * h < this._opts.pixelLimit;
           }
         }
       }
@@ -115,27 +172,27 @@ export class IIPHandler implements IOscHandler, IResetHandler {
       return true;
     }
 
-    // HACK: The types on Blob are too restrictive, this is a Uint8Array so the browser accepts it
-    const blob = new Blob([this._dec.data8 as Uint8Array<ArrayBuffer>], { type: this._metrics.mime });
-    this._dec.release();
-
-    if (!window.createImageBitmap) {
-      const url = URL.createObjectURL(blob);
-      const img = new Image();
-      return new Promise<boolean>(r => {
-        img.addEventListener('load', () => {
-          URL.revokeObjectURL(url);
-          const canvas = ImageRenderer.createCanvas(window.document, w, h);
-          canvas.getContext('2d')?.drawImage(img, 0, 0, w, h);
-          this._storage.addImage(canvas);
-          r(true);
-        });
-        img.src = url;
-        // sanity measure to avoid terminal blocking from dangling promise
-        // happens from corrupt data (onload never gets fired)
-        setTimeout(() => r(true), 1000);
-      });
+    let blob: Blob | ImageData;
+    if (this._metrics.mime === 'image/qoi') {
+      const data = this._qoiDec.decode(this._dec.data8);
+      blob = new ImageData(
+        new Uint8ClampedArray(data.buffer, data.byteOffset, data.byteLength),
+        this._qoiDec.width,
+        this._qoiDec.height
+      );
+      this._qoiDec.release();
+      if (w === this._qoiDec.width && h === this._qoiDec.height) {
+        // use fast-path if we don't need to rescale
+        this._dec.release();
+        const canvas = ImageRenderer.createCanvas(undefined, this._qoiDec.width, this._qoiDec.height);
+        canvas.getContext('2d')?.putImageData(blob, 0, 0);
+        this._storage.addImage(canvas);
+        return true;
+      }
+    } else {
+      blob = new Blob([this._dec.data8], { type: this._metrics.mime });
     }
+    this._dec.release();
     return createImageBitmap(blob, { resizeWidth: w, resizeHeight: h })
       .then(bm => {
         this._storage.addImage(bm);

addons/addon-image/src/IIPHeaderParser.test.ts

@@ -4,19 +4,20 @@
  */
 
 import { assert } from 'chai';
-import { HeaderParser, HeaderState, IHeaderFields } from './IIPHeaderParser';
+import { HeaderParser, HeaderState, IHeaderFields, SequenceType } from './IIPHeaderParser';
 
 
 const CASES: [string, IHeaderFields][] = [
-  ['File=size=123456;name=dGVzdA==:', {name: 'test', size: 123456}],
-  ['File=size=123456;name=dGVzdA:', {name: 'test', size: 123456}],
+  ['File=size=123456;name=dGVzdA==:', {type: SequenceType.FILE, name: 'test', size: 123456}],
+  ['File=size=123456;name=dGVzdA:', {type: SequenceType.FILE, name: 'test', size: 123456}],
   // utf-8 encoding in name
-  ['File=size=123456;name=w7xtbMOkdXTDnw==:', {name: 'ümläutß', size: 123456}],
-  ['File=size=123456;name=w7xtbMOkdXTDnw:', {name: 'ümläutß', size: 123456}],
+  ['File=size=123456;name=w7xtbMOkdXTDnw==:', {type: SequenceType.FILE, name: 'ümläutß', size: 123456}],
+  ['File=size=123456;name=w7xtbMOkdXTDnw:', {type: SequenceType.FILE, name: 'ümläutß', size: 123456}],
   // full header spec
   [
     'File=inline=1;width=10px;height=20%;preserveAspectRatio=1;size=123456;name=w7xtbMOkdXTDnw:',
     {
+      type: SequenceType.FILE,
       inline: 1,
       width: '10px',
       height: '20%',
@@ -28,6 +29,7 @@ const CASES: [string, IHeaderFields][] = [
   [
     'File=inline=1;width=auto;height=20;preserveAspectRatio=1;size=123456;name=w7xtbMOkdXTDnw:',
     {
+      type: SequenceType.FILE,
       inline: 1,
       width: 'auto',
       height: '20',
@@ -101,7 +103,7 @@ describe('IIPHeaderParser', () => {
     let res = hp.parse(inp, 0, inp.length);
     assert.strictEqual(res, inp.length);
     assert.strictEqual(hp.state, HeaderState.END);
-    assert.deepEqual(hp.fields, {name: 'test', size: 0});
+    assert.deepEqual(hp.fields, {type: SequenceType.FILE, name: 'test', size: 0});
     hp.reset();
     inp = fromBs(CASES[0][0]);
     res = hp.parse(inp, 0, inp.length);
@@ -115,7 +117,7 @@ describe('IIPHeaderParser', () => {
     let res = hp.parse(inp, 0, inp.length);
     assert.strictEqual(res, inp.length);
     assert.strictEqual(hp.state, HeaderState.END);
-    assert.deepEqual(hp.fields, {name: '', size: 123456});
+    assert.deepEqual(hp.fields, {type: SequenceType.FILE, name: '', size: 123456});
     hp.reset();
     inp = fromBs(CASES[0][0]);
     res = hp.parse(inp, 0, inp.length);
@@ -135,4 +137,124 @@ describe('IIPHeaderParser', () => {
     assert.strictEqual(hp.state, HeaderState.END);
     assert.deepEqual(hp.fields, CASES[0][1]);
   });
+  it('FilePart sequence', () => {
+    const hp = new HeaderParser();
+    const inp = fromBs('FilePart=w7xtbMOkdXTDnw');
+    const res = hp.parse(inp, 0, inp.length);
+    assert.strictEqual(res, 9);
+    assert.strictEqual(hp.state, HeaderState.END);
+    assert.deepEqual(hp.fields.type, SequenceType.FILEPART);
+  });
+  it('FilePart sequence - bytewise', () => {
+    const hp = new HeaderParser();
+    const inp = fromBs('FilePart=w7xtbMOkdXTDnw');
+    let res = -2;
+    let pos = 0;
+    while (res === -2 && pos < inp.length) {
+      res = hp.parse(new Uint32Array([inp[pos++]]), 0, 1);
+    }
+    assert.strictEqual(res, 1);
+    assert.strictEqual(hp.state, HeaderState.END);
+    assert.deepEqual(hp.fields.type, SequenceType.FILEPART);
+  });
+  it('MultipartFile sequence', () => {
+    const hp = new HeaderParser();
+    const inp = fromBs('MultipartFile=inline=1;width=10px;height=20%;preserveAspectRatio=1;size=123456;name=w7xtbMOkdXTDnw');
+    let res = hp.parse(inp, 0, inp.length);
+    assert.strictEqual(res, -2);
+    assert.strictEqual(hp.state, HeaderState.VALUE);
+    res = hp.end();
+    assert.strictEqual(res, 0);
+    assert.strictEqual(hp.state, HeaderState.END);
+    assert.deepEqual(
+      hp.fields,
+      {
+        type: SequenceType.MULTIPARTFILE,
+        inline: 1,
+        width: '10px',
+        height: '20%',
+        preserveAspectRatio: 1,
+        size: 123456,
+        name: 'ümläutß'
+      }
+    );
+  });
+  it('MultipartFile sequence - bytewise', () => {
+    const hp = new HeaderParser();
+    const inp = fromBs('MultipartFile=inline=1;width=10px;height=20%;preserveAspectRatio=1;size=123456;name=w7xtbMOkdXTDnw');
+    let res = -2;
+    let pos = 0;
+    while (res === -2 && pos < inp.length) {
+      res = hp.parse(new Uint32Array([inp[pos++]]), 0, 1);
+    }
+    assert.strictEqual(res, -2);
+    assert.strictEqual(hp.state, HeaderState.VALUE);
+    res = hp.end();
+    assert.strictEqual(res, 0);
+    assert.strictEqual(hp.state, HeaderState.END);
+    assert.deepEqual(
+      hp.fields,
+      {
+        type: SequenceType.MULTIPARTFILE,
+        inline: 1,
+        width: '10px',
+        height: '20%',
+        preserveAspectRatio: 1,
+        size: 123456,
+        name: 'ümläutß'
+      }
+    );
+  });
+  it('FileEnd sequence', () => {
+    const hp = new HeaderParser();
+    const inp = fromBs('FileEnd');
+    let res = hp.parse(inp, 0, inp.length);
+    assert.strictEqual(res, -2);
+    assert.strictEqual(hp.state, HeaderState.START);
+    res = hp.end();
+    assert.strictEqual(res, 0);
+    assert.strictEqual(hp.state, HeaderState.END);
+    assert.deepEqual(hp.fields.type, SequenceType.FILEEND);
+  });
+  it('FileEnd sequence - bytewise', () => {
+    const hp = new HeaderParser();
+    const inp = fromBs('FileEnd');
+    let res = -2;
+    let pos = 0;
+    while (res === -2 && pos < inp.length) {
+      res = hp.parse(new Uint32Array([inp[pos++]]), 0, 1);
+    }
+    assert.strictEqual(res, -2);
+    assert.strictEqual(hp.state, HeaderState.START);
+    res = hp.end();
+    assert.strictEqual(res, 0);
+    assert.strictEqual(hp.state, HeaderState.END);
+    assert.deepEqual(hp.fields.type, SequenceType.FILEEND);
+  });
+  it('ReportCellSize sequence', () => {
+    const hp = new HeaderParser();
+    const inp = fromBs('ReportCellSize');
+    let res = hp.parse(inp, 0, inp.length);
+    assert.strictEqual(res, -2);
+    assert.strictEqual(hp.state, HeaderState.START);
+    res = hp.end();
+    assert.strictEqual(res, 0);
+    assert.strictEqual(hp.state, HeaderState.END);
+    assert.deepEqual(hp.fields, { type: SequenceType.REPORTCELLSIZE });
+  });
+  it('ReportCellSize sequence - bytewise', () => {
+    const hp = new HeaderParser();
+    const inp = fromBs('ReportCellSize');
+    let res = -2;
+    let pos = 0;
+    while (res === -2 && pos < inp.length) {
+      res = hp.parse(new Uint32Array([inp[pos++]]), 0, 1);
+    }
+    assert.strictEqual(res, -2);
+    assert.strictEqual(hp.state, HeaderState.START);
+    res = hp.end();
+    assert.strictEqual(res, 0);
+    assert.strictEqual(hp.state, HeaderState.END);
+    assert.deepEqual(hp.fields, { type: SequenceType.REPORTCELLSIZE });
+  });
 });

addons/addon-image/src/IIPHeaderParser.ts

@@ -6,9 +6,27 @@
 // eslint-disable-next-line
 declare const Buffer: any;
 
+export const enum HeaderState {
+  START = 0,
+  ABORT = 1,
+  KEY = 2,
+  VALUE = 3,
+  END = 4
+}
+
+export const enum SequenceType {
+  INVALID = 0,
+  FILE = 1,
+  MULTIPARTFILE = 2,
+  FILEPART = 3,
+  FILEEND = 4,
+  REPORTCELLSIZE = 5
+}
 
 export interface IHeaderFields {
   [key: string]: number | string | Uint32Array | null | undefined;
+  // sequence type
+  type: SequenceType;
   // base-64 encoded filename. Defaults to "Unnamed file".
   name: string;
   // File size in bytes. The file transfer will be canceled if this size is exceeded.
@@ -29,14 +47,6 @@ export interface IHeaderFields {
   inline?: number;
 }
 
-export const enum HeaderState {
-  START = 0,
-  ABORT = 1,
-  KEY = 2,
-  VALUE = 3,
-  END = 4
-}
-
 // field value decoders
 
 // ASCII bytes to string
@@ -92,7 +102,19 @@ const DECODERS: {[key: string]: (v: Uint32Array) => number | string} = {
 };
 
 
+// sequence type markers
+// File
 const FILE_MARKER = [70, 105, 108, 101];
+// MultipartFile
+const MULTIPARTFILE_MARKER = [77, 117, 108, 116, 105, 112, 97, 114, 116, 70, 105, 108, 101];
+// FilePart
+const FILEPART_MARKER = [70, 105, 108, 101, 80, 97, 114, 116];
+// FileEnd
+const FILEEND_MARKER = [70, 105, 108, 101, 69, 110, 100];
+// ReportCellSize
+const REPORTCELLSIZE_MARKER = [82, 101, 112, 111, 114, 116, 67, 101, 108, 108, 83, 105, 122, 101];
+
+// max allowed chars for sequence header
 const MAX_FIELDCHARS = 1024;
 
 
@@ -111,12 +133,43 @@ export class HeaderParser {
     this._key = '';
   }
 
+  public end(): number {
+    if (this.state === HeaderState.START) {
+      if (this._position === FILEEND_MARKER.length) {
+        for (let k = 0; k < FILEEND_MARKER.length; ++k) {
+          if (this._buffer[k] !== FILEEND_MARKER[k]) return this._a();
+        }
+        this.fields['type'] = SequenceType.FILEEND;
+        this.state = HeaderState.END;
+        return 0;
+      }
+      if (this._position === REPORTCELLSIZE_MARKER.length) {
+        for (let k = 0; k < REPORTCELLSIZE_MARKER.length; ++k) {
+          if (this._buffer[k] !== REPORTCELLSIZE_MARKER[k]) return this._a();
+        }
+        this.fields['type'] = SequenceType.REPORTCELLSIZE;
+        this.state = HeaderState.END;
+        return 0;
+      }
+      return this._a();
+    }
+    if (this.state === HeaderState.END) return 0;
+    if (this.state === HeaderState.VALUE
+      && this.fields.type === SequenceType.MULTIPARTFILE
+    ) {
+      if (!this._storeValue(this._position)) return this._a();
+      this.state = HeaderState.END;
+      return 0;
+    }
+    return this._a();
+  }
+
   public parse(data: Uint32Array, start: number, end: number): number {
     let state = this.state;
     let pos = this._position;
     const buffer = this._buffer;
     if (state === HeaderState.ABORT || state === HeaderState.END) return -1;
-    if (state === HeaderState.START && pos > 6) return -1;
+    if (state === HeaderState.START && pos > 14) return -1;
     for (let i = start; i < end; ++i) {
       const c = data[i];
       switch (c) {
@@ -127,8 +180,29 @@ export class HeaderParser {
           break;
         case 61: // =
           if (state === HeaderState.START) {
-            for (let k = 0; k < FILE_MARKER.length; ++k) {
-              if (buffer[k] !== FILE_MARKER[k]) return this._a();
+            if (buffer[0] === 70) {
+              // 'File' or 'FilePart'
+              let k = 0;
+              for (; k < FILE_MARKER.length; ++k) {
+                if (buffer[k] !== FILE_MARKER[k]) return this._a();
+              }
+              this.fields['type'] = SequenceType.FILE;
+              if (pos === FILEPART_MARKER.length) {
+                for (; k < FILEPART_MARKER.length; ++k) {
+                  if (buffer[k] !== FILEPART_MARKER[k]) return this._a();
+                }
+                this.fields['type'] = SequenceType.FILEPART;
+                this.state = HeaderState.END;
+                return i + 1;
+              }
+            } else if (buffer[0] === 77) {
+              // 'MultipartFile'
+              for (let k = 0; k < MULTIPARTFILE_MARKER.length; ++k) {
+                if (buffer[k] !== MULTIPARTFILE_MARKER[k]) return this._a();
+              }
+              this.fields['type'] = SequenceType.MULTIPARTFILE;
+            } else {
+              return this._a();
             }
             state = HeaderState.KEY;
             pos = 0;
@@ -158,6 +232,7 @@ export class HeaderParser {
   }
 
   private _a(): number {
+    this.fields.type = SequenceType.INVALID;
     this.state = HeaderState.ABORT;
     return -1;
   }

addons/addon-image/src/IIPImageStorage.ts

@@ -3,6 +3,7 @@
  * @license MIT
  */
 
+import { IAddImageOpts } from 'Types';
 import { ImageStorage } from './ImageStorage';
 
 /**
@@ -12,6 +13,7 @@ import { ImageStorage } from './ImageStorage';
  * - Always uses scrolling mode (cursor advances with image)
  */
 export class IIPImageStorage {
+  private _addImageOpts: IAddImageOpts = { scrolling: true, layer: 'top', zIndex: 0, cursorPos: 'iip' };
   constructor(
     private readonly _storage: ImageStorage
   ) {}
@@ -21,6 +23,6 @@ export class IIPImageStorage {
    * Always uses scrolling mode — cursor advances past the image.
    */
   public addImage(img: HTMLCanvasElement | ImageBitmap): void {
-    this._storage.addImage(img, true);
+    this._storage.addImage(img, this._addImageOpts);
   }
 }

addons/addon-image/src/IIPMetrics.test.ts

@@ -30,7 +30,8 @@ const TEST_IMAGES: [string, IMetrics][] = [
   ['iphone_hdr_YES.jpg', { mime: 'image/jpeg', width: 3264, height: 2448 }],
   ['nikon-e950.jpg', { mime: 'image/jpeg', width: 800, height: 600 }],
   ['agfa-makernotes.jpg', { mime: 'image/jpeg', width: 8, height: 8 }],
-  ['sony-alpha-6000.jpg', { mime: 'image/jpeg', width: 6000, height: 4000 }]
+  ['sony-alpha-6000.jpg', { mime: 'image/jpeg', width: 6000, height: 4000 }],
+  ['dice.qoi', { mime: 'image/qoi', width: 800, height: 600 }],
 ];
 
 

addons/addon-image/src/IIPMetrics.ts

@@ -4,7 +4,7 @@
  */
 
 
-export type ImageType = 'image/png' | 'image/jpeg' | 'image/gif' | 'unsupported' | '';
+export type ImageType = 'image/png' | 'image/jpeg' | 'image/gif' | 'image/qoi' | 'unsupported' | '';
 
 export interface IMetrics {
   mime: ImageType;
@@ -45,6 +45,14 @@ export function imageType(d: Uint8Array): IMetrics {
       height: d[9] << 8 | d[8]
     };
   }
+  // QOI: qoif
+  if (d32[0] === 0x66696F71) {
+    return {
+      mime: 'image/qoi',
+      width: d[4] << 24 | d[5] << 16 | d[6] << 8 | d[7],
+      height: d[8] << 24 | d[9] << 16 | d[10] << 8 | d[11]
+    };
+  }
   return UNSUPPORTED_TYPE;
 }
 

addons/addon-image/src/ImageAddon.ts

@@ -16,20 +16,61 @@ import { SixelImageStorage } from './SixelImageStorage';
 import { IIPImageStorage } from './IIPImageStorage';
 import { ITerminalExt, IImageAddonOptions, IResetHandler } from './Types';
 
+
+/**
+ * Document VT features provided by this addon.
+ *
+ * @vt: #E[Supported via @xterm/addon-image.] DCS SIXEL "SIXEL Graphics"  "DCS Ps ; Ps ; Ps ; q Pt ST"  "Draw SIXEL image."
+ *
+ * Sixel support is provided by the addon @xterm/addon-image with these limitations:
+ * - immediate coloring (no shared palette, allows high color settings of `img2sixel`)
+ * - max. palette size of 4096 colors
+ * - max. pixel width of 16K
+ * - max. 25 MB per sixel sequence
+ * - VT340 cursor positioning (begin of last sixel data row)
+ *
+ * See [addon readme](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-image) for more details.
+ *
+ *
+ * @vt: #E[Supported via @xterm/addon-image.] OSC 1337  "iTerm2 Commands"   "OSC 1337 ; Pt BEL"  "Custom iTerm2 commands."
+ *
+ * Only the inline image protocol (IIP) is supported by the addon @xterm/addon-image with
+ * the following limitations:
+ * - sequence:
+ *   - format: `OSC 1337 ; File=inline=1 ; size=<unencoded size> ; ... : <base64 payload> BEL`
+ *   - size param must be set and payload may not exceed CEIL(size * 4 / 3)
+ *   - strict base64 handling as of RFC4648 §4 (standard alphabet, optional padding,
+ *     no separator bytes allowed)
+ *   - supported params: size, name, width, height, preserveAspectRatio
+ * - image formats: PNG, JPEG and GIF
+ * - no animation support (renders first image of a GIF)
+ * - no multipart support
+ * - VT340 cursor positioning (begin of last sixel data row)
+ *
+ * See [addon readme](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-image)
+ * and [iTerm2 IIP docs](https://iterm2.com/documentation-images.html) for more details.
+ *
+ *
+ * @vt: #E[Supported via @xterm/addon-image.] APC KITTY_GRAPHICS "Kitty Graphics"  "APC G Pt ST"  "Kitty Graphics Protocol."
+ *
+ * Kitty graphics support is provided by the addon @xterm/addon-image.
+ * Note that while basic image output already works, this is still work in progress.
+ */
+
 // default values of addon ctor options
 const DEFAULT_OPTIONS: IImageAddonOptions = {
   enableSizeReports: true,
   pixelLimit: 16777216, // limit to 4096 * 4096 pixels
   sixelSupport: true,
   sixelScrolling: true,
-  sixelPaletteLimit: 256,
-  sixelSizeLimit: 25000000,
+  sixelPaletteLimit: 4096,
+  sixelSizeLimit: 33554432,
   storageLimit: 128,
   showPlaceholder: true,
   iipSupport: true,
-  iipSizeLimit: 20000000,
+  iipSizeLimit: 33554432,
   kittySupport: true,
-  kittySizeLimit: 20000000
+  kittySizeLimit: 33554432
 };
 
 // max palette size supported by the sixel lib (compile time setting)
@@ -96,11 +137,6 @@ export class ImageAddon implements ITerminalAddon, IImageApi {
 
     // enable size reports
     if (this._opts.enableSizeReports) {
-      // const windowOptions = terminal.getOption('windowOptions');
-      // windowOptions.getWinSizePixels = true;
-      // windowOptions.getCellSizePixels = true;
-      // windowOptions.getWinSizeChars = true;
-      // terminal.setOption('windowOptions', windowOptions);
       const windowOps = terminal.options.windowOptions ?? {};
       windowOps.getWinSizePixels = true;
       windowOps.getCellSizePixels = true;
@@ -166,7 +202,7 @@ export class ImageAddon implements ITerminalAddon, IImageApi {
       this._disposeLater(
         kittyStorage,
         kittyHandler,
-        terminal._core._inputHandler._parser.registerApcHandler(0x47, kittyHandler)
+        terminal._core._inputHandler._parser.registerApcHandler({ final: 'G' }, kittyHandler)
       );
     }
   }
@@ -219,7 +255,7 @@ export class ImageAddon implements ITerminalAddon, IImageApi {
   }
 
   private _report(s: string): void {
-    this._terminal?._core.coreService.triggerDataEvent(s);
+    this._terminal?._core.input(s, false);
   }
 
   private _decset(params: (number | number[])[]): boolean {

addons/addon-image/src/ImageRenderer.ts

@@ -8,8 +8,10 @@ import { IDisposable } from '@xterm/xterm';
 import { ICellSize, ImageLayer, ITerminalExt, IImageSpec, IRenderDimensions, IRenderService } from './Types';
 import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
 
-const PLACEHOLDER_LENGTH = 4096;
-const PLACEHOLDER_HEIGHT = 24;
+const enum Constants {
+  PLACEHOLDER_LENGTH = 4096,
+  PLACEHOLDER_HEIGHT = 24
+}
 
 /**
  * ImageRenderer - terminal frontend extension:
@@ -110,7 +112,7 @@ export class ImageRenderer extends Disposable implements IDisposable {
   public showPlaceholder(value: boolean): void {
     if (value) {
       if (!this._placeholder && this.cellSize.height !== -1) {
-        this._createPlaceHolder(Math.max(this.cellSize.height + 1, PLACEHOLDER_HEIGHT));
+        this._createPlaceHolder(Math.max(this.cellSize.height + 1, Constants.PLACEHOLDER_HEIGHT));
       }
     } else {
       this._placeholderBitmap?.close();
@@ -144,7 +146,7 @@ export class ImageRenderer extends Disposable implements IDisposable {
   public clearLines(start: number, end: number, layer?: ImageLayer): void {
     const y = start * (this.dimensions?.css.cell.height || 0);
     const w = this.dimensions?.css.canvas.width || 0;
-    const h = (++end - start) * (this.dimensions?.css.cell.height || 0);
+    const h = (end + 1 - start) * (this.dimensions?.css.cell.height || 0);
     if (!layer || layer === 'top') {
       this._layers.get('top')?.clearRect(0, y, w, h);
     }
@@ -249,7 +251,7 @@ export class ImageRenderer extends Disposable implements IDisposable {
       }
 
       if (!this._placeholder) {
-        this._createPlaceHolder(Math.max(height + 1, PLACEHOLDER_HEIGHT));
+        this._createPlaceHolder(Math.max(height + 1, Constants.PLACEHOLDER_HEIGHT));
       } else if (height >= this._placeholder!.height) {
         this._createPlaceHolder(height + 1);
       }
@@ -358,7 +360,7 @@ export class ImageRenderer extends Disposable implements IDisposable {
       canvas.style.zIndex = '0';
       screenElement.appendChild(canvas);
     }
-    const ctx = canvas.getContext('2d', { alpha: true, desynchronized: true });
+    const ctx = canvas.getContext('2d', { alpha: true });
     if (!ctx) {
       canvas.remove();
       return;
@@ -379,7 +381,7 @@ export class ImageRenderer extends Disposable implements IDisposable {
     return this._layers.has(layer);
   }
 
-  private _createPlaceHolder(height: number = PLACEHOLDER_HEIGHT): void {
+  private _createPlaceHolder(height: number = Constants.PLACEHOLDER_HEIGHT): void {
     this._placeholderBitmap?.close();
     this._placeholderBitmap = undefined;
 
@@ -403,7 +405,7 @@ export class ImageRenderer extends Disposable implements IDisposable {
     ctx.putImageData(imgData, 0, 0);
 
     // create placeholder line, width aligned to blueprint width
-    const width = (screen.width + bWidth - 1) & ~(bWidth - 1) || PLACEHOLDER_LENGTH;
+    const width = (screen.width + bWidth - 1) & ~(bWidth - 1) || Constants.PLACEHOLDER_LENGTH;
     this._placeholder = ImageRenderer.createCanvas(this.document, width, height);
     const ctx2 = this._placeholder.getContext('2d', { alpha: false });
     if (!ctx2) {

addons/addon-image/src/ImageStorage.ts

@@ -5,7 +5,11 @@
 
 import { IDisposable } from '@xterm/xterm';
 import { ImageRenderer } from './ImageRenderer';
-import { ITerminalExt, IExtendedAttrsImage, IImageAddonOptions, IImageSpec, IBufferLineExt, BgFlags, Cell, Content, ICellSize, ExtFlags, Attributes, UnderlineStyle, ImageLayer } from './Types';
+import {
+  ITerminalExt, IExtendedAttrsImage, IImageAddonOptions, IImageSpec,
+  IBufferLineExt, BgFlags, Cell, Content, ICellSize, ExtFlags, Attributes,
+  UnderlineStyle, IAddImageOpts
+} from './Types';
 
 
 // fallback default cell size
@@ -235,13 +239,15 @@ export class ImageStorage implements IDisposable {
   /**
    * Method to add an image to the storage.
    * @param img - The image to add (canvas or bitmap).
-   * @param scrolling - When true, cursor advances with the image (lineFeed per row).
-   *   When false, image is placed at (0,0) and cursor is restored (DECSET 80 / sixel origin mode).
-   * @param layer - Which canvas layer to render on ('top' or 'bottom').
-   * @param zIndex - Z-index for image layering within the same layer.
+   * @param opts - Options for addImage:
+   *   - scrolling:  When true, cursor advances with the image.
+   *                 When false, image is placed at ORIGIN and cursor does not move.
+   *   - layer:      Which canvas layer to render on ('top' or 'bottom').
+   *   - zIndex:     Z-index for image layering within the same layer.
+   *   - cursorPos:  'vt340' for bottom-left, 'iip' for bottom.right.
    * @returns The internal image ID assigned to the stored image.
    */
-  public addImage(img: HTMLCanvasElement | ImageBitmap, scrolling: boolean, layer: ImageLayer = 'top', zIndex: number = 0): number {
+  public addImage(img: HTMLCanvasElement | ImageBitmap, opts: IAddImageOpts): number {
     // never allow storage to exceed memory limit
     this._evictOldest(img.width * img.height);
 
@@ -263,7 +269,7 @@ export class ImageStorage implements IDisposable {
     let offset = originX;
     let tileCount = 0;
 
-    if (!scrolling) {
+    if (!opts.scrolling) {
       buffer.x = 0;
       buffer.y = 0;
       offset = 0;
@@ -277,7 +283,7 @@ export class ImageStorage implements IDisposable {
         this._writeToCell(line as IBufferLineExt, offset + col, imageId, row * cols + col);
         tileCount++;
       }
-      if (scrolling) {
+      if (opts.scrolling) {
         if (row < rows - 1) this._terminal._core._inputHandler.lineFeed();
       } else {
         if (++buffer.y >= termRows) break;
@@ -287,8 +293,12 @@ export class ImageStorage implements IDisposable {
     this._terminal._core._inputHandler._dirtyRowTracker.markDirty(buffer.y);
 
     // cursor positioning modes
-    if (scrolling) {
-      buffer.x = offset;
+    if (opts.scrolling) {
+      if (opts.cursorPos === 'iip') {
+        buffer.x = Math.min(offset + cols, termCols);
+      } else {
+        buffer.x = offset;
+      }
     } else {
       buffer.x = originX;
       buffer.y = originY;
@@ -331,8 +341,8 @@ export class ImageStorage implements IDisposable {
       marker: endMarker || undefined,
       tileCount,
       bufferType: this._terminal.buffer.active.type,
-      layer,
-      zIndex
+      layer: opts.layer,
+      zIndex: opts.zIndex
     };
 
     // finally add the image
@@ -455,7 +465,6 @@ export class ImageStorage implements IDisposable {
             if (!nextE || nextE.imageId !== imageId || nextE.tileId !== startTile + count) {
               break;
             }
-            e = nextE;
             count++;
           }
           col--;

addons/addon-image/src/SixelHandler.ts

@@ -91,7 +91,7 @@ export class SixelHandler implements IDcsHandler, IResetHandler {
     const height = this._dec.height;
 
     // partial fix for https://github.com/jerch/xterm-addon-image/issues/37
-    if (!width || ! height) {
+    if (!width || !height) {
       if (height) {
         this._storage.advanceCursor(height);
       }

addons/addon-image/src/SixelImageStorage.ts

@@ -4,7 +4,7 @@
  */
 
 import { ImageStorage, CELL_SIZE_DEFAULT } from './ImageStorage';
-import { IImageAddonOptions, ITerminalExt } from './Types';
+import { IImageAddonOptions, ITerminalExt, IAddImageOpts } from './Types';
 import { ImageRenderer } from './ImageRenderer';
 
 /**
@@ -15,6 +15,7 @@ import { ImageRenderer } from './ImageRenderer';
  * - advanceCursor for empty sixels carrying only height
  */
 export class SixelImageStorage {
+  private _addImageOpts: IAddImageOpts = { scrolling: true, layer: 'top', zIndex: 0, cursorPos: 'vt340' };
   constructor(
     private readonly _storage: ImageStorage,
     private readonly _opts: IImageAddonOptions,
@@ -27,7 +28,8 @@ export class SixelImageStorage {
    * Cursor behavior depends on the sixelScrolling option (DECSET 80).
    */
   public addImage(img: HTMLCanvasElement | ImageBitmap): void {
-    this._storage.addImage(img, this._opts.sixelScrolling);
+    this._addImageOpts.scrolling = this._opts.sixelScrolling;
+    this._storage.addImage(img, this._addImageOpts);
   }
 
   /**

addons/addon-image/src/Types.ts

@@ -100,6 +100,14 @@ export interface ICellSize {
 }
 
 export type ImageLayer = 'top' | 'bottom';
+export type CursorPos = 'vt340' | 'iip';
+
+export interface IAddImageOpts {
+  scrolling: boolean;
+  layer: ImageLayer;
+  zIndex: number;
+  cursorPos: CursorPos;
+}
 
 export interface IImageSpec {
   orig: HTMLCanvasElement | ImageBitmap | undefined;

addons/addon-image/src/kitty/KittyGraphicsHandler.ts

@@ -16,24 +16,23 @@ import {
   IKittyCommand,
   IPendingTransmission,
   IKittyImageData,
-  BYTES_PER_PIXEL_RGB,
-  BYTES_PER_PIXEL_RGBA,
-  ALPHA_OPAQUE,
+  KittyPixelConstants,
   parseKittyCommand
 } from './KittyGraphicsTypes';
 
-// Memory limit for base64 decoder (4MB, same as IIPHandler)
-const DECODER_KEEP_DATA = 4194304;
-const DECODER_INITIAL_DATA = 4194304; // 4MB
+const enum Constants {
+  // Memory limit for base64 decoder (4MB, same as IIPHandler)
+  DECODER_KEEP_DATA = 4194304,
+  DECODER_INITIAL_DATA = 4194304, // 4MB
+  // Local mirror of const enum (esbuild can't inline const enums from external packages)
+  DECODER_OK = 0,
+  // Maximum control data size
+  MAX_CONTROL_DATA_SIZE = 512,
+  // Semicolon codepoint
+  SEMICOLON = 0x3B
+}
 
-// Local mirror of const enum (esbuild can't inline const enums from external packages)
-const DECODER_OK: DecodeStatus.OK = 0;
-
-// Maximum control data size
-const MAX_CONTROL_DATA_SIZE = 512;
-
-// Semicolon codepoint
-const SEMICOLON = 0x3B;
+const DECODER_OK = Constants.DECODER_OK as unknown as DecodeStatus.OK;
 
 // Kitty graphics protocol handler with streaming base64 decoding.
 export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDisposable {
@@ -50,7 +49,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
   private _inControlData = true;
 
   // Buffer for control data.
-  private _controlData = new Uint32Array(MAX_CONTROL_DATA_SIZE);
+  private _controlData = new Uint32Array(Constants.MAX_CONTROL_DATA_SIZE);
   private _controlLength = 0;
 
   // Pre-calculated encoded size limit
@@ -77,7 +76,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
     // Convert decoded size limit -> max encoded bytes.
     this._maxEncodedBytes = Math.ceil(this._opts.kittySizeLimit * 4 / 3);
     // ensure we preallocate more than configured limit while using 4mb initial size.
-    this._initialEncodedBytes = Math.min(DECODER_INITIAL_DATA, this._maxEncodedBytes);
+    this._initialEncodedBytes = Math.min(Constants.DECODER_INITIAL_DATA, this._maxEncodedBytes);
   }
 
   public reset(): void {
@@ -129,7 +128,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
       // Scan for semicolon
       let controlEnd = end;
       for (let i = start; i < end; i++) {
-        if (data[i] === SEMICOLON) {
+        if (data[i] === Constants.SEMICOLON) {
           this._inControlData = false;
           controlEnd = i;
           break;
@@ -138,7 +137,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
 
       // Copy control data
       const copyLength = controlEnd - start;
-      if (this._controlLength + copyLength > MAX_CONTROL_DATA_SIZE) {
+      if (this._controlLength + copyLength > Constants.MAX_CONTROL_DATA_SIZE) {
         this._aborted = true;
         return;
       }
@@ -201,7 +200,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
       this._activeDecoder = pending.decoder;
     }
     if (!this._activeDecoder) {
-      this._activeDecoder = new Base64Decoder(DECODER_KEEP_DATA, this._maxEncodedBytes, this._initialEncodedBytes);
+      this._activeDecoder = new Base64Decoder(Constants.DECODER_KEEP_DATA, this._maxEncodedBytes, this._initialEncodedBytes);
       this._activeDecoder.init();
     }
 
@@ -484,7 +483,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
         return true;
       }
 
-      const bytesPerPixel = format === KittyFormat.RGBA ? BYTES_PER_PIXEL_RGBA : BYTES_PER_PIXEL_RGB;
+      const bytesPerPixel = format === KittyFormat.RGBA ? KittyPixelConstants.BYTES_PER_PIXEL_RGBA : KittyPixelConstants.BYTES_PER_PIXEL_RGB;
       const expectedBytes = width * height * bytesPerPixel;
 
       if (bytes.length < expectedBytes) {
@@ -534,8 +533,8 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
 
   private _sendResponse(id: number, message: string, quiet: number, placementId?: number): void {
     const isOk = message === 'OK';
-    if (isOk && quiet === 1) return;
-    if (!isOk && quiet === 2) return;
+    if (isOk && quiet >= 1) return;
+    if (!isOk && quiet >= 2) return;
 
     const pPart = placementId ? `,p=${placementId}` : '';
     const response = `\x1b_Gi=${id}${pPart};${message}\x1b\\`;
@@ -723,7 +722,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
       throw new Error('Width and height required for raw pixel data');
     }
 
-    const bytesPerPixel = image.format === KittyFormat.RGBA ? BYTES_PER_PIXEL_RGBA : BYTES_PER_PIXEL_RGB;
+    const bytesPerPixel = image.format === KittyFormat.RGBA ? KittyPixelConstants.BYTES_PER_PIXEL_RGBA : KittyPixelConstants.BYTES_PER_PIXEL_RGB;
     const expectedBytes = width * height * bytesPerPixel;
 
     if (bytes.length < expectedBytes) {
@@ -734,13 +733,13 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
 
     if (image.format === KittyFormat.RGBA) {
       // RGBA: use bytes directly — no copy needed
-      return createImageBitmap(new ImageData(new Uint8ClampedArray(bytes.buffer as ArrayBuffer, bytes.byteOffset, pixelCount * BYTES_PER_PIXEL_RGBA), width, height));
+      return createImageBitmap(new ImageData(new Uint8ClampedArray(bytes.buffer as ArrayBuffer, bytes.byteOffset, pixelCount * KittyPixelConstants.BYTES_PER_PIXEL_RGBA), width, height));
     }
 
     // RGB→RGBA: interleave alpha using uint32 block processing (4 pixels per iteration).
     // 3 uint32 reads + 4 uint32 writes per 4 pixels vs 28 byte reads/writes — ~6x faster.
     // Assumes little-endian (all modern browsers/Node.js).
-    const data = new Uint8ClampedArray(pixelCount * BYTES_PER_PIXEL_RGBA);
+    const data = new Uint8ClampedArray(pixelCount * KittyPixelConstants.BYTES_PER_PIXEL_RGBA);
     const src32 = new Uint32Array(bytes.buffer, bytes.byteOffset, Math.floor(bytes.byteLength / 4));
     const dst32 = new Uint32Array(data.buffer);
     const alignedPixels = pixelCount & ~3;  // round down to multiple of 4
@@ -759,15 +758,15 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
     }
 
     // Handle remaining 1–3 pixels
-    let srcByte = alignedPixels * BYTES_PER_PIXEL_RGB;
-    let dstByte = alignedPixels * BYTES_PER_PIXEL_RGBA;
+    let srcByte = alignedPixels * KittyPixelConstants.BYTES_PER_PIXEL_RGB;
+    let dstByte = alignedPixels * KittyPixelConstants.BYTES_PER_PIXEL_RGBA;
     for (let i = alignedPixels; i < pixelCount; i++) {
       data[dstByte]     = bytes[srcByte];
       data[dstByte + 1] = bytes[srcByte + 1];
       data[dstByte + 2] = bytes[srcByte + 2];
-      data[dstByte + 3] = ALPHA_OPAQUE;
-      srcByte += BYTES_PER_PIXEL_RGB;
-      dstByte += BYTES_PER_PIXEL_RGBA;
+      data[dstByte + 3] = KittyPixelConstants.ALPHA_OPAQUE;
+      srcByte += KittyPixelConstants.BYTES_PER_PIXEL_RGB;
+      dstByte += KittyPixelConstants.BYTES_PER_PIXEL_RGBA;
     }
 
     return createImageBitmap(new ImageData(data, width, height));

addons/addon-image/src/kitty/KittyGraphicsTypes.ts

@@ -82,9 +82,11 @@ export const enum KittyKey {
 }
 
 // Pixel format constants
-export const BYTES_PER_PIXEL_RGB = 3;
-export const BYTES_PER_PIXEL_RGBA = 4;
-export const ALPHA_OPAQUE = 255;
+export const enum KittyPixelConstants {
+  BYTES_PER_PIXEL_RGB = 3,
+  BYTES_PER_PIXEL_RGBA = 4,
+  ALPHA_OPAQUE = 255
+}
 
 // Parsed Kitty graphics command.
 export interface IKittyCommand {

addons/addon-image/src/kitty/KittyImageStorage.ts

@@ -5,7 +5,7 @@
 
 import { IDisposable } from '@xterm/xterm';
 import { ImageStorage } from '../ImageStorage';
-import { ImageLayer } from '../Types';
+import { ImageLayer, IAddImageOpts } from '../Types';
 import { IKittyImageData } from './KittyGraphicsTypes';
 
 // Kitty-specific image storage controller.
@@ -42,6 +42,7 @@ export class KittyImageStorage implements IDisposable {
       this._images.delete(kittyId);
     }
   };
+  private _addImageOpts: IAddImageOpts = { scrolling: true, layer: 'top', zIndex: 0, cursorPos: 'iip' };
 
   constructor(
     private readonly _storage: ImageStorage
@@ -98,7 +99,10 @@ export class KittyImageStorage implements IDisposable {
     if (oldStorageId !== undefined) {
       this._storageIdToKittyId.delete(oldStorageId);
     }
-    const storageId = this._storage.addImage(image, scrolling, layer, zIndex);
+    this._addImageOpts.scrolling = scrolling;
+    this._addImageOpts.layer = layer;
+    this._addImageOpts.zIndex = zIndex;
+    const storageId = this._storage.addImage(image, this._addImageOpts);
     this._kittyIdToStorageId.set(kittyId, storageId);
     this._storageIdToKittyId.set(storageId, kittyId);
   }

addons/addon-image/test/ImageAddon.test.ts

@@ -8,6 +8,7 @@ import { readFileSync } from 'fs';
 import { FINALIZER, introducer, sixelEncode } from 'sixel';
 import { ITestContext, createTestContext, openTerminal, pollFor, timeout } from '../../../test/playwright/TestUtils';
 import { deepStrictEqual, ok, strictEqual } from 'assert';
+import QoiEncoder from 'xterm-wasm-parts/lib/qoi/QoiEncoder.wasm';
 
 /**
  * Plugin ctor options.
@@ -74,6 +75,10 @@ const TESTDATA_IIP: [string, [number, number]][] = [
   [readFileSync('./addons/addon-image/fixture/iip/w3c_jpg.iip', { encoding: 'utf-8' }), [72, 48]],
   [readFileSync('./addons/addon-image/fixture/iip/w3c_png.iip', { encoding: 'utf-8' }), [72, 48]]
 ];
+const PALETTE_PNG_BASE64 = readFileSync('./addons/addon-image/fixture/palette.png').toString('base64');
+const qoiEnc = new QoiEncoder(1024*1024);
+const qoiData = qoiEnc.encode(TESTDATA.bytes, 640, 80);
+const PALETTE_QOI_BASE64 = Buffer.from(qoiData).toString('base64');
 
 let ctx: ITestContext;
 test.beforeAll(async ({ browser }) => {
@@ -85,11 +90,6 @@ test.afterAll(async () => await ctx.page.close());
 test.describe('ImageAddon', () => {
 
   test.beforeEach(async ({}, testInfo) => {
-    // DEBT: This test never worked on webkit
-    if (ctx.browser.browserType().name() === 'webkit') {
-      testInfo.skip();
-      return;
-    }
     await ctx.page.evaluate(`
       window.term.reset()
       window.imageAddon?.dispose();
@@ -132,13 +132,13 @@ test.describe('ImageAddon', () => {
         sixelSupport: true,
         sixelScrolling: true,
         sixelPaletteLimit: 512,  // set to 512 to get example image working
-        sixelSizeLimit: 25000000,
+        sixelSizeLimit: 33554432,
         storageLimit: 128,
         showPlaceholder: true,
         iipSupport: true,
-        iipSizeLimit: 20000000,
+        iipSizeLimit: 33554432,
         kittySupport: true,
-        kittySizeLimit: 20000000
+        kittySizeLimit: 33554432
       };
       deepStrictEqual(await ctx.page.evaluate(`window.imageAddon._opts`), DEFAULT_OPTIONS);
     });
@@ -290,6 +290,67 @@ test.describe('ImageAddon', () => {
     });
   });
 
+  test.describe('IIP support', () => {
+    test('size params is optional/informative', async () => {
+      // too small size param
+      await ctx.proxy.write(`\x1b]1337;File=inline=1;size=5:${PALETTE_PNG_BASE64}\x07`);
+      deepStrictEqual(await getOrigSize(1), [640, 80]);
+      // no size aparm at all
+      await ctx.proxy.write(`\x1b[10H\x1b]1337;File=inline=1:${PALETTE_QOI_BASE64}\x07`);
+      deepStrictEqual(await getOrigSize(2), [640, 80]);
+    });
+    test.skip('FilePart support - bytewise', async () => {
+      // opener
+      await ctx.proxy.write(`\x1b]1337;MultipartFile=inline=1\x07`);
+      // byte-wise
+      for (let i = 0; i < PALETTE_PNG_BASE64.length; ++i) {
+        await ctx.proxy.write(`\x1b]1337;FilePart=${PALETTE_PNG_BASE64[i]}\x07`);
+      }
+      // finalizer
+      await ctx.proxy.write(`\x1b]1337;FileEnd\x07`);
+      deepStrictEqual(await getOrigSize(1), [640, 80]);
+    });
+    test('FilePart support - chunks', async () => {
+      // opener
+      await ctx.proxy.write(`\x1b]1337;MultipartFile=inline=1\x07`);
+      // chunks
+      for (let i = 0; i < PALETTE_PNG_BASE64.length; i += 256) {
+        await ctx.proxy.write(`\x1b]1337;FilePart=${PALETTE_PNG_BASE64.slice(i, i + 256)}\x07`);
+      }
+      // finalizer
+      await ctx.proxy.write(`\x1b]1337;FileEnd\x07`);
+      deepStrictEqual(await getOrigSize(1), [640, 80]);
+    });
+    test('FilePart support - edgecases', async () => {
+      // multiple opener do not harm
+      for (let i = 0; i < 10; ++i) {
+        await ctx.proxy.write(`\x1b]1337;MultipartFile=inline=1\x07`);
+      }
+      // multiple finalizer do not harm
+      for (let i = 0; i < 5; ++i) {
+        await ctx.proxy.write(`\x1b]1337;FileEnd\x07`);
+      }
+      // chunks w'o opener are ignored
+      for (let i = 0; i < PALETTE_PNG_BASE64.length; i += 256) {
+        await ctx.proxy.write(`\x1b]1337;FilePart=${PALETTE_PNG_BASE64.slice(i, i + 256)}\x07`);
+      }
+      await ctx.proxy.write(`\x1b]1337;FileEnd\x07`);
+      pollFor(ctx.page, 'window.imageAddon._storage._images.size', 0);
+    });
+    test('FilePart support - other IIP sequence cancels chunked image', async () => {
+      // opener
+      await ctx.proxy.write(`\x1b]1337;MultipartFile=inline=1\x07`);
+      // chunks
+      for (let i = 0; i < PALETTE_PNG_BASE64.length; i += 256) {
+        await ctx.proxy.write(`\x1b]1337;FilePart=${PALETTE_PNG_BASE64.slice(i, i + 256)}\x07`);
+      }
+      // finalizer skipped
+      // write spinfox.png
+      await ctx.proxy.write(TESTDATA_IIP[1][0]);
+      deepStrictEqual(await getOrigSize(1), TESTDATA_IIP[1][1]);
+    });
+  });
+
   test.describe('IIP support - testimages', () => {
     test('palette.png', async () => {
       await ctx.proxy.write(TESTDATA_IIP[0][0]);
@@ -312,6 +373,68 @@ test.describe('ImageAddon', () => {
       deepStrictEqual(await getOrigSize(1), TESTDATA_IIP[4][1]);
     });
   });
+
+  test.describe('IIP - QOI support', () => {
+    test('palette should yield same bytes from PNG and QOI', async () => {
+      await ctx.proxy.write(`\x1b]1337;File=inline=1;size=525:${PALETTE_PNG_BASE64}\x07`);
+      deepStrictEqual(await getOrigSize(1), [640, 80]);
+      await ctx.proxy.write(`\x1b[10H\x1b]1337;File=inline=1;size=${qoiData.length}:${PALETTE_QOI_BASE64}\x07`);
+      deepStrictEqual(await getOrigSize(2), [640, 80]);
+      const pngScrape = await getImageAtBufferCell(0, 0);
+      const qoiScrape = await getImageAtBufferCell(0, 11);
+      deepStrictEqual(qoiScrape, pngScrape);
+    });
+  });
+
+  test.describe('IIP - resizing', () => {
+    /**
+     * The correct resize behavior is wonky and needs to be tested against iTerm2,
+     * especially for missing params to derive correct default behavior.
+     * We document the current behavior here w'o claiming to be fully in line with iTerm2.
+     * ref: https://iterm2.com/documentation-images.html
+     * imgcat: https://iterm2.com/utilities/imgcat
+     *
+     * NOTE: QOI has a slightly different parse path, thus we test resizing explicitly
+     */
+    const images = [
+      ['palette.png', 525, PALETTE_PNG_BASE64],
+      ['palette.qoi', qoiData.length, PALETTE_QOI_BASE64]
+    ];
+    for (const [name, size, payload] of images) {
+      test(name + ': N --> width=20 height=5 preserveAspectRatio=0', async () => {
+        // cell based resize
+        const header = 'width=20;height=5;preserveAspectRatio=0';
+        await ctx.proxy.write(`\x1b]1337;File=inline=1;size=${size};${header}:${payload}\x07`);
+        const dim = await getDimensions();
+        deepStrictEqual(await getOrigSize(1), [dim.cellWidth * 20, dim.cellHeight * 5]);
+      });
+      test(name + ': Npx --> width=320px height=160px preserveAspectRatio=0', async () => {
+        // pixel based resize
+        const header = 'width=320px;height=160px;preserveAspectRatio=0';
+        await ctx.proxy.write(`\x1b]1337;File=inline=1;size=${size};${header}:${payload}\x07`);
+        deepStrictEqual(await getOrigSize(1), [320, 160]);
+      });
+      test(name + ': N% --> width=50% height=30% preserveAspectRatio=0', async () => {
+        // % of viewport resize
+        const header = 'width=50%;height=30%;preserveAspectRatio=0';
+        await ctx.proxy.write(`\x1b]1337;File=inline=1;size=${size};${header}:${payload}\x07`);
+        const dim = await getDimensions();
+        deepStrictEqual(await getOrigSize(1), [Math.floor(dim.width * 0.5), Math.floor(dim.height * 0.3)]);
+      });
+      test(name + ': ommitted dimension assumes preserveAspectRatio=1', async () => {
+        // width provided in percent
+        const header = 'width=50%';
+        await ctx.proxy.write(`\x1b]1337;File=inline=1;size=${size};${header}:${payload}\x07`);
+        const dim = await getDimensions();
+        const width = Math.floor(dim.width * 0.5);
+        deepStrictEqual(await getOrigSize(1), [width, Math.floor(width * 80 / 640)]);
+        // height provided in pixel
+        const header2 = 'height=200px';
+        await ctx.proxy.write(`\x1b]1337;File=inline=1;size=${size};${header2}:${payload}\x07`);
+        deepStrictEqual(await getOrigSize(2), [Math.floor(200 * 640 / 80), 200]);
+      });
+    }
+  });
 });
 
 /**
@@ -345,3 +468,7 @@ async function getOrigSize(id: number): Promise<[number, number]> {
     window.imageAddon._storage._images.get(${id}).orig.height
   ]`);
 }
+
+async function getImageAtBufferCell(x: number, y: number): Promise<string | undefined> {
+  return ctx.page.evaluate<any>(`window.imageAddon.getImageAtBufferCell(${x}, ${y})?.toDataURL('image/png')`);
+}

addons/addon-image/test/KittyGraphics.test.ts

@@ -109,11 +109,6 @@ test.describe('Kitty Graphics Protocol', () => {
   // TODO: Distinguish lowercase delete selectors (placement only) from uppercase (placement + free data)
 
   test.beforeEach(async ({}, testInfo) => {
-    // DEBT: This test never worked on webkit
-    if (ctx.browser.browserType().name() === 'webkit') {
-      testInfo.skip();
-      return;
-    }
     await ctx.page.evaluate(`
       window.term.reset()
       window.imageAddon?.dispose();
@@ -544,7 +539,6 @@ test.describe('Kitty Graphics Protocol', () => {
 
   test.describe('Query support (a=q)', () => {
     test('responds with OK for capability query without payload', async () => {
-      let response = '';
       await ctx.page.evaluate(() => {
         (window as any).kittyResponse = '';
         (window as any).term.onData((data: string) => { (window as any).kittyResponse = data; });
@@ -553,12 +547,11 @@ test.describe('Kitty Graphics Protocol', () => {
       await ctx.proxy.write('\x1b_Gi=31,a=q;\x1b\\');
       await timeout(100);
 
-      response = await ctx.page.evaluate('window.kittyResponse');
+      const response = await ctx.page.evaluate('window.kittyResponse');
       strictEqual(response, '\x1b_Gi=31;OK\x1b\\');
     });
 
     test('responds with OK for valid PNG query', async () => {
-      let response = '';
       await ctx.page.evaluate(() => {
         (window as any).kittyResponse = '';
         (window as any).term.onData((data: string) => { (window as any).kittyResponse = data; });
@@ -567,7 +560,7 @@ test.describe('Kitty Graphics Protocol', () => {
       await ctx.proxy.write(`\x1b_Gi=42,a=q,f=100;${KITTY_BLACK_1X1_BASE64}\x1b\\`);
       await timeout(100);
 
-      response = await ctx.page.evaluate('window.kittyResponse');
+      const response = await ctx.page.evaluate('window.kittyResponse');
       strictEqual(response, '\x1b_Gi=42;OK\x1b\\');
     });
 
@@ -583,7 +576,6 @@ test.describe('Kitty Graphics Protocol', () => {
     });
 
     test('responds with error for invalid base64', async () => {
-      let response = '';
       await ctx.page.evaluate(() => {
         (window as any).kittyResponse = '';
         (window as any).term.onData((data: string) => { (window as any).kittyResponse = data; });
@@ -592,12 +584,11 @@ test.describe('Kitty Graphics Protocol', () => {
       await ctx.proxy.write('\x1b_Gi=60,a=q,f=100;!!!invalid!!!\x1b\\');
       await timeout(100);
 
-      response = await ctx.page.evaluate('window.kittyResponse');
+      const response: string = await ctx.page.evaluate('window.kittyResponse');
       strictEqual(response.startsWith('\x1b_Gi=60;EINVAL:'), true);
     });
 
     test('responds with error for RGB data without dimensions', async () => {
-      let response = '';
       await ctx.page.evaluate(() => {
         (window as any).kittyResponse = '';
         (window as any).term.onData((data: string) => { (window as any).kittyResponse = data; });
@@ -606,7 +597,7 @@ test.describe('Kitty Graphics Protocol', () => {
       await ctx.proxy.write('\x1b_Gi=70,a=q,f=24;AAAA\x1b\\');
       await timeout(100);
 
-      response = await ctx.page.evaluate('window.kittyResponse');
+      const response = await ctx.page.evaluate('window.kittyResponse');
       strictEqual(response, '\x1b_Gi=70;EINVAL:width and height required for raw pixel data\x1b\\');
     });
 
@@ -622,6 +613,18 @@ test.describe('Kitty Graphics Protocol', () => {
       strictEqual(await ctx.page.evaluate('window.kittyGotResponse'), false);
     });
 
+    test('suppresses OK response when q=2', async () => {
+      await ctx.page.evaluate(() => {
+        (window as any).kittyGotResponse = false;
+        (window as any).term.onData(() => { (window as any).kittyGotResponse = true; });
+      });
+
+      await ctx.proxy.write(`\x1b_Gi=81,a=q,q=2,f=100;${KITTY_BLACK_1X1_BASE64}\x1b\\`);
+      await timeout(100);
+
+      strictEqual(await ctx.page.evaluate('window.kittyGotResponse'), false);
+    });
+
     test('suppresses error response when q=2', async () => {
       await ctx.page.evaluate(() => {
         (window as any).kittyGotResponse = false;
@@ -635,7 +638,6 @@ test.describe('Kitty Graphics Protocol', () => {
     });
 
     test('responds with EINVAL when both i and I keys are specified', async () => {
-      let response = '';
       await ctx.page.evaluate(() => {
         (window as any).kittyResponse = '';
         (window as any).term.onData((data: string) => { (window as any).kittyResponse = data; });
@@ -645,12 +647,11 @@ test.describe('Kitty Graphics Protocol', () => {
       await ctx.proxy.write(`\x1b_Gi=100,I=200,a=q,f=100;${KITTY_BLACK_1X1_BASE64}\x1b\\`);
       await timeout(100);
 
-      response = await ctx.page.evaluate('window.kittyResponse');
+      const response = await ctx.page.evaluate('window.kittyResponse');
       strictEqual(response, '\x1b_Gi=100;EINVAL:cannot specify both i and I keys\x1b\\');
     });
 
     test('responds with EINVAL for i+I conflict even without payload', async () => {
-      let response = '';
       await ctx.page.evaluate(() => {
         (window as any).kittyResponse = '';
         (window as any).term.onData((data: string) => { (window as any).kittyResponse = data; });
@@ -660,7 +661,7 @@ test.describe('Kitty Graphics Protocol', () => {
       await ctx.proxy.write('\x1b_Gi=101,I=201,a=d\x1b\\');
       await timeout(100);
 
-      response = await ctx.page.evaluate('window.kittyResponse');
+      const response = await ctx.page.evaluate('window.kittyResponse');
       strictEqual(response, '\x1b_Gi=101;EINVAL:cannot specify both i and I keys\x1b\\');
     });
   });
@@ -802,6 +803,30 @@ test.describe('Kitty Graphics Protocol', () => {
 
       strictEqual(await ctx.page.evaluate('window.kittyGotResponse'), false);
     });
+
+    test('a=t OK suppressed by q=2', async () => {
+      await ctx.page.evaluate(() => {
+        (window as any).kittyGotResponse = false;
+        (window as any).term.onData(() => { (window as any).kittyGotResponse = true; });
+      });
+
+      await ctx.proxy.write(`\x1b_Gi=181,a=t,q=2,f=100;${KITTY_BLACK_1X1_BASE64}\x1b\\`);
+      await timeout(100);
+
+      strictEqual(await ctx.page.evaluate('window.kittyGotResponse'), false);
+    });
+
+    test('a=T OK suppressed by q=2', async () => {
+      await ctx.page.evaluate(() => {
+        (window as any).kittyGotResponse = false;
+        (window as any).term.onData(() => { (window as any).kittyGotResponse = true; });
+      });
+
+      await ctx.proxy.write(`\x1b_Gi=191,a=T,q=2,f=100;${KITTY_BLACK_1X1_BASE64}\x1b\\`);
+      await timeout(100);
+
+      strictEqual(await ctx.page.evaluate('window.kittyGotResponse'), false);
+    });
   });
 
   test.describe('Transmission medium rejection', () => {
@@ -1151,6 +1176,22 @@ test.describe('Kitty Graphics Protocol', () => {
       strictEqual(await getImageStorageLength(), 1);
     });
 
+    test('OK response suppressed by q=2', async () => {
+      await ctx.proxy.write(`\x1b_Ga=t,f=100,i=221;${KITTY_BLACK_1X1_BASE64}\x1b\\`);
+      await timeout(100);
+
+      await ctx.page.evaluate(() => {
+        (window as any).kittyGotResponse = false;
+        (window as any).term.onData(() => { (window as any).kittyGotResponse = true; });
+      });
+
+      await ctx.proxy.write(`\x1b_Ga=p,i=221,q=2\x1b\\`);
+      await timeout(100);
+
+      strictEqual(await ctx.page.evaluate('window.kittyGotResponse'), false);
+      strictEqual(await getImageStorageLength(), 1);
+    });
+
     test('ENOENT error suppressed by q=2', async () => {
       await ctx.page.evaluate(() => {
         (window as any).kittyGotResponse = false;

addons/addon-ligatures/package.json

@@ -20,7 +20,7 @@
     "package": "webpack",
     "pretest": "npm run build",
     "test": "nyc mocha out/**/*.test.js",
-    "prepublish": "npm run package"
+    "prepublishOnly": "npm run package"
   },
   "keywords": [
     "font",
@@ -31,15 +31,11 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "lru-cache": "^6.0.0",
-    "opentype.js": "^0.8.0"
+    "lru-cache": "^11.3.6",
+    "opentype.js": "^2.0.0"
   },
   "devDependencies": {
-    "@types/lru-cache": "^5.1.0",
-    "@types/opentype.js": "^0.7.0",
-    "axios": "^1.6.0",
-    "font-finder": "^1.1.0",
-    "mkdirp": "0.5.5",
-    "yauzl": "^3.2.1"
+    "@types/opentype.js": "^1.3.9",
+    "font-finder": "^1.1.0"
   }
 }

addons/addon-ligatures/src/fontLigatures/index.ts

@@ -1,5 +1,5 @@
 import * as opentype from 'opentype.js';
-import LRUCache = require('lru-cache');
+import { LRUCache } from 'lru-cache';
 
 import { IFont, ILigatureData, IFlattenedLookupTree, ILookupTree, IOptions } from './types';
 import mergeTrees from './merge';
@@ -23,8 +23,8 @@ class FontImpl implements IFont {
 
     if (options.cacheSize > 0) {
       this._cache = new LRUCache({
-        max: options.cacheSize,
-        length: ((val: ILigatureData | [number, number][], key: string) => key.length) as any
+        maxSize: options.cacheSize,
+        sizeCalculation: ((val: ILigatureData | [number, number][], key: string) => key.length) as any
       });
     }
 

addons/addon-ligatures/src/fontLigatures/mergeRange.ts

@@ -44,7 +44,6 @@ export default function mergeRange(ranges: [number, number][], newRangeStart: nu
         // current range
         ranges[i - 1][1] = Math.max(newRangeEnd, range[1]);
         ranges.splice(i, 1);
-        inRange = false;
         return ranges;
       }
       // Case 7: New range extends from previous range past the

addons/addon-progress/test/ProgressAddon.test.ts

@@ -9,15 +9,18 @@ import { ITestContext, createTestContext, openTerminal } from '../../../test/pla
 
 
 let ctx: ITestContext;
-test.beforeAll(async ({ browser }) => {
-  ctx = await createTestContext(browser);
-  ctx.page.setViewportSize({ width: 1024, height: 768 });
-  await openTerminal(ctx);
-});
-test.afterAll(async () => await ctx.page.close());
-
 
 test.describe('ProgressAddon', () => {
+  test.describe.configure({ mode: 'serial' });
+
+  test.beforeAll(async ({ browser }) => {
+    ctx = await createTestContext(browser);
+    await openTerminal(ctx);
+  });
+  test.afterAll(async () => {
+    await ctx?.page?.close();
+  });
+
   test.beforeEach(async function(): Promise<any> {
     await ctx.page.evaluate(`
       window.progressStack = [];

addons/addon-search/src/SearchEngine.ts

@@ -174,7 +174,7 @@ export class SearchEngine {
     this._terminal.clearSelection();
 
     let startRow = this._terminal.buffer.active.baseY + this._terminal.rows - 1;
-    let startCol = this._terminal.cols;
+    const startCol = this._terminal.cols;
     const isReverseSearch = true;
 
     this._lineCache.initLinesCache();
@@ -186,14 +186,14 @@ export class SearchEngine {
     let result: ISearchResult | undefined;
     if (prevSelectedPos) {
       searchPosition.startRow = startRow = prevSelectedPos.start.y;
-      searchPosition.startCol = startCol = prevSelectedPos.start.x;
+      searchPosition.startCol = prevSelectedPos.start.x;
       if (cachedSearchTerm !== term) {
         // Try to expand selection to right first.
         result = this._findInLine(term, searchPosition, searchOptions, false);
         if (!result) {
           // If selection was not able to be expanded to the right, then try reverse search
           searchPosition.startRow = startRow = prevSelectedPos.end.y;
-          searchPosition.startCol = startCol = prevSelectedPos.end.x;
+          searchPosition.startCol = prevSelectedPos.end.x;
         }
       }
     }

addons/addon-serialize/benchmark/tsconfig.json

@@ -7,10 +7,10 @@
     "rootDir": "..",
     "outDir": "../out-benchmark",
     "types": ["../../../node_modules/@types/node"],
-    "moduleResolution": "node",
+    "moduleResolution": "nodenext",
     "strict": false,
     "target": "es2021",
-    "module": "commonjs",
+    "module": "nodenext",
     "paths": {
       "common/*": ["../../../src/common/*"],
       "browser/*": ["../../../src/browser/*"],

addons/addon-serialize/test/SerializeAddon.test.ts

@@ -49,7 +49,14 @@ test.describe('SerializeAddon', () => {
         for (let i = 0; i < buffer.length; i++) {
           // Do this intentionally to get content of underlining source
           const bufferLine = buffer.getLine(i)._line;
-          lines.push(JSON.stringify(bufferLine));
+          lines.push(JSON.stringify(bufferLine, (key, value) => {
+            // BufferLine caches are internal/transient and can legitimately differ
+            // across equivalent terminal states.
+            if (key === '_stringCache' || key === '_stringCacheEntryRef') {
+              return undefined;
+            }
+            return value;
+          }));
         }
         return {
           x: buffer.cursorX,

addons/addon-unicode-graphemes/benchmark/tsconfig.json

@@ -4,10 +4,10 @@
     "rootDir": "..",
     "outDir": "../out-benchmark",
     "types": ["../../../node_modules/@types/node"],
-    "moduleResolution": "node",
+    "moduleResolution": "nodenext",
     "strict": false,
     "target": "es2015",
-    "module": "commonjs",
+    "module": "nodenext",
     "paths": {
       "common/*": ["../../../src/common/*"],
       "browser/*": ["../../../src/browser/*"],

addons/addon-web-fonts/test/WebFontsAddon.test.ts

@@ -33,16 +33,16 @@ test.describe('WebFontsAddon', () => {
   test.describe('font loading at runtime', () => {
     test('loadFonts (JS)', async () => {
       await ctx.page.evaluate(`
-        const ff1 = new FontFace('Kongtext', "url(/kongtext.regular.ttf) format('truetype')");
-        const ff2 = new FontFace('BPdots', "url(/bpdots.regular.otf) format('opentype')");
+        const ff1 = new FontFace('Kongtext', "url(/fonts/kongtext.regular.ttf) format('truetype')");
+        const ff2 = new FontFace('BPdots', "url(/fonts/bpdots.regular.otf) format('opentype')");
         loadFonts([ff1, ff2]);
       `);
       deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'loaded' }, { family: 'BPdots', status: 'loaded' }]);
     });
     test('loadFonts (CSS, unquoted)', async () => {
       await ctx.page.evaluate(`
-        document.styleSheets[0].insertRule("@font-face {font-family: Kongtext; src: url(/kongtext.regular.ttf) format('truetype')}", 0);
-        document.styleSheets[0].insertRule("@font-face {font-family: BPdots; src: url(/bpdots.regular.otf) format('opentype')}", 1);
+        document.styleSheets[0].insertRule("@font-face {font-family: Kongtext; src: url(/fonts/kongtext.regular.ttf) format('truetype')}", 0);
+        document.styleSheets[0].insertRule("@font-face {font-family: BPdots; src: url(/fonts/bpdots.regular.otf) format('opentype')}", 1);
         loadFonts(['Kongtext', 'BPdots']);
       `);
       deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'loaded' }, { family: 'BPdots', status: 'loaded' }]);
@@ -50,8 +50,8 @@ test.describe('WebFontsAddon', () => {
     test('loadFonts (CSS, quoted)', async ({ browser }) => {
       // NOTE: firefox preserves family quotes from CSS rules in fontface, all other browsers unquote them
       await ctx.page.evaluate(`
-        document.styleSheets[0].insertRule("@font-face {font-family: 'Kongtext'; src: url(/kongtext.regular.ttf) format('truetype')}", 0);
-        document.styleSheets[0].insertRule("@font-face {font-family: 'BPdots'; src: url(/bpdots.regular.otf) format('opentype')}", 1);
+        document.styleSheets[0].insertRule("@font-face {font-family: 'Kongtext'; src: url(/fonts/kongtext.regular.ttf) format('truetype')}", 0);
+        document.styleSheets[0].insertRule("@font-face {font-family: 'BPdots'; src: url(/fonts/bpdots.regular.otf) format('opentype')}", 1);
         loadFonts(['Kongtext', 'BPdots']);
       `);
       if (browser.browserType().name() === 'firefox') {
@@ -63,8 +63,8 @@ test.describe('WebFontsAddon', () => {
     test('FontFace hashing', async () => {
       // multiple calls of `loadFonts` with the same objects shall not bloat document.fonts
       await ctx.page.evaluate(`
-        const ff1 = new FontFace('Kongtext', "url(/kongtext.regular.ttf) format('truetype')");
-        const ff2 = new FontFace('BPdots', "url(/bpdots.regular.otf) format('opentype')");
+        const ff1 = new FontFace('Kongtext', "url(/fonts/kongtext.regular.ttf) format('truetype')");
+        const ff2 = new FontFace('BPdots', "url(/fonts/bpdots.regular.otf) format('opentype')");
         loadFonts([ff1, ff2]);
         loadFonts([ff1, ff2]);
         loadFonts([ff1, ff2]).then(() => loadFonts([ff1, ff2]));
@@ -76,9 +76,24 @@ test.describe('WebFontsAddon', () => {
       // to make this test work, we exclude the default measurement char W (x57) by restricting unicode-range
       // now the browser will postpone font loading until codepoint is hit --> wrong glyph metrics on first usage
       const data = await ctx.page.evaluate(`
-          document.styleSheets[0].insertRule("@font-face {font-family: Kongtext; src: url(/kongtext.regular.ttf) format('truetype'); unicode-range: U+00A0-00FF}", 0);
+          document.styleSheets[0].insertRule("@font-face {font-family: Kongtext; src: url(/fonts/kongtext.regular.ttf) format('truetype'); unicode-range: U+00A0-00FF}", 0);
         `);
-      deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'unloaded' }]);
+      let fonts = await getDocumentFonts();
+      // safari may have loaded the font, firefox & chrome never load it
+      if (browser.browserType().name() === 'webkit') {
+        try {
+          deepStrictEqual(fonts, [{ family: 'Kongtext', status: 'loading' }]);
+        } catch (e) {
+          try {
+            deepStrictEqual(fonts, [{ family: 'Kongtext', status: 'loaded' }]);
+          } catch (e) {
+            deepStrictEqual(fonts, [{ family: 'Kongtext', status: 'unloaded' }]);
+          }
+        }
+      } else {
+        deepStrictEqual(fonts, [{ family: 'Kongtext', status: 'unloaded' }]);
+      }
+
 
       // broken case: webfont in ctor without addon usage
       await ctx.page.evaluate(`
@@ -86,11 +101,20 @@ test.describe('WebFontsAddon', () => {
           window.helperTerm.open(term.element);
         `);
 
-      // safari loads the font, firefox & chrome dont
+      fonts = await getDocumentFonts();
+      // safari might load the font, firefox & chrome dont
       if (browser.browserType().name() === 'webkit') {
-        deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'loaded' }]);
+        try {
+          deepStrictEqual(fonts, [{ family: 'Kongtext', status: 'loading' }]);
+        } catch (e) {
+          try {
+            deepStrictEqual(fonts, [{ family: 'Kongtext', status: 'loaded' }]);
+          } catch (e) {
+            deepStrictEqual(fonts, [{ family: 'Kongtext', status: 'unloaded' }]);
+          }
+        }
       } else {
-        deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'unloaded' }]);
+        deepStrictEqual(fonts, [{ family: 'Kongtext', status: 'unloaded' }]);
       }
 
       // good case: addon fixes layout for webfont in ctor
@@ -103,7 +127,10 @@ test.describe('WebFontsAddon', () => {
           window.helperTerm.open(term.element);
         `);
       await timeout(100);
-      deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'loaded' }]);
+      if (browser.browserType().name() !== 'webkit') {
+        // safari sometimes reports 'unloadeed'?
+        deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'loaded' }]);
+      }
 
       // cleanup this messy test case
       await ctx.page.evaluate(`

addons/addon-web-fonts/test/tsconfig.json

@@ -5,7 +5,6 @@
     "lib": [
       "es2021",
     ],
-    // "downlevelIteration": true,
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,

addons/addon-web-links/src/WebLinkProvider.ts

@@ -113,8 +113,8 @@ export class LinkComputer {
     let line: IBufferLine | undefined;
     let topIdx = lineIndex;
     let bottomIdx = lineIndex;
-    let length = 0;
-    let content = '';
+    let length;
+    let content;
     const lines: string[] = [];
 
     if ((line = terminal.buffer.active.getLine(lineIndex))) {

addons/addon-web-links/test/tsconfig.json

@@ -5,7 +5,6 @@
     "lib": [
       "es2021",
     ],
-    // "downlevelIteration": true,
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,

addons/addon-webgl/src/CharAtlasUtils.test.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2026 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { assert } from 'chai';
+import { configEquals } from './CharAtlasUtils';
+import { ICharAtlasConfig } from './Types';
+import { NULL_COLOR } from 'common/Color';
+import { IColor } from 'common/Types';
+
+function createTestConfig(overrides: Partial<ICharAtlasConfig> = {}): ICharAtlasConfig {
+  const color: IColor = { css: '#ffffff', rgba: 0xffffffff };
+  const contrastCache = {
+    clear: () => {},
+    setCss: () => {},
+    getCss: () => undefined,
+    setColor: () => {},
+    getColor: () => undefined
+  };
+  const colors = {
+    foreground: color,
+    background: color,
+    cursor: NULL_COLOR,
+    cursorAccent: NULL_COLOR,
+    selectionForeground: undefined,
+    selectionBackgroundTransparent: NULL_COLOR,
+    selectionBackgroundOpaque: NULL_COLOR,
+    selectionInactiveBackgroundTransparent: NULL_COLOR,
+    selectionInactiveBackgroundOpaque: NULL_COLOR,
+    overviewRulerBorder: NULL_COLOR,
+    scrollbarSliderBackground: NULL_COLOR,
+    scrollbarSliderHoverBackground: NULL_COLOR,
+    scrollbarSliderActiveBackground: NULL_COLOR,
+    ansi: new Array(256).fill(color),
+    contrastCache,
+    halfContrastCache: contrastCache
+  };
+  return {
+    customGlyphs: true,
+    devicePixelRatio: 1,
+    deviceMaxTextureSize: 4096,
+    letterSpacing: 0,
+    lineHeight: 1,
+    fontSize: 15,
+    fontFamily: 'monospace',
+    fontWeight: 'normal',
+    fontWeightBold: 'bold',
+    deviceCellWidth: 10,
+    deviceCellHeight: 20,
+    deviceCharWidth: 8,
+    deviceCharHeight: 16,
+    allowTransparency: false,
+    drawBoldTextInBrightColors: true,
+    minimumContrastRatio: 1,
+    colors,
+    ...overrides
+  };
+}
+
+describe('CharAtlasUtils', () => {
+  describe('configEquals', () => {
+    it('should return true for identical configs', () => {
+      const a = createTestConfig();
+      const b = createTestConfig();
+      assert.ok(configEquals(a, b));
+    });
+
+    it('should return false when deviceMaxTextureSize differs', () => {
+      const a = createTestConfig();
+      const b = createTestConfig({ deviceMaxTextureSize: 8192 });
+      assert.ok(!configEquals(a, b));
+    });
+
+    it('should return false when deviceCellWidth differs', () => {
+      const a = createTestConfig();
+      const b = createTestConfig({ deviceCellWidth: 11 });
+      assert.ok(!configEquals(a, b));
+    });
+
+    it('should return false when deviceCellHeight differs', () => {
+      const a = createTestConfig();
+      const b = createTestConfig({ deviceCellHeight: 21 });
+      assert.ok(!configEquals(a, b));
+    });
+  });
+});

addons/addon-webgl/src/CharAtlasUtils.ts

@@ -59,6 +59,7 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean
     }
   }
   return a.devicePixelRatio === b.devicePixelRatio &&
+      a.deviceMaxTextureSize === b.deviceMaxTextureSize &&
       a.customGlyphs === b.customGlyphs &&
       a.lineHeight === b.lineHeight &&
       a.letterSpacing === b.letterSpacing &&
@@ -67,6 +68,8 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean
       a.fontWeight === b.fontWeight &&
       a.fontWeightBold === b.fontWeightBold &&
       a.allowTransparency === b.allowTransparency &&
+      a.deviceCellWidth === b.deviceCellWidth &&
+      a.deviceCellHeight === b.deviceCellHeight &&
       a.deviceCharWidth === b.deviceCharWidth &&
       a.deviceCharHeight === b.deviceCharHeight &&
       a.drawBoldTextInBrightColors === b.drawBoldTextInBrightColors &&

addons/addon-webgl/src/GlyphRenderer.ts

@@ -9,7 +9,7 @@ import { Disposable, toDisposable } from 'common/Lifecycle';
 import { Terminal } from '@xterm/xterm';
 import { IRenderModel, IWebGL2RenderingContext, IWebGLVertexArrayObject, type IRasterizedGlyph, type ITextureAtlas } from './Types';
 import { createProgram, GLTexture, PROJECTION_MATRIX } from './WebglUtils';
-import type { IOptionsService } from 'common/services/Services';
+import type { ILogService, IOptionsService } from 'common/services/Services';
 import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 
 interface IVertices {
@@ -78,9 +78,11 @@ void main() {
 }`);
 }
 
-const INDICES_PER_CELL = 11;
-const BYTES_PER_CELL = INDICES_PER_CELL * Float32Array.BYTES_PER_ELEMENT;
-const CELL_POSITION_INDICES = 2;
+const enum Constants {
+  INDICES_PER_CELL = 11,
+  BYTES_PER_CELL = INDICES_PER_CELL * 4/* Float32Array.BYTES_PER_ELEMENT */,
+  CELL_POSITION_INDICES = 2
+}
 
 // Work variables to avoid garbage collection
 let $i = 0;
@@ -112,7 +114,8 @@ export class GlyphRenderer extends Disposable {
     private readonly _terminal: Terminal,
     private readonly _gl: IWebGL2RenderingContext,
     private _dimensions: IRenderDimensions,
-    private readonly _optionsService: IOptionsService
+    private readonly _optionsService: IOptionsService,
+    private readonly _logService: ILogService
   ) {
     super();
 
@@ -125,7 +128,7 @@ export class GlyphRenderer extends Disposable {
       TextureAtlas.maxTextureSize = throwIfFalsy(gl.getParameter(gl.MAX_TEXTURE_SIZE) as number | null);
     }
 
-    this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, createFragmentShaderSource(TextureAtlas.maxAtlasPages)));
+    this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, createFragmentShaderSource(TextureAtlas.maxAtlasPages), this._logService));
     this._register(toDisposable(() => gl.deleteProgram(this._program)));
 
     // Uniform locations
@@ -134,8 +137,9 @@ export class GlyphRenderer extends Disposable {
     this._textureLocation = throwIfFalsy(gl.getUniformLocation(this._program, 'u_texture'));
 
     // Create and set the vertex array object
-    this._vertexArrayObject = gl.createVertexArray();
-    gl.bindVertexArray(this._vertexArrayObject);
+    const vertexArrayObject = this._vertexArrayObject = gl.createVertexArray();
+    this._register(toDisposable(() => gl.deleteVertexArray(vertexArrayObject)));
+    gl.bindVertexArray(vertexArrayObject);
 
     // Setup a_unitquad, this defines the 4 vertices of a rectangle
     const unitQuadVertices = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
@@ -160,22 +164,22 @@ export class GlyphRenderer extends Disposable {
     this._register(toDisposable(() => gl.deleteBuffer(this._attributesBuffer)));
     gl.bindBuffer(gl.ARRAY_BUFFER, this._attributesBuffer);
     gl.enableVertexAttribArray(VertexAttribLocations.OFFSET);
-    gl.vertexAttribPointer(VertexAttribLocations.OFFSET, 2, gl.FLOAT, false, BYTES_PER_CELL, 0);
+    gl.vertexAttribPointer(VertexAttribLocations.OFFSET, 2, gl.FLOAT, false, Constants.BYTES_PER_CELL, 0);
     gl.vertexAttribDivisor(VertexAttribLocations.OFFSET, 1);
     gl.enableVertexAttribArray(VertexAttribLocations.SIZE);
-    gl.vertexAttribPointer(VertexAttribLocations.SIZE, 2, gl.FLOAT, false, BYTES_PER_CELL, 2 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(VertexAttribLocations.SIZE, 2, gl.FLOAT, false, Constants.BYTES_PER_CELL, 2 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.SIZE, 1);
     gl.enableVertexAttribArray(VertexAttribLocations.TEXPAGE);
-    gl.vertexAttribPointer(VertexAttribLocations.TEXPAGE, 1, gl.FLOAT, false, BYTES_PER_CELL, 4 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(VertexAttribLocations.TEXPAGE, 1, gl.FLOAT, false, Constants.BYTES_PER_CELL, 4 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.TEXPAGE, 1);
     gl.enableVertexAttribArray(VertexAttribLocations.TEXCOORD);
-    gl.vertexAttribPointer(VertexAttribLocations.TEXCOORD, 2, gl.FLOAT, false, BYTES_PER_CELL, 5 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(VertexAttribLocations.TEXCOORD, 2, gl.FLOAT, false, Constants.BYTES_PER_CELL, 5 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.TEXCOORD, 1);
     gl.enableVertexAttribArray(VertexAttribLocations.TEXSIZE);
-    gl.vertexAttribPointer(VertexAttribLocations.TEXSIZE, 2, gl.FLOAT, false, BYTES_PER_CELL, 7 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(VertexAttribLocations.TEXSIZE, 2, gl.FLOAT, false, Constants.BYTES_PER_CELL, 7 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.TEXSIZE, 1);
     gl.enableVertexAttribArray(VertexAttribLocations.CELL_POSITION);
-    gl.vertexAttribPointer(VertexAttribLocations.CELL_POSITION, 2, gl.FLOAT, false, BYTES_PER_CELL, 9 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(VertexAttribLocations.CELL_POSITION, 2, gl.FLOAT, false, Constants.BYTES_PER_CELL, 9 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.CELL_POSITION, 1);
 
     // Setup static uniforms
@@ -222,12 +226,12 @@ export class GlyphRenderer extends Disposable {
   }
 
   private _updateCell(array: Float32Array, x: number, y: number, code: number | undefined, bg: number, fg: number, ext: number, chars: string, width: number, lastBg: number): void {
-    $i = (y * this._terminal.cols + x) * INDICES_PER_CELL;
+    $i = (y * this._terminal.cols + x) * Constants.INDICES_PER_CELL;
 
     // Exit early if this is a null character, allow space character to continue as it may have
     // underline/strikethrough styles
     if (code === NULL_CELL_CODE || code === undefined/* This is used for the right side of wide chars */) {
-      array.fill(0, $i, $i + INDICES_PER_CELL - 1 - CELL_POSITION_INDICES);
+      array.fill(0, $i, $i + Constants.INDICES_PER_CELL - 1 - Constants.CELL_POSITION_INDICES);
       return;
     }
 
@@ -288,7 +292,7 @@ export class GlyphRenderer extends Disposable {
 
   public clear(): void {
     const terminal = this._terminal;
-    const newCount = terminal.cols * terminal.rows * INDICES_PER_CELL;
+    const newCount = terminal.cols * terminal.rows * Constants.INDICES_PER_CELL;
 
     // Clear vertices
     if (this._vertices.count !== newCount) {
@@ -310,7 +314,7 @@ export class GlyphRenderer extends Disposable {
       for (let x = 0; x < terminal.cols; x++) {
         this._vertices.attributes[i + 9] = x / terminal.cols;
         this._vertices.attributes[i + 10] = y / terminal.rows;
-        i += INDICES_PER_CELL;
+        i += Constants.INDICES_PER_CELL;
       }
     }
   }
@@ -346,8 +350,8 @@ export class GlyphRenderer extends Disposable {
     // - So we don't send vertices for all the line-ending whitespace to the GPU
     let bufferLength = 0;
     for (let y = 0; y < renderModel.lineLengths.length; y++) {
-      const si = y * this._terminal.cols * INDICES_PER_CELL;
-      const sub = this._vertices.attributes.subarray(si, si + renderModel.lineLengths[y] * INDICES_PER_CELL);
+      const si = y * this._terminal.cols * Constants.INDICES_PER_CELL;
+      const sub = this._vertices.attributes.subarray(si, si + renderModel.lineLengths[y] * Constants.INDICES_PER_CELL);
       activeBuffer.set(sub, bufferLength);
       bufferLength += sub.length;
     }
@@ -356,7 +360,9 @@ export class GlyphRenderer extends Disposable {
     gl.bindBuffer(gl.ARRAY_BUFFER, this._attributesBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, activeBuffer.subarray(0, bufferLength), gl.STREAM_DRAW);
 
-    // Bind the atlas page texture if they have changed
+    // Bind the atlas page texture if they have changed. AtlasPage.version is globally
+    // monotonic, so a page object swap at the same index (which happens after a page merge)
+    // is detected by the same comparison.
     for (let i = 0; i < this._atlas.pages.length; i++) {
       if (this._atlas.pages[i].version !== this._atlasTextures[i].version) {
         this._bindAtlasPageTexture(gl, this._atlas, i);
@@ -364,11 +370,15 @@ export class GlyphRenderer extends Disposable {
     }
 
     // Draw the viewport
-    gl.drawElementsInstanced(gl.TRIANGLE_STRIP, 4, gl.UNSIGNED_BYTE, 0, bufferLength / INDICES_PER_CELL);
+    gl.drawElementsInstanced(gl.TRIANGLE_STRIP, 4, gl.UNSIGNED_BYTE, 0, bufferLength / Constants.INDICES_PER_CELL);
   }
 
   public setAtlas(atlas: ITextureAtlas): void {
     this._atlas = atlas;
+    this.invalidateAtlasTextures();
+  }
+
+  public invalidateAtlasTextures(): void {
     for (const glTexture of this._atlasTextures) {
       glTexture.version = -1;
     }

addons/addon-webgl/src/RectangleRenderer.ts

@@ -10,10 +10,11 @@ import { Attributes, FgFlags } from 'common/buffer/Constants';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { IColor } from 'common/Types';
 import { Terminal } from '@xterm/xterm';
-import { RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel';
+import { RenderModelConstants } from './RenderModel';
 import { IRenderModel, IWebGL2RenderingContext, IWebGLVertexArrayObject } from './Types';
 import { createProgram, expandFloat32Array, PROJECTION_MATRIX } from './WebglUtils';
 import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import type { ILogService } from 'common/services/Services';
 
 const enum VertexAttribLocations {
   POSITION = 0,
@@ -89,21 +90,23 @@ export class RectangleRenderer extends Disposable {
     private _terminal: Terminal,
     private _gl: IWebGL2RenderingContext,
     private _dimensions: IRenderDimensions,
-    private readonly _themeService: IThemeService
+    private readonly _themeService: IThemeService,
+    private readonly _logService: ILogService
   ) {
     super();
 
     const gl = this._gl;
 
-    this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, fragmentShaderSource));
+    this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, fragmentShaderSource, this._logService));
     this._register(toDisposable(() => gl.deleteProgram(this._program)));
 
     // Uniform locations
     this._projectionLocation = throwIfFalsy(gl.getUniformLocation(this._program, 'u_projection'));
 
     // Create and set the vertex array object
-    this._vertexArrayObject = gl.createVertexArray();
-    gl.bindVertexArray(this._vertexArrayObject);
+    const vertexArrayObject = this._vertexArrayObject = gl.createVertexArray();
+    this._register(toDisposable(() => gl.deleteVertexArray(vertexArrayObject)));
+    gl.bindVertexArray(vertexArrayObject);
 
     // Setup a_unitquad, this defines the 4 vertices of a rectangle
     const unitQuadVertices = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
@@ -217,9 +220,9 @@ export class RectangleRenderer extends Disposable {
       currentFg = 0;
       currentInverse = false;
       for (x = 0; x < terminal.cols; x++) {
-        modelIndex = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
-        bg = model.cells[modelIndex + RENDER_MODEL_BG_OFFSET];
-        fg = model.cells[modelIndex + RENDER_MODEL_FG_OFFSET];
+        modelIndex = ((y * terminal.cols) + x) * RenderModelConstants.INDICIES_PER_CELL;
+        bg = model.cells[modelIndex + RenderModelConstants.BG_OFFSET];
+        fg = model.cells[modelIndex + RenderModelConstants.FG_OFFSET];
         inverse = !!(fg & FgFlags.INVERSE);
         if (bg !== currentBg || (fg !== currentFg && (currentInverse || inverse))) {
           // A rectangle needs to be drawn if going from non-default to another color
@@ -336,8 +339,9 @@ export class RectangleRenderer extends Disposable {
       }
     }
 
-    if (vertices.attributes.length < offset + 4) {
-      vertices.attributes = expandFloat32Array(vertices.attributes, this._terminal.rows * this._terminal.cols * INDICES_PER_RECTANGLE);
+    if (vertices.attributes.length < offset + INDICES_PER_RECTANGLE) {
+      // +1 for the viewport-clear rectangle at offset 0.
+      vertices.attributes = expandFloat32Array(vertices.attributes, (this._terminal.rows * this._terminal.cols + 1) * INDICES_PER_RECTANGLE);
     }
     $x1 = startX * this._dimensions.device.cell.width;
     $y1 = y * this._dimensions.device.cell.height;

addons/addon-webgl/src/RenderModel.ts

@@ -7,10 +7,12 @@ import { ICursorRenderModel, IRenderModel } from './Types';
 import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
 import { createSelectionRenderModel } from 'browser/renderer/shared/SelectionRenderModel';
 
-export const RENDER_MODEL_INDICIES_PER_CELL = 4;
-export const RENDER_MODEL_BG_OFFSET = 1;
-export const RENDER_MODEL_FG_OFFSET = 2;
-export const RENDER_MODEL_EXT_OFFSET = 3;
+export const enum RenderModelConstants {
+  INDICIES_PER_CELL = 4,
+  BG_OFFSET = 1,
+  FG_OFFSET = 2,
+  EXT_OFFSET = 3
+}
 
 export const COMBINED_CHAR_BIT_MASK = 0x80000000;
 
@@ -27,7 +29,7 @@ export class RenderModel implements IRenderModel {
   }
 
   public resize(cols: number, rows: number): void {
-    const indexCount = cols * rows * RENDER_MODEL_INDICIES_PER_CELL;
+    const indexCount = cols * rows * RenderModelConstants.INDICIES_PER_CELL;
     if (indexCount !== this.cells.length) {
       this.cells = new Uint32Array(indexCount);
       this.lineLengths = new Uint32Array(rows);

addons/addon-webgl/src/TextureAtlas.ts

@@ -109,6 +109,7 @@ export class TextureAtlas implements ITextureAtlas {
       page.canvas.remove();
     }
     this._onAddTextureAtlasCanvas.dispose();
+    this._onRemoveTextureAtlasCanvas.dispose();
   }
 
   public warmUp(): void {
@@ -133,7 +134,9 @@ export class TextureAtlas implements ITextureAtlas {
 
   private _requestClearModel = false;
   public beginFrame(): boolean {
-    return this._requestClearModel;
+    const result = this._requestClearModel;
+    this._requestClearModel = false;
+    return result;
   }
 
   public clearTexture(): void {
@@ -193,7 +196,7 @@ export class TextureAtlas implements ITextureAtlas {
 
       // Merge into the new page
       const mergedPage = this._mergePages(mergingPages, mergedPageIndex);
-      mergedPage.version++;
+      mergedPage.version = ++AtlasPage.nextVersion;
 
       // Delete the pages, shifting glyph texture pages as needed
       for (let i = sortedMergingPagesIndexes.length - 1; i >= 0; i--) {
@@ -251,7 +254,7 @@ export class TextureAtlas implements ITextureAtlas {
       for (const g of adjustingPage.glyphs) {
         g.texturePage--;
       }
-      adjustingPage.version++;
+      adjustingPage.version = ++AtlasPage.nextVersion;
     }
   }
 
@@ -527,7 +530,7 @@ export class TextureAtlas implements ITextureAtlas {
     let customGlyph = false;
     if (this._config.customGlyphs !== false) {
       const variantOffset = this._workAttributeData.getUnderlineVariantOffset();
-      customGlyph = tryDrawCustomGlyph(this._tmpCtx, chars, padding, padding, this._config.deviceCellWidth, this._config.deviceCellHeight, this._config.deviceCharWidth, this._config.deviceCharHeight, this._config.fontSize, this._config.devicePixelRatio, backgroundColor.css, variantOffset);
+      customGlyph = tryDrawCustomGlyph(this._tmpCtx, chars, padding, padding, this._config.deviceCellWidth, this._config.deviceCellHeight, this._config.deviceCharWidth, this._config.deviceCharHeight, this._config.fontSize, this._config.devicePixelRatio, this._logService, backgroundColor.css, variantOffset);
     }
 
     // Whether to clear pixels based on a threshold difference between the glyph color and the
@@ -937,7 +940,7 @@ export class TextureAtlas implements ITextureAtlas {
       rasterizedGlyph.size.y
     );
     activePage.addGlyph(rasterizedGlyph);
-    activePage.version++;
+    activePage.version = ++AtlasPage.nextVersion;
 
     return rasterizedGlyph;
   }
@@ -1047,9 +1050,13 @@ class AtlasPage {
   }
 
   /**
-   * Used to check whether the canvas of the atlas page has changed.
+   * Monotonically increasing across all atlas pages globally. Used to detect when the texture
+   * unit at a given index needs to be re-uploaded — both for content changes within the same
+   * page and for a page object swap at the same index (which happens after a page merge,
+   * where a per-page counter could coincide with the previously-bound page's value).
    */
-  public version = 0;
+  public static nextVersion: number = 0;
+  public version = ++AtlasPage.nextVersion;
 
   // Texture atlas current positioning data. The texture packing strategy used is to fill from
   // left-to-right and top-to-bottom. When the glyph being written is less than half of the current
@@ -1092,7 +1099,7 @@ class AtlasPage {
     this.currentRow.y = 0;
     this.currentRow.height = 0;
     this.fixedRows.length = 0;
-    this.version++;
+    this.version = ++AtlasPage.nextVersion;
   }
 }
 

addons/addon-webgl/src/Types.ts

@@ -28,6 +28,7 @@ export interface ICursorRenderModel {
 export interface IWebGL2RenderingContext extends WebGLRenderingContext {
   vertexAttribDivisor(index: number, divisor: number): void;
   createVertexArray(): IWebGLVertexArrayObject;
+  deleteVertexArray(vao: IWebGLVertexArrayObject): void;
   bindVertexArray(vao: IWebGLVertexArrayObject): void;
   drawElementsInstanced(mode: number, count: number, type: number, offset: number, instanceCount: number): void;
 }

addons/addon-webgl/src/WebglAddon.ts

@@ -9,7 +9,7 @@ import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRender
 import { ITerminal } from 'browser/Types';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { getSafariVersion, isSafari } from 'common/Platform';
-import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { ICoreService, IDecorationService, ILogService, IOptionsService } from 'common/services/Services';
 import { IWebGL2RenderingContext } from './Types';
 import { WebglRenderer } from './WebglRenderer';
 import { Emitter, EventUtils } from 'common/Event';
@@ -65,6 +65,7 @@ export class WebglAddon extends Disposable implements ITerminalAddon, IWebglApi
     const charSizeService: ICharSizeService = unsafeCore._charSizeService;
     const coreBrowserService: ICoreBrowserService = unsafeCore._coreBrowserService;
     const decorationService: IDecorationService = unsafeCore._decorationService;
+    const logService: ILogService = unsafeCore._logService;
     const themeService: IThemeService = unsafeCore._themeService;
 
     this._renderer = this._register(new WebglRenderer(
@@ -74,6 +75,7 @@ export class WebglAddon extends Disposable implements ITerminalAddon, IWebglApi
       coreBrowserService,
       coreService,
       decorationService,
+      logService,
       optionsService,
       themeService,
       this._customGlyphs,

addons/addon-webgl/src/WebglRenderer.ts

@@ -15,11 +15,11 @@ import { AttributeData } from 'common/buffer/AttributeData';
 import { CellData } from 'common/buffer/CellData';
 import { Attributes, Content, FgFlags, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants';
 import { TextBlinkStateManager } from 'browser/renderer/shared/TextBlinkStateManager';
-import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { ICoreService, IDecorationService, ILogService, IOptionsService } from 'common/services/Services';
 import { Terminal } from '@xterm/xterm';
 import { GlyphRenderer } from './GlyphRenderer';
 import { RectangleRenderer } from './RectangleRenderer';
-import { COMBINED_CHAR_BIT_MASK, RENDER_MODEL_BG_OFFSET, RENDER_MODEL_EXT_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL, RenderModel } from './RenderModel';
+import { COMBINED_CHAR_BIT_MASK, RenderModel, RenderModelConstants } from './RenderModel';
 import { IWebGL2RenderingContext, type ITextureAtlas } from './Types';
 import { LinkRenderLayer } from './renderLayer/LinkRenderLayer';
 import { IRenderLayer } from './renderLayer/Types';
@@ -28,9 +28,13 @@ import { addDisposableListener } from 'browser/Dom';
 import { combinedDisposable, Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
 import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
 
+const enum Constants {
+  MERGE_RETRY_LIMIT = 32
+}
+
 export class WebglRenderer extends Disposable implements IRenderer {
   private _renderLayers: IRenderLayer[];
-  private _cursorBlinkStateManager: MutableDisposable<CursorBlinkStateManager> = new MutableDisposable();
+  private _cursorBlinkStateManager: MutableDisposable<CursorBlinkStateManager> = this._register(new MutableDisposable());
   private _textBlinkStateManager: TextBlinkStateManager;
   private _charAtlasDisposable = this._register(new MutableDisposable());
   private _charAtlas: ITextureAtlas | undefined;
@@ -73,6 +77,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     private readonly _coreBrowserService: ICoreBrowserService,
     private readonly _coreService: ICoreService,
     private readonly _decorationService: IDecorationService,
+    private readonly _logService: ILogService,
     private readonly _optionsService: IOptionsService,
     private readonly _themeService: IThemeService,
     private readonly _customGlyphs: boolean = true,
@@ -118,19 +123,19 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._deviceMaxTextureSize = this._gl.getParameter(this._gl.MAX_TEXTURE_SIZE);
 
     this._register(addDisposableListener(this._canvas, 'webglcontextlost', (e) => {
-      console.log('webglcontextlost event received');
+      this._logService.debug('webglcontextlost event received');
       // Prevent the default behavior in order to enable WebGL context restoration.
       e.preventDefault();
       // Wait a few seconds to see if the 'webglcontextrestored' event is fired.
       // If not, dispatch the onContextLoss notification to observers.
       this._contextRestorationTimeout = setTimeout(() => {
         this._contextRestorationTimeout = undefined;
-        console.warn('webgl context not restored; firing onContextLoss');
+        this._logService.warn('webgl context not restored; firing onContextLoss');
         this._onContextLoss.fire(e);
       }, 3000 /* ms */);
     }));
     this._register(addDisposableListener(this._canvas, 'webglcontextrestored', (e) => {
-      console.warn('webglcontextrestored event received');
+      this._logService.warn('webglcontextrestored event received');
       clearTimeout(this._contextRestorationTimeout);
       this._contextRestorationTimeout = undefined;
       // The texture atlas and glyph renderer must be fully reinitialized
@@ -154,6 +159,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._isAttached = this._core.screenElement!.isConnected;
 
     this._register(toDisposable(() => {
+      clearTimeout(this._contextRestorationTimeout);
+      this._contextRestorationTimeout = undefined;
       for (const l of this._renderLayers) {
         l.dispose();
       }
@@ -270,8 +277,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
    * Initializes members dependent on WebGL context state.
    */
   private _initializeWebGLState(): [RectangleRenderer, GlyphRenderer] {
-    this._rectangleRenderer.value = new RectangleRenderer(this._terminal, this._gl, this.dimensions, this._themeService);
-    this._glyphRenderer.value = new GlyphRenderer(this._terminal, this._gl, this.dimensions, this._optionsService);
+    this._rectangleRenderer.value = new RectangleRenderer(this._terminal, this._gl, this.dimensions, this._themeService, this._logService);
+    this._glyphRenderer.value = new GlyphRenderer(this._terminal, this._gl, this.dimensions, this._optionsService, this._logService);
 
     // Update dimensions and acquire char atlas
     this.handleCharSizeChanged();
@@ -375,6 +382,19 @@ export class WebglRenderer extends Disposable implements IRenderer {
       this._updateModel(start, end);
     }
 
+    // A mid-update atlas page merge invalidates vertex data and may not bump the host
+    // page's version, so re-run the update and force a full texture rebind.
+    let merged = false;
+    let mergeRetries = 0;
+    while (this._charAtlas && this._glyphRenderer.value.beginFrame() && mergeRetries++ < Constants.MERGE_RETRY_LIMIT) {
+      merged = true;
+      this._clearModel(true);
+      this._updateModel(0, this._terminal.rows - 1);
+    }
+    if (merged) {
+      this._glyphRenderer.value.invalidateAtlasTextures();
+    }
+
     // Render
     this._rectangleRenderer.value.renderBackgrounds();
     this._glyphRenderer.value.render(this._model);
@@ -407,8 +427,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
     let line: IBufferLine;
     let joinedRanges: [number, number][];
     let isJoined: boolean;
-    let skipJoinedCheckUntilX: number = 0;
-    let isValidJoinRange: boolean = true;
+    let skipJoinedCheckUntilX: number;
+    let isValidJoinRange: boolean;
     let lastCharX: number;
     let range: [number, number];
     let isCursorRow: boolean;
@@ -493,7 +513,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
         chars = cell.getChars();
         code = cell.getCode();
-        i = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
+        i = ((y * terminal.cols) + x) * RenderModelConstants.INDICIES_PER_CELL;
 
         if (!rowHasBlinkingCells && cell.isBlink()) {
           rowHasBlinkingCells = true;
@@ -538,9 +558,9 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
         // Nothing has changed, no updates needed
         if (this._model.cells[i] === code &&
-            this._model.cells[i + RENDER_MODEL_BG_OFFSET] === this._cellColorResolver.result.bg &&
-            this._model.cells[i + RENDER_MODEL_FG_OFFSET] === this._cellColorResolver.result.fg &&
-            this._model.cells[i + RENDER_MODEL_EXT_OFFSET] === this._cellColorResolver.result.ext) {
+            this._model.cells[i + RenderModelConstants.BG_OFFSET] === this._cellColorResolver.result.bg &&
+            this._model.cells[i + RenderModelConstants.FG_OFFSET] === this._cellColorResolver.result.fg &&
+            this._model.cells[i + RenderModelConstants.EXT_OFFSET] === this._cellColorResolver.result.ext) {
           continue;
         }
 
@@ -553,9 +573,9 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
         // Cache the results in the model
         this._model.cells[i] = code;
-        this._model.cells[i + RENDER_MODEL_BG_OFFSET] = this._cellColorResolver.result.bg;
-        this._model.cells[i + RENDER_MODEL_FG_OFFSET] = this._cellColorResolver.result.fg;
-        this._model.cells[i + RENDER_MODEL_EXT_OFFSET] = this._cellColorResolver.result.ext;
+        this._model.cells[i + RenderModelConstants.BG_OFFSET] = this._cellColorResolver.result.bg;
+        this._model.cells[i + RenderModelConstants.FG_OFFSET] = this._cellColorResolver.result.fg;
+        this._model.cells[i + RenderModelConstants.EXT_OFFSET] = this._cellColorResolver.result.ext;
 
         width = cell.getWidth();
         this._glyphRenderer.value!.updateCell(x, y, code, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext, chars, width, lastBg);
@@ -566,14 +586,14 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
           // Null out non-first cells
           for (x++; x <= lastCharX; x++) {
-            j = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
+            j = ((y * terminal.cols) + x) * RenderModelConstants.INDICIES_PER_CELL;
             this._glyphRenderer.value!.updateCell(x, y, NULL_CELL_CODE, 0, 0, 0, NULL_CELL_CHAR, 0, 0);
             this._model.cells[j] = NULL_CELL_CODE;
             // Don't re-resolve the cell color since multi-colored ligature backgrounds are not
             // supported
-            this._model.cells[j + RENDER_MODEL_BG_OFFSET] = this._cellColorResolver.result.bg;
-            this._model.cells[j + RENDER_MODEL_FG_OFFSET] = this._cellColorResolver.result.fg;
-            this._model.cells[j + RENDER_MODEL_EXT_OFFSET] = this._cellColorResolver.result.ext;
+            this._model.cells[j + RenderModelConstants.BG_OFFSET] = this._cellColorResolver.result.bg;
+            this._model.cells[j + RenderModelConstants.FG_OFFSET] = this._cellColorResolver.result.fg;
+            this._model.cells[j + RenderModelConstants.EXT_OFFSET] = this._cellColorResolver.result.ext;
           }
           x--; // Go back to the previous update cell for next iteration
         }

addons/addon-webgl/src/WebglUtils.ts

@@ -4,6 +4,7 @@
  */
 
 import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import type { ILogService } from 'common/services/Services';
 
 /**
  * A matrix that when multiplies will translate 0-1 coordinates (left to right,
@@ -16,21 +17,21 @@ export const PROJECTION_MATRIX = new Float32Array([
   -1, 1, 0, 1
 ]);
 
-export function createProgram(gl: WebGLRenderingContext, vertexSource: string, fragmentSource: string): WebGLProgram | undefined {
+export function createProgram(gl: WebGLRenderingContext, vertexSource: string, fragmentSource: string, logService: ILogService): WebGLProgram | undefined {
   const program = throwIfFalsy(gl.createProgram());
-  gl.attachShader(program, throwIfFalsy(createShader(gl, gl.VERTEX_SHADER, vertexSource)));
-  gl.attachShader(program, throwIfFalsy(createShader(gl, gl.FRAGMENT_SHADER, fragmentSource)));
+  gl.attachShader(program, throwIfFalsy(createShader(gl, gl.VERTEX_SHADER, vertexSource, logService)));
+  gl.attachShader(program, throwIfFalsy(createShader(gl, gl.FRAGMENT_SHADER, fragmentSource, logService)));
   gl.linkProgram(program);
   const success = gl.getProgramParameter(program, gl.LINK_STATUS);
   if (success) {
     return program;
   }
 
-  console.error(gl.getProgramInfoLog(program));
+  logService.error(gl.getProgramInfoLog(program));
   gl.deleteProgram(program);
 }
 
-export function createShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | undefined {
+export function createShader(gl: WebGLRenderingContext, type: number, source: string, logService: ILogService): WebGLShader | undefined {
   const shader = throwIfFalsy(gl.createShader(type));
   gl.shaderSource(shader, source);
   gl.compileShader(shader);
@@ -39,7 +40,7 @@ export function createShader(gl: WebGLRenderingContext, type: number, source: st
     return shader;
   }
 
-  console.error(gl.getShaderInfoLog(shader));
+  logService.error(gl.getShaderInfoLog(shader));
   gl.deleteShader(shader);
 }
 

addons/addon-webgl/src/customGlyphs/CustomGlyphRasterizer.ts

@@ -4,6 +4,7 @@
  */
 
 import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import type { ILogService } from 'common/services/Services';
 import { customGlyphDefinitions } from './CustomGlyphDefinitions';
 import { CustomGlyphDefinitionType, CustomGlyphScaleType, CustomGlyphVectorType, type CustomGlyphDefinitionPart, type CustomGlyphPathDrawFunctionDefinition, type CustomGlyphPatternDefinition, type ICustomGlyphSolidOctantBlockVector, type ICustomGlyphVectorShape } from './Types';
 
@@ -22,6 +23,7 @@ export function tryDrawCustomGlyph(
   deviceCharHeight: number,
   fontSize: number,
   devicePixelRatio: number,
+  logService: ILogService,
   backgroundColor?: string,
   variantOffset: number = 0
 ): boolean {
@@ -30,7 +32,7 @@ export function tryDrawCustomGlyph(
     // Normalize to array for uniform handling
     const parts = Array.isArray(unifiedCharDefinition) ? unifiedCharDefinition : [unifiedCharDefinition];
     for (const part of parts) {
-      drawDefinitionPart(ctx, part, xOffset, yOffset, deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, fontSize, devicePixelRatio, backgroundColor, variantOffset);
+      drawDefinitionPart(ctx, part, xOffset, yOffset, deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, fontSize, devicePixelRatio, logService, backgroundColor, variantOffset);
     }
     return true;
   }
@@ -49,6 +51,7 @@ function drawDefinitionPart(
   deviceCharHeight: number,
   fontSize: number,
   devicePixelRatio: number,
+  logService: ILogService,
   backgroundColor?: string,
   variantOffset: number = 0
 ): void {
@@ -79,7 +82,7 @@ function drawDefinitionPart(
       drawPatternChar(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, variantOffset);
       break;
     case CustomGlyphDefinitionType.PATH_FUNCTION:
-      drawPathFunctionCharacter(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, devicePixelRatio, part.strokeWidth);
+      drawPathFunctionCharacter(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, devicePixelRatio, logService, part.strokeWidth);
       break;
     case CustomGlyphDefinitionType.PATH:
       drawPathDefinitionCharacter(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, devicePixelRatio, part.strokeWidth);
@@ -88,7 +91,7 @@ function drawDefinitionPart(
       drawPathNegativeDefinitionCharacter(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, devicePixelRatio, backgroundColor);
       break;
     case CustomGlyphDefinitionType.VECTOR_SHAPE:
-      drawVectorShape(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, fontSize, devicePixelRatio);
+      drawVectorShape(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, fontSize, devicePixelRatio, logService);
       break;
     case CustomGlyphDefinitionType.BRAILLE:
       drawBrailleCharacter(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight);
@@ -510,6 +513,7 @@ function drawPathFunctionCharacter(
   deviceCellWidth: number,
   deviceCellHeight: number,
   devicePixelRatio: number,
+  logService: ILogService,
   strokeWidth?: number
 ): void {
   ctx.save();
@@ -536,7 +540,7 @@ function drawPathFunctionCharacter(
     }
     const f = svgToCanvasInstructionMap[type];
     if (!f) {
-      console.error(`Could not find drawing instructions for "${type}"`);
+      logService.error(`Could not find drawing instructions for "${type}"`);
       continue;
     }
     const args: string[] = instruction.substring(1).split(',');
@@ -598,7 +602,8 @@ function drawVectorShape(
   deviceCellWidth: number,
   deviceCellHeight: number,
   fontSize: number,
-  devicePixelRatio: number
+  devicePixelRatio: number,
+  logService: ILogService
 ): void {
   // Clip the cell to make sure drawing doesn't occur beyond bounds
   const clipRegion = new Path2D();
@@ -619,7 +624,7 @@ function drawVectorShape(
     }
     const f = svgToCanvasInstructionMap[type];
     if (!f) {
-      console.error(`Could not find drawing instructions for "${type}"`);
+      logService.error(`Could not find drawing instructions for "${type}"`);
       continue;
     }
     const args: string[] = instruction.substring(1).split(',');

addons/addon-webgl/src/tsconfig.json

@@ -25,7 +25,6 @@
       ]
     },
     "strict": true,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "types": [
       "../../../node_modules/@types/mocha"

addons/addon-webgl/test/WebglRenderer.test.ts

@@ -15,8 +15,10 @@ test.beforeAll(async ({ browser }) => {
   await openTerminal(ctx);
   ctxWrapper.value = ctx;
   await ctx.page.evaluate(`
-    window.addon = new window.WebglAddon(true);
-    window.term.loadAddon(window.addon);
+    try {
+      window.addon = new window.WebglAddon(true);
+      window.term.loadAddon(window.addon);
+    } catch (e) {}
   `);
 });
 test.afterAll(async () => await ctx.page.close());
@@ -24,15 +26,18 @@ test.afterAll(async () => await ctx.page.close());
 test.describe('WebGL Renderer Integration Tests', async () => {
   // HACK: webgl2 is often not supported in headless firefox on Linux
   // https://github.com/microsoft/playwright/issues/11566
+  // also disable safari due to #5852
   if (platform() === 'linux') {
-    test.skip(({ browserName }) => browserName === 'firefox');
+    test.skip(({ browserName }) => browserName === 'firefox' || browserName === 'webkit');
   }
 
   injectSharedRendererTests(ctxWrapper);
   injectSharedRendererTestsStandalone(ctxWrapper, async () => {
     await ctx.page.evaluate(`
-      window.addon = new window.WebglAddon(true);
-      window.term.loadAddon(window.addon);
+      try {
+        window.addon = new window.WebglAddon(true);
+        window.term.loadAddon(window.addon);
+      } catch (e) {}
     `);
   });
 });

addons/addon-webgl/test/playwright.config.ts

@@ -7,7 +7,10 @@ const config: PlaywrightTestConfig = {
     {
       name: 'Chromium',
       use: {
-        browserName: 'chromium'
+        browserName: 'chromium',
+        launchOptions: {
+          args: ['--enable-unsafe-swiftshader']
+        }
       }
     },
     {

bin/extract_vtfeatures.js

@@ -57,6 +57,9 @@ xterm.js version: {{version}}
 {{#CSI.length}}
 - [CSI](#csi)
 {{/CSI.length}}
+{{#APC.length}}
+- [APC](#apc)
+{{/APC.length}}
 {{#DCS.length}}
 - [DCS](#dcs)
 {{/DCS.length}}
@@ -80,8 +83,9 @@ This document lists xterm.js' support of terminal sequences. The sequences are g
 - CSI - Control Sequence Introducer: sequence starting with \`ESC [\` (7bit) or CSI (\`\\x9B\`, 8bit)
 - DCS - Device Control String: sequence starting with \`ESC P\` (7bit) or DCS (\`\\x90\`, 8bit)
 - OSC - Operating System Command: sequence starting with \`ESC ]\` (7bit) or OSC (\`\\x9D\`, 8bit)
+- APC - Application Program Command: sequence starting with \`ESC _\` (7bit) or OSC (\`\\x9F\`, 8bit)
 
-Application Program Command (APC), Privacy Message (PM) and Start of String (SOS) are recognized but not supported,
+Privacy Message (PM) and Start of String (SOS) are recognized but not supported,
 any sequence of these types will be silently ignored. They are also not hookable by the API.
 
 Note that the list only marks sequences implemented in xterm.js' core codebase as supported. Missing sequences are either
@@ -178,6 +182,33 @@ To denote the sequences the tables use the same abbreviations as xterm does:
 {{/CSI.length}}
 
 
+{{#APC.length}}
+## APC
+
+| Mnemonic | Name | Sequence | Short Description | Support |
+| -------- | ---- | -------- | ----------------- | ------- |
+{{#APC}}
+| {{mnemonic}} | {{name}} | \`{{sequence}}\` | {{{shortDescription}}} {{#longDescription.length}}_[more](#{{longTarget}}){: .link-details}_{{/longDescription.length}} | {{{status}}} |
+{{/APC}}
+
+{{#APC.hasLongDescriptions}}
+{{#APC}}
+{{#longDescription.length}}
+<section class="sequence-details">
+
+### {{name}}
+{{#longDescription}}
+{{{.}}}
+{{/longDescription}}
+
+</section>
+{{/longDescription.length}}
+{{/APC}}
+{{/APC.hasLongDescriptions}}
+
+{{/APC.length}}
+
+
 {{#DCS.length}}
 ## DCS
 

demo/client/components/window/addonImageWindow.ts

@@ -65,7 +65,8 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
     const dtIip = document.createElement('dt');
     dtIip.textContent = 'IIP (iTerm)';
     dlIip.appendChild(dtIip);
-    this._addDdWithButton(dlIip, 'image-demo3', 'palette');
+    this._addDdWithButton(dlIip, 'image-demo3', 'palette (png File)');
+    this._addDdWithButton(dlIip, 'image-demo4', 'dice (qoi MultipartFile)');
     container.appendChild(dlIip);
 
     // Kitty demos
@@ -141,6 +142,21 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
         this._terminal.write(`\x1b]1337;File=inline=1;size=${data.length}:${btoa(sdata)}\x1b\\`);
       });
 
+    const iipDemoMulti = (url: string) => () => fetch(url)
+      .then(resp => resp.arrayBuffer())
+      .then(buffer => {
+        const data = new Uint8Array(buffer);
+        let sdata = '';
+        for (let i = 0; i < data.length; ++i) sdata += String.fromCharCode(data[i]);
+        const encoded = btoa(sdata);
+        this._terminal.write('\r\n');
+        this._terminal.write(`\x1b]1337;MultipartFile=inline=1\x1b\\`);
+        for (let i = 0; i < encoded.length; i += 100) {
+          this._terminal.write(`\x1b]1337;FilePart=${encoded.slice(i, i + 100)}\x1b\\`);
+        }
+        this._terminal.write(`\x1b]1337;FileEnd\x1b\\`);
+      });
+
     const kittyDemo = (url: string) => () => fetch(url)
       .then(resp => resp.arrayBuffer())
       .then(buffer => {
@@ -158,6 +174,8 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
       sixelDemo('https://raw.githubusercontent.com/jerch/node-sixel/master/testfiles/test2.sixel'));
     document.getElementById('image-demo3')!.addEventListener('click',
       iipDemo('https://raw.githubusercontent.com/jerch/node-sixel/master/palette.png'));
+    document.getElementById('image-demo4')!.addEventListener('click',
+      iipDemoMulti('https://raw.githubusercontent.com/jerch/xterm-wasm-parts/master/fixtures/qoi/dice.qoi'));
     document.getElementById('image-demo-kitty1')!.addEventListener('click',
       kittyDemo('https://raw.githubusercontent.com/jerch/node-sixel/master/palette.png'));
 
@@ -176,7 +194,7 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
       //   }
       // }
 
-      const pos = (this._terminal as any)._core._mouseService!.getCoords(ev, (this._terminal as any)._core.screenElement!, this._terminal.cols, this._terminal.rows);
+      const pos = (this._terminal as any)._core._mouseCoordsService!.getCoords(ev, (this._terminal as any)._core.screenElement!, this._terminal.cols, this._terminal.rows);
       const x = pos[0] - 1;
       const y = pos[1] - 1;
       const canvas = ev.shiftKey

demo/client/components/window/optionsWindow.ts

@@ -252,6 +252,11 @@ export class OptionsWindow extends BaseWindow implements IControlWindow {
             input.value = 'auto';
             this._handlers.updateTerminalSize();
           }
+          const screenElement = document.querySelector('.xterm-screen');
+          if (screenElement instanceof HTMLElement) {
+            screenElement.style.outline = this._autoResize ? ''
+              : 'solid thin red';
+          }
         } else if (o === 'theme') {
           value = this._getTheme();
         }

demo/client/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es2021",
+    "types": ["node"],
     "outDir": "../out-demo/client",
     "rootDir": ".",
     "sourceMap": true,

demo/server/server.ts

@@ -118,7 +118,7 @@ function startServer(): void {
   });
 
   appWs.ws('/terminals/:pid', function (ws, req) {
-    const term = terminals[parseInt(req.params.pid)];
+    const term = terminals[parseInt(Array.isArray(req.params.pid) ? req.params.pid[0] : req.params.pid)];
     console.log('Connected to terminal ' + term.pid);
     temporaryDisposable[term.pid].dispose();
     delete temporaryDisposable[term.pid];

eslint.config.mjs

@@ -37,12 +37,13 @@ export default tseslint.config(
       '@stylistic/comma-spacing': ['warn', { before: false, after: true }],
       '@stylistic/indent': ['warn', 2],
       '@stylistic/semi': ['warn', 'always'],
-      '@stylistic/quotes': ['warn', 'single', { allowTemplateLiterals: true }],
+      '@stylistic/quotes': ['warn', 'single', { allowTemplateLiterals: 'always' }],
       '@stylistic/member-delimiter-style': ['warn', {
         multiline: { delimiter: 'semi', requireLast: true },
         singleline: { delimiter: 'comma', requireLast: false }
       }],
       '@stylistic/type-annotation-spacing': 'warn',
+      '@stylistic/space-unary-ops': 'warn',
 
       '@typescript-eslint/array-type': ['warn', { default: 'array', readonly: 'generic' }],
       '@typescript-eslint/consistent-type-assertions': 'warn',
@@ -85,6 +86,7 @@ export default tseslint.config(
       'eqeqeq': ['warn', 'always'],
       'jsdoc/check-alignment': 'warn',
       'jsdoc/check-param-names': 'warn',
+      'jsdoc/multiline-blocks': 'warn',
       'jsdoc/no-multi-asterisks': 'warn',
       'keyword-spacing': 'warn',
       'max-len': ['warn', {

eslint.config.typings.mjs

@@ -17,7 +17,7 @@ export default tseslint.config(
     rules: {
       '@stylistic/indent': ['warn', 2],
       '@stylistic/semi': ['warn', 'always'],
-      '@stylistic/quotes': ['warn', 'single', { allowTemplateLiterals: true }],
+      '@stylistic/quotes': ['warn', 'single', { allowTemplateLiterals: 'always' }],
       '@stylistic/member-delimiter-style': ['warn', {
         multiline: { delimiter: 'semi', requireLast: true },
         singleline: { delimiter: 'comma', requireLast: false }

package.json

@@ -29,6 +29,7 @@
   "scripts": {
     "presetup": "npm run build",
     "setup": "npm run esbuild",
+    "setup-full": "node bin/setup-full.mjs",
     "postsetup": "npm run esbuild-demo-server",
     "start": "node demo/start",
     "dev": "concurrently -k -p [{name}] -n tsc,esbuild,esbuild-demo-client,esbuild-demo-server,server -c blue,yellow,cyan,green,magenta \"npm:tsc-watch\" \"npm:esbuild-watch\" \"npm:esbuild-demo-client-watch\" \"npm:esbuild-demo-server-watch\" \"npm:start\"",
@@ -55,7 +56,6 @@
     "test-unit": "node ./bin/test_unit.js",
     "test-unit-slow-tests": "npm run test-unit | grep \"ms)\"",
     "test-unit-coverage": "node ./bin/test_unit.js --coverage",
-    "test-unit-dev": "cross-env NODE_PATH='./out' mocha",
     "test-integration": "node ./bin/test_integration.js --workers=75%",
     "test-integration-chromium": "node ./bin/test_integration.js --workers=75% \"--project=Chromium\"",
     "test-integration-firefox": "node ./bin/test_integration.js --workers=75% \"--project=FirefoxStable\"",
@@ -65,58 +65,51 @@
     "benchmark-baseline": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --baseline out-test/benchmark/*benchmark.js",
     "benchmark-eval": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --eval out-test/benchmark/*benchmark.js",
     "clean": "rm -rf lib out addons/*/lib addons/*/out",
-    "vtfeatures": "node bin/extract_vtfeatures.js src/**/*.ts src/*.ts",
+    "vtfeatures": "node bin/extract_vtfeatures.js src/*/*.ts src/*/*/*.ts src/*.ts addons/**/src/*.ts",
     "prepackage": "npm run build",
     "package": "webpack",
     "postpackage": "npm run esbuild-package",
     "prepackage-headless": "npm run esbuild-package-headless-only",
     "package-headless": "webpack --config ./webpack.config.headless.js",
     "postpackage-headless": "node ./bin/package_headless.js",
-    "prepublishOnly": "npm run package",
-    "agent:setup-repo": "node bin/agent/setup-repo.mjs"
+    "prepublishOnly": "npm run package"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@lunapaint/png-codec": "^0.2.0",
-    "@playwright/test": "^1.57.0",
-    "@stylistic/eslint-plugin": "^4.4.1",
-    "@types/chai": "^4.2.22",
-    "@types/debug": "^4.1.7",
-    "@types/deep-equal": "^1.0.1",
-    "@types/express": "4",
+    "@playwright/test": "^1.59.1",
+    "@stylistic/eslint-plugin": "^5.10.0",
+    "@types/chai": "^5.2.3",
+    "@types/express": "^5.0.6",
     "@types/express-ws": "^3.0.1",
-    "@types/jsdom": "^27.0.0",
-    "@types/mocha": "^9.0.0",
+    "@types/jsdom": "^28.0.1",
+    "@types/mocha": "^10.0.10",
     "@types/node": "^22.19.3",
-    "@types/trusted-types": "^1.0.6",
-    "@types/utf8": "^3.0.0",
     "@types/webpack": "^5.28.0",
     "@types/ws": "^8.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.50.1",
-    "@typescript-eslint/parser": "^8.50.1",
-    "@typescript/native-preview": "^7.0.0-dev.20260213.1",
-    "chai": "^4.3.4",
+    "@typescript-eslint/eslint-plugin": "^8.59.2",
+    "@typescript-eslint/parser": "^8.59.2",
+    "@typescript/native-preview": "^7.0.0-dev.20260509.2",
+    "chai": "^6.2.2",
     "concurrently": "^9.1.2",
-    "cross-env": "^7.0.3",
-    "deep-equal": "^2.0.5",
-    "esbuild": "~0.25.2",
-    "eslint": "^9.39.2",
-    "eslint-plugin-jsdoc": "^50.8.0",
-    "express": "^4.19.2",
+    "esbuild": "^0.28.0",
+    "eslint": "^10.3.0",
+    "eslint-plugin-jsdoc": "^62.9.0",
+    "express": "^5.2.1",
     "express-ws": "^5.0.2",
-    "jsdom": "^27.3.0",
-    "mocha": "^10.1.0",
+    "jsdom": "^29.1.1",
+    "mocha": "^11.7.5",
     "mustache": "^4.2.0",
     "node-pty": "^1.2.0-beta.9",
-    "nyc": "^17.1.0",
-    "source-map-loader": "^3.0.0",
+    "nyc": "^18.0.0",
+    "source-map-loader": "^5.0.0",
     "source-map-support": "^0.5.20",
-    "ts-loader": "^9.3.1",
+    "ts-loader": "^9.5.7",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.1",
-    "utf8": "^3.0.0",
-    "webpack": "^5.61.0",
-    "webpack-cli": "^4.9.1",
-    "ws": "^8.2.3",
-    "xterm-benchmark": "^0.3.1"
+    "typescript-eslint": "^8.59.2",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2",
+    "ws": "^8.20.0",
+    "xterm-benchmark": "^0.3.2"
   }
 }

src/browser/AccessibilityManager.ts

@@ -12,7 +12,9 @@ import { IBuffer } from 'common/buffer/Types';
 import { IInstantiationService } from 'common/services/Services';
 import { addDisposableListener } from 'browser/Dom';
 
-const MAX_ROWS_TO_READ = 20;
+const enum Constants {
+  MAX_ROWS_TO_READ = 20
+}
 
 const enum BoundaryPosition {
   TOP,
@@ -137,7 +139,7 @@ export class AccessibilityManager extends Disposable {
   }
 
   private _handleChar(char: string): void {
-    if (this._liveRegionLineCount < MAX_ROWS_TO_READ + 1) {
+    if (this._liveRegionLineCount < Constants.MAX_ROWS_TO_READ + 1) {
       if (this._charsToConsume.length > 0) {
         // Have the screen reader ignore the char if it was just input
         const shiftedChar = this._charsToConsume.shift();
@@ -150,7 +152,7 @@ export class AccessibilityManager extends Disposable {
 
       if (char === '\n') {
         this._liveRegionLineCount++;
-        if (this._liveRegionLineCount === MAX_ROWS_TO_READ + 1) {
+        if (this._liveRegionLineCount === Constants.MAX_ROWS_TO_READ + 1) {
           this._liveRegion.textContent = Strings.tooMuchOutput.get();
         }
       }

src/browser/CoreBrowserTerminal.ts

@@ -37,7 +37,7 @@ import { CharacterJoinerService } from 'browser/services/CharacterJoinerService'
 import { CoreBrowserService } from 'browser/services/CoreBrowserService';
 import { LinkProviderService } from 'browser/services/LinkProviderService';
 import { MouseCoordsService } from 'browser/services/MouseCoordsService';
-import { MouseService } from 'browser/services/MouseService';
+import { MouseEventCssClasses, MouseService } from 'browser/services/MouseService';
 import { RenderService } from 'browser/services/RenderService';
 import { SelectionService } from 'browser/services/SelectionService';
 import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IKeyboardService, ILinkProviderService, IMouseCoordsService, IMouseService, IRenderService, ISelectionService, IThemeService } from 'browser/services/Services';
@@ -212,7 +212,7 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
     if (!this._themeService) return;
     for (const req of event) {
       let acc: 'foreground' | 'background' | 'cursor' | 'ansi';
-      let ident = '';
+      let ident: string;
       switch (req.index) {
         case SpecialColorIndex.FOREGROUND: // OSC 10 | 110
           acc = 'foreground';
@@ -563,8 +563,9 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
 
     try {
       this._onWillOpen.fire(this.element);
+    } catch (e) {
+      this._logService.error('onWillOpen handler threw an exception', e);
     }
-    catch { /* fails to load addon for some reason */ }
     if (!this._renderService.hasRenderer()) {
       this._renderService.setRenderer(this._createRenderer());
     }
@@ -617,11 +618,12 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
     this._register(addDisposableListener(this.element, 'mousedown', (e: MouseEvent) => this._selectionService!.handleMouseDown(e)));
 
     // apply mouse event classes set by escape codes before terminal was attached
-    if (this.mouseStateService.areMouseEventsActive) {
+    if (this.mouseStateService.areMouseEventsActive && !this.options.mouseEventsRequireAlt) {
       this._selectionService.disable();
-      this.element.classList.add('enable-mouse-events');
+      this.element.classList.add(MouseEventCssClasses.ENABLE_MOUSE_EVENTS);
     } else {
       this._selectionService.enable();
+      this.element.classList.remove(MouseEventCssClasses.ENABLE_MOUSE_EVENTS);
     }
 
     if (this.options.screenReaderMode) {

src/browser/REARCHITECTURE.md

@@ -0,0 +1,173 @@
+# Browser folder rearchitecture
+
+Composite TypeScript projects with enforced dependencies, mirroring the layered layout planned for `src/common/`.
+
+## Platform layer rule
+
+A module is **platform** only if **no class** in that project has a **service** injected via its constructor. That includes:
+
+- Common services (`@IBufferService`, `@IOptionsService`, `@ICoreService`, `@IInstantiationService`, etc.)
+- Browser services (`@ICoreBrowserService`, `@IRenderService`, `@IThemeService`, `@ICharSizeService`, …)
+
+Passing a service into a **function** (e.g. `moveToCellSequence(…, bufferService)`) is fine. `new TextBlinkStateManager(…, coreBrowserService, optionsService)` is not — that class belongs in integration.
+
+Interface-only modules (`browser/selection/Types.ts`, `renderer/shared/Types.ts`) are platform. Implementations that take services are not.
+
+## Dependency graph (corrected)
+
+```mermaid
+flowchart BT
+  subgraph platform["Platform layer — no ctor service injection"]
+    direction LR
+    base["browser/base"]
+    scrollable["browser/scrollable"]
+    input["browser/input"]
+    selectionTypes["browser/selection/types"]
+    renderCore["browser/renderer/core"]
+    decorStore["browser/decorations/store"]
+
+    scrollable --> base
+    input --> base
+    selectionTypes --> base
+    renderCore --> base
+    decorStore --> base
+  end
+
+  subgraph integration["Integration layer — DI and wiring"]
+    direction LR
+    services["browser/services"]
+    renderer["browser/renderer"]
+    decorations["browser/decorations"]
+    terminal["browser/terminal"]
+
+    services --> base
+    services --> input
+    services --> selectionTypes
+    services --> renderCore
+    services --> decorStore
+    renderer --> services
+    renderer --> renderCore
+    renderer --> base
+    decorations --> services
+    decorations --> decorStore
+    decorations --> renderCore
+    terminal --> services
+    terminal --> renderer
+    terminal --> decorations
+    terminal --> input
+    terminal --> scrollable
+    terminal --> base
+  end
+
+  subgraph api_layer["API layer"]
+    public["browser/public"]
+  end
+
+  integration --> platform
+  api_layer --> integration
+
+  public --> terminal
+```
+
+`browser/renderer` is **not** platform: it owns `DomRenderer`, `DomRendererRowFactory`, and `TextBlinkStateManager`, all of which take injected services.
+
+## Constructor audit (current tree)
+
+### Platform-eligible
+
+| Location | Type | Notes |
+| --- | --- | --- |
+| `Dom.ts`, `Types.ts`, `LocalizableStrings.ts`, `ColorContrastCache.ts`, `TimeBasedDebouncer.ts`, `shared/` | classes / functions | no DI |
+| `scrollable/**` | widgets | `touch.ts` uses `Dom` only |
+| `input/Mouse.ts` | functions | pure DOM math |
+| `input/MoveToCell.ts` | functions | `IBufferService` passed as argument, not ctor-injected |
+| `selection/Types.ts` | interfaces | no classes with DI |
+| `renderer/shared/Constants.ts`, `RendererUtils.ts`, `Types.ts`, `SelectionRenderModel.ts` | classes | no DI |
+| `renderer/dom/WidthCache.ts` | class | canvas factory only, no services |
+| `decorations/ColorZoneStore.ts` | class | common types only, no DI |
+
+### Integration-only (ctor service injection)
+
+| Location | Injected services (representative) |
+| --- | --- |
+| `selection/SelectionModel.ts` | `IBufferService` |
+| `input/CompositionHelper.ts` | `IBufferService`, `IOptionsService`, `ICoreService`, `IRenderService` |
+| `renderer/shared/TextBlinkStateManager.ts` | `ICoreBrowserService`, `IOptionsService` |
+| `renderer/dom/DomRendererRowFactory.ts` | `ICharacterJoinerService`, `IOptionsService`, `ICoreBrowserService`, `ICoreService`, `IDecorationService`, `IThemeService` |
+| `renderer/dom/DomRenderer.ts` | `IInstantiationService`, `ICharSizeService`, `IOptionsService`, `IBufferService`, `ICoreService`, `ICoreBrowserService`, `IThemeService`; creates `DomRendererRowFactory` via `IInstantiationService` |
+| `renderer/dom/DomRenderer` inner `CursorBlinkStateManager` | `ICoreBrowserService` |
+| `services/**` | common + browser services (all `@…` ctor params) |
+| `RenderDebouncer.ts` | `ICoreBrowserService` |
+| `decorations/BufferDecorationRenderer.ts`, `OverviewRulerRenderer.ts` | `IBufferService`, `ICoreBrowserService`, `IDecorationService`, `IRenderService`, `IThemeService`, … |
+| `Viewport.ts`, `Linkifier.ts`, `AccessibilityManager.ts`, `OscLinkProvider.ts` | multiple common + browser services |
+| `CoreBrowserTerminal.ts` | orchestrates service registration and renderer construction |
+
+`Clipboard.ts` has no class ctor DI; handlers receive `ISelectionService` at call sites — keep with `terminal`.
+
+## Target package layout
+
+### Platform
+
+| Project | Contents |
+| --- | --- |
+| `browser/base` | `Dom`, `Types`, `LocalizableStrings`, `ColorContrastCache`, `TimeBasedDebouncer`, `shared/`; browser **service interfaces** (extracted from `services/Services.ts`) |
+| `browser/scrollable` | `scrollable/**` |
+| `browser/input` | `Mouse.ts`, `MoveToCell.ts` only |
+| `browser/selection/types` | `selection/Types.ts` (or merge into `base` if preferred) |
+| `browser/renderer/core` | `renderer/shared/{Constants,RendererUtils,Types,SelectionRenderModel}.ts`, `renderer/dom/WidthCache.ts` |
+| `browser/decorations/store` | `ColorZoneStore.ts` |
+
+`SelectionModel` moves to **`browser/services`** (only consumer is `SelectionService`).
+
+`CompositionHelper` moves to **`browser/terminal`** (or `browser/input/ime` as integration sibling).
+
+`TextBlinkStateManager`, `DomRenderer`, `DomRendererRowFactory` move to **`browser/renderer`** (integration), depending on **`browser/services`**.
+
+### Integration
+
+| Project | Contents |
+| --- | --- |
+| `browser/services` | `services/**`, `selection/SelectionModel.ts`, `RenderDebouncer.ts` |
+| `browser/renderer` | `TextBlinkStateManager.ts`, `renderer/dom/DomRenderer.ts`, `DomRendererRowFactory.ts` (+ tests) |
+| `browser/decorations` | `BufferDecorationRenderer.ts`, `OverviewRulerRenderer.ts` |
+| `browser/terminal` | `CoreBrowserTerminal.ts`, `Viewport.ts`, `Linkifier.ts`, `Clipboard.ts`, `AccessibilityManager.ts`, `OscLinkProvider.ts`, `CompositionHelper.ts` |
+
+### API
+
+| Project | Contents |
+| --- | --- |
+| `browser/public` | `public/Terminal.ts` |
+
+## Build order
+
+1. `base`, `scrollable`, `input`, `selection/types`, `renderer/core`, `decorations/store`
+2. `services`
+3. `renderer`, `decorations`
+4. `terminal`
+5. `public`
+
+## Why `renderer/dom` is not platform
+
+`DomRenderer` (abbreviated):
+
+```ts
+constructor(
+  …,
+  @IInstantiationService instantiationService: IInstantiationService,
+  @ICharSizeService private readonly _charSizeService: ICharSizeService,
+  @IOptionsService private readonly _optionsService: IOptionsService,
+  @IBufferService private readonly _bufferService: IBufferService,
+  @ICoreService private readonly _coreService: ICoreService,
+  @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
+  @IThemeService private readonly _themeService: IThemeService
+) {
+  this._rowFactory = instantiationService.createInstance(DomRendererRowFactory, document);
+  this._textBlinkStateManager = this._register(new TextBlinkStateManager(…, this._coreBrowserService, this._optionsService));
+}
+```
+
+`DomRendererRowFactory` similarly injects `ICharacterJoinerService`, `ICoreBrowserService`, `IThemeService`, and other services. So **`renderer/dom` → `browser/services`** (and common services) today; the corrected graph places the whole DOM renderer stack in integration, with only `WidthCache` left in `renderer/core`.
+
+## Parity with `common/`
+
+Common platform modules contain algorithms and data structures without terminal service wiring. Browser platform modules are the same: DOM/scroll utilities, pointer math, renderer **primitives** (`WidthCache`, selection render geometry), and shared types — not renderers or IME helpers that pull `IRenderService` / `IThemeService` from DI.

src/browser/Terminal2.test.ts

@@ -14,7 +14,7 @@ import { IDisposable } from '@xterm/xterm';
 const COLS = 80;
 const ROWS = 25;
 
-const escapeSequenceFilesDir = path.join(__dirname, '../../fixtures/escape_sequence_files');
+const escapeSequenceFilesDir = path.join(__dirname, '../../test/fixtures/escape_sequence_files');
 const TESTFILES = fs.readdirSync(escapeSequenceFilesDir)
   .filter(f => f.endsWith('.in'))
   .map(f => path.join(escapeSequenceFilesDir, f));
@@ -125,7 +125,7 @@ function formatError(input: string, output: string, expected: string): string {
 // simple debug output of terminal cells
 function terminalToString(term: CoreBrowserTerminal): string {
   let result = '';
-  let lineText = '';
+  let lineText: string;
   for (let line = term.buffer.ybase; line < term.buffer.ybase + term.rows; line++) {
     lineText = term.buffer.lines.get(line)!.translateToString(true);
     // rtrim empty cells as xterm does

src/browser/TestUtils.test.ts

@@ -107,7 +107,7 @@ export class MockTerminal implements ITerminal {
   public registerOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
     throw new Error('Method not implemented.');
   }
-  public registerApcHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
+  public registerApcHandler(id: IFunctionIdentifier, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
     throw new Error('Method not implemented.');
   }
   public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {

src/browser/decorations/OverviewRulerRenderer.ts

@@ -94,6 +94,12 @@ export class OverviewRulerRenderer extends Disposable {
     this._register(this._coreBrowserService.onDprChange(() => this._queueRefresh(true)));
     this._register(this._optionsService.onSpecificOptionChange('scrollbar', () => this._queueRefresh(true)));
     this._register(this._themeService.onChangeColors(() => this._queueRefresh()));
+    this._register(toDisposable(() => {
+      if (this._animationFrame !== undefined) {
+        this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
+        this._animationFrame = undefined;
+      }
+    }));
     this._queueRefresh(true);
   }
 
@@ -136,6 +142,9 @@ export class OverviewRulerRenderer extends Disposable {
   }
 
   private _refreshCanvasDimensions(): void {
+    if (this._store.isDisposed || !this._renderService.hasRenderer()) {
+      return;
+    }
     const cssCanvasHeight = this._renderService.dimensions.css.canvas.height;
     const deviceCanvasHeight = this._renderService.dimensions.device.canvas.height;
     this._canvas.style.width = `${this._width}px`;
@@ -147,6 +156,9 @@ export class OverviewRulerRenderer extends Disposable {
   }
 
   private _refreshDecorations(): void {
+    if (this._store.isDisposed || !this._renderService.hasRenderer()) {
+      return;
+    }
     if (this._shouldUpdateDimensions) {
       this._refreshCanvasDimensions();
     }
@@ -200,13 +212,18 @@ export class OverviewRulerRenderer extends Disposable {
   }
 
   private _queueRefresh(updateCanvasDimensions?: boolean, updateAnchor?: boolean): void {
+    if (this._store.isDisposed) {
+      return;
+    }
     this._shouldUpdateDimensions = updateCanvasDimensions || this._shouldUpdateDimensions;
     this._shouldUpdateAnchor = updateAnchor || this._shouldUpdateAnchor;
     if (this._animationFrame !== undefined) {
       return;
     }
     this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
-      this._refreshDecorations();
+      if (!this._store.isDisposed) {
+        this._refreshDecorations();
+      }
       this._animationFrame = undefined;
     });
   }

src/browser/renderer/dom/DomRenderer.ts

@@ -19,13 +19,15 @@ import { Emitter } from 'common/Event';
 import { addDisposableListener } from 'browser/Dom';
 
 
-const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
-const ROW_CONTAINER_CLASS = 'xterm-rows';
-const FG_CLASS_PREFIX = 'xterm-fg-';
-const BG_CLASS_PREFIX = 'xterm-bg-';
-const FOCUS_CLASS = 'xterm-focus';
-const SELECTION_CLASS = 'xterm-selection';
-const CURSOR_BLINK_IDLE_CLASS = 'xterm-cursor-blink-idle';
+const enum Constants {
+  TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-',
+  ROW_CONTAINER_CLASS = 'xterm-rows',
+  FG_CLASS_PREFIX = 'xterm-fg-',
+  BG_CLASS_PREFIX = 'xterm-bg-',
+  FOCUS_CLASS = 'xterm-focus',
+  SELECTION_CLASS = 'xterm-selection',
+  CURSOR_BLINK_IDLE_CLASS = 'xterm-cursor-blink-idle'
+}
 
 let nextTerminalId = 1;
 
@@ -76,12 +78,12 @@ export class DomRenderer extends Disposable implements IRenderer {
   ) {
     super();
     this._rowContainer = this._document.createElement('div');
-    this._rowContainer.classList.add(ROW_CONTAINER_CLASS);
+    this._rowContainer.classList.add(Constants.ROW_CONTAINER_CLASS);
     this._rowContainer.style.lineHeight = 'normal';
     this._rowContainer.setAttribute('aria-hidden', 'true');
     this._refreshRowElements(this._bufferService.cols, this._bufferService.rows);
     this._selectionContainer = this._document.createElement('div');
-    this._selectionContainer.classList.add(SELECTION_CLASS);
+    this._selectionContainer.classList.add(Constants.SELECTION_CLASS);
     this._selectionContainer.setAttribute('aria-hidden', 'true');
 
     this.dimensions = createRenderDimensions();
@@ -93,7 +95,7 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     this._rowFactory = instantiationService.createInstance(DomRendererRowFactory, document);
 
-    this._element.classList.add(TERMINAL_CLASS_PREFIX + this._terminalClass);
+    this._element.classList.add(Constants.TERMINAL_CLASS_PREFIX + this._terminalClass);
     this._screenElement.appendChild(this._rowContainer);
     this._screenElement.appendChild(this._selectionContainer);
 
@@ -110,7 +112,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     ));
 
     this._register(toDisposable(() => {
-      this._element.classList.remove(TERMINAL_CLASS_PREFIX + this._terminalClass);
+      this._element.classList.remove(Constants.TERMINAL_CLASS_PREFIX + this._terminalClass);
 
       // Outside influences such as React unmounts may manipulate the DOM before our disposal.
       // https://github.com/xtermjs/xterm.js/issues/2960
@@ -160,7 +162,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     }
 
     const styles =
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} span {` +
+      `${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS} span {` +
       ` display: inline-block;` +   // TODO: find workaround for inline-block (creates ~20% render penalty)
       ` height: 100%;` +
       ` vertical-align: top;` +
@@ -181,7 +183,7 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     // Base CSS
     let styles =
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
+      `${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS} {` +
       // Disabling pointer events circumvents a browser behavior that prevents `click` events from
       // being delivered if the target element is replaced during the click. This happened due to
       // refresh() being called during the mousedown handler to start a selection.
@@ -189,14 +191,14 @@ export class DomRenderer extends Disposable implements IRenderer {
       ` color: ${colors.foreground.css};` +
       `}`;
     styles +=
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}, ${this._terminalSelector} .${ROW_CONTAINER_CLASS} span {` +
+      `${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS}, ${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS} span {` +
       ` font-family: ${this._optionsService.rawOptions.fontFamily};` +
       ` font-size: ${this._optionsService.rawOptions.fontSize}px;` +
       ` font-kerning: none;` +
       ` white-space: pre` +
       `}`;
     styles +=
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .xterm-dim {` +
+      `${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS} .xterm-dim {` +
       ` color: ${color.multiplyOpacity(colors.foreground, 0.5).css};` +
       `}`;
     // Text styles
@@ -242,70 +244,70 @@ export class DomRenderer extends Disposable implements IRenderer {
       `}`;
     // Cursor
     styles +=
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_UNDERLINE_CLASS} {` +
+      `${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS}.${Constants.FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_UNDERLINE_CLASS} {` +
       ` animation: ${blinkAnimationUnderlineId} 1s step-end infinite;` +
       `}` +
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} {` +
+      `${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS}.${Constants.FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} {` +
       ` animation: ${blinkAnimationBarId} 1s step-end infinite;` +
       `}` +
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
+      `${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS}.${Constants.FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
       ` animation: ${blinkAnimationBlockId} 1s step-end infinite;` +
       `}` +
       // Disable cursor blinking when idle
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${CURSOR_BLINK_IDLE_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS} {` +
+      `${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS}.${Constants.CURSOR_BLINK_IDLE_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS} {` +
       ` animation: none !important;` +
       `}` +
       // !important helps fix an issue where the cursor will not render on top of the selection,
       // however it's very hard to fix this issue and retain the blink animation without the use of
       // !important. So this edge case fails when cursor blink is on.
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
+      `${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
       ` background-color: ${colors.cursor.css};` +
       ` color: ${colors.cursorAccent.css};` +
       `}` +
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS}:not(.${RowCss.CURSOR_BLINK_CLASS}) {` +
+      `${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS}:not(.${RowCss.CURSOR_BLINK_CLASS}) {` +
       ` background-color: ${colors.cursor.css} !important;` +
       ` color: ${colors.cursorAccent.css} !important;` +
       `}` +
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_OUTLINE_CLASS} {` +
+      `${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_OUTLINE_CLASS} {` +
       ` outline: 1px solid ${colors.cursor.css};` +
       ` outline-offset: -1px;` +
       `}` +
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} {` +
+      `${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} {` +
       ` box-shadow: ${this._optionsService.rawOptions.cursorWidth}px 0 0 ${colors.cursor.css} inset;` +
       `}` +
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_UNDERLINE_CLASS} {` +
+      `${this._terminalSelector} .${Constants.ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_UNDERLINE_CLASS} {` +
       ` border-bottom: 1px ${colors.cursor.css};` +
       ` border-bottom-style: solid;` +
       ` height: calc(100% - 1px);` +
       `}`;
     // Selection
     styles +=
-      `${this._terminalSelector} .${SELECTION_CLASS} {` +
+      `${this._terminalSelector} .${Constants.SELECTION_CLASS} {` +
       ` position: absolute;` +
       ` top: 0;` +
       ` left: 0;` +
       ` z-index: 1;` +
       ` pointer-events: none;` +
       `}` +
-      `${this._terminalSelector}.focus .${SELECTION_CLASS} div {` +
+      `${this._terminalSelector}.focus .${Constants.SELECTION_CLASS} div {` +
       ` position: absolute;` +
       ` background-color: ${colors.selectionBackgroundOpaque.css};` +
       `}` +
-      `${this._terminalSelector} .${SELECTION_CLASS} div {` +
+      `${this._terminalSelector} .${Constants.SELECTION_CLASS} div {` +
       ` position: absolute;` +
       ` background-color: ${colors.selectionInactiveBackgroundOpaque.css};` +
       `}`;
     // Colors
     for (const [i, c] of colors.ansi.entries()) {
       styles +=
-        `${this._terminalSelector} .${FG_CLASS_PREFIX}${i} { color: ${c.css}; }` +
-        `${this._terminalSelector} .${FG_CLASS_PREFIX}${i}.${RowCss.DIM_CLASS} { color: ${color.multiplyOpacity(c, 0.5).css}; }` +
-        `${this._terminalSelector} .${BG_CLASS_PREFIX}${i} { background-color: ${c.css}; }`;
+        `${this._terminalSelector} .${Constants.FG_CLASS_PREFIX}${i} { color: ${c.css}; }` +
+        `${this._terminalSelector} .${Constants.FG_CLASS_PREFIX}${i}.${RowCss.DIM_CLASS} { color: ${color.multiplyOpacity(c, 0.5).css}; }` +
+        `${this._terminalSelector} .${Constants.BG_CLASS_PREFIX}${i} { background-color: ${c.css}; }`;
     }
     styles +=
-      `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { color: ${color.opaque(colors.background).css}; }` +
-      `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR}.${RowCss.DIM_CLASS} { color: ${color.multiplyOpacity(color.opaque(colors.background), 0.5).css}; }` +
-      `${this._terminalSelector} .${BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${colors.foreground.css}; }`;
+      `${this._terminalSelector} .${Constants.FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { color: ${color.opaque(colors.background).css}; }` +
+      `${this._terminalSelector} .${Constants.FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR}.${RowCss.DIM_CLASS} { color: ${color.multiplyOpacity(color.opaque(colors.background), 0.5).css}; }` +
+      `${this._terminalSelector} .${Constants.BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${colors.foreground.css}; }`;
 
     this._themeStyleElement.textContent = styles;
   }
@@ -361,13 +363,13 @@ export class DomRenderer extends Disposable implements IRenderer {
   }
 
   public handleBlur(): void {
-    this._rowContainer.classList.remove(FOCUS_CLASS);
+    this._rowContainer.classList.remove(Constants.FOCUS_CLASS);
     this._cursorBlinkStateManager.pause();
     this.renderRows(0, this._bufferService.rows - 1);
   }
 
   public handleFocus(): void {
-    this._rowContainer.classList.add(FOCUS_CLASS);
+    this._rowContainer.classList.add(Constants.FOCUS_CLASS);
     this._cursorBlinkStateManager.resume();
     this.renderRows(this._bufferService.buffer.y, this._bufferService.buffer.y);
   }
@@ -561,7 +563,7 @@ export class DomRenderer extends Disposable implements IRenderer {
   }
 
   private get _terminalSelector(): string {
-    return `.${TERMINAL_CLASS_PREFIX}${this._terminalClass}`;
+    return `.${Constants.TERMINAL_CLASS_PREFIX}${this._terminalClass}`;
   }
 
   private _handleLinkHover(e: ILinkifierEvent): void {
@@ -667,7 +669,7 @@ class CursorBlinkStateManager {
 
   public restartBlinkAnimation(): void {
     if (this._isIdlePaused) {
-      this._rowContainer.classList.remove(CURSOR_BLINK_IDLE_CLASS);
+      this._rowContainer.classList.remove(Constants.CURSOR_BLINK_IDLE_CLASS);
     }
     this._resetIdleTimer();
   }
@@ -679,7 +681,7 @@ class CursorBlinkStateManager {
 
   public resume(): void {
     this._isIdlePaused = false;
-    this._rowContainer.classList.remove(CURSOR_BLINK_IDLE_CLASS);
+    this._rowContainer.classList.remove(Constants.CURSOR_BLINK_IDLE_CLASS);
     this._resetIdleTimer();
   }
 
@@ -699,7 +701,7 @@ class CursorBlinkStateManager {
   }
 
   private _stopBlinkingDueToIdle(): void {
-    this._rowContainer.classList.add(CURSOR_BLINK_IDLE_CLASS);
+    this._rowContainer.classList.add(Constants.CURSOR_BLINK_IDLE_CLASS);
     this._isIdlePaused = true;
     this._idleTimeout = undefined;
   }

src/browser/renderer/dom/DomRendererRowFactory.test.ts

@@ -8,14 +8,14 @@ import { assert } from 'chai';
 import { DomRendererRowFactory } from 'browser/renderer/dom/DomRendererRowFactory';
 import { NULL_CELL_CODE, NULL_CELL_WIDTH, NULL_CELL_CHAR, DEFAULT_ATTR, FgFlags, BgFlags, Attributes, UnderlineStyle } from 'common/buffer/Constants';
 import { BufferLine, DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
+import { BufferLineStringCache } from 'common/buffer/BufferLineStringCache';
 import { IBufferLine } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { MockCoreService, MockDecorationService, MockOptionsService, createCellData, NULL_CELL_DATA } from 'common/TestUtils.test';
 import { MockCharacterJoinerService, MockCoreBrowserService, MockThemeService } from 'browser/TestUtils.test';
 import { TestWidthCache } from 'browser/renderer/dom/WidthCache.test';
 
-const dom = new jsdom.JSDOM('');
-
+const TEST_STRING_CACHE = new BufferLineStringCache();
 
 describe('DomRendererRowFactory', () => {
   let dom: jsdom.JSDOM;
@@ -517,7 +517,7 @@ describe('DomRendererRowFactory', () => {
   }
 
   function createEmptyLineData(cols: number): IBufferLine {
-    const lineData = new BufferLine(cols);
+    const lineData = new BufferLine(TEST_STRING_CACHE, cols);
     for (let i = 0; i < cols; i++) {
       lineData.setCell(i, NULL_CELL_DATA);
     }

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -90,14 +90,14 @@ export class DomRendererRowFactory {
     let charElement: HTMLSpanElement | undefined;
     let cellAmount = 0;
     let text = '';
-    let i = 0;
+    let i;
     let oldBg = 0;
     let oldFg = 0;
     let oldExt = 0;
     let oldLinkHover: number | boolean = false;
     let oldSpacing = 0;
     let oldIsInSelection: boolean = false;
-    let spacing = 0;
+    let spacing;
     let skipJoinedCheckUntilX = 0;
     const classes: string[] = [];
 
@@ -231,6 +231,7 @@ export class DomRendererRowFactory {
           }
           charElement = this._document.createElement('span');
           cellAmount = 0;
+          // eslint-disable-next-line no-useless-assignment
           text = '';
         }
       }

src/browser/renderer/dom/WidthCache.ts

@@ -110,7 +110,7 @@ export class WidthCache implements IDisposable {
    * `variant` denotes the font variant to be used.
    */
   public get(c: string, bold: boolean | number, italic: boolean | number): number {
-    let cp = 0;
+    let cp: number;
     if (!bold && !italic && c.length === 1 && (cp = c.charCodeAt(0)) < WidthCacheSettings.FLAT_SIZE) {
       if (this._flat[cp] !== WidthCacheSettings.FLAT_UNSET) {
         return this._flat[cp];

src/browser/scrollable/scrollableElement.ts

@@ -18,8 +18,10 @@ import * as platform from 'common/Platform';
 import { INewScrollDimensions, INewScrollPosition, IScrollDimensions, IScrollPosition, IScrollEvent, Scrollable, ScrollbarVisibility } from './scrollable';
 // import 'vs/css!./media/scrollbars';
 
-const HIDE_TIMEOUT = 500;
-const SCROLL_WHEEL_SENSITIVITY = 50;
+const enum Constants {
+  HIDE_TIMEOUT = 500,
+  SCROLL_WHEEL_SENSITIVITY = 50
+}
 
 class MouseWheelClassifierItem {
   public timestamp: number;
@@ -404,12 +406,12 @@ export class SmoothScrollableElement extends Widget {
 
       let desiredScrollPosition: INewScrollPosition = {};
       if (deltaY) {
-        const deltaScrollTop = SCROLL_WHEEL_SENSITIVITY * deltaY;
+        const deltaScrollTop = Constants.SCROLL_WHEEL_SENSITIVITY * deltaY;
         const desiredScrollTop = futureScrollPosition.scrollTop - (deltaScrollTop < 0 ? Math.floor(deltaScrollTop) : Math.ceil(deltaScrollTop));
         this._verticalScrollbar.writeScrollPosition(desiredScrollPosition, desiredScrollTop);
       }
       if (deltaX) {
-        const deltaScrollLeft = SCROLL_WHEEL_SENSITIVITY * deltaX;
+        const deltaScrollLeft = Constants.SCROLL_WHEEL_SENSITIVITY * deltaX;
         const desiredScrollLeft = futureScrollPosition.scrollLeft - (deltaScrollLeft < 0 ? Math.floor(deltaScrollLeft) : Math.ceil(deltaScrollLeft));
         this._horizontalScrollbar.writeScrollPosition(desiredScrollPosition, desiredScrollLeft);
       }
@@ -533,7 +535,7 @@ export class SmoothScrollableElement extends Widget {
 
   private _scheduleHide(): void {
     if (!this._mouseIsOver && !this._isDragging) {
-      this._hideTimeout.cancelAndSet(() => this._hide(), HIDE_TIMEOUT);
+      this._hideTimeout.cancelAndSet(() => this._hide(), Constants.HIDE_TIMEOUT);
     }
   }
 }

src/browser/scrollable/touch.ts

@@ -367,7 +367,7 @@ export class Gesture extends Disposable {
   private _dispatchEvent(event: IGestureEvent): void {
     if (event.type === EventType.TAP) {
       const currentTime = (new Date()).getTime();
-      let setTapCount = 0;
+      let setTapCount;
       if (currentTime - this._lastSetTapCountTime > Gesture._clearTapCountTime) {
         setTapCount = 1;
       } else {

src/browser/services/CharacterJoinerService.test.ts

@@ -7,10 +7,13 @@ import { assert } from 'chai';
 import { ICharacterJoinerService } from 'browser/services/Services';
 import { CharacterJoinerService } from 'browser/services/CharacterJoinerService';
 import { BufferLine } from 'common/buffer/BufferLine';
+import { BufferLineStringCache } from 'common/buffer/BufferLineStringCache';
 import { IBufferLine } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { MockBufferService, createCellData } from 'common/TestUtils.test';
 
+const TEST_STRING_CACHE = new BufferLineStringCache();
+
 describe('CharacterJoinerService', () => {
   let service: ICharacterJoinerService;
 
@@ -22,7 +25,7 @@ describe('CharacterJoinerService', () => {
     lines.set(2, lineData([['a -> b -', 0xFFFFFFFF], ['> c -> d', 0]]));
 
     lines.set(3, lineData([['no joined ranges']]));
-    lines.set(4, new BufferLine(0));
+    lines.set(4, new BufferLine(TEST_STRING_CACHE, 0));
     lines.set(5, lineData([['a', 0x11111111], [' -> b -> c -> '], ['d', 0x22222222]]));
     const line6 = lineData([['wi']]);
     line6.resize(line6.length + 1, createCellData(0, '￥', 2));
@@ -267,7 +270,7 @@ describe('CharacterJoinerService', () => {
 type IPartialLineData = ([string] | [string, number]);
 
 function lineData(data: IPartialLineData[]): IBufferLine {
-  const tline = new BufferLine(0);
+  const tline = new BufferLine(TEST_STRING_CACHE, 0);
   for (let i = 0; i < data.length; ++i) {
     const line = data[i][0];
     const attr = (data[i][1] || 0) as number;
@@ -282,7 +285,7 @@ function substringJoiner(substring: string): (sequence: string) => [number, numb
   return (sequence: string): [number, number][] => {
     const ranges: [number, number][] = [];
     let searchIndex = 0;
-    let matchIndex = -1;
+    let matchIndex;
 
     while ((matchIndex = sequence.indexOf(substring, searchIndex)) !== -1) {
       const matchEndIndex = matchIndex + substring.length;

src/browser/services/MouseCoordsService.ts

@@ -18,7 +18,7 @@ export class MouseCoordsService implements IMouseCoordsService {
 
   public getCoords(event: {clientX: number, clientY: number}, element: HTMLElement, colCount: number, rowCount: number, isSelection?: boolean): [number, number] | undefined {
     return getCoords(
-      window,
+      getWindow(element),
       event,
       element,
       colCount,

src/browser/services/MouseService.test.ts

@@ -3,10 +3,11 @@
  * @license MIT
  */
 import { assert } from 'chai';
-import { MouseService } from 'browser/services/MouseService';
+import { AltMouseCursorController, MouseEventCssClasses, MouseService } from 'browser/services/MouseService';
 import { MouseStateService } from 'common/services/MouseStateService';
 import { CoreMouseAction, CoreMouseButton } from 'common/Types';
 import { IBufferService, ICoreService, ILogService, IOptionsService } from 'common/services/Services';
+import { OptionsService } from 'common/services/OptionsService';
 import { MockCoreBrowserService, MockRenderService, MockSelectionService } from 'browser/TestUtils.test';
 
 function toBytes(s: string | undefined): number[] {
@@ -42,6 +43,36 @@ const logService: ILogService = {
   error: () => {}
 } as any;
 
+class TestSelectionService extends MockSelectionService {
+  public enableCount = 0;
+  public disableCount = 0;
+
+  public override enable(): void {
+    this.enableCount++;
+  }
+
+  public override disable(): void {
+    this.disableCount++;
+  }
+
+  public override shouldForceSelection(): boolean {
+    return false;
+  }
+}
+
+function createTestMouseTargetElement(): HTMLElement {
+  const classes = new Set<string>();
+  return {
+    classList: {
+      add: (className: string) => classes.add(className),
+      remove: (className: string) => classes.delete(className),
+      contains: (className: string) => classes.has(className)
+    },
+    addEventListener: () => {},
+    removeEventListener: () => {}
+  } as any;
+}
+
 describe('MouseService _triggerMouseEvent', () => {
   let mouseService: MouseService;
   let mouseStateService: MouseStateService;
@@ -211,3 +242,112 @@ describe('MouseService _triggerMouseEvent', () => {
     reports = [];
   });
 });
+
+describe('MouseService mouseEventsRequireAlt', () => {
+  it('should update selection state and cursor class when toggled while mouse events are active', () => {
+    const mouseStateService = new MouseStateService();
+    const optionsService = new OptionsService({});
+    const selectionService = new TestSelectionService();
+    const mouseService = new MouseService(
+      new MockRenderService(),
+      {
+        getMouseReportCoords: (_ev: MouseEvent, _el: HTMLElement) => ({ col: 0, row: 0, x: 0, y: 0 })
+      } as any,
+      mouseStateService,
+      {
+        triggerDataEvent: () => {},
+        triggerBinaryEvent: () => {},
+        decPrivateModes: { applicationCursorKeys: false }
+      } as any,
+      bufferService,
+      optionsService,
+      selectionService,
+      logService,
+      new MockCoreBrowserService()
+    );
+    const element = createTestMouseTargetElement();
+    const screenElement = createTestMouseTargetElement();
+    const document = {
+      addEventListener: () => {},
+      removeEventListener: () => {}
+    } as any;
+
+    mouseService.bindMouse({
+      element,
+      screenElement,
+      document
+    }, disposable => disposable, () => {});
+
+    mouseStateService.activeProtocol = 'ANY';
+    assert.isTrue(element.classList.contains(MouseEventCssClasses.ENABLE_MOUSE_EVENTS));
+    assert.equal(selectionService.disableCount, 1);
+
+    optionsService.options.mouseEventsRequireAlt = true;
+    assert.isFalse(element.classList.contains(MouseEventCssClasses.ENABLE_MOUSE_EVENTS));
+    assert.equal(selectionService.enableCount, 2);
+
+    optionsService.options.mouseEventsRequireAlt = false;
+    assert.isTrue(element.classList.contains(MouseEventCssClasses.ENABLE_MOUSE_EVENTS));
+    assert.equal(selectionService.disableCount, 2);
+  });
+
+  it('should strip alt modifier from forwarded mouse reports', () => {
+    const mouseStateService = new MouseStateService();
+    mouseStateService.activeProtocol = 'ANY';
+    mouseStateService.activeEncoding = 'SGR';
+    const optionsService = new OptionsService({ mouseEventsRequireAlt: true });
+    const reports: string[] = [];
+    const mouseService = new MouseService(
+      new MockRenderService(),
+      {
+        getMouseReportCoords: () => ({ col: 0, row: 0, x: 0, y: 0 })
+      } as any,
+      mouseStateService,
+      {
+        triggerDataEvent: (data: string) => reports.push(data),
+        triggerBinaryEvent: () => {},
+        decPrivateModes: { applicationCursorKeys: false }
+      } as any,
+      bufferService,
+      optionsService,
+      new TestSelectionService(),
+      logService,
+      new MockCoreBrowserService()
+    );
+    const ctx = {
+      target: {
+        screenElement: createTestMouseTargetElement()
+      },
+      requestedEvents: {}
+    } as any;
+
+    const sent = (mouseService as any)._sendEvent(ctx, {
+      type: 'mousedown',
+      button: 0,
+      altKey: true,
+      ctrlKey: false,
+      shiftKey: false
+    } as MouseEvent);
+
+    assert.isTrue(sent);
+    assert.deepEqual(reports, ['\x1b[<0;1;1M']);
+  });
+
+  it('should toggle enable-mouse-events class when alt modifier changes', () => {
+    const element = createTestMouseTargetElement();
+    const altMouseCursor = new AltMouseCursorController(element, {
+      addEventListener: () => {},
+      removeEventListener: () => {}
+    } as any, () => true);
+
+    const sync = (altHeld: boolean) => altMouseCursor.syncFromModifier({
+      getModifierState: (key: string) => key === 'Alt' && altHeld
+    } as KeyboardEvent);
+
+    assert.isFalse(element.classList.contains(MouseEventCssClasses.ENABLE_MOUSE_EVENTS));
+    sync(true);
+    assert.isTrue(element.classList.contains(MouseEventCssClasses.ENABLE_MOUSE_EVENTS));
+    sync(false);
+    assert.isFalse(element.classList.contains(MouseEventCssClasses.ENABLE_MOUSE_EVENTS));
+  });
+});

src/browser/services/MouseService.ts

@@ -7,12 +7,16 @@ import { addDisposableListener } from 'browser/Dom';
 import { IBufferService, IMouseStateService, ICoreService, ILogService, IOptionsService } from 'common/services/Services';
 import { CoreMouseAction, CoreMouseButton, CoreMouseEventType, ICoreMouseEvent, IDisposable } from 'common/Types';
 import { C0 } from 'common/data/EscapeSequences';
-import { toDisposable } from 'common/Lifecycle';
+import { DisposableStore, MutableDisposable, toDisposable } from 'common/Lifecycle';
 import { ICoreBrowserService, IMouseCoordsService, IMouseService, IMouseServiceTarget, IRenderService, ISelectionService } from './Services';
 import { Gesture, EventType as GestureEventType, IGestureEvent } from 'browser/scrollable/touch';
 
 type RequestedMouseEvents = Record<'mouseup' | 'wheel' | 'mousedrag' | 'mousemove', EventListener | null>;
 
+export const enum MouseEventCssClasses {
+  ENABLE_MOUSE_EVENTS = 'enable-mouse-events'
+}
+
 interface IMouseBindContext {
   readonly target: IMouseServiceTarget;
   readonly focus: () => void;
@@ -25,6 +29,7 @@ export class MouseService implements IMouseService {
   private _lastEvent: ICoreMouseEvent | null = null;
   private _wheelPartialScroll: number = 0;
   private _touchScrollAccumulator: number = 0;
+  private _altMouseCursor: AltMouseCursorController | undefined;
 
   constructor(
     @IRenderService private readonly _renderService: IRenderService,
@@ -63,9 +68,20 @@ export class MouseService implements IMouseService {
       mousedrag: (ev: Event) => this._handleMouseDrag(ctx, ev as MouseEvent),
       mousemove: (ev: Event) => this._handleMouseMove(ctx, ev as MouseEvent)
     };
+    this._altMouseCursor = new AltMouseCursorController(
+      element,
+      document,
+      () => this._mouseStateService.areMouseEventsActive
+        && !!this._optionsService.rawOptions.mouseEventsRequireAlt
+    );
+    register(this._altMouseCursor);
     register(this._mouseStateService.onProtocolChange(events => {
       this._handleProtocolChange(ctx, eventListeners, events);
     }));
+    register(this._optionsService.onSpecificOptionChange('mouseEventsRequireAlt', () => {
+      this._syncMouseModeState(element);
+      this._altMouseCursor?.sync();
+    }));
     // force initial onProtocolChange so we dont miss early mouse requests
     this._mouseStateService.activeProtocol = this._mouseStateService.activeProtocol;
 
@@ -153,6 +169,19 @@ export class MouseService implements IMouseService {
       return false;
     }
 
+    if (but !== CoreMouseButton.WHEEL
+      && this._optionsService.rawOptions.mouseEventsRequireAlt
+      && this._mouseStateService.areMouseEventsActive
+      && !ev.altKey) {
+      return false;
+    }
+
+    // Alt is only used locally to gate mouse passthrough; do not forward it to the
+    // application (e.g. tmux ignores alt-modified mouse reports).
+    const stripAltFromReport = but !== CoreMouseButton.WHEEL
+      && this._optionsService.rawOptions.mouseEventsRequireAlt
+      && this._mouseStateService.areMouseEventsActive;
+
     return this._triggerMouseEvent({
       col: pos.col,
       row: pos.row,
@@ -161,7 +190,7 @@ export class MouseService implements IMouseService {
       button: but,
       action,
       ctrl: ev.ctrlKey,
-      alt: ev.altKey,
+      alt: stripAltFromReport ? false : ev.altKey,
       shift: ev.shiftKey
     });
   }
@@ -353,6 +382,21 @@ export class MouseService implements IMouseService {
     this._touchScrollAccumulator = 0;
   }
 
+  private _syncMouseModeState(element: HTMLElement): void {
+    if (this._mouseStateService.areMouseEventsActive) {
+      if (this._optionsService.rawOptions.mouseEventsRequireAlt) {
+        this._altMouseCursor?.resetClass();
+        this._selectionService.enable();
+      } else {
+        element.classList.add(MouseEventCssClasses.ENABLE_MOUSE_EVENTS);
+        this._selectionService.disable();
+      }
+    } else {
+      element.classList.remove(MouseEventCssClasses.ENABLE_MOUSE_EVENTS);
+      this._selectionService.enable();
+    }
+  }
+
   private _handleProtocolChange(ctx: IMouseBindContext, eventListeners: Record<'mouseup' | 'wheel' | 'mousedrag' | 'mousemove', EventListener>, events: CoreMouseEventType): void {
     const { element, document } = ctx.target;
     const { requestedEvents } = ctx;
@@ -361,13 +405,11 @@ export class MouseService implements IMouseService {
       if (this._optionsService.rawOptions.logLevel === 'debug') {
         this._logService.debug('Binding to mouse events:', this._explainEvents(events));
       }
-      element.classList.add('enable-mouse-events');
-      this._selectionService.disable();
     } else {
       this._logService.debug('Unbinding from mouse events.');
-      element.classList.remove('enable-mouse-events');
-      this._selectionService.enable();
     }
+    this._syncMouseModeState(element);
+    this._altMouseCursor?.sync();
 
     // add/remove handlers from requestedEvents
     if (!(events & CoreMouseEventType.MOVE)) {
@@ -537,3 +579,64 @@ export class MouseService implements IMouseService {
   }
 
 }
+
+/**
+ * Toggles MouseEventCssClasses.ENABLE_MOUSE_EVENTS on the terminal element while alt is held when
+ * `mouseEventsRequireAlt` is active. DOM listeners are only registered while active.
+ */
+export class AltMouseCursorController implements IDisposable {
+  private readonly _listeners = new MutableDisposable<IDisposable>();
+
+  constructor(
+    private readonly _element: HTMLElement,
+    private readonly _document: Document,
+    private readonly _isActive: () => boolean
+  ) {
+  }
+
+  public dispose(): void {
+    this._listeners.dispose();
+  }
+
+  public sync(): void {
+    this._listeners.clear();
+
+    if (!this._isActive()) {
+      return;
+    }
+
+    const store = new DisposableStore();
+    const syncFromModifier = (ev: KeyboardEvent | MouseEvent): void => this.syncFromModifier(ev);
+    store.add(addDisposableListener(this._document, 'keydown', syncFromModifier));
+    store.add(addDisposableListener(this._document, 'keyup', syncFromModifier));
+    store.add(addDisposableListener(this._element, 'mousemove', syncFromModifier));
+    const targetWindow = this._element.ownerDocument?.defaultView;
+    if (targetWindow) {
+      store.add(addDisposableListener(targetWindow, 'blur', () => {
+        if (this._isActive()) {
+          this.resetClass();
+        }
+      }));
+    }
+    this._listeners.value = store;
+  }
+
+  public resetClass(): void {
+    this._updateClass(false);
+  }
+
+  public syncFromModifier(ev: KeyboardEvent | MouseEvent): void {
+    if (!this._isActive()) {
+      return;
+    }
+    this._updateClass(ev.getModifierState('Alt'));
+  }
+
+  private _updateClass(altHeld: boolean): void {
+    if (altHeld) {
+      this._element.classList.add(MouseEventCssClasses.ENABLE_MOUSE_EVENTS);
+    } else {
+      this._element.classList.remove(MouseEventCssClasses.ENABLE_MOUSE_EVENTS);
+    }
+  }
+}

src/browser/services/RenderService.ts

@@ -29,6 +29,7 @@ export class RenderService extends Disposable implements IRenderService {
   private _renderDebouncer: IRenderDebouncerWithCallback;
   private _pausedResizeTask: DebouncedIdleTask;
   private _observerDisposable = this._register(new MutableDisposable());
+  private _intersectionObserver: IntersectionObserver | undefined;
 
   private _isPaused: boolean = false;
   private _needsFullRefresh: boolean = false;
@@ -68,7 +69,7 @@ export class RenderService extends Disposable implements IRenderService {
   ) {
     super();
 
-    this._pausedResizeTask = new DebouncedIdleTask(this._logService);
+    this._pausedResizeTask = this._register(new DebouncedIdleTask(this._logService));
 
     this._renderDebouncer = new RenderDebouncer((start, end) => this._renderRows(start, end), this._coreBrowserService);
     this._register(this._renderDebouncer);
@@ -127,8 +128,12 @@ export class RenderService extends Disposable implements IRenderService {
     // and resume based on terminal visibility if so
     if ('IntersectionObserver' in w) {
       const observer = new w.IntersectionObserver(e => this._handleIntersectionChange(e[e.length - 1]), { threshold: 0 });
+      this._observerDisposable.value = toDisposable(() => {
+        this._intersectionObserver?.disconnect();
+        this._intersectionObserver = undefined;
+      });
+      this._intersectionObserver = observer;
       observer.observe(screenElement);
-      this._observerDisposable.value = toDisposable(() => observer.disconnect());
     }
   }
 

src/browser/services/SelectionService.test.ts

@@ -7,21 +7,25 @@ import { assert } from 'chai';
 import { SelectionService, SelectionMode } from './SelectionService';
 import { SelectionModel } from 'browser/selection/SelectionModel';
 import { IBufferLine } from 'common/Types';
-import { MockBufferService, MockOptionsService, MockCoreService, createCellData } from 'common/TestUtils.test';
+import { MockBufferService, MockOptionsService, MockCoreService, MockMouseStateService, createCellData } from 'common/TestUtils.test';
 import { BufferLine } from 'common/buffer/BufferLine';
+import { BufferLineStringCache } from 'common/buffer/BufferLineStringCache';
 import { IBufferService, IOptionsService } from 'common/services/Services';
 import { MockCoreBrowserService, MockMouseService, MockRenderService } from 'browser/TestUtils.test';
 import { CellData } from 'common/buffer/CellData';
 import { IBuffer } from 'common/buffer/Types';
 import { IRenderService } from 'browser/services/Services';
 
+const TEST_STRING_CACHE = new BufferLineStringCache();
+
 class TestSelectionService extends SelectionService {
   constructor(
     bufferService: IBufferService,
     optionsService: IOptionsService,
-    renderService: IRenderService
+    renderService: IRenderService,
+    public readonly mouseStateService: MockMouseStateService
   ) {
-    super(null!, null!, null!, bufferService, new MockCoreService(), new MockMouseService(), optionsService, renderService, new MockCoreBrowserService());
+    super(null!, null!, null!, bufferService, new MockCoreService(), new MockMouseService(), optionsService, mouseStateService, renderService, new MockCoreBrowserService());
   }
 
   public get model(): SelectionModel { return this._model; }
@@ -42,20 +46,22 @@ describe('SelectionService', () => {
   let buffer: IBuffer;
   let bufferService: IBufferService;
   let optionsService: IOptionsService;
+  let mouseStateService: MockMouseStateService;
   let selectionService: TestSelectionService;
 
   beforeEach(() => {
     optionsService = new MockOptionsService();
+    mouseStateService = new MockMouseStateService();
     bufferService = new MockBufferService(20, 20, optionsService);
     buffer = bufferService.buffer;
     const renderService = new MockRenderService();
     renderService.dimensions.css.canvas.height = 10 * 20;
     renderService.dimensions.css.canvas.width = 10 * 20;
-    selectionService = new TestSelectionService(bufferService, optionsService, renderService);
+    selectionService = new TestSelectionService(bufferService, optionsService, renderService, mouseStateService);
   });
 
   function stringToRow(text: string): IBufferLine {
-    const result = new BufferLine(text.length);
+    const result = new BufferLine(TEST_STRING_CACHE, text.length);
     for (let i = 0; i < text.length; i++) {
       result.setCell(i, createCellData(0, text.charAt(i), 1));
     }
@@ -63,7 +69,7 @@ describe('SelectionService', () => {
   }
 
   function stringArrayToRow(chars: string[]): IBufferLine {
-    const line = new BufferLine(chars.length);
+    const line = new BufferLine(TEST_STRING_CACHE, chars.length);
     chars.map((c, idx) => line.setCell(idx, createCellData(0, c, 1)));
     return line;
   }
@@ -118,7 +124,7 @@ describe('SelectionService', () => {
         [0, 'o', 1, 'o'.charCodeAt(0)],
         [0, 'o', 1, 'o'.charCodeAt(0)]
       ];
-      const line = new BufferLine(data.length);
+      const line = new BufferLine(TEST_STRING_CACHE, data.length);
       for (let i = 0; i < data.length; ++i) line.setCell(i, CellData.fromCharData(data[i]));
       buffer.lines.set(0, line);
       // Ensure wide characters take up 2 columns
@@ -496,5 +502,21 @@ describe('SelectionService', () => {
       assert.isFalse(selectionService.areCoordsInSelection([2, 1], [2, 0], [2, 1]));
     });
   });
+
+  describe('shouldForceSelection', () => {
+    it('should force selection without alt when mouseEventsRequireAlt is enabled', () => {
+      optionsService.options.mouseEventsRequireAlt = true;
+      mouseStateService.areMouseEventsActive = true;
+      assert.isTrue(selectionService.shouldForceSelection({ altKey: false } as MouseEvent));
+      assert.isFalse(selectionService.shouldForceSelection({ altKey: true } as MouseEvent));
+    });
+
+    it('should take precedence over macOptionClickForcesSelection', () => {
+      optionsService.options.mouseEventsRequireAlt = true;
+      optionsService.options.macOptionClickForcesSelection = true;
+      mouseStateService.areMouseEventsActive = true;
+      assert.isFalse(selectionService.shouldForceSelection({ altKey: true } as MouseEvent));
+    });
+  });
 });
 

src/browser/services/SelectionService.ts

@@ -9,36 +9,35 @@ import { moveToCellSequence } from 'browser/input/MoveToCell';
 import { SelectionModel } from 'browser/selection/SelectionModel';
 import { ISelectionRedrawRequestEvent, ISelectionRequestScrollLinesEvent } from 'browser/selection/Types';
 import { ICoreBrowserService, IMouseCoordsService, IRenderService, ISelectionService } from 'browser/services/Services';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
 import * as Browser from 'common/Platform';
 import { IBufferLine, ICellData, IDisposable } from 'common/Types';
 import { getRangeLength } from 'common/buffer/BufferRange';
 import { CellData } from 'common/buffer/CellData';
 import { IBuffer } from 'common/buffer/Types';
-import { IBufferService, ICoreService, IOptionsService } from 'common/services/Services';
+import { IBufferService, ICoreService, IMouseStateService, IOptionsService } from 'common/services/Services';
 import { Emitter } from 'common/Event';
 
-/**
- * The number of pixels the mouse needs to be above or below the viewport in
- * order to scroll at the maximum speed.
- */
-const DRAG_SCROLL_MAX_THRESHOLD = 50;
-
-/**
- * The maximum scrolling speed
- */
-const DRAG_SCROLL_MAX_SPEED = 15;
-
-/**
- * The number of milliseconds between drag scroll updates.
- */
-const DRAG_SCROLL_INTERVAL = 50;
-
-/**
- * The maximum amount of time that can have elapsed for an alt click to move the
- * cursor.
- */
-const ALT_CLICK_MOVE_CURSOR_TIME = 500;
+const enum Constants {
+  /**
+   * The number of pixels the mouse needs to be above or below the viewport in
+   * order to scroll at the maximum speed.
+   */
+  DRAG_SCROLL_MAX_THRESHOLD = 50,
+  /**
+   * The maximum scrolling speed
+   */
+  DRAG_SCROLL_MAX_SPEED = 15,
+  /**
+   * The number of milliseconds between drag scroll updates.
+   */
+  DRAG_SCROLL_INTERVAL = 50,
+  /**
+   * The maximum amount of time that can have elapsed for an alt click to move the
+   * cursor.
+   */
+  ALT_CLICK_MOVE_CURSOR_TIME = 500
+}
 
 const NON_BREAKING_SPACE_CHAR = String.fromCharCode(160);
 const ALL_NON_BREAKING_SPACE_REGEX = new RegExp(NON_BREAKING_SPACE_CHAR, 'g');
@@ -103,7 +102,7 @@ export class SelectionService extends Disposable implements ISelectionService {
 
   private _mouseMoveListener: EventListener;
   private _mouseUpListener: EventListener;
-  private _trimListener: IDisposable;
+  private readonly _trimListener = this._register(new MutableDisposable<IDisposable>());
   private _workCell: CellData = new CellData();
 
   private _mouseDownTimeStamp: number = 0;
@@ -128,6 +127,7 @@ export class SelectionService extends Disposable implements ISelectionService {
     @ICoreService private readonly _coreService: ICoreService,
     @IMouseCoordsService private readonly _mouseCoordsService: IMouseCoordsService,
     @IOptionsService private readonly _optionsService: IOptionsService,
+    @IMouseStateService private readonly _mouseStateService: IMouseStateService,
     @IRenderService private readonly _renderService: IRenderService,
     @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService
   ) {
@@ -141,7 +141,7 @@ export class SelectionService extends Disposable implements ISelectionService {
         this.clearSelection();
       }
     });
-    this._trimListener = this._bufferService.buffer.lines.onTrim(amount => this._handleTrim(amount));
+    this._trimListener.value = this._bufferService.buffer.lines.onTrim(amount => this._handleTrim(amount));
     this._register(this._bufferService.buffers.onBufferActivate(e => this._handleBufferActivate(e)));
 
     this.enable();
@@ -424,9 +424,9 @@ export class SelectionService extends Disposable implements ISelectionService {
       offset -= terminalHeight;
     }
 
-    offset = Math.min(Math.max(offset, -DRAG_SCROLL_MAX_THRESHOLD), DRAG_SCROLL_MAX_THRESHOLD);
-    offset /= DRAG_SCROLL_MAX_THRESHOLD;
-    return (offset / Math.abs(offset)) + Math.round(offset * (DRAG_SCROLL_MAX_SPEED - 1));
+    offset = Math.min(Math.max(offset, -Constants.DRAG_SCROLL_MAX_THRESHOLD), Constants.DRAG_SCROLL_MAX_THRESHOLD);
+    offset /= Constants.DRAG_SCROLL_MAX_THRESHOLD;
+    return (offset / Math.abs(offset)) + Math.round(offset * (Constants.DRAG_SCROLL_MAX_SPEED - 1));
   }
 
   /**
@@ -435,6 +435,10 @@ export class SelectionService extends Disposable implements ISelectionService {
    * @param event The mouse event.
    */
   public shouldForceSelection(event: MouseEvent): boolean {
+    if (this._optionsService.rawOptions.mouseEventsRequireAlt && this._mouseStateService.areMouseEventsActive) {
+      return !event.altKey;
+    }
+
     if (Browser.isMac) {
       return event.altKey && this._optionsService.rawOptions.macOptionClickForcesSelection;
     }
@@ -459,6 +463,10 @@ export class SelectionService extends Disposable implements ISelectionService {
       return;
     }
 
+    if (this._optionsService.rawOptions.mouseEventsRequireAlt && this._mouseStateService.areMouseEventsActive && event.altKey) {
+      return;
+    }
+
     // Allow selection when using a specific modifier key, even when disabled
     if (!this._enabled) {
       if (!this.shouldForceSelection(event)) {
@@ -500,7 +508,7 @@ export class SelectionService extends Disposable implements ISelectionService {
       this._screenElement.ownerDocument.addEventListener('mousemove', this._mouseMoveListener);
       this._screenElement.ownerDocument.addEventListener('mouseup', this._mouseUpListener);
     }
-    this._dragScrollIntervalTimer = this._coreBrowserService.window.setInterval(() => this._dragScroll(), DRAG_SCROLL_INTERVAL);
+    this._dragScrollIntervalTimer = this._coreBrowserService.window.setInterval(() => this._dragScroll(), Constants.DRAG_SCROLL_INTERVAL);
   }
 
   /**
@@ -597,6 +605,9 @@ export class SelectionService extends Disposable implements ISelectionService {
    * @param event the mouse or keyboard event
    */
   public shouldColumnSelect(event: KeyboardEvent | MouseEvent): boolean {
+    if (this._optionsService.rawOptions.mouseEventsRequireAlt && this._mouseStateService.areMouseEventsActive) {
+      return false;
+    }
     return event.altKey && !(Browser.isMac && this._optionsService.rawOptions.macOptionClickForcesSelection);
   }
 
@@ -675,7 +686,7 @@ export class SelectionService extends Disposable implements ISelectionService {
   }
 
   /**
-   * The callback that occurs every DRAG_SCROLL_INTERVAL ms that does the
+   * The callback that occurs every Constants.DRAG_SCROLL_INTERVAL ms that does the
    * scrolling of the viewport.
    */
   private _dragScroll(): void {
@@ -713,7 +724,7 @@ export class SelectionService extends Disposable implements ISelectionService {
 
     this._removeMouseDownListeners();
 
-    if (this.selectionText.length <= 1 && timeElapsed < ALT_CLICK_MOVE_CURSOR_TIME && event.altKey && this._optionsService.rawOptions.altClickMovesCursor) {
+    if (this.selectionText.length <= 1 && timeElapsed < Constants.ALT_CLICK_MOVE_CURSOR_TIME && event.altKey && this._optionsService.rawOptions.altClickMovesCursor) {
       if (this._bufferService.buffer.ybase === this._bufferService.buffer.ydisp) {
         const coordinates = this._mouseCoordsService.getCoords(
           event,
@@ -770,8 +781,7 @@ export class SelectionService extends Disposable implements ISelectionService {
     // reverseIndex) and delete in a splice is only ever used when the same
     // number of elements was just added. Given this is could actually be
     // beneficial to leave the selection as is for these cases.
-    this._trimListener.dispose();
-    this._trimListener = e.activeBuffer.lines.onTrim(amount => this._handleTrim(amount));
+    this._trimListener.value = e.activeBuffer.lines.onTrim(amount => this._handleTrim(amount));
   }
 
   /**
@@ -920,10 +930,10 @@ export class SelectionService extends Disposable implements ISelectionService {
     // Calculate the start _column_, converting the the string indexes back to
     // column coordinates.
     let start =
-        startIndex // The index of the selection's start char in the line string
-        + charOffset // The difference between the initial char's column and index
-        - leftWideCharCount // The number of wide chars left of the initial char
-        + leftLongCharOffset; // The number of additional chars left of the initial char added by columns with strings longer than 1 (emojis)
+      startIndex // The index of the selection's start char in the line string
+      + charOffset // The difference between the initial char's column and index
+      - leftWideCharCount // The number of wide chars left of the initial char
+      + leftLongCharOffset; // The number of additional chars left of the initial char added by columns with strings longer than 1 (emojis)
 
     // Calculate the length in _columns_, converting the the string indexes back
     // to column coordinates.

src/common/Async.ts

@@ -73,6 +73,42 @@ export class TimeoutTimer implements IDisposable {
   }
 }
 
+/**
+ * Schedules a single runner on the microtask queue. Unlike {@link TimeoutTimer}, a scheduled
+ * microtask cannot be unqueued; {@link cancel} prevents the runner from executing if it has not
+ * run yet.
+ */
+export class MicrotaskTimer implements IDisposable {
+  private _isScheduled = false;
+  private _isDisposed = false;
+
+  public dispose(): void {
+    this.cancel();
+    this._isDisposed = true;
+  }
+
+  public cancel(): void {
+    this._isScheduled = false;
+  }
+
+  public set(runner: () => void): void {
+    if (this._isDisposed) {
+      throw new Error('Calling set on a disposed MicrotaskTimer');
+    }
+    if (this._isScheduled) {
+      return;
+    }
+    this._isScheduled = true;
+    queueMicrotask(() => {
+      if (!this._isScheduled) {
+        return;
+      }
+      this._isScheduled = false;
+      runner();
+    });
+  }
+}
+
 export class IntervalTimer implements IDisposable {
   private _disposable: IDisposable | undefined;
   private _isDisposed = false;

src/common/Clone.test.ts

@@ -1,129 +0,0 @@
-/**
- * Copyright (c) 2016 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { assert } from 'chai';
-import { clone } from 'common/Clone';
-
-describe('clone', () => {
-  it('should clone simple objects', () => {
-    const test = {
-      a: 1,
-      b: 2
-    };
-
-    assert.deepEqual(clone(test), { a: 1, b: 2 });
-  });
-
-  it('should clone nested objects', () => {
-    const test = {
-      bar: {
-        a: 1,
-        b: 2,
-        c: {
-          foo: 'bar'
-        }
-      }
-    };
-
-    assert.deepEqual(clone(test), {
-      bar: {
-        a: 1,
-        b: 2,
-        c: {
-          foo: 'bar'
-        }
-      }
-    });
-  });
-
-  it('should clone array values', () => {
-    const test = {
-      a: [1, 2, 3],
-      b: [1, null, 'test', { foo: 'bar' }]
-    };
-
-    assert.deepEqual(clone(test), {
-      a: [1, 2, 3],
-      b: [1, null, 'test', { foo: 'bar' }]
-    });
-  });
-
-  it('should stop mutation from occuring on the original object', () => {
-    const test = {
-      a: 1,
-      b: 2,
-      c: {
-        foo: 'bar'
-      }
-    };
-
-    const cloned = clone(test);
-
-    test.a = 5;
-    test.c.foo = 'barbaz';
-
-    assert.deepEqual(cloned, {
-      a: 1,
-      b: 2,
-      c: {
-        foo: 'bar'
-      }
-    });
-  });
-
-  it('should clone to a maximum depth of 5 by default', () => {
-    const test = {
-      a: {
-        b: {
-          c: {
-            d: {
-              e: {
-                f: 'foo'
-              }
-            }
-          }
-        }
-      }
-    };
-
-    const cloned = clone(test);
-
-    test.a.b.c.d.e.f = 'bar';
-
-    // The values at a greater depth then 5 should not be cloned
-    assert.equal((cloned as any).a.b.c.d.e.f, 'bar');
-  });
-
-  it('should allow an optional maximum depth to be set', () => {
-    const test = {
-      a: {
-        b: {
-          c: 'foo'
-        }
-      }
-    };
-
-    const cloned = clone(test, 2);
-
-    test.a.b.c = 'bar';
-
-    // The values at a greater depth then 2 should not be cloned
-    assert.equal((cloned as any).a.b.c, 'bar');
-  });
-
-  it('should not throw when cloning a recursive reference', () => {
-    const test = {
-      a: {
-        b: {
-          c: {}
-        }
-      }
-    };
-
-    test.a.b.c = test;
-
-    assert.doesNotThrow(() => clone(test));
-  });
-});

src/common/Clone.ts

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2016 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-/*
- * A simple utility for cloning values
- */
-export function clone<T>(val: T, depth: number = 5): T {
-  if (typeof val !== 'object') {
-    return val;
-  }
-
-  // If we're cloning an array, use an array as the base, otherwise use an object
-  const clonedObject: any = Array.isArray(val) ? [] : {};
-
-  for (const key in val) {
-    // Recursively clone eack item unless we're at the maximum depth
-    clonedObject[key] = depth <= 1 ? val[key] : (val[key] && clone(val[key], depth - 1));
-  }
-
-  return clonedObject as T;
-}

src/common/CoreTerminal.ts

@@ -24,7 +24,7 @@
 import { IInstantiationService, IOptionsService, IBufferService, ILogService, ICharsetService, ICoreService, IMouseStateService, IUnicodeService, LogLevelEnum, ITerminalOptions, IOscLinkService } from 'common/services/Services';
 import { InstantiationService } from 'common/services/InstantiationService';
 import { LogService } from 'common/services/LogService';
-import { BufferService, MINIMUM_COLS, MINIMUM_ROWS } from 'common/services/BufferService';
+import { BufferService, BufferServiceConstants } from 'common/services/BufferService';
 import { OptionsService } from 'common/services/OptionsService';
 import { IDisposable, IAttributeData, ICoreTerminal, IScrollEvent } from 'common/Types';
 import { CoreService } from 'common/services/CoreService';
@@ -173,8 +173,8 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
       return;
     }
 
-    x = Math.max(x, MINIMUM_COLS);
-    y = Math.max(y, MINIMUM_ROWS);
+    x = Math.max(x, BufferServiceConstants.MINIMUM_COLS);
+    y = Math.max(y, BufferServiceConstants.MINIMUM_ROWS);
 
     // Flush pending writes before resize to avoid race conditions where async
     // writes are processed with incorrect dimensions
@@ -243,8 +243,8 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
   }
 
   /** Add handler for APC escape sequence. See xterm.d.ts for details. */
-  public registerApcHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
-    return this._inputHandler.registerApcHandler(ident, callback);
+  public registerApcHandler(id: IFunctionIdentifier, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
+    return this._inputHandler.registerApcHandler(id, callback);
   }
 
   protected _setup(): void {
@@ -263,7 +263,7 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
   private _handleWindowsPtyOptionChange(): void {
     let value = false;
     const windowsPty = this.optionsService.rawOptions.windowsPty;
-    if (windowsPty && windowsPty.buildNumber !== undefined && windowsPty.buildNumber !== undefined) {
+    if (windowsPty && windowsPty.backend !== undefined && windowsPty.buildNumber !== undefined) {
       value = !!(windowsPty.backend === 'conpty' && windowsPty.buildNumber < 21376);
     }
     if (value) {

src/common/InputHandler.test.ts

@@ -14,7 +14,6 @@ import { Params } from 'common/parser/Params';
 import { MockCoreService, MockBufferService, MockOptionsService, MockLogService, MockMouseStateService, MockCharsetService, MockUnicodeService, MockOscLinkService, extendedAttributes } from 'common/TestUtils.test';
 import { IBufferService, ICoreService, type IOscLinkService } from 'common/services/Services';
 import { DEFAULT_OPTIONS } from 'common/services/OptionsService';
-import { clone } from 'common/Clone';
 import { BufferService } from 'common/services/BufferService';
 import { CoreService } from 'common/services/CoreService';
 import { OscLinkService } from 'common/services/OscLinkService';
@@ -227,32 +226,32 @@ describe('InputHandler', () => {
       assert.equal(coreService.decPrivateModes.cursorStyle, undefined);
       assert.equal(coreService.decPrivateModes.cursorBlink, undefined);
 
-      optionsService.options = clone(DEFAULT_OPTIONS);
+      optionsService.options = structuredClone(DEFAULT_OPTIONS);
       inputHandler.setCursorStyle(Params.fromArray([1]));
       assert.equal(coreService.decPrivateModes.cursorStyle, 'block');
       assert.equal(coreService.decPrivateModes.cursorBlink, true);
 
-      optionsService.options = clone(DEFAULT_OPTIONS);
+      optionsService.options = structuredClone(DEFAULT_OPTIONS);
       inputHandler.setCursorStyle(Params.fromArray([2]));
       assert.equal(coreService.decPrivateModes.cursorStyle, 'block');
       assert.equal(coreService.decPrivateModes.cursorBlink, false);
 
-      optionsService.options = clone(DEFAULT_OPTIONS);
+      optionsService.options = structuredClone(DEFAULT_OPTIONS);
       inputHandler.setCursorStyle(Params.fromArray([3]));
       assert.equal(coreService.decPrivateModes.cursorStyle, 'underline');
       assert.equal(coreService.decPrivateModes.cursorBlink, true);
 
-      optionsService.options = clone(DEFAULT_OPTIONS);
+      optionsService.options = structuredClone(DEFAULT_OPTIONS);
       inputHandler.setCursorStyle(Params.fromArray([4]));
       assert.equal(coreService.decPrivateModes.cursorStyle, 'underline');
       assert.equal(coreService.decPrivateModes.cursorBlink, false);
 
-      optionsService.options = clone(DEFAULT_OPTIONS);
+      optionsService.options = structuredClone(DEFAULT_OPTIONS);
       inputHandler.setCursorStyle(Params.fromArray([5]));
       assert.equal(coreService.decPrivateModes.cursorStyle, 'bar');
       assert.equal(coreService.decPrivateModes.cursorBlink, true);
 
-      optionsService.options = clone(DEFAULT_OPTIONS);
+      optionsService.options = structuredClone(DEFAULT_OPTIONS);
       inputHandler.setCursorStyle(Params.fromArray([6]));
       assert.equal(coreService.decPrivateModes.cursorStyle, 'bar');
       assert.equal(coreService.decPrivateModes.cursorBlink, false);

src/common/InputHandler.ts

@@ -30,28 +30,9 @@ import { XTERM_VERSION } from 'common/Version';
  */
 const GLEVEL: { [key: string]: number } = { '(': 0, ')': 1, '*': 2, '+': 3, '-': 1, '.': 2 };
 
-/**
- * VT commands done by the parser - FIXME: move this to the parser?
- */
-// @vt: #Y   ESC   CSI   "Control Sequence Introducer"   "ESC ["   "Start of a CSI sequence."
-// @vt: #Y   ESC   OSC   "Operating System Command"      "ESC ]"   "Start of an OSC sequence."
-// @vt: #Y   ESC   DCS   "Device Control String"         "ESC P"   "Start of a DCS sequence."
-// @vt: #Y   ESC   ST    "String Terminator"             "ESC \"   "Terminator used for string type sequences."
-// @vt: #Y   ESC   PM    "Privacy Message"               "ESC ^"   "Start of a privacy message."
-// @vt: #Y   ESC   APC   "Application Program Command"   "ESC _"   "Start of an APC sequence."
-// @vt: #Y   C1    CSI   "Control Sequence Introducer"   "\x9B"    "Start of a CSI sequence."
-// @vt: #Y   C1    OSC   "Operating System Command"      "\x9D"    "Start of an OSC sequence."
-// @vt: #Y   C1    DCS   "Device Control String"         "\x90"    "Start of a DCS sequence."
-// @vt: #Y   C1    ST    "String Terminator"             "\x9C"    "Terminator used for string type sequences."
-// @vt: #Y   C1    PM    "Privacy Message"               "\x9E"    "Start of a privacy message."
-// @vt: #Y   C1    APC   "Application Program Command"   "\x9F"    "Start of an APC sequence."
-// @vt: #Y   C0    NUL   "Null"                          "\0, \x00"  "NUL is ignored."
-// @vt: #Y   C0    ESC   "Escape"                        "\e, \x1B"  "Start of a sequence. Cancels any other sequence."
-
 /**
  * Document xterm VT features here that are currently unsupported
  */
-// @vt: #E[Supported via @xterm/addon-image.]  DCS   SIXEL       "SIXEL Graphics"          "DCS Ps ; Ps ; Ps ; q 	Pt ST"  "Draw SIXEL image."
 // @vt: #N  DCS   DECUDK      "User Defined Keys"       "DCS Ps ; Ps \| Pt ST"           "Definitions for user-defined keys."
 // @vt: #N  DCS   XTGETTCAP   "Request Terminfo String" "DCS + q Pt ST"                 "Request Terminfo String."
 // @vt: #N  DCS   XTSETTCAP   "Set Terminfo Data"       "DCS + p Pt ST"                 "Set Terminfo Data."
@@ -60,12 +41,13 @@ const GLEVEL: { [key: string]: number } = { '(': 0, ')': 1, '*': 2, '+': 3, '-':
 /**
  * Max length of the UTF32 input buffer. Real memory consumption is 4 times higher.
  */
-const MAX_PARSEBUFFER_LENGTH = 131072;
-
-/**
- * Limit length of title and icon name stacks.
- */
-const STACK_LIMIT = 10;
+const enum Constants {
+  MAX_PARSEBUFFER_LENGTH = 131072,
+  /** Limit length of title and icon name stacks. */
+  STACK_LIMIT = 10,
+  // create a warning log if an async handler takes longer than the limit (in ms)
+  SLOW_ASYNC_LIMIT = 5000
+}
 
 // map params to window option
 function paramToWindowOption(n: number, opts: IWindowOptions): boolean {
@@ -104,9 +86,6 @@ export enum WindowsOptionsReportType {
   GET_CELL_SIZE_PIXELS = 1
 }
 
-// create a warning log if an async handler takes longer than the limit (in ms)
-const SLOW_ASYNC_LIMIT = 5000;
-
 // Work variables to avoid garbage collection
 let $temp = 0;
 
@@ -211,6 +190,9 @@ export class InputHandler extends Disposable implements IInputHandler {
       }
       this._logService.debug('Unknown DCS code: ', { identifier: this._parser.identToString(ident), action, payload });
     });
+    this._parser.setApcHandlerFallback((ident, action, payload) => {
+      this._logService.debug('Unknown APC code: ', { identifier: this._parser.identToString(ident), action, payload });
+    });
 
     /**
      * print handler
@@ -409,7 +391,7 @@ export class InputHandler extends Disposable implements IInputHandler {
     if (this._logService.logLevel <= LogLevelEnum.WARN) {
       let slowTimeout: ReturnType<typeof setTimeout> | undefined;
       const slowPromise = new Promise<never>((_res, rej) => {
-        slowTimeout = setTimeout(() => rej('#SLOW_TIMEOUT'), SLOW_ASYNC_LIMIT);
+        slowTimeout = setTimeout(() => rej('#SLOW_TIMEOUT'), Constants.SLOW_ASYNC_LIMIT);
       });
       Promise.race([p, slowPromise])
         .then(() => {
@@ -423,7 +405,7 @@ export class InputHandler extends Disposable implements IInputHandler {
           if (err !== '#SLOW_TIMEOUT') {
             throw err;
           }
-          console.warn(`async parser handler taking longer than ${SLOW_ASYNC_LIMIT} ms`);
+          console.warn(`async parser handler taking longer than ${Constants.SLOW_ASYNC_LIMIT} ms`);
         });
     }
   }
@@ -461,8 +443,8 @@ export class InputHandler extends Disposable implements IInputHandler {
       cursorStartX = this._parseStack.cursorStartX;
       cursorStartY = this._parseStack.cursorStartY;
       this._parseStack.paused = false;
-      if (data.length > MAX_PARSEBUFFER_LENGTH) {
-        start = this._parseStack.position + MAX_PARSEBUFFER_LENGTH;
+      if (data.length > Constants.MAX_PARSEBUFFER_LENGTH) {
+        start = this._parseStack.position + Constants.MAX_PARSEBUFFER_LENGTH;
       }
     }
 
@@ -479,8 +461,8 @@ export class InputHandler extends Disposable implements IInputHandler {
 
     // resize input buffer if needed
     if (this._parseBuffer.length < data.length) {
-      if (this._parseBuffer.length < MAX_PARSEBUFFER_LENGTH) {
-        this._parseBuffer = new Uint32Array(Math.min(data.length, MAX_PARSEBUFFER_LENGTH));
+      if (this._parseBuffer.length < Constants.MAX_PARSEBUFFER_LENGTH) {
+        this._parseBuffer = new Uint32Array(Math.min(data.length, Constants.MAX_PARSEBUFFER_LENGTH));
       }
     }
 
@@ -491,9 +473,9 @@ export class InputHandler extends Disposable implements IInputHandler {
     }
 
     // process big data in smaller chunks
-    if (data.length > MAX_PARSEBUFFER_LENGTH) {
-      for (let i = start; i < data.length; i += MAX_PARSEBUFFER_LENGTH) {
-        const end = i + MAX_PARSEBUFFER_LENGTH < data.length ? i + MAX_PARSEBUFFER_LENGTH : data.length;
+    if (data.length > Constants.MAX_PARSEBUFFER_LENGTH) {
+      for (let i = start; i < data.length; i += Constants.MAX_PARSEBUFFER_LENGTH) {
+        const end = i + Constants.MAX_PARSEBUFFER_LENGTH < data.length ? i + Constants.MAX_PARSEBUFFER_LENGTH : data.length;
         const len = (typeof data === 'string')
           ? this._stringDecoder.decode(data.substring(i, end), this._parseBuffer)
           : this._utf8Decoder.decode(data.subarray(i, end), this._parseBuffer);
@@ -585,8 +567,9 @@ export class InputHandler extends Disposable implements IInputHandler {
       if (screenReaderMode) {
         this._onA11yChar.fire(stringFromCodePoint(code));
       }
-      if (this._getCurrentLinkId()) {
-        this._oscLinkService.addLineToLink(this._getCurrentLinkId(), this._activeBuffer.ybase + this._activeBuffer.y);
+      const linkId = this._getCurrentLinkId();
+      if (linkId) {
+        this._oscLinkService.addLineToLink(linkId, this._activeBuffer.ybase + this._activeBuffer.y);
       }
 
       // goto next line if ch would overflow
@@ -729,8 +712,8 @@ export class InputHandler extends Disposable implements IInputHandler {
   /**
    * Forward registerApcHandler from parser.
    */
-  public registerApcHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
-    return this._parser.registerApcHandler(ident, new ApcHandler(callback));
+  public registerApcHandler(id: IFunctionIdentifier, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
+    return this._parser.registerApcHandler(id, new ApcHandler(callback));
   }
 
   /**
@@ -2415,7 +2398,7 @@ export class InputHandler extends Disposable implements IInputHandler {
       color &= ~Attributes.RGB_MASK;
       color |= AttributeData.fromColorRGB([c1, c2, c3]);
     } else if (mode === 5) {
-      color &= ~(Attributes.CM_MASK | Attributes.PCOLOR_MASK);
+      color &= ~(Attributes.CM_MASK | Attributes.RGB_MASK);
       color |= Attributes.CM_P256 | (c1 & 0xff);
     }
     return color;
@@ -2608,10 +2591,6 @@ export class InputHandler extends Disposable implements IInputHandler {
    * | 3      | CMY color.                                                    | #N      |
    * | 4      | CMYK color.                                                   | #N      |
    * | 5      | Indexed (256 colors) as `Ps ; 5 ; INDEX` or `Ps : 5 : INDEX`. | #Y      |
-   *
-   *
-   * FIXME: blinking is implemented in attrs, but not working in renderers?
-   * FIXME: remove dead branch for p=100
    */
   public charAttributes(params: IParams): boolean {
     // Optimize a single SGR0.
@@ -2628,19 +2607,19 @@ export class InputHandler extends Disposable implements IInputHandler {
       p = params.params[i];
       if (p >= 30 && p <= 37) {
         // fg color 8
-        attr.fg &= ~(Attributes.CM_MASK | Attributes.PCOLOR_MASK);
+        attr.fg &= ~(Attributes.CM_MASK | Attributes.RGB_MASK);
         attr.fg |= Attributes.CM_P16 | (p - 30);
       } else if (p >= 40 && p <= 47) {
         // bg color 8
-        attr.bg &= ~(Attributes.CM_MASK | Attributes.PCOLOR_MASK);
+        attr.bg &= ~(Attributes.CM_MASK | Attributes.RGB_MASK);
         attr.bg |= Attributes.CM_P16 | (p - 40);
       } else if (p >= 90 && p <= 97) {
         // fg color 16
-        attr.fg &= ~(Attributes.CM_MASK | Attributes.PCOLOR_MASK);
+        attr.fg &= ~(Attributes.CM_MASK | Attributes.RGB_MASK);
         attr.fg |= Attributes.CM_P16 | (p - 90) | 8;
       } else if (p >= 100 && p <= 107) {
         // bg color 16
-        attr.bg &= ~(Attributes.CM_MASK | Attributes.PCOLOR_MASK);
+        attr.bg &= ~(Attributes.CM_MASK | Attributes.RGB_MASK);
         attr.bg |= Attributes.CM_P16 | (p - 100) | 8;
       } else if (p === 0) {
         // default
@@ -2700,11 +2679,11 @@ export class InputHandler extends Disposable implements IInputHandler {
       } else if (p === 39) {
         // reset fg
         attr.fg &= ~(Attributes.CM_MASK | Attributes.RGB_MASK);
-        attr.fg |= DEFAULT_ATTR_DATA.fg & (Attributes.PCOLOR_MASK | Attributes.RGB_MASK);
+        attr.fg |= DEFAULT_ATTR_DATA.fg & Attributes.RGB_MASK;
       } else if (p === 49) {
         // reset bg
         attr.bg &= ~(Attributes.CM_MASK | Attributes.RGB_MASK);
-        attr.bg |= DEFAULT_ATTR_DATA.bg & (Attributes.PCOLOR_MASK | Attributes.RGB_MASK);
+        attr.bg |= DEFAULT_ATTR_DATA.bg & Attributes.RGB_MASK;
       } else if (p === 38 || p === 48 || p === 58) {
         // fg color 256 and RGB
         i += this._extractColor(params, i, attr);
@@ -2971,13 +2950,13 @@ export class InputHandler extends Disposable implements IInputHandler {
       case 22:  // PushTitle
         if (second === 0 || second === 2) {
           this._windowTitleStack.push(this._windowTitle);
-          if (this._windowTitleStack.length > STACK_LIMIT) {
+          if (this._windowTitleStack.length > Constants.STACK_LIMIT) {
             this._windowTitleStack.shift();
           }
         }
         if (second === 0 || second === 1) {
           this._iconNameStack.push(this._iconName);
-          if (this._iconNameStack.length > STACK_LIMIT) {
+          if (this._iconNameStack.length > Constants.STACK_LIMIT) {
             this._iconNameStack.shift();
           }
         }

src/common/StringBuilder.test.ts

@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2026 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { assert } from 'chai';
+import { LimitedStringBuilder, StringBuilder } from 'common/StringBuilder';
+
+describe('StringBuilder', () => {
+  it('should start empty', () => {
+    const builder = new StringBuilder();
+    assert.strictEqual(builder.length, 0);
+    assert.strictEqual(builder.toString(), '');
+  });
+
+  it('should append a single chunk', () => {
+    const builder = new StringBuilder();
+    builder.append('hello');
+    assert.strictEqual(builder.length, 5);
+    assert.strictEqual(builder.toString(), 'hello');
+  });
+
+  it('should join multiple chunks in order', () => {
+    const builder = new StringBuilder();
+    builder.append('foo');
+    builder.append('bar');
+    builder.append('baz');
+    assert.strictEqual(builder.length, 9);
+    assert.strictEqual(builder.toString(), 'foobarbaz');
+  });
+
+  it('should handle empty chunks', () => {
+    const builder = new StringBuilder();
+    builder.append('');
+    builder.append('a');
+    builder.append('');
+    assert.strictEqual(builder.length, 1);
+    assert.strictEqual(builder.toString(), 'a');
+  });
+
+  it('should reset accumulated data', () => {
+    const builder = new StringBuilder();
+    builder.append('hello');
+    builder.reset();
+    assert.strictEqual(builder.length, 0);
+    assert.strictEqual(builder.toString(), '');
+  });
+
+  it('should allow appending after reset', () => {
+    const builder = new StringBuilder();
+    builder.append('old');
+    builder.reset();
+    builder.append('new');
+    assert.strictEqual(builder.toString(), 'new');
+  });
+
+  it('should accumulate many small chunks without quadratic concatenation', () => {
+    const builder = new StringBuilder();
+    const chunk = 'x';
+    const count = 10000;
+    for (let i = 0; i < count; i++) {
+      builder.append(chunk);
+    }
+    assert.strictEqual(builder.length, count);
+    assert.strictEqual(builder.toString(), 'x'.repeat(count));
+  });
+});
+
+describe('LimitedStringBuilder', () => {
+  it('should expose the configured limit', () => {
+    const builder = new LimitedStringBuilder(42);
+    assert.strictEqual(builder.limit, 42);
+  });
+
+  it('should start empty', () => {
+    const builder = new LimitedStringBuilder(10);
+    assert.strictEqual(builder.length, 0);
+    assert.strictEqual(builder.toString(), '');
+  });
+
+  it('should accept data up to the limit', () => {
+    const builder = new LimitedStringBuilder(10);
+    assert.strictEqual(builder.append('12345'), false);
+    assert.strictEqual(builder.append('67890'), false);
+    assert.strictEqual(builder.length, 10);
+    assert.strictEqual(builder.toString(), '1234567890');
+  });
+
+  it('should accept a single chunk exactly at the limit', () => {
+    const builder = new LimitedStringBuilder(5);
+    assert.strictEqual(builder.append('abcde'), false);
+    assert.strictEqual(builder.length, 5);
+    assert.strictEqual(builder.toString(), 'abcde');
+  });
+
+  it('should reject data exceeding the limit and clear the buffer', () => {
+    const builder = new LimitedStringBuilder(5);
+    builder.append('abc');
+    assert.strictEqual(builder.append('def'), true);
+    assert.strictEqual(builder.length, 0);
+    assert.strictEqual(builder.toString(), '');
+  });
+
+  it('should reject a single chunk larger than the limit', () => {
+    const builder = new LimitedStringBuilder(3);
+    assert.strictEqual(builder.append('toolong'), true);
+    assert.strictEqual(builder.length, 0);
+    assert.strictEqual(builder.toString(), '');
+  });
+
+  it('should allow appending again after reset following a limit breach', () => {
+    const builder = new LimitedStringBuilder(3);
+    assert.strictEqual(builder.append('abcd'), true);
+    builder.reset();
+    assert.strictEqual(builder.append('ab'), false);
+    assert.strictEqual(builder.toString(), 'ab');
+  });
+
+  it('should accumulate many chunks before hitting the limit', () => {
+    const limit = 100;
+    const builder = new LimitedStringBuilder(limit);
+    const chunk = 'A';
+    for (let i = 0; i < limit; i++) {
+      assert.strictEqual(builder.append(chunk), false);
+    }
+    assert.strictEqual(builder.toString(), 'A'.repeat(limit));
+    assert.strictEqual(builder.append('B'), true);
+    assert.strictEqual(builder.toString(), '');
+  });
+
+  it('should reject when limit is zero and any data is appended', () => {
+    const builder = new LimitedStringBuilder(0);
+    assert.strictEqual(builder.append('a'), true);
+    assert.strictEqual(builder.length, 0);
+  });
+
+  it('should allow zero-length appends at the limit', () => {
+    const builder = new LimitedStringBuilder(0);
+    assert.strictEqual(builder.append(''), false);
+    assert.strictEqual(builder.length, 0);
+    assert.strictEqual(builder.toString(), '');
+  });
+});

src/common/StringBuilder.ts

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2026 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+/**
+ * Accumulates string data from multiple chunks without O(n²) string concatenation.
+ */
+export class StringBuilder {
+  private _chunks: string[] = [];
+  private _length = 0;
+
+  public get length(): number {
+    return this._length;
+  }
+
+  public reset(): void {
+    this._chunks.length = 0;
+    this._length = 0;
+  }
+
+  public append(chunk: string): void {
+    this._chunks.push(chunk);
+    this._length += chunk.length;
+  }
+
+  public toString(): string {
+    return this._chunks.join('');
+  }
+}
+
+/**
+ * String builder that rejects payloads larger than a fixed limit.
+ */
+export class LimitedStringBuilder {
+  private readonly _builder = new StringBuilder();
+
+  constructor(private readonly _limit: number) { }
+
+  public get length(): number {
+    return this._builder.length;
+  }
+
+  public get limit(): number {
+    return this._limit;
+  }
+
+  public reset(): void {
+    this._builder.reset();
+  }
+
+  /**
+   * @returns true if the limit was exceeded (buffer is cleared in that case)
+   */
+  public append(chunk: string): boolean {
+    this._builder.append(chunk);
+    if (this._builder.length > this._limit) {
+      this._builder.reset();
+      return true;
+    }
+    return false;
+  }
+
+  public toString(): string {
+    return this._builder.toString();
+  }
+}

src/common/TaskQueue.ts

@@ -74,10 +74,10 @@ abstract class TaskQueue implements ITaskQueue {
 
   private _process(deadline: ITaskDeadline): void {
     this._idleCallback = undefined;
-    let taskDuration = 0;
+    let taskDuration: number;
     let longestTask = 0;
     let lastDeadlineRemaining = deadline.timeRemaining();
-    let deadlineRemaining = 0;
+    let deadlineRemaining: number;
     while (this._i < this._tasks.length) {
       taskDuration = performance.now();
       if (!this._tasks[this._i]()) {
@@ -168,4 +168,8 @@ export class DebouncedIdleTask {
   public flush(): void {
     this._queue.flush();
   }
+
+  public dispose(): void {
+    this._queue.clear();
+  }
 }

src/common/TestUtils.test.ts

@@ -5,7 +5,6 @@
 
 import { IBufferService, ICoreService, ILogService, IOptionsService, ITerminalOptions, IMouseStateService, ICharsetService, UnicodeCharProperties, UnicodeCharWidth, IUnicodeService, IUnicodeVersionProvider, LogLevelEnum, IDecorationService, IInternalDecoration, IOscLinkService, type IBufferResizeEvent } from 'common/services/Services';
 import { UnicodeService } from 'common/services/UnicodeService';
-import { clone } from 'common/Clone';
 import { DEFAULT_OPTIONS } from 'common/services/OptionsService';
 import { IBufferSet, IBuffer } from 'common/buffer/Types';
 import { BufferSet } from 'common/buffer/BufferSet';
@@ -157,7 +156,7 @@ export class MockLogService implements ILogService {
 
 export class MockOptionsService implements IOptionsService {
   public serviceBrand: any;
-  public readonly rawOptions: Required<ITerminalOptions> = clone(DEFAULT_OPTIONS);
+  public readonly rawOptions: Required<ITerminalOptions> = structuredClone(DEFAULT_OPTIONS);
   public options: Required<ITerminalOptions> = this.rawOptions;
   public onOptionChange: IEvent<keyof ITerminalOptions> = new Emitter<keyof ITerminalOptions>().event;
   constructor(testOptions?: Partial<ITerminalOptions>) {

src/common/Types.ts

@@ -22,7 +22,7 @@ export interface ICoreTerminal {
   registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: IParams) => boolean | Promise<boolean>): IDisposable;
   registerEscHandler(id: IFunctionIdentifier, callback: () => boolean | Promise<boolean>): IDisposable;
   registerOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable;
-  registerApcHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable;
+  registerApcHandler(id: IFunctionIdentifier, callback: (data: string) => boolean | Promise<boolean>): IDisposable;
 }
 
 export interface IDisposable {
@@ -476,7 +476,7 @@ export interface IInputHandler {
   registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: IParams) => boolean | Promise<boolean>): IDisposable;
   registerEscHandler(id: IFunctionIdentifier, callback: () => boolean | Promise<boolean>): IDisposable;
   registerOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable;
-  registerApcHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable;
+  registerApcHandler(id: IFunctionIdentifier, callback: (data: string) => boolean | Promise<boolean>): IDisposable;
 
   /** C0 BEL */ bell(): boolean;
   /** C0 LF */ lineFeed(): boolean;
@@ -528,8 +528,8 @@ export interface IInputHandler {
   /** CSI ' } */ insertColumns(params: IParams): boolean;
   /** CSI ' ~ */ deleteColumns(params: IParams): boolean;
 
-  /** OSC 0
-      OSC 2 */ setTitle(data: string): boolean;
+  /** OSC 0 */
+  /** OSC 2 */ setTitle(data: string): boolean;
   /** OSC 4 */ setOrReportIndexedColor(data: string): boolean;
   /** OSC 10 */ setOrReportFgColor(data: string): boolean;
   /** OSC 11 */ setOrReportBgColor(data: string): boolean;
@@ -542,24 +542,24 @@ export interface IInputHandler {
   /** ESC E */ nextLine(): boolean;
   /** ESC = */ keypadApplicationMode(): boolean;
   /** ESC > */ keypadNumericMode(): boolean;
-  /** ESC % G
-      ESC % @ */ selectDefaultCharset(): boolean;
-  /** ESC ( C
-      ESC ) C
-      ESC * C
-      ESC + C
-      ESC - C
-      ESC . C
-      ESC / C */ selectCharset(collectAndFlag: string): boolean;
+  /** ESC % G */
+  /** ESC % @ */ selectDefaultCharset(): boolean;
+  /** ESC ( C */
+  /** ESC ) C */
+  /** ESC * C */
+  /** ESC + C */
+  /** ESC - C */
+  /** ESC . C */
+  /** ESC / C */ selectCharset(collectAndFlag: string): boolean;
   /** ESC D */ index(): boolean;
   /** ESC H */ tabSet(): boolean;
   /** ESC M */ reverseIndex(): boolean;
   /** ESC c */ fullReset(): boolean;
-  /** ESC n
-      ESC o
-      ESC |
-      ESC }
-      ESC ~ */ setgLevel(level: number): boolean;
+  /** ESC n */
+  /** ESC o */
+  /** ESC | */
+  /** ESC } */
+  /** ESC ~ */ setgLevel(level: number): boolean;
   /** ESC # 8 */ screenAlignmentPattern(): boolean;
 }
 

src/common/buffer/Buffer.test.ts

@@ -8,22 +8,34 @@ import { Buffer } from 'common/buffer/Buffer';
 import { CircularList } from 'common/CircularList';
 import { MockOptionsService, MockBufferService, MockLogService, createCellData } from 'common/TestUtils.test';
 import { BufferLine, DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
+import { BufferLineStringCache } from 'common/buffer/BufferLineStringCache';
 import { CellData } from 'common/buffer/CellData';
 import { ExtendedAttrs } from 'common/buffer/AttributeData';
 
 const INIT_COLS = 80;
 const INIT_ROWS = 24;
 const INIT_SCROLLBACK = 1000;
+const TEST_STRING_CACHE = new BufferLineStringCache();
+
+class TestBuffer extends Buffer {
+  public getStringCache(): BufferLineStringCache {
+    return (this as unknown as { _stringCache: BufferLineStringCache })._stringCache;
+  }
+
+  public getStringCacheClearTimeout(): unknown {
+    return (this.getStringCache() as unknown as { _clearTimeout: { value: unknown } })._clearTimeout.value;
+  }
+}
 
 describe('Buffer', () => {
   let optionsService: MockOptionsService;
   let bufferService: MockBufferService;
-  let buffer: Buffer;
+  let buffer: TestBuffer;
 
   beforeEach(() => {
     optionsService = new MockOptionsService({ scrollback: INIT_SCROLLBACK });
     bufferService = new MockBufferService(INIT_COLS, INIT_ROWS);
-    buffer = new Buffer(true, optionsService, bufferService, new MockLogService());
+    buffer = new TestBuffer(true, optionsService, bufferService, new MockLogService());
   });
 
   describe('constructor', () => {
@@ -151,7 +163,7 @@ describe('Buffer', () => {
 
       describe('no scrollback', () => {
         it('should trim from the top of the buffer when the cursor reaches the bottom', () => {
-          buffer = new Buffer(true, new MockOptionsService({ scrollback: 0 }), bufferService, new MockLogService());
+          buffer = new TestBuffer(true, new MockOptionsService({ scrollback: 0 }), bufferService, new MockLogService());
           assert.equal(buffer.lines.maxLength, INIT_ROWS);
           buffer.y = INIT_ROWS - 1;
           buffer.fillViewportRows();
@@ -1054,7 +1066,7 @@ describe('Buffer', () => {
   describe('buffer marked to have no scrollback', () => {
     it('should always have a scrollback of 0', () => {
       // Test size on initialization
-      buffer = new Buffer(false, new MockOptionsService({ scrollback: 1000 }), bufferService, new MockLogService());
+      buffer = new TestBuffer(false, new MockOptionsService({ scrollback: 1000 }), bufferService, new MockLogService());
       buffer.fillViewportRows();
       assert.equal(buffer.lines.maxLength, INIT_ROWS);
       // Test size on buffer increase
@@ -1068,7 +1080,7 @@ describe('Buffer', () => {
 
   describe('addMarker', () => {
     it('should adjust a marker line when the buffer is trimmed', () => {
-      buffer = new Buffer(true, new MockOptionsService({ scrollback: 0 }), bufferService, new MockLogService());
+      buffer = new TestBuffer(true, new MockOptionsService({ scrollback: 0 }), bufferService, new MockLogService());
       buffer.fillViewportRows();
       const marker = buffer.addMarker(buffer.lines.length - 1);
       assert.equal(marker.line, buffer.lines.length - 1);
@@ -1076,7 +1088,7 @@ describe('Buffer', () => {
       assert.equal(marker.line, buffer.lines.length - 2);
     });
     it('should dispose of a marker if it is trimmed off the buffer', () => {
-      buffer = new Buffer(true, new MockOptionsService({ scrollback: 0 }), bufferService, new MockLogService());
+      buffer = new TestBuffer(true, new MockOptionsService({ scrollback: 0 }), bufferService, new MockLogService());
       buffer.fillViewportRows();
       assert.equal(buffer.markers.length, 0);
       const marker = buffer.addMarker(0);
@@ -1088,7 +1100,7 @@ describe('Buffer', () => {
     });
     it('should call onDispose', () => {
       const eventStack: string[] = [];
-      buffer = new Buffer(true, new MockOptionsService({ scrollback: 0 }), bufferService, new MockLogService());
+      buffer = new TestBuffer(true, new MockOptionsService({ scrollback: 0 }), bufferService, new MockLogService());
       buffer.fillViewportRows();
       assert.equal(buffer.markers.length, 0);
       const marker = buffer.addMarker(0);
@@ -1104,7 +1116,7 @@ describe('Buffer', () => {
 
   describe ('translateBufferLineToString', () => {
     it('should handle selecting a section of ascii text', () => {
-      const line = new BufferLine(4);
+      const line = new BufferLine(TEST_STRING_CACHE, 4);
       line.setCell(0, createCellData(0, 'a', 1));
       line.setCell(1, createCellData(0, 'b', 1));
       line.setCell(2, createCellData(0, 'c', 1));
@@ -1116,7 +1128,7 @@ describe('Buffer', () => {
     });
 
     it('should handle a cut-off double width character by including it', () => {
-      const line = new BufferLine(3);
+      const line = new BufferLine(TEST_STRING_CACHE, 3);
       line.setCell(0, createCellData(0, '語', 2));
       line.setCell(1, createCellData(0, '', 0));
       line.setCell(2, createCellData(0, 'a', 1));
@@ -1127,7 +1139,7 @@ describe('Buffer', () => {
     });
 
     it('should handle a zero width character in the middle of the string by not including it', () => {
-      const line = new BufferLine(3);
+      const line = new BufferLine(TEST_STRING_CACHE, 3);
       line.setCell(0, createCellData(0, '語', 2));
       line.setCell(1, createCellData(0, '', 0));
       line.setCell(2, createCellData(0, 'a', 1));
@@ -1144,7 +1156,7 @@ describe('Buffer', () => {
     });
 
     it('should handle single width emojis', () => {
-      const line = new BufferLine(2);
+      const line = new BufferLine(TEST_STRING_CACHE, 2);
       line.setCell(0, createCellData(0, '😁', 1));
       line.setCell(1, createCellData(0, 'a', 1));
       buffer.lines.set(0, line);
@@ -1157,7 +1169,7 @@ describe('Buffer', () => {
     });
 
     it('should handle double width emojis', () => {
-      const line = new BufferLine(2);
+      const line = new BufferLine(TEST_STRING_CACHE, 2);
       line.setCell(0, createCellData(0, '😁', 2));
       line.setCell(1, createCellData(0, '', 0));
       buffer.lines.set(0, line);
@@ -1168,7 +1180,7 @@ describe('Buffer', () => {
       const str2 = buffer.translateBufferLineToString(0, true, 0, 2);
       assert.equal(str2, '😁');
 
-      const line2 = new BufferLine(3);
+      const line2 = new BufferLine(TEST_STRING_CACHE, 3);
       line2.setCell(0, createCellData(0, '😁', 2));
       line2.setCell(1, createCellData(0, '', 0));
       line2.setCell(2, createCellData(0, 'a', 1));
@@ -1179,6 +1191,99 @@ describe('Buffer', () => {
     });
   });
 
+  describe('line string cache cleanup', () => {
+    it('should clear shared cache entries with a single timer', () => {
+      const originalSetTimeout = globalThis.setTimeout;
+      const originalClearTimeout = globalThis.clearTimeout;
+      const originalDateNow = Date.now;
+      let timeoutId = 0;
+      let now = 0;
+      const clearedTimeouts: number[] = [];
+      const scheduledTimeouts = new Map<number, { delay: number, fire: () => void }>();
+      (globalThis as any).setTimeout = ((handler: (...args: any[]) => void, timeout?: number) => {
+        const id = ++timeoutId;
+        scheduledTimeouts.set(id, {
+          delay: timeout ?? 0,
+          fire: () => {
+            scheduledTimeouts.delete(id);
+            handler();
+          }
+        });
+        return id as ReturnType<typeof setTimeout>;
+      }) as typeof setTimeout;
+      (globalThis as any).clearTimeout = ((id: ReturnType<typeof setTimeout>) => {
+        const numericId = id as unknown as number;
+        clearedTimeouts.push(numericId);
+        scheduledTimeouts.delete(numericId);
+      }) as typeof clearTimeout;
+      Date.now = () => now;
+      try {
+        buffer.fillViewportRows();
+        buffer.lines.get(0)!.setCell(0, createCellData(0, 'a', 1));
+        buffer.lines.get(1)!.setCell(0, createCellData(0, 'b', 1));
+
+        assert.equal(buffer.translateBufferLineToString(0, false), `a${' '.repeat(INIT_COLS - 1)}`);
+        assert.equal(buffer.translateBufferLineToString(1, false), `b${' '.repeat(INIT_COLS - 1)}`);
+
+        const cache = buffer.getStringCache();
+        assert.equal(cache.entries.size, 2);
+        assert.ok(buffer.getStringCacheClearTimeout() !== undefined);
+        assert.equal(scheduledTimeouts.size, 1);
+        assert.equal([...scheduledTimeouts.values()][0].delay, 15000);
+        const initialTimerCreationCount = timeoutId;
+
+        now = 5000;
+        assert.equal(buffer.translateBufferLineToString(0, false), `a${' '.repeat(INIT_COLS - 1)}`);
+        assert.equal(timeoutId, initialTimerCreationCount);
+        assert.equal(scheduledTimeouts.size, 1);
+        assert.deepEqual(clearedTimeouts, []);
+
+        now = 15000;
+        [...scheduledTimeouts.values()][0].fire();
+        assert.equal(timeoutId, initialTimerCreationCount + 1);
+        assert.ok(buffer.getStringCacheClearTimeout() !== undefined);
+        assert.equal(scheduledTimeouts.size, 1);
+        assert.equal([...scheduledTimeouts.values()][0].delay, 5000);
+
+        now = 20000;
+        [...scheduledTimeouts.values()][0].fire();
+
+        assert.equal(cache.entries.size, 0);
+        assert.equal(buffer.getStringCacheClearTimeout(), undefined);
+
+        assert.equal(buffer.translateBufferLineToString(0, false), `a${' '.repeat(INIT_COLS - 1)}`);
+        assert.equal(cache.entries.size, 1);
+      } finally {
+        Date.now = originalDateNow;
+        globalThis.setTimeout = originalSetTimeout;
+        globalThis.clearTimeout = originalClearTimeout;
+      }
+    });
+
+    it('should reset line string cache state on clear and resize', () => {
+      buffer.fillViewportRows();
+      buffer.lines.get(0)!.setCell(0, createCellData(0, 'a', 1));
+      buffer.translateBufferLineToString(0, false);
+
+      const cache = buffer.getStringCache();
+      assert.equal(cache.entries.size, 1);
+      assert.ok(buffer.getStringCacheClearTimeout() !== undefined);
+
+      buffer.clear();
+      assert.equal(cache.entries.size, 0);
+      assert.equal(buffer.getStringCacheClearTimeout(), undefined);
+
+      buffer.fillViewportRows();
+      buffer.lines.get(0)!.setCell(0, createCellData(0, 'b', 1));
+      buffer.translateBufferLineToString(0, false);
+      assert.equal(cache.entries.size, 1);
+
+      buffer.resize(INIT_COLS - 1, INIT_ROWS);
+      assert.equal(cache.entries.size, 0);
+      assert.equal(buffer.getStringCacheClearTimeout(), undefined);
+    });
+  });
+
   describe('memory cleanup after shrinking', () => {
     it('should realign memory from idle task execution', async () => {
       buffer.fillViewportRows();

src/common/buffer/Buffer.ts

@@ -4,10 +4,12 @@
  */
 
 import { CircularList, IInsertEvent } from 'common/CircularList';
+import { Disposable, toDisposable } from 'common/Lifecycle';
 import { IdleTaskQueue } from 'common/TaskQueue';
 import { IAttributeData, IBufferLine, ICellData, ICharset } from 'common/Types';
 import { ExtendedAttrs } from 'common/buffer/AttributeData';
 import { BufferLine, DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
+import { BufferLineStringCache } from 'common/buffer/BufferLineStringCache';
 import { getWrappedLineTrimmedLength, reflowLargerApplyNewLayout, reflowLargerCreateNewLayout, reflowLargerGetLinesToRemove, reflowSmallerGetNewLineLengths } from 'common/buffer/BufferReflow';
 import { CellData } from 'common/buffer/CellData';
 import { NULL_CELL_CHAR, NULL_CELL_CODE, NULL_CELL_WIDTH, WHITESPACE_CELL_CHAR, WHITESPACE_CELL_CODE, WHITESPACE_CELL_WIDTH } from 'common/buffer/Constants';
@@ -25,7 +27,7 @@ export const MAX_BUFFER_SIZE = 4294967295; // 2^32 - 1
  *   - cursor position
  *   - scroll position
  */
-export class Buffer implements IBuffer {
+export class Buffer extends Disposable implements IBuffer {
   public lines: CircularList<IBufferLine>;
   public ydisp: number = 0;
   public ybase: number = 0;
@@ -50,6 +52,7 @@ export class Buffer implements IBuffer {
   private _isClearing: boolean = false;
   private _memoryCleanupQueue: InstanceType<typeof IdleTaskQueue>;
   private _memoryCleanupPosition = 0;
+  private readonly _stringCache: BufferLineStringCache;
 
   constructor(
     private _hasScrollback: boolean,
@@ -57,6 +60,7 @@ export class Buffer implements IBuffer {
     private _bufferService: IBufferService,
     private readonly _logService: ILogService
   ) {
+    super();
     this._cols = this._bufferService.cols;
     this._rows = this._bufferService.rows;
     this.lines = new CircularList<IBufferLine>(this._getCorrectBufferLength(this._rows));
@@ -64,6 +68,9 @@ export class Buffer implements IBuffer {
     this.scrollBottom = this._rows - 1;
     this.setupTabStops();
     this._memoryCleanupQueue = new IdleTaskQueue(this._logService);
+    this._register(toDisposable(() => this._memoryCleanupQueue.clear()));
+    this._register(toDisposable(() => this.clearAllMarkers()));
+    this._stringCache = this._register(new BufferLineStringCache());
   }
 
   public getNullCell(attr?: IAttributeData): ICellData {
@@ -93,7 +100,7 @@ export class Buffer implements IBuffer {
   }
 
   public getBlankLine(attr: IAttributeData, isWrapped?: boolean): IBufferLine {
-    return new BufferLine(this._bufferService.cols, this.getNullCell(attr), isWrapped);
+    return new BufferLine(this._stringCache, this._bufferService.cols, this.getNullCell(attr), isWrapped);
   }
 
   public get hasScrollback(): boolean {
@@ -138,6 +145,7 @@ export class Buffer implements IBuffer {
    * Clears the buffer to it's initial state, discarding all previous data.
    */
   public clear(): void {
+    this._stringCache.clear();
     this.ydisp = 0;
     this.ybase = 0;
     this.y = 0;
@@ -156,6 +164,7 @@ export class Buffer implements IBuffer {
   public resize(newCols: number, newRows: number): void {
     // store reference to null cell with default attrs
     const nullCell = this.getNullCell(DEFAULT_ATTR_DATA);
+    this._stringCache.clear();
 
     // count bufferlines with overly big memory to be cleaned afterwards
     let dirtyMemoryLines = 0;
@@ -190,7 +199,7 @@ export class Buffer implements IBuffer {
             if (this._optionsService.rawOptions.windowsPty.backend !== undefined || this._optionsService.rawOptions.windowsPty.buildNumber !== undefined) {
               // Just add the new missing rows on Windows as conpty reprints the screen with it's
               // view of the world. Once a line enters scrollback for conpty it remains there
-              this.lines.push(new BufferLine(newCols, nullCell));
+              this.lines.push(new BufferLine(this._stringCache, newCols, nullCell, false));
             } else {
               if (this.ybase > 0 && this.lines.length <= this.ybase + this.y + addToY + 1) {
                 // There is room above the buffer and there are no empty elements below the line,
@@ -204,7 +213,7 @@ export class Buffer implements IBuffer {
               } else {
                 // Add a blank line if there is no buffer left at the top to scroll to, or if there
                 // are blank lines after the cursor
-                this.lines.push(new BufferLine(newCols, nullCell));
+                this.lines.push(new BufferLine(this._stringCache, newCols, nullCell, false));
               }
             }
           }
@@ -345,7 +354,7 @@ export class Buffer implements IBuffer {
         }
         if (this.lines.length < newRows) {
           // Add an extra row at the bottom of the viewport
-          this.lines.push(new BufferLine(newCols, nullCell));
+          this.lines.push(new BufferLine(this._stringCache, newCols, nullCell, false));
         }
       } else {
         if (this.ydisp === this.ybase) {