fix: 修复关闭SSH终端标签页时会话状态未更新的问题

web/node_modules/@xterm/addon-canvas/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2017, The xterm.js authors (https://github.com/xtermjs/xterm.js)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

web/node_modules/@xterm/addon-canvas/README.md

@@ -0,0 +1,28 @@
+## @xterm/addon-canvas
+
+An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables a canvas-based renderer using a 2d context to draw. This addon requires xterm.js v5+.
+
+The purpose of this addon is to be used as a fallback for the [webgl addon](https://www.npmjs.com/package/@xterm/addon-webgl) when better performance is desired over the default DOM renderer, but WebGL2 isn't supported or performant for some reason.
+
+### Install
+
+```bash
+npm install --save @xterm/addon-canvas
+```
+
+### Usage
+
+```ts
+import { Terminal } from '@xterm/xterm';
+import { CanvasAddon } from '@xterm/addon-canvas';
+
+const terminal = new Terminal();
+terminal.open(element);
+terminal.loadAddon(new CanvasAddon());
+```
+
+See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/addon-canvas/typings/addon-canvas.d.ts) for more advanced usage.
+
+### See also
+
+- [@xterm/addon-webgl](https://www.npmjs.com/package/@xterm/addon-webgl) A renderer for xterm.js that uses WebGL

web/node_modules/@xterm/addon-canvas/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@xterm/addon-canvas",
+  "version": "0.7.0",
+  "author": {
+    "name": "The xterm.js authors",
+    "url": "https://xtermjs.org/"
+  },
+  "main": "lib/addon-canvas.js",
+  "types": "typings/addon-canvas.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-canvas",
+  "license": "MIT",
+  "keywords": [
+    "terminal",
+    "canvas",
+    "xterm",
+    "xterm.js"
+  ],
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p .",
+    "prepackage": "npm run build",
+    "package": "../../node_modules/.bin/webpack",
+    "prepublishOnly": "npm run package",
+    "start-server-only": "node ../../demo/start-server-only"
+  },
+  "peerDependencies": {
+    "@xterm/xterm": "^5.0.0"
+  }
+}

web/node_modules/@xterm/addon-canvas/src/BaseRenderLayer.ts

@@ -0,0 +1,511 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ReadonlyColorSet } from 'browser/Types';
+import { CellColorResolver } from 'browser/renderer/shared/CellColorResolver';
+import { acquireTextureAtlas } from 'browser/renderer/shared/CharAtlasCache';
+import { TEXT_BASELINE } from 'browser/renderer/shared/Constants';
+import { tryDrawCustomChar } from 'browser/renderer/shared/CustomGlyphs';
+import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { createSelectionRenderModel } from 'browser/renderer/shared/SelectionRenderModel';
+import { IRasterizedGlyph, IRenderDimensions, ISelectionRenderModel, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { EventEmitter, forwardEvent } from 'common/EventEmitter';
+import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
+import { isSafari } from 'common/Platform';
+import { ICellData } from 'common/Types';
+import { CellData } from 'common/buffer/CellData';
+import { WHITESPACE_CELL_CODE } from 'common/buffer/Constants';
+import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { Terminal } from '@xterm/xterm';
+import { IRenderLayer } from './Types';
+
+export abstract class BaseRenderLayer extends Disposable implements IRenderLayer {
+  private _canvas: HTMLCanvasElement;
+  protected _ctx!: CanvasRenderingContext2D;
+  private _deviceCharWidth: number = 0;
+  private _deviceCharHeight: number = 0;
+  private _deviceCellWidth: number = 0;
+  private _deviceCellHeight: number = 0;
+  private _deviceCharLeft: number = 0;
+  private _deviceCharTop: number = 0;
+
+  protected _selectionModel: ISelectionRenderModel = createSelectionRenderModel();
+  private _cellColorResolver: CellColorResolver;
+  private _bitmapGenerator: (BitmapGenerator | undefined)[] = [];
+
+  protected _charAtlas!: ITextureAtlas;
+  protected _charAtlasDisposable = this.register(new MutableDisposable());
+
+  public get canvas(): HTMLCanvasElement { return this._canvas; }
+  public get cacheCanvas(): HTMLCanvasElement { return this._charAtlas?.pages[0].canvas!; }
+
+  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
+
+  constructor(
+    private readonly _terminal: Terminal,
+    private _container: HTMLElement,
+    id: string,
+    zIndex: number,
+    private _alpha: boolean,
+    protected readonly _themeService: IThemeService,
+    protected readonly _bufferService: IBufferService,
+    protected readonly _optionsService: IOptionsService,
+    protected readonly _decorationService: IDecorationService,
+    protected readonly _coreBrowserService: ICoreBrowserService
+  ) {
+    super();
+    this._cellColorResolver = new CellColorResolver(this._terminal, this._optionsService, this._selectionModel, this._decorationService, this._coreBrowserService, this._themeService);
+    this._canvas = this._coreBrowserService.mainDocument.createElement('canvas');
+    this._canvas.classList.add(`xterm-${id}-layer`);
+    this._canvas.style.zIndex = zIndex.toString();
+    this._initCanvas();
+    this._container.appendChild(this._canvas);
+    this._refreshCharAtlas(this._themeService.colors);
+    this.register(this._themeService.onChangeColors(e => {
+      this._refreshCharAtlas(e);
+      this.reset();
+      // Trigger selection changed as it's handled separately to regular rendering
+      this.handleSelectionChanged(this._selectionModel.selectionStart, this._selectionModel.selectionEnd, this._selectionModel.columnSelectMode);
+    }));
+
+    this.register(toDisposable(() => {
+      this._canvas.remove();
+    }));
+  }
+
+  private _initCanvas(): void {
+    this._ctx = throwIfFalsy(this._canvas.getContext('2d', { alpha: this._alpha }));
+    // Draw the background if this is an opaque layer
+    if (!this._alpha) {
+      this._clearAll();
+    }
+  }
+
+  public handleBlur(): void {}
+  public handleFocus(): void {}
+  public handleCursorMove(): void {}
+  public handleGridChanged(startRow: number, endRow: number): void {}
+
+  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
+    this._selectionModel.update((this._terminal as any)._core, start, end, columnSelectMode);
+  }
+
+  protected _setTransparency(alpha: boolean): void {
+    // Do nothing when alpha doesn't change
+    if (alpha === this._alpha) {
+      return;
+    }
+
+    // Create new canvas and replace old one
+    const oldCanvas = this._canvas;
+    this._alpha = alpha;
+    // Cloning preserves properties
+    this._canvas = this._canvas.cloneNode() as HTMLCanvasElement;
+    this._initCanvas();
+    this._container.replaceChild(this._canvas, oldCanvas);
+
+    // Regenerate char atlas and force a full redraw
+    this._refreshCharAtlas(this._themeService.colors);
+    this.handleGridChanged(0, this._bufferService.rows - 1);
+  }
+
+  /**
+   * Refreshes the char atlas, aquiring a new one if necessary.
+   * @param colorSet The color set to use for the char atlas.
+   */
+  private _refreshCharAtlas(colorSet: ReadonlyColorSet): void {
+    if (this._deviceCharWidth <= 0 && this._deviceCharHeight <= 0) {
+      return;
+    }
+    this._charAtlas = acquireTextureAtlas(this._terminal, this._optionsService.rawOptions, colorSet, this._deviceCellWidth, this._deviceCellHeight, this._deviceCharWidth, this._deviceCharHeight, this._coreBrowserService.dpr);
+    this._charAtlasDisposable.value = forwardEvent(this._charAtlas.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas);
+    this._charAtlas.warmUp();
+    for (let i = 0; i < this._charAtlas.pages.length; i++) {
+      this._bitmapGenerator[i] = new BitmapGenerator(this._charAtlas.pages[i].canvas);
+    }
+  }
+
+  public resize(dim: IRenderDimensions): void {
+    this._deviceCellWidth = dim.device.cell.width;
+    this._deviceCellHeight = dim.device.cell.height;
+    this._deviceCharWidth = dim.device.char.width;
+    this._deviceCharHeight = dim.device.char.height;
+    this._deviceCharLeft = dim.device.char.left;
+    this._deviceCharTop = dim.device.char.top;
+    this._canvas.width = dim.device.canvas.width;
+    this._canvas.height = dim.device.canvas.height;
+    this._canvas.style.width = `${dim.css.canvas.width}px`;
+    this._canvas.style.height = `${dim.css.canvas.height}px`;
+
+    // Draw the background if this is an opaque layer
+    if (!this._alpha) {
+      this._clearAll();
+    }
+
+    this._refreshCharAtlas(this._themeService.colors);
+  }
+
+  public abstract reset(): void;
+
+  public clearTextureAtlas(): void {
+    this._charAtlas?.clearTexture();
+  }
+
+  /**
+   * Fills 1+ cells completely. This uses the existing fillStyle on the context.
+   * @param x The column to start at.
+   * @param y The row to start at
+   * @param width The number of columns to fill.
+   * @param height The number of rows to fill.
+   */
+  protected _fillCells(x: number, y: number, width: number, height: number): void {
+    this._ctx.fillRect(
+      x * this._deviceCellWidth,
+      y * this._deviceCellHeight,
+      width * this._deviceCellWidth,
+      height * this._deviceCellHeight);
+  }
+
+  /**
+   * Fills a 1px line (2px on HDPI) at the middle of the cell. This uses the
+   * existing fillStyle on the context.
+   * @param x The column to fill.
+   * @param y The row to fill.
+   */
+  protected _fillMiddleLineAtCells(x: number, y: number, width: number = 1): void {
+    const cellOffset = Math.ceil(this._deviceCellHeight * 0.5);
+    this._ctx.fillRect(
+      x * this._deviceCellWidth,
+      (y + 1) * this._deviceCellHeight - cellOffset - this._coreBrowserService.dpr,
+      width * this._deviceCellWidth,
+      this._coreBrowserService.dpr);
+  }
+
+  /**
+   * Fills a 1px line (2px on HDPI) at the bottom of the cell. This uses the
+   * existing fillStyle on the context.
+   * @param x The column to fill.
+   * @param y The row to fill.
+   */
+  protected _fillBottomLineAtCells(x: number, y: number, width: number = 1, pixelOffset: number = 0): void {
+    this._ctx.fillRect(
+      x * this._deviceCellWidth,
+      (y + 1) * this._deviceCellHeight + pixelOffset - this._coreBrowserService.dpr - 1 /* Ensure it's drawn within the cell */,
+      width * this._deviceCellWidth,
+      this._coreBrowserService.dpr);
+  }
+
+  protected _curlyUnderlineAtCell(x: number, y: number, width: number = 1): void {
+    this._ctx.save();
+    this._ctx.beginPath();
+    this._ctx.strokeStyle = this._ctx.fillStyle;
+    const lineWidth = this._coreBrowserService.dpr;
+    this._ctx.lineWidth = lineWidth;
+    for (let xOffset = 0; xOffset < width; xOffset++) {
+      const xLeft = (x + xOffset) * this._deviceCellWidth;
+      const xMid = (x + xOffset + 0.5) * this._deviceCellWidth;
+      const xRight = (x + xOffset + 1) * this._deviceCellWidth;
+      const yMid = (y + 1) * this._deviceCellHeight - lineWidth - 1;
+      const yMidBot = yMid - lineWidth;
+      const yMidTop = yMid + lineWidth;
+      this._ctx.moveTo(xLeft, yMid);
+      this._ctx.bezierCurveTo(
+        xLeft, yMidBot,
+        xMid, yMidBot,
+        xMid, yMid
+      );
+      this._ctx.bezierCurveTo(
+        xMid, yMidTop,
+        xRight, yMidTop,
+        xRight, yMid
+      );
+    }
+    this._ctx.stroke();
+    this._ctx.restore();
+  }
+
+  protected _dottedUnderlineAtCell(x: number, y: number, width: number = 1): void {
+    this._ctx.save();
+    this._ctx.beginPath();
+    this._ctx.strokeStyle = this._ctx.fillStyle;
+    const lineWidth = this._coreBrowserService.dpr;
+    this._ctx.lineWidth = lineWidth;
+    this._ctx.setLineDash([lineWidth * 2, lineWidth]);
+    const xLeft = x * this._deviceCellWidth;
+    const yMid = (y + 1) * this._deviceCellHeight - lineWidth - 1;
+    this._ctx.moveTo(xLeft, yMid);
+    for (let xOffset = 0; xOffset < width; xOffset++) {
+      // const xLeft = x * this._deviceCellWidth;
+      const xRight = (x + width + xOffset) * this._deviceCellWidth;
+      this._ctx.lineTo(xRight, yMid);
+    }
+    this._ctx.stroke();
+    this._ctx.closePath();
+    this._ctx.restore();
+  }
+
+  protected _dashedUnderlineAtCell(x: number, y: number, width: number = 1): void {
+    this._ctx.save();
+    this._ctx.beginPath();
+    this._ctx.strokeStyle = this._ctx.fillStyle;
+    const lineWidth = this._coreBrowserService.dpr;
+    this._ctx.lineWidth = lineWidth;
+    this._ctx.setLineDash([lineWidth * 4, lineWidth * 3]);
+    const xLeft = x * this._deviceCellWidth;
+    const xRight = (x + width) * this._deviceCellWidth;
+    const yMid = (y + 1) * this._deviceCellHeight - lineWidth - 1;
+    this._ctx.moveTo(xLeft, yMid);
+    this._ctx.lineTo(xRight, yMid);
+    this._ctx.stroke();
+    this._ctx.closePath();
+    this._ctx.restore();
+  }
+
+  /**
+   * Fills a 1px line (2px on HDPI) at the left of the cell. This uses the
+   * existing fillStyle on the context.
+   * @param x The column to fill.
+   * @param y The row to fill.
+   */
+  protected _fillLeftLineAtCell(x: number, y: number, width: number): void {
+    this._ctx.fillRect(
+      x * this._deviceCellWidth,
+      y * this._deviceCellHeight,
+      this._coreBrowserService.dpr * width,
+      this._deviceCellHeight);
+  }
+
+  /**
+   * Strokes a 1px rectangle (2px on HDPI) around a cell. This uses the existing
+   * strokeStyle on the context.
+   * @param x The column to fill.
+   * @param y The row to fill.
+   */
+  protected _strokeRectAtCell(x: number, y: number, width: number, height: number): void {
+    const lineWidth = this._coreBrowserService.dpr;
+    this._ctx.lineWidth = lineWidth;
+    this._ctx.strokeRect(
+      x * this._deviceCellWidth + lineWidth / 2,
+      y * this._deviceCellHeight + (lineWidth / 2),
+      width * this._deviceCellWidth - lineWidth,
+      (height * this._deviceCellHeight) - lineWidth);
+  }
+
+  /**
+   * Clears the entire canvas.
+   */
+  protected _clearAll(): void {
+    if (this._alpha) {
+      this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+    } else {
+      this._ctx.fillStyle = this._themeService.colors.background.css;
+      this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
+    }
+  }
+
+  /**
+   * Clears 1+ cells completely.
+   * @param x The column to start at.
+   * @param y The row to start at.
+   * @param width The number of columns to clear.
+   * @param height The number of rows to clear.
+   */
+  protected _clearCells(x: number, y: number, width: number, height: number): void {
+    if (this._alpha) {
+      this._ctx.clearRect(
+        x * this._deviceCellWidth,
+        y * this._deviceCellHeight,
+        width * this._deviceCellWidth,
+        height * this._deviceCellHeight);
+    } else {
+      this._ctx.fillStyle = this._themeService.colors.background.css;
+      this._ctx.fillRect(
+        x * this._deviceCellWidth,
+        y * this._deviceCellHeight,
+        width * this._deviceCellWidth,
+        height * this._deviceCellHeight);
+    }
+  }
+
+  /**
+   * Draws a truecolor character at the cell. The character will be clipped to
+   * ensure that it fits with the cell, including the cell to the right if it's
+   * a wide character. This uses the existing fillStyle on the context.
+   * @param cell The cell data for the character to draw.
+   * @param x The column to draw at.
+   * @param y The row to draw at.
+   */
+  protected _fillCharTrueColor(cell: CellData, x: number, y: number): void {
+    this._ctx.font = this._getFont(false, false);
+    this._ctx.textBaseline = TEXT_BASELINE;
+    this._clipRow(y);
+
+    // Draw custom characters if applicable
+    let drawSuccess = false;
+    if (this._optionsService.rawOptions.customGlyphs !== false) {
+      drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._deviceCellWidth, y * this._deviceCellHeight, this._deviceCellWidth, this._deviceCellHeight, this._optionsService.rawOptions.fontSize, this._coreBrowserService.dpr);
+    }
+
+    // Draw the character
+    if (!drawSuccess) {
+      this._ctx.fillText(
+        cell.getChars(),
+        x * this._deviceCellWidth + this._deviceCharLeft,
+        y * this._deviceCellHeight + this._deviceCharTop + this._deviceCharHeight);
+    }
+  }
+
+  /**
+   * Draws one or more characters at a cell. If possible this will draw using
+   * the character atlas to reduce draw time.
+   */
+  protected _drawChars(cell: ICellData, x: number, y: number): void {
+    const chars = cell.getChars();
+    const code = cell.getCode();
+    const width = cell.getWidth();
+    this._cellColorResolver.resolve(cell, x, this._bufferService.buffer.ydisp + y, this._deviceCellWidth);
+
+    if (!this._charAtlas) {
+      return;
+    }
+
+    let glyph: IRasterizedGlyph;
+    if (chars && chars.length > 1) {
+      glyph = this._charAtlas.getRasterizedGlyphCombinedChar(chars, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext, true);
+    } else {
+      glyph = this._charAtlas.getRasterizedGlyph(cell.getCode() || WHITESPACE_CELL_CODE, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext, true);
+    }
+    if (!glyph.size.x || !glyph.size.y) {
+      return;
+    }
+    this._ctx.save();
+    this._clipRow(y);
+
+    // Draw the image, use the bitmap if it's available
+
+    // HACK: If the canvas doesn't match, delete the generator. It's not clear how this happens but
+    // something is wrong with either the lifecycle of _bitmapGenerator or the page canvases are
+    // swapped out unexpectedly
+    if (this._bitmapGenerator[glyph.texturePage] && this._charAtlas.pages[glyph.texturePage].canvas !== this._bitmapGenerator[glyph.texturePage]!.canvas) {
+      this._bitmapGenerator[glyph.texturePage]?.bitmap?.close();
+      delete this._bitmapGenerator[glyph.texturePage];
+    }
+
+    if (this._charAtlas.pages[glyph.texturePage].version !== this._bitmapGenerator[glyph.texturePage]?.version) {
+      if (!this._bitmapGenerator[glyph.texturePage]) {
+        this._bitmapGenerator[glyph.texturePage] = new BitmapGenerator(this._charAtlas.pages[glyph.texturePage].canvas);
+      }
+      this._bitmapGenerator[glyph.texturePage]!.refresh();
+      this._bitmapGenerator[glyph.texturePage]!.version = this._charAtlas.pages[glyph.texturePage].version;
+    }
+
+    // Reduce scale horizontally for wide glyphs printed in cells that would overlap with the
+    // following cell (ie. the width is not 2).
+    let renderWidth = glyph.size.x;
+    if (this._optionsService.rawOptions.rescaleOverlappingGlyphs) {
+      if (allowRescaling(code, width, glyph.size.x, this._deviceCellWidth)) {
+        renderWidth = this._deviceCellWidth - 1; // - 1 to improve readability
+      }
+    }
+
+    this._ctx.drawImage(
+      this._bitmapGenerator[glyph.texturePage]?.bitmap || this._charAtlas!.pages[glyph.texturePage].canvas,
+      glyph.texturePosition.x,
+      glyph.texturePosition.y,
+      glyph.size.x,
+      glyph.size.y,
+      x * this._deviceCellWidth + this._deviceCharLeft - glyph.offset.x,
+      y * this._deviceCellHeight + this._deviceCharTop - glyph.offset.y,
+      renderWidth,
+      glyph.size.y
+    );
+    this._ctx.restore();
+  }
+
+  /**
+   * Clips a row to ensure no pixels will be drawn outside the cells in the row.
+   * @param y The row to clip.
+   */
+  private _clipRow(y: number): void {
+    this._ctx.beginPath();
+    this._ctx.rect(
+      0,
+      y * this._deviceCellHeight,
+      this._bufferService.cols * this._deviceCellWidth,
+      this._deviceCellHeight);
+    this._ctx.clip();
+  }
+
+  /**
+   * Gets the current font.
+   * @param isBold If we should use the bold fontWeight.
+   */
+  protected _getFont(isBold: boolean, isItalic: boolean): string {
+    const fontWeight = isBold ? this._optionsService.rawOptions.fontWeightBold : this._optionsService.rawOptions.fontWeight;
+    const fontStyle = isItalic ? 'italic' : '';
+
+    return `${fontStyle} ${fontWeight} ${this._optionsService.rawOptions.fontSize * this._coreBrowserService.dpr}px ${this._optionsService.rawOptions.fontFamily}`;
+  }
+}
+
+/**
+ * The number of milliseconds to wait before generating the ImageBitmap, this is to debounce/batch
+ * the operation as window.createImageBitmap is asynchronous.
+ */
+const GLYPH_BITMAP_COMMIT_DELAY = 100;
+
+const enum BitmapGeneratorState {
+  IDLE = 0,
+  GENERATING = 1,
+  GENERATING_INVALID = 2
+}
+
+class BitmapGenerator {
+  private _state: BitmapGeneratorState = BitmapGeneratorState.IDLE;
+  private _commitTimeout: number | undefined = undefined;
+  private _bitmap: ImageBitmap | undefined = undefined;
+  public get bitmap(): ImageBitmap | undefined { return this._bitmap; }
+  public version: number = -1;
+
+  constructor(public readonly canvas: HTMLCanvasElement) {
+  }
+
+  public refresh(): void {
+    // Clear the bitmap immediately as it's stale
+    this._bitmap?.close();
+    this._bitmap = undefined;
+    // Disable ImageBitmaps on Safari because of https://bugs.webkit.org/show_bug.cgi?id=149990
+    if (isSafari) {
+      return;
+    }
+    if (this._commitTimeout === undefined) {
+      this._commitTimeout = window.setTimeout(() => this._generate(), GLYPH_BITMAP_COMMIT_DELAY);
+    }
+    if (this._state === BitmapGeneratorState.GENERATING) {
+      this._state = BitmapGeneratorState.GENERATING_INVALID;
+    }
+  }
+
+  private _generate(): void {
+    if (this._state === BitmapGeneratorState.IDLE) {
+      this._bitmap?.close();
+      this._bitmap = undefined;
+      this._state = BitmapGeneratorState.GENERATING;
+      window.createImageBitmap(this.canvas).then(bitmap => {
+        if (this._state === BitmapGeneratorState.GENERATING_INVALID) {
+          this.refresh();
+        } else {
+          this._bitmap = bitmap;
+        }
+        this._state = BitmapGeneratorState.IDLE;
+      });
+      if (this._commitTimeout) {
+        this._commitTimeout = undefined;
+      }
+    }
+  }
+}

web/node_modules/@xterm/addon-canvas/src/CanvasAddon.ts

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2022 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import type { ITerminalAddon, Terminal } from '@xterm/xterm';
+import type { CanvasAddon as ICanvasApi } from '@xterm/addon-canvas';
+import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
+import { ITerminal } from 'browser/Types';
+import { EventEmitter, forwardEvent } from 'common/EventEmitter';
+import { Disposable, toDisposable } from 'common/Lifecycle';
+import { setTraceLogger } from 'common/services/LogService';
+import { IBufferService, IDecorationService, ILogService } from 'common/services/Services';
+import { CanvasRenderer } from './CanvasRenderer';
+
+export class CanvasAddon extends Disposable implements ITerminalAddon , ICanvasApi {
+  private _terminal?: Terminal;
+  private _renderer?: CanvasRenderer;
+
+  private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
+  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
+
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._renderer?.textureAtlas;
+  }
+
+  public activate(terminal: Terminal): void {
+    const core = (terminal as any)._core as ITerminal;
+    if (!terminal.element) {
+      this.register(core.onWillOpen(() => this.activate(terminal)));
+      return;
+    }
+
+    this._terminal = terminal;
+    const coreService = core.coreService;
+    const optionsService = core.optionsService;
+    const screenElement = core.screenElement!;
+    const linkifier = core.linkifier!;
+
+    const unsafeCore = core as any;
+    const bufferService: IBufferService = unsafeCore._bufferService;
+    const renderService: IRenderService = unsafeCore._renderService;
+    const characterJoinerService: ICharacterJoinerService = unsafeCore._characterJoinerService;
+    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;
+
+    // Set trace logger just in case it hasn't been yet which could happen when the addon is
+    // bundled separately to the core module
+    setTraceLogger(logService);
+
+    this._renderer = new CanvasRenderer(terminal, screenElement, linkifier, bufferService, charSizeService, optionsService, characterJoinerService, coreService, coreBrowserService, decorationService, themeService);
+    this.register(forwardEvent(this._renderer.onChangeTextureAtlas, this._onChangeTextureAtlas));
+    this.register(forwardEvent(this._renderer.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas));
+    renderService.setRenderer(this._renderer);
+    renderService.handleResize(bufferService.cols, bufferService.rows);
+
+    this.register(toDisposable(() => {
+      renderService.setRenderer((this._terminal as any)._core._createRenderer());
+      renderService.handleResize(terminal.cols, terminal.rows);
+      this._renderer?.dispose();
+      this._renderer = undefined;
+    }));
+  }
+
+  public clearTextureAtlas(): void {
+    this._renderer?.clearTextureAtlas();
+  }
+}

web/node_modules/@xterm/addon-canvas/src/CanvasRenderer.ts

@@ -0,0 +1,191 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ILinkifier2 } from 'browser/Types';
+import { removeTerminalFromCache } from 'browser/renderer/shared/CharAtlasCache';
+import { observeDevicePixelDimensions } from 'browser/renderer/shared/DevicePixelObserver';
+import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
+import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
+import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { EventEmitter, forwardEvent } from 'common/EventEmitter';
+import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
+import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { Terminal } from '@xterm/xterm';
+import { CursorRenderLayer } from './CursorRenderLayer';
+import { LinkRenderLayer } from './LinkRenderLayer';
+import { SelectionRenderLayer } from './SelectionRenderLayer';
+import { TextRenderLayer } from './TextRenderLayer';
+import { IRenderLayer } from './Types';
+
+export class CanvasRenderer extends Disposable implements IRenderer {
+  private _renderLayers: IRenderLayer[];
+  private _devicePixelRatio: number;
+  private _observerDisposable = this.register(new MutableDisposable());
+
+  public dimensions: IRenderDimensions;
+
+  private readonly _onRequestRedraw = this.register(new EventEmitter<IRequestRedrawEvent>());
+  public readonly onRequestRedraw = this._onRequestRedraw.event;
+  private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
+  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
+
+  constructor(
+    private readonly _terminal: Terminal,
+    private readonly _screenElement: HTMLElement,
+    linkifier2: ILinkifier2,
+    private readonly _bufferService: IBufferService,
+    private readonly _charSizeService: ICharSizeService,
+    private readonly _optionsService: IOptionsService,
+    characterJoinerService: ICharacterJoinerService,
+    coreService: ICoreService,
+    private readonly _coreBrowserService: ICoreBrowserService,
+    decorationService: IDecorationService,
+    private readonly _themeService: IThemeService
+  ) {
+    super();
+    const allowTransparency = this._optionsService.rawOptions.allowTransparency;
+    this._renderLayers = [
+      new TextRenderLayer(this._terminal, this._screenElement, 0, allowTransparency, this._bufferService, this._optionsService, characterJoinerService, decorationService, this._coreBrowserService, _themeService),
+      new SelectionRenderLayer(this._terminal, this._screenElement, 1, this._bufferService, this._coreBrowserService, decorationService, this._optionsService, _themeService),
+      new LinkRenderLayer(this._terminal, this._screenElement, 2, linkifier2, this._bufferService, this._optionsService, decorationService, this._coreBrowserService, _themeService),
+      new CursorRenderLayer(this._terminal, this._screenElement, 3, this._onRequestRedraw, this._bufferService, this._optionsService, coreService, this._coreBrowserService, decorationService, _themeService)
+    ];
+    for (const layer of this._renderLayers) {
+      forwardEvent(layer.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas);
+    }
+    this.dimensions = createRenderDimensions();
+    this._devicePixelRatio = this._coreBrowserService.dpr;
+    this._updateDimensions();
+
+    this._observerDisposable.value = observeDevicePixelDimensions(this._renderLayers[0].canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h));
+    this.register(this._coreBrowserService.onWindowChange(w => {
+      this._observerDisposable.value = observeDevicePixelDimensions(this._renderLayers[0].canvas, w, (w, h) => this._setCanvasDevicePixelDimensions(w, h));
+    }));
+
+    this.register(toDisposable(() => {
+      for (const l of this._renderLayers) {
+        l.dispose();
+      }
+      removeTerminalFromCache(this._terminal);
+    }));
+  }
+
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._renderLayers[0].cacheCanvas;
+  }
+
+  public handleDevicePixelRatioChange(): void {
+    // If the device pixel ratio changed, the char atlas needs to be regenerated
+    // and the terminal needs to refreshed
+    if (this._devicePixelRatio !== this._coreBrowserService.dpr) {
+      this._devicePixelRatio = this._coreBrowserService.dpr;
+      this.handleResize(this._bufferService.cols, this._bufferService.rows);
+    }
+  }
+
+  public handleResize(cols: number, rows: number): void {
+    // Update character and canvas dimensions
+    this._updateDimensions();
+
+    // Resize all render layers
+    for (const l of this._renderLayers) {
+      l.resize(this.dimensions);
+    }
+
+    // Resize the screen
+    this._screenElement.style.width = `${this.dimensions.css.canvas.width}px`;
+    this._screenElement.style.height = `${this.dimensions.css.canvas.height}px`;
+  }
+
+  public handleCharSizeChanged(): void {
+    this.handleResize(this._bufferService.cols, this._bufferService.rows);
+  }
+
+  public handleBlur(): void {
+    this._runOperation(l => l.handleBlur());
+  }
+
+  public handleFocus(): void {
+    this._runOperation(l => l.handleFocus());
+  }
+
+  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
+    this._runOperation(l => l.handleSelectionChanged(start, end, columnSelectMode));
+    // Selection foreground requires a full re-render
+    if (this._themeService.colors.selectionForeground) {
+      this._onRequestRedraw.fire({ start: 0, end: this._bufferService.rows - 1 });
+    }
+  }
+
+  public handleCursorMove(): void {
+    this._runOperation(l => l.handleCursorMove());
+  }
+
+  public clear(): void {
+    this._runOperation(l => l.reset());
+  }
+
+  private _runOperation(operation: (layer: IRenderLayer) => void): void {
+    for (const l of this._renderLayers) {
+      operation(l);
+    }
+  }
+
+  /**
+   * Performs the refresh loop callback, calling refresh only if a refresh is
+   * necessary before queueing up the next one.
+   */
+  public renderRows(start: number, end: number): void {
+    for (const l of this._renderLayers) {
+      l.handleGridChanged(start, end);
+    }
+  }
+
+  public clearTextureAtlas(): void {
+    for (const layer of this._renderLayers) {
+      layer.clearTextureAtlas();
+    }
+  }
+
+  /**
+   * Recalculates the character and canvas dimensions.
+   */
+  private _updateDimensions(): void {
+    if (!this._charSizeService.hasValidSize) {
+      return;
+    }
+
+    // See the WebGL renderer for an explanation of this section.
+    const dpr = this._coreBrowserService.dpr;
+    this.dimensions.device.char.width = Math.floor(this._charSizeService.width * dpr);
+    this.dimensions.device.char.height = Math.ceil(this._charSizeService.height * dpr);
+    this.dimensions.device.cell.height = Math.floor(this.dimensions.device.char.height * this._optionsService.rawOptions.lineHeight);
+    this.dimensions.device.char.top = this._optionsService.rawOptions.lineHeight === 1 ? 0 : Math.round((this.dimensions.device.cell.height - this.dimensions.device.char.height) / 2);
+    this.dimensions.device.cell.width = this.dimensions.device.char.width + Math.round(this._optionsService.rawOptions.letterSpacing);
+    this.dimensions.device.char.left = Math.floor(this._optionsService.rawOptions.letterSpacing / 2);
+    this.dimensions.device.canvas.height = this._bufferService.rows * this.dimensions.device.cell.height;
+    this.dimensions.device.canvas.width = this._bufferService.cols * this.dimensions.device.cell.width;
+    this.dimensions.css.canvas.height = Math.round(this.dimensions.device.canvas.height / dpr);
+    this.dimensions.css.canvas.width = Math.round(this.dimensions.device.canvas.width / dpr);
+    this.dimensions.css.cell.height = this.dimensions.css.canvas.height / this._bufferService.rows;
+    this.dimensions.css.cell.width = this.dimensions.css.canvas.width / this._bufferService.cols;
+  }
+
+  private _setCanvasDevicePixelDimensions(width: number, height: number): void {
+    this.dimensions.device.canvas.height = height;
+    this.dimensions.device.canvas.width = width;
+    // Resize all render layers
+    for (const l of this._renderLayers) {
+      l.resize(this.dimensions);
+    }
+    this._requestRedrawViewport();
+  }
+
+  private _requestRedrawViewport(): void {
+    this._onRequestRedraw.fire({ start: 0, end: this._bufferService.rows - 1 });
+  }
+}

web/node_modules/@xterm/addon-canvas/src/CursorRenderLayer.ts

@@ -0,0 +1,233 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { CursorBlinkStateManager } from 'browser/renderer/shared/CursorBlinkStateManager';
+import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { IEventEmitter } from 'common/EventEmitter';
+import { MutableDisposable } from 'common/Lifecycle';
+import { isFirefox } from 'common/Platform';
+import { ICellData } from 'common/Types';
+import { CellData } from 'common/buffer/CellData';
+import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { Terminal } from '@xterm/xterm';
+import { BaseRenderLayer } from './BaseRenderLayer';
+
+interface ICursorState {
+  x: number;
+  y: number;
+  isFocused: boolean;
+  style: string;
+  width: number;
+}
+
+export class CursorRenderLayer extends BaseRenderLayer {
+  private _state: ICursorState;
+  private _cursorRenderers: {[key: string]: (x: number, y: number, cell: ICellData) => void};
+  private _cursorBlinkStateManager: MutableDisposable<CursorBlinkStateManager> = this.register(new MutableDisposable());
+  private _cell: ICellData = new CellData();
+
+  constructor(
+    terminal: Terminal,
+    container: HTMLElement,
+    zIndex: number,
+    private readonly _onRequestRedraw: IEventEmitter<IRequestRedrawEvent>,
+    bufferService: IBufferService,
+    optionsService: IOptionsService,
+    private readonly _coreService: ICoreService,
+    coreBrowserService: ICoreBrowserService,
+    decorationService: IDecorationService,
+    themeService: IThemeService
+  ) {
+    super(terminal, container, 'cursor', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
+    this._state = {
+      x: 0,
+      y: 0,
+      isFocused: false,
+      style: '',
+      width: 0
+    };
+    this._cursorRenderers = {
+      'bar': this._renderBarCursor.bind(this),
+      'block': this._renderBlockCursor.bind(this),
+      'underline': this._renderUnderlineCursor.bind(this),
+      'outline': this._renderOutlineCursor.bind(this)
+    };
+    this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
+    this._handleOptionsChanged();
+  }
+
+  public resize(dim: IRenderDimensions): void {
+    super.resize(dim);
+    // Resizing the canvas discards the contents of the canvas so clear state
+    this._state = {
+      x: 0,
+      y: 0,
+      isFocused: false,
+      style: '',
+      width: 0
+    };
+  }
+
+  public reset(): void {
+    this._clearCursor();
+    this._cursorBlinkStateManager.value?.restartBlinkAnimation();
+    this._handleOptionsChanged();
+  }
+
+  public handleBlur(): void {
+    this._cursorBlinkStateManager.value?.pause();
+    this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
+  }
+
+  public handleFocus(): void {
+    this._cursorBlinkStateManager.value?.resume();
+    this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
+  }
+
+  private _handleOptionsChanged(): void {
+    if (this._optionsService.rawOptions.cursorBlink) {
+      if (!this._cursorBlinkStateManager.value) {
+        this._cursorBlinkStateManager.value = new CursorBlinkStateManager(() => this._render(true), this._coreBrowserService);
+      }
+    } else {
+      this._cursorBlinkStateManager.clear();
+    }
+    // Request a refresh from the terminal as management of rendering is being
+    // moved back to the terminal
+    this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
+  }
+
+  public handleCursorMove(): void {
+    this._cursorBlinkStateManager.value?.restartBlinkAnimation();
+  }
+
+  public handleGridChanged(startRow: number, endRow: number): void {
+    if (!this._cursorBlinkStateManager.value || this._cursorBlinkStateManager.value.isPaused) {
+      this._render(false);
+    } else {
+      this._cursorBlinkStateManager.value.restartBlinkAnimation();
+    }
+  }
+
+  private _render(triggeredByAnimationFrame: boolean): void {
+    // Don't draw the cursor if it's hidden
+    if (!this._coreService.isCursorInitialized || this._coreService.isCursorHidden) {
+      this._clearCursor();
+      return;
+    }
+
+    const cursorY = this._bufferService.buffer.ybase + this._bufferService.buffer.y;
+    const viewportRelativeCursorY = cursorY - this._bufferService.buffer.ydisp;
+
+    // Don't draw the cursor if it's off-screen
+    if (viewportRelativeCursorY < 0 || viewportRelativeCursorY >= this._bufferService.rows) {
+      this._clearCursor();
+      return;
+    }
+
+    // in case cursor.x == cols adjust visual cursor to cols - 1
+    const cursorX = Math.min(this._bufferService.buffer.x, this._bufferService.cols - 1);
+    this._bufferService.buffer.lines.get(cursorY)!.loadCell(cursorX, this._cell);
+    if (this._cell.content === undefined) {
+      return;
+    }
+
+    if (!this._coreBrowserService.isFocused) {
+      this._clearCursor();
+      this._ctx.save();
+      this._ctx.fillStyle = this._themeService.colors.cursor.css;
+      const cursorStyle = this._optionsService.rawOptions.cursorStyle;
+      const cursorInactiveStyle = this._optionsService.rawOptions.cursorInactiveStyle;
+      if (cursorInactiveStyle && cursorInactiveStyle !== 'none') {
+        this._cursorRenderers[cursorInactiveStyle](cursorX, viewportRelativeCursorY, this._cell);
+      }
+      this._ctx.restore();
+      this._state.x = cursorX;
+      this._state.y = viewportRelativeCursorY;
+      this._state.isFocused = false;
+      this._state.style = cursorStyle;
+      this._state.width = this._cell.getWidth();
+      return;
+    }
+
+    // Don't draw the cursor if it's blinking
+    if (this._cursorBlinkStateManager.value && !this._cursorBlinkStateManager.value.isCursorVisible) {
+      this._clearCursor();
+      return;
+    }
+
+    if (this._state) {
+      // The cursor is already in the correct spot, don't redraw
+      if (this._state.x === cursorX &&
+          this._state.y === viewportRelativeCursorY &&
+          this._state.isFocused === this._coreBrowserService.isFocused &&
+          this._state.style === this._optionsService.rawOptions.cursorStyle &&
+          this._state.width === this._cell.getWidth()) {
+        return;
+      }
+      this._clearCursor();
+    }
+
+    this._ctx.save();
+    this._cursorRenderers[this._optionsService.rawOptions.cursorStyle || 'block'](cursorX, viewportRelativeCursorY, this._cell);
+    this._ctx.restore();
+
+    this._state.x = cursorX;
+    this._state.y = viewportRelativeCursorY;
+    this._state.isFocused = false;
+    this._state.style = this._optionsService.rawOptions.cursorStyle;
+    this._state.width = this._cell.getWidth();
+  }
+
+  private _clearCursor(): void {
+    if (this._state) {
+      // Avoid potential rounding errors when browser is Firefox (#4487) or device pixel ratio is
+      // less than 1
+      if (isFirefox || this._coreBrowserService.dpr < 1) {
+        this._clearAll();
+      } else {
+        this._clearCells(this._state.x, this._state.y, this._state.width, 1);
+      }
+      this._state = {
+        x: 0,
+        y: 0,
+        isFocused: false,
+        style: '',
+        width: 0
+      };
+    }
+  }
+
+  private _renderBarCursor(x: number, y: number, cell: ICellData): void {
+    this._ctx.save();
+    this._ctx.fillStyle = this._themeService.colors.cursor.css;
+    this._fillLeftLineAtCell(x, y, this._optionsService.rawOptions.cursorWidth);
+    this._ctx.restore();
+  }
+
+  private _renderBlockCursor(x: number, y: number, cell: ICellData): void {
+    this._ctx.save();
+    this._ctx.fillStyle = this._themeService.colors.cursor.css;
+    this._fillCells(x, y, cell.getWidth(), 1);
+    this._ctx.fillStyle = this._themeService.colors.cursorAccent.css;
+    this._fillCharTrueColor(cell, x, y);
+    this._ctx.restore();
+  }
+
+  private _renderUnderlineCursor(x: number, y: number, cell: ICellData): void {
+    this._ctx.save();
+    this._ctx.fillStyle = this._themeService.colors.cursor.css;
+    this._fillBottomLineAtCells(x, y);
+    this._ctx.restore();
+  }
+
+  private _renderOutlineCursor(x: number, y: number, cell: ICellData): void {
+    this._ctx.save();
+    this._ctx.strokeStyle = this._themeService.colors.cursor.css;
+    this._strokeRectAtCell(x, y, cell.getWidth(), 1);
+    this._ctx.restore();
+  }
+}

web/node_modules/@xterm/addon-canvas/src/GridCache.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+export class GridCache<T> {
+  public cache: (T | undefined)[][];
+
+  public constructor() {
+    this.cache = [];
+  }
+
+  public resize(width: number, height: number): void {
+    for (let x = 0; x < width; x++) {
+      if (this.cache.length <= x) {
+        this.cache.push([]);
+      }
+      for (let y = this.cache[x].length; y < height; y++) {
+        this.cache[x].push(undefined);
+      }
+      this.cache[x].length = height;
+    }
+    this.cache.length = width;
+  }
+
+  public clear(): void {
+    for (let x = 0; x < this.cache.length; x++) {
+      for (let y = 0; y < this.cache[x].length; y++) {
+        this.cache[x][y] = undefined;
+      }
+    }
+  }
+}

web/node_modules/@xterm/addon-canvas/src/LinkRenderLayer.ts

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ILinkifier2, ILinkifierEvent } from 'browser/Types';
+import { is256Color } from 'browser/renderer/shared/CharAtlasUtils';
+import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { Terminal } from '@xterm/xterm';
+import { BaseRenderLayer } from './BaseRenderLayer';
+
+export class LinkRenderLayer extends BaseRenderLayer {
+  private _state: ILinkifierEvent | undefined;
+
+  constructor(
+    terminal: Terminal,
+    container: HTMLElement,
+    zIndex: number,
+    linkifier2: ILinkifier2,
+    bufferService: IBufferService,
+    optionsService: IOptionsService,
+    decorationService: IDecorationService,
+    coreBrowserService: ICoreBrowserService,
+    themeService: IThemeService
+  ) {
+    super(terminal, container, 'link', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
+
+    this.register(linkifier2.onShowLinkUnderline(e => this._handleShowLinkUnderline(e)));
+    this.register(linkifier2.onHideLinkUnderline(e => this._handleHideLinkUnderline(e)));
+  }
+
+  public resize(dim: IRenderDimensions): void {
+    super.resize(dim);
+    // Resizing the canvas discards the contents of the canvas so clear state
+    this._state = undefined;
+  }
+
+  public reset(): void {
+    this._clearCurrentLink();
+  }
+
+  private _clearCurrentLink(): void {
+    if (this._state) {
+      this._clearCells(this._state.x1, this._state.y1, this._state.cols - this._state.x1, 1);
+      const middleRowCount = this._state.y2 - this._state.y1 - 1;
+      if (middleRowCount > 0) {
+        this._clearCells(0, this._state.y1 + 1, this._state.cols, middleRowCount);
+      }
+      this._clearCells(0, this._state.y2, this._state.x2, 1);
+      this._state = undefined;
+    }
+  }
+
+  private _handleShowLinkUnderline(e: ILinkifierEvent): void {
+    if (e.fg === INVERTED_DEFAULT_COLOR) {
+      this._ctx.fillStyle = this._themeService.colors.background.css;
+    } else if (e.fg && is256Color(e.fg)) {
+      // 256 color support
+      this._ctx.fillStyle = this._themeService.colors.ansi[e.fg].css;
+    } else {
+      this._ctx.fillStyle = this._themeService.colors.foreground.css;
+    }
+
+    if (e.y1 === e.y2) {
+      // Single line link
+      this._fillBottomLineAtCells(e.x1, e.y1, e.x2 - e.x1);
+    } else {
+      // Multi-line link
+      this._fillBottomLineAtCells(e.x1, e.y1, e.cols - e.x1);
+      for (let y = e.y1 + 1; y < e.y2; y++) {
+        this._fillBottomLineAtCells(0, y, e.cols);
+      }
+      this._fillBottomLineAtCells(0, e.y2, e.x2);
+    }
+    this._state = e;
+  }
+
+  private _handleHideLinkUnderline(e: ILinkifierEvent): void {
+    this._clearCurrentLink();
+  }
+}

web/node_modules/@xterm/addon-canvas/src/SelectionRenderLayer.ts

@@ -0,0 +1,152 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
+import { BaseRenderLayer } from './BaseRenderLayer';
+import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { Terminal } from '@xterm/xterm';
+
+interface ISelectionState {
+  start?: [number, number];
+  end?: [number, number];
+  columnSelectMode?: boolean;
+  ydisp?: number;
+}
+
+export class SelectionRenderLayer extends BaseRenderLayer {
+  private _state!: ISelectionState;
+
+  constructor(
+    terminal: Terminal,
+    container: HTMLElement,
+    zIndex: number,
+    bufferService: IBufferService,
+    coreBrowserService: ICoreBrowserService,
+    decorationService: IDecorationService,
+    optionsService: IOptionsService,
+    themeService: IThemeService
+  ) {
+    super(terminal, container, 'selection', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
+    this._clearState();
+  }
+
+  private _clearState(): void {
+    this._state = {
+      start: undefined,
+      end: undefined,
+      columnSelectMode: undefined,
+      ydisp: undefined
+    };
+  }
+
+  public resize(dim: IRenderDimensions): void {
+    super.resize(dim);
+    // On resize use the base render layer's cached selection values since resize clears _state
+    // inside reset.
+    if (this._selectionModel.selectionStart && this._selectionModel.selectionEnd) {
+      this._clearState();
+      this._redrawSelection(this._selectionModel.selectionStart, this._selectionModel.selectionEnd, this._selectionModel.columnSelectMode);
+    }
+  }
+
+  public reset(): void {
+    if (this._state.start && this._state.end) {
+      this._clearState();
+      this._clearAll();
+    }
+  }
+
+  public handleBlur(): void {
+    this.reset();
+    this._redrawSelection(this._selectionModel.selectionStart, this._selectionModel.selectionEnd, this._selectionModel.columnSelectMode);
+  }
+
+  public handleFocus(): void {
+    this.reset();
+    this._redrawSelection(this._selectionModel.selectionStart, this._selectionModel.selectionEnd, this._selectionModel.columnSelectMode);
+  }
+
+  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
+    super.handleSelectionChanged(start, end, columnSelectMode);
+    this._redrawSelection(start, end, columnSelectMode);
+  }
+
+  private _redrawSelection(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
+    // Selection has not changed
+    if (!this._didStateChange(start, end, columnSelectMode, this._bufferService.buffer.ydisp)) {
+      return;
+    }
+
+    // Remove all selections
+    this._clearAll();
+
+    // Selection does not exist
+    if (!start || !end) {
+      this._clearState();
+      return;
+    }
+
+    // Translate from buffer position to viewport position
+    const viewportStartRow = start[1] - this._bufferService.buffer.ydisp;
+    const viewportEndRow = end[1] - this._bufferService.buffer.ydisp;
+    const viewportCappedStartRow = Math.max(viewportStartRow, 0);
+    const viewportCappedEndRow = Math.min(viewportEndRow, this._bufferService.rows - 1);
+
+    // No need to draw the selection
+    if (viewportCappedStartRow >= this._bufferService.rows || viewportCappedEndRow < 0) {
+      this._state.ydisp = this._bufferService.buffer.ydisp;
+      return;
+    }
+
+    this._ctx.fillStyle = (this._coreBrowserService.isFocused
+      ? this._themeService.colors.selectionBackgroundTransparent
+      : this._themeService.colors.selectionInactiveBackgroundTransparent).css;
+
+    if (columnSelectMode) {
+      const startCol = start[0];
+      const width = end[0] - startCol;
+      const height = viewportCappedEndRow - viewportCappedStartRow + 1;
+      this._fillCells(startCol, viewportCappedStartRow, width, height);
+    } else {
+      // Draw first row
+      const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0;
+      const startRowEndCol = viewportCappedStartRow === viewportEndRow ? end[0] : this._bufferService.cols;
+      this._fillCells(startCol, viewportCappedStartRow, startRowEndCol - startCol, 1);
+
+      // Draw middle rows
+      const middleRowsCount = Math.max(viewportCappedEndRow - viewportCappedStartRow - 1, 0);
+      this._fillCells(0, viewportCappedStartRow + 1, this._bufferService.cols, middleRowsCount);
+
+      // Draw final row
+      if (viewportCappedStartRow !== viewportCappedEndRow) {
+        // Only draw viewportEndRow if it's not the same as viewportStartRow
+        const endCol = viewportEndRow === viewportCappedEndRow ? end[0] : this._bufferService.cols;
+        this._fillCells(0, viewportCappedEndRow, endCol, 1);
+      }
+    }
+
+    // Save state for next render
+    this._state.start = [start[0], start[1]];
+    this._state.end = [end[0], end[1]];
+    this._state.columnSelectMode = columnSelectMode;
+    this._state.ydisp = this._bufferService.buffer.ydisp;
+  }
+
+  private _didStateChange(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean, ydisp: number): boolean {
+    return !this._areCoordinatesEqual(start, this._state.start) ||
+      !this._areCoordinatesEqual(end, this._state.end) ||
+      columnSelectMode !== this._state.columnSelectMode ||
+      ydisp !== this._state.ydisp;
+  }
+
+  private _areCoordinatesEqual(coord1: [number, number] | undefined, coord2: [number, number] | undefined): boolean {
+    if (!coord1 || !coord2) {
+      return false;
+    }
+
+    return coord1[0] === coord2[0] && coord1[1] === coord2[1];
+  }
+}

web/node_modules/@xterm/addon-canvas/src/TextRenderLayer.ts

@@ -0,0 +1,292 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
+import { JoinedCellData } from 'browser/services/CharacterJoinerService';
+import { ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { CharData, ICellData } from 'common/Types';
+import { AttributeData } from 'common/buffer/AttributeData';
+import { CellData } from 'common/buffer/CellData';
+import { Content, NULL_CELL_CODE } from 'common/buffer/Constants';
+import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { Terminal } from '@xterm/xterm';
+import { BaseRenderLayer } from './BaseRenderLayer';
+import { GridCache } from './GridCache';
+
+/**
+ * This CharData looks like a null character, which will forc a clear and render
+ * when the character changes (a regular space ' ' character may not as it's
+ * drawn state is a cleared cell).
+ */
+// const OVERLAP_OWNED_CHAR_DATA: CharData = [null, '', 0, -1];
+
+export class TextRenderLayer extends BaseRenderLayer {
+  private _state: GridCache<CharData>;
+  private _characterWidth: number = 0;
+  private _characterFont: string = '';
+  private _characterOverlapCache: { [key: string]: boolean } = {};
+  private _workCell = new CellData();
+
+  constructor(
+    terminal: Terminal,
+    container: HTMLElement,
+    zIndex: number,
+    alpha: boolean,
+    bufferService: IBufferService,
+    optionsService: IOptionsService,
+    private readonly _characterJoinerService: ICharacterJoinerService,
+    decorationService: IDecorationService,
+    coreBrowserService: ICoreBrowserService,
+    themeService: IThemeService
+  ) {
+    super(terminal, container, 'text', zIndex, alpha, themeService, bufferService, optionsService, decorationService, coreBrowserService);
+    this._state = new GridCache<CharData>();
+    this.register(optionsService.onSpecificOptionChange('allowTransparency', value => this._setTransparency(value)));
+  }
+
+  public resize(dim: IRenderDimensions): void {
+    super.resize(dim);
+
+    // Clear the character width cache if the font or width has changed
+    const terminalFont = this._getFont(false, false);
+    if (this._characterWidth !== dim.device.char.width || this._characterFont !== terminalFont) {
+      this._characterWidth = dim.device.char.width;
+      this._characterFont = terminalFont;
+      this._characterOverlapCache = {};
+    }
+    // Resizing the canvas discards the contents of the canvas so clear state
+    this._state.clear();
+    this._state.resize(this._bufferService.cols, this._bufferService.rows);
+  }
+
+  public reset(): void {
+    this._state.clear();
+    this._clearAll();
+  }
+
+  private _forEachCell(
+    firstRow: number,
+    lastRow: number,
+    callback: (
+      cell: ICellData,
+      x: number,
+      y: number
+    ) => void
+  ): void {
+    for (let y = firstRow; y <= lastRow; y++) {
+      const row = y + this._bufferService.buffer.ydisp;
+      const line = this._bufferService.buffer.lines.get(row);
+      const joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
+      for (let x = 0; x < this._bufferService.cols; x++) {
+        line!.loadCell(x, this._workCell);
+        let cell = this._workCell;
+
+        // If true, indicates that the current character(s) to draw were joined.
+        let isJoined = false;
+        let lastCharX = x;
+
+        // The character to the left is a wide character, drawing is owned by
+        // the char at x-1
+        if (cell.getWidth() === 0) {
+          continue;
+        }
+
+        // exit early for NULL and SP
+        // NOTE: commented out due to #4120 (needs a more clever patch to keep things performant)
+        // const code = cell.getCode();
+        // if (code === 0 || code === 32) {
+        //  continue;
+        // }
+
+        // Process any joined character ranges as needed. Because of how the
+        // ranges are produced, we know that they are valid for the characters
+        // and attributes of our input.
+        if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
+          isJoined = true;
+          const range = joinedRanges.shift()!;
+
+          // We already know the exact start and end column of the joined range,
+          // so we get the string and width representing it directly
+          cell = new JoinedCellData(
+            this._workCell,
+            line!.translateToString(true, range[0], range[1]),
+            range[1] - range[0]
+          );
+
+          // Skip over the cells occupied by this range in the loop
+          lastCharX = range[1] - 1;
+        }
+
+        // If the character is an overlapping char and the character to the
+        // right is a space, take ownership of the cell to the right. We skip
+        // this check for joined characters because their rendering likely won't
+        // yield the same result as rendering the last character individually.
+        if (!isJoined && this._isOverlapping(cell)) {
+          // If the character is overlapping, we want to force a re-render on every
+          // frame. This is specifically to work around the case where two
+          // overlaping chars `a` and `b` are adjacent, the cursor is moved to b and a
+          // space is added. Without this, the first half of `b` would never
+          // get removed, and `a` would not re-render because it thinks it's
+          // already in the correct state.
+          // this._state.cache[x][y] = OVERLAP_OWNED_CHAR_DATA;
+          if (lastCharX < line!.length - 1 && line!.getCodePoint(lastCharX + 1) === NULL_CELL_CODE) {
+            // patch width to 2
+            cell.content &= ~Content.WIDTH_MASK;
+            cell.content |= 2 << Content.WIDTH_SHIFT;
+            // this._clearChar(x + 1, y);
+            // The overlapping char's char data will force a clear and render when the
+            // overlapping char is no longer to the left of the character and also when
+            // the space changes to another character.
+            // this._state.cache[x + 1][y] = OVERLAP_OWNED_CHAR_DATA;
+          }
+        }
+
+        callback(
+          cell,
+          x,
+          y
+        );
+
+        x = lastCharX;
+      }
+    }
+  }
+
+  /**
+   * Draws the background for a specified range of columns. Tries to batch adjacent cells of the
+   * same color together to reduce draw calls.
+   */
+  private _drawBackground(firstRow: number, lastRow: number): void {
+    const ctx = this._ctx;
+    const cols = this._bufferService.cols;
+    let startX: number = 0;
+    let startY: number = 0;
+    let prevFillStyle: string | null = null;
+
+    ctx.save();
+
+    this._forEachCell(firstRow, lastRow, (cell, x, y) => {
+      // libvte and xterm both draw the background (but not foreground) of invisible characters,
+      // so we should too.
+      let nextFillStyle = null; // null represents default background color
+
+      if (cell.isInverse()) {
+        if (cell.isFgDefault()) {
+          nextFillStyle = this._themeService.colors.foreground.css;
+        } else if (cell.isFgRGB()) {
+          nextFillStyle = `rgb(${AttributeData.toColorRGB(cell.getFgColor()).join(',')})`;
+        } else {
+          nextFillStyle = this._themeService.colors.ansi[cell.getFgColor()].css;
+        }
+      } else if (cell.isBgRGB()) {
+        nextFillStyle = `rgb(${AttributeData.toColorRGB(cell.getBgColor()).join(',')})`;
+      } else if (cell.isBgPalette()) {
+        nextFillStyle = this._themeService.colors.ansi[cell.getBgColor()].css;
+      }
+
+      // Get any decoration foreground/background overrides, this must be fetched before the early
+      // exist but applied after inverse
+      let isTop = false;
+      this._decorationService.forEachDecorationAtCell(x, this._bufferService.buffer.ydisp + y, undefined, d => {
+        if (d.options.layer !== 'top' && isTop) {
+          return;
+        }
+        if (d.backgroundColorRGB) {
+          nextFillStyle = d.backgroundColorRGB.css;
+        }
+        isTop = d.options.layer === 'top';
+      });
+
+      if (prevFillStyle === null) {
+        // This is either the first iteration, or the default background was set. Either way, we
+        // don't need to draw anything.
+        startX = x;
+        startY = y;
+      }
+
+      if (y !== startY) {
+        // our row changed, draw the previous row
+        ctx.fillStyle = prevFillStyle || '';
+        this._fillCells(startX, startY, cols - startX, 1);
+        startX = x;
+        startY = y;
+      } else if (prevFillStyle !== nextFillStyle) {
+        // our color changed, draw the previous characters in this row
+        ctx.fillStyle = prevFillStyle || '';
+        this._fillCells(startX, startY, x - startX, 1);
+        startX = x;
+        startY = y;
+      }
+
+      prevFillStyle = nextFillStyle;
+    });
+
+    // flush the last color we encountered
+    if (prevFillStyle !== null) {
+      ctx.fillStyle = prevFillStyle;
+      this._fillCells(startX, startY, cols - startX, 1);
+    }
+
+    ctx.restore();
+  }
+
+  private _drawForeground(firstRow: number, lastRow: number): void {
+    this._forEachCell(firstRow, lastRow, (cell, x, y) => this._drawChars(cell, x, y));
+  }
+
+  public handleGridChanged(firstRow: number, lastRow: number): void {
+    // Resize has not been called yet
+    if (this._state.cache.length === 0) {
+      return;
+    }
+
+    if (this._charAtlas) {
+      this._charAtlas.beginFrame();
+    }
+
+    this._clearCells(0, firstRow, this._bufferService.cols, lastRow - firstRow + 1);
+    this._drawBackground(firstRow, lastRow);
+    this._drawForeground(firstRow, lastRow);
+  }
+
+  /**
+   * Whether a character is overlapping to the next cell.
+   */
+  private _isOverlapping(cell: ICellData): boolean {
+    // Only single cell characters can be overlapping, rendering issues can
+    // occur without this check
+    if (cell.getWidth() !== 1) {
+      return false;
+    }
+
+    // We assume that any ascii character will not overlap
+    if (cell.getCode() < 256) {
+      return false;
+    }
+
+    const chars = cell.getChars();
+
+    // Deliver from cache if available
+    if (this._characterOverlapCache.hasOwnProperty(chars)) {
+      return this._characterOverlapCache[chars];
+    }
+
+    // Setup the font
+    this._ctx.save();
+    this._ctx.font = this._characterFont;
+
+    // Measure the width of the character, but Math.floor it
+    // because that is what the renderer does when it calculates
+    // the character dimensions we are comparing against
+    const overlaps = Math.floor(this._ctx.measureText(chars).width) > this._characterWidth;
+
+    // Restore the original context
+    this._ctx.restore();
+
+    // Cache and return
+    this._characterOverlapCache[chars] = overlaps;
+    return overlaps;
+  }
+}

web/node_modules/@xterm/addon-canvas/src/Types.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IDisposable } from 'common/Types';
+import { IEvent } from 'common/EventEmitter';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
+
+export interface IRequestRedrawEvent {
+  start: number;
+  end: number;
+}
+
+/**
+ * Note that IRenderer implementations should emit the refresh event after
+ * rendering rows to the screen.
+ */
+export interface IRenderer extends IDisposable {
+  readonly dimensions: IRenderDimensions;
+
+  /**
+   * Fires when the renderer is requesting to be redrawn on the next animation
+   * frame but is _not_ a result of content changing (eg. selection changes).
+   */
+  readonly onRequestRedraw: IEvent<IRequestRedrawEvent>;
+
+  handleDevicePixelRatioChange(): void;
+  handleResize(cols: number, rows: number): void;
+  handleCharSizeChanged(): void;
+  handleBlur(): void;
+  handleFocus(): void;
+  handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
+  handleCursorMove(): void;
+  handleOptionsChanged(): void;
+  clear(): void;
+  renderRows(start: number, end: number): void;
+  clearTextureAtlas?(): void;
+}
+
+export interface IRenderLayer extends IDisposable {
+  readonly canvas: HTMLCanvasElement;
+  readonly cacheCanvas: HTMLCanvasElement;
+
+  readonly onAddTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
+  /**
+   * Called when the terminal loses focus.
+   */
+  handleBlur(): void;
+
+  /**
+   * Called when the terminal gets focus.
+   */
+  handleFocus(): void;
+
+  /**
+   * Called when the cursor is moved.
+   */
+  handleCursorMove(): void;
+
+  /**
+   * Called when the data in the grid has changed (or needs to be rendered
+   * again).
+   */
+  handleGridChanged(startRow: number, endRow: number): void;
+
+  /**
+   * Calls when the selection changes.
+   */
+  handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
+
+  /**
+   * Resize the render layer.
+   */
+  resize(dim: IRenderDimensions): void;
+
+  /**
+   * Clear the state of the render layer.
+   */
+  reset(): void;
+
+  /**
+   * Clears the texture atlas.
+   */
+  clearTextureAtlas(): void;
+}

web/node_modules/@xterm/addon-canvas/typings/addon-canvas.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Terminal, ITerminalAddon, IEvent } from '@xterm/xterm';
+
+declare module '@xterm/addon-canvas' {
+  /**
+   * An xterm.js addon that provides search functionality.
+   */
+  export class CanvasAddon implements ITerminalAddon {
+    public textureAtlas?: HTMLCanvasElement;
+
+    /**
+     * An event that is fired when the texture atlas of the renderer changes.
+     */
+    public readonly onChangeTextureAtlas: IEvent<HTMLCanvasElement>;
+
+    /**
+     * An event that is fired when the a new page is added to the texture atlas.
+     */
+    public readonly onAddTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
+
+    constructor();
+
+    /**
+     * Activates the addon.
+     * @param terminal The terminal the addon is being loaded in.
+     */
+    public activate(terminal: Terminal): void;
+
+    /**
+     * Disposes the addon.
+     */
+    public dispose(): void;
+
+    /**
+     * Clears the terminal's texture atlas and triggers a redraw.
+     */
+    public clearTextureAtlas(): void;
+  }
+}

web/node_modules/@xterm/addon-fit/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2019, The xterm.js authors (https://github.com/xtermjs/xterm.js)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

web/node_modules/@xterm/addon-fit/README.md

@@ -0,0 +1,24 @@
+## @xterm/addon-fit
+
+An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables fitting the terminal's dimensions to a containing element. This addon requires xterm.js v4+.
+
+### Install
+
+```bash
+npm install --save @xterm/addon-fit
+```
+
+### Usage
+
+```ts
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+
+const terminal = new Terminal();
+const fitAddon = new FitAddon();
+terminal.loadAddon(fitAddon);
+terminal.open(containerElement);
+fitAddon.fit();
+```
+
+See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/addon-fit/typings/addon-fit.d.ts) for more advanced usage.

web/node_modules/@xterm/addon-fit/lib/addon-fit.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.FitAddon=t():e.FitAddon=t()}(self,(()=>(()=>{"use strict";var e={};return(()=>{var t=e;Object.defineProperty(t,"__esModule",{value:!0}),t.FitAddon=void 0,t.FitAddon=class{activate(e){this._terminal=e}dispose(){}fit(){const e=this.proposeDimensions();if(!e||!this._terminal||isNaN(e.cols)||isNaN(e.rows))return;const t=this._terminal._core;this._terminal.rows===e.rows&&this._terminal.cols===e.cols||(t._renderService.clear(),this._terminal.resize(e.cols,e.rows))}proposeDimensions(){if(!this._terminal)return;if(!this._terminal.element||!this._terminal.element.parentElement)return;const e=this._terminal._core,t=e._renderService.dimensions;if(0===t.css.cell.width||0===t.css.cell.height)return;const r=0===this._terminal.options.scrollback?0:e.viewport.scrollBarWidth,i=window.getComputedStyle(this._terminal.element.parentElement),o=parseInt(i.getPropertyValue("height")),s=Math.max(0,parseInt(i.getPropertyValue("width"))),n=window.getComputedStyle(this._terminal.element),l=o-(parseInt(n.getPropertyValue("padding-top"))+parseInt(n.getPropertyValue("padding-bottom"))),a=s-(parseInt(n.getPropertyValue("padding-right"))+parseInt(n.getPropertyValue("padding-left")))-r;return{cols:Math.max(2,Math.floor(a/t.css.cell.width)),rows:Math.max(1,Math.floor(l/t.css.cell.height))}}}})(),e})()));
+//# sourceMappingURL=addon-fit.js.map

web/node_modules/@xterm/addon-fit/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@xterm/addon-fit",
+  "version": "0.10.0",
+  "author": {
+    "name": "The xterm.js authors",
+    "url": "https://xtermjs.org/"
+  },
+  "main": "lib/addon-fit.js",
+  "types": "typings/addon-fit.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-fit",
+  "license": "MIT",
+  "keywords": [
+    "terminal",
+    "xterm",
+    "xterm.js"
+  ],
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p .",
+    "prepackage": "npm run build",
+    "package": "../../node_modules/.bin/webpack",
+    "prepublishOnly": "npm run package"
+  },
+  "peerDependencies": {
+    "@xterm/xterm": "^5.0.0"
+  }
+}

web/node_modules/@xterm/addon-fit/src/FitAddon.ts

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import type { Terminal, ITerminalAddon } from '@xterm/xterm';
+import type { FitAddon as IFitApi } from '@xterm/addon-fit';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
+
+interface ITerminalDimensions {
+  /**
+   * The number of rows in the terminal.
+   */
+  rows: number;
+
+  /**
+   * The number of columns in the terminal.
+   */
+  cols: number;
+}
+
+const MINIMUM_COLS = 2;
+const MINIMUM_ROWS = 1;
+
+export class FitAddon implements ITerminalAddon , IFitApi {
+  private _terminal: Terminal | undefined;
+
+  public activate(terminal: Terminal): void {
+    this._terminal = terminal;
+  }
+
+  public dispose(): void {}
+
+  public fit(): void {
+    const dims = this.proposeDimensions();
+    if (!dims || !this._terminal || isNaN(dims.cols) || isNaN(dims.rows)) {
+      return;
+    }
+
+    // TODO: Remove reliance on private API
+    const core = (this._terminal as any)._core;
+
+    // Force a full render
+    if (this._terminal.rows !== dims.rows || this._terminal.cols !== dims.cols) {
+      core._renderService.clear();
+      this._terminal.resize(dims.cols, dims.rows);
+    }
+  }
+
+  public proposeDimensions(): ITerminalDimensions | undefined {
+    if (!this._terminal) {
+      return undefined;
+    }
+
+    if (!this._terminal.element || !this._terminal.element.parentElement) {
+      return undefined;
+    }
+
+    // TODO: Remove reliance on private API
+    const core = (this._terminal as any)._core;
+    const dims: IRenderDimensions = core._renderService.dimensions;
+
+    if (dims.css.cell.width === 0 || dims.css.cell.height === 0) {
+      return undefined;
+    }
+
+    const scrollbarWidth = this._terminal.options.scrollback === 0 ?
+      0 : core.viewport.scrollBarWidth;
+
+    const parentElementStyle = window.getComputedStyle(this._terminal.element.parentElement);
+    const parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height'));
+    const parentElementWidth = Math.max(0, parseInt(parentElementStyle.getPropertyValue('width')));
+    const elementStyle = window.getComputedStyle(this._terminal.element);
+    const elementPadding = {
+      top: parseInt(elementStyle.getPropertyValue('padding-top')),
+      bottom: parseInt(elementStyle.getPropertyValue('padding-bottom')),
+      right: parseInt(elementStyle.getPropertyValue('padding-right')),
+      left: parseInt(elementStyle.getPropertyValue('padding-left'))
+    };
+    const elementPaddingVer = elementPadding.top + elementPadding.bottom;
+    const elementPaddingHor = elementPadding.right + elementPadding.left;
+    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))
+    };
+    return geometry;
+  }
+}

web/node_modules/@xterm/addon-fit/typings/addon-fit.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Terminal, ITerminalAddon } from '@xterm/xterm';
+
+declare module '@xterm/addon-fit' {
+  /**
+   * An xterm.js addon that enables resizing the terminal to the dimensions of
+   * its containing element.
+   */
+  export class FitAddon implements ITerminalAddon {
+    /**
+     * Creates a new fit addon.
+     */
+    constructor();
+
+    /**
+     * Activates the addon
+     * @param terminal The terminal the addon is being loaded in.
+     */
+    public activate(terminal: Terminal): void;
+
+    /**
+     * Disposes the addon.
+     */
+    public dispose(): void;
+
+    /**
+     * Resizes the terminal to the dimensions of its containing element.
+     */
+    public fit(): void;
+
+    /**
+     * Gets the proposed dimensions that will be used for a fit.
+     */
+    public proposeDimensions(): ITerminalDimensions | undefined;
+  }
+
+  /**
+   * Reprepresents the dimensions of a terminal.
+   */
+  export interface ITerminalDimensions {
+    /**
+     * The number of rows in the terminal.
+     */
+    rows: number;
+
+    /**
+     * The number of columns in the terminal.
+     */
+    cols: number;
+  }
+}

web/node_modules/@xterm/addon-search/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2017, The xterm.js authors (https://github.com/xtermjs/xterm.js)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

web/node_modules/@xterm/addon-search/README.md

@@ -0,0 +1,23 @@
+## @xterm/addon-search
+
+An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables searching the buffer. This addon requires xterm.js v4+.
+
+### Install
+
+```bash
+npm install --save @xterm/addon-search
+```
+
+### Usage
+
+```ts
+import { Terminal } from '@xterm/xterm';
+import { SearchAddon } from '@xterm/addon-search';
+
+const terminal = new Terminal();
+const searchAddon = new SearchAddon();
+terminal.loadAddon(searchAddon);
+searchAddon.findNext('foo');
+```
+
+See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/addon-search/typings/addon-search.d.ts) for more advanced usage.

web/node_modules/@xterm/addon-search/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@xterm/addon-search",
+  "version": "0.15.0",
+  "author": {
+    "name": "The xterm.js authors",
+    "url": "https://xtermjs.org/"
+  },
+  "main": "lib/addon-search.js",
+  "types": "typings/addon-search.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-search",
+  "license": "MIT",
+  "keywords": [
+    "terminal",
+    "xterm",
+    "xterm.js"
+  ],
+  "scripts": {
+    "prepackage": "../../node_modules/.bin/tsc -p .",
+    "package": "../../node_modules/.bin/webpack",
+    "prepublishOnly": "npm run package"
+  },
+  "peerDependencies": {
+    "@xterm/xterm": "^5.0.0"
+  }
+}

web/node_modules/@xterm/addon-search/src/SearchAddon.ts

@@ -0,0 +1,747 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import type { Terminal, IDisposable, ITerminalAddon, IDecoration } from '@xterm/xterm';
+import type { SearchAddon as ISearchApi } from '@xterm/addon-search';
+import { EventEmitter } from 'common/EventEmitter';
+import { Disposable, toDisposable, disposeArray, MutableDisposable, getDisposeArrayDisposable } from 'common/Lifecycle';
+
+export interface ISearchOptions {
+  regex?: boolean;
+  wholeWord?: boolean;
+  caseSensitive?: boolean;
+  incremental?: boolean;
+  decorations?: ISearchDecorationOptions;
+  noScroll?: boolean;
+}
+
+interface ISearchDecorationOptions {
+  matchBackground?: string;
+  matchBorder?: string;
+  matchOverviewRuler: string;
+  activeMatchBackground?: string;
+  activeMatchBorder?: string;
+  activeMatchColorOverviewRuler: string;
+}
+
+export interface ISearchPosition {
+  startCol: number;
+  startRow: number;
+}
+
+export interface ISearchAddonOptions {
+  highlightLimit: number;
+}
+
+export interface ISearchResult {
+  term: string;
+  col: number;
+  row: number;
+  size: number;
+}
+
+type LineCacheEntry = [
+  /**
+   * The string representation of a line (as opposed to the buffer cell representation).
+   */
+  lineAsString: string,
+  /**
+   * The offsets where each line starts when the entry describes a wrapped line.
+   */
+  lineOffsets: number[]
+];
+
+interface IHighlight extends IDisposable {
+  decoration: IDecoration;
+  match: ISearchResult;
+}
+
+const NON_WORD_CHARACTERS = ' ~!@#$%^&*()+`-=[]{}|\\;:"\',./<>?';
+const LINES_CACHE_TIME_TO_LIVE = 15 * 1000; // 15 secs
+const DEFAULT_HIGHLIGHT_LIMIT = 1000;
+
+export class SearchAddon extends Disposable implements ITerminalAddon , ISearchApi {
+  private _terminal: Terminal | undefined;
+  private _cachedSearchTerm: string | undefined;
+  private _highlightedLines: Set<number> = new Set();
+  private _highlightDecorations: IHighlight[] = [];
+  private _selectedDecoration: MutableDisposable<IHighlight> = this.register(new MutableDisposable());
+  private _highlightLimit: number;
+  private _lastSearchOptions: ISearchOptions | undefined;
+  private _highlightTimeout: number | undefined;
+  /**
+   * translateBufferLineToStringWithWrap is a fairly expensive call.
+   * We memoize the calls into an array that has a time based ttl.
+   * _linesCache is also invalidated when the terminal cursor moves.
+   */
+  private _linesCache: LineCacheEntry[] | undefined;
+  private _linesCacheTimeoutId = 0;
+  private _linesCacheDisposables = new MutableDisposable();
+
+  private readonly _onDidChangeResults = this.register(new EventEmitter<{ resultIndex: number, resultCount: number }>());
+  public readonly onDidChangeResults = this._onDidChangeResults.event;
+
+  constructor(options?: Partial<ISearchAddonOptions>) {
+    super();
+
+    this._highlightLimit = options?.highlightLimit ?? DEFAULT_HIGHLIGHT_LIMIT;
+  }
+
+  public activate(terminal: Terminal): void {
+    this._terminal = terminal;
+    this.register(this._terminal.onWriteParsed(() => this._updateMatches()));
+    this.register(this._terminal.onResize(() => this._updateMatches()));
+    this.register(toDisposable(() => this.clearDecorations()));
+  }
+
+  private _updateMatches(): void {
+    if (this._highlightTimeout) {
+      window.clearTimeout(this._highlightTimeout);
+    }
+    if (this._cachedSearchTerm && this._lastSearchOptions?.decorations) {
+      this._highlightTimeout = setTimeout(() => {
+        const term = this._cachedSearchTerm;
+        this._cachedSearchTerm = undefined;
+        this.findPrevious(term!, { ...this._lastSearchOptions, incremental: true, noScroll: true });
+      }, 200);
+    }
+  }
+
+  public clearDecorations(retainCachedSearchTerm?: boolean): void {
+    this._selectedDecoration.clear();
+    disposeArray(this._highlightDecorations);
+    this._highlightDecorations = [];
+    this._highlightedLines.clear();
+    if (!retainCachedSearchTerm) {
+      this._cachedSearchTerm = undefined;
+    }
+  }
+
+  public clearActiveDecoration(): void {
+    this._selectedDecoration.clear();
+  }
+
+  /**
+   * Find the next instance of the term, then scroll to and select it. If it
+   * doesn't exist, do nothing.
+   * @param term The search term.
+   * @param searchOptions Search options.
+   * @returns Whether a result was found.
+   */
+  public findNext(term: string, searchOptions?: ISearchOptions): boolean {
+    if (!this._terminal) {
+      throw new Error('Cannot use addon until it has been loaded');
+    }
+    const didOptionsChanged = this._lastSearchOptions ? this._didOptionsChange(this._lastSearchOptions, searchOptions) : true;
+    this._lastSearchOptions = searchOptions;
+    if (searchOptions?.decorations) {
+      if (this._cachedSearchTerm === undefined || term !== this._cachedSearchTerm || didOptionsChanged) {
+        this._highlightAllMatches(term, searchOptions);
+      }
+    }
+
+    const found = this._findNextAndSelect(term, searchOptions);
+    this._fireResults(searchOptions);
+    this._cachedSearchTerm = term;
+
+    return found;
+  }
+
+  private _highlightAllMatches(term: string, searchOptions: ISearchOptions): void {
+    if (!this._terminal) {
+      throw new Error('Cannot use addon until it has been loaded');
+    }
+    if (!term || term.length === 0) {
+      this.clearDecorations();
+      return;
+    }
+    searchOptions = searchOptions || {};
+
+    // new search, clear out the old decorations
+    this.clearDecorations(true);
+
+    const searchResultsWithHighlight: ISearchResult[] = [];
+    let prevResult: ISearchResult | undefined = undefined;
+    let result = this._find(term, 0, 0, searchOptions);
+    while (result && (prevResult?.row !== result.row || prevResult?.col !== result.col)) {
+      if (searchResultsWithHighlight.length >= this._highlightLimit) {
+        break;
+      }
+      prevResult = result;
+      searchResultsWithHighlight.push(prevResult);
+      result = this._find(
+        term,
+        prevResult.col + prevResult.term.length >= this._terminal.cols ? prevResult.row + 1 : prevResult.row,
+        prevResult.col + prevResult.term.length >= this._terminal.cols ? 0 : prevResult.col + 1,
+        searchOptions
+      );
+    }
+    for (const match of searchResultsWithHighlight) {
+      const decoration = this._createResultDecoration(match, searchOptions.decorations!);
+      if (decoration) {
+        this._highlightedLines.add(decoration.marker.line);
+        this._highlightDecorations.push({ decoration, match, dispose() { decoration.dispose(); } });
+      }
+    }
+  }
+
+  private _find(term: string, startRow: number, startCol: number, searchOptions?: ISearchOptions): ISearchResult | undefined {
+    if (!this._terminal || !term || term.length === 0) {
+      this._terminal?.clearSelection();
+      this.clearDecorations();
+      return undefined;
+    }
+    if (startCol > this._terminal.cols) {
+      throw new Error(`Invalid col: ${startCol} to search in terminal of ${this._terminal.cols} cols`);
+    }
+
+    let result: ISearchResult | undefined = undefined;
+
+    this._initLinesCache();
+
+    const searchPosition: ISearchPosition = {
+      startRow,
+      startCol
+    };
+
+    // Search startRow
+    result = this._findInLine(term, searchPosition, searchOptions);
+    // Search from startRow + 1 to end
+    if (!result) {
+
+      for (let y = startRow + 1; y < this._terminal.buffer.active.baseY + this._terminal.rows; y++) {
+        searchPosition.startRow = y;
+        searchPosition.startCol = 0;
+        // If the current line is wrapped line, increase index of column to ignore the previous scan
+        // Otherwise, reset beginning column index to zero with set new unwrapped line index
+        result = this._findInLine(term, searchPosition, searchOptions);
+        if (result) {
+          break;
+        }
+      }
+    }
+    return result;
+  }
+
+  private _findNextAndSelect(term: string, searchOptions?: ISearchOptions): boolean {
+    if (!this._terminal || !term || term.length === 0) {
+      this._terminal?.clearSelection();
+      this.clearDecorations();
+      return false;
+    }
+
+    const prevSelectedPos = this._terminal.getSelectionPosition();
+    this._terminal.clearSelection();
+
+    let startCol = 0;
+    let startRow = 0;
+    if (prevSelectedPos) {
+      if (this._cachedSearchTerm === term) {
+        startCol = prevSelectedPos.end.x;
+        startRow = prevSelectedPos.end.y;
+      } else {
+        startCol = prevSelectedPos.start.x;
+        startRow = prevSelectedPos.start.y;
+      }
+    }
+
+    this._initLinesCache();
+
+    const searchPosition: ISearchPosition = {
+      startRow,
+      startCol
+    };
+
+    // Search startRow
+    let result = this._findInLine(term, searchPosition, searchOptions);
+    // Search from startRow + 1 to end
+    if (!result) {
+
+      for (let y = startRow + 1; y < this._terminal.buffer.active.baseY + this._terminal.rows; y++) {
+        searchPosition.startRow = y;
+        searchPosition.startCol = 0;
+        // If the current line is wrapped line, increase index of column to ignore the previous scan
+        // Otherwise, reset beginning column index to zero with set new unwrapped line index
+        result = this._findInLine(term, searchPosition, searchOptions);
+        if (result) {
+          break;
+        }
+      }
+    }
+    // If we hit the bottom and didn't search from the very top wrap back up
+    if (!result && startRow !== 0) {
+      for (let y = 0; y < startRow; y++) {
+        searchPosition.startRow = y;
+        searchPosition.startCol = 0;
+        result = this._findInLine(term, searchPosition, searchOptions);
+        if (result) {
+          break;
+        }
+      }
+    }
+
+    // If there is only one result, wrap back and return selection if it exists.
+    if (!result && prevSelectedPos) {
+      searchPosition.startRow = prevSelectedPos.start.y;
+      searchPosition.startCol = 0;
+      result = this._findInLine(term, searchPosition, searchOptions);
+    }
+
+    // Set selection and scroll if a result was found
+    return this._selectResult(result, searchOptions?.decorations, searchOptions?.noScroll);
+  }
+  /**
+   * Find the previous instance of the term, then scroll to and select it. If it
+   * doesn't exist, do nothing.
+   * @param term The search term.
+   * @param searchOptions Search options.
+   * @returns Whether a result was found.
+   */
+  public findPrevious(term: string, searchOptions?: ISearchOptions): boolean {
+    if (!this._terminal) {
+      throw new Error('Cannot use addon until it has been loaded');
+    }
+    const didOptionsChanged = this._lastSearchOptions ? this._didOptionsChange(this._lastSearchOptions, searchOptions) : true;
+    this._lastSearchOptions = searchOptions;
+    if (searchOptions?.decorations) {
+      if (this._cachedSearchTerm === undefined || term !== this._cachedSearchTerm || didOptionsChanged) {
+        this._highlightAllMatches(term, searchOptions);
+      }
+    }
+
+    const found = this._findPreviousAndSelect(term, searchOptions);
+    this._fireResults(searchOptions);
+    this._cachedSearchTerm = term;
+
+    return found;
+  }
+
+  private _didOptionsChange(lastSearchOptions: ISearchOptions, searchOptions?: ISearchOptions): boolean {
+    if (!searchOptions) {
+      return false;
+    }
+    if (lastSearchOptions.caseSensitive !== searchOptions.caseSensitive) {
+      return true;
+    }
+    if (lastSearchOptions.regex !== searchOptions.regex) {
+      return true;
+    }
+    if (lastSearchOptions.wholeWord !== searchOptions.wholeWord) {
+      return true;
+    }
+    return false;
+  }
+
+  private _fireResults(searchOptions?: ISearchOptions): void {
+    if (searchOptions?.decorations) {
+      let resultIndex = -1;
+      if (this._selectedDecoration.value) {
+        const selectedMatch = this._selectedDecoration.value.match;
+        for (let i = 0; i < this._highlightDecorations.length; i++) {
+          const match = this._highlightDecorations[i].match;
+          if (match.row === selectedMatch.row && match.col === selectedMatch.col && match.size === selectedMatch.size) {
+            resultIndex = i;
+            break;
+          }
+        }
+      }
+      this._onDidChangeResults.fire({ resultIndex, resultCount: this._highlightDecorations.length });
+    }
+  }
+
+  private _findPreviousAndSelect(term: string, searchOptions?: ISearchOptions): boolean {
+    if (!this._terminal) {
+      throw new Error('Cannot use addon until it has been loaded');
+    }
+    if (!this._terminal || !term || term.length === 0) {
+      this._terminal?.clearSelection();
+      this.clearDecorations();
+      return false;
+    }
+
+    const prevSelectedPos = this._terminal.getSelectionPosition();
+    this._terminal.clearSelection();
+
+    let startRow = this._terminal.buffer.active.baseY + this._terminal.rows - 1;
+    let startCol = this._terminal.cols;
+    const isReverseSearch = true;
+
+    this._initLinesCache();
+    const searchPosition: ISearchPosition = {
+      startRow,
+      startCol
+    };
+
+    let result: ISearchResult | undefined;
+    if (prevSelectedPos) {
+      searchPosition.startRow = startRow = prevSelectedPos.start.y;
+      searchPosition.startCol = startCol = prevSelectedPos.start.x;
+      if (this._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;
+        }
+      }
+    }
+
+    if (!result) {
+      result = this._findInLine(term, searchPosition, searchOptions, isReverseSearch);
+    }
+
+    // Search from startRow - 1 to top
+    if (!result) {
+      searchPosition.startCol = Math.max(searchPosition.startCol, this._terminal.cols);
+      for (let y = startRow - 1; y >= 0; y--) {
+        searchPosition.startRow = y;
+        result = this._findInLine(term, searchPosition, searchOptions, isReverseSearch);
+        if (result) {
+          break;
+        }
+      }
+    }
+    // If we hit the top and didn't search from the very bottom wrap back down
+    if (!result && startRow !== (this._terminal.buffer.active.baseY + this._terminal.rows - 1)) {
+      for (let y = (this._terminal.buffer.active.baseY + this._terminal.rows - 1); y >= startRow; y--) {
+        searchPosition.startRow = y;
+        result = this._findInLine(term, searchPosition, searchOptions, isReverseSearch);
+        if (result) {
+          break;
+        }
+      }
+    }
+
+    // Set selection and scroll if a result was found
+    return this._selectResult(result, searchOptions?.decorations, searchOptions?.noScroll);
+  }
+
+  /**
+   * Sets up a line cache with a ttl
+   */
+  private _initLinesCache(): void {
+    const terminal = this._terminal!;
+    if (!this._linesCache) {
+      this._linesCache = new Array(terminal.buffer.active.length);
+      this._linesCacheDisposables.value = getDisposeArrayDisposable([
+        terminal.onLineFeed(() => this._destroyLinesCache()),
+        terminal.onCursorMove(() => this._destroyLinesCache()),
+        terminal.onResize(() => this._destroyLinesCache())
+      ]);
+    }
+
+    window.clearTimeout(this._linesCacheTimeoutId);
+    this._linesCacheTimeoutId = window.setTimeout(() => this._destroyLinesCache(), LINES_CACHE_TIME_TO_LIVE);
+  }
+
+  private _destroyLinesCache(): void {
+    this._linesCache = undefined;
+    this._linesCacheDisposables.clear();
+    if (this._linesCacheTimeoutId) {
+      window.clearTimeout(this._linesCacheTimeoutId);
+      this._linesCacheTimeoutId = 0;
+    }
+  }
+
+  /**
+   * A found substring is a whole word if it doesn't have an alphanumeric character directly
+   * adjacent to it.
+   * @param searchIndex starting indext of the potential whole word substring
+   * @param line entire string in which the potential whole word was found
+   * @param term the substring that starts at searchIndex
+   */
+  private _isWholeWord(searchIndex: number, line: string, term: string): boolean {
+    return ((searchIndex === 0) || (NON_WORD_CHARACTERS.includes(line[searchIndex - 1]))) &&
+      (((searchIndex + term.length) === line.length) || (NON_WORD_CHARACTERS.includes(line[searchIndex + term.length])));
+  }
+
+  /**
+   * Searches a line for a search term. Takes the provided terminal line and searches the text line,
+   * which may contain subsequent terminal lines if the text is wrapped. If the provided line number
+   * is part of a wrapped text line that started on an earlier line then it is skipped since it will
+   * be properly searched when the terminal line that the text starts on is searched.
+   * @param term The search term.
+   * @param searchPosition The position to start the search.
+   * @param searchOptions Search options.
+   * @param isReverseSearch Whether the search should start from the right side of the terminal and
+   * search to the left.
+   * @returns The search result if it was found.
+   */
+  protected _findInLine(term: string, searchPosition: ISearchPosition, searchOptions: ISearchOptions = {}, isReverseSearch: boolean = false): ISearchResult | undefined {
+    const terminal = this._terminal!;
+    const row = searchPosition.startRow;
+    const col = searchPosition.startCol;
+
+    // Ignore wrapped lines, only consider on unwrapped line (first row of command string).
+    const firstLine = terminal.buffer.active.getLine(row);
+    if (firstLine?.isWrapped) {
+      if (isReverseSearch) {
+        searchPosition.startCol += terminal.cols;
+        return;
+      }
+
+      // This will iterate until we find the line start.
+      // When we find it, we will search using the calculated start column.
+      searchPosition.startRow--;
+      searchPosition.startCol += terminal.cols;
+      return this._findInLine(term, searchPosition, searchOptions);
+    }
+    let cache = this._linesCache?.[row];
+    if (!cache) {
+      cache = this._translateBufferLineToStringWithWrap(row, true);
+      if (this._linesCache) {
+        this._linesCache[row] = cache;
+      }
+    }
+    const [stringLine, offsets] = cache;
+
+    const offset = this._bufferColsToStringOffset(row, col);
+    const searchTerm = searchOptions.caseSensitive ? term : term.toLowerCase();
+    const searchStringLine = searchOptions.caseSensitive ? stringLine : stringLine.toLowerCase();
+
+    let resultIndex = -1;
+    if (searchOptions.regex) {
+      const searchRegex = RegExp(searchTerm, 'g');
+      let foundTerm: RegExpExecArray | null;
+      if (isReverseSearch) {
+        // This loop will get the resultIndex of the _last_ regex match in the range 0..offset
+        while (foundTerm = searchRegex.exec(searchStringLine.slice(0, offset))) {
+          resultIndex = searchRegex.lastIndex - foundTerm[0].length;
+          term = foundTerm[0];
+          searchRegex.lastIndex -= (term.length - 1);
+        }
+      } else {
+        foundTerm = searchRegex.exec(searchStringLine.slice(offset));
+        if (foundTerm && foundTerm[0].length > 0) {
+          resultIndex = offset + (searchRegex.lastIndex - foundTerm[0].length);
+          term = foundTerm[0];
+        }
+      }
+    } else {
+      if (isReverseSearch) {
+        if (offset - searchTerm.length >= 0) {
+          resultIndex = searchStringLine.lastIndexOf(searchTerm, offset - searchTerm.length);
+        }
+      } else {
+        resultIndex = searchStringLine.indexOf(searchTerm, offset);
+      }
+    }
+
+    if (resultIndex >= 0) {
+      if (searchOptions.wholeWord && !this._isWholeWord(resultIndex, searchStringLine, term)) {
+        return;
+      }
+
+      // Adjust the row number and search index if needed since a "line" of text can span multiple
+      // rows
+      let startRowOffset = 0;
+      while (startRowOffset < offsets.length - 1 && resultIndex >= offsets[startRowOffset + 1]) {
+        startRowOffset++;
+      }
+      let endRowOffset = startRowOffset;
+      while (endRowOffset < offsets.length - 1 && resultIndex + term.length >= offsets[endRowOffset + 1]) {
+        endRowOffset++;
+      }
+      const startColOffset = resultIndex - offsets[startRowOffset];
+      const endColOffset = resultIndex + term.length - offsets[endRowOffset];
+      const startColIndex = this._stringLengthToBufferSize(row + startRowOffset, startColOffset);
+      const endColIndex = this._stringLengthToBufferSize(row + endRowOffset, endColOffset);
+      const size = endColIndex - startColIndex + terminal.cols * (endRowOffset - startRowOffset);
+
+      return {
+        term,
+        col: startColIndex,
+        row: row + startRowOffset,
+        size
+      };
+    }
+  }
+
+  private _stringLengthToBufferSize(row: number, offset: number): number {
+    const line = this._terminal!.buffer.active.getLine(row);
+    if (!line) {
+      return 0;
+    }
+    for (let i = 0; i < offset; i++) {
+      const cell = line.getCell(i);
+      if (!cell) {
+        break;
+      }
+      // Adjust the searchIndex to normalize emoji into single chars
+      const char = cell.getChars();
+      if (char.length > 1) {
+        offset -= char.length - 1;
+      }
+      // Adjust the searchIndex for empty characters following wide unicode
+      // chars (eg. CJK)
+      const nextCell = line.getCell(i + 1);
+      if (nextCell && nextCell.getWidth() === 0) {
+        offset++;
+      }
+    }
+    return offset;
+  }
+
+  private _bufferColsToStringOffset(startRow: number, cols: number): number {
+    const terminal = this._terminal!;
+    let lineIndex = startRow;
+    let offset = 0;
+    let line = terminal.buffer.active.getLine(lineIndex);
+    while (cols > 0 && line) {
+      for (let i = 0; i < cols && i < terminal.cols; i++) {
+        const cell = line.getCell(i);
+        if (!cell) {
+          break;
+        }
+        if (cell.getWidth()) {
+          // Treat null characters as whitespace to align with the translateToString API
+          offset += cell.getCode() === 0 ? 1 : cell.getChars().length;
+        }
+      }
+      lineIndex++;
+      line = terminal.buffer.active.getLine(lineIndex);
+      if (line && !line.isWrapped) {
+        break;
+      }
+      cols -= terminal.cols;
+    }
+    return offset;
+  }
+
+  /**
+   * Translates a buffer line to a string, including subsequent lines if they are wraps.
+   * Wide characters will count as two columns in the resulting string. This
+   * function is useful for getting the actual text underneath the raw selection
+   * position.
+   * @param lineIndex The index of the line being translated.
+   * @param trimRight Whether to trim whitespace to the right.
+   */
+  private _translateBufferLineToStringWithWrap(lineIndex: number, trimRight: boolean): LineCacheEntry {
+    const terminal = this._terminal!;
+    const strings = [];
+    const lineOffsets = [0];
+    let line = terminal.buffer.active.getLine(lineIndex);
+    while (line) {
+      const nextLine = terminal.buffer.active.getLine(lineIndex + 1);
+      const lineWrapsToNext = nextLine ? nextLine.isWrapped : false;
+      let string = line.translateToString(!lineWrapsToNext && trimRight);
+      if (lineWrapsToNext && nextLine) {
+        const lastCell = line.getCell(line.length - 1);
+        const lastCellIsNull = lastCell && lastCell.getCode() === 0 && lastCell.getWidth() === 1;
+        // a wide character wrapped to the next line
+        if (lastCellIsNull && nextLine.getCell(0)?.getWidth() === 2) {
+          string = string.slice(0, -1);
+        }
+      }
+      strings.push(string);
+      if (lineWrapsToNext) {
+        lineOffsets.push(lineOffsets[lineOffsets.length - 1] + string.length);
+      } else {
+        break;
+      }
+      lineIndex++;
+      line = nextLine;
+    }
+    return [strings.join(''), lineOffsets];
+  }
+
+  /**
+   * Selects and scrolls to a result.
+   * @param result The result to select.
+   * @returns Whether a result was selected.
+   */
+  private _selectResult(result: ISearchResult | undefined, options?: ISearchDecorationOptions, noScroll?: boolean): boolean {
+    const terminal = this._terminal!;
+    this._selectedDecoration.clear();
+    if (!result) {
+      terminal.clearSelection();
+      return false;
+    }
+    terminal.select(result.col, result.row, result.size);
+    if (options) {
+      const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row);
+      if (marker) {
+        const decoration = terminal.registerDecoration({
+          marker,
+          x: result.col,
+          width: result.size,
+          backgroundColor: options.activeMatchBackground,
+          layer: 'top',
+          overviewRulerOptions: {
+            color: options.activeMatchColorOverviewRuler
+          }
+        });
+        if (decoration) {
+          const disposables: IDisposable[] = [];
+          disposables.push(marker);
+          disposables.push(decoration.onRender((e) => this._applyStyles(e, options.activeMatchBorder, true)));
+          disposables.push(decoration.onDispose(() => disposeArray(disposables)));
+          this._selectedDecoration.value = { decoration, match: result, dispose() { decoration.dispose(); } };
+        }
+      }
+    }
+
+    if (!noScroll) {
+      // If it is not in the viewport then we scroll else it just gets selected
+      if (result.row >= (terminal.buffer.active.viewportY + terminal.rows) || result.row < terminal.buffer.active.viewportY) {
+        let scroll = result.row - terminal.buffer.active.viewportY;
+        scroll -= Math.floor(terminal.rows / 2);
+        terminal.scrollLines(scroll);
+      }
+    }
+    return true;
+  }
+
+  /**
+   * Applies styles to the decoration when it is rendered.
+   * @param element The decoration's element.
+   * @param borderColor The border color to apply.
+   * @param isActiveResult Whether the element is part of the active search result.
+   * @returns
+   */
+  private _applyStyles(element: HTMLElement, borderColor: string | undefined, isActiveResult: boolean): void {
+    if (!element.classList.contains('xterm-find-result-decoration')) {
+      element.classList.add('xterm-find-result-decoration');
+      if (borderColor) {
+        element.style.outline = `1px solid ${borderColor}`;
+      }
+    }
+    if (isActiveResult) {
+      element.classList.add('xterm-find-active-result-decoration');
+    }
+  }
+
+  /**
+   * Creates a decoration for the result and applies styles
+   * @param result the search result for which to create the decoration
+   * @param options the options for the decoration
+   * @returns the {@link IDecoration} or undefined if the marker has already been disposed of
+   */
+  private _createResultDecoration(result: ISearchResult, options: ISearchDecorationOptions): IDecoration | undefined {
+    const terminal = this._terminal!;
+    const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row);
+    if (!marker) {
+      return undefined;
+    }
+    const findResultDecoration = terminal.registerDecoration({
+      marker,
+      x: result.col,
+      width: result.size,
+      backgroundColor: options.matchBackground,
+      overviewRulerOptions: this._highlightedLines.has(marker.line) ? undefined : {
+        color: options.matchOverviewRuler,
+        position: 'center'
+      }
+    });
+    if (findResultDecoration) {
+      const disposables: IDisposable[] = [];
+      disposables.push(marker);
+      disposables.push(findResultDecoration.onRender((e) => this._applyStyles(e, options.matchBorder, false)));
+      disposables.push(findResultDecoration.onDispose(() => disposeArray(disposables)));
+    }
+    return findResultDecoration;
+  }
+}

web/node_modules/@xterm/addon-search/typings/addon-search.d.ts

@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Terminal, ITerminalAddon, IEvent } from '@xterm/xterm';
+
+declare module '@xterm/addon-search' {
+  /**
+   * Options for a search.
+   */
+  export interface ISearchOptions {
+    /**
+     * Whether the search term is a regex.
+     */
+    regex?: boolean;
+
+    /**
+     * Whether to search for a whole word, the result is only valid if it's
+     * surrounded in "non-word" characters such as `_`, `(`, `)` or space.
+     */
+    wholeWord?: boolean;
+
+    /**
+     * Whether the search is case sensitive.
+     */
+    caseSensitive?: boolean;
+
+    /**
+     * Whether to do an incremental search, this will expand the selection if it
+     * still matches the term the user typed. Note that this only affects
+     * `findNext`, not `findPrevious`.
+     */
+    incremental?: boolean;
+
+    /**
+     * When set, will highlight all instances of the word on search and show
+     * them in the overview ruler if it's enabled.
+     */
+    decorations?: ISearchDecorationOptions;
+  }
+
+  /**
+   * Options for showing decorations when searching.
+   */
+  interface ISearchDecorationOptions {
+    /**
+     * The background color of a match, this must use #RRGGBB format.
+     */
+    matchBackground?: string;
+
+    /**
+     * The border color of a match.
+     */
+    matchBorder?: string;
+
+    /**
+     * The overview ruler color of a match.
+     */
+    matchOverviewRuler: string;
+
+    /**
+     * The background color for the currently active match, this must use #RRGGBB format.
+     */
+    activeMatchBackground?: string;
+
+    /**
+     * The border color of the currently active match.
+     */
+    activeMatchBorder?: string;
+
+    /**
+     * The overview ruler color of the currently active match.
+     */
+    activeMatchColorOverviewRuler: string;
+  }
+
+  /**
+   * Options for the search addon.
+   */
+  export interface ISearchAddonOptions {
+    /**
+     * Max number of matches highlighted when decorations are enabled.
+     * Defaults to 1000 highlighted matches
+     */
+    highlightLimit: number
+  }
+
+  /**
+   * An xterm.js addon that provides search functionality.
+   */
+  export class SearchAddon implements ITerminalAddon {
+
+    /**
+     * Creates a new search addon.
+     * @param options Options for the search addon.
+     */
+    constructor(options?: Partial<ISearchAddonOptions>);
+
+    /**
+     * Activates the addon
+     * @param terminal The terminal the addon is being loaded in.
+     */
+    public activate(terminal: Terminal): void;
+
+    /**
+     * Disposes the addon.
+     */
+    public dispose(): void;
+
+    /**
+     * Search forwards for the next result that matches the search term and
+     * options.
+     * @param term The search term.
+     * @param searchOptions The options for the search.
+     */
+    public findNext(term: string, searchOptions?: ISearchOptions): boolean;
+
+    /**
+     * Search backwards for the previous result that matches the search term and
+     * options.
+     * @param term The search term.
+     * @param searchOptions The options for the search.
+     */
+    public findPrevious(term: string, searchOptions?: ISearchOptions): boolean;
+
+    /**
+     * Clears the decorations and selection
+     */
+    public clearDecorations(): void;
+
+    /**
+     * Clears the active result decoration, this decoration is applied on top of the selection so
+     * removing it will reveal the selection underneath. This is intended to be called on the search
+     * textarea's `blur` event.
+     */
+    public clearActiveDecoration(): void;
+
+    /**
+     * When decorations are enabled, fires when
+     * the search results change.
+     * @returns -1 for resultIndex when the threshold of matches is exceeded.
+     */
+    readonly onDidChangeResults: IEvent<{ resultIndex: number, resultCount: number }>;
+  }
+}

web/node_modules/@xterm/addon-webgl/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2018, The xterm.js authors (https://github.com/xtermjs/xterm.js)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

web/node_modules/@xterm/addon-webgl/README.md

@@ -0,0 +1,41 @@
+## @xterm/addon-webgl
+
+An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables a WebGL2-based renderer. This addon requires xterm.js v4+.
+
+### Install
+
+```bash
+npm install --save @xterm/addon-webgl
+```
+
+### Usage
+
+```ts
+import { Terminal } from '@xterm/xterm';
+import { WebglAddon } from '@xterm/addon-webgl';
+
+const terminal = new Terminal();
+terminal.open(element);
+terminal.loadAddon(new WebglAddon());
+```
+
+See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/addon-webgl/typings/addon-webgl.d.ts) for more advanced usage.
+
+### Handling Context Loss
+
+The browser may drop WebGL contexts for various reasons like OOM or after the system has been suspended. There is an API exposed that fires the `webglcontextlost` event fired on the canvas so embedders can handle it however they wish. An easy, but suboptimal way, to handle this is by disposing of WebglAddon when the event fires:
+
+```ts
+const terminal = new Terminal();
+const addon = new WebglAddon();
+addon.onContextLoss(e => {
+  addon.dispose();
+});
+terminal.loadAddon(addon);
+```
+
+Read more about handling WebGL context losses on the [Khronos wiki](https://www.khronos.org/webgl/wiki/HandlingContextLost).
+
+### See also
+
+- [@xterm/addon-canvas](https://www.npmjs.com/package/@xterm/addon-canvas) A renderer for xterm.js that uses a 2d canvas that can be used as a fallback when WebGL is not available

web/node_modules/@xterm/addon-webgl/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@xterm/addon-webgl",
+  "version": "0.18.0",
+  "author": {
+    "name": "The xterm.js authors",
+    "url": "https://xtermjs.org/"
+  },
+  "main": "lib/addon-webgl.js",
+  "types": "typings/addon-webgl.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-webgl",
+  "license": "MIT",
+  "keywords": [
+    "terminal",
+    "webgl",
+    "xterm",
+    "xterm.js"
+  ],
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p .",
+    "prepackage": "npm run build",
+    "package": "../../node_modules/.bin/webpack",
+    "prepublishOnly": "npm run package",
+    "start-server-only": "node ../../demo/start-server-only"
+  },
+  "peerDependencies": {
+    "@xterm/xterm": "^5.0.0"
+  }
+}

web/node_modules/@xterm/addon-webgl/src/GlyphRenderer.ts

@@ -0,0 +1,391 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { TextureAtlas } from 'browser/renderer/shared/TextureAtlas';
+import { IRasterizedGlyph, IRenderDimensions, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { NULL_CELL_CODE } from 'common/buffer/Constants';
+import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Terminal } from '@xterm/xterm';
+import { IRenderModel, IWebGL2RenderingContext, IWebGLVertexArrayObject } from './Types';
+import { createProgram, GLTexture, PROJECTION_MATRIX } from './WebglUtils';
+import type { IOptionsService } from 'common/services/Services';
+
+interface IVertices {
+  attributes: Float32Array;
+  /**
+   * These buffers are the ones used to bind to WebGL, the reason there are
+   * multiple is to allow double buffering to work as you cannot modify the
+   * buffer while it's being used by the GPU. Having multiple lets us start
+   * working on the next frame.
+   */
+  attributesBuffers: Float32Array[];
+  count: number;
+}
+
+const enum VertexAttribLocations {
+  UNIT_QUAD = 0,
+  CELL_POSITION = 1,
+  OFFSET = 2,
+  SIZE = 3,
+  TEXPAGE = 4,
+  TEXCOORD = 5,
+  TEXSIZE = 6
+}
+
+const vertexShaderSource = `#version 300 es
+layout (location = ${VertexAttribLocations.UNIT_QUAD}) in vec2 a_unitquad;
+layout (location = ${VertexAttribLocations.CELL_POSITION}) in vec2 a_cellpos;
+layout (location = ${VertexAttribLocations.OFFSET}) in vec2 a_offset;
+layout (location = ${VertexAttribLocations.SIZE}) in vec2 a_size;
+layout (location = ${VertexAttribLocations.TEXPAGE}) in float a_texpage;
+layout (location = ${VertexAttribLocations.TEXCOORD}) in vec2 a_texcoord;
+layout (location = ${VertexAttribLocations.TEXSIZE}) in vec2 a_texsize;
+
+uniform mat4 u_projection;
+uniform vec2 u_resolution;
+
+out vec2 v_texcoord;
+flat out int v_texpage;
+
+void main() {
+  vec2 zeroToOne = (a_offset / u_resolution) + a_cellpos + (a_unitquad * a_size);
+  gl_Position = u_projection * vec4(zeroToOne, 0.0, 1.0);
+  v_texpage = int(a_texpage);
+  v_texcoord = a_texcoord + a_unitquad * a_texsize;
+}`;
+
+function createFragmentShaderSource(maxFragmentShaderTextureUnits: number): string {
+  let textureConditionals = '';
+  for (let i = 1; i < maxFragmentShaderTextureUnits; i++) {
+    textureConditionals += ` else if (v_texpage == ${i}) { outColor = texture(u_texture[${i}], v_texcoord); }`;
+  }
+  return (`#version 300 es
+precision lowp float;
+
+in vec2 v_texcoord;
+flat in int v_texpage;
+
+uniform sampler2D u_texture[${maxFragmentShaderTextureUnits}];
+
+out vec4 outColor;
+
+void main() {
+  if (v_texpage == 0) {
+    outColor = texture(u_texture[0], v_texcoord);
+  } ${textureConditionals}
+}`);
+}
+
+const INDICES_PER_CELL = 11;
+const BYTES_PER_CELL = INDICES_PER_CELL * Float32Array.BYTES_PER_ELEMENT;
+const CELL_POSITION_INDICES = 2;
+
+// Work variables to avoid garbage collection
+let $i = 0;
+let $glyph: IRasterizedGlyph | undefined = undefined;
+let $leftCellPadding = 0;
+let $clippedPixels = 0;
+
+export class GlyphRenderer extends Disposable {
+  private readonly _program: WebGLProgram;
+  private readonly _vertexArrayObject: IWebGLVertexArrayObject;
+  private readonly _projectionLocation: WebGLUniformLocation;
+  private readonly _resolutionLocation: WebGLUniformLocation;
+  private readonly _textureLocation: WebGLUniformLocation;
+  private readonly _atlasTextures: GLTexture[];
+  private readonly _attributesBuffer: WebGLBuffer;
+
+  private _atlas: ITextureAtlas | undefined;
+  private _activeBuffer: number = 0;
+  private readonly _vertices: IVertices = {
+    count: 0,
+    attributes: new Float32Array(0),
+    attributesBuffers: [
+      new Float32Array(0),
+      new Float32Array(0)
+    ]
+  };
+
+  constructor(
+    private readonly _terminal: Terminal,
+    private readonly _gl: IWebGL2RenderingContext,
+    private _dimensions: IRenderDimensions,
+    private readonly _optionsService: IOptionsService
+  ) {
+    super();
+
+    const gl = this._gl;
+
+    if (TextureAtlas.maxAtlasPages === undefined) {
+      // Typically 8 or 16
+      TextureAtlas.maxAtlasPages = Math.min(32, throwIfFalsy(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS) as number | null));
+      // Almost all clients will support >= 4096
+      TextureAtlas.maxTextureSize = throwIfFalsy(gl.getParameter(gl.MAX_TEXTURE_SIZE) as number | null);
+    }
+
+    this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, createFragmentShaderSource(TextureAtlas.maxAtlasPages)));
+    this.register(toDisposable(() => gl.deleteProgram(this._program)));
+
+    // Uniform locations
+    this._projectionLocation = throwIfFalsy(gl.getUniformLocation(this._program, 'u_projection'));
+    this._resolutionLocation = throwIfFalsy(gl.getUniformLocation(this._program, 'u_resolution'));
+    this._textureLocation = throwIfFalsy(gl.getUniformLocation(this._program, 'u_texture'));
+
+    // Create and set the vertex array object
+    this._vertexArrayObject = gl.createVertexArray();
+    gl.bindVertexArray(this._vertexArrayObject);
+
+    // Setup a_unitquad, this defines the 4 vertices of a rectangle
+    const unitQuadVertices = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
+    const unitQuadVerticesBuffer = gl.createBuffer();
+    this.register(toDisposable(() => gl.deleteBuffer(unitQuadVerticesBuffer)));
+    gl.bindBuffer(gl.ARRAY_BUFFER, unitQuadVerticesBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, unitQuadVertices, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(VertexAttribLocations.UNIT_QUAD);
+    gl.vertexAttribPointer(VertexAttribLocations.UNIT_QUAD, 2, this._gl.FLOAT, false, 0, 0);
+
+    // Setup the unit quad element array buffer, this points to indices in
+    // unitQuadVertices to allow is to draw 2 triangles from the vertices via a
+    // triangle strip
+    const unitQuadElementIndices = new Uint8Array([0, 1, 2, 3]);
+    const elementIndicesBuffer = gl.createBuffer();
+    this.register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer)));
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementIndicesBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, unitQuadElementIndices, gl.STATIC_DRAW);
+
+    // Setup attributes
+    this._attributesBuffer = throwIfFalsy(gl.createBuffer());
+    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.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.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.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.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.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.vertexAttribDivisor(VertexAttribLocations.CELL_POSITION, 1);
+
+    // Setup static uniforms
+    gl.useProgram(this._program);
+    const textureUnits = new Int32Array(TextureAtlas.maxAtlasPages);
+    for (let i = 0; i < TextureAtlas.maxAtlasPages; i++) {
+      textureUnits[i] = i;
+    }
+    gl.uniform1iv(this._textureLocation, textureUnits);
+    gl.uniformMatrix4fv(this._projectionLocation, false, PROJECTION_MATRIX);
+
+    // Setup 1x1 red pixel textures for all potential atlas pages, if one of these invalid textures
+    // is ever drawn it will show characters as red rectangles.
+    this._atlasTextures = [];
+    for (let i = 0; i < TextureAtlas.maxAtlasPages; i++) {
+      const glTexture = new GLTexture(throwIfFalsy(gl.createTexture()));
+      this.register(toDisposable(() => gl.deleteTexture(glTexture.texture)));
+      gl.activeTexture(gl.TEXTURE0 + i);
+      gl.bindTexture(gl.TEXTURE_2D, glTexture.texture);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 0, 0, 255]));
+      this._atlasTextures[i] = glTexture;
+    }
+
+    // Allow drawing of transparent texture
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+
+    // Set viewport
+    this.handleResize();
+  }
+
+  public beginFrame(): boolean {
+    return this._atlas ? this._atlas.beginFrame() : true;
+  }
+
+  public updateCell(x: number, y: number, code: number, bg: number, fg: number, ext: number, chars: string, width: number, lastBg: number): void {
+    // Since this function is called for every cell (`rows*cols`), it must be very optimized. It
+    // should not instantiate any variables unless a new glyph is drawn to the cache where the
+    // slight slowdown is acceptable for the developer ergonomics provided as it's a once of for
+    // each glyph.
+    this._updateCell(this._vertices.attributes, x, y, code, bg, fg, ext, chars, width, lastBg);
+  }
+
+  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;
+
+    // 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);
+      return;
+    }
+
+    if (!this._atlas) {
+      return;
+    }
+
+    // Get the glyph
+    if (chars && chars.length > 1) {
+      $glyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg, ext, false);
+    } else {
+      $glyph = this._atlas.getRasterizedGlyph(code, bg, fg, ext, false);
+    }
+
+    $leftCellPadding = Math.floor((this._dimensions.device.cell.width - this._dimensions.device.char.width) / 2);
+    if (bg !== lastBg && $glyph.offset.x > $leftCellPadding) {
+      $clippedPixels = $glyph.offset.x - $leftCellPadding;
+      // a_origin
+      array[$i    ] = -($glyph.offset.x - $clippedPixels) + this._dimensions.device.char.left;
+      array[$i + 1] = -$glyph.offset.y + this._dimensions.device.char.top;
+      // a_size
+      array[$i + 2] = ($glyph.size.x - $clippedPixels) / this._dimensions.device.canvas.width;
+      array[$i + 3] = $glyph.size.y / this._dimensions.device.canvas.height;
+      // a_texpage
+      array[$i + 4] = $glyph.texturePage;
+      // a_texcoord
+      array[$i + 5] = $glyph.texturePositionClipSpace.x + $clippedPixels / this._atlas.pages[$glyph.texturePage].canvas.width;
+      array[$i + 6] = $glyph.texturePositionClipSpace.y;
+      // a_texsize
+      array[$i + 7] = $glyph.sizeClipSpace.x - $clippedPixels / this._atlas.pages[$glyph.texturePage].canvas.width;
+      array[$i + 8] = $glyph.sizeClipSpace.y;
+    } else {
+      // a_origin
+      array[$i    ] = -$glyph.offset.x + this._dimensions.device.char.left;
+      array[$i + 1] = -$glyph.offset.y + this._dimensions.device.char.top;
+      // a_size
+      array[$i + 2] = $glyph.size.x / this._dimensions.device.canvas.width;
+      array[$i + 3] = $glyph.size.y / this._dimensions.device.canvas.height;
+      // a_texpage
+      array[$i + 4] = $glyph.texturePage;
+      // a_texcoord
+      array[$i + 5] = $glyph.texturePositionClipSpace.x;
+      array[$i + 6] = $glyph.texturePositionClipSpace.y;
+      // a_texsize
+      array[$i + 7] = $glyph.sizeClipSpace.x;
+      array[$i + 8] = $glyph.sizeClipSpace.y;
+    }
+    // a_cellpos only changes on resize
+
+    // Reduce scale horizontally for wide glyphs printed in cells that would overlap with the
+    // following cell (ie. the width is not 2).
+    if (this._optionsService.rawOptions.rescaleOverlappingGlyphs) {
+      if (allowRescaling(code, width, $glyph.size.x, this._dimensions.device.cell.width)) {
+        array[$i + 2] = (this._dimensions.device.cell.width - 1) / this._dimensions.device.canvas.width; // - 1 to improve readability
+      }
+    }
+  }
+
+  public clear(): void {
+    const terminal = this._terminal;
+    const newCount = terminal.cols * terminal.rows * INDICES_PER_CELL;
+
+    // Clear vertices
+    if (this._vertices.count !== newCount) {
+      this._vertices.attributes = new Float32Array(newCount);
+    } else {
+      this._vertices.attributes.fill(0);
+    }
+    let i = 0;
+    for (; i < this._vertices.attributesBuffers.length; i++) {
+      if (this._vertices.count !== newCount) {
+        this._vertices.attributesBuffers[i] = new Float32Array(newCount);
+      } else {
+        this._vertices.attributesBuffers[i].fill(0);
+      }
+    }
+    this._vertices.count = newCount;
+    i = 0;
+    for (let y = 0; y < terminal.rows; y++) {
+      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;
+      }
+    }
+  }
+
+  public handleResize(): void {
+    const gl = this._gl;
+    gl.useProgram(this._program);
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+    gl.uniform2f(this._resolutionLocation, gl.canvas.width, gl.canvas.height);
+    this.clear();
+  }
+
+  public render(renderModel: IRenderModel): void {
+    if (!this._atlas) {
+      return;
+    }
+
+    const gl = this._gl;
+
+    gl.useProgram(this._program);
+    gl.bindVertexArray(this._vertexArrayObject);
+
+    // Alternate buffers each frame as the active buffer gets locked while it's in use by the GPU
+    this._activeBuffer = (this._activeBuffer + 1) % 2;
+    const activeBuffer = this._vertices.attributesBuffers[this._activeBuffer];
+
+    // Copy data for each cell of each line up to its line length (the last non-whitespace cell)
+    // from the attributes buffer into activeBuffer, which is the one that gets bound to the GPU.
+    // The reasons for this are as follows:
+    // - So the active buffer can be alternated so we don't get blocked on rendering finishing
+    // - To copy either the normal attributes buffer or the selection attributes buffer when there
+    //   is a selection
+    // - 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);
+      activeBuffer.set(sub, bufferLength);
+      bufferLength += sub.length;
+    }
+
+    // Bind the attributes buffer
+    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
+    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);
+      }
+    }
+
+    // Draw the viewport
+    gl.drawElementsInstanced(gl.TRIANGLE_STRIP, 4, gl.UNSIGNED_BYTE, 0, bufferLength / INDICES_PER_CELL);
+  }
+
+  public setAtlas(atlas: ITextureAtlas): void {
+    this._atlas = atlas;
+    for (const glTexture of this._atlasTextures) {
+      glTexture.version = -1;
+    }
+  }
+
+  private _bindAtlasPageTexture(gl: IWebGL2RenderingContext, atlas: ITextureAtlas, i: number): void {
+    gl.activeTexture(gl.TEXTURE0 + i);
+    gl.bindTexture(gl.TEXTURE_2D, this._atlasTextures[i].texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, atlas.pages[i].canvas);
+    gl.generateMipmap(gl.TEXTURE_2D);
+    this._atlasTextures[i].version = atlas.pages[i].version;
+  }
+
+  public setDimensions(dimensions: IRenderDimensions): void {
+    this._dimensions = dimensions;
+  }
+}

web/node_modules/@xterm/addon-webgl/src/RectangleRenderer.ts

@@ -0,0 +1,382 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
+import { IThemeService } from 'browser/services/Services';
+import { ReadonlyColorSet } from 'browser/Types';
+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 { IRenderModel, IWebGL2RenderingContext, IWebGLVertexArrayObject } from './Types';
+import { createProgram, expandFloat32Array, PROJECTION_MATRIX } from './WebglUtils';
+
+const enum VertexAttribLocations {
+  POSITION = 0,
+  SIZE = 1,
+  COLOR = 2,
+  UNIT_QUAD = 3
+}
+
+const vertexShaderSource = `#version 300 es
+layout (location = ${VertexAttribLocations.POSITION}) in vec2 a_position;
+layout (location = ${VertexAttribLocations.SIZE}) in vec2 a_size;
+layout (location = ${VertexAttribLocations.COLOR}) in vec4 a_color;
+layout (location = ${VertexAttribLocations.UNIT_QUAD}) in vec2 a_unitquad;
+
+uniform mat4 u_projection;
+
+out vec4 v_color;
+
+void main() {
+  vec2 zeroToOne = a_position + (a_unitquad * a_size);
+  gl_Position = u_projection * vec4(zeroToOne, 0.0, 1.0);
+  v_color = a_color;
+}`;
+
+const fragmentShaderSource = `#version 300 es
+precision lowp float;
+
+in vec4 v_color;
+
+out vec4 outColor;
+
+void main() {
+  outColor = v_color;
+}`;
+
+const INDICES_PER_RECTANGLE = 8;
+const BYTES_PER_RECTANGLE = INDICES_PER_RECTANGLE * Float32Array.BYTES_PER_ELEMENT;
+
+const INITIAL_BUFFER_RECTANGLE_CAPACITY = 20 * INDICES_PER_RECTANGLE;
+
+class Vertices {
+  public attributes: Float32Array;
+  public count: number;
+
+  constructor() {
+    this.attributes = new Float32Array(INITIAL_BUFFER_RECTANGLE_CAPACITY);
+    this.count = 0;
+  }
+}
+
+// Work variables to avoid garbage collection
+let $rgba = 0;
+let $x1 = 0;
+let $y1 = 0;
+let $r = 0;
+let $g = 0;
+let $b = 0;
+let $a = 0;
+
+export class RectangleRenderer extends Disposable {
+
+  private _program: WebGLProgram;
+  private _vertexArrayObject: IWebGLVertexArrayObject;
+  private _attributesBuffer: WebGLBuffer;
+  private _projectionLocation: WebGLUniformLocation;
+  private _bgFloat!: Float32Array;
+  private _cursorFloat!: Float32Array;
+
+  private _vertices: Vertices = new Vertices();
+  private _verticesCursor: Vertices = new Vertices();
+
+  constructor(
+    private _terminal: Terminal,
+    private _gl: IWebGL2RenderingContext,
+    private _dimensions: IRenderDimensions,
+    private readonly _themeService: IThemeService
+  ) {
+    super();
+
+    const gl = this._gl;
+
+    this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, fragmentShaderSource));
+    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);
+
+    // Setup a_unitquad, this defines the 4 vertices of a rectangle
+    const unitQuadVertices = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
+    const unitQuadVerticesBuffer = gl.createBuffer();
+    this.register(toDisposable(() => gl.deleteBuffer(unitQuadVerticesBuffer)));
+    gl.bindBuffer(gl.ARRAY_BUFFER, unitQuadVerticesBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, unitQuadVertices, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(VertexAttribLocations.UNIT_QUAD);
+    gl.vertexAttribPointer(VertexAttribLocations.UNIT_QUAD, 2, this._gl.FLOAT, false, 0, 0);
+
+    // Setup the unit quad element array buffer, this points to indices in
+    // unitQuadVertices to allow is to draw 2 triangles from the vertices via a
+    // triangle strip
+    const unitQuadElementIndices = new Uint8Array([0, 1, 2, 3]);
+    const elementIndicesBuffer = gl.createBuffer();
+    this.register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer)));
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementIndicesBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, unitQuadElementIndices, gl.STATIC_DRAW);
+
+    // Setup attributes
+    this._attributesBuffer = throwIfFalsy(gl.createBuffer());
+    this.register(toDisposable(() => gl.deleteBuffer(this._attributesBuffer)));
+    gl.bindBuffer(gl.ARRAY_BUFFER, this._attributesBuffer);
+    gl.enableVertexAttribArray(VertexAttribLocations.POSITION);
+    gl.vertexAttribPointer(VertexAttribLocations.POSITION, 2, gl.FLOAT, false, BYTES_PER_RECTANGLE, 0);
+    gl.vertexAttribDivisor(VertexAttribLocations.POSITION, 1);
+    gl.enableVertexAttribArray(VertexAttribLocations.SIZE);
+    gl.vertexAttribPointer(VertexAttribLocations.SIZE, 2, gl.FLOAT, false, BYTES_PER_RECTANGLE, 2 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribDivisor(VertexAttribLocations.SIZE, 1);
+    gl.enableVertexAttribArray(VertexAttribLocations.COLOR);
+    gl.vertexAttribPointer(VertexAttribLocations.COLOR, 4, gl.FLOAT, false, BYTES_PER_RECTANGLE, 4 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribDivisor(VertexAttribLocations.COLOR, 1);
+
+    this._updateCachedColors(_themeService.colors);
+    this.register(this._themeService.onChangeColors(e => {
+      this._updateCachedColors(e);
+      this._updateViewportRectangle();
+    }));
+  }
+
+  public renderBackgrounds(): void {
+    this._renderVertices(this._vertices);
+  }
+
+  public renderCursor(): void {
+    this._renderVertices(this._verticesCursor);
+  }
+
+  private _renderVertices(vertices: Vertices): void {
+    const gl = this._gl;
+
+    gl.useProgram(this._program);
+
+    gl.bindVertexArray(this._vertexArrayObject);
+
+    gl.uniformMatrix4fv(this._projectionLocation, false, PROJECTION_MATRIX);
+
+    // Bind attributes buffer and draw
+    gl.bindBuffer(gl.ARRAY_BUFFER, this._attributesBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices.attributes, gl.DYNAMIC_DRAW);
+    gl.drawElementsInstanced(this._gl.TRIANGLE_STRIP, 4, gl.UNSIGNED_BYTE, 0, vertices.count);
+  }
+
+  public handleResize(): void {
+    this._updateViewportRectangle();
+  }
+
+  public setDimensions(dimensions: IRenderDimensions): void {
+    this._dimensions = dimensions;
+  }
+
+  private _updateCachedColors(colors: ReadonlyColorSet): void {
+    this._bgFloat = this._colorToFloat32Array(colors.background);
+    this._cursorFloat = this._colorToFloat32Array(colors.cursor);
+  }
+
+  private _updateViewportRectangle(): void {
+    // Set first rectangle that clears the screen
+    this._addRectangleFloat(
+      this._vertices.attributes,
+      0,
+      0,
+      0,
+      this._terminal.cols * this._dimensions.device.cell.width,
+      this._terminal.rows * this._dimensions.device.cell.height,
+      this._bgFloat
+    );
+  }
+
+  public updateBackgrounds(model: IRenderModel): void {
+    const terminal = this._terminal;
+    const vertices = this._vertices;
+
+    // Declare variable ahead of time to avoid garbage collection
+    let rectangleCount = 1;
+    let y: number;
+    let x: number;
+    let currentStartX: number;
+    let currentBg: number;
+    let currentFg: number;
+    let currentInverse: boolean;
+    let modelIndex: number;
+    let bg: number;
+    let fg: number;
+    let inverse: boolean;
+    let offset: number;
+
+    for (y = 0; y < terminal.rows; y++) {
+      currentStartX = -1;
+      currentBg = 0;
+      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];
+        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
+          if (currentBg !== 0 || (currentInverse && currentFg !== 0)) {
+            offset = rectangleCount++ * INDICES_PER_RECTANGLE;
+            this._updateRectangle(vertices, offset, currentFg, currentBg, currentStartX, x, y);
+          }
+          currentStartX = x;
+          currentBg = bg;
+          currentFg = fg;
+          currentInverse = inverse;
+        }
+      }
+      // Finish rectangle if it's still going
+      if (currentBg !== 0 || (currentInverse && currentFg !== 0)) {
+        offset = rectangleCount++ * INDICES_PER_RECTANGLE;
+        this._updateRectangle(vertices, offset, currentFg, currentBg, currentStartX, terminal.cols, y);
+      }
+    }
+    vertices.count = rectangleCount;
+  }
+
+  public updateCursor(model: IRenderModel): void {
+    const vertices = this._verticesCursor;
+    const cursor = model.cursor;
+    if (!cursor || cursor.style === 'block') {
+      vertices.count = 0;
+      return;
+    }
+
+    let offset: number;
+    let rectangleCount = 0;
+
+    if (cursor.style === 'bar' || cursor.style === 'outline') {
+      // Left edge
+      offset = rectangleCount++ * INDICES_PER_RECTANGLE;
+      this._addRectangleFloat(
+        vertices.attributes,
+        offset,
+        cursor.x * this._dimensions.device.cell.width,
+        cursor.y * this._dimensions.device.cell.height,
+        cursor.style === 'bar' ? cursor.dpr * cursor.cursorWidth : cursor.dpr,
+        this._dimensions.device.cell.height,
+        this._cursorFloat
+      );
+    }
+    if (cursor.style === 'underline' || cursor.style === 'outline') {
+      // Bottom edge
+      offset = rectangleCount++ * INDICES_PER_RECTANGLE;
+      this._addRectangleFloat(
+        vertices.attributes,
+        offset,
+        cursor.x * this._dimensions.device.cell.width,
+        (cursor.y + 1) * this._dimensions.device.cell.height - cursor.dpr,
+        cursor.width * this._dimensions.device.cell.width,
+        cursor.dpr,
+        this._cursorFloat
+      );
+    }
+    if (cursor.style === 'outline') {
+      // Top edge
+      offset = rectangleCount++ * INDICES_PER_RECTANGLE;
+      this._addRectangleFloat(
+        vertices.attributes,
+        offset,
+        cursor.x * this._dimensions.device.cell.width,
+        cursor.y * this._dimensions.device.cell.height,
+        cursor.width * this._dimensions.device.cell.width,
+        cursor.dpr,
+        this._cursorFloat
+      );
+      // Right edge
+      offset = rectangleCount++ * INDICES_PER_RECTANGLE;
+      this._addRectangleFloat(
+        vertices.attributes,
+        offset,
+        (cursor.x + cursor.width) * this._dimensions.device.cell.width - cursor.dpr,
+        cursor.y * this._dimensions.device.cell.height,
+        cursor.dpr,
+        this._dimensions.device.cell.height,
+        this._cursorFloat
+      );
+    }
+
+    vertices.count = rectangleCount;
+  }
+
+  private _updateRectangle(vertices: Vertices, offset: number, fg: number, bg: number, startX: number, endX: number, y: number): void {
+    if (fg & FgFlags.INVERSE) {
+      switch (fg & Attributes.CM_MASK) {
+        case Attributes.CM_P16:
+        case Attributes.CM_P256:
+          $rgba = this._themeService.colors.ansi[fg & Attributes.PCOLOR_MASK].rgba;
+          break;
+        case Attributes.CM_RGB:
+          $rgba = (fg & Attributes.RGB_MASK) << 8;
+          break;
+        case Attributes.CM_DEFAULT:
+        default:
+          $rgba = this._themeService.colors.foreground.rgba;
+      }
+    } else {
+      switch (bg & Attributes.CM_MASK) {
+        case Attributes.CM_P16:
+        case Attributes.CM_P256:
+          $rgba = this._themeService.colors.ansi[bg & Attributes.PCOLOR_MASK].rgba;
+          break;
+        case Attributes.CM_RGB:
+          $rgba = (bg & Attributes.RGB_MASK) << 8;
+          break;
+        case Attributes.CM_DEFAULT:
+        default:
+          $rgba = this._themeService.colors.background.rgba;
+      }
+    }
+
+    if (vertices.attributes.length < offset + 4) {
+      vertices.attributes = expandFloat32Array(vertices.attributes, this._terminal.rows * this._terminal.cols * INDICES_PER_RECTANGLE);
+    }
+    $x1 = startX * this._dimensions.device.cell.width;
+    $y1 = y * this._dimensions.device.cell.height;
+    $r = (($rgba >> 24) & 0xFF) / 255;
+    $g = (($rgba >> 16) & 0xFF) / 255;
+    $b = (($rgba >> 8 ) & 0xFF) / 255;
+    $a = 1;
+
+    this._addRectangle(vertices.attributes, offset, $x1, $y1, (endX - startX) * this._dimensions.device.cell.width, this._dimensions.device.cell.height, $r, $g, $b, $a);
+  }
+
+  private _addRectangle(array: Float32Array, offset: number, x1: number, y1: number, width: number, height: number, r: number, g: number, b: number, a: number): void {
+    array[offset    ] = x1 / this._dimensions.device.canvas.width;
+    array[offset + 1] = y1 / this._dimensions.device.canvas.height;
+    array[offset + 2] = width / this._dimensions.device.canvas.width;
+    array[offset + 3] = height / this._dimensions.device.canvas.height;
+    array[offset + 4] = r;
+    array[offset + 5] = g;
+    array[offset + 6] = b;
+    array[offset + 7] = a;
+  }
+
+  private _addRectangleFloat(array: Float32Array, offset: number, x1: number, y1: number, width: number, height: number, color: Float32Array): void {
+    array[offset    ] = x1 / this._dimensions.device.canvas.width;
+    array[offset + 1] = y1 / this._dimensions.device.canvas.height;
+    array[offset + 2] = width / this._dimensions.device.canvas.width;
+    array[offset + 3] = height / this._dimensions.device.canvas.height;
+    array[offset + 4] = color[0];
+    array[offset + 5] = color[1];
+    array[offset + 6] = color[2];
+    array[offset + 7] = color[3];
+  }
+
+  private _colorToFloat32Array(color: IColor): Float32Array {
+    return new Float32Array([
+      ((color.rgba >> 24) & 0xFF) / 255,
+      ((color.rgba >> 16) & 0xFF) / 255,
+      ((color.rgba >> 8 ) & 0xFF) / 255,
+      ((color.rgba      ) & 0xFF) / 255
+    ]);
+  }
+}

web/node_modules/@xterm/addon-webgl/src/RenderModel.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+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 COMBINED_CHAR_BIT_MASK = 0x80000000;
+
+export class RenderModel implements IRenderModel {
+  public cells: Uint32Array;
+  public lineLengths: Uint32Array;
+  public selection: ISelectionRenderModel;
+  public cursor?: ICursorRenderModel;
+
+  constructor() {
+    this.cells = new Uint32Array(0);
+    this.lineLengths = new Uint32Array(0);
+    this.selection = createSelectionRenderModel();
+  }
+
+  public resize(cols: number, rows: number): void {
+    const indexCount = cols * rows * RENDER_MODEL_INDICIES_PER_CELL;
+    if (indexCount !== this.cells.length) {
+      this.cells = new Uint32Array(indexCount);
+      this.lineLengths = new Uint32Array(rows);
+    }
+  }
+
+  public clear(): void {
+    this.cells.fill(0, 0);
+    this.lineLengths.fill(0, 0);
+  }
+}

web/node_modules/@xterm/addon-webgl/src/TypedArray.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+export type TypedArray = Uint8Array | Uint16Array | Uint32Array | Uint8ClampedArray | Int8Array | Int16Array | Int32Array | Float32Array | Float64Array;
+
+export function slice<T extends TypedArray>(array: T, start?: number, end?: number): T {
+  // all modern engines that support .slice
+  if (array.slice) {
+    return array.slice(start, end) as T;
+  }
+  return sliceFallback(array, start, end);
+}
+
+export function sliceFallback<T extends TypedArray>(array: T, start: number = 0, end: number = array.length): T {
+  if (start < 0) {
+    start = (array.length + start) % array.length;
+  }
+  if (end >= array.length) {
+    end = array.length;
+  } else {
+    end = (array.length + end) % array.length;
+  }
+  start = Math.min(start, end);
+
+  const result: T = new (array.constructor as any)(end - start);
+  for (let i = 0; i < end - start; ++i) {
+    result[i] = array[i + start];
+  }
+  return result;
+}

web/node_modules/@xterm/addon-webgl/src/Types.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
+import { CursorInactiveStyle, CursorStyle } from 'common/Types';
+
+export interface IRenderModel {
+  cells: Uint32Array;
+  lineLengths: Uint32Array;
+  selection: ISelectionRenderModel;
+  cursor?: ICursorRenderModel;
+}
+
+export interface ICursorRenderModel {
+  x: number;
+  y: number;
+  width: number;
+  style: CursorStyle | CursorInactiveStyle;
+  cursorWidth: number;
+  dpr: number;
+}
+
+export interface IWebGL2RenderingContext extends WebGLRenderingContext {
+  vertexAttribDivisor(index: number, divisor: number): void;
+  createVertexArray(): IWebGLVertexArrayObject;
+  bindVertexArray(vao: IWebGLVertexArrayObject): void;
+  drawElementsInstanced(mode: number, count: number, type: number, offset: number, instanceCount: number): void;
+}
+
+export interface IWebGLVertexArrayObject {
+}

web/node_modules/@xterm/addon-webgl/src/WebglAddon.ts

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import type { ITerminalAddon, Terminal } from '@xterm/xterm';
+import type { WebglAddon as IWebglApi } from '@xterm/addon-webgl';
+import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
+import { ITerminal } from 'browser/Types';
+import { EventEmitter, forwardEvent } from 'common/EventEmitter';
+import { Disposable, toDisposable } from 'common/Lifecycle';
+import { getSafariVersion, isSafari } from 'common/Platform';
+import { ICoreService, IDecorationService, ILogService, IOptionsService } from 'common/services/Services';
+import { IWebGL2RenderingContext } from './Types';
+import { WebglRenderer } from './WebglRenderer';
+import { setTraceLogger } from 'common/services/LogService';
+
+export class WebglAddon extends Disposable implements ITerminalAddon , IWebglApi {
+  private _terminal?: Terminal;
+  private _renderer?: WebglRenderer;
+
+  private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
+  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
+  private readonly _onRemoveTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onRemoveTextureAtlasCanvas = this._onRemoveTextureAtlasCanvas.event;
+  private readonly _onContextLoss = this.register(new EventEmitter<void>());
+  public readonly onContextLoss = this._onContextLoss.event;
+
+  constructor(
+    private _preserveDrawingBuffer?: boolean
+  ) {
+    if (isSafari && getSafariVersion() < 16) {
+      // Perform an extra check to determine if Webgl2 is manually enabled in developer settings
+      const contextAttributes = {
+        antialias: false,
+        depth: false,
+        preserveDrawingBuffer: true
+      };
+      const gl = document.createElement('canvas').getContext('webgl2', contextAttributes) as IWebGL2RenderingContext;
+      if (!gl) {
+        throw new Error('Webgl2 is only supported on Safari 16 and above');
+      }
+    }
+    super();
+  }
+
+  public activate(terminal: Terminal): void {
+    const core = (terminal as any)._core as ITerminal;
+    if (!terminal.element) {
+      this.register(core.onWillOpen(() => this.activate(terminal)));
+      return;
+    }
+
+    this._terminal = terminal;
+    const coreService: ICoreService = core.coreService;
+    const optionsService: IOptionsService = core.optionsService;
+
+    const unsafeCore = core as any;
+    const renderService: IRenderService = unsafeCore._renderService;
+    const characterJoinerService: ICharacterJoinerService = unsafeCore._characterJoinerService;
+    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;
+
+    // Set trace logger just in case it hasn't been yet which could happen when the addon is
+    // bundled separately to the core module
+    setTraceLogger(logService);
+
+    this._renderer = this.register(new WebglRenderer(
+      terminal,
+      characterJoinerService,
+      charSizeService,
+      coreBrowserService,
+      coreService,
+      decorationService,
+      optionsService,
+      themeService,
+      this._preserveDrawingBuffer
+    ));
+    this.register(forwardEvent(this._renderer.onContextLoss, this._onContextLoss));
+    this.register(forwardEvent(this._renderer.onChangeTextureAtlas, this._onChangeTextureAtlas));
+    this.register(forwardEvent(this._renderer.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas));
+    this.register(forwardEvent(this._renderer.onRemoveTextureAtlasCanvas, this._onRemoveTextureAtlasCanvas));
+    renderService.setRenderer(this._renderer);
+
+    this.register(toDisposable(() => {
+      const renderService: IRenderService = (this._terminal as any)._core._renderService;
+      renderService.setRenderer((this._terminal as any)._core._createRenderer());
+      renderService.handleResize(terminal.cols, terminal.rows);
+    }));
+  }
+
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._renderer?.textureAtlas;
+  }
+
+  public clearTextureAtlas(): void {
+    this._renderer?.clearTextureAtlas();
+  }
+}

web/node_modules/@xterm/addon-webgl/src/WebglRenderer.ts

@@ -0,0 +1,654 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { addDisposableDomListener } from 'browser/Lifecycle';
+import { ITerminal } from 'browser/Types';
+import { CellColorResolver } from 'browser/renderer/shared/CellColorResolver';
+import { acquireTextureAtlas, removeTerminalFromCache } from 'browser/renderer/shared/CharAtlasCache';
+import { CursorBlinkStateManager } from 'browser/renderer/shared/CursorBlinkStateManager';
+import { observeDevicePixelDimensions } from 'browser/renderer/shared/DevicePixelObserver';
+import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
+import { IRenderDimensions, IRenderer, IRequestRedrawEvent, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { EventEmitter, forwardEvent } from 'common/EventEmitter';
+import { Disposable, MutableDisposable, getDisposeArrayDisposable, toDisposable } from 'common/Lifecycle';
+import { CharData, IBufferLine, ICellData } from 'common/Types';
+import { AttributeData } from 'common/buffer/AttributeData';
+import { CellData } from 'common/buffer/CellData';
+import { Attributes, Content, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants';
+import { ICoreService, IDecorationService, 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 { IWebGL2RenderingContext } from './Types';
+import { LinkRenderLayer } from './renderLayer/LinkRenderLayer';
+import { IRenderLayer } from './renderLayer/Types';
+
+export class WebglRenderer extends Disposable implements IRenderer {
+  private _renderLayers: IRenderLayer[];
+  private _cursorBlinkStateManager: MutableDisposable<CursorBlinkStateManager> = new MutableDisposable();
+  private _charAtlasDisposable = this.register(new MutableDisposable());
+  private _charAtlas: ITextureAtlas | undefined;
+  private _devicePixelRatio: number;
+  private _observerDisposable = this.register(new MutableDisposable());
+
+  private _model: RenderModel = new RenderModel();
+  private _workCell: ICellData = new CellData();
+  private _workCell2: ICellData = new CellData();
+  private _cellColorResolver: CellColorResolver;
+
+  private _canvas: HTMLCanvasElement;
+  private _gl: IWebGL2RenderingContext;
+  private _rectangleRenderer: MutableDisposable<RectangleRenderer> = this.register(new MutableDisposable());
+  private _glyphRenderer: MutableDisposable<GlyphRenderer> = this.register(new MutableDisposable());
+
+  public readonly dimensions: IRenderDimensions;
+
+  private _core: ITerminal;
+  private _isAttached: boolean;
+  private _contextRestorationTimeout: number | undefined;
+
+  private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
+  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
+  private readonly _onRemoveTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  public readonly onRemoveTextureAtlasCanvas = this._onRemoveTextureAtlasCanvas.event;
+  private readonly _onRequestRedraw = this.register(new EventEmitter<IRequestRedrawEvent>());
+  public readonly onRequestRedraw = this._onRequestRedraw.event;
+  private readonly _onContextLoss = this.register(new EventEmitter<void>());
+  public readonly onContextLoss = this._onContextLoss.event;
+
+  constructor(
+    private _terminal: Terminal,
+    private readonly _characterJoinerService: ICharacterJoinerService,
+    private readonly _charSizeService: ICharSizeService,
+    private readonly _coreBrowserService: ICoreBrowserService,
+    private readonly _coreService: ICoreService,
+    private readonly _decorationService: IDecorationService,
+    private readonly _optionsService: IOptionsService,
+    private readonly _themeService: IThemeService,
+    preserveDrawingBuffer?: boolean
+  ) {
+    super();
+
+    this.register(this._themeService.onChangeColors(() => this._handleColorChange()));
+
+    this._cellColorResolver = new CellColorResolver(this._terminal, this._optionsService, this._model.selection, this._decorationService, this._coreBrowserService, this._themeService);
+
+    this._core = (this._terminal as any)._core;
+
+    this._renderLayers = [
+      new LinkRenderLayer(this._core.screenElement!, 2, this._terminal, this._core.linkifier!, this._coreBrowserService, _optionsService, this._themeService)
+    ];
+    this.dimensions = createRenderDimensions();
+    this._devicePixelRatio = this._coreBrowserService.dpr;
+    this._updateDimensions();
+    this._updateCursorBlink();
+    this.register(_optionsService.onOptionChange(() => this._handleOptionsChanged()));
+
+    this._canvas = this._coreBrowserService.mainDocument.createElement('canvas');
+
+    const contextAttributes = {
+      antialias: false,
+      depth: false,
+      preserveDrawingBuffer
+    };
+    this._gl = this._canvas.getContext('webgl2', contextAttributes) as IWebGL2RenderingContext;
+    if (!this._gl) {
+      throw new Error('WebGL2 not supported ' + this._gl);
+    }
+
+    this.register(addDisposableDomListener(this._canvas, 'webglcontextlost', (e) => {
+      console.log('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._onContextLoss.fire(e);
+      }, 3000 /* ms */);
+    }));
+    this.register(addDisposableDomListener(this._canvas, 'webglcontextrestored', (e) => {
+      console.warn('webglcontextrestored event received');
+      clearTimeout(this._contextRestorationTimeout);
+      this._contextRestorationTimeout = undefined;
+      // The texture atlas and glyph renderer must be fully reinitialized
+      // because their contents have been lost.
+      removeTerminalFromCache(this._terminal);
+      this._initializeWebGLState();
+      this._requestRedrawViewport();
+    }));
+
+    this._observerDisposable.value = observeDevicePixelDimensions(this._canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h));
+    this.register(this._coreBrowserService.onWindowChange(w => {
+      this._observerDisposable.value = observeDevicePixelDimensions(this._canvas, w, (w, h) => this._setCanvasDevicePixelDimensions(w, h));
+    }));
+
+    this._core.screenElement!.appendChild(this._canvas);
+
+    [this._rectangleRenderer.value, this._glyphRenderer.value] = this._initializeWebGLState();
+
+    this._isAttached = this._coreBrowserService.window.document.body.contains(this._core.screenElement!);
+
+    this.register(toDisposable(() => {
+      for (const l of this._renderLayers) {
+        l.dispose();
+      }
+      this._canvas.parentElement?.removeChild(this._canvas);
+      removeTerminalFromCache(this._terminal);
+    }));
+  }
+
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._charAtlas?.pages[0].canvas;
+  }
+
+  private _handleColorChange(): void {
+    this._refreshCharAtlas();
+
+    // Force a full refresh
+    this._clearModel(true);
+  }
+
+  public handleDevicePixelRatioChange(): void {
+    // If the device pixel ratio changed, the char atlas needs to be regenerated
+    // and the terminal needs to refreshed
+    if (this._devicePixelRatio !== this._coreBrowserService.dpr) {
+      this._devicePixelRatio = this._coreBrowserService.dpr;
+      this.handleResize(this._terminal.cols, this._terminal.rows);
+    }
+  }
+
+  public handleResize(cols: number, rows: number): void {
+    // Update character and canvas dimensions
+    this._updateDimensions();
+
+    this._model.resize(this._terminal.cols, this._terminal.rows);
+
+    // Resize all render layers
+    for (const l of this._renderLayers) {
+      l.resize(this._terminal, this.dimensions);
+    }
+
+    // Resize the canvas
+    this._canvas.width = this.dimensions.device.canvas.width;
+    this._canvas.height = this.dimensions.device.canvas.height;
+    this._canvas.style.width = `${this.dimensions.css.canvas.width}px`;
+    this._canvas.style.height = `${this.dimensions.css.canvas.height}px`;
+
+    // Resize the screen
+    this._core.screenElement!.style.width = `${this.dimensions.css.canvas.width}px`;
+    this._core.screenElement!.style.height = `${this.dimensions.css.canvas.height}px`;
+
+    this._rectangleRenderer.value?.setDimensions(this.dimensions);
+    this._rectangleRenderer.value?.handleResize();
+    this._glyphRenderer.value?.setDimensions(this.dimensions);
+    this._glyphRenderer.value?.handleResize();
+
+    this._refreshCharAtlas();
+
+    // Force a full refresh. Resizing `_glyphRenderer` should clear it already,
+    // so there is no need to clear it again here.
+    this._clearModel(false);
+  }
+
+  public handleCharSizeChanged(): void {
+    this.handleResize(this._terminal.cols, this._terminal.rows);
+  }
+
+  public handleBlur(): void {
+    for (const l of this._renderLayers) {
+      l.handleBlur(this._terminal);
+    }
+    this._cursorBlinkStateManager.value?.pause();
+    // Request a redraw for active/inactive selection background
+    this._requestRedrawViewport();
+  }
+
+  public handleFocus(): void {
+    for (const l of this._renderLayers) {
+      l.handleFocus(this._terminal);
+    }
+    this._cursorBlinkStateManager.value?.resume();
+    // Request a redraw for active/inactive selection background
+    this._requestRedrawViewport();
+  }
+
+  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
+    for (const l of this._renderLayers) {
+      l.handleSelectionChanged(this._terminal, start, end, columnSelectMode);
+    }
+    this._model.selection.update(this._core, start, end, columnSelectMode);
+    this._requestRedrawViewport();
+  }
+
+  public handleCursorMove(): void {
+    for (const l of this._renderLayers) {
+      l.handleCursorMove(this._terminal);
+    }
+    this._cursorBlinkStateManager.value?.restartBlinkAnimation();
+  }
+
+  private _handleOptionsChanged(): void {
+    this._updateDimensions();
+    this._refreshCharAtlas();
+    this._updateCursorBlink();
+  }
+
+  /**
+   * 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);
+
+    // Update dimensions and acquire char atlas
+    this.handleCharSizeChanged();
+
+    return [this._rectangleRenderer.value, this._glyphRenderer.value];
+  }
+
+  /**
+   * Refreshes the char atlas, aquiring a new one if necessary.
+   */
+  private _refreshCharAtlas(): void {
+    if (this.dimensions.device.char.width <= 0 && this.dimensions.device.char.height <= 0) {
+      // Mark as not attached so char atlas gets refreshed on next render
+      this._isAttached = false;
+      return;
+    }
+
+    const atlas = acquireTextureAtlas(
+      this._terminal,
+      this._optionsService.rawOptions,
+      this._themeService.colors,
+      this.dimensions.device.cell.width,
+      this.dimensions.device.cell.height,
+      this.dimensions.device.char.width,
+      this.dimensions.device.char.height,
+      this._coreBrowserService.dpr
+    );
+    if (this._charAtlas !== atlas) {
+      this._onChangeTextureAtlas.fire(atlas.pages[0].canvas);
+      this._charAtlasDisposable.value = getDisposeArrayDisposable([
+        forwardEvent(atlas.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas),
+        forwardEvent(atlas.onRemoveTextureAtlasCanvas, this._onRemoveTextureAtlasCanvas)
+      ]);
+    }
+    this._charAtlas = atlas;
+    this._charAtlas.warmUp();
+    this._glyphRenderer.value?.setAtlas(this._charAtlas);
+  }
+
+  /**
+   * Clear the model.
+   * @param clearGlyphRenderer Whether to also clear the glyph renderer. This
+   * should be true generally to make sure it is in the same state as the model.
+   */
+  private _clearModel(clearGlyphRenderer: boolean): void {
+    this._model.clear();
+    if (clearGlyphRenderer) {
+      this._glyphRenderer.value?.clear();
+    }
+  }
+
+  public clearTextureAtlas(): void {
+    this._charAtlas?.clearTexture();
+    this._clearModel(true);
+    this._requestRedrawViewport();
+  }
+
+  public clear(): void {
+    this._clearModel(true);
+    for (const l of this._renderLayers) {
+      l.reset(this._terminal);
+    }
+
+    this._cursorBlinkStateManager.value?.restartBlinkAnimation();
+    this._updateCursorBlink();
+  }
+
+  public registerCharacterJoiner(handler: (text: string) => [number, number][]): number {
+    return -1;
+  }
+
+  public deregisterCharacterJoiner(joinerId: number): boolean {
+    return false;
+  }
+
+  public renderRows(start: number, end: number): void {
+    if (!this._isAttached) {
+      if (this._coreBrowserService.window.document.body.contains(this._core.screenElement!) && this._charSizeService.width && this._charSizeService.height) {
+        this._updateDimensions();
+        this._refreshCharAtlas();
+        this._isAttached = true;
+      } else {
+        return;
+      }
+    }
+
+    // Update render layers
+    for (const l of this._renderLayers) {
+      l.handleGridChanged(this._terminal, start, end);
+    }
+
+    if (!this._glyphRenderer.value || !this._rectangleRenderer.value) {
+      return;
+    }
+
+    // Tell renderer the frame is beginning
+    // upon a model clear also refresh the full viewport model
+    // (also triggered by an atlas page merge, part of #4480)
+    if (this._glyphRenderer.value.beginFrame()) {
+      this._clearModel(true);
+      this._updateModel(0, this._terminal.rows - 1);
+    } else {
+      // just update changed lines to draw
+      this._updateModel(start, end);
+    }
+
+    // Render
+    this._rectangleRenderer.value.renderBackgrounds();
+    this._glyphRenderer.value.render(this._model);
+    if (!this._cursorBlinkStateManager.value || this._cursorBlinkStateManager.value.isCursorVisible) {
+      this._rectangleRenderer.value.renderCursor();
+    }
+  }
+
+  private _updateCursorBlink(): void {
+    if (this._terminal.options.cursorBlink) {
+      this._cursorBlinkStateManager.value = new CursorBlinkStateManager(() => {
+        this._requestRedrawCursor();
+      }, this._coreBrowserService);
+    } else {
+      this._cursorBlinkStateManager.clear();
+    }
+    // Request a refresh from the terminal as management of rendering is being
+    // moved back to the terminal
+    this._requestRedrawCursor();
+  }
+
+  private _updateModel(start: number, end: number): void {
+    const terminal = this._core;
+    let cell: ICellData = this._workCell;
+
+    // Declare variable ahead of time to avoid garbage collection
+    let lastBg: number;
+    let y: number;
+    let row: number;
+    let line: IBufferLine;
+    let joinedRanges: [number, number][];
+    let isJoined: boolean;
+    let lastCharX: number;
+    let range: [number, number];
+    let chars: string;
+    let code: number;
+    let width: number;
+    let i: number;
+    let x: number;
+    let j: number;
+    start = clamp(start, terminal.rows - 1, 0);
+    end = clamp(end, terminal.rows - 1, 0);
+
+    const cursorY = this._terminal.buffer.active.baseY + this._terminal.buffer.active.cursorY;
+    const viewportRelativeCursorY = cursorY - terminal.buffer.ydisp;
+    // in case cursor.x == cols adjust visual cursor to cols - 1
+    const cursorX = Math.min(this._terminal.buffer.active.cursorX, terminal.cols - 1);
+    let lastCursorX = -1;
+    const isCursorVisible =
+      this._coreService.isCursorInitialized &&
+      !this._coreService.isCursorHidden &&
+      (!this._cursorBlinkStateManager.value || this._cursorBlinkStateManager.value.isCursorVisible);
+    this._model.cursor = undefined;
+    let modelUpdated = false;
+
+    for (y = start; y <= end; y++) {
+      row = y + terminal.buffer.ydisp;
+      line = terminal.buffer.lines.get(row)!;
+      this._model.lineLengths[y] = 0;
+      joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
+      for (x = 0; x < terminal.cols; x++) {
+        lastBg = this._cellColorResolver.result.bg;
+        line.loadCell(x, cell);
+
+        if (x === 0) {
+          lastBg = this._cellColorResolver.result.bg;
+        }
+
+        // If true, indicates that the current character(s) to draw were joined.
+        isJoined = false;
+        lastCharX = x;
+
+        // Process any joined character ranges as needed. Because of how the
+        // ranges are produced, we know that they are valid for the characters
+        // and attributes of our input.
+        if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
+          isJoined = true;
+          range = joinedRanges.shift()!;
+
+          // We already know the exact start and end column of the joined range,
+          // so we get the string and width representing it directly.
+          cell = new JoinedCellData(
+            cell,
+            line!.translateToString(true, range[0], range[1]),
+            range[1] - range[0]
+          );
+
+          // Skip over the cells occupied by this range in the loop
+          lastCharX = range[1] - 1;
+        }
+
+        chars = cell.getChars();
+        code = cell.getCode();
+        i = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
+
+        // Load colors/resolve overrides into work colors
+        this._cellColorResolver.resolve(cell, x, row, this.dimensions.device.cell.width);
+
+        // Override colors for cursor cell
+        if (isCursorVisible && row === cursorY) {
+          if (x === cursorX) {
+            this._model.cursor = {
+              x: cursorX,
+              y: viewportRelativeCursorY,
+              width: cell.getWidth(),
+              style: this._coreBrowserService.isFocused ?
+                (terminal.options.cursorStyle || 'block') : terminal.options.cursorInactiveStyle,
+              cursorWidth: terminal.options.cursorWidth,
+              dpr: this._devicePixelRatio
+            };
+            lastCursorX = cursorX + cell.getWidth() - 1;
+          }
+          if (x >= cursorX && x <= lastCursorX &&
+              ((this._coreBrowserService.isFocused &&
+              (terminal.options.cursorStyle || 'block') === 'block') ||
+              (this._coreBrowserService.isFocused === false &&
+              terminal.options.cursorInactiveStyle === 'block'))) {
+            this._cellColorResolver.result.fg =
+              Attributes.CM_RGB | (this._themeService.colors.cursorAccent.rgba >> 8 & Attributes.RGB_MASK);
+            this._cellColorResolver.result.bg =
+              Attributes.CM_RGB | (this._themeService.colors.cursor.rgba >> 8 & Attributes.RGB_MASK);
+          }
+        }
+
+        if (code !== NULL_CELL_CODE) {
+          this._model.lineLengths[y] = x + 1;
+        }
+
+        // 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) {
+          continue;
+        }
+
+        modelUpdated = true;
+
+        // Flag combined chars with a bit mask so they're easily identifiable
+        if (chars.length > 1) {
+          code |= COMBINED_CHAR_BIT_MASK;
+        }
+
+        // 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;
+
+        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);
+
+        if (isJoined) {
+          // Restore work cell
+          cell = this._workCell;
+
+          // Null out non-first cells
+          for (x++; x < lastCharX; x++) {
+            j = ((y * terminal.cols) + x) * RENDER_MODEL_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;
+            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;
+          }
+        }
+      }
+    }
+    if (modelUpdated) {
+      this._rectangleRenderer.value!.updateBackgrounds(this._model);
+    }
+    this._rectangleRenderer.value!.updateCursor(this._model);
+  }
+
+  /**
+   * Recalculates the character and canvas dimensions.
+   */
+  private _updateDimensions(): void {
+    // Perform a new measure if the CharMeasure dimensions are not yet available
+    if (!this._charSizeService.width || !this._charSizeService.height) {
+      return;
+    }
+
+    // Calculate the device character width. Width is floored as it must be drawn to an integer grid
+    // in order for the char atlas glyphs to not be blurry.
+    this.dimensions.device.char.width = Math.floor(this._charSizeService.width * this._devicePixelRatio);
+
+    // Calculate the device character height. Height is ceiled in case devicePixelRatio is a
+    // floating point number in order to ensure there is enough space to draw the character to the
+    // cell.
+    this.dimensions.device.char.height = Math.ceil(this._charSizeService.height * this._devicePixelRatio);
+
+    // Calculate the device cell height, if lineHeight is _not_ 1, the resulting value will be
+    // floored since lineHeight can never be lower then 1, this guarentees the device cell height
+    // will always be larger than device char height.
+    this.dimensions.device.cell.height = Math.floor(this.dimensions.device.char.height * this._optionsService.rawOptions.lineHeight);
+
+    // Calculate the y offset within a cell that glyph should draw at in order for it to be centered
+    // correctly within the cell.
+    this.dimensions.device.char.top = this._optionsService.rawOptions.lineHeight === 1 ? 0 : Math.round((this.dimensions.device.cell.height - this.dimensions.device.char.height) / 2);
+
+    // Calculate the device cell width, taking the letterSpacing into account.
+    this.dimensions.device.cell.width = this.dimensions.device.char.width + Math.round(this._optionsService.rawOptions.letterSpacing);
+
+    // Calculate the x offset with a cell that text should draw from in order for it to be centered
+    // correctly within the cell.
+    this.dimensions.device.char.left = Math.floor(this._optionsService.rawOptions.letterSpacing / 2);
+
+    // Recalculate the canvas dimensions, the device dimensions define the actual number of pixel in
+    // the canvas
+    this.dimensions.device.canvas.height = this._terminal.rows * this.dimensions.device.cell.height;
+    this.dimensions.device.canvas.width = this._terminal.cols * this.dimensions.device.cell.width;
+
+    // The the size of the canvas on the page. It's important that this rounds to nearest integer
+    // and not ceils as browsers often have floating point precision issues where
+    // `window.devicePixelRatio` ends up being something like `1.100000023841858` for example, when
+    // it's actually 1.1. Ceiling may causes blurriness as the backing canvas image is 1 pixel too
+    // large for the canvas element size.
+    this.dimensions.css.canvas.height = Math.round(this.dimensions.device.canvas.height / this._devicePixelRatio);
+    this.dimensions.css.canvas.width = Math.round(this.dimensions.device.canvas.width / this._devicePixelRatio);
+
+    // Get the CSS dimensions of an individual cell. This needs to be derived from the calculated
+    // device pixel canvas value above. CharMeasure.width/height by itself is insufficient when the
+    // page is not at 100% zoom level as CharMeasure is measured in CSS pixels, but the actual char
+    // size on the canvas can differ.
+    this.dimensions.css.cell.height = this.dimensions.device.cell.height / this._devicePixelRatio;
+    this.dimensions.css.cell.width = this.dimensions.device.cell.width / this._devicePixelRatio;
+  }
+
+  private _setCanvasDevicePixelDimensions(width: number, height: number): void {
+    if (this._canvas.width === width && this._canvas.height === height) {
+      return;
+    }
+    // While the actual canvas size has changed, keep device canvas dimensions as the value before
+    // the change as it's an exact multiple of the cell sizes.
+    this._canvas.width = width;
+    this._canvas.height = height;
+    this._requestRedrawViewport();
+  }
+
+  private _requestRedrawViewport(): void {
+    this._onRequestRedraw.fire({ start: 0, end: this._terminal.rows - 1 });
+  }
+
+  private _requestRedrawCursor(): void {
+    const cursorY = this._terminal.buffer.active.cursorY;
+    this._onRequestRedraw.fire({ start: cursorY, end: cursorY });
+  }
+}
+
+// TODO: Share impl with core
+export class JoinedCellData extends AttributeData implements ICellData {
+  private _width: number;
+  // .content carries no meaning for joined CellData, simply nullify it
+  // thus we have to overload all other .content accessors
+  public content: number = 0;
+  public fg: number;
+  public bg: number;
+  public combinedData: string = '';
+
+  constructor(firstCell: ICellData, chars: string, width: number) {
+    super();
+    this.fg = firstCell.fg;
+    this.bg = firstCell.bg;
+    this.combinedData = chars;
+    this._width = width;
+  }
+
+  public isCombined(): number {
+    // always mark joined cell data as combined
+    return Content.IS_COMBINED_MASK;
+  }
+
+  public getWidth(): number {
+    return this._width;
+  }
+
+  public getChars(): string {
+    return this.combinedData;
+  }
+
+  public getCode(): number {
+    // code always gets the highest possible fake codepoint (read as -1)
+    // this is needed as code is used by caches as identifier
+    return 0x1FFFFF;
+  }
+
+  public setFromCharData(value: CharData): void {
+    throw new Error('not implemented');
+  }
+
+  public getAsCharData(): CharData {
+    return [this.fg, this.getChars(), this.getWidth(), this.getCode()];
+  }
+}
+
+function clamp(value: number, max: number, min: number = 0): number {
+  return Math.max(Math.min(value, max), min);
+}

web/node_modules/@xterm/addon-webgl/src/WebglUtils.ts

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+
+/**
+ * A matrix that when multiplies will translate 0-1 coordinates (left to right,
+ * top to bottom) to clip space.
+ */
+export const PROJECTION_MATRIX = new Float32Array([
+  2, 0, 0, 0,
+  0, -2, 0, 0,
+  0, 0, 1, 0,
+  -1, 1, 0, 1
+]);
+
+export function createProgram(gl: WebGLRenderingContext, vertexSource: string, fragmentSource: string): 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.linkProgram(program);
+  const success = gl.getProgramParameter(program, gl.LINK_STATUS);
+  if (success) {
+    return program;
+  }
+
+  console.error(gl.getProgramInfoLog(program));
+  gl.deleteProgram(program);
+}
+
+export function createShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | undefined {
+  const shader = throwIfFalsy(gl.createShader(type));
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+  if (success) {
+    return shader;
+  }
+
+  console.error(gl.getShaderInfoLog(shader));
+  gl.deleteShader(shader);
+}
+
+export function expandFloat32Array(source: Float32Array, max: number): Float32Array {
+  const newLength = Math.min(source.length * 2, max);
+  const newArray = new Float32Array(newLength);
+  for (let i = 0; i < source.length; i++) {
+    newArray[i] = source[i];
+  }
+  return newArray;
+}
+
+export class GLTexture {
+  public texture: WebGLTexture;
+  public version: number;
+
+  constructor(texture: WebGLTexture) {
+    this.texture = texture;
+    this.version = -1;
+  }
+}

web/node_modules/@xterm/addon-webgl/src/renderLayer/BaseRenderLayer.ts

@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ReadonlyColorSet } from 'browser/Types';
+import { acquireTextureAtlas } from 'browser/renderer/shared/CharAtlasCache';
+import { TEXT_BASELINE } from 'browser/renderer/shared/Constants';
+import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { IRenderDimensions, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { Disposable, toDisposable } from 'common/Lifecycle';
+import { CellData } from 'common/buffer/CellData';
+import { IOptionsService } from 'common/services/Services';
+import { Terminal } from '@xterm/xterm';
+import { IRenderLayer } from './Types';
+
+export abstract class BaseRenderLayer extends Disposable implements IRenderLayer {
+  private _canvas: HTMLCanvasElement;
+  protected _ctx!: CanvasRenderingContext2D;
+  private _deviceCharWidth: number = 0;
+  private _deviceCharHeight: number = 0;
+  private _deviceCellWidth: number = 0;
+  private _deviceCellHeight: number = 0;
+  private _deviceCharLeft: number = 0;
+  private _deviceCharTop: number = 0;
+
+  protected _charAtlas: ITextureAtlas | undefined;
+
+  constructor(
+    terminal: Terminal,
+    private _container: HTMLElement,
+    id: string,
+    zIndex: number,
+    private _alpha: boolean,
+    protected readonly _coreBrowserService: ICoreBrowserService,
+    protected readonly _optionsService: IOptionsService,
+    protected readonly _themeService: IThemeService
+  ) {
+    super();
+    this._canvas = this._coreBrowserService.mainDocument.createElement('canvas');
+    this._canvas.classList.add(`xterm-${id}-layer`);
+    this._canvas.style.zIndex = zIndex.toString();
+    this._initCanvas();
+    this._container.appendChild(this._canvas);
+    this.register(this._themeService.onChangeColors(e => {
+      this._refreshCharAtlas(terminal, e);
+      this.reset(terminal);
+    }));
+    this.register(toDisposable(() => {
+      this._canvas.remove();
+    }));
+  }
+
+  private _initCanvas(): void {
+    this._ctx = throwIfFalsy(this._canvas.getContext('2d', { alpha: this._alpha }));
+    // Draw the background if this is an opaque layer
+    if (!this._alpha) {
+      this._clearAll();
+    }
+  }
+
+  public handleBlur(terminal: Terminal): void {}
+  public handleFocus(terminal: Terminal): void {}
+  public handleCursorMove(terminal: Terminal): void {}
+  public handleGridChanged(terminal: Terminal, startRow: number, endRow: number): void {}
+  public handleSelectionChanged(terminal: Terminal, start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {}
+
+  protected _setTransparency(terminal: Terminal, alpha: boolean): void {
+    // Do nothing when alpha doesn't change
+    if (alpha === this._alpha) {
+      return;
+    }
+
+    // Create new canvas and replace old one
+    const oldCanvas = this._canvas;
+    this._alpha = alpha;
+    // Cloning preserves properties
+    this._canvas = this._canvas.cloneNode() as HTMLCanvasElement;
+    this._initCanvas();
+    this._container.replaceChild(this._canvas, oldCanvas);
+
+    // Regenerate char atlas and force a full redraw
+    this._refreshCharAtlas(terminal, this._themeService.colors);
+    this.handleGridChanged(terminal, 0, terminal.rows - 1);
+  }
+
+  /**
+   * Refreshes the char atlas, aquiring a new one if necessary.
+   * @param terminal The terminal.
+   * @param colorSet The color set to use for the char atlas.
+   */
+  private _refreshCharAtlas(terminal: Terminal, colorSet: ReadonlyColorSet): void {
+    if (this._deviceCharWidth <= 0 && this._deviceCharHeight <= 0) {
+      return;
+    }
+    this._charAtlas = acquireTextureAtlas(terminal, this._optionsService.rawOptions, colorSet, this._deviceCellWidth, this._deviceCellHeight, this._deviceCharWidth, this._deviceCharHeight, this._coreBrowserService.dpr);
+    this._charAtlas.warmUp();
+  }
+
+  public resize(terminal: Terminal, dim: IRenderDimensions): void {
+    this._deviceCellWidth = dim.device.cell.width;
+    this._deviceCellHeight = dim.device.cell.height;
+    this._deviceCharWidth = dim.device.char.width;
+    this._deviceCharHeight = dim.device.char.height;
+    this._deviceCharLeft = dim.device.char.left;
+    this._deviceCharTop = dim.device.char.top;
+    this._canvas.width = dim.device.canvas.width;
+    this._canvas.height = dim.device.canvas.height;
+    this._canvas.style.width = `${dim.css.canvas.width}px`;
+    this._canvas.style.height = `${dim.css.canvas.height}px`;
+
+    // Draw the background if this is an opaque layer
+    if (!this._alpha) {
+      this._clearAll();
+    }
+
+    this._refreshCharAtlas(terminal, this._themeService.colors);
+  }
+
+  public abstract reset(terminal: Terminal): void;
+
+  /**
+   * Fills a 1px line (2px on HDPI) at the bottom of the cell. This uses the
+   * existing fillStyle on the context.
+   * @param x The column to fill.
+   * @param y The row to fill.
+   */
+  protected _fillBottomLineAtCells(x: number, y: number, width: number = 1): void {
+    this._ctx.fillRect(
+      x * this._deviceCellWidth,
+      (y + 1) * this._deviceCellHeight - this._coreBrowserService.dpr - 1 /* Ensure it's drawn within the cell */,
+      width * this._deviceCellWidth,
+      this._coreBrowserService.dpr);
+  }
+
+  /**
+   * Clears the entire canvas.
+   */
+  protected _clearAll(): void {
+    if (this._alpha) {
+      this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+    } else {
+      this._ctx.fillStyle = this._themeService.colors.background.css;
+      this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
+    }
+  }
+
+  /**
+   * Clears 1+ cells completely.
+   * @param x The column to start at.
+   * @param y The row to start at.
+   * @param width The number of columns to clear.
+   * @param height The number of rows to clear.
+   */
+  protected _clearCells(x: number, y: number, width: number, height: number): void {
+    if (this._alpha) {
+      this._ctx.clearRect(
+        x * this._deviceCellWidth,
+        y * this._deviceCellHeight,
+        width * this._deviceCellWidth,
+        height * this._deviceCellHeight);
+    } else {
+      this._ctx.fillStyle = this._themeService.colors.background.css;
+      this._ctx.fillRect(
+        x * this._deviceCellWidth,
+        y * this._deviceCellHeight,
+        width * this._deviceCellWidth,
+        height * this._deviceCellHeight);
+    }
+  }
+
+  /**
+   * Draws a truecolor character at the cell. The character will be clipped to
+   * ensure that it fits with the cell, including the cell to the right if it's
+   * a wide character. This uses the existing fillStyle on the context.
+   * @param terminal The terminal.
+   * @param cell The cell data for the character to draw.
+   * @param x The column to draw at.
+   * @param y The row to draw at.
+   */
+  protected _fillCharTrueColor(terminal: Terminal, cell: CellData, x: number, y: number): void {
+    this._ctx.font = this._getFont(terminal, false, false);
+    this._ctx.textBaseline = TEXT_BASELINE;
+    this._clipCell(x, y, cell.getWidth());
+    this._ctx.fillText(
+      cell.getChars(),
+      x * this._deviceCellWidth + this._deviceCharLeft,
+      y * this._deviceCellHeight + this._deviceCharTop + this._deviceCharHeight);
+  }
+
+  /**
+   * Clips a cell to ensure no pixels will be drawn outside of it.
+   * @param x The column to clip.
+   * @param y The row to clip.
+   * @param width The number of columns to clip.
+   */
+  private _clipCell(x: number, y: number, width: number): void {
+    this._ctx.beginPath();
+    this._ctx.rect(
+      x * this._deviceCellWidth,
+      y * this._deviceCellHeight,
+      width * this._deviceCellWidth,
+      this._deviceCellHeight);
+    this._ctx.clip();
+  }
+
+  /**
+   * Gets the current font.
+   * @param terminal The terminal.
+   * @param isBold If we should use the bold fontWeight.
+   */
+  protected _getFont(terminal: Terminal, isBold: boolean, isItalic: boolean): string {
+    const fontWeight = isBold ? terminal.options.fontWeightBold : terminal.options.fontWeight;
+    const fontStyle = isItalic ? 'italic' : '';
+
+    return `${fontStyle} ${fontWeight} ${terminal.options.fontSize! * this._coreBrowserService.dpr}px ${terminal.options.fontFamily}`;
+  }
+}
+

web/node_modules/@xterm/addon-webgl/src/renderLayer/LinkRenderLayer.ts

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { is256Color } from 'browser/renderer/shared/CharAtlasUtils';
+import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { ILinkifier2, ILinkifierEvent } from 'browser/Types';
+import { IOptionsService } from 'common/services/Services';
+import { Terminal } from '@xterm/xterm';
+import { BaseRenderLayer } from './BaseRenderLayer';
+
+export class LinkRenderLayer extends BaseRenderLayer {
+  private _state: ILinkifierEvent | undefined;
+
+  constructor(
+    container: HTMLElement,
+    zIndex: number,
+    terminal: Terminal,
+    linkifier2: ILinkifier2,
+    coreBrowserService: ICoreBrowserService,
+    optionsService: IOptionsService,
+    themeService: IThemeService
+  ) {
+    super(terminal, container, 'link', zIndex, true, coreBrowserService, optionsService, themeService);
+
+    this.register(linkifier2.onShowLinkUnderline(e => this._handleShowLinkUnderline(e)));
+    this.register(linkifier2.onHideLinkUnderline(e => this._handleHideLinkUnderline(e)));
+  }
+
+  public resize(terminal: Terminal, dim: IRenderDimensions): void {
+    super.resize(terminal, dim);
+    // Resizing the canvas discards the contents of the canvas so clear state
+    this._state = undefined;
+  }
+
+  public reset(terminal: Terminal): void {
+    this._clearCurrentLink();
+  }
+
+  private _clearCurrentLink(): void {
+    if (this._state) {
+      this._clearCells(this._state.x1, this._state.y1, this._state.cols - this._state.x1, 1);
+      const middleRowCount = this._state.y2 - this._state.y1 - 1;
+      if (middleRowCount > 0) {
+        this._clearCells(0, this._state.y1 + 1, this._state.cols, middleRowCount);
+      }
+      this._clearCells(0, this._state.y2, this._state.x2, 1);
+      this._state = undefined;
+    }
+  }
+
+  private _handleShowLinkUnderline(e: ILinkifierEvent): void {
+    if (e.fg === INVERTED_DEFAULT_COLOR) {
+      this._ctx.fillStyle = this._themeService.colors.background.css;
+    } else if (e.fg !== undefined && is256Color(e.fg)) {
+      // 256 color support
+      this._ctx.fillStyle = this._themeService.colors.ansi[e.fg!].css;
+    } else {
+      this._ctx.fillStyle = this._themeService.colors.foreground.css;
+    }
+
+    if (e.y1 === e.y2) {
+      // Single line link
+      this._fillBottomLineAtCells(e.x1, e.y1, e.x2 - e.x1);
+    } else {
+      // Multi-line link
+      this._fillBottomLineAtCells(e.x1, e.y1, e.cols - e.x1);
+      for (let y = e.y1 + 1; y < e.y2; y++) {
+        this._fillBottomLineAtCells(0, y, e.cols);
+      }
+      this._fillBottomLineAtCells(0, e.y2, e.x2);
+    }
+    this._state = e;
+  }
+
+  private _handleHideLinkUnderline(e: ILinkifierEvent): void {
+    this._clearCurrentLink();
+  }
+}

web/node_modules/@xterm/addon-webgl/src/renderLayer/Types.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IDisposable, Terminal } from '@xterm/xterm';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
+
+export interface IRenderLayer extends IDisposable {
+  /**
+   * Called when the terminal loses focus.
+   */
+  handleBlur(terminal: Terminal): void;
+
+  /**
+   * Called when the terminal gets focus.
+   */
+  handleFocus(terminal: Terminal): void;
+
+  /**
+   * Called when the cursor is moved.
+   */
+  handleCursorMove(terminal: Terminal): void;
+
+  /**
+   * Called when the data in the grid has changed (or needs to be rendered
+   * again).
+   */
+  handleGridChanged(terminal: Terminal, startRow: number, endRow: number): void;
+
+  /**
+   * Calls when the selection changes.
+   */
+  handleSelectionChanged(terminal: Terminal, start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
+
+  /**
+   * Registers a handler to join characters to render as a group
+   */
+  registerCharacterJoiner?(handler: (text: string) => [number, number][]): void;
+
+  /**
+   * Deregisters the specified character joiner handler
+   */
+  deregisterCharacterJoiner?(joinerId: number): void;
+
+  /**
+   * Resize the render layer.
+   */
+  resize(terminal: Terminal, dim: IRenderDimensions): void;
+
+  /**
+   * Clear the state of the render layer.
+   */
+  reset(terminal: Terminal): void;
+}

web/node_modules/@xterm/addon-webgl/typings/addon-webgl.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Terminal, ITerminalAddon, IEvent } from '@xterm/xterm';
+
+declare module '@xterm/addon-webgl' {
+  /**
+   * An xterm.js addon that provides search functionality.
+   */
+  export class WebglAddon implements ITerminalAddon {
+    public textureAtlas?: HTMLCanvasElement;
+
+    /**
+     * An event that is fired when the renderer loses its canvas context.
+     */
+    public readonly onContextLoss: IEvent<void>;
+
+    /**
+     * An event that is fired when the texture atlas of the renderer changes.
+     */
+    public readonly onChangeTextureAtlas: IEvent<HTMLCanvasElement>;
+
+    /**
+     * An event that is fired when the a new page is added to the texture atlas.
+     */
+    public readonly onAddTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
+
+    constructor(preserveDrawingBuffer?: boolean);
+
+    /**
+     * Activates the addon.
+     * @param terminal The terminal the addon is being loaded in.
+     */
+    public activate(terminal: Terminal): void;
+
+    /**
+     * Disposes the addon.
+     */
+    public dispose(): void;
+
+    /**
+     * Clears the terminal's texture atlas and triggers a redraw.
+     */
+    public clearTextureAtlas(): void;
+  }
+}

web/node_modules/@xterm/xterm/LICENSE

@@ -0,0 +1,21 @@
+Copyright (c) 2017-2019, The xterm.js authors (https://github.com/xtermjs/xterm.js)
+Copyright (c) 2014-2016, SourceLair Private Company (https://www.sourcelair.com)
+Copyright (c) 2012-2013, Christopher Jeffrey (https://github.com/chjj/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

web/node_modules/@xterm/xterm/README.md

@@ -0,0 +1,235 @@
+# [![xterm.js logo](logo-full.png)](https://xtermjs.org)
+
+Xterm.js is a front-end component written in TypeScript that lets applications bring fully-featured terminals to their users in the browser. It's used by popular projects such as VS Code, Hyper and Theia.
+
+## Features
+
+- **Terminal apps just work**: Xterm.js works with most terminal apps such as `bash`, `vim`, and `tmux`, including support for curses-based apps and mouse events.
+- **Performant**: Xterm.js is *really* fast, it even includes a GPU-accelerated renderer.
+- **Rich Unicode support**: Supports CJK, emojis, and IMEs.
+- **Self-contained**: Requires zero dependencies to work.
+- **Accessible**: Screen reader and minimum contrast ratio support can be turned on.
+- **And much more**: Links, theming, addons, well documented API, etc.
+
+## What xterm.js is not
+
+- Xterm.js is not a terminal application that you can download and use on your computer.
+- Xterm.js is not `bash`. Xterm.js can be connected to processes like `bash` and let you interact with them (provide input, receive output).
+
+## Getting Started
+
+First, you need to install the module, we ship exclusively through [npm](https://www.npmjs.com/), so you need that installed and then add xterm.js as a dependency by running:
+
+```bash
+npm install @xterm/xterm
+```
+
+To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to the head of your HTML page. Then create a `<div id="terminal"></div>` onto which xterm can attach itself. Finally, instantiate the `Terminal` object and then call the `open` function with the DOM object of the `div`.
+
+```html
+<!doctype html>
+  <html>
+    <head>
+      <link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
+      <script src="node_modules/@xterm/xterm/lib/xterm.js"></script>
+    </head>
+    <body>
+      <div id="terminal"></div>
+      <script>
+        var term = new Terminal();
+        term.open(document.getElementById('terminal'));
+        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
+      </script>
+    </body>
+  </html>
+```
+
+### Importing
+
+The recommended way to load xterm.js is via the ES6 module syntax:
+
+```javascript
+import { Terminal } from '@xterm/xterm';
+```
+
+### Addons
+
+⚠️ *This section describes the new addon format introduced in v3.14.0, see [here](https://github.com/xtermjs/xterm.js/blob/3.14.2/README.md#addons) for the instructions on the old format*
+
+Addons are separate modules that extend the `Terminal` by building on the [xterm.js API](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts). To use an addon, you first need to install it in your project:
+
+```bash
+npm i -S @xterm/addon-web-links
+```
+
+Then import the addon, instantiate it and call `Terminal.loadAddon`:
+
+```ts
+import { Terminal } from '@xterm/xterm';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+
+const terminal = new Terminal();
+// Load WebLinksAddon on terminal, this is all that's needed to get web links
+// working in the terminal.
+terminal.loadAddon(new WebLinksAddon());
+```
+
+The xterm.js team maintains the following addons, but anyone can build them:
+
+- [`@xterm/addon-attach`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-attach): Attaches to a server running a process via a websocket
+- [`@xterm/addon-canvas`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-canvas): Renders xterm.js using a `canvas` element's 2d context
+- [`@xterm/addon-fit`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-fit): Fits the terminal to the containing element
+- [`@xterm/addon-image`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-image): Adds image support
+- [`@xterm/addon-search`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-search): Adds search functionality
+- [`@xterm/addon-serialize`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-serialize): Serializes the terminal's buffer to a VT sequences or HTML
+- [`@xterm/addon-unicode11`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-unicode11): Updates character widths to their unicode11 values
+- [`@xterm/addon-web-links`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-web-links): Adds web link detection and interaction
+- [`@xterm/addon-webgl`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-webgl): Renders xterm.js using a `canvas` element's webgl2 context
+
+## Browser Support
+
+Since xterm.js is typically implemented as a developer tool, only modern browsers are supported officially. Specifically the latest versions of *Chrome*, *Edge*, *Firefox*, and *Safari*.
+
+Xterm.js works seamlessly in [Electron](https://electronjs.org/) apps and may even work on earlier versions of the browsers. These are the versions we strive to keep working.
+
+### Node.js Support
+
+We also publish [`xterm-headless`](https://www.npmjs.com/package/xterm-headless) which is a stripped down version of xterm.js that runs in Node.js. An example use case for this is to keep track of a terminal's state where the process is running and using the serialize addon so it can get all state restored upon reconnection.
+
+## API
+
+The full API for xterm.js is contained within the [TypeScript declaration file](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts), use the branch/tag picker in GitHub (`w`) to navigate to the correct version of the API.
+
+Note that some APIs are marked *experimental*, these are added to enable experimentation with new ideas without committing to support it like a normal [semver](https://semver.org/) API. Note that these APIs can change radically between versions, so be sure to read release notes if you plan on using experimental APIs.
+
+## Releases
+
+Xterm.js follows a monthly release cycle roughly.
+
+All current and past releases are available on this repo's [Releases page](https://github.com/sourcelair/xterm.js/releases), you can view the [high-level roadmap on the wiki](https://github.com/xtermjs/xterm.js/wiki/Roadmap) and see what we're working on now by looking through [Milestones](https://github.com/sourcelair/xterm.js/milestones).
+
+### Beta builds
+
+Our CI releases beta builds to npm for every change that goes into master. Install the latest beta build with:
+
+```bash
+npm install -S @xterm/xterm@beta
+```
+
+These should generally be stable, but some bugs may slip in. We recommend using the beta build primarily to test out new features and to verify bug fixes.
+
+## Contributing
+
+You can read the [guide on the wiki](https://github.com/xtermjs/xterm.js/wiki/Contributing) to learn how to contribute and set up xterm.js for development.
+
+## Real-world uses
+Xterm.js is used in several world-class applications to provide great terminal experiences.
+
+- [**SourceLair**](https://www.sourcelair.com/): In-browser IDE that provides its users with fully-featured Linux terminals based on xterm.js.
+- [**Microsoft Visual Studio Code**](http://code.visualstudio.com/): Modern, versatile, and powerful open source code editor that provides an integrated terminal based on xterm.js.
+- [**ttyd**](https://github.com/tsl0922/ttyd): A command-line tool for sharing terminal over the web, with fully-featured terminal emulation based on xterm.js.
+- [**Katacoda**](https://www.katacoda.com/): Katacoda is an Interactive Learning Platform for software developers, covering the latest Cloud Native technologies.
+- [**Eclipse Che**](http://www.eclipse.org/che): Developer workspace server, cloud IDE, and Eclipse next-generation IDE.
+- [**Codenvy**](http://www.codenvy.com): Cloud workspaces for development teams.
+- [**CoderPad**](https://coderpad.io): Online interviewing platform for programmers. Run code in many programming languages, with results displayed by xterm.js.
+- [**WebSSH2**](https://github.com/billchurch/WebSSH2): A web based SSH2 client using xterm.js, socket.io, and ssh2.
+- [**Spyder Terminal**](https://github.com/spyder-ide/spyder-terminal): A full fledged system terminal embedded on Spyder IDE.
+- [**Cloud Commander**](https://cloudcmd.io "Cloud Commander"): Orthodox web file manager with console and editor.
+- [**Next Tech**](https://next.tech "Next Tech"): Online platform for interactive coding and web development courses. Live container-backed terminal uses xterm.js.
+- [**RStudio**](https://www.rstudio.com/products/RStudio "RStudio"): RStudio is an integrated development environment (IDE) for R.
+- [**Terminal for Atom**](https://github.com/jsmecham/atom-terminal-tab): A simple terminal for the Atom text editor.
+- [**Eclipse Orion**](https://orionhub.org): A modern, open source software development environment that runs in the cloud. Code, deploy, and run in the cloud.
+- [**Gravitational Teleport**](https://github.com/gravitational/teleport): Gravitational Teleport is a modern SSH server for remotely accessing clusters of Linux servers via SSH or HTTPS.
+- [**Hexlet**](https://en.hexlet.io): Practical programming courses (JavaScript, PHP, Unix, databases, functional programming). A steady path from the first line of code to the first job.
+- [**Selenoid UI**](https://github.com/aerokube/selenoid-ui): Simple UI for the scalable golang implementation of Selenium Hub named Selenoid. We use XTerm for streaming logs over websockets from docker containers.
+- [**Portainer**](https://portainer.io): Simple management UI for Docker.
+- [**SSHy**](https://github.com/stuicey/SSHy): HTML5 Based SSHv2 Web Client with E2E encryption utilising xterm.js, SJCL & websockets.
+- [**JupyterLab**](https://github.com/jupyterlab/jupyterlab): An extensible computational environment for Jupyter, supporting interactive data science and scientific computing across all programming languages.
+- [**Theia**](https://github.com/theia-ide/theia): Theia is a cloud & desktop IDE framework implemented in TypeScript.
+- [**Opshell**](https://github.com/ricktbaker/opshell) Ops Helper tool to make life easier working with AWS instances across multiple organizations.
+- [**Proxmox VE**](https://www.proxmox.com/en/proxmox-ve): Proxmox VE is a complete open-source platform for enterprise virtualization. It uses xterm.js for container terminals and the host shell.
+- [**Script Runner**](https://github.com/ioquatix/script-runner): Run scripts (or a shell) in Atom.
+- [**Whack Whack Terminal**](https://github.com/Microsoft/WhackWhackTerminal): Terminal emulator for Visual Studio 2017.
+- [**VTerm**](https://github.com/vterm/vterm): Extensible terminal emulator based on Electron and React.
+- [**electerm**](http://electerm.html5beta.com): electerm is a terminal/ssh/sftp client(mac, win, linux) based on electron/node-pty/xterm.
+- [**Kubebox**](https://github.com/astefanutti/kubebox): Terminal console for Kubernetes clusters.
+- [**Azure Cloud Shell**](https://shell.azure.com): Azure Cloud Shell is a Microsoft-managed admin machine built on Azure, for Azure.
+- [**atom-xterm**](https://atom.io/packages/atom-xterm): Atom plugin for providing terminals inside your Atom workspace.
+- [**rtty**](https://github.com/zhaojh329/rtty): Access your terminals from anywhere via the web.
+- [**Pisth**](https://github.com/ColdGrub1384/Pisth): An SFTP and SSH client for iOS.
+- [**abstruse**](https://github.com/bleenco/abstruse): Abstruse CI is a continuous integration platform based on Node.JS and Docker.
+- [**Azure Data Studio**](https://github.com/Microsoft/azuredatastudio): A data management tool that enables working with SQL Server, Azure SQL DB and SQL DW from Windows, macOS and Linux.
+- [**FreeMAN**](https://github.com/matthew-matvei/freeman): A free, cross-platform file manager for power users.
+- [**Fluent Terminal**](https://github.com/felixse/FluentTerminal): A terminal emulator based on UWP and web technologies.
+- [**Hyper**](https://hyper.is): A terminal built on web technologies.
+- [**Diag**](https://diag.ai): A better way to troubleshoot problems faster. Capture, share and reapply troubleshooting knowledge so you can focus on solving problems that matter.
+- [**GoTTY**](https://github.com/sorenisanerd/gotty): A simple command line tool that shares your terminal as a web application based on xterm.js.
+- [**genact**](https://github.com/svenstaro/genact): A nonsense activity generator.
+- [**cPanel & WHM**](https://cpanel.com): The hosting platform of choice.
+- [**Nutanix**](https://github.com/nutanix): Nutanix Enterprise Cloud uses xterm in the webssh functionality within Nutanix Calm, and is also looking to move our old noserial (termjs) functionality to xterm.js.
+- [**SSH Web Client**](https://github.com/roke22/PHP-SSH2-Web-Client): SSH Web Client with PHP.
+- [**Juno**](http://junolab.org/): A flexible Julia IDE, based on Atom.
+- [**webssh**](https://github.com/huashengdun/webssh): Web based ssh client.
+- [**info-beamer hosted**](https://info-beamer.com): Uses xterm.js to manage digital signage devices from the web dashboard.
+- [**Jumpserver**](https://github.com/jumpserver/luna): Jumpserver Luna project, Jumpserver is a bastion server project, Luna use xterm.js for web terminal emulation.
+- [**LxdMosaic**](https://github.com/turtle0x1/LxdMosaic): Uses xterm.js to give terminal access to containers through LXD
+- [**CodeInterview.io**](https://codeinterview.io): A coding interview platform in 25+ languages and many web frameworks. Uses xterm.js to provide shell access.
+- [**Bastillion**](https://www.bastillion.io): Bastillion is an open-source web-based SSH console that centrally manages administrative access to systems.
+- [**PHP App Server**](https://github.com/cubiclesoft/php-app-server/): Create lightweight, installable almost-native applications for desktop OSes.  ExecTerminal (nicely wraps the xterm.js Terminal), TerminalManager, and RunProcessSDK are self-contained, reusable ES5+ compliant Javascript components.
+- [**NgTerminal**](https://github.com/qwefgh90/ng-terminal): NgTerminal is a web terminal that leverages xterm.js on Angular 7+. You can easily add it into your application by adding `<ng-terminal></ng-terminal>` into your component.
+- [**tty-share**](https://tty-share.com): Extremely simple terminal sharing over the Internet.
+- [**Ten Hands**](https://github.com/saisandeepvaddi/ten-hands): One place to run your command-line tasks.
+- [**WebAssembly.sh**](https://webassembly.sh): A WebAssembly WASI browser terminal
+- [**Gus**](https://gus.jp): A shared coding pad where you can run Python with xterm.js
+- [**Linode**](https://linode.com): Linode uses xterm.js to provide users a web console for their Linode instances.
+- [**FluffOS**](https://www.fluffos.info): Active maintained LPMUD driver with websocket support.
+- [**x-terminal**](https://atom.io/packages/x-terminal): Atom plugin for providing terminals inside your Atom workspace.
+- [**CoCalc**](https://cocalc.com/): Lots of free software pre-installed, to chat, collaborate, develop, program, publish, research, share, teach, in C++, HTML, Julia, Jupyter, LaTeX, Markdown, Python, R, SageMath, Scala, ...
+- [**Dank Domain**](https://www.DDgame.us/): Open source multiuser medieval game supporting old & new terminal emulation.
+- [**DockerStacks**](https://docker-stacks.com/): Local LAMP/LEMP development studio
+- [**Codecademy**](https://codecademy.com/): Uses xterm.js in its courses on Bash.
+- [**Laravel Ssh Web Client**](https://github.com/roke22/Laravel-ssh-client): Laravel server inventory with ssh web client to connect at server using xterm.js
+- [**Replit**](https://replit.com): Collaborative browser based IDE with support for 50+ different languages.
+- [**TeleType**](https://github.com/akshaykmr/TeleType): cli tool that allows you to share your terminal online conveniently. Show off mad cli-fu, help a colleague, teach, or troubleshoot.
+- [**Intervue**](https://www.intervue.io): Pair programming for interviews. Multiple programming languages are supported, with results displayed by xterm.js.
+- [**TRASA**](https://trasa.io): Zero trust access to Web, SSH, RDP, and Database services.
+- [**Commas**](https://github.com/CyanSalt/commas): Commas is a hackable terminal and command runner.
+- [**Devtron**](https://github.com/devtron-labs/devtron): Software Delivery Workflow For Kubernetes.
+- [**NxShell**](https://github.com/nxshell/nxshell): An easy to use new terminal for SSH.
+- [**gifcast**](https://dstein64.github.io/gifcast/): Converts an asciinema cast to an animated GIF.
+- [**WizardWebssh**](https://gitlab.com/mikeramsey/wizardwebssh): A terminal with Pyqt5 Widget for embedding, which can be used as an ssh client to connect to your ssh servers. It is written in Python, based on tornado, paramiko, and xterm.js.
+- [**Wizard Assistant**](https://wizardassistant.com/): Wizard Assistant comes with advanced automation tools, preloaded common and special time-saving commands, and a built-in SSH terminal. Now you can remotely administer, troubleshoot, and analyze any system with ease.
+- [**ucli**](https://github.com/tsadarsh/ucli): Command Line for everyone :family_man_woman_girl_boy: at [www.ucli.tech](https://www.ucli.tech).
+- [**Tess**](https://github.com/SquitchYT/Tess/): Simple Terminal Fully Customizable for Everyone. Discover more at [tessapp.dev](https://tessapp.dev)
+- [**HashiCorp Nomad**](https://www.nomadproject.io/): A container orchestrator with the ability to connect to remote tasks via a web interface using websockets and xterm.js.
+- [**TermPair**](https://github.com/cs01/termpair): View and control terminals from your browser with end-to-end encryption
+- [**gdbgui**](https://github.com/cs01/gdbgui): Browser-based frontend to gdb (gnu debugger)
+- [**goormIDE**](https://ide.goorm.io/): Run almost every programming languages with real-time collaboration, live pair programming, and built-in messenger.
+- [**FleetDeck**](https://fleetdeck.io): Remote desktop & virtual terminal
+- [**OpenSumi**](https://github.com/opensumi/core): A framework helps you quickly build Cloud or Desktop IDE products.
+- [**KubeSail**](https://kubesail.com): The Self-Hosting Company - uses xterm to allow users to exec into kubernetes pods and build github apps
+- [**WiTTY**](https://github.com/syssecfsu/witty): Web-based interactive terminal emulator that allows users to easily record, share, and replay console sessions.
+- [**libv86 Terminal Forwarding**](https://github.com/hello-smile6/libv86-terminal-forwarding): Peer-to-peer SSH for the web, using WebRTC via [Bugout](https://github.com/chr15m/bugout) for data transfer and [v86](https://github.com/copy/v86) for web-based virtualization.
+- [**hack.courses**](https://hack.courses): Interactive Linux and command-line classes using xterm.js to expose a real terminal available for everyone.
+- [**Render**](https://render.com): Platform-as-a-service for your apps, websites, and databases using xterm.js to provide a command prompt for user containers and for streaming build and runtime logs.
+- [**CloudTTY**](https://github.com/cloudtty/cloudtty): A Friendly Kubernetes CloudShell (Web Terminal).
+- [**Go SSH Web Client**](https://github.com/wuchihsu/go-ssh-web-client): A simple SSH web client using Go, WebSocket and Xterm.js.
+- [**web3os**](https://web3os.sh): A decentralized operating system for the next web
+- [**Cratecode**](https://cratecode.com): Learn to program for free through interactive online lessons. Cratecode uses xterm.js to give users access to their own Linux environment.
+- [**Super Terminal**](https://github.com/bugwheels94/super-terminal): It is a http based terminal for developers who dont like repetition and save time.
+- [**graSSHopper**](https://grasshopper.coding.kiwi): A simple SSH client with file explorer, history and many more features.
+- [**DomTerm**](https://domterm.org/xtermjs.html): Tiles and tabs. Detachable sessions (like tmux). [Remote connections](https://domterm.org/Remoting-over-ssh.html) using a nice ssh wrapper with predictive echo. Qt, Electron, Tauri/Wry, or desktop browser front-ends. Choose between xterm.js engine (faster) or native DomTerm (more functionality and graphics) - or both.
+- [**Cloudtutor.io**](https://cloudtutor.io): innovative online learning platform that offers users access to an interactive lab.
+- [**Helix Editor Playground**](https://github.com/tomgroenwoldt/helix-editor-playground): Online playground for the terminal based helix editor.
+- [**Coder**](https://github.com/coder/coder): Self-Hosted Remote Development Environments
+- [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. Note: Please add any new contributions to the end of the list only.
+
+## License Agreement
+
+If you contribute code to this project, you implicitly allow your code to be distributed under the MIT license. You are also implicitly verifying that all code is your original work.
+
+Copyright (c) 2017-2022, [The xterm.js authors](https://github.com/xtermjs/xterm.js/graphs/contributors) (MIT License)<br>
+Copyright (c) 2014-2017, SourceLair, Private Company ([www.sourcelair.com](https://www.sourcelair.com/home)) (MIT License)<br>
+Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)

web/node_modules/@xterm/xterm/css/xterm.css

@@ -0,0 +1,218 @@
+/**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+ * https://github.com/chjj/term.js
+ * @license MIT
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * Originally forked from (with the author's permission):
+ *   Fabrice Bellard's javascript vt100 for jslinux:
+ *   http://bellard.org/jslinux/
+ *   Copyright (c) 2011 Fabrice Bellard
+ *   The original design remains. The terminal itself
+ *   has been extended to include xterm CSI codes, among
+ *   other features.
+ */
+
+/**
+ *  Default styles for xterm.js
+ */
+
+.xterm {
+    cursor: text;
+    position: relative;
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+}
+
+.xterm.focus,
+.xterm:focus {
+    outline: none;
+}
+
+.xterm .xterm-helpers {
+    position: absolute;
+    top: 0;
+    /**
+     * The z-index of the helpers must be higher than the canvases in order for
+     * IMEs to appear on top.
+     */
+    z-index: 5;
+}
+
+.xterm .xterm-helper-textarea {
+    padding: 0;
+    border: 0;
+    margin: 0;
+    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
+    position: absolute;
+    opacity: 0;
+    left: -9999em;
+    top: 0;
+    width: 0;
+    height: 0;
+    z-index: -5;
+    /** Prevent wrapping so the IME appears against the textarea at the correct position */
+    white-space: nowrap;
+    overflow: hidden;
+    resize: none;
+}
+
+.xterm .composition-view {
+    /* TODO: Composition position got messed up somewhere */
+    background: #000;
+    color: #FFF;
+    display: none;
+    position: absolute;
+    white-space: nowrap;
+    z-index: 1;
+}
+
+.xterm .composition-view.active {
+    display: block;
+}
+
+.xterm .xterm-viewport {
+    /* On OS X this is required in order for the scroll bar to appear fully opaque */
+    background-color: #000;
+    overflow-y: scroll;
+    cursor: default;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.xterm .xterm-screen {
+    position: relative;
+}
+
+.xterm .xterm-screen canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.xterm .xterm-scroll-area {
+    visibility: hidden;
+}
+
+.xterm-char-measure-element {
+    display: inline-block;
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: -9999em;
+    line-height: normal;
+}
+
+.xterm.enable-mouse-events {
+    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+    cursor: default;
+}
+
+.xterm.xterm-cursor-pointer,
+.xterm .xterm-cursor-pointer {
+    cursor: pointer;
+}
+
+.xterm.column-select.focus {
+    /* Column selection mode */
+    cursor: crosshair;
+}
+
+.xterm .xterm-accessibility:not(.debug),
+.xterm .xterm-message {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    color: transparent;
+    pointer-events: none;
+}
+
+.xterm .xterm-accessibility-tree:not(.debug) *::selection {
+  color: transparent;
+}
+
+.xterm .xterm-accessibility-tree {
+  user-select: text;
+  white-space: pre;
+}
+
+.xterm .live-region {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+.xterm-dim {
+    /* Dim should not apply to background, so the opacity of the foreground color is applied
+     * explicitly in the generated class and reset to 1 here */
+    opacity: 1 !important;
+}
+
+.xterm-underline-1 { text-decoration: underline; }
+.xterm-underline-2 { text-decoration: double underline; }
+.xterm-underline-3 { text-decoration: wavy underline; }
+.xterm-underline-4 { text-decoration: dotted underline; }
+.xterm-underline-5 { text-decoration: dashed underline; }
+
+.xterm-overline {
+    text-decoration: overline;
+}
+
+.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
+.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
+.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
+.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
+.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }
+
+.xterm-strikethrough {
+    text-decoration: line-through;
+}
+
+.xterm-screen .xterm-decoration-container .xterm-decoration {
+	z-index: 6;
+	position: absolute;
+}
+
+.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
+	z-index: 7;
+}
+
+.xterm-decoration-overview-ruler {
+    z-index: 8;
+    position: absolute;
+    top: 0;
+    right: 0;
+    pointer-events: none;
+}
+
+.xterm-decoration-top {
+    z-index: 2;
+    position: relative;
+}

web/node_modules/@xterm/xterm/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@xterm/xterm",
+  "description": "Full xterm terminal, in your browser",
+  "version": "5.5.0",
+  "main": "lib/xterm.js",
+  "style": "css/xterm.css",
+  "types": "typings/xterm.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js",
+  "license": "MIT",
+  "keywords": [
+    "cli",
+    "command-line",
+    "console",
+    "pty",
+    "shell",
+    "ssh",
+    "styles",
+    "terminal-emulator",
+    "terminal",
+    "tty",
+    "vt100",
+    "webgl",
+    "xterm"
+  ],
+  "scripts": {
+    "prepackage": "npm run build",
+    "package": "webpack",
+    "package-headless": "webpack --config ./webpack.config.headless.js",
+    "postpackage-headless": "node ./bin/package_headless.js",
+    "start": "node demo/start",
+    "start-server-only": "node demo/start-server-only",
+    "build-demo": "webpack --config ./demo/webpack.config.js",
+    "lint": "eslint -c .eslintrc.json --max-warnings 0 --ext .ts src/ addons/",
+    "lint-api": "eslint --no-eslintrc -c .eslintrc.json.typings --max-warnings 0 --no-ignore --ext .d.ts typings/",
+    "test": "npm run test-unit",
+    "posttest": "npm run lint",
+    "test-api": "npm run test-api-chromium",
+    "test-api-chromium": "node ./bin/test_api.js --browser=chromium --timeout=20000",
+    "test-api-firefox": "node ./bin/test_api.js --browser=firefox --timeout=20000",
+    "test-api-webkit": "node ./bin/test_api.js --browser=webkit --timeout=20000",
+    "test-playwright": "node ./bin/test_playwright.js --workers=75%",
+    "test-playwright-chromium": "node ./bin/test_playwright.js --workers=75% \"--project=Chrome Stable\"",
+    "test-playwright-firefox": "node ./bin/test_playwright.js --workers=75% \"--project=Firefox Stable\"",
+    "test-playwright-webkit": "node ./bin/test_playwright.js --workers=75% \"--project=WebKit\"",
+    "test-playwright-debug": "node ./bin/test_playwright.js  --workers=1 --headed --timeout=30000",
+    "test-unit": "node ./bin/test.js",
+    "test-unit-coverage": "node ./bin/test.js --coverage",
+    "test-unit-dev": "cross-env NODE_PATH='./out' mocha",
+    "build": "tsc -b ./tsconfig.all.json",
+    "install-addons": "node ./bin/install-addons.js",
+    "presetup": "npm run install-addons",
+    "setup": "npm run build",
+    "prepublishOnly": "npm run package",
+    "watch": "tsc -b -w ./tsconfig.all.json --preserveWatchOutput",
+    "benchmark": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json",
+    "benchmark-baseline": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --baseline out-test/benchmark/test/benchmark/*benchmark.js",
+    "benchmark-eval": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --eval out-test/benchmark/test/benchmark/*benchmark.js",
+    "clean": "rm -rf lib out addons/*/lib addons/*/out",
+    "vtfeatures": "node bin/extract_vtfeatures.js src/**/*.ts src/*.ts"
+  },
+  "devDependencies": {
+    "@lunapaint/png-codec": "^0.2.0",
+    "@playwright/test": "^1.37.1",
+    "@types/chai": "^4.2.22",
+    "@types/debug": "^4.1.7",
+    "@types/deep-equal": "^1.0.1",
+    "@types/express": "4",
+    "@types/express-ws": "^3.0.1",
+    "@types/glob": "^7.2.0",
+    "@types/jsdom": "^16.2.13",
+    "@types/mocha": "^9.0.0",
+    "@types/node": "^18.16.0",
+    "@types/utf8": "^3.0.0",
+    "@types/webpack": "^5.28.0",
+    "@types/ws": "^8.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.00",
+    "@typescript-eslint/parser": "^6.2.00",
+    "chai": "^4.3.4",
+    "cross-env": "^7.0.3",
+    "deep-equal": "^2.0.5",
+    "eslint": "^8.56.0",
+    "eslint-plugin-jsdoc": "^46.9.1",
+    "express": "^4.17.1",
+    "express-ws": "^5.0.2",
+    "glob": "^7.2.0",
+    "jsdom": "^18.0.1",
+    "mocha": "^10.1.0",
+    "mustache": "^4.2.0",
+    "node-pty": "1.1.0-beta5",
+    "nyc": "^15.1.0",
+    "source-map-loader": "^3.0.0",
+    "source-map-support": "^0.5.20",
+    "ts-loader": "^9.3.1",
+    "typescript": "^5.1.6",
+    "utf8": "^3.0.0",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.1",
+    "ws": "^8.2.3",
+    "xterm-benchmark": "^0.3.1"
+  }
+}

web/node_modules/@xterm/xterm/src/browser/AccessibilityManager.ts

@@ -0,0 +1,407 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import * as Strings from 'browser/LocalizableStrings';
+import { ITerminal, IRenderDebouncer } from 'browser/Types';
+import { TimeBasedDebouncer } from 'browser/TimeBasedDebouncer';
+import { Disposable, toDisposable } from 'common/Lifecycle';
+import { ICoreBrowserService, IRenderService } from 'browser/services/Services';
+import { IBuffer } from 'common/buffer/Types';
+import { IInstantiationService } from 'common/services/Services';
+import { addDisposableDomListener } from 'browser/Lifecycle';
+
+const MAX_ROWS_TO_READ = 20;
+
+const enum BoundaryPosition {
+  TOP,
+  BOTTOM
+}
+
+// Turn this on to unhide the accessibility tree and display it under
+// (instead of overlapping with) the terminal.
+const DEBUG = false;
+
+export class AccessibilityManager extends Disposable {
+  private _debugRootContainer: HTMLElement | undefined;
+  private _accessibilityContainer: HTMLElement;
+
+  private _rowContainer: HTMLElement;
+  private _rowElements: HTMLElement[];
+  private _rowColumns: WeakMap<HTMLElement, number[]> = new WeakMap();
+
+  private _liveRegion: HTMLElement;
+  private _liveRegionLineCount: number = 0;
+  private _liveRegionDebouncer: IRenderDebouncer;
+
+  private _topBoundaryFocusListener: (e: FocusEvent) => void;
+  private _bottomBoundaryFocusListener: (e: FocusEvent) => void;
+
+  /**
+   * This queue has a character pushed to it for keys that are pressed, if the
+   * next character added to the terminal is equal to the key char then it is
+   * not announced (added to live region) because it has already been announced
+   * by the textarea event (which cannot be canceled). There are some race
+   * condition cases if there is typing while data is streaming, but this covers
+   * the main case of typing into the prompt and inputting the answer to a
+   * question (Y/N, etc.).
+   */
+  private _charsToConsume: string[] = [];
+
+  private _charsToAnnounce: string = '';
+
+  constructor(
+    private readonly _terminal: ITerminal,
+    @IInstantiationService instantiationService: IInstantiationService,
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
+    @IRenderService private readonly _renderService: IRenderService
+  ) {
+    super();
+    this._accessibilityContainer = this._coreBrowserService.mainDocument.createElement('div');
+    this._accessibilityContainer.classList.add('xterm-accessibility');
+
+    this._rowContainer = this._coreBrowserService.mainDocument.createElement('div');
+    this._rowContainer.setAttribute('role', 'list');
+    this._rowContainer.classList.add('xterm-accessibility-tree');
+    this._rowElements = [];
+    for (let i = 0; i < this._terminal.rows; i++) {
+      this._rowElements[i] = this._createAccessibilityTreeNode();
+      this._rowContainer.appendChild(this._rowElements[i]);
+    }
+
+    this._topBoundaryFocusListener = e => this._handleBoundaryFocus(e, BoundaryPosition.TOP);
+    this._bottomBoundaryFocusListener = e => this._handleBoundaryFocus(e, BoundaryPosition.BOTTOM);
+    this._rowElements[0].addEventListener('focus', this._topBoundaryFocusListener);
+    this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);
+
+    this._refreshRowsDimensions();
+    this._accessibilityContainer.appendChild(this._rowContainer);
+
+    this._liveRegion = this._coreBrowserService.mainDocument.createElement('div');
+    this._liveRegion.classList.add('live-region');
+    this._liveRegion.setAttribute('aria-live', 'assertive');
+    this._accessibilityContainer.appendChild(this._liveRegion);
+    this._liveRegionDebouncer = this.register(new TimeBasedDebouncer(this._renderRows.bind(this)));
+
+    if (!this._terminal.element) {
+      throw new Error('Cannot enable accessibility before Terminal.open');
+    }
+
+    if (DEBUG) {
+      this._accessibilityContainer.classList.add('debug');
+      this._rowContainer.classList.add('debug');
+
+      // Use a `<div class="xterm">` container so that the css will still apply.
+      this._debugRootContainer = document.createElement('div');
+      this._debugRootContainer.classList.add('xterm');
+
+      this._debugRootContainer.appendChild(document.createTextNode('------start a11y------'));
+      this._debugRootContainer.appendChild(this._accessibilityContainer);
+      this._debugRootContainer.appendChild(document.createTextNode('------end a11y------'));
+
+      this._terminal.element.insertAdjacentElement('afterend', this._debugRootContainer);
+    } else {
+      this._terminal.element.insertAdjacentElement('afterbegin', this._accessibilityContainer);
+    }
+
+    this.register(this._terminal.onResize(e => this._handleResize(e.rows)));
+    this.register(this._terminal.onRender(e => this._refreshRows(e.start, e.end)));
+    this.register(this._terminal.onScroll(() => this._refreshRows()));
+    // Line feed is an issue as the prompt won't be read out after a command is run
+    this.register(this._terminal.onA11yChar(char => this._handleChar(char)));
+    this.register(this._terminal.onLineFeed(() => this._handleChar('\n')));
+    this.register(this._terminal.onA11yTab(spaceCount => this._handleTab(spaceCount)));
+    this.register(this._terminal.onKey(e => this._handleKey(e.key)));
+    this.register(this._terminal.onBlur(() => this._clearLiveRegion()));
+    this.register(this._renderService.onDimensionsChange(() => this._refreshRowsDimensions()));
+    this.register(addDisposableDomListener(document, 'selectionchange', () => this._handleSelectionChange()));
+    this.register(this._coreBrowserService.onDprChange(() => this._refreshRowsDimensions()));
+
+    this._refreshRows();
+    this.register(toDisposable(() => {
+      if (DEBUG) {
+        this._debugRootContainer!.remove();
+      } else {
+        this._accessibilityContainer.remove();
+      }
+      this._rowElements.length = 0;
+    }));
+  }
+
+  private _handleTab(spaceCount: number): void {
+    for (let i = 0; i < spaceCount; i++) {
+      this._handleChar(' ');
+    }
+  }
+
+  private _handleChar(char: string): void {
+    if (this._liveRegionLineCount < 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();
+        if (shiftedChar !== char) {
+          this._charsToAnnounce += char;
+        }
+      } else {
+        this._charsToAnnounce += char;
+      }
+
+      if (char === '\n') {
+        this._liveRegionLineCount++;
+        if (this._liveRegionLineCount === MAX_ROWS_TO_READ + 1) {
+          this._liveRegion.textContent += Strings.tooMuchOutput;
+        }
+      }
+    }
+  }
+
+  private _clearLiveRegion(): void {
+    this._liveRegion.textContent = '';
+    this._liveRegionLineCount = 0;
+  }
+
+  private _handleKey(keyChar: string): void {
+    this._clearLiveRegion();
+    // Only add the char if there is no control character.
+    if (!/\p{Control}/u.test(keyChar)) {
+      this._charsToConsume.push(keyChar);
+    }
+  }
+
+  private _refreshRows(start?: number, end?: number): void {
+    this._liveRegionDebouncer.refresh(start, end, this._terminal.rows);
+  }
+
+  private _renderRows(start: number, end: number): void {
+    const buffer: IBuffer = this._terminal.buffer;
+    const setSize = buffer.lines.length.toString();
+    for (let i = start; i <= end; i++) {
+      const line = buffer.lines.get(buffer.ydisp + i);
+      const columns: number[] = [];
+      const lineData = line?.translateToString(true, undefined, undefined, columns) || '';
+      const posInSet = (buffer.ydisp + i + 1).toString();
+      const element = this._rowElements[i];
+      if (element) {
+        if (lineData.length === 0) {
+          element.innerText = '\u00a0';
+          this._rowColumns.set(element, [0, 1]);
+        } else {
+          element.textContent = lineData;
+          this._rowColumns.set(element, columns);
+        }
+        element.setAttribute('aria-posinset', posInSet);
+        element.setAttribute('aria-setsize', setSize);
+      }
+    }
+    this._announceCharacters();
+  }
+
+  private _announceCharacters(): void {
+    if (this._charsToAnnounce.length === 0) {
+      return;
+    }
+    this._liveRegion.textContent += this._charsToAnnounce;
+    this._charsToAnnounce = '';
+  }
+
+  private _handleBoundaryFocus(e: FocusEvent, position: BoundaryPosition): void {
+    const boundaryElement = e.target as HTMLElement;
+    const beforeBoundaryElement = this._rowElements[position === BoundaryPosition.TOP ? 1 : this._rowElements.length - 2];
+
+    // Don't scroll if the buffer top has reached the end in that direction
+    const posInSet = boundaryElement.getAttribute('aria-posinset');
+    const lastRowPos = position === BoundaryPosition.TOP ? '1' : `${this._terminal.buffer.lines.length}`;
+    if (posInSet === lastRowPos) {
+      return;
+    }
+
+    // Don't scroll when the last focused item was not the second row (focus is going the other
+    // direction)
+    if (e.relatedTarget !== beforeBoundaryElement) {
+      return;
+    }
+
+    // Remove old boundary element from array
+    let topBoundaryElement: HTMLElement;
+    let bottomBoundaryElement: HTMLElement;
+    if (position === BoundaryPosition.TOP) {
+      topBoundaryElement = boundaryElement;
+      bottomBoundaryElement = this._rowElements.pop()!;
+      this._rowContainer.removeChild(bottomBoundaryElement);
+    } else {
+      topBoundaryElement = this._rowElements.shift()!;
+      bottomBoundaryElement = boundaryElement;
+      this._rowContainer.removeChild(topBoundaryElement);
+    }
+
+    // Remove listeners from old boundary elements
+    topBoundaryElement.removeEventListener('focus', this._topBoundaryFocusListener);
+    bottomBoundaryElement.removeEventListener('focus', this._bottomBoundaryFocusListener);
+
+    // Add new element to array/DOM
+    if (position === BoundaryPosition.TOP) {
+      const newElement = this._createAccessibilityTreeNode();
+      this._rowElements.unshift(newElement);
+      this._rowContainer.insertAdjacentElement('afterbegin', newElement);
+    } else {
+      const newElement = this._createAccessibilityTreeNode();
+      this._rowElements.push(newElement);
+      this._rowContainer.appendChild(newElement);
+    }
+
+    // Add listeners to new boundary elements
+    this._rowElements[0].addEventListener('focus', this._topBoundaryFocusListener);
+    this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);
+
+    // Scroll up
+    this._terminal.scrollLines(position === BoundaryPosition.TOP ? -1 : 1);
+
+    // Focus new boundary before element
+    this._rowElements[position === BoundaryPosition.TOP ? 1 : this._rowElements.length - 2].focus();
+
+    // Prevent the standard behavior
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+
+  private _handleSelectionChange(): void {
+    if (this._rowElements.length === 0) {
+      return;
+    }
+
+    const selection = document.getSelection();
+    if (!selection) {
+      return;
+    }
+
+    if (selection.isCollapsed) {
+      // Only do something when the anchorNode is inside the row container. This
+      // behavior mirrors what we do with mouse --- if the mouse clicks
+      // somewhere outside of the terminal, we don't clear the selection.
+      if (this._rowContainer.contains(selection.anchorNode)) {
+        this._terminal.clearSelection();
+      }
+      return;
+    }
+
+    if (!selection.anchorNode || !selection.focusNode) {
+      console.error('anchorNode and/or focusNode are null');
+      return;
+    }
+
+    // Sort the two selection points in document order.
+    let begin = { node: selection.anchorNode, offset: selection.anchorOffset };
+    let end = { node: selection.focusNode, offset: selection.focusOffset };
+    if ((begin.node.compareDocumentPosition(end.node) & Node.DOCUMENT_POSITION_PRECEDING) || (begin.node === end.node && begin.offset > end.offset) ) {
+      [begin, end] = [end, begin];
+    }
+
+    // Clamp begin/end to the inside of the row container.
+    if (begin.node.compareDocumentPosition(this._rowElements[0]) & (Node.DOCUMENT_POSITION_CONTAINED_BY | Node.DOCUMENT_POSITION_FOLLOWING)) {
+      begin = { node: this._rowElements[0].childNodes[0], offset: 0 };
+    }
+    if (!this._rowContainer.contains(begin.node)) {
+      // This happens when `begin` is below the last row.
+      return;
+    }
+    const lastRowElement = this._rowElements.slice(-1)[0];
+    if (end.node.compareDocumentPosition(lastRowElement) & (Node.DOCUMENT_POSITION_CONTAINED_BY | Node.DOCUMENT_POSITION_PRECEDING)) {
+      end = {
+        node: lastRowElement,
+        offset: lastRowElement.textContent?.length ?? 0
+      };
+    }
+    if (!this._rowContainer.contains(end.node)) {
+      // This happens when `end` is above the first row.
+      return;
+    }
+
+    const toRowColumn = ({ node, offset }: typeof begin): {row: number, column: number} | null => {
+      // `node` is either the row element or the Text node inside it.
+      const rowElement: any = node instanceof Text ? node.parentNode : node;
+      let row = parseInt(rowElement?.getAttribute('aria-posinset'), 10) - 1;
+      if (isNaN(row)) {
+        console.warn('row is invalid. Race condition?');
+        return null;
+      }
+
+      const columns = this._rowColumns.get(rowElement);
+      if (!columns) {
+        console.warn('columns is null. Race condition?');
+        return null;
+      }
+
+      let column = offset < columns.length ? columns[offset] : columns.slice(-1)[0] + 1;
+      if (column >= this._terminal.cols) {
+        ++row;
+        column = 0;
+      }
+      return {
+        row,
+        column
+      };
+    };
+
+    const beginRowColumn = toRowColumn(begin);
+    const endRowColumn = toRowColumn(end);
+
+    if (!beginRowColumn || !endRowColumn) {
+      return;
+    }
+
+    if (beginRowColumn.row > endRowColumn.row || (beginRowColumn.row === endRowColumn.row && beginRowColumn.column >= endRowColumn.column)) {
+      // This should not happen unless we have some bugs.
+      throw new Error('invalid range');
+    }
+
+    this._terminal.select(
+      beginRowColumn.column,
+      beginRowColumn.row,
+      (endRowColumn.row - beginRowColumn.row) * this._terminal.cols - beginRowColumn.column + endRowColumn.column
+    );
+  }
+
+  private _handleResize(rows: number): void {
+    // Remove bottom boundary listener
+    this._rowElements[this._rowElements.length - 1].removeEventListener('focus', this._bottomBoundaryFocusListener);
+
+    // Grow rows as required
+    for (let i = this._rowContainer.children.length; i < this._terminal.rows; i++) {
+      this._rowElements[i] = this._createAccessibilityTreeNode();
+      this._rowContainer.appendChild(this._rowElements[i]);
+    }
+    // Shrink rows as required
+    while (this._rowElements.length > rows) {
+      this._rowContainer.removeChild(this._rowElements.pop()!);
+    }
+
+    // Add bottom boundary listener
+    this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);
+
+    this._refreshRowsDimensions();
+  }
+
+  private _createAccessibilityTreeNode(): HTMLElement {
+    const element = this._coreBrowserService.mainDocument.createElement('div');
+    element.setAttribute('role', 'listitem');
+    element.tabIndex = -1;
+    this._refreshRowDimensions(element);
+    return element;
+  }
+  private _refreshRowsDimensions(): void {
+    if (!this._renderService.dimensions.css.cell.height) {
+      return;
+    }
+    this._accessibilityContainer.style.width = `${this._renderService.dimensions.css.canvas.width}px`;
+    if (this._rowElements.length !== this._terminal.rows) {
+      this._handleResize(this._terminal.rows);
+    }
+    for (let i = 0; i < this._terminal.rows; i++) {
+      this._refreshRowDimensions(this._rowElements[i]);
+    }
+  }
+  private _refreshRowDimensions(element: HTMLElement): void {
+    element.style.height = `${this._renderService.dimensions.css.cell.height}px`;
+  }
+}

web/node_modules/@xterm/xterm/src/browser/Clipboard.ts

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ISelectionService } from 'browser/services/Services';
+import { ICoreService, IOptionsService } from 'common/services/Services';
+
+/**
+ * Prepares text to be pasted into the terminal by normalizing the line endings
+ * @param text The pasted text that needs processing before inserting into the terminal
+ */
+export function prepareTextForTerminal(text: string): string {
+  return text.replace(/\r?\n/g, '\r');
+}
+
+/**
+ * Bracket text for paste, if necessary, as per https://cirw.in/blog/bracketed-paste
+ * @param text The pasted text to bracket
+ */
+export function bracketTextForPaste(text: string, bracketedPasteMode: boolean): string {
+  if (bracketedPasteMode) {
+    return '\x1b[200~' + text + '\x1b[201~';
+  }
+  return text;
+}
+
+/**
+ * Binds copy functionality to the given terminal.
+ * @param ev The original copy event to be handled
+ */
+export function copyHandler(ev: ClipboardEvent, selectionService: ISelectionService): void {
+  if (ev.clipboardData) {
+    ev.clipboardData.setData('text/plain', selectionService.selectionText);
+  }
+  // Prevent or the original text will be copied.
+  ev.preventDefault();
+}
+
+/**
+ * Redirect the clipboard's data to the terminal's input handler.
+ */
+export function handlePasteEvent(ev: ClipboardEvent, textarea: HTMLTextAreaElement, coreService: ICoreService, optionsService: IOptionsService): void {
+  ev.stopPropagation();
+  if (ev.clipboardData) {
+    const text = ev.clipboardData.getData('text/plain');
+    paste(text, textarea, coreService, optionsService);
+  }
+}
+
+export function paste(text: string, textarea: HTMLTextAreaElement, coreService: ICoreService, optionsService: IOptionsService): void {
+  text = prepareTextForTerminal(text);
+  text = bracketTextForPaste(text, coreService.decPrivateModes.bracketedPasteMode && optionsService.rawOptions.ignoreBracketedPasteMode !== true);
+  coreService.triggerDataEvent(text, true);
+  textarea.value = '';
+}
+
+/**
+ * Moves the textarea under the mouse cursor and focuses it.
+ * @param ev The original right click event to be handled.
+ * @param textarea The terminal's textarea.
+ */
+export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextAreaElement, screenElement: HTMLElement): void {
+
+  // Calculate textarea position relative to the screen element
+  const pos = screenElement.getBoundingClientRect();
+  const left = ev.clientX - pos.left - 10;
+  const top = ev.clientY - pos.top - 10;
+
+  // Bring textarea at the cursor position
+  textarea.style.width = '20px';
+  textarea.style.height = '20px';
+  textarea.style.left = `${left}px`;
+  textarea.style.top = `${top}px`;
+  textarea.style.zIndex = '1000';
+
+  textarea.focus();
+}
+
+/**
+ * Bind to right-click event and allow right-click copy and paste.
+ */
+export function rightClickHandler(ev: MouseEvent, textarea: HTMLTextAreaElement, screenElement: HTMLElement, selectionService: ISelectionService, shouldSelectWord: boolean): void {
+  moveTextAreaUnderMouseCursor(ev, textarea, screenElement);
+
+  if (shouldSelectWord) {
+    selectionService.rightClickSelect(ev);
+  }
+
+  // Get textarea ready to copy from the context menu
+  textarea.value = selectionService.selectionText;
+  textarea.select();
+}

web/node_modules/@xterm/xterm/src/browser/ColorContrastCache.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IColorContrastCache } from 'browser/Types';
+import { IColor } from 'common/Types';
+import { TwoKeyMap } from 'common/MultiKeyMap';
+
+export class ColorContrastCache implements IColorContrastCache {
+  private _color: TwoKeyMap</* bg */number, /* fg */number, IColor | null> = new TwoKeyMap();
+  private _css: TwoKeyMap</* bg */number, /* fg */number, string | null> = new TwoKeyMap();
+
+  public setCss(bg: number, fg: number, value: string | null): void {
+    this._css.set(bg, fg, value);
+  }
+
+  public getCss(bg: number, fg: number): string | null | undefined {
+    return this._css.get(bg, fg);
+  }
+
+  public setColor(bg: number, fg: number, value: IColor | null): void {
+    this._color.set(bg, fg, value);
+  }
+
+  public getColor(bg: number, fg: number): IColor | null | undefined {
+    return this._color.get(bg, fg);
+  }
+
+  public clear(): void {
+    this._color.clear();
+    this._css.clear();
+  }
+}

web/node_modules/@xterm/xterm/src/browser/Lifecycle.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IDisposable } from 'common/Types';
+
+/**
+ * Adds a disposable listener to a node in the DOM, returning the disposable.
+ * @param node The node to add a listener to.
+ * @param type The event type.
+ * @param handler The handler for the listener.
+ * @param options The boolean or options object to pass on to the event
+ * listener.
+ */
+export function addDisposableDomListener(
+  node: Element | Window | Document,
+  type: string,
+  handler: (e: any) => void,
+  options?: boolean | AddEventListenerOptions
+): IDisposable {
+  node.addEventListener(type, handler, options);
+  let disposed = false;
+  return {
+    dispose: () => {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      node.removeEventListener(type, handler, options);
+    }
+  };
+}

web/node_modules/@xterm/xterm/src/browser/Linkifier.ts

@@ -0,0 +1,391 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { addDisposableDomListener } from 'browser/Lifecycle';
+import { IBufferCellPosition, ILink, ILinkDecorations, ILinkWithState, ILinkifier2, ILinkifierEvent } from 'browser/Types';
+import { EventEmitter } from 'common/EventEmitter';
+import { Disposable, disposeArray, getDisposeArrayDisposable, toDisposable } from 'common/Lifecycle';
+import { IDisposable } from 'common/Types';
+import { IBufferService } from 'common/services/Services';
+import { ILinkProviderService, IMouseService, IRenderService } from './services/Services';
+
+export class Linkifier extends Disposable implements ILinkifier2 {
+  public get currentLink(): ILinkWithState | undefined { return this._currentLink; }
+  protected _currentLink: ILinkWithState | undefined;
+  private _mouseDownLink: ILinkWithState | undefined;
+  private _lastMouseEvent: MouseEvent | undefined;
+  private _linkCacheDisposables: IDisposable[] = [];
+  private _lastBufferCell: IBufferCellPosition | undefined;
+  private _isMouseOut: boolean = true;
+  private _wasResized: boolean = false;
+  private _activeProviderReplies: Map<Number, ILinkWithState[] | undefined> | undefined;
+  private _activeLine: number = -1;
+
+  private readonly _onShowLinkUnderline = this.register(new EventEmitter<ILinkifierEvent>());
+  public readonly onShowLinkUnderline = this._onShowLinkUnderline.event;
+  private readonly _onHideLinkUnderline = this.register(new EventEmitter<ILinkifierEvent>());
+  public readonly onHideLinkUnderline = this._onHideLinkUnderline.event;
+
+  constructor(
+    private readonly _element: HTMLElement,
+    @IMouseService private readonly _mouseService: IMouseService,
+    @IRenderService private readonly _renderService: IRenderService,
+    @IBufferService private readonly _bufferService: IBufferService,
+    @ILinkProviderService private readonly _linkProviderService: ILinkProviderService
+  ) {
+    super();
+    this.register(getDisposeArrayDisposable(this._linkCacheDisposables));
+    this.register(toDisposable(() => {
+      this._lastMouseEvent = undefined;
+      // Clear out link providers as they could easily cause an embedder memory leak
+      this._activeProviderReplies?.clear();
+    }));
+    // Listen to resize to catch the case where it's resized and the cursor is out of the viewport.
+    this.register(this._bufferService.onResize(() => {
+      this._clearCurrentLink();
+      this._wasResized = true;
+    }));
+    this.register(addDisposableDomListener(this._element, 'mouseleave', () => {
+      this._isMouseOut = true;
+      this._clearCurrentLink();
+    }));
+    this.register(addDisposableDomListener(this._element, 'mousemove', this._handleMouseMove.bind(this)));
+    this.register(addDisposableDomListener(this._element, 'mousedown', this._handleMouseDown.bind(this)));
+    this.register(addDisposableDomListener(this._element, 'mouseup', this._handleMouseUp.bind(this)));
+  }
+
+  private _handleMouseMove(event: MouseEvent): void {
+    this._lastMouseEvent = event;
+
+    const position = this._positionFromMouseEvent(event, this._element, this._mouseService);
+    if (!position) {
+      return;
+    }
+    this._isMouseOut = false;
+
+    // Ignore the event if it's an embedder created hover widget
+    const composedPath = event.composedPath() as HTMLElement[];
+    for (let i = 0; i < composedPath.length; i++) {
+      const target = composedPath[i];
+      // Hit Terminal.element, break and continue
+      if (target.classList.contains('xterm')) {
+        break;
+      }
+      // It's a hover, don't respect hover event
+      if (target.classList.contains('xterm-hover')) {
+        return;
+      }
+    }
+
+    if (!this._lastBufferCell || (position.x !== this._lastBufferCell.x || position.y !== this._lastBufferCell.y)) {
+      this._handleHover(position);
+      this._lastBufferCell = position;
+    }
+  }
+
+  private _handleHover(position: IBufferCellPosition): void {
+    // TODO: This currently does not cache link provider results across wrapped lines, activeLine
+    //       should be something like `activeRange: {startY, endY}`
+    // Check if we need to clear the link
+    if (this._activeLine !== position.y || this._wasResized) {
+      this._clearCurrentLink();
+      this._askForLink(position, false);
+      this._wasResized = false;
+      return;
+    }
+
+    // Check the if the link is in the mouse position
+    const isCurrentLinkInPosition = this._currentLink && this._linkAtPosition(this._currentLink.link, position);
+    if (!isCurrentLinkInPosition) {
+      this._clearCurrentLink();
+      this._askForLink(position, true);
+    }
+  }
+
+  private _askForLink(position: IBufferCellPosition, useLineCache: boolean): void {
+    if (!this._activeProviderReplies || !useLineCache) {
+      this._activeProviderReplies?.forEach(reply => {
+        reply?.forEach(linkWithState => {
+          if (linkWithState.link.dispose) {
+            linkWithState.link.dispose();
+          }
+        });
+      });
+      this._activeProviderReplies = new Map();
+      this._activeLine = position.y;
+    }
+    let linkProvided = false;
+
+    // There is no link cached, so ask for one
+    for (const [i, linkProvider] of this._linkProviderService.linkProviders.entries()) {
+      if (useLineCache) {
+        const existingReply = this._activeProviderReplies?.get(i);
+        // If there isn't a reply, the provider hasn't responded yet.
+
+        // TODO: If there isn't a reply yet it means that the provider is still resolving. Ensuring
+        // provideLinks isn't triggered again saves ILink.hover firing twice though. This probably
+        // needs promises to get fixed
+        if (existingReply) {
+          linkProvided = this._checkLinkProviderResult(i, position, linkProvided);
+        }
+      } else {
+        linkProvider.provideLinks(position.y, (links: ILink[] | undefined) => {
+          if (this._isMouseOut) {
+            return;
+          }
+          const linksWithState: ILinkWithState[] | undefined = links?.map(link  => ({ link }));
+          this._activeProviderReplies?.set(i, linksWithState);
+          linkProvided = this._checkLinkProviderResult(i, position, linkProvided);
+
+          // If all providers have responded, remove lower priority links that intersect ranges of
+          // higher priority links
+          if (this._activeProviderReplies?.size === this._linkProviderService.linkProviders.length) {
+            this._removeIntersectingLinks(position.y, this._activeProviderReplies);
+          }
+        });
+      }
+    }
+  }
+
+  private _removeIntersectingLinks(y: number, replies: Map<Number, ILinkWithState[] | undefined>): void {
+    const occupiedCells = new Set<number>();
+    for (let i = 0; i < replies.size; i++) {
+      const providerReply = replies.get(i);
+      if (!providerReply) {
+        continue;
+      }
+      for (let i = 0; i < providerReply.length; i++) {
+        const linkWithState = providerReply[i];
+        const startX = linkWithState.link.range.start.y < y ? 0 : linkWithState.link.range.start.x;
+        const endX = linkWithState.link.range.end.y > y ? this._bufferService.cols : linkWithState.link.range.end.x;
+        for (let x = startX; x <= endX; x++) {
+          if (occupiedCells.has(x)) {
+            providerReply.splice(i--, 1);
+            break;
+          }
+          occupiedCells.add(x);
+        }
+      }
+    }
+  }
+
+  private _checkLinkProviderResult(index: number, position: IBufferCellPosition, linkProvided: boolean): boolean {
+    if (!this._activeProviderReplies) {
+      return linkProvided;
+    }
+
+    const links = this._activeProviderReplies.get(index);
+
+    // Check if every provider before this one has come back undefined
+    let hasLinkBefore = false;
+    for (let j = 0; j < index; j++) {
+      if (!this._activeProviderReplies.has(j) || this._activeProviderReplies.get(j)) {
+        hasLinkBefore = true;
+      }
+    }
+
+    // If all providers with higher priority came back undefined, then this provider's link for
+    // the position should be used
+    if (!hasLinkBefore && links) {
+      const linkAtPosition = links.find(link => this._linkAtPosition(link.link, position));
+      if (linkAtPosition) {
+        linkProvided = true;
+        this._handleNewLink(linkAtPosition);
+      }
+    }
+
+    // Check if all the providers have responded
+    if (this._activeProviderReplies.size === this._linkProviderService.linkProviders.length && !linkProvided) {
+      // Respect the order of the link providers
+      for (let j = 0; j < this._activeProviderReplies.size; j++) {
+        const currentLink = this._activeProviderReplies.get(j)?.find(link => this._linkAtPosition(link.link, position));
+        if (currentLink) {
+          linkProvided = true;
+          this._handleNewLink(currentLink);
+          break;
+        }
+      }
+    }
+
+    return linkProvided;
+  }
+
+  private _handleMouseDown(): void {
+    this._mouseDownLink = this._currentLink;
+  }
+
+  private _handleMouseUp(event: MouseEvent): void {
+    if (!this._currentLink) {
+      return;
+    }
+
+    const position = this._positionFromMouseEvent(event, this._element, this._mouseService);
+    if (!position) {
+      return;
+    }
+
+    if (this._mouseDownLink === this._currentLink && this._linkAtPosition(this._currentLink.link, position)) {
+      this._currentLink.link.activate(event, this._currentLink.link.text);
+    }
+  }
+
+  private _clearCurrentLink(startRow?: number, endRow?: number): void {
+    if (!this._currentLink || !this._lastMouseEvent) {
+      return;
+    }
+
+    // If we have a start and end row, check that the link is within it
+    if (!startRow || !endRow || (this._currentLink.link.range.start.y >= startRow && this._currentLink.link.range.end.y <= endRow)) {
+      this._linkLeave(this._element, this._currentLink.link, this._lastMouseEvent);
+      this._currentLink = undefined;
+      disposeArray(this._linkCacheDisposables);
+    }
+  }
+
+  private _handleNewLink(linkWithState: ILinkWithState): void {
+    if (!this._lastMouseEvent) {
+      return;
+    }
+
+    const position = this._positionFromMouseEvent(this._lastMouseEvent, this._element, this._mouseService);
+
+    if (!position) {
+      return;
+    }
+
+    // Trigger hover if the we have a link at the position
+    if (this._linkAtPosition(linkWithState.link, position)) {
+      this._currentLink = linkWithState;
+      this._currentLink.state = {
+        decorations: {
+          underline: linkWithState.link.decorations === undefined ? true : linkWithState.link.decorations.underline,
+          pointerCursor: linkWithState.link.decorations === undefined ? true : linkWithState.link.decorations.pointerCursor
+        },
+        isHovered: true
+      };
+      this._linkHover(this._element, linkWithState.link, this._lastMouseEvent);
+
+      // Add listener for tracking decorations changes
+      linkWithState.link.decorations = {} as ILinkDecorations;
+      Object.defineProperties(linkWithState.link.decorations, {
+        pointerCursor: {
+          get: () => this._currentLink?.state?.decorations.pointerCursor,
+          set: v => {
+            if (this._currentLink?.state && this._currentLink.state.decorations.pointerCursor !== v) {
+              this._currentLink.state.decorations.pointerCursor = v;
+              if (this._currentLink.state.isHovered) {
+                this._element.classList.toggle('xterm-cursor-pointer', v);
+              }
+            }
+          }
+        },
+        underline: {
+          get: () => this._currentLink?.state?.decorations.underline,
+          set: v => {
+            if (this._currentLink?.state && this._currentLink?.state?.decorations.underline !== v) {
+              this._currentLink.state.decorations.underline = v;
+              if (this._currentLink.state.isHovered) {
+                this._fireUnderlineEvent(linkWithState.link, v);
+              }
+            }
+          }
+        }
+      });
+
+      // Listen to viewport changes to re-render the link under the cursor (only when the line the
+      // link is on changes)
+      this._linkCacheDisposables.push(this._renderService.onRenderedViewportChange(e => {
+        // Sanity check, this shouldn't happen in practice as this listener would be disposed
+        if (!this._currentLink) {
+          return;
+        }
+        // When start is 0 a scroll most likely occurred, make sure links above the fold also get
+        // cleared.
+        const start = e.start === 0 ? 0 : e.start + 1 + this._bufferService.buffer.ydisp;
+        const end = this._bufferService.buffer.ydisp + 1 + e.end;
+        // Only clear the link if the viewport change happened on this line
+        if (this._currentLink.link.range.start.y >= start && this._currentLink.link.range.end.y <= end) {
+          this._clearCurrentLink(start, end);
+          if (this._lastMouseEvent) {
+            // re-eval previously active link after changes
+            const position = this._positionFromMouseEvent(this._lastMouseEvent, this._element, this._mouseService!);
+            if (position) {
+              this._askForLink(position, false);
+            }
+          }
+        }
+      }));
+    }
+  }
+
+  protected _linkHover(element: HTMLElement, link: ILink, event: MouseEvent): void {
+    if (this._currentLink?.state) {
+      this._currentLink.state.isHovered = true;
+      if (this._currentLink.state.decorations.underline) {
+        this._fireUnderlineEvent(link, true);
+      }
+      if (this._currentLink.state.decorations.pointerCursor) {
+        element.classList.add('xterm-cursor-pointer');
+      }
+    }
+
+    if (link.hover) {
+      link.hover(event, link.text);
+    }
+  }
+
+  private _fireUnderlineEvent(link: ILink, showEvent: boolean): void {
+    const range = link.range;
+    const scrollOffset = this._bufferService.buffer.ydisp;
+    const event = this._createLinkUnderlineEvent(range.start.x - 1, range.start.y - scrollOffset - 1, range.end.x, range.end.y - scrollOffset - 1, undefined);
+    const emitter = showEvent ? this._onShowLinkUnderline : this._onHideLinkUnderline;
+    emitter.fire(event);
+  }
+
+  protected _linkLeave(element: HTMLElement, link: ILink, event: MouseEvent): void {
+    if (this._currentLink?.state) {
+      this._currentLink.state.isHovered = false;
+      if (this._currentLink.state.decorations.underline) {
+        this._fireUnderlineEvent(link, false);
+      }
+      if (this._currentLink.state.decorations.pointerCursor) {
+        element.classList.remove('xterm-cursor-pointer');
+      }
+    }
+
+    if (link.leave) {
+      link.leave(event, link.text);
+    }
+  }
+
+  /**
+   * Check if the buffer position is within the link
+   * @param link
+   * @param position
+   */
+  private _linkAtPosition(link: ILink, position: IBufferCellPosition): boolean {
+    const lower = link.range.start.y * this._bufferService.cols + link.range.start.x;
+    const upper = link.range.end.y * this._bufferService.cols + link.range.end.x;
+    const current = position.y * this._bufferService.cols + position.x;
+    return (lower <= current && current <= upper);
+  }
+
+  /**
+   * Get the buffer position from a mouse event
+   * @param event
+   */
+  private _positionFromMouseEvent(event: MouseEvent, element: HTMLElement, mouseService: IMouseService): IBufferCellPosition | undefined {
+    const coords = mouseService.getCoords(event, element, this._bufferService.cols, this._bufferService.rows);
+    if (!coords) {
+      return;
+    }
+
+    return { x: coords[0], y: coords[1] + this._bufferService.buffer.ydisp };
+  }
+
+  private _createLinkUnderlineEvent(x1: number, y1: number, x2: number, y2: number, fg: number | undefined): ILinkifierEvent {
+    return { x1, y1, x2, y2, cols: this._bufferService.cols, fg };
+  }
+}

web/node_modules/@xterm/xterm/src/browser/LocalizableStrings.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+// This file contains strings that get exported in the API so they can be localized
+
+// eslint-disable-next-line prefer-const
+export let promptLabel = 'Terminal input';
+
+// eslint-disable-next-line prefer-const
+export let tooMuchOutput = 'Too much output to announce, navigate to rows manually to read';

web/node_modules/@xterm/xterm/src/browser/OscLinkProvider.ts

@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) 2022 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IBufferRange, ILink } from 'browser/Types';
+import { ILinkProvider } from 'browser/services/Services';
+import { CellData } from 'common/buffer/CellData';
+import { IBufferService, IOptionsService, IOscLinkService } from 'common/services/Services';
+
+export class OscLinkProvider implements ILinkProvider {
+  constructor(
+    @IBufferService private readonly _bufferService: IBufferService,
+    @IOptionsService private readonly _optionsService: IOptionsService,
+    @IOscLinkService private readonly _oscLinkService: IOscLinkService
+  ) {
+  }
+
+  public provideLinks(y: number, callback: (links: ILink[] | undefined) => void): void {
+    const line = this._bufferService.buffer.lines.get(y - 1);
+    if (!line) {
+      callback(undefined);
+      return;
+    }
+
+    const result: ILink[] = [];
+    const linkHandler = this._optionsService.rawOptions.linkHandler;
+    const cell = new CellData();
+    const lineLength = line.getTrimmedLength();
+    let currentLinkId = -1;
+    let currentStart = -1;
+    let finishLink = false;
+    for (let x = 0; x < lineLength; x++) {
+      // Minor optimization, only check for content if there isn't a link in case the link ends with
+      // a null cell
+      if (currentStart === -1 && !line.hasContent(x)) {
+        continue;
+      }
+
+      line.loadCell(x, cell);
+      if (cell.hasExtendedAttrs() && cell.extended.urlId) {
+        if (currentStart === -1) {
+          currentStart = x;
+          currentLinkId = cell.extended.urlId;
+          continue;
+        } else {
+          finishLink = cell.extended.urlId !== currentLinkId;
+        }
+      } else {
+        if (currentStart !== -1) {
+          finishLink = true;
+        }
+      }
+
+      if (finishLink || (currentStart !== -1 && x === lineLength - 1)) {
+        const text = this._oscLinkService.getLinkData(currentLinkId)?.uri;
+        if (text) {
+          // These ranges are 1-based
+          const range: IBufferRange = {
+            start: {
+              x: currentStart + 1,
+              y
+            },
+            end: {
+              // Offset end x if it's a link that ends on the last cell in the line
+              x: x + (!finishLink && x === lineLength - 1 ? 1 : 0),
+              y
+            }
+          };
+
+          let ignoreLink = false;
+          if (!linkHandler?.allowNonHttpProtocols) {
+            try {
+              const parsed = new URL(text);
+              if (!['http:', 'https:'].includes(parsed.protocol)) {
+                ignoreLink = true;
+              }
+            } catch (e) {
+              // Ignore invalid URLs to prevent unexpected behaviors
+              ignoreLink = true;
+            }
+          }
+
+          if (!ignoreLink) {
+            // OSC links always use underline and pointer decorations
+            result.push({
+              text,
+              range,
+              activate: (e, text) => (linkHandler ? linkHandler.activate(e, text, range) : defaultActivate(e, text)),
+              hover: (e, text) => linkHandler?.hover?.(e, text, range),
+              leave: (e, text) => linkHandler?.leave?.(e, text, range)
+            });
+          }
+        }
+        finishLink = false;
+
+        // Clear link or start a new link if one starts immediately
+        if (cell.hasExtendedAttrs() && cell.extended.urlId) {
+          currentStart = x;
+          currentLinkId = cell.extended.urlId;
+        } else {
+          currentStart = -1;
+          currentLinkId = -1;
+        }
+      }
+    }
+
+    // TODO: Handle fetching and returning other link ranges to underline other links with the same
+    //       id
+    callback(result);
+  }
+}
+
+function defaultActivate(e: MouseEvent, uri: string): void {
+  const answer = confirm(`Do you want to navigate to ${uri}?\n\nWARNING: This link could potentially be dangerous`);
+  if (answer) {
+    const newWindow = window.open();
+    if (newWindow) {
+      try {
+        newWindow.opener = null;
+      } catch {
+        // no-op, Electron can throw
+      }
+      newWindow.location.href = uri;
+    } else {
+      console.warn('Opening link blocked as opener could not be cleared');
+    }
+  }
+}

web/node_modules/@xterm/xterm/src/browser/RenderDebouncer.ts

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IRenderDebouncerWithCallback } from 'browser/Types';
+import { ICoreBrowserService } from 'browser/services/Services';
+
+/**
+ * Debounces calls to render terminal rows using animation frames.
+ */
+export class RenderDebouncer implements IRenderDebouncerWithCallback {
+  private _rowStart: number | undefined;
+  private _rowEnd: number | undefined;
+  private _rowCount: number | undefined;
+  private _animationFrame: number | undefined;
+  private _refreshCallbacks: FrameRequestCallback[] = [];
+
+  constructor(
+    private _renderCallback: (start: number, end: number) => void,
+    private readonly _coreBrowserService: ICoreBrowserService
+  ) {
+  }
+
+  public dispose(): void {
+    if (this._animationFrame) {
+      this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
+      this._animationFrame = undefined;
+    }
+  }
+
+  public addRefreshCallback(callback: FrameRequestCallback): number {
+    this._refreshCallbacks.push(callback);
+    if (!this._animationFrame) {
+      this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => this._innerRefresh());
+    }
+    return this._animationFrame;
+  }
+
+  public refresh(rowStart: number | undefined, rowEnd: number | undefined, rowCount: number): void {
+    this._rowCount = rowCount;
+    // Get the min/max row start/end for the arg values
+    rowStart = rowStart !== undefined ? rowStart : 0;
+    rowEnd = rowEnd !== undefined ? rowEnd : this._rowCount - 1;
+    // Set the properties to the updated values
+    this._rowStart = this._rowStart !== undefined ? Math.min(this._rowStart, rowStart) : rowStart;
+    this._rowEnd = this._rowEnd !== undefined ? Math.max(this._rowEnd, rowEnd) : rowEnd;
+
+    if (this._animationFrame) {
+      return;
+    }
+
+    this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => this._innerRefresh());
+  }
+
+  private _innerRefresh(): void {
+    this._animationFrame = undefined;
+
+    // Make sure values are set
+    if (this._rowStart === undefined || this._rowEnd === undefined || this._rowCount === undefined) {
+      this._runRefreshCallbacks();
+      return;
+    }
+
+    // Clamp values
+    const start = Math.max(this._rowStart, 0);
+    const end = Math.min(this._rowEnd, this._rowCount - 1);
+
+    // Reset debouncer (this happens before render callback as the render could trigger it again)
+    this._rowStart = undefined;
+    this._rowEnd = undefined;
+
+    // Run render callback
+    this._renderCallback(start, end);
+    this._runRefreshCallbacks();
+  }
+
+  private _runRefreshCallbacks(): void {
+    for (const callback of this._refreshCallbacks) {
+      callback(0);
+    }
+    this._refreshCallbacks = [];
+  }
+}

web/node_modules/@xterm/xterm/src/browser/TimeBasedDebouncer.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+const RENDER_DEBOUNCE_THRESHOLD_MS = 1000; // 1 Second
+
+import { IRenderDebouncer } from 'browser/Types';
+
+/**
+ * Debounces calls to update screen readers to update at most once configurable interval of time.
+ */
+export class TimeBasedDebouncer implements IRenderDebouncer {
+  private _rowStart: number | undefined;
+  private _rowEnd: number | undefined;
+  private _rowCount: number | undefined;
+
+  // The last moment that the Terminal was refreshed at
+  private _lastRefreshMs = 0;
+  // Whether a trailing refresh should be triggered due to a refresh request that was throttled
+  private _additionalRefreshRequested = false;
+
+  private _refreshTimeoutID: number | undefined;
+
+  constructor(
+    private _renderCallback: (start: number, end: number) => void,
+    private readonly _debounceThresholdMS = RENDER_DEBOUNCE_THRESHOLD_MS
+  ) {
+  }
+
+  public dispose(): void {
+    if (this._refreshTimeoutID) {
+      clearTimeout(this._refreshTimeoutID);
+    }
+  }
+
+  public refresh(rowStart: number | undefined, rowEnd: number | undefined, rowCount: number): void {
+    this._rowCount = rowCount;
+    // Get the min/max row start/end for the arg values
+    rowStart = rowStart !== undefined ? rowStart : 0;
+    rowEnd = rowEnd !== undefined ? rowEnd : this._rowCount - 1;
+    // Set the properties to the updated values
+    this._rowStart = this._rowStart !== undefined ? Math.min(this._rowStart, rowStart) : rowStart;
+    this._rowEnd = this._rowEnd !== undefined ? Math.max(this._rowEnd, rowEnd) : rowEnd;
+
+    // Only refresh if the time since last refresh is above a threshold, otherwise wait for
+    // enough time to pass before refreshing again.
+    const refreshRequestTime: number = Date.now();
+    if (refreshRequestTime - this._lastRefreshMs >= this._debounceThresholdMS) {
+      // Enough time has lapsed since the last refresh; refresh immediately
+      this._lastRefreshMs = refreshRequestTime;
+      this._innerRefresh();
+    } else if (!this._additionalRefreshRequested) {
+      // This is the first additional request throttled; set up trailing refresh
+      const elapsed = refreshRequestTime - this._lastRefreshMs;
+      const waitPeriodBeforeTrailingRefresh = this._debounceThresholdMS - elapsed;
+      this._additionalRefreshRequested = true;
+
+      this._refreshTimeoutID = window.setTimeout(() => {
+        this._lastRefreshMs = Date.now();
+        this._innerRefresh();
+        this._additionalRefreshRequested = false;
+        this._refreshTimeoutID = undefined; // No longer need to clear the timeout
+      }, waitPeriodBeforeTrailingRefresh);
+    }
+  }
+
+  private _innerRefresh(): void {
+    // Make sure values are set
+    if (this._rowStart === undefined || this._rowEnd === undefined || this._rowCount === undefined) {
+      return;
+    }
+
+    // Clamp values
+    const start = Math.max(this._rowStart, 0);
+    const end = Math.min(this._rowEnd, this._rowCount - 1);
+
+    // Reset debouncer (this happens before render callback as the render could trigger it again)
+    this._rowStart = undefined;
+    this._rowEnd = undefined;
+
+    // Run render callback
+    this._renderCallback(start, end);
+  }
+}
+

web/node_modules/@xterm/xterm/src/browser/Types.d.ts

@@ -0,0 +1,174 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IEvent } from 'common/EventEmitter';
+import { CharData, IColor, ICoreTerminal, ITerminalOptions } from 'common/Types';
+import { IBuffer } from 'common/buffer/Types';
+import { IDisposable, Terminal as ITerminalApi } from '@xterm/xterm';
+
+/**
+ * A portion of the public API that are implemented identially internally and simply passed through.
+ */
+type InternalPassthroughApis = Omit<ITerminalApi, 'buffer' | 'parser' | 'unicode' | 'modes' | 'writeln' | 'loadAddon'>;
+
+export interface ITerminal extends InternalPassthroughApis, ICoreTerminal {
+  screenElement: HTMLElement | undefined;
+  browser: IBrowser;
+  buffer: IBuffer;
+  linkifier: ILinkifier2 | undefined;
+  viewport: IViewport | undefined;
+  options: Required<ITerminalOptions>;
+
+  onBlur: IEvent<void>;
+  onFocus: IEvent<void>;
+  onA11yChar: IEvent<string>;
+  onA11yTab: IEvent<number>;
+  onWillOpen: IEvent<HTMLElement>;
+
+  cancel(ev: Event, force?: boolean): boolean | void;
+}
+
+export type CustomKeyEventHandler = (event: KeyboardEvent) => boolean;
+export type CustomWheelEventHandler = (event: WheelEvent) => boolean;
+
+export type LineData = CharData[];
+
+export interface ICompositionHelper {
+  readonly isComposing: boolean;
+  compositionstart(): void;
+  compositionupdate(ev: CompositionEvent): void;
+  compositionend(): void;
+  updateCompositionElements(dontRecurse?: boolean): void;
+  keydown(ev: KeyboardEvent): boolean;
+}
+
+export interface IBrowser {
+  isNode: boolean;
+  userAgent: string;
+  platform: string;
+  isFirefox: boolean;
+  isMac: boolean;
+  isIpad: boolean;
+  isIphone: boolean;
+  isWindows: boolean;
+}
+
+export interface IColorSet {
+  foreground: IColor;
+  background: IColor;
+  cursor: IColor;
+  cursorAccent: IColor;
+  selectionForeground: IColor | undefined;
+  selectionBackgroundTransparent: IColor;
+  /** The selection blended on top of background. */
+  selectionBackgroundOpaque: IColor;
+  selectionInactiveBackgroundTransparent: IColor;
+  selectionInactiveBackgroundOpaque: IColor;
+  ansi: IColor[];
+  /** Maps original colors to colors that respect minimum contrast ratio. */
+  contrastCache: IColorContrastCache;
+  /** Maps original colors to colors that respect _half_ of the minimum contrast ratio. */
+  halfContrastCache: IColorContrastCache;
+}
+
+export type ReadonlyColorSet = Readonly<Omit<IColorSet, 'ansi'>> & { ansi: Readonly<Pick<IColorSet, 'ansi'>['ansi']> };
+
+export interface IColorContrastCache {
+  clear(): void;
+  setCss(bg: number, fg: number, value: string | null): void;
+  getCss(bg: number, fg: number): string | null | undefined;
+  setColor(bg: number, fg: number, value: IColor | null): void;
+  getColor(bg: number, fg: number): IColor | null | undefined;
+}
+
+export interface IPartialColorSet {
+  foreground: IColor;
+  background: IColor;
+  cursor?: IColor;
+  cursorAccent?: IColor;
+  selectionBackground?: IColor;
+  ansi: IColor[];
+}
+
+export interface IViewport extends IDisposable {
+  scrollBarWidth: number;
+  readonly onRequestScrollLines: IEvent<{ amount: number, suppressScrollEvent: boolean }>;
+  syncScrollArea(immediate?: boolean, force?: boolean): void;
+  getLinesScrolled(ev: WheelEvent): number;
+  getBufferElements(startLine: number, endLine?: number): { bufferElements: HTMLElement[], cursorElement?: HTMLElement };
+  handleWheel(ev: WheelEvent): boolean;
+  handleTouchStart(ev: TouchEvent): void;
+  handleTouchMove(ev: TouchEvent): boolean;
+  scrollLines(disp: number): void;  // todo api name?
+  reset(): void;
+}
+
+export interface ILinkifierEvent {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  cols: number;
+  fg: number | undefined;
+}
+
+interface ILinkState {
+  decorations: ILinkDecorations;
+  isHovered: boolean;
+}
+export interface ILinkWithState {
+  link: ILink;
+  state?: ILinkState;
+}
+
+export interface ILinkifier2 extends IDisposable {
+  onShowLinkUnderline: IEvent<ILinkifierEvent>;
+  onHideLinkUnderline: IEvent<ILinkifierEvent>;
+  readonly currentLink: ILinkWithState | undefined;
+}
+
+interface ILink {
+  range: IBufferRange;
+  text: string;
+  decorations?: ILinkDecorations;
+  activate(event: MouseEvent, text: string): void;
+  hover?(event: MouseEvent, text: string): void;
+  leave?(event: MouseEvent, text: string): void;
+  dispose?(): void;
+}
+
+interface ILinkDecorations {
+  pointerCursor: boolean;
+  underline: boolean;
+}
+
+interface IBufferRange {
+  start: IBufferCellPosition;
+  end: IBufferCellPosition;
+}
+
+interface IBufferCellPosition {
+  x: number;
+  y: number;
+}
+
+export type CharacterJoinerHandler = (text: string) => [number, number][];
+
+export interface ICharacterJoiner {
+  id: number;
+  handler: CharacterJoinerHandler;
+}
+
+export interface IRenderDebouncer extends IDisposable {
+  refresh(rowStart: number | undefined, rowEnd: number | undefined, rowCount: number): void;
+}
+
+export interface IRenderDebouncerWithCallback extends IRenderDebouncer {
+  addRefreshCallback(callback: FrameRequestCallback): number;
+}
+
+export interface IBufferElementProvider {
+  provideBufferElements(): DocumentFragment | HTMLElement;
+}

web/node_modules/@xterm/xterm/src/browser/Viewport.ts

@@ -0,0 +1,401 @@
+/**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { addDisposableDomListener } from 'browser/Lifecycle';
+import { IViewport, ReadonlyColorSet } from 'browser/Types';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
+import { ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
+import { EventEmitter } from 'common/EventEmitter';
+import { Disposable } from 'common/Lifecycle';
+import { IBuffer } from 'common/buffer/Types';
+import { IBufferService, IOptionsService } from 'common/services/Services';
+
+const FALLBACK_SCROLL_BAR_WIDTH = 15;
+
+interface ISmoothScrollState {
+  startTime: number;
+  origin: number;
+  target: number;
+}
+
+/**
+ * Represents the viewport of a terminal, the visible area within the larger buffer of output.
+ * Logic for the virtual scroll bar is included in this object.
+ */
+export class Viewport extends Disposable implements IViewport {
+  public scrollBarWidth: number = 0;
+  private _currentRowHeight: number = 0;
+  private _currentDeviceCellHeight: number = 0;
+  private _lastRecordedBufferLength: number = 0;
+  private _lastRecordedViewportHeight: number = 0;
+  private _lastRecordedBufferHeight: number = 0;
+  private _lastTouchY: number = 0;
+  private _lastScrollTop: number = 0;
+  private _activeBuffer: IBuffer;
+  private _renderDimensions: IRenderDimensions;
+
+  // Stores a partial line amount when scrolling, this is used to keep track of how much of a line
+  // is scrolled so we can "scroll" over partial lines and feel natural on touchpads. This is a
+  // quick fix and could have a more robust solution in place that reset the value when needed.
+  private _wheelPartialScroll: number = 0;
+
+  private _refreshAnimationFrame: number | null = null;
+  private _ignoreNextScrollEvent: boolean = false;
+  private _smoothScrollState: ISmoothScrollState = {
+    startTime: 0,
+    origin: -1,
+    target: -1
+  };
+
+  private readonly _onRequestScrollLines = this.register(new EventEmitter<{ amount: number, suppressScrollEvent: boolean }>());
+  public readonly onRequestScrollLines = this._onRequestScrollLines.event;
+
+  constructor(
+    private readonly _viewportElement: HTMLElement,
+    private readonly _scrollArea: HTMLElement,
+    @IBufferService private readonly _bufferService: IBufferService,
+    @IOptionsService private readonly _optionsService: IOptionsService,
+    @ICharSizeService private readonly _charSizeService: ICharSizeService,
+    @IRenderService private readonly _renderService: IRenderService,
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
+    @IThemeService themeService: IThemeService
+  ) {
+    super();
+
+    // Measure the width of the scrollbar. If it is 0 we can assume it's an OSX overlay scrollbar.
+    // Unfortunately the overlay scrollbar would be hidden underneath the screen element in that
+    // case, therefore we account for a standard amount to make it visible
+    this.scrollBarWidth = (this._viewportElement.offsetWidth - this._scrollArea.offsetWidth) || FALLBACK_SCROLL_BAR_WIDTH;
+    this.register(addDisposableDomListener(this._viewportElement, 'scroll', this._handleScroll.bind(this)));
+
+    // Track properties used in performance critical code manually to avoid using slow getters
+    this._activeBuffer = this._bufferService.buffer;
+    this.register(this._bufferService.buffers.onBufferActivate(e => this._activeBuffer = e.activeBuffer));
+    this._renderDimensions = this._renderService.dimensions;
+    this.register(this._renderService.onDimensionsChange(e => this._renderDimensions = e));
+
+    this._handleThemeChange(themeService.colors);
+    this.register(themeService.onChangeColors(e => this._handleThemeChange(e)));
+    this.register(this._optionsService.onSpecificOptionChange('scrollback', () => this.syncScrollArea()));
+
+    // Perform this async to ensure the ICharSizeService is ready.
+    setTimeout(() => this.syncScrollArea());
+  }
+
+  private _handleThemeChange(colors: ReadonlyColorSet): void {
+    this._viewportElement.style.backgroundColor = colors.background.css;
+  }
+
+  public reset(): void {
+    this._currentRowHeight = 0;
+    this._currentDeviceCellHeight = 0;
+    this._lastRecordedBufferLength = 0;
+    this._lastRecordedViewportHeight = 0;
+    this._lastRecordedBufferHeight = 0;
+    this._lastTouchY = 0;
+    this._lastScrollTop = 0;
+    // Sync on next animation frame to ensure the new terminal state is used
+    this._coreBrowserService.window.requestAnimationFrame(() => this.syncScrollArea());
+  }
+
+  /**
+   * Refreshes row height, setting line-height, viewport height and scroll area height if
+   * necessary.
+   */
+  private _refresh(immediate: boolean): void {
+    if (immediate) {
+      this._innerRefresh();
+      if (this._refreshAnimationFrame !== null) {
+        this._coreBrowserService.window.cancelAnimationFrame(this._refreshAnimationFrame);
+      }
+      return;
+    }
+    if (this._refreshAnimationFrame === null) {
+      this._refreshAnimationFrame = this._coreBrowserService.window.requestAnimationFrame(() => this._innerRefresh());
+    }
+  }
+
+  private _innerRefresh(): void {
+    if (this._charSizeService.height > 0) {
+      this._currentRowHeight = this._renderDimensions.device.cell.height / this._coreBrowserService.dpr;
+      this._currentDeviceCellHeight = this._renderDimensions.device.cell.height;
+      this._lastRecordedViewportHeight = this._viewportElement.offsetHeight;
+      const newBufferHeight = Math.round(this._currentRowHeight * this._lastRecordedBufferLength) + (this._lastRecordedViewportHeight - this._renderDimensions.css.canvas.height);
+      if (this._lastRecordedBufferHeight !== newBufferHeight) {
+        this._lastRecordedBufferHeight = newBufferHeight;
+        this._scrollArea.style.height = this._lastRecordedBufferHeight + 'px';
+      }
+    }
+
+    // Sync scrollTop
+    const scrollTop = this._bufferService.buffer.ydisp * this._currentRowHeight;
+    if (this._viewportElement.scrollTop !== scrollTop) {
+      // Ignore the next scroll event which will be triggered by setting the scrollTop as we do not
+      // want this event to scroll the terminal
+      this._ignoreNextScrollEvent = true;
+      this._viewportElement.scrollTop = scrollTop;
+    }
+
+    this._refreshAnimationFrame = null;
+  }
+
+  /**
+   * Updates dimensions and synchronizes the scroll area if necessary.
+   */
+  public syncScrollArea(immediate: boolean = false): void {
+    // If buffer height changed
+    if (this._lastRecordedBufferLength !== this._bufferService.buffer.lines.length) {
+      this._lastRecordedBufferLength = this._bufferService.buffer.lines.length;
+      this._refresh(immediate);
+      return;
+    }
+
+    // If viewport height changed
+    if (this._lastRecordedViewportHeight !== this._renderService.dimensions.css.canvas.height) {
+      this._refresh(immediate);
+      return;
+    }
+
+    // If the buffer position doesn't match last scroll top
+    if (this._lastScrollTop !== this._activeBuffer.ydisp * this._currentRowHeight) {
+      this._refresh(immediate);
+      return;
+    }
+
+    // If row height changed
+    if (this._renderDimensions.device.cell.height !== this._currentDeviceCellHeight) {
+      this._refresh(immediate);
+      return;
+    }
+  }
+
+  /**
+   * Handles scroll events on the viewport, calculating the new viewport and requesting the
+   * terminal to scroll to it.
+   * @param ev The scroll event.
+   */
+  private _handleScroll(ev: Event): void {
+    // Record current scroll top position
+    this._lastScrollTop = this._viewportElement.scrollTop;
+
+    // Don't attempt to scroll if the element is not visible, otherwise scrollTop will be corrupt
+    // which causes the terminal to scroll the buffer to the top
+    if (!this._viewportElement.offsetParent) {
+      return;
+    }
+
+    // Ignore the event if it was flagged to ignore (when the source of the event is from Viewport)
+    if (this._ignoreNextScrollEvent) {
+      this._ignoreNextScrollEvent = false;
+      // Still trigger the scroll so lines get refreshed
+      this._onRequestScrollLines.fire({ amount: 0, suppressScrollEvent: true });
+      return;
+    }
+
+    const newRow = Math.round(this._lastScrollTop / this._currentRowHeight);
+    const diff = newRow - this._bufferService.buffer.ydisp;
+    this._onRequestScrollLines.fire({ amount: diff, suppressScrollEvent: true });
+  }
+
+  private _smoothScroll(): void {
+    // Check valid state
+    if (this._isDisposed || this._smoothScrollState.origin === -1 || this._smoothScrollState.target === -1) {
+      return;
+    }
+
+    // Calculate position complete
+    const percent = this._smoothScrollPercent();
+    this._viewportElement.scrollTop = this._smoothScrollState.origin + Math.round(percent * (this._smoothScrollState.target - this._smoothScrollState.origin));
+
+    // Continue or finish smooth scroll
+    if (percent < 1) {
+      this._coreBrowserService.window.requestAnimationFrame(() => this._smoothScroll());
+    } else {
+      this._clearSmoothScrollState();
+    }
+  }
+
+  private _smoothScrollPercent(): number {
+    if (!this._optionsService.rawOptions.smoothScrollDuration || !this._smoothScrollState.startTime) {
+      return 1;
+    }
+    return Math.max(Math.min((Date.now() - this._smoothScrollState.startTime) / this._optionsService.rawOptions.smoothScrollDuration, 1), 0);
+  }
+
+  private _clearSmoothScrollState(): void {
+    this._smoothScrollState.startTime = 0;
+    this._smoothScrollState.origin = -1;
+    this._smoothScrollState.target = -1;
+  }
+
+  /**
+   * Handles bubbling of scroll event in case the viewport has reached top or bottom
+   * @param ev The scroll event.
+   * @param amount The amount scrolled
+   */
+  private _bubbleScroll(ev: Event, amount: number): boolean {
+    const scrollPosFromTop = this._viewportElement.scrollTop + this._lastRecordedViewportHeight;
+    if ((amount < 0 && this._viewportElement.scrollTop !== 0) ||
+      (amount > 0 && scrollPosFromTop < this._lastRecordedBufferHeight)) {
+      if (ev.cancelable) {
+        ev.preventDefault();
+      }
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Handles mouse wheel events by adjusting the viewport's scrollTop and delegating the actual
+   * scrolling to `onScroll`, this event needs to be attached manually by the consumer of
+   * `Viewport`.
+   * @param ev The mouse wheel event.
+   */
+  public handleWheel(ev: WheelEvent): boolean {
+    const amount = this._getPixelsScrolled(ev);
+    if (amount === 0) {
+      return false;
+    }
+    if (!this._optionsService.rawOptions.smoothScrollDuration) {
+      this._viewportElement.scrollTop += amount;
+    } else {
+      this._smoothScrollState.startTime = Date.now();
+      if (this._smoothScrollPercent() < 1) {
+        this._smoothScrollState.origin = this._viewportElement.scrollTop;
+        if (this._smoothScrollState.target === -1) {
+          this._smoothScrollState.target = this._viewportElement.scrollTop + amount;
+        } else {
+          this._smoothScrollState.target += amount;
+        }
+        this._smoothScrollState.target = Math.max(Math.min(this._smoothScrollState.target, this._viewportElement.scrollHeight), 0);
+        this._smoothScroll();
+      } else {
+        this._clearSmoothScrollState();
+      }
+    }
+    return this._bubbleScroll(ev, amount);
+  }
+
+  public scrollLines(disp: number): void {
+    if (disp === 0) {
+      return;
+    }
+    if (!this._optionsService.rawOptions.smoothScrollDuration) {
+      this._onRequestScrollLines.fire({ amount: disp, suppressScrollEvent: false });
+    } else {
+      const amount = disp * this._currentRowHeight;
+      this._smoothScrollState.startTime = Date.now();
+      if (this._smoothScrollPercent() < 1) {
+        this._smoothScrollState.origin = this._viewportElement.scrollTop;
+        this._smoothScrollState.target = this._smoothScrollState.origin + amount;
+        this._smoothScrollState.target = Math.max(Math.min(this._smoothScrollState.target, this._viewportElement.scrollHeight), 0);
+        this._smoothScroll();
+      } else {
+        this._clearSmoothScrollState();
+      }
+    }
+  }
+
+  private _getPixelsScrolled(ev: WheelEvent): number {
+    // Do nothing if it's not a vertical scroll event
+    if (ev.deltaY === 0 || ev.shiftKey) {
+      return 0;
+    }
+
+    // Fallback to WheelEvent.DOM_DELTA_PIXEL
+    let amount = this._applyScrollModifier(ev.deltaY, ev);
+    if (ev.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+      amount *= this._currentRowHeight;
+    } else if (ev.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+      amount *= this._currentRowHeight * this._bufferService.rows;
+    }
+    return amount;
+  }
+
+
+  public getBufferElements(startLine: number, endLine?: number): { bufferElements: HTMLElement[], cursorElement?: HTMLElement } {
+    let currentLine: string = '';
+    let cursorElement: HTMLElement | undefined;
+    const bufferElements: HTMLElement[] = [];
+    const end = endLine ?? this._bufferService.buffer.lines.length;
+    const lines = this._bufferService.buffer.lines;
+    for (let i = startLine; i < end; i++) {
+      const line = lines.get(i);
+      if (!line) {
+        continue;
+      }
+      const isWrapped = lines.get(i + 1)?.isWrapped;
+      currentLine += line.translateToString(!isWrapped);
+      if (!isWrapped || i === lines.length - 1) {
+        const div = document.createElement('div');
+        div.textContent = currentLine;
+        bufferElements.push(div);
+        if (currentLine.length > 0) {
+          cursorElement = div;
+        }
+        currentLine = '';
+      }
+    }
+    return { bufferElements, cursorElement };
+  }
+
+  /**
+   * Gets the number of pixels scrolled by the mouse event taking into account what type of delta
+   * is being used.
+   * @param ev The mouse wheel event.
+   */
+  public getLinesScrolled(ev: WheelEvent): number {
+    // Do nothing if it's not a vertical scroll event
+    if (ev.deltaY === 0 || ev.shiftKey) {
+      return 0;
+    }
+
+    // Fallback to WheelEvent.DOM_DELTA_LINE
+    let amount = this._applyScrollModifier(ev.deltaY, ev);
+    if (ev.deltaMode === WheelEvent.DOM_DELTA_PIXEL) {
+      amount /= this._currentRowHeight + 0.0; // Prevent integer division
+      this._wheelPartialScroll += amount;
+      amount = Math.floor(Math.abs(this._wheelPartialScroll)) * (this._wheelPartialScroll > 0 ? 1 : -1);
+      this._wheelPartialScroll %= 1;
+    } else if (ev.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+      amount *= this._bufferService.rows;
+    }
+    return amount;
+  }
+
+  private _applyScrollModifier(amount: number, ev: WheelEvent): number {
+    const modifier = this._optionsService.rawOptions.fastScrollModifier;
+    // Multiply the scroll speed when the modifier is down
+    if ((modifier === 'alt' && ev.altKey) ||
+      (modifier === 'ctrl' && ev.ctrlKey) ||
+      (modifier === 'shift' && ev.shiftKey)) {
+      return amount * this._optionsService.rawOptions.fastScrollSensitivity * this._optionsService.rawOptions.scrollSensitivity;
+    }
+
+    return amount * this._optionsService.rawOptions.scrollSensitivity;
+  }
+
+  /**
+   * Handles the touchstart event, recording the touch occurred.
+   * @param ev The touch event.
+   */
+  public handleTouchStart(ev: TouchEvent): void {
+    this._lastTouchY = ev.touches[0].pageY;
+  }
+
+  /**
+   * Handles the touchmove event, scrolling the viewport if the position shifted.
+   * @param ev The touch event.
+   */
+  public handleTouchMove(ev: TouchEvent): boolean {
+    const deltaY = this._lastTouchY - ev.touches[0].pageY;
+    this._lastTouchY = ev.touches[0].pageY;
+    if (deltaY === 0) {
+      return false;
+    }
+    this._viewportElement.scrollTop += deltaY;
+    return this._bubbleScroll(ev, deltaY);
+  }
+}

web/node_modules/@xterm/xterm/src/browser/decorations/BufferDecorationRenderer.ts

@@ -0,0 +1,134 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { ICoreBrowserService, IRenderService } from 'browser/services/Services';
+import { Disposable, toDisposable } from 'common/Lifecycle';
+import { IBufferService, IDecorationService, IInternalDecoration } from 'common/services/Services';
+
+export class BufferDecorationRenderer extends Disposable {
+  private readonly _container: HTMLElement;
+  private readonly _decorationElements: Map<IInternalDecoration, HTMLElement> = new Map();
+
+  private _animationFrame: number | undefined;
+  private _altBufferIsActive: boolean = false;
+  private _dimensionsChanged: boolean = false;
+
+  constructor(
+    private readonly _screenElement: HTMLElement,
+    @IBufferService private readonly _bufferService: IBufferService,
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
+    @IDecorationService private readonly _decorationService: IDecorationService,
+    @IRenderService private readonly _renderService: IRenderService
+  ) {
+    super();
+
+    this._container = document.createElement('div');
+    this._container.classList.add('xterm-decoration-container');
+    this._screenElement.appendChild(this._container);
+
+    this.register(this._renderService.onRenderedViewportChange(() => this._doRefreshDecorations()));
+    this.register(this._renderService.onDimensionsChange(() => {
+      this._dimensionsChanged = true;
+      this._queueRefresh();
+    }));
+    this.register(this._coreBrowserService.onDprChange(() => this._queueRefresh()));
+    this.register(this._bufferService.buffers.onBufferActivate(() => {
+      this._altBufferIsActive = this._bufferService.buffer === this._bufferService.buffers.alt;
+    }));
+    this.register(this._decorationService.onDecorationRegistered(() => this._queueRefresh()));
+    this.register(this._decorationService.onDecorationRemoved(decoration => this._removeDecoration(decoration)));
+    this.register(toDisposable(() => {
+      this._container.remove();
+      this._decorationElements.clear();
+    }));
+  }
+
+  private _queueRefresh(): void {
+    if (this._animationFrame !== undefined) {
+      return;
+    }
+    this._animationFrame = this._renderService.addRefreshCallback(() => {
+      this._doRefreshDecorations();
+      this._animationFrame = undefined;
+    });
+  }
+
+  private _doRefreshDecorations(): void {
+    for (const decoration of this._decorationService.decorations) {
+      this._renderDecoration(decoration);
+    }
+    this._dimensionsChanged = false;
+  }
+
+  private _renderDecoration(decoration: IInternalDecoration): void {
+    this._refreshStyle(decoration);
+    if (this._dimensionsChanged) {
+      this._refreshXPosition(decoration);
+    }
+  }
+
+  private _createElement(decoration: IInternalDecoration): HTMLElement {
+    const element = this._coreBrowserService.mainDocument.createElement('div');
+    element.classList.add('xterm-decoration');
+    element.classList.toggle('xterm-decoration-top-layer', decoration?.options?.layer === 'top');
+    element.style.width = `${Math.round((decoration.options.width || 1) * this._renderService.dimensions.css.cell.width)}px`;
+    element.style.height = `${(decoration.options.height || 1) * this._renderService.dimensions.css.cell.height}px`;
+    element.style.top = `${(decoration.marker.line - this._bufferService.buffers.active.ydisp) * this._renderService.dimensions.css.cell.height}px`;
+    element.style.lineHeight = `${this._renderService.dimensions.css.cell.height}px`;
+
+    const x = decoration.options.x ?? 0;
+    if (x && x > this._bufferService.cols) {
+      // exceeded the container width, so hide
+      element.style.display = 'none';
+    }
+    this._refreshXPosition(decoration, element);
+
+    return element;
+  }
+
+  private _refreshStyle(decoration: IInternalDecoration): void {
+    const line = decoration.marker.line - this._bufferService.buffers.active.ydisp;
+    if (line < 0 || line >= this._bufferService.rows) {
+      // outside of viewport
+      if (decoration.element) {
+        decoration.element.style.display = 'none';
+        decoration.onRenderEmitter.fire(decoration.element);
+      }
+    } else {
+      let element = this._decorationElements.get(decoration);
+      if (!element) {
+        element = this._createElement(decoration);
+        decoration.element = element;
+        this._decorationElements.set(decoration, element);
+        this._container.appendChild(element);
+        decoration.onDispose(() => {
+          this._decorationElements.delete(decoration);
+          element!.remove();
+        });
+      }
+      element.style.top = `${line * this._renderService.dimensions.css.cell.height}px`;
+      element.style.display = this._altBufferIsActive ? 'none' : 'block';
+      decoration.onRenderEmitter.fire(element);
+    }
+  }
+
+  private _refreshXPosition(decoration: IInternalDecoration, element: HTMLElement | undefined = decoration.element): void {
+    if (!element) {
+      return;
+    }
+    const x = decoration.options.x ?? 0;
+    if ((decoration.options.anchor || 'left') === 'right') {
+      element.style.right = x ? `${x * this._renderService.dimensions.css.cell.width}px` : '';
+    } else {
+      element.style.left = x ? `${x * this._renderService.dimensions.css.cell.width}px` : '';
+    }
+  }
+
+  private _removeDecoration(decoration: IInternalDecoration): void {
+    this._decorationElements.get(decoration)?.remove();
+    this._decorationElements.delete(decoration);
+    decoration.dispose();
+  }
+}

web/node_modules/@xterm/xterm/src/browser/decorations/ColorZoneStore.ts

@@ -0,0 +1,117 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { IInternalDecoration } from 'common/services/Services';
+
+export interface IColorZoneStore {
+  readonly zones: IColorZone[];
+  clear(): void;
+  addDecoration(decoration: IInternalDecoration): void;
+  /**
+   * Sets the amount of padding in lines that will be added between zones, if new lines intersect
+   * the padding they will be merged into the same zone.
+   */
+  setPadding(padding: { [position: string]: number }): void;
+}
+
+export interface IColorZone {
+  /** Color in a format supported by canvas' fillStyle. */
+  color: string;
+  position: 'full' | 'left' | 'center' | 'right' | undefined;
+  startBufferLine: number;
+  endBufferLine: number;
+}
+
+interface IMinimalDecorationForColorZone {
+  marker: Pick<IInternalDecoration['marker'], 'line'>;
+  options: Pick<IInternalDecoration['options'], 'overviewRulerOptions'>;
+}
+
+export class ColorZoneStore implements IColorZoneStore {
+  private _zones: IColorZone[] = [];
+
+  // The zone pool is used to keep zone objects from being freed between clearing the color zone
+  // store and fetching the zones. This helps reduce GC pressure since the color zones are
+  // accumulated on potentially every scroll event.
+  private _zonePool: IColorZone[] = [];
+  private _zonePoolIndex = 0;
+
+  private _linePadding: { [position: string]: number } = {
+    full: 0,
+    left: 0,
+    center: 0,
+    right: 0
+  };
+
+  public get zones(): IColorZone[] {
+    // Trim the zone pool to free unused memory
+    this._zonePool.length = Math.min(this._zonePool.length, this._zones.length);
+    return this._zones;
+  }
+
+  public clear(): void {
+    this._zones.length = 0;
+    this._zonePoolIndex = 0;
+  }
+
+  public addDecoration(decoration: IMinimalDecorationForColorZone): void {
+    if (!decoration.options.overviewRulerOptions) {
+      return;
+    }
+    for (const z of this._zones) {
+      if (z.color === decoration.options.overviewRulerOptions.color &&
+          z.position === decoration.options.overviewRulerOptions.position) {
+        if (this._lineIntersectsZone(z, decoration.marker.line)) {
+          return;
+        }
+        if (this._lineAdjacentToZone(z, decoration.marker.line, decoration.options.overviewRulerOptions.position)) {
+          this._addLineToZone(z, decoration.marker.line);
+          return;
+        }
+      }
+    }
+    // Create using zone pool if possible
+    if (this._zonePoolIndex < this._zonePool.length) {
+      this._zonePool[this._zonePoolIndex].color = decoration.options.overviewRulerOptions.color;
+      this._zonePool[this._zonePoolIndex].position = decoration.options.overviewRulerOptions.position;
+      this._zonePool[this._zonePoolIndex].startBufferLine = decoration.marker.line;
+      this._zonePool[this._zonePoolIndex].endBufferLine = decoration.marker.line;
+      this._zones.push(this._zonePool[this._zonePoolIndex++]);
+      return;
+    }
+    // Create
+    this._zones.push({
+      color: decoration.options.overviewRulerOptions.color,
+      position: decoration.options.overviewRulerOptions.position,
+      startBufferLine: decoration.marker.line,
+      endBufferLine: decoration.marker.line
+    });
+    this._zonePool.push(this._zones[this._zones.length - 1]);
+    this._zonePoolIndex++;
+  }
+
+  public setPadding(padding: { [position: string]: number }): void {
+    this._linePadding = padding;
+  }
+
+  private _lineIntersectsZone(zone: IColorZone, line: number): boolean {
+    return (
+      line >= zone.startBufferLine &&
+      line <= zone.endBufferLine
+    );
+  }
+
+  private _lineAdjacentToZone(zone: IColorZone, line: number, position: IColorZone['position']): boolean {
+    return (
+      (line >= zone.startBufferLine - this._linePadding[position || 'full']) &&
+      (line <= zone.endBufferLine + this._linePadding[position || 'full'])
+    );
+  }
+
+  private _addLineToZone(zone: IColorZone, line: number): void {
+    zone.startBufferLine = Math.min(zone.startBufferLine, line);
+    zone.endBufferLine = Math.max(zone.endBufferLine, line);
+  }
+}

web/node_modules/@xterm/xterm/src/browser/decorations/OverviewRulerRenderer.ts

@@ -0,0 +1,218 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { ColorZoneStore, IColorZone, IColorZoneStore } from 'browser/decorations/ColorZoneStore';
+import { ICoreBrowserService, IRenderService } from 'browser/services/Services';
+import { Disposable, toDisposable } from 'common/Lifecycle';
+import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+
+// Helper objects to avoid excessive calculation and garbage collection during rendering. These are
+// static values for each render and can be accessed using the decoration position as the key.
+const drawHeight = {
+  full: 0,
+  left: 0,
+  center: 0,
+  right: 0
+};
+const drawWidth = {
+  full: 0,
+  left: 0,
+  center: 0,
+  right: 0
+};
+const drawX = {
+  full: 0,
+  left: 0,
+  center: 0,
+  right: 0
+};
+
+export class OverviewRulerRenderer extends Disposable {
+  private readonly _canvas: HTMLCanvasElement;
+  private readonly _ctx: CanvasRenderingContext2D;
+  private readonly _colorZoneStore: IColorZoneStore = new ColorZoneStore();
+  private get _width(): number {
+    return this._optionsService.options.overviewRulerWidth || 0;
+  }
+  private _animationFrame: number | undefined;
+
+  private _shouldUpdateDimensions: boolean | undefined = true;
+  private _shouldUpdateAnchor: boolean | undefined = true;
+  private _lastKnownBufferLength: number = 0;
+
+  private _containerHeight: number | undefined;
+
+  constructor(
+    private readonly _viewportElement: HTMLElement,
+    private readonly _screenElement: HTMLElement,
+    @IBufferService private readonly _bufferService: IBufferService,
+    @IDecorationService private readonly _decorationService: IDecorationService,
+    @IRenderService private readonly _renderService: IRenderService,
+    @IOptionsService private readonly _optionsService: IOptionsService,
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService
+  ) {
+    super();
+    this._canvas = this._coreBrowserService.mainDocument.createElement('canvas');
+    this._canvas.classList.add('xterm-decoration-overview-ruler');
+    this._refreshCanvasDimensions();
+    this._viewportElement.parentElement?.insertBefore(this._canvas, this._viewportElement);
+    const ctx = this._canvas.getContext('2d');
+    if (!ctx) {
+      throw new Error('Ctx cannot be null');
+    } else {
+      this._ctx = ctx;
+    }
+    this._registerDecorationListeners();
+    this._registerBufferChangeListeners();
+    this._registerDimensionChangeListeners();
+    this.register(toDisposable(() => {
+      this._canvas?.remove();
+    }));
+  }
+
+  /**
+   * On decoration add or remove, redraw
+   */
+  private _registerDecorationListeners(): void {
+    this.register(this._decorationService.onDecorationRegistered(() => this._queueRefresh(undefined, true)));
+    this.register(this._decorationService.onDecorationRemoved(() => this._queueRefresh(undefined, true)));
+  }
+
+  /**
+   * On buffer change, redraw
+   * and hide the canvas if the alt buffer is active
+   */
+  private _registerBufferChangeListeners(): void {
+    this.register(this._renderService.onRenderedViewportChange(() => this._queueRefresh()));
+    this.register(this._bufferService.buffers.onBufferActivate(() => {
+      this._canvas!.style.display = this._bufferService.buffer === this._bufferService.buffers.alt ? 'none' : 'block';
+    }));
+    this.register(this._bufferService.onScroll(() => {
+      if (this._lastKnownBufferLength !== this._bufferService.buffers.normal.lines.length) {
+        this._refreshDrawHeightConstants();
+        this._refreshColorZonePadding();
+      }
+    }));
+  }
+  /**
+   * On dimension change, update canvas dimensions
+   * and then redraw
+   */
+  private _registerDimensionChangeListeners(): void {
+    // container height changed
+    this.register(this._renderService.onRender((): void => {
+      if (!this._containerHeight || this._containerHeight !== this._screenElement.clientHeight) {
+        this._queueRefresh(true);
+        this._containerHeight = this._screenElement.clientHeight;
+      }
+    }));
+    // overview ruler width changed
+    this.register(this._optionsService.onSpecificOptionChange('overviewRulerWidth', () => this._queueRefresh(true)));
+    // device pixel ratio changed
+    this.register(this._coreBrowserService.onDprChange(() => this._queueRefresh(true)));
+    // set the canvas dimensions
+    this._queueRefresh(true);
+  }
+
+  private _refreshDrawConstants(): void {
+    // width
+    const outerWidth = Math.floor(this._canvas.width / 3);
+    const innerWidth = Math.ceil(this._canvas.width / 3);
+    drawWidth.full = this._canvas.width;
+    drawWidth.left = outerWidth;
+    drawWidth.center = innerWidth;
+    drawWidth.right = outerWidth;
+    // height
+    this._refreshDrawHeightConstants();
+    // x
+    drawX.full = 0;
+    drawX.left = 0;
+    drawX.center = drawWidth.left;
+    drawX.right = drawWidth.left + drawWidth.center;
+  }
+
+  private _refreshDrawHeightConstants(): void {
+    drawHeight.full = Math.round(2 * this._coreBrowserService.dpr);
+    // Calculate actual pixels per line
+    const pixelsPerLine = this._canvas.height / this._bufferService.buffer.lines.length;
+    // Clamp actual pixels within a range
+    const nonFullHeight = Math.round(Math.max(Math.min(pixelsPerLine, 12), 6) * this._coreBrowserService.dpr);
+    drawHeight.left = nonFullHeight;
+    drawHeight.center = nonFullHeight;
+    drawHeight.right = nonFullHeight;
+  }
+
+  private _refreshColorZonePadding(): void {
+    this._colorZoneStore.setPadding({
+      full: Math.floor(this._bufferService.buffers.active.lines.length / (this._canvas.height - 1) * drawHeight.full),
+      left: Math.floor(this._bufferService.buffers.active.lines.length / (this._canvas.height - 1) * drawHeight.left),
+      center: Math.floor(this._bufferService.buffers.active.lines.length / (this._canvas.height - 1) * drawHeight.center),
+      right: Math.floor(this._bufferService.buffers.active.lines.length / (this._canvas.height - 1) * drawHeight.right)
+    });
+    this._lastKnownBufferLength = this._bufferService.buffers.normal.lines.length;
+  }
+
+  private _refreshCanvasDimensions(): void {
+    this._canvas.style.width = `${this._width}px`;
+    this._canvas.width = Math.round(this._width * this._coreBrowserService.dpr);
+    this._canvas.style.height = `${this._screenElement.clientHeight}px`;
+    this._canvas.height = Math.round(this._screenElement.clientHeight * this._coreBrowserService.dpr);
+    this._refreshDrawConstants();
+    this._refreshColorZonePadding();
+  }
+
+  private _refreshDecorations(): void {
+    if (this._shouldUpdateDimensions) {
+      this._refreshCanvasDimensions();
+    }
+    this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+    this._colorZoneStore.clear();
+    for (const decoration of this._decorationService.decorations) {
+      this._colorZoneStore.addDecoration(decoration);
+    }
+    this._ctx.lineWidth = 1;
+    const zones = this._colorZoneStore.zones;
+    for (const zone of zones) {
+      if (zone.position !== 'full') {
+        this._renderColorZone(zone);
+      }
+    }
+    for (const zone of zones) {
+      if (zone.position === 'full') {
+        this._renderColorZone(zone);
+      }
+    }
+    this._shouldUpdateDimensions = false;
+    this._shouldUpdateAnchor = false;
+  }
+
+  private _renderColorZone(zone: IColorZone): void {
+    this._ctx.fillStyle = zone.color;
+    this._ctx.fillRect(
+      /* x */ drawX[zone.position || 'full'],
+      /* y */ Math.round(
+        (this._canvas.height - 1) * // -1 to ensure at least 2px are allowed for decoration on last line
+        (zone.startBufferLine / this._bufferService.buffers.active.lines.length) - drawHeight[zone.position || 'full'] / 2
+      ),
+      /* w */ drawWidth[zone.position || 'full'],
+      /* h */ Math.round(
+        (this._canvas.height - 1) * // -1 to ensure at least 2px are allowed for decoration on last line
+        ((zone.endBufferLine - zone.startBufferLine) / this._bufferService.buffers.active.lines.length) + drawHeight[zone.position || 'full']
+      )
+    );
+  }
+
+  private _queueRefresh(updateCanvasDimensions?: boolean, updateAnchor?: boolean): void {
+    this._shouldUpdateDimensions = updateCanvasDimensions || this._shouldUpdateDimensions;
+    this._shouldUpdateAnchor = updateAnchor || this._shouldUpdateAnchor;
+    if (this._animationFrame !== undefined) {
+      return;
+    }
+    this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
+      this._refreshDecorations();
+      this._animationFrame = undefined;
+    });
+  }
+}

web/node_modules/@xterm/xterm/src/browser/input/CompositionHelper.ts

@@ -0,0 +1,246 @@
+/**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IRenderService } from 'browser/services/Services';
+import { IBufferService, ICoreService, IOptionsService } from 'common/services/Services';
+import { C0 } from 'common/data/EscapeSequences';
+
+interface IPosition {
+  start: number;
+  end: number;
+}
+
+/**
+ * Encapsulates the logic for handling compositionstart, compositionupdate and compositionend
+ * events, displaying the in-progress composition to the UI and forwarding the final composition
+ * to the handler.
+ */
+export class CompositionHelper {
+  /**
+   * Whether input composition is currently happening, eg. via a mobile keyboard, speech input or
+   * IME. This variable determines whether the compositionText should be displayed on the UI.
+   */
+  private _isComposing: boolean;
+  public get isComposing(): boolean { return this._isComposing; }
+
+  /**
+   * The position within the input textarea's value of the current composition.
+   */
+  private _compositionPosition: IPosition;
+
+  /**
+   * Whether a composition is in the process of being sent, setting this to false will cancel any
+   * in-progress composition.
+   */
+  private _isSendingComposition: boolean;
+
+  /**
+   * Data already sent due to keydown event.
+   */
+  private _dataAlreadySent: string;
+
+  constructor(
+    private readonly _textarea: HTMLTextAreaElement,
+    private readonly _compositionView: HTMLElement,
+    @IBufferService private readonly _bufferService: IBufferService,
+    @IOptionsService private readonly _optionsService: IOptionsService,
+    @ICoreService private readonly _coreService: ICoreService,
+    @IRenderService private readonly _renderService: IRenderService
+  ) {
+    this._isComposing = false;
+    this._isSendingComposition = false;
+    this._compositionPosition = { start: 0, end: 0 };
+    this._dataAlreadySent = '';
+  }
+
+  /**
+   * Handles the compositionstart event, activating the composition view.
+   */
+  public compositionstart(): void {
+    this._isComposing = true;
+    this._compositionPosition.start = this._textarea.value.length;
+    this._compositionView.textContent = '';
+    this._dataAlreadySent = '';
+    this._compositionView.classList.add('active');
+  }
+
+  /**
+   * Handles the compositionupdate event, updating the composition view.
+   * @param ev The event.
+   */
+  public compositionupdate(ev: Pick<CompositionEvent, 'data'>): void {
+    this._compositionView.textContent = ev.data;
+    this.updateCompositionElements();
+    setTimeout(() => {
+      this._compositionPosition.end = this._textarea.value.length;
+    }, 0);
+  }
+
+  /**
+   * Handles the compositionend event, hiding the composition view and sending the composition to
+   * the handler.
+   */
+  public compositionend(): void {
+    this._finalizeComposition(true);
+  }
+
+  /**
+   * Handles the keydown event, routing any necessary events to the CompositionHelper functions.
+   * @param ev The keydown event.
+   * @returns Whether the Terminal should continue processing the keydown event.
+   */
+  public keydown(ev: KeyboardEvent): boolean {
+    if (this._isComposing || this._isSendingComposition) {
+      if (ev.keyCode === 229) {
+        // Continue composing if the keyCode is the "composition character"
+        return false;
+      }
+      if (ev.keyCode === 16 || ev.keyCode === 17 || ev.keyCode === 18) {
+        // Continue composing if the keyCode is a modifier key
+        return false;
+      }
+      // Finish composition immediately. This is mainly here for the case where enter is
+      // pressed and the handler needs to be triggered before the command is executed.
+      this._finalizeComposition(false);
+    }
+
+    if (ev.keyCode === 229) {
+      // If the "composition character" is used but gets to this point it means a non-composition
+      // character (eg. numbers and punctuation) was pressed when the IME was active.
+      this._handleAnyTextareaChanges();
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Finalizes the composition, resuming regular input actions. This is called when a composition
+   * is ending.
+   * @param waitForPropagation Whether to wait for events to propagate before sending
+   *   the input. This should be false if a non-composition keystroke is entered before the
+   *   compositionend event is triggered, such as enter, so that the composition is sent before
+   *   the command is executed.
+   */
+  private _finalizeComposition(waitForPropagation: boolean): void {
+    this._compositionView.classList.remove('active');
+    this._isComposing = false;
+
+    if (!waitForPropagation) {
+      // Cancel any delayed composition send requests and send the input immediately.
+      this._isSendingComposition = false;
+      const input = this._textarea.value.substring(this._compositionPosition.start, this._compositionPosition.end);
+      this._coreService.triggerDataEvent(input, true);
+    } else {
+      // Make a deep copy of the composition position here as a new compositionstart event may
+      // fire before the setTimeout executes.
+      const currentCompositionPosition = {
+        start: this._compositionPosition.start,
+        end: this._compositionPosition.end
+      };
+
+      // Since composition* events happen before the changes take place in the textarea on most
+      // browsers, use a setTimeout with 0ms time to allow the native compositionend event to
+      // complete. This ensures the correct character is retrieved.
+      // This solution was used because:
+      // - The compositionend event's data property is unreliable, at least on Chromium
+      // - The last compositionupdate event's data property does not always accurately describe
+      //   the character, a counter example being Korean where an ending consonsant can move to
+      //   the following character if the following input is a vowel.
+      this._isSendingComposition = true;
+      setTimeout(() => {
+        // Ensure that the input has not already been sent
+        if (this._isSendingComposition) {
+          this._isSendingComposition = false;
+          let input;
+          // Add length of data already sent due to keydown event,
+          // otherwise input characters can be duplicated. (Issue #3191)
+          currentCompositionPosition.start += this._dataAlreadySent.length;
+          if (this._isComposing) {
+            // Use the end position to get the string if a new composition has started.
+            input = this._textarea.value.substring(currentCompositionPosition.start, currentCompositionPosition.end);
+          } else {
+            // Don't use the end position here in order to pick up any characters after the
+            // composition has finished, for example when typing a non-composition character
+            // (eg. 2) after a composition character.
+            input = this._textarea.value.substring(currentCompositionPosition.start);
+          }
+          if (input.length > 0) {
+            this._coreService.triggerDataEvent(input, true);
+          }
+        }
+      }, 0);
+    }
+  }
+
+  /**
+   * Apply any changes made to the textarea after the current event chain is allowed to complete.
+   * This should be called when not currently composing but a keydown event with the "composition
+   * character" (229) is triggered, in order to allow non-composition text to be entered when an
+   * IME is active.
+   */
+  private _handleAnyTextareaChanges(): void {
+    const oldValue = this._textarea.value;
+    setTimeout(() => {
+      // Ignore if a composition has started since the timeout
+      if (!this._isComposing) {
+        const newValue = this._textarea.value;
+
+        const diff = newValue.replace(oldValue, '');
+
+        this._dataAlreadySent = diff;
+
+        if (newValue.length > oldValue.length) {
+          this._coreService.triggerDataEvent(diff, true);
+        } else if (newValue.length < oldValue.length) {
+          this._coreService.triggerDataEvent(`${C0.DEL}`, true);
+        } else if ((newValue.length === oldValue.length) && (newValue !== oldValue)) {
+          this._coreService.triggerDataEvent(newValue, true);
+        }
+
+      }
+    }, 0);
+  }
+
+  /**
+   * Positions the composition view on top of the cursor and the textarea just below it (so the
+   * IME helper dialog is positioned correctly).
+   * @param dontRecurse Whether to use setTimeout to recursively trigger another update, this is
+   *   necessary as the IME events across browsers are not consistently triggered.
+   */
+  public updateCompositionElements(dontRecurse?: boolean): void {
+    if (!this._isComposing) {
+      return;
+    }
+
+    if (this._bufferService.buffer.isCursorInViewport) {
+      const cursorX = Math.min(this._bufferService.buffer.x, this._bufferService.cols - 1);
+
+      const cellHeight = this._renderService.dimensions.css.cell.height;
+      const cursorTop = this._bufferService.buffer.y * this._renderService.dimensions.css.cell.height;
+      const cursorLeft = cursorX * this._renderService.dimensions.css.cell.width;
+
+      this._compositionView.style.left = cursorLeft + 'px';
+      this._compositionView.style.top = cursorTop + 'px';
+      this._compositionView.style.height = cellHeight + 'px';
+      this._compositionView.style.lineHeight = cellHeight + 'px';
+      this._compositionView.style.fontFamily = this._optionsService.rawOptions.fontFamily;
+      this._compositionView.style.fontSize = this._optionsService.rawOptions.fontSize + 'px';
+      // Sync the textarea to the exact position of the composition view so the IME knows where the
+      // text is.
+      const compositionViewBounds = this._compositionView.getBoundingClientRect();
+      this._textarea.style.left = cursorLeft + 'px';
+      this._textarea.style.top = cursorTop + 'px';
+      // Ensure the text area is at least 1x1, otherwise certain IMEs may break
+      this._textarea.style.width = Math.max(compositionViewBounds.width, 1) + 'px';
+      this._textarea.style.height = Math.max(compositionViewBounds.height, 1) + 'px';
+      this._textarea.style.lineHeight = compositionViewBounds.height + 'px';
+    }
+
+    if (!dontRecurse) {
+      setTimeout(() => this.updateCompositionElements(true), 0);
+    }
+  }
+}

web/node_modules/@xterm/xterm/src/browser/input/Mouse.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+export function getCoordsRelativeToElement(window: Pick<Window, 'getComputedStyle'>, event: {clientX: number, clientY: number}, element: HTMLElement): [number, number] {
+  const rect = element.getBoundingClientRect();
+  const elementStyle = window.getComputedStyle(element);
+  const leftPadding = parseInt(elementStyle.getPropertyValue('padding-left'));
+  const topPadding = parseInt(elementStyle.getPropertyValue('padding-top'));
+  return [
+    event.clientX - rect.left - leftPadding,
+    event.clientY - rect.top - topPadding
+  ];
+}
+
+/**
+ * Gets coordinates within the terminal for a particular mouse event. The result
+ * is returned as an array in the form [x, y] instead of an object as it's a
+ * little faster and this function is used in some low level code.
+ * @param window The window object the element belongs to.
+ * @param event The mouse event.
+ * @param element The terminal's container element.
+ * @param colCount The number of columns in the terminal.
+ * @param rowCount The number of rows n the terminal.
+ * @param hasValidCharSize Whether there is a valid character size available.
+ * @param cssCellWidth The cell width device pixel render dimensions.
+ * @param cssCellHeight The cell height device pixel render dimensions.
+ * @param isSelection Whether the request is for the selection or not. This will
+ * apply an offset to the x value such that the left half of the cell will
+ * select that cell and the right half will select the next cell.
+ */
+export function getCoords(window: Pick<Window, 'getComputedStyle'>, event: Pick<MouseEvent, 'clientX' | 'clientY'>, element: HTMLElement, colCount: number, rowCount: number, hasValidCharSize: boolean, cssCellWidth: number, cssCellHeight: number, isSelection?: boolean): [number, number] | undefined {
+  // Coordinates cannot be measured if there are no valid
+  if (!hasValidCharSize) {
+    return undefined;
+  }
+
+  const coords = getCoordsRelativeToElement(window, event, element);
+  if (!coords) {
+    return undefined;
+  }
+
+  coords[0] = Math.ceil((coords[0] + (isSelection ? cssCellWidth / 2 : 0)) / cssCellWidth);
+  coords[1] = Math.ceil(coords[1] / cssCellHeight);
+
+  // Ensure coordinates are within the terminal viewport. Note that selections
+  // need an addition point of precision to cover the end point (as characters
+  // cover half of one char and half of the next).
+  coords[0] = Math.min(Math.max(coords[0], 1), colCount + (isSelection ? 1 : 0));
+  coords[1] = Math.min(Math.max(coords[1], 1), rowCount);
+
+  return coords;
+}

web/node_modules/@xterm/xterm/src/browser/input/MoveToCell.ts

@@ -0,0 +1,249 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { C0 } from 'common/data/EscapeSequences';
+import { IBufferService } from 'common/services/Services';
+
+const enum Direction {
+  UP = 'A',
+  DOWN = 'B',
+  RIGHT = 'C',
+  LEFT = 'D'
+}
+
+/**
+ * Concatenates all the arrow sequences together.
+ * Resets the starting row to an unwrapped row, moves to the requested row,
+ * then moves to requested col.
+ */
+export function moveToCellSequence(targetX: number, targetY: number, bufferService: IBufferService, applicationCursor: boolean): string {
+  const startX = bufferService.buffer.x;
+  const startY = bufferService.buffer.y;
+
+  // The alt buffer should try to navigate between rows
+  if (!bufferService.buffer.hasScrollback) {
+    return resetStartingRow(startX, startY, targetX, targetY, bufferService, applicationCursor) +
+      moveToRequestedRow(startY, targetY, bufferService, applicationCursor) +
+      moveToRequestedCol(startX, startY, targetX, targetY, bufferService, applicationCursor);
+  }
+
+  // Only move horizontally for the normal buffer
+  let direction;
+  if (startY === targetY) {
+    direction = startX > targetX ? Direction.LEFT : Direction.RIGHT;
+    return repeat(Math.abs(startX - targetX), sequence(direction, applicationCursor));
+  }
+  direction = startY > targetY ? Direction.LEFT : Direction.RIGHT;
+  const rowDifference = Math.abs(startY - targetY);
+  const cellsToMove = colsFromRowEnd(startY > targetY ? targetX : startX, bufferService) +
+    (rowDifference - 1) * bufferService.cols + 1 /* wrap around 1 row */ +
+    colsFromRowBeginning(startY > targetY ? startX : targetX, bufferService);
+  return repeat(cellsToMove, sequence(direction, applicationCursor));
+}
+
+/**
+ * Find the number of cols from a row beginning to a col.
+ */
+function colsFromRowBeginning(currX: number, bufferService: IBufferService): number {
+  return currX - 1;
+}
+
+/**
+ * Find the number of cols from a col to row end.
+ */
+function colsFromRowEnd(currX: number, bufferService: IBufferService): number {
+  return bufferService.cols - currX;
+}
+
+/**
+ * If the initial position of the cursor is on a row that is wrapped, move the
+ * cursor up to the first row that is not wrapped to have accurate vertical
+ * positioning.
+ */
+function resetStartingRow(startX: number, startY: number, targetX: number, targetY: number, bufferService: IBufferService, applicationCursor: boolean): string {
+  if (moveToRequestedRow(startY, targetY, bufferService, applicationCursor).length === 0) {
+    return '';
+  }
+  return repeat(bufferLine(
+    startX, startY, startX,
+    startY - wrappedRowsForRow(startY, bufferService), false, bufferService
+  ).length, sequence(Direction.LEFT, applicationCursor));
+}
+
+/**
+ * Using the reset starting and ending row, move to the requested row,
+ * ignoring wrapped rows
+ */
+function moveToRequestedRow(startY: number, targetY: number, bufferService: IBufferService, applicationCursor: boolean): string {
+  const startRow = startY - wrappedRowsForRow(startY, bufferService);
+  const endRow = targetY - wrappedRowsForRow(targetY, bufferService);
+
+  const rowsToMove = Math.abs(startRow - endRow) - wrappedRowsCount(startY, targetY, bufferService);
+
+  return repeat(rowsToMove, sequence(verticalDirection(startY, targetY), applicationCursor));
+}
+
+/**
+ * Move to the requested col on the ending row
+ */
+function moveToRequestedCol(startX: number, startY: number, targetX: number, targetY: number, bufferService: IBufferService, applicationCursor: boolean): string {
+  let startRow;
+  if (moveToRequestedRow(startY, targetY, bufferService, applicationCursor).length > 0) {
+    startRow = targetY - wrappedRowsForRow(targetY, bufferService);
+  } else {
+    startRow = startY;
+  }
+
+  const endRow = targetY;
+  const direction = horizontalDirection(startX, startY, targetX, targetY, bufferService, applicationCursor);
+
+  return repeat(bufferLine(
+    startX, startRow, targetX, endRow,
+    direction === Direction.RIGHT, bufferService
+  ).length, sequence(direction, applicationCursor));
+}
+
+/**
+ * Utility functions
+ */
+
+/**
+ * Calculates the number of wrapped rows between the unwrapped starting and
+ * ending rows. These rows need to ignored since the cursor skips over them.
+ */
+function wrappedRowsCount(startY: number, targetY: number, bufferService: IBufferService): number {
+  let wrappedRows = 0;
+  const startRow = startY - wrappedRowsForRow(startY, bufferService);
+  const endRow = targetY - wrappedRowsForRow(targetY, bufferService);
+
+  for (let i = 0; i < Math.abs(startRow - endRow); i++) {
+    const direction = verticalDirection(startY, targetY) === Direction.UP ? -1 : 1;
+    const line = bufferService.buffer.lines.get(startRow + (direction * i));
+    if (line?.isWrapped) {
+      wrappedRows++;
+    }
+  }
+
+  return wrappedRows;
+}
+
+/**
+ * Calculates the number of wrapped rows that make up a given row.
+ * @param currentRow The row to determine how many wrapped rows make it up
+ */
+function wrappedRowsForRow(currentRow: number, bufferService: IBufferService): number {
+  let rowCount = 0;
+  let line = bufferService.buffer.lines.get(currentRow);
+  let lineWraps = line?.isWrapped;
+
+  while (lineWraps && currentRow >= 0 && currentRow < bufferService.rows) {
+    rowCount++;
+    line = bufferService.buffer.lines.get(--currentRow);
+    lineWraps = line?.isWrapped;
+  }
+
+  return rowCount;
+}
+
+/**
+ * Direction determiners
+ */
+
+/**
+ * Determines if the right or left arrow is needed
+ */
+function horizontalDirection(startX: number, startY: number, targetX: number, targetY: number, bufferService: IBufferService, applicationCursor: boolean): Direction {
+  let startRow;
+  if (moveToRequestedRow(targetX, targetY, bufferService, applicationCursor).length > 0) {
+    startRow = targetY - wrappedRowsForRow(targetY, bufferService);
+  } else {
+    startRow = startY;
+  }
+
+  if ((startX < targetX &&
+    startRow <= targetY) || // down/right or same y/right
+    (startX >= targetX &&
+    startRow < targetY)) {  // down/left or same y/left
+    return Direction.RIGHT;
+  }
+  return Direction.LEFT;
+}
+
+/**
+ * Determines if the up or down arrow is needed
+ */
+function verticalDirection(startY: number, targetY: number): Direction {
+  return startY > targetY ? Direction.UP : Direction.DOWN;
+}
+
+/**
+ * Constructs the string of chars in the buffer from a starting row and col
+ * to an ending row and col
+ * @param startCol The starting column position
+ * @param startRow The starting row position
+ * @param endCol The ending column position
+ * @param endRow The ending row position
+ * @param forward Direction to move
+ */
+function bufferLine(
+  startCol: number,
+  startRow: number,
+  endCol: number,
+  endRow: number,
+  forward: boolean,
+  bufferService: IBufferService
+): string {
+  let currentCol = startCol;
+  let currentRow = startRow;
+  let bufferStr = '';
+
+  while (currentCol !== endCol || currentRow !== endRow) {
+    currentCol += forward ? 1 : -1;
+
+    if (forward && currentCol > bufferService.cols - 1) {
+      bufferStr += bufferService.buffer.translateBufferLineToString(
+        currentRow, false, startCol, currentCol
+      );
+      currentCol = 0;
+      startCol = 0;
+      currentRow++;
+    } else if (!forward && currentCol < 0) {
+      bufferStr += bufferService.buffer.translateBufferLineToString(
+        currentRow, false, 0, startCol + 1
+      );
+      currentCol = bufferService.cols - 1;
+      startCol = currentCol;
+      currentRow--;
+    }
+  }
+
+  return bufferStr + bufferService.buffer.translateBufferLineToString(
+    currentRow, false, startCol, currentCol
+  );
+}
+
+/**
+ * Constructs the escape sequence for clicking an arrow
+ * @param direction The direction to move
+ */
+function sequence(direction: Direction, applicationCursor: boolean): string {
+  const mod =  applicationCursor ? 'O' : '[';
+  return C0.ESC + mod + direction;
+}
+
+/**
+ * Returns a string repeated a given number of times
+ * Polyfill from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat
+ * @param count The number of times to repeat the string
+ * @param str The string that is to be repeated
+ */
+function repeat(count: number, str: string): string {
+  count = Math.floor(count);
+  let rpt = '';
+  for (let i = 0; i < count; i++) {
+    rpt += str;
+  }
+  return rpt;
+}

web/node_modules/@xterm/xterm/src/browser/public/Terminal.ts

@@ -0,0 +1,266 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import * as Strings from 'browser/LocalizableStrings';
+import { Terminal as TerminalCore } from 'browser/Terminal';
+import { IBufferRange, ITerminal } from 'browser/Types';
+import { IEvent } from 'common/EventEmitter';
+import { Disposable } from 'common/Lifecycle';
+import { ITerminalOptions } from 'common/Types';
+import { AddonManager } from 'common/public/AddonManager';
+import { BufferNamespaceApi } from 'common/public/BufferNamespaceApi';
+import { ParserApi } from 'common/public/ParserApi';
+import { UnicodeApi } from 'common/public/UnicodeApi';
+import { IBufferNamespace as IBufferNamespaceApi, IDecoration, IDecorationOptions, IDisposable, ILinkProvider, ILocalizableStrings, IMarker, IModes, IParser, ITerminalAddon, Terminal as ITerminalApi, ITerminalInitOnlyOptions, IUnicodeHandling } from '@xterm/xterm';
+
+/**
+ * The set of options that only have an effect when set in the Terminal constructor.
+ */
+const CONSTRUCTOR_ONLY_OPTIONS = ['cols', 'rows'];
+
+export class Terminal extends Disposable implements ITerminalApi {
+  private _core: ITerminal;
+  private _addonManager: AddonManager;
+  private _parser: IParser | undefined;
+  private _buffer: BufferNamespaceApi | undefined;
+  private _publicOptions: Required<ITerminalOptions>;
+
+  constructor(options?: ITerminalOptions & ITerminalInitOnlyOptions) {
+    super();
+
+    this._core = this.register(new TerminalCore(options));
+    this._addonManager = this.register(new AddonManager());
+
+    this._publicOptions = { ... this._core.options };
+    const getter = (propName: string): any => {
+      return this._core.options[propName];
+    };
+    const setter = (propName: string, value: any): void => {
+      this._checkReadonlyOptions(propName);
+      this._core.options[propName] = value;
+    };
+
+    for (const propName in this._core.options) {
+      const desc = {
+        get: getter.bind(this, propName),
+        set: setter.bind(this, propName)
+      };
+      Object.defineProperty(this._publicOptions, propName, desc);
+    }
+  }
+
+  private _checkReadonlyOptions(propName: string): void {
+    // Throw an error if any constructor only option is modified
+    // from terminal.options
+    // Modifications from anywhere else are allowed
+    if (CONSTRUCTOR_ONLY_OPTIONS.includes(propName)) {
+      throw new Error(`Option "${propName}" can only be set in the constructor`);
+    }
+  }
+
+  private _checkProposedApi(): void {
+    if (!this._core.optionsService.rawOptions.allowProposedApi) {
+      throw new Error('You must set the allowProposedApi option to true to use proposed API');
+    }
+  }
+
+  public get onBell(): IEvent<void> { return this._core.onBell; }
+  public get onBinary(): IEvent<string> { return this._core.onBinary; }
+  public get onCursorMove(): IEvent<void> { return this._core.onCursorMove; }
+  public get onData(): IEvent<string> { return this._core.onData; }
+  public get onKey(): IEvent<{ key: string, domEvent: KeyboardEvent }> { return this._core.onKey; }
+  public get onLineFeed(): IEvent<void> { return this._core.onLineFeed; }
+  public get onRender(): IEvent<{ start: number, end: number }> { return this._core.onRender; }
+  public get onResize(): IEvent<{ cols: number, rows: number }> { return this._core.onResize; }
+  public get onScroll(): IEvent<number> { return this._core.onScroll; }
+  public get onSelectionChange(): IEvent<void> { return this._core.onSelectionChange; }
+  public get onTitleChange(): IEvent<string> { return this._core.onTitleChange; }
+  public get onWriteParsed(): IEvent<void> { return this._core.onWriteParsed; }
+
+  public get element(): HTMLElement | undefined { return this._core.element; }
+  public get parser(): IParser {
+    if (!this._parser) {
+      this._parser = new ParserApi(this._core);
+    }
+    return this._parser;
+  }
+  public get unicode(): IUnicodeHandling {
+    this._checkProposedApi();
+    return new UnicodeApi(this._core);
+  }
+  public get textarea(): HTMLTextAreaElement | undefined { return this._core.textarea; }
+  public get rows(): number { return this._core.rows; }
+  public get cols(): number { return this._core.cols; }
+  public get buffer(): IBufferNamespaceApi {
+    if (!this._buffer) {
+      this._buffer = this.register(new BufferNamespaceApi(this._core));
+    }
+    return this._buffer;
+  }
+  public get markers(): ReadonlyArray<IMarker> {
+    this._checkProposedApi();
+    return this._core.markers;
+  }
+  public get modes(): IModes {
+    const m = this._core.coreService.decPrivateModes;
+    let mouseTrackingMode: 'none' | 'x10' | 'vt200' | 'drag' | 'any' = 'none';
+    switch (this._core.coreMouseService.activeProtocol) {
+      case 'X10': mouseTrackingMode = 'x10'; break;
+      case 'VT200': mouseTrackingMode = 'vt200'; break;
+      case 'DRAG': mouseTrackingMode = 'drag'; break;
+      case 'ANY': mouseTrackingMode = 'any'; break;
+    }
+    return {
+      applicationCursorKeysMode: m.applicationCursorKeys,
+      applicationKeypadMode: m.applicationKeypad,
+      bracketedPasteMode: m.bracketedPasteMode,
+      insertMode: this._core.coreService.modes.insertMode,
+      mouseTrackingMode: mouseTrackingMode,
+      originMode: m.origin,
+      reverseWraparoundMode: m.reverseWraparound,
+      sendFocusMode: m.sendFocus,
+      wraparoundMode: m.wraparound
+    };
+  }
+  public get options(): Required<ITerminalOptions> {
+    return this._publicOptions;
+  }
+  public set options(options: ITerminalOptions) {
+    for (const propName in options) {
+      this._publicOptions[propName] = options[propName];
+    }
+  }
+  public blur(): void {
+    this._core.blur();
+  }
+  public focus(): void {
+    this._core.focus();
+  }
+  public input(data: string, wasUserInput: boolean = true): void {
+    this._core.input(data, wasUserInput);
+  }
+  public resize(columns: number, rows: number): void {
+    this._verifyIntegers(columns, rows);
+    this._core.resize(columns, rows);
+  }
+  public open(parent: HTMLElement): void {
+    this._core.open(parent);
+  }
+  public attachCustomKeyEventHandler(customKeyEventHandler: (event: KeyboardEvent) => boolean): void {
+    this._core.attachCustomKeyEventHandler(customKeyEventHandler);
+  }
+  public attachCustomWheelEventHandler(customWheelEventHandler: (event: WheelEvent) => boolean): void {
+    this._core.attachCustomWheelEventHandler(customWheelEventHandler);
+  }
+  public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
+    return this._core.registerLinkProvider(linkProvider);
+  }
+  public registerCharacterJoiner(handler: (text: string) => [number, number][]): number {
+    this._checkProposedApi();
+    return this._core.registerCharacterJoiner(handler);
+  }
+  public deregisterCharacterJoiner(joinerId: number): void {
+    this._checkProposedApi();
+    this._core.deregisterCharacterJoiner(joinerId);
+  }
+  public registerMarker(cursorYOffset: number = 0): IMarker {
+    this._verifyIntegers(cursorYOffset);
+    return this._core.registerMarker(cursorYOffset);
+  }
+  public registerDecoration(decorationOptions: IDecorationOptions): IDecoration | undefined {
+    this._checkProposedApi();
+    this._verifyPositiveIntegers(decorationOptions.x ?? 0, decorationOptions.width ?? 0, decorationOptions.height ?? 0);
+    return this._core.registerDecoration(decorationOptions);
+  }
+  public hasSelection(): boolean {
+    return this._core.hasSelection();
+  }
+  public select(column: number, row: number, length: number): void {
+    this._verifyIntegers(column, row, length);
+    this._core.select(column, row, length);
+  }
+  public getSelection(): string {
+    return this._core.getSelection();
+  }
+  public getSelectionPosition(): IBufferRange | undefined {
+    return this._core.getSelectionPosition();
+  }
+  public clearSelection(): void {
+    this._core.clearSelection();
+  }
+  public selectAll(): void {
+    this._core.selectAll();
+  }
+  public selectLines(start: number, end: number): void {
+    this._verifyIntegers(start, end);
+    this._core.selectLines(start, end);
+  }
+  public dispose(): void {
+    super.dispose();
+  }
+  public scrollLines(amount: number): void {
+    this._verifyIntegers(amount);
+    this._core.scrollLines(amount);
+  }
+  public scrollPages(pageCount: number): void {
+    this._verifyIntegers(pageCount);
+    this._core.scrollPages(pageCount);
+  }
+  public scrollToTop(): void {
+    this._core.scrollToTop();
+  }
+  public scrollToBottom(): void {
+    this._core.scrollToBottom();
+  }
+  public scrollToLine(line: number): void {
+    this._verifyIntegers(line);
+    this._core.scrollToLine(line);
+  }
+  public clear(): void {
+    this._core.clear();
+  }
+  public write(data: string | Uint8Array, callback?: () => void): void {
+    this._core.write(data, callback);
+  }
+  public writeln(data: string | Uint8Array, callback?: () => void): void {
+    this._core.write(data);
+    this._core.write('\r\n', callback);
+  }
+  public paste(data: string): void {
+    this._core.paste(data);
+  }
+  public refresh(start: number, end: number): void {
+    this._verifyIntegers(start, end);
+    this._core.refresh(start, end);
+  }
+  public reset(): void {
+    this._core.reset();
+  }
+  public clearTextureAtlas(): void {
+    this._core.clearTextureAtlas();
+  }
+  public loadAddon(addon: ITerminalAddon): void {
+    this._addonManager.loadAddon(this, addon);
+  }
+  public static get strings(): ILocalizableStrings {
+    return Strings;
+  }
+
+  private _verifyIntegers(...values: number[]): void {
+    for (const value of values) {
+      if (value === Infinity || isNaN(value) || value % 1 !== 0) {
+        throw new Error('This API only accepts integers');
+      }
+    }
+  }
+
+  private _verifyPositiveIntegers(...values: number[]): void {
+    for (const value of values) {
+      if (value && (value === Infinity || isNaN(value) || value % 1 !== 0 || value < 0)) {
+        throw new Error('This API only accepts positive integers');
+      }
+    }
+  }
+}

web/node_modules/@xterm/xterm/src/browser/renderer/dom/DomRenderer.ts

@@ -0,0 +1,539 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { DomRendererRowFactory, RowCss } from 'browser/renderer/dom/DomRendererRowFactory';
+import { WidthCache } from 'browser/renderer/dom/WidthCache';
+import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
+import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
+import { createSelectionRenderModel } from 'browser/renderer/shared/SelectionRenderModel';
+import { IRenderDimensions, IRenderer, IRequestRedrawEvent, ISelectionRenderModel } from 'browser/renderer/shared/Types';
+import { ICharSizeService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { ILinkifier2, ILinkifierEvent, ITerminal, ReadonlyColorSet } from 'browser/Types';
+import { color } from 'common/Color';
+import { EventEmitter } from 'common/EventEmitter';
+import { Disposable, toDisposable } from 'common/Lifecycle';
+import { IBufferService, IInstantiationService, IOptionsService } from 'common/services/Services';
+
+
+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';
+
+let nextTerminalId = 1;
+
+/**
+ * A fallback renderer for when canvas is slow. This is not meant to be
+ * particularly fast or feature complete, more just stable and usable for when
+ * canvas is not an option.
+ */
+export class DomRenderer extends Disposable implements IRenderer {
+  private _rowFactory: DomRendererRowFactory;
+  private _terminalClass: number = nextTerminalId++;
+
+  private _themeStyleElement!: HTMLStyleElement;
+  private _dimensionsStyleElement!: HTMLStyleElement;
+  private _rowContainer: HTMLElement;
+  private _rowElements: HTMLElement[] = [];
+  private _selectionContainer: HTMLElement;
+  private _widthCache: WidthCache;
+  private _selectionRenderModel: ISelectionRenderModel = createSelectionRenderModel();
+
+  public dimensions: IRenderDimensions;
+
+  public readonly onRequestRedraw = this.register(new EventEmitter<IRequestRedrawEvent>()).event;
+
+  constructor(
+    private readonly _terminal: ITerminal,
+    private readonly _document: Document,
+    private readonly _element: HTMLElement,
+    private readonly _screenElement: HTMLElement,
+    private readonly _viewportElement: HTMLElement,
+    private readonly _helperContainer: HTMLElement,
+    private readonly _linkifier2: ILinkifier2,
+    @IInstantiationService instantiationService: IInstantiationService,
+    @ICharSizeService private readonly _charSizeService: ICharSizeService,
+    @IOptionsService private readonly _optionsService: IOptionsService,
+    @IBufferService private readonly _bufferService: IBufferService,
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
+    @IThemeService private readonly _themeService: IThemeService
+  ) {
+    super();
+    this._rowContainer = this._document.createElement('div');
+    this._rowContainer.classList.add(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.setAttribute('aria-hidden', 'true');
+
+    this.dimensions = createRenderDimensions();
+    this._updateDimensions();
+    this.register(this._optionsService.onOptionChange(() => this._handleOptionsChanged()));
+
+    this.register(this._themeService.onChangeColors(e => this._injectCss(e)));
+    this._injectCss(this._themeService.colors);
+
+    this._rowFactory = instantiationService.createInstance(DomRendererRowFactory, document);
+
+    this._element.classList.add(TERMINAL_CLASS_PREFIX + this._terminalClass);
+    this._screenElement.appendChild(this._rowContainer);
+    this._screenElement.appendChild(this._selectionContainer);
+
+    this.register(this._linkifier2.onShowLinkUnderline(e => this._handleLinkHover(e)));
+    this.register(this._linkifier2.onHideLinkUnderline(e => this._handleLinkLeave(e)));
+
+    this.register(toDisposable(() => {
+      this._element.classList.remove(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
+      this._rowContainer.remove();
+      this._selectionContainer.remove();
+      this._widthCache.dispose();
+      this._themeStyleElement.remove();
+      this._dimensionsStyleElement.remove();
+    }));
+
+    this._widthCache = new WidthCache(this._document, this._helperContainer);
+    this._widthCache.setFont(
+      this._optionsService.rawOptions.fontFamily,
+      this._optionsService.rawOptions.fontSize,
+      this._optionsService.rawOptions.fontWeight,
+      this._optionsService.rawOptions.fontWeightBold
+    );
+    this._setDefaultSpacing();
+  }
+
+  private _updateDimensions(): void {
+    const dpr = this._coreBrowserService.dpr;
+    this.dimensions.device.char.width = this._charSizeService.width * dpr;
+    this.dimensions.device.char.height = Math.ceil(this._charSizeService.height * dpr);
+    this.dimensions.device.cell.width = this.dimensions.device.char.width + Math.round(this._optionsService.rawOptions.letterSpacing);
+    this.dimensions.device.cell.height = Math.floor(this.dimensions.device.char.height * this._optionsService.rawOptions.lineHeight);
+    this.dimensions.device.char.left = 0;
+    this.dimensions.device.char.top = 0;
+    this.dimensions.device.canvas.width = this.dimensions.device.cell.width * this._bufferService.cols;
+    this.dimensions.device.canvas.height = this.dimensions.device.cell.height * this._bufferService.rows;
+    this.dimensions.css.canvas.width = Math.round(this.dimensions.device.canvas.width / dpr);
+    this.dimensions.css.canvas.height = Math.round(this.dimensions.device.canvas.height / dpr);
+    this.dimensions.css.cell.width = this.dimensions.css.canvas.width / this._bufferService.cols;
+    this.dimensions.css.cell.height = this.dimensions.css.canvas.height / this._bufferService.rows;
+
+    for (const element of this._rowElements) {
+      element.style.width = `${this.dimensions.css.canvas.width}px`;
+      element.style.height = `${this.dimensions.css.cell.height}px`;
+      element.style.lineHeight = `${this.dimensions.css.cell.height}px`;
+      // Make sure rows don't overflow onto following row
+      element.style.overflow = 'hidden';
+    }
+
+    if (!this._dimensionsStyleElement) {
+      this._dimensionsStyleElement = this._document.createElement('style');
+      this._screenElement.appendChild(this._dimensionsStyleElement);
+    }
+
+    const styles =
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} span {` +
+      ` display: inline-block;` +   // TODO: find workaround for inline-block (creates ~20% render penalty)
+      ` height: 100%;` +
+      ` vertical-align: top;` +
+      `}`;
+
+    this._dimensionsStyleElement.textContent = styles;
+
+    this._selectionContainer.style.height = this._viewportElement.style.height;
+    this._screenElement.style.width = `${this.dimensions.css.canvas.width}px`;
+    this._screenElement.style.height = `${this.dimensions.css.canvas.height}px`;
+  }
+
+  private _injectCss(colors: ReadonlyColorSet): void {
+    if (!this._themeStyleElement) {
+      this._themeStyleElement = this._document.createElement('style');
+      this._screenElement.appendChild(this._themeStyleElement);
+    }
+
+    // Base CSS
+    let styles =
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
+      ` color: ${colors.foreground.css};` +
+      ` 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 {` +
+      ` color: ${color.multiplyOpacity(colors.foreground, 0.5).css};` +
+      `}`;
+    // Text styles
+    styles +=
+      `${this._terminalSelector} span:not(.${RowCss.BOLD_CLASS}) {` +
+      ` font-weight: ${this._optionsService.rawOptions.fontWeight};` +
+      `}` +
+      `${this._terminalSelector} span.${RowCss.BOLD_CLASS} {` +
+      ` font-weight: ${this._optionsService.rawOptions.fontWeightBold};` +
+      `}` +
+      `${this._terminalSelector} span.${RowCss.ITALIC_CLASS} {` +
+      ` font-style: italic;` +
+      `}`;
+    // Blink animation
+    const blinkAnimationUnderlineId = `blink_underline_${this._terminalClass}`;
+    const blinkAnimationBarId = `blink_bar_${this._terminalClass}`;
+    const blinkAnimationBlockId = `blink_block_${this._terminalClass}`;
+    styles +=
+      `@keyframes ${blinkAnimationUnderlineId} {` +
+      ` 50% {` +
+      `  border-bottom-style: hidden;` +
+      ` }` +
+      `}`;
+    styles +=
+      `@keyframes ${blinkAnimationBarId} {` +
+      ` 50% {` +
+      `  box-shadow: none;` +
+      ` }` +
+      `}`;
+    styles +=
+      `@keyframes ${blinkAnimationBlockId} {` +
+      ` 0% {` +
+      `  background-color: ${colors.cursor.css};` +
+      `  color: ${colors.cursorAccent.css};` +
+      ` }` +
+      ` 50% {` +
+      `  background-color: inherit;` +
+      `  color: ${colors.cursor.css};` +
+      ` }` +
+      `}`;
+    // Cursor
+    styles +=
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${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} {` +
+      ` 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} {` +
+      ` animation: ${blinkAnimationBlockId} 1s step-end infinite;` +
+      `}` +
+      // !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} {` +
+      ` 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}) {` +
+      ` background-color: ${colors.cursor.css} !important;` +
+      ` color: ${colors.cursorAccent.css} !important;` +
+      `}` +
+      `${this._terminalSelector} .${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} {` +
+      ` 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} {` +
+      ` border-bottom: 1px ${colors.cursor.css};` +
+      ` border-bottom-style: solid;` +
+      ` height: calc(100% - 1px);` +
+      `}`;
+    // Selection
+    styles +=
+      `${this._terminalSelector} .${SELECTION_CLASS} {` +
+      ` position: absolute;` +
+      ` top: 0;` +
+      ` left: 0;` +
+      ` z-index: 1;` +
+      ` pointer-events: none;` +
+      `}` +
+      `${this._terminalSelector}.focus .${SELECTION_CLASS} div {` +
+      ` position: absolute;` +
+      ` background-color: ${colors.selectionBackgroundOpaque.css};` +
+      `}` +
+      `${this._terminalSelector} .${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}; }`;
+    }
+    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._themeStyleElement.textContent = styles;
+  }
+
+  /**
+   * default letter spacing
+   * Due to rounding issues in dimensions dpr calc glyph might render
+   * slightly too wide or too narrow. The method corrects the stacking offsets
+   * by applying a default letter-spacing for all chars.
+   * The value gets passed to the row factory to avoid setting this value again
+   * (render speedup is roughly 10%).
+   */
+  private _setDefaultSpacing(): void {
+    // measure same char as in CharSizeService to get the base deviation
+    const spacing = this.dimensions.css.cell.width - this._widthCache.get('W', false, false);
+    this._rowContainer.style.letterSpacing = `${spacing}px`;
+    this._rowFactory.defaultSpacing = spacing;
+  }
+
+  public handleDevicePixelRatioChange(): void {
+    this._updateDimensions();
+    this._widthCache.clear();
+    this._setDefaultSpacing();
+  }
+
+  private _refreshRowElements(cols: number, rows: number): void {
+    // Add missing elements
+    for (let i = this._rowElements.length; i <= rows; i++) {
+      const row = this._document.createElement('div');
+      this._rowContainer.appendChild(row);
+      this._rowElements.push(row);
+    }
+    // Remove excess elements
+    while (this._rowElements.length > rows) {
+      this._rowContainer.removeChild(this._rowElements.pop()!);
+    }
+  }
+
+  public handleResize(cols: number, rows: number): void {
+    this._refreshRowElements(cols, rows);
+    this._updateDimensions();
+    this.handleSelectionChanged(this._selectionRenderModel.selectionStart, this._selectionRenderModel.selectionEnd, this._selectionRenderModel.columnSelectMode);
+  }
+
+  public handleCharSizeChanged(): void {
+    this._updateDimensions();
+    this._widthCache.clear();
+    this._setDefaultSpacing();
+  }
+
+  public handleBlur(): void {
+    this._rowContainer.classList.remove(FOCUS_CLASS);
+    this.renderRows(0, this._bufferService.rows - 1);
+  }
+
+  public handleFocus(): void {
+    this._rowContainer.classList.add(FOCUS_CLASS);
+    this.renderRows(this._bufferService.buffer.y, this._bufferService.buffer.y);
+  }
+
+  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
+    // Remove all selections
+    this._selectionContainer.replaceChildren();
+    this._rowFactory.handleSelectionChanged(start, end, columnSelectMode);
+    this.renderRows(0, this._bufferService.rows - 1);
+
+    // Selection does not exist
+    if (!start || !end) {
+      return;
+    }
+
+    this._selectionRenderModel.update(this._terminal, start, end, columnSelectMode);
+
+    // Translate from buffer position to viewport position
+    const viewportStartRow = this._selectionRenderModel.viewportStartRow;
+    const viewportEndRow = this._selectionRenderModel.viewportEndRow;
+    const viewportCappedStartRow = this._selectionRenderModel.viewportCappedStartRow;
+    const viewportCappedEndRow = this._selectionRenderModel.viewportCappedEndRow;
+
+    // No need to draw the selection
+    if (viewportCappedStartRow >= this._bufferService.rows || viewportCappedEndRow < 0) {
+      return;
+    }
+
+    // Create the selections
+    const documentFragment = this._document.createDocumentFragment();
+
+    if (columnSelectMode) {
+      const isXFlipped = start[0] > end[0];
+      documentFragment.appendChild(
+        this._createSelectionElement(viewportCappedStartRow, isXFlipped ? end[0] : start[0], isXFlipped ? start[0] : end[0], viewportCappedEndRow - viewportCappedStartRow + 1)
+      );
+    } else {
+      // Draw first row
+      const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0;
+      const endCol = viewportCappedStartRow === viewportEndRow ? end[0] : this._bufferService.cols;
+      documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow, startCol, endCol));
+      // Draw middle rows
+      const middleRowsCount = viewportCappedEndRow - viewportCappedStartRow - 1;
+      documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow + 1, 0, this._bufferService.cols, middleRowsCount));
+      // Draw final row
+      if (viewportCappedStartRow !== viewportCappedEndRow) {
+        // Only draw viewportEndRow if it's not the same as viewporttartRow
+        const endCol = viewportEndRow === viewportCappedEndRow ? end[0] : this._bufferService.cols;
+        documentFragment.appendChild(this._createSelectionElement(viewportCappedEndRow, 0, endCol));
+      }
+    }
+    this._selectionContainer.appendChild(documentFragment);
+  }
+
+  /**
+   * Creates a selection element at the specified position.
+   * @param row The row of the selection.
+   * @param colStart The start column.
+   * @param colEnd The end columns.
+   */
+  private _createSelectionElement(row: number, colStart: number, colEnd: number, rowCount: number = 1): HTMLElement {
+    const element = this._document.createElement('div');
+    const left = colStart * this.dimensions.css.cell.width;
+    let width = this.dimensions.css.cell.width * (colEnd - colStart);
+    if (left + width > this.dimensions.css.canvas.width) {
+      width = this.dimensions.css.canvas.width - left;
+    }
+
+    element.style.height = `${rowCount * this.dimensions.css.cell.height}px`;
+    element.style.top = `${row * this.dimensions.css.cell.height}px`;
+    element.style.left = `${left}px`;
+    element.style.width = `${width}px`;
+    return element;
+  }
+
+  public handleCursorMove(): void {
+    // No-op, the cursor is drawn when rows are drawn
+  }
+
+  private _handleOptionsChanged(): void {
+    // Force a refresh
+    this._updateDimensions();
+    // Refresh CSS
+    this._injectCss(this._themeService.colors);
+    // update spacing cache
+    this._widthCache.setFont(
+      this._optionsService.rawOptions.fontFamily,
+      this._optionsService.rawOptions.fontSize,
+      this._optionsService.rawOptions.fontWeight,
+      this._optionsService.rawOptions.fontWeightBold
+    );
+    this._setDefaultSpacing();
+  }
+
+  public clear(): void {
+    for (const e of this._rowElements) {
+      /**
+       * NOTE: This used to be `e.innerText = '';` but that doesn't work when using `jsdom` and
+       * `@testing-library/react`
+       *
+       * references:
+       * - https://github.com/testing-library/react-testing-library/issues/1146
+       * - https://github.com/jsdom/jsdom/issues/1245
+       */
+      e.replaceChildren();
+    }
+  }
+
+  public renderRows(start: number, end: number): void {
+    const buffer = this._bufferService.buffer;
+    const cursorAbsoluteY = buffer.ybase + buffer.y;
+    const cursorX = Math.min(buffer.x, this._bufferService.cols - 1);
+    const cursorBlink = this._optionsService.rawOptions.cursorBlink;
+    const cursorStyle = this._optionsService.rawOptions.cursorStyle;
+    const cursorInactiveStyle = this._optionsService.rawOptions.cursorInactiveStyle;
+
+    for (let y = start; y <= end; y++) {
+      const row = y + buffer.ydisp;
+      const rowElement = this._rowElements[y];
+      const lineData = buffer.lines.get(row);
+      if (!rowElement || !lineData) {
+        break;
+      }
+      rowElement.replaceChildren(
+        ...this._rowFactory.createRow(
+          lineData,
+          row,
+          row === cursorAbsoluteY,
+          cursorStyle,
+          cursorInactiveStyle,
+          cursorX,
+          cursorBlink,
+          this.dimensions.css.cell.width,
+          this._widthCache,
+          -1,
+          -1
+        )
+      );
+    }
+  }
+
+  private get _terminalSelector(): string {
+    return `.${TERMINAL_CLASS_PREFIX}${this._terminalClass}`;
+  }
+
+  private _handleLinkHover(e: ILinkifierEvent): void {
+    this._setCellUnderline(e.x1, e.x2, e.y1, e.y2, e.cols, true);
+  }
+
+  private _handleLinkLeave(e: ILinkifierEvent): void {
+    this._setCellUnderline(e.x1, e.x2, e.y1, e.y2, e.cols, false);
+  }
+
+  private _setCellUnderline(x: number, x2: number, y: number, y2: number, cols: number, enabled: boolean): void {
+    /**
+     * NOTE: The linkifier may send out of viewport y-values if:
+     * - negative y-value: the link started at a higher line
+     * - y-value >= maxY: the link ends at a line below viewport
+     *
+     * For negative y-values we can simply adjust x = 0,
+     * as higher up link start means, that everything from
+     * (0,0) is a link under top-down-left-right char progression
+     *
+     * Additionally there might be a small chance of out-of-sync x|y-values
+     * from a race condition of render updates vs. link event handler execution:
+     * - (sync) resize: chances terminal buffer in sync, schedules render update async
+     * - (async) link handler race condition: new buffer metrics, but still on old render state
+     * - (async) render update: brings term metrics and render state back in sync
+     */
+    // clip coords into viewport
+    if (y < 0) x = 0;
+    if (y2 < 0) x2 = 0;
+    const maxY = this._bufferService.rows - 1;
+    y = Math.max(Math.min(y, maxY), 0);
+    y2 = Math.max(Math.min(y2, maxY), 0);
+
+    cols = Math.min(cols, this._bufferService.cols);
+    const buffer = this._bufferService.buffer;
+    const cursorAbsoluteY = buffer.ybase + buffer.y;
+    const cursorX = Math.min(buffer.x, cols - 1);
+    const cursorBlink = this._optionsService.rawOptions.cursorBlink;
+    const cursorStyle = this._optionsService.rawOptions.cursorStyle;
+    const cursorInactiveStyle = this._optionsService.rawOptions.cursorInactiveStyle;
+
+    // refresh rows within link range
+    for (let i = y; i <= y2; ++i) {
+      const row = i + buffer.ydisp;
+      const rowElement = this._rowElements[i];
+      const bufferline = buffer.lines.get(row);
+      if (!rowElement || !bufferline) {
+        break;
+      }
+      rowElement.replaceChildren(
+        ...this._rowFactory.createRow(
+          bufferline,
+          row,
+          row === cursorAbsoluteY,
+          cursorStyle,
+          cursorInactiveStyle,
+          cursorX,
+          cursorBlink,
+          this.dimensions.css.cell.width,
+          this._widthCache,
+          enabled ? (i === y ? x : 0) : -1,
+          enabled ? ((i === y2 ? x2 : cols) - 1) : -1
+        )
+      );
+    }
+  }
+}

web/node_modules/@xterm/xterm/src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -0,0 +1,526 @@
+/**
+ * Copyright (c) 2018, 2023 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IBufferLine, ICellData, IColor } from 'common/Types';
+import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
+import { WHITESPACE_CELL_CHAR, Attributes } from 'common/buffer/Constants';
+import { CellData } from 'common/buffer/CellData';
+import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { channels, color } from 'common/Color';
+import { ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { JoinedCellData } from 'browser/services/CharacterJoinerService';
+import { treatGlyphAsBackgroundColor } from 'browser/renderer/shared/RendererUtils';
+import { AttributeData } from 'common/buffer/AttributeData';
+import { WidthCache } from 'browser/renderer/dom/WidthCache';
+import { IColorContrastCache } from 'browser/Types';
+
+
+export const enum RowCss {
+  BOLD_CLASS = 'xterm-bold',
+  DIM_CLASS = 'xterm-dim',
+  ITALIC_CLASS = 'xterm-italic',
+  UNDERLINE_CLASS = 'xterm-underline',
+  OVERLINE_CLASS = 'xterm-overline',
+  STRIKETHROUGH_CLASS = 'xterm-strikethrough',
+  CURSOR_CLASS = 'xterm-cursor',
+  CURSOR_BLINK_CLASS = 'xterm-cursor-blink',
+  CURSOR_STYLE_BLOCK_CLASS = 'xterm-cursor-block',
+  CURSOR_STYLE_OUTLINE_CLASS = 'xterm-cursor-outline',
+  CURSOR_STYLE_BAR_CLASS = 'xterm-cursor-bar',
+  CURSOR_STYLE_UNDERLINE_CLASS = 'xterm-cursor-underline'
+}
+
+
+export class DomRendererRowFactory {
+  private _workCell: CellData = new CellData();
+
+  private _selectionStart: [number, number] | undefined;
+  private _selectionEnd: [number, number] | undefined;
+  private _columnSelectMode: boolean = false;
+
+  public defaultSpacing = 0;
+
+  constructor(
+    private readonly _document: Document,
+    @ICharacterJoinerService private readonly _characterJoinerService: ICharacterJoinerService,
+    @IOptionsService private readonly _optionsService: IOptionsService,
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
+    @ICoreService private readonly _coreService: ICoreService,
+    @IDecorationService private readonly _decorationService: IDecorationService,
+    @IThemeService private readonly _themeService: IThemeService
+  ) {}
+
+  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
+    this._selectionStart = start;
+    this._selectionEnd = end;
+    this._columnSelectMode = columnSelectMode;
+  }
+
+  public createRow(
+    lineData: IBufferLine,
+    row: number,
+    isCursorRow: boolean,
+    cursorStyle: string | undefined,
+    cursorInactiveStyle: string | undefined,
+    cursorX: number,
+    cursorBlink: boolean,
+    cellWidth: number,
+    widthCache: WidthCache,
+    linkStart: number,
+    linkEnd: number
+  ): HTMLSpanElement[] {
+
+    const elements: HTMLSpanElement[] = [];
+    const joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
+    const colors = this._themeService.colors;
+
+    let lineLength = lineData.getNoBgTrimmedLength();
+    if (isCursorRow && lineLength < cursorX + 1) {
+      lineLength = cursorX + 1;
+    }
+
+    let charElement: HTMLSpanElement | undefined;
+    let cellAmount = 0;
+    let text = '';
+    let oldBg = 0;
+    let oldFg = 0;
+    let oldExt = 0;
+    let oldLinkHover: number | boolean = false;
+    let oldSpacing = 0;
+    let oldIsInSelection: boolean = false;
+    let spacing = 0;
+    const classes: string[] = [];
+
+    const hasHover = linkStart !== -1 && linkEnd !== -1;
+
+    for (let x = 0; x < lineLength; x++) {
+      lineData.loadCell(x, this._workCell);
+      let width = this._workCell.getWidth();
+
+      // The character to the left is a wide character, drawing is owned by the char at x-1
+      if (width === 0) {
+        continue;
+      }
+
+      // If true, indicates that the current character(s) to draw were joined.
+      let isJoined = false;
+      let lastCharX = x;
+
+      // Process any joined character ranges as needed. Because of how the
+      // ranges are produced, we know that they are valid for the characters
+      // and attributes of our input.
+      let cell = this._workCell;
+      if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
+        isJoined = true;
+        const range = joinedRanges.shift()!;
+
+        // We already know the exact start and end column of the joined range,
+        // so we get the string and width representing it directly
+        cell = new JoinedCellData(
+          this._workCell,
+          lineData.translateToString(true, range[0], range[1]),
+          range[1] - range[0]
+        );
+
+        // Skip over the cells occupied by this range in the loop
+        lastCharX = range[1] - 1;
+
+        // Recalculate width
+        width = cell.getWidth();
+      }
+
+      const isInSelection = this._isCellInSelection(x, row);
+      const isCursorCell = isCursorRow && x === cursorX;
+      const isLinkHover = hasHover && x >= linkStart && x <= linkEnd;
+
+      let isDecorated = false;
+      this._decorationService.forEachDecorationAtCell(x, row, undefined, d => {
+        isDecorated = true;
+      });
+
+      // get chars to render for this cell
+      let chars = cell.getChars() || WHITESPACE_CELL_CHAR;
+      if (chars === ' ' && (cell.isUnderline() || cell.isOverline())) {
+        chars = '\xa0';
+      }
+
+      // lookup char render width and calc spacing
+      spacing = width * cellWidth - widthCache.get(chars, cell.isBold(), cell.isItalic());
+
+      if (!charElement) {
+        charElement = this._document.createElement('span');
+      } else {
+        /**
+         * chars can only be merged on existing span if:
+         * - existing span only contains mergeable chars (cellAmount != 0)
+         * - bg did not change (or both are in selection)
+         * - fg did not change (or both are in selection and selection fg is set)
+         * - ext did not change
+         * - underline from hover state did not change
+         * - cell content renders to same letter-spacing
+         * - cell is not cursor
+         */
+        if (
+          cellAmount
+          && (
+            (isInSelection && oldIsInSelection)
+            || (!isInSelection && !oldIsInSelection && cell.bg === oldBg)
+          )
+          && (
+            (isInSelection && oldIsInSelection && colors.selectionForeground)
+            || cell.fg === oldFg
+          )
+          && cell.extended.ext === oldExt
+          && isLinkHover === oldLinkHover
+          && spacing === oldSpacing
+          && !isCursorCell
+          && !isJoined
+          && !isDecorated
+        ) {
+          // no span alterations, thus only account chars skipping all code below
+          if (cell.isInvisible()) {
+            text += WHITESPACE_CELL_CHAR;
+          } else {
+            text += chars;
+          }
+          cellAmount++;
+          continue;
+        } else {
+          /**
+           * cannot merge:
+           * - apply left-over text to old span
+           * - create new span, reset state holders cellAmount & text
+           */
+          if (cellAmount) {
+            charElement.textContent = text;
+          }
+          charElement = this._document.createElement('span');
+          cellAmount = 0;
+          text = '';
+        }
+      }
+      // preserve conditions for next merger eval round
+      oldBg = cell.bg;
+      oldFg = cell.fg;
+      oldExt = cell.extended.ext;
+      oldLinkHover = isLinkHover;
+      oldSpacing = spacing;
+      oldIsInSelection = isInSelection;
+
+      if (isJoined) {
+        // The DOM renderer colors the background of the cursor but for ligatures all cells are
+        // joined. The workaround here is to show a cursor around the whole ligature so it shows up,
+        // the cursor looks the same when on any character of the ligature though
+        if (cursorX >= x && cursorX <= lastCharX) {
+          cursorX = x;
+        }
+      }
+
+      if (!this._coreService.isCursorHidden && isCursorCell && this._coreService.isCursorInitialized) {
+        classes.push(RowCss.CURSOR_CLASS);
+        if (this._coreBrowserService.isFocused) {
+          if (cursorBlink) {
+            classes.push(RowCss.CURSOR_BLINK_CLASS);
+          }
+          classes.push(
+            cursorStyle === 'bar'
+              ? RowCss.CURSOR_STYLE_BAR_CLASS
+              : cursorStyle === 'underline'
+                ? RowCss.CURSOR_STYLE_UNDERLINE_CLASS
+                : RowCss.CURSOR_STYLE_BLOCK_CLASS
+          );
+        } else {
+          if (cursorInactiveStyle) {
+            switch (cursorInactiveStyle) {
+              case 'outline':
+                classes.push(RowCss.CURSOR_STYLE_OUTLINE_CLASS);
+                break;
+              case 'block':
+                classes.push(RowCss.CURSOR_STYLE_BLOCK_CLASS);
+                break;
+              case 'bar':
+                classes.push(RowCss.CURSOR_STYLE_BAR_CLASS);
+                break;
+              case 'underline':
+                classes.push(RowCss.CURSOR_STYLE_UNDERLINE_CLASS);
+                break;
+              default:
+                break;
+            }
+          }
+        }
+      }
+
+      if (cell.isBold()) {
+        classes.push(RowCss.BOLD_CLASS);
+      }
+
+      if (cell.isItalic()) {
+        classes.push(RowCss.ITALIC_CLASS);
+      }
+
+      if (cell.isDim()) {
+        classes.push(RowCss.DIM_CLASS);
+      }
+
+      if (cell.isInvisible()) {
+        text = WHITESPACE_CELL_CHAR;
+      } else {
+        text = cell.getChars() || WHITESPACE_CELL_CHAR;
+      }
+
+      if (cell.isUnderline()) {
+        classes.push(`${RowCss.UNDERLINE_CLASS}-${cell.extended.underlineStyle}`);
+        if (text === ' ') {
+          text = '\xa0'; // = &nbsp;
+        }
+        if (!cell.isUnderlineColorDefault()) {
+          if (cell.isUnderlineColorRGB()) {
+            charElement.style.textDecorationColor = `rgb(${AttributeData.toColorRGB(cell.getUnderlineColor()).join(',')})`;
+          } else {
+            let fg = cell.getUnderlineColor();
+            if (this._optionsService.rawOptions.drawBoldTextInBrightColors && cell.isBold() && fg < 8) {
+              fg += 8;
+            }
+            charElement.style.textDecorationColor = colors.ansi[fg].css;
+          }
+        }
+      }
+
+      if (cell.isOverline()) {
+        classes.push(RowCss.OVERLINE_CLASS);
+        if (text === ' ') {
+          text = '\xa0'; // = &nbsp;
+        }
+      }
+
+      if (cell.isStrikethrough()) {
+        classes.push(RowCss.STRIKETHROUGH_CLASS);
+      }
+
+      // apply link hover underline late, effectively overrides any previous text-decoration
+      // settings
+      if (isLinkHover) {
+        charElement.style.textDecoration = 'underline';
+      }
+
+      let fg = cell.getFgColor();
+      let fgColorMode = cell.getFgColorMode();
+      let bg = cell.getBgColor();
+      let bgColorMode = cell.getBgColorMode();
+      const isInverse = !!cell.isInverse();
+      if (isInverse) {
+        const temp = fg;
+        fg = bg;
+        bg = temp;
+        const temp2 = fgColorMode;
+        fgColorMode = bgColorMode;
+        bgColorMode = temp2;
+      }
+
+      // Apply any decoration foreground/background overrides, this must happen after inverse has
+      // been applied
+      let bgOverride: IColor | undefined;
+      let fgOverride: IColor | undefined;
+      let isTop = false;
+      this._decorationService.forEachDecorationAtCell(x, row, undefined, d => {
+        if (d.options.layer !== 'top' && isTop) {
+          return;
+        }
+        if (d.backgroundColorRGB) {
+          bgColorMode = Attributes.CM_RGB;
+          bg = d.backgroundColorRGB.rgba >> 8 & 0xFFFFFF;
+          bgOverride = d.backgroundColorRGB;
+        }
+        if (d.foregroundColorRGB) {
+          fgColorMode = Attributes.CM_RGB;
+          fg = d.foregroundColorRGB.rgba >> 8 & 0xFFFFFF;
+          fgOverride = d.foregroundColorRGB;
+        }
+        isTop = d.options.layer === 'top';
+      });
+
+      // Apply selection
+      if (!isTop && isInSelection) {
+        // If in the selection, force the element to be above the selection to improve contrast and
+        // support opaque selections. The applies background is not actually needed here as
+        // selection is drawn in a seperate container, the main purpose of this to ensuring minimum
+        // contrast ratio
+        bgOverride = this._coreBrowserService.isFocused ? colors.selectionBackgroundOpaque : colors.selectionInactiveBackgroundOpaque;
+        bg = bgOverride.rgba >> 8 & 0xFFFFFF;
+        bgColorMode = Attributes.CM_RGB;
+        // Since an opaque selection is being rendered, the selection pretends to be a decoration to
+        // ensure text is drawn above the selection.
+        isTop = true;
+        // Apply selection foreground if applicable
+        if (colors.selectionForeground) {
+          fgColorMode = Attributes.CM_RGB;
+          fg = colors.selectionForeground.rgba >> 8 & 0xFFFFFF;
+          fgOverride = colors.selectionForeground;
+        }
+      }
+
+      // If it's a top decoration, render above the selection
+      if (isTop) {
+        classes.push('xterm-decoration-top');
+      }
+
+      // Background
+      let resolvedBg: IColor;
+      switch (bgColorMode) {
+        case Attributes.CM_P16:
+        case Attributes.CM_P256:
+          resolvedBg = colors.ansi[bg];
+          classes.push(`xterm-bg-${bg}`);
+          break;
+        case Attributes.CM_RGB:
+          resolvedBg = channels.toColor(bg >> 16, bg >> 8 & 0xFF, bg & 0xFF);
+          this._addStyle(charElement, `background-color:#${padStart((bg >>> 0).toString(16), '0', 6)}`);
+          break;
+        case Attributes.CM_DEFAULT:
+        default:
+          if (isInverse) {
+            resolvedBg = colors.foreground;
+            classes.push(`xterm-bg-${INVERTED_DEFAULT_COLOR}`);
+          } else {
+            resolvedBg = colors.background;
+          }
+      }
+
+      // If there is no background override by now it's the original color, so apply dim if needed
+      if (!bgOverride) {
+        if (cell.isDim()) {
+          bgOverride = color.multiplyOpacity(resolvedBg, 0.5);
+        }
+      }
+
+      // Foreground
+      switch (fgColorMode) {
+        case Attributes.CM_P16:
+        case Attributes.CM_P256:
+          if (cell.isBold() && fg < 8 && this._optionsService.rawOptions.drawBoldTextInBrightColors) {
+            fg += 8;
+          }
+          if (!this._applyMinimumContrast(charElement, resolvedBg, colors.ansi[fg], cell, bgOverride, undefined)) {
+            classes.push(`xterm-fg-${fg}`);
+          }
+          break;
+        case Attributes.CM_RGB:
+          const color = channels.toColor(
+            (fg >> 16) & 0xFF,
+            (fg >>  8) & 0xFF,
+            (fg      ) & 0xFF
+          );
+          if (!this._applyMinimumContrast(charElement, resolvedBg, color, cell, bgOverride, fgOverride)) {
+            this._addStyle(charElement, `color:#${padStart(fg.toString(16), '0', 6)}`);
+          }
+          break;
+        case Attributes.CM_DEFAULT:
+        default:
+          if (!this._applyMinimumContrast(charElement, resolvedBg, colors.foreground, cell, bgOverride, fgOverride)) {
+            if (isInverse) {
+              classes.push(`xterm-fg-${INVERTED_DEFAULT_COLOR}`);
+            }
+          }
+      }
+
+      // apply CSS classes
+      // slightly faster than using classList by omitting
+      // checks for doubled entries (code above should not have doublets)
+      if (classes.length) {
+        charElement.className = classes.join(' ');
+        classes.length = 0;
+      }
+
+      // exclude conditions for cell merging - never merge these
+      if (!isCursorCell && !isJoined && !isDecorated) {
+        cellAmount++;
+      } else {
+        charElement.textContent = text;
+      }
+      // apply letter-spacing rule
+      if (spacing !== this.defaultSpacing) {
+        charElement.style.letterSpacing = `${spacing}px`;
+      }
+
+      elements.push(charElement);
+      x = lastCharX;
+    }
+
+    // postfix text of last merged span
+    if (charElement && cellAmount) {
+      charElement.textContent = text;
+    }
+
+    return elements;
+  }
+
+  private _applyMinimumContrast(element: HTMLElement, bg: IColor, fg: IColor, cell: ICellData, bgOverride: IColor | undefined, fgOverride: IColor | undefined): boolean {
+    if (this._optionsService.rawOptions.minimumContrastRatio === 1 || treatGlyphAsBackgroundColor(cell.getCode())) {
+      return false;
+    }
+
+    // Try get from cache first, only use the cache when there are no decoration overrides
+    const cache = this._getContrastCache(cell);
+    let adjustedColor: IColor | undefined | null = undefined;
+    if (!bgOverride && !fgOverride) {
+      adjustedColor = cache.getColor(bg.rgba, fg.rgba);
+    }
+
+    // Calculate and store in cache
+    if (adjustedColor === undefined) {
+      // Dim cells only require half the contrast, otherwise they wouldn't be distinguishable from
+      // non-dim cells
+      const ratio = this._optionsService.rawOptions.minimumContrastRatio / (cell.isDim() ? 2 : 1);
+      adjustedColor = color.ensureContrastRatio(bgOverride || bg, fgOverride || fg, ratio);
+      cache.setColor((bgOverride || bg).rgba, (fgOverride || fg).rgba, adjustedColor ?? null);
+    }
+
+    if (adjustedColor) {
+      this._addStyle(element, `color:${adjustedColor.css}`);
+      return true;
+    }
+
+    return false;
+  }
+
+  private _getContrastCache(cell: ICellData): IColorContrastCache {
+    if (cell.isDim()) {
+      return this._themeService.colors.halfContrastCache;
+    }
+    return this._themeService.colors.contrastCache;
+  }
+
+  private _addStyle(element: HTMLElement, style: string): void {
+    element.setAttribute('style', `${element.getAttribute('style') || ''}${style};`);
+  }
+
+  private _isCellInSelection(x: number, y: number): boolean {
+    const start = this._selectionStart;
+    const end = this._selectionEnd;
+    if (!start || !end) {
+      return false;
+    }
+    if (this._columnSelectMode) {
+      if (start[0] <= end[0]) {
+        return x >= start[0] && y >= start[1] &&
+          x < end[0] && y <= end[1];
+      }
+      return x < start[0] && y >= start[1] &&
+        x >= end[0] && y <= end[1];
+    }
+    return (y > start[1] && y < end[1]) ||
+        (start[1] === end[1] && y === start[1] && x >= start[0] && x < end[0]) ||
+        (start[1] < end[1] && y === end[1] && x < end[0]) ||
+        (start[1] < end[1] && y === start[1] && x >= start[0]);
+  }
+}
+
+function padStart(text: string, padChar: string, length: number): string {
+  while (text.length < length) {
+    text = padChar + text;
+  }
+  return text;
+}

web/node_modules/@xterm/xterm/src/browser/renderer/dom/WidthCache.ts

@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) 2023 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IDisposable } from 'common/Types';
+import { FontWeight } from 'common/services/Services';
+
+
+export const enum WidthCacheSettings {
+  /** sentinel for unset values in flat cache */
+  FLAT_UNSET = -9999,
+  /** size of flat cache, size-1 equals highest codepoint handled by flat */
+  FLAT_SIZE = 256,
+  /** char repeat for measuring */
+  REPEAT = 32
+}
+
+
+const enum FontVariant {
+  REGULAR = 0,
+  BOLD = 1,
+  ITALIC = 2,
+  BOLD_ITALIC = 3
+}
+
+
+export class WidthCache implements IDisposable {
+  // flat cache for regular variant up to CacheSettings.FLAT_SIZE
+  // NOTE: ~4x faster access than holey (serving >>80% of terminal content)
+  //       It has a small memory footprint (only 1MB for full BMP caching),
+  //       still the sweet spot is not reached before touching 32k different codepoints,
+  //       thus we store the remaining <<20% of terminal data in a holey structure.
+  protected _flat = new Float32Array(WidthCacheSettings.FLAT_SIZE);
+
+  // holey cache for bold, italic and bold&italic for any string
+  // FIXME: can grow really big over time (~8.5 MB for full BMP caching),
+  //        so a shared API across terminals is needed
+  protected _holey: Map<string, number> | undefined;
+
+  private _font = '';
+  private _fontSize = 0;
+  private _weight: FontWeight = 'normal';
+  private _weightBold: FontWeight = 'bold';
+  private _container: HTMLDivElement;
+  private _measureElements: HTMLSpanElement[] = [];
+
+  constructor(_document: Document, _helperContainer: HTMLElement) {
+    this._container = _document.createElement('div');
+    this._container.classList.add('xterm-width-cache-measure-container');
+    this._container.setAttribute('aria-hidden', 'true');
+    // SP should stack in spans
+    this._container.style.whiteSpace = 'pre';
+    // avoid undercuts in non-monospace fonts from kerning
+    this._container.style.fontKerning = 'none';
+
+    const regular = _document.createElement('span');
+    regular.classList.add('xterm-char-measure-element');
+
+    const bold = _document.createElement('span');
+    bold.classList.add('xterm-char-measure-element');
+    bold.style.fontWeight = 'bold';
+
+    const italic = _document.createElement('span');
+    italic.classList.add('xterm-char-measure-element');
+    italic.style.fontStyle = 'italic';
+
+    const boldItalic = _document.createElement('span');
+    boldItalic.classList.add('xterm-char-measure-element');
+    boldItalic.style.fontWeight = 'bold';
+    boldItalic.style.fontStyle = 'italic';
+
+    // NOTE: must be in order of FontVariant
+    this._measureElements = [regular, bold, italic, boldItalic];
+    this._container.appendChild(regular);
+    this._container.appendChild(bold);
+    this._container.appendChild(italic);
+    this._container.appendChild(boldItalic);
+
+    _helperContainer.appendChild(this._container);
+
+    this.clear();
+  }
+
+  public dispose(): void {
+    this._container.remove();           // remove elements from DOM
+    this._measureElements.length = 0;   // release element refs
+    this._holey = undefined;            // free cache memory via GC
+  }
+
+  /**
+   * Clear the width cache.
+   */
+  public clear(): void {
+    this._flat.fill(WidthCacheSettings.FLAT_UNSET);
+    // .clear() has some overhead, re-assign instead (>3 times faster)
+    this._holey = new Map<string, number>();
+  }
+
+  /**
+   * Set the font for measuring.
+   * Must be called for any changes on font settings.
+   * Also clears the cache.
+   */
+  public setFont(font: string, fontSize: number, weight: FontWeight, weightBold: FontWeight): void {
+    // skip if nothing changed
+    if (font === this._font
+      && fontSize === this._fontSize
+      && weight === this._weight
+      && weightBold === this._weightBold
+    ) {
+      return;
+    }
+
+    this._font = font;
+    this._fontSize = fontSize;
+    this._weight = weight;
+    this._weightBold = weightBold;
+
+    this._container.style.fontFamily = this._font;
+    this._container.style.fontSize = `${this._fontSize}px`;
+    this._measureElements[FontVariant.REGULAR].style.fontWeight = `${weight}`;
+    this._measureElements[FontVariant.BOLD].style.fontWeight = `${weightBold}`;
+    this._measureElements[FontVariant.ITALIC].style.fontWeight = `${weight}`;
+    this._measureElements[FontVariant.BOLD_ITALIC].style.fontWeight = `${weightBold}`;
+
+    this.clear();
+  }
+
+  /**
+   * Get the render width for cell content `c` with current font settings.
+   * `variant` denotes the font variant to be used.
+   */
+  public get(c: string, bold: boolean | number, italic: boolean | number): number {
+    let cp = 0;
+    if (!bold && !italic && c.length === 1 && (cp = c.charCodeAt(0)) < WidthCacheSettings.FLAT_SIZE) {
+      if (this._flat[cp] !== WidthCacheSettings.FLAT_UNSET) {
+        return this._flat[cp];
+      }
+      const width = this._measure(c, 0);
+      if (width > 0) {
+        this._flat[cp] = width;
+      }
+      return width;
+    }
+    let key = c;
+    if (bold) key += 'B';
+    if (italic) key += 'I';
+    let width = this._holey!.get(key);
+    if (width === undefined) {
+      let variant = 0;
+      if (bold) variant |= FontVariant.BOLD;
+      if (italic) variant |= FontVariant.ITALIC;
+      width = this._measure(c, variant);
+      if (width > 0) {
+        this._holey!.set(key, width);
+      }
+    }
+    return width;
+  }
+
+  protected _measure(c: string, variant: FontVariant): number {
+    const el = this._measureElements[variant];
+    el.textContent = c.repeat(WidthCacheSettings.REPEAT);
+    return el.offsetWidth / WidthCacheSettings.REPEAT;
+  }
+}

web/node_modules/@xterm/xterm/src/browser/renderer/shared/CellColorResolver.ts

@@ -0,0 +1,236 @@
+import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { ReadonlyColorSet } from 'browser/Types';
+import { Attributes, BgFlags, ExtFlags, FgFlags, NULL_CELL_CODE, UnderlineStyle } from 'common/buffer/Constants';
+import { IDecorationService, IOptionsService } from 'common/services/Services';
+import { ICellData } from 'common/Types';
+import { Terminal } from '@xterm/xterm';
+import { rgba } from 'common/Color';
+import { treatGlyphAsBackgroundColor } from 'browser/renderer/shared/RendererUtils';
+
+// Work variables to avoid garbage collection
+let $fg = 0;
+let $bg = 0;
+let $hasFg = false;
+let $hasBg = false;
+let $isSelected = false;
+let $colors: ReadonlyColorSet | undefined;
+let $variantOffset = 0;
+
+export class CellColorResolver {
+  /**
+   * The shared result of the {@link resolve} call. This is only safe to use immediately after as
+   * any other calls will share object.
+   */
+  public readonly result: { fg: number, bg: number, ext: number } = {
+    fg: 0,
+    bg: 0,
+    ext: 0
+  };
+
+  constructor(
+    private readonly _terminal: Terminal,
+    private readonly _optionService: IOptionsService,
+    private readonly _selectionRenderModel: ISelectionRenderModel,
+    private readonly _decorationService: IDecorationService,
+    private readonly _coreBrowserService: ICoreBrowserService,
+    private readonly _themeService: IThemeService
+  ) {
+  }
+
+  /**
+   * Resolves colors for the cell, putting the result into the shared {@link result}. This resolves
+   * overrides, inverse and selection for the cell which can then be used to feed into the renderer.
+   */
+  public resolve(cell: ICellData, x: number, y: number, deviceCellWidth: number): void {
+    this.result.bg = cell.bg;
+    this.result.fg = cell.fg;
+    this.result.ext = cell.bg & BgFlags.HAS_EXTENDED ? cell.extended.ext : 0;
+    // Get any foreground/background overrides, this happens on the model to avoid spreading
+    // override logic throughout the different sub-renderers
+
+    // Reset overrides work variables
+    $bg = 0;
+    $fg = 0;
+    $hasBg = false;
+    $hasFg = false;
+    $isSelected = false;
+    $colors = this._themeService.colors;
+    $variantOffset = 0;
+
+    const code = cell.getCode();
+    if (code !== NULL_CELL_CODE && cell.extended.underlineStyle === UnderlineStyle.DOTTED) {
+      const lineWidth = Math.max(1, Math.floor(this._optionService.rawOptions.fontSize * this._coreBrowserService.dpr / 15));
+      $variantOffset = x * deviceCellWidth % (Math.round(lineWidth) * 2);
+    }
+
+    // Apply decorations on the bottom layer
+    this._decorationService.forEachDecorationAtCell(x, y, 'bottom', d => {
+      if (d.backgroundColorRGB) {
+        $bg = d.backgroundColorRGB.rgba >> 8 & Attributes.RGB_MASK;
+        $hasBg = true;
+      }
+      if (d.foregroundColorRGB) {
+        $fg = d.foregroundColorRGB.rgba >> 8 & Attributes.RGB_MASK;
+        $hasFg = true;
+      }
+    });
+
+    // Apply the selection color if needed
+    $isSelected = this._selectionRenderModel.isCellSelected(this._terminal, x, y);
+    if ($isSelected) {
+      // If the cell has a bg color, retain the color by blending it with the selection color
+      if (
+        (this.result.fg & FgFlags.INVERSE) ||
+        (this.result.bg & Attributes.CM_MASK) !== Attributes.CM_DEFAULT
+      ) {
+        // Resolve the standard bg color
+        if (this.result.fg & FgFlags.INVERSE) {
+          switch (this.result.fg & Attributes.CM_MASK) {
+            case Attributes.CM_P16:
+            case Attributes.CM_P256:
+              $bg = this._themeService.colors.ansi[this.result.fg & Attributes.PCOLOR_MASK].rgba;
+              break;
+            case Attributes.CM_RGB:
+              $bg = ((this.result.fg & Attributes.RGB_MASK) << 8) | 0xFF;
+              break;
+            case Attributes.CM_DEFAULT:
+            default:
+              $bg = this._themeService.colors.foreground.rgba;
+          }
+        } else {
+          switch (this.result.bg & Attributes.CM_MASK) {
+            case Attributes.CM_P16:
+            case Attributes.CM_P256:
+              $bg = this._themeService.colors.ansi[this.result.bg & Attributes.PCOLOR_MASK].rgba;
+              break;
+            case Attributes.CM_RGB:
+              $bg = ((this.result.bg & Attributes.RGB_MASK) << 8) | 0xFF;
+              break;
+            // No need to consider default bg color here as it's not possible
+          }
+        }
+        // Blend with selection bg color
+        $bg = rgba.blend(
+          $bg,
+          ((this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba & 0xFFFFFF00) | 0x80
+        ) >> 8 & Attributes.RGB_MASK;
+      } else {
+        $bg = (this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba >> 8 & Attributes.RGB_MASK;
+      }
+      $hasBg = true;
+
+      // Apply explicit selection foreground if present
+      if ($colors.selectionForeground) {
+        $fg = $colors.selectionForeground.rgba >> 8 & Attributes.RGB_MASK;
+        $hasFg = true;
+      }
+
+      // Overwrite fg as bg if it's a special decorative glyph (eg. powerline)
+      if (treatGlyphAsBackgroundColor(cell.getCode())) {
+        // Inverse default background should be treated as transparent
+        if (
+          (this.result.fg & FgFlags.INVERSE) &&
+          (this.result.bg & Attributes.CM_MASK) === Attributes.CM_DEFAULT
+        ) {
+          $fg = (this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba >> 8 & Attributes.RGB_MASK;
+        } else {
+
+          if (this.result.fg & FgFlags.INVERSE) {
+            switch (this.result.bg & Attributes.CM_MASK) {
+              case Attributes.CM_P16:
+              case Attributes.CM_P256:
+                $fg = this._themeService.colors.ansi[this.result.bg & Attributes.PCOLOR_MASK].rgba;
+                break;
+              case Attributes.CM_RGB:
+                $fg = ((this.result.bg & Attributes.RGB_MASK) << 8) | 0xFF;
+                break;
+              // No need to consider default bg color here as it's not possible
+            }
+          } else {
+            switch (this.result.fg & Attributes.CM_MASK) {
+              case Attributes.CM_P16:
+              case Attributes.CM_P256:
+                $fg = this._themeService.colors.ansi[this.result.fg & Attributes.PCOLOR_MASK].rgba;
+                break;
+              case Attributes.CM_RGB:
+                $fg = ((this.result.fg & Attributes.RGB_MASK) << 8) | 0xFF;
+                break;
+              case Attributes.CM_DEFAULT:
+              default:
+                $fg = this._themeService.colors.foreground.rgba;
+            }
+          }
+
+          $fg = rgba.blend(
+            $fg,
+            ((this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba & 0xFFFFFF00) | 0x80
+          ) >> 8 & Attributes.RGB_MASK;
+        }
+        $hasFg = true;
+      }
+    }
+
+    // Apply decorations on the top layer
+    this._decorationService.forEachDecorationAtCell(x, y, 'top', d => {
+      if (d.backgroundColorRGB) {
+        $bg = d.backgroundColorRGB.rgba >> 8 & Attributes.RGB_MASK;
+        $hasBg = true;
+      }
+      if (d.foregroundColorRGB) {
+        $fg = d.foregroundColorRGB.rgba >> 8 & Attributes.RGB_MASK;
+        $hasFg = true;
+      }
+    });
+
+    // Convert any overrides from rgba to the fg/bg packed format. This resolves the inverse flag
+    // ahead of time in order to use the correct cache key
+    if ($hasBg) {
+      if ($isSelected) {
+        // Non-RGB attributes from model + force non-dim + override + force RGB color mode
+        $bg = (cell.bg & ~Attributes.RGB_MASK & ~BgFlags.DIM) | $bg | Attributes.CM_RGB;
+      } else {
+        // Non-RGB attributes from model + override + force RGB color mode
+        $bg = (cell.bg & ~Attributes.RGB_MASK) | $bg | Attributes.CM_RGB;
+      }
+    }
+    if ($hasFg) {
+      // Non-RGB attributes from model + force disable inverse + override + force RGB color mode
+      $fg = (cell.fg & ~Attributes.RGB_MASK & ~FgFlags.INVERSE) | $fg | Attributes.CM_RGB;
+    }
+
+    // Handle case where inverse was specified by only one of bg override or fg override was set,
+    // resolving the other inverse color and setting the inverse flag if needed.
+    if (this.result.fg & FgFlags.INVERSE) {
+      if ($hasBg && !$hasFg) {
+        // Resolve bg color type (default color has a different meaning in fg vs bg)
+        if ((this.result.bg & Attributes.CM_MASK) === Attributes.CM_DEFAULT) {
+          $fg = (this.result.fg & ~(Attributes.RGB_MASK | FgFlags.INVERSE | Attributes.CM_MASK)) | (($colors.background.rgba >> 8 & Attributes.RGB_MASK) & Attributes.RGB_MASK) | Attributes.CM_RGB;
+        } else {
+          $fg = (this.result.fg & ~(Attributes.RGB_MASK | FgFlags.INVERSE | Attributes.CM_MASK)) | this.result.bg & (Attributes.RGB_MASK | Attributes.CM_MASK);
+        }
+        $hasFg = true;
+      }
+      if (!$hasBg && $hasFg) {
+        // Resolve bg color type (default color has a different meaning in fg vs bg)
+        if ((this.result.fg & Attributes.CM_MASK) === Attributes.CM_DEFAULT) {
+          $bg = (this.result.bg & ~(Attributes.RGB_MASK | Attributes.CM_MASK)) | (($colors.foreground.rgba >> 8 & Attributes.RGB_MASK) & Attributes.RGB_MASK) | Attributes.CM_RGB;
+        } else {
+          $bg = (this.result.bg & ~(Attributes.RGB_MASK | Attributes.CM_MASK)) | this.result.fg & (Attributes.RGB_MASK | Attributes.CM_MASK);
+        }
+        $hasBg = true;
+      }
+    }
+
+    // Release object
+    $colors = undefined;
+
+    // Use the override if it exists
+    this.result.bg = $hasBg ? $bg : this.result.bg;
+    this.result.fg = $hasFg ? $fg : this.result.fg;
+
+    // Reset overrides variantOffset
+    this.result.ext &= ~ExtFlags.VARIANT_OFFSET;
+    this.result.ext |= ($variantOffset << 29) & ExtFlags.VARIANT_OFFSET;
+  }
+}

web/node_modules/@xterm/xterm/src/browser/renderer/shared/CharAtlasCache.ts

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { TextureAtlas } from 'browser/renderer/shared/TextureAtlas';
+import { ITerminalOptions, Terminal } from '@xterm/xterm';
+import { ITerminal, ReadonlyColorSet } from 'browser/Types';
+import { ICharAtlasConfig, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { generateConfig, configEquals } from 'browser/renderer/shared/CharAtlasUtils';
+
+interface ITextureAtlasCacheEntry {
+  atlas: ITextureAtlas;
+  config: ICharAtlasConfig;
+  // N.B. This implementation potentially holds onto copies of the terminal forever, so
+  // this may cause memory leaks.
+  ownedBy: Terminal[];
+}
+
+const charAtlasCache: ITextureAtlasCacheEntry[] = [];
+
+/**
+ * Acquires a char atlas, either generating a new one or returning an existing
+ * one that is in use by another terminal.
+ */
+export function acquireTextureAtlas(
+  terminal: Terminal,
+  options: Required<ITerminalOptions>,
+  colors: ReadonlyColorSet,
+  deviceCellWidth: number,
+  deviceCellHeight: number,
+  deviceCharWidth: number,
+  deviceCharHeight: number,
+  devicePixelRatio: number
+): ITextureAtlas {
+  const newConfig = generateConfig(deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, options, colors, devicePixelRatio);
+
+  // Check to see if the terminal already owns this config
+  for (let i = 0; i < charAtlasCache.length; i++) {
+    const entry = charAtlasCache[i];
+    const ownedByIndex = entry.ownedBy.indexOf(terminal);
+    if (ownedByIndex >= 0) {
+      if (configEquals(entry.config, newConfig)) {
+        return entry.atlas;
+      }
+      // The configs differ, release the terminal from the entry
+      if (entry.ownedBy.length === 1) {
+        entry.atlas.dispose();
+        charAtlasCache.splice(i, 1);
+      } else {
+        entry.ownedBy.splice(ownedByIndex, 1);
+      }
+      break;
+    }
+  }
+
+  // Try match a char atlas from the cache
+  for (let i = 0; i < charAtlasCache.length; i++) {
+    const entry = charAtlasCache[i];
+    if (configEquals(entry.config, newConfig)) {
+      // Add the terminal to the cache entry and return
+      entry.ownedBy.push(terminal);
+      return entry.atlas;
+    }
+  }
+
+  const core: ITerminal = (terminal as any)._core;
+  const newEntry: ITextureAtlasCacheEntry = {
+    atlas: new TextureAtlas(document, newConfig, core.unicodeService),
+    config: newConfig,
+    ownedBy: [terminal]
+  };
+  charAtlasCache.push(newEntry);
+  return newEntry.atlas;
+}
+
+/**
+ * Removes a terminal reference from the cache, allowing its memory to be freed.
+ * @param terminal The terminal to remove.
+ */
+export function removeTerminalFromCache(terminal: Terminal): void {
+  for (let i = 0; i < charAtlasCache.length; i++) {
+    const index = charAtlasCache[i].ownedBy.indexOf(terminal);
+    if (index !== -1) {
+      if (charAtlasCache[i].ownedBy.length === 1) {
+        // Remove the cache entry if it's the only terminal
+        charAtlasCache[i].atlas.dispose();
+        charAtlasCache.splice(i, 1);
+      } else {
+        // Remove the reference from the cache entry
+        charAtlasCache[i].ownedBy.splice(index, 1);
+      }
+      break;
+    }
+  }
+}

web/node_modules/@xterm/xterm/src/browser/renderer/shared/CharAtlasUtils.ts

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICharAtlasConfig } from './Types';
+import { Attributes } from 'common/buffer/Constants';
+import { ITerminalOptions } from '@xterm/xterm';
+import { IColorSet, ReadonlyColorSet } from 'browser/Types';
+import { NULL_COLOR } from 'common/Color';
+
+export function generateConfig(deviceCellWidth: number, deviceCellHeight: number, deviceCharWidth: number, deviceCharHeight: number, options: Required<ITerminalOptions>, colors: ReadonlyColorSet, devicePixelRatio: number): ICharAtlasConfig {
+  // null out some fields that don't matter
+  const clonedColors: IColorSet = {
+    foreground: colors.foreground,
+    background: colors.background,
+    cursor: NULL_COLOR,
+    cursorAccent: NULL_COLOR,
+    selectionForeground: NULL_COLOR,
+    selectionBackgroundTransparent: NULL_COLOR,
+    selectionBackgroundOpaque: NULL_COLOR,
+    selectionInactiveBackgroundTransparent: NULL_COLOR,
+    selectionInactiveBackgroundOpaque: NULL_COLOR,
+    // For the static char atlas, we only use the first 16 colors, but we need all 256 for the
+    // dynamic character atlas.
+    ansi: colors.ansi.slice(),
+    contrastCache: colors.contrastCache,
+    halfContrastCache: colors.halfContrastCache
+  };
+  return {
+    customGlyphs: options.customGlyphs,
+    devicePixelRatio,
+    letterSpacing: options.letterSpacing,
+    lineHeight: options.lineHeight,
+    deviceCellWidth: deviceCellWidth,
+    deviceCellHeight: deviceCellHeight,
+    deviceCharWidth: deviceCharWidth,
+    deviceCharHeight: deviceCharHeight,
+    fontFamily: options.fontFamily,
+    fontSize: options.fontSize,
+    fontWeight: options.fontWeight,
+    fontWeightBold: options.fontWeightBold,
+    allowTransparency: options.allowTransparency,
+    drawBoldTextInBrightColors: options.drawBoldTextInBrightColors,
+    minimumContrastRatio: options.minimumContrastRatio,
+    colors: clonedColors
+  };
+}
+
+export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean {
+  for (let i = 0; i < a.colors.ansi.length; i++) {
+    if (a.colors.ansi[i].rgba !== b.colors.ansi[i].rgba) {
+      return false;
+    }
+  }
+  return a.devicePixelRatio === b.devicePixelRatio &&
+      a.customGlyphs === b.customGlyphs &&
+      a.lineHeight === b.lineHeight &&
+      a.letterSpacing === b.letterSpacing &&
+      a.fontFamily === b.fontFamily &&
+      a.fontSize === b.fontSize &&
+      a.fontWeight === b.fontWeight &&
+      a.fontWeightBold === b.fontWeightBold &&
+      a.allowTransparency === b.allowTransparency &&
+      a.deviceCharWidth === b.deviceCharWidth &&
+      a.deviceCharHeight === b.deviceCharHeight &&
+      a.drawBoldTextInBrightColors === b.drawBoldTextInBrightColors &&
+      a.minimumContrastRatio === b.minimumContrastRatio &&
+      a.colors.foreground.rgba === b.colors.foreground.rgba &&
+      a.colors.background.rgba === b.colors.background.rgba;
+}
+
+export function is256Color(colorCode: number): boolean {
+  return (colorCode & Attributes.CM_MASK) === Attributes.CM_P16 || (colorCode & Attributes.CM_MASK) === Attributes.CM_P256;
+}

web/node_modules/@xterm/xterm/src/browser/renderer/shared/Constants.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { isFirefox, isLegacyEdge } from 'common/Platform';
+
+export const INVERTED_DEFAULT_COLOR = 257;
+
+export const DIM_OPACITY = 0.5;
+// The text baseline is set conditionally by browser. Using 'ideographic' for Firefox or Legacy Edge
+// would result in truncated text (Issue 3353). Using 'bottom' for Chrome would result in slightly
+// unaligned Powerline fonts (PR 3356#issuecomment-850928179).
+export const TEXT_BASELINE: CanvasTextBaseline = isFirefox || isLegacyEdge ? 'bottom' : 'ideographic';

web/node_modules/@xterm/xterm/src/browser/renderer/shared/CursorBlinkStateManager.ts

@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICoreBrowserService } from 'browser/services/Services';
+
+/**
+ * The time between cursor blinks.
+ */
+const BLINK_INTERVAL = 600;
+
+export class CursorBlinkStateManager {
+  public isCursorVisible: boolean;
+
+  private _animationFrame: number | undefined;
+  private _blinkStartTimeout: number | undefined;
+  private _blinkInterval: number | undefined;
+
+  /**
+   * The time at which the animation frame was restarted, this is used on the
+   * next render to restart the timers so they don't need to restart the timers
+   * multiple times over a short period.
+   */
+  private _animationTimeRestarted: number | undefined;
+
+  constructor(
+    private _renderCallback: () => void,
+    private _coreBrowserService: ICoreBrowserService
+  ) {
+    this.isCursorVisible = true;
+    if (this._coreBrowserService.isFocused) {
+      this._restartInterval();
+    }
+  }
+
+  public get isPaused(): boolean { return !(this._blinkStartTimeout || this._blinkInterval); }
+
+  public dispose(): void {
+    if (this._blinkInterval) {
+      this._coreBrowserService.window.clearInterval(this._blinkInterval);
+      this._blinkInterval = undefined;
+    }
+    if (this._blinkStartTimeout) {
+      this._coreBrowserService.window.clearTimeout(this._blinkStartTimeout);
+      this._blinkStartTimeout = undefined;
+    }
+    if (this._animationFrame) {
+      this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
+      this._animationFrame = undefined;
+    }
+  }
+
+  public restartBlinkAnimation(): void {
+    if (this.isPaused) {
+      return;
+    }
+    // Save a timestamp so that the restart can be done on the next interval
+    this._animationTimeRestarted = Date.now();
+    // Force a cursor render to ensure it's visible and in the correct position
+    this.isCursorVisible = true;
+    if (!this._animationFrame) {
+      this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
+        this._renderCallback();
+        this._animationFrame = undefined;
+      });
+    }
+  }
+
+  private _restartInterval(timeToStart: number = BLINK_INTERVAL): void {
+    // Clear any existing interval
+    if (this._blinkInterval) {
+      this._coreBrowserService.window.clearInterval(this._blinkInterval);
+      this._blinkInterval = undefined;
+    }
+
+    // Setup the initial timeout which will hide the cursor, this is done before
+    // the regular interval is setup in order to support restarting the blink
+    // animation in a lightweight way (without thrashing clearInterval and
+    // setInterval).
+    this._blinkStartTimeout = this._coreBrowserService.window.setTimeout(() => {
+      // Check if another animation restart was requested while this was being
+      // started
+      if (this._animationTimeRestarted) {
+        const time = BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
+        this._animationTimeRestarted = undefined;
+        if (time > 0) {
+          this._restartInterval(time);
+          return;
+        }
+      }
+
+      // Hide the cursor
+      this.isCursorVisible = false;
+      this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
+        this._renderCallback();
+        this._animationFrame = undefined;
+      });
+
+      // Setup the blink interval
+      this._blinkInterval = this._coreBrowserService.window.setInterval(() => {
+        // Adjust the animation time if it was restarted
+        if (this._animationTimeRestarted) {
+          // calc time diff
+          // Make restart interval do a setTimeout initially?
+          const time = BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
+          this._animationTimeRestarted = undefined;
+          this._restartInterval(time);
+          return;
+        }
+
+        // Invert visibility and render
+        this.isCursorVisible = !this.isCursorVisible;
+        this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
+          this._renderCallback();
+          this._animationFrame = undefined;
+        });
+      }, BLINK_INTERVAL);
+    }, timeToStart);
+  }
+
+  public pause(): void {
+    this.isCursorVisible = true;
+    if (this._blinkInterval) {
+      this._coreBrowserService.window.clearInterval(this._blinkInterval);
+      this._blinkInterval = undefined;
+    }
+    if (this._blinkStartTimeout) {
+      this._coreBrowserService.window.clearTimeout(this._blinkStartTimeout);
+      this._blinkStartTimeout = undefined;
+    }
+    if (this._animationFrame) {
+      this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
+      this._animationFrame = undefined;
+    }
+  }
+
+  public resume(): void {
+    // Clear out any existing timers just in case
+    this.pause();
+
+    this._animationTimeRestarted = undefined;
+    this._restartInterval();
+    this.restartBlinkAnimation();
+  }
+}

web/node_modules/@xterm/xterm/src/browser/renderer/shared/CustomGlyphs.ts

@@ -0,0 +1,687 @@
+/**
+ * Copyright (c) 2021 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+
+interface IBlockVector {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export const blockElementDefinitions: { [index: string]: IBlockVector[] | undefined } = {
+  // Block elements (0x2580-0x2590)
+  '▀': [{ x: 0, y: 0, w: 8, h: 4 }], // UPPER HALF BLOCK
+  '▁': [{ x: 0, y: 7, w: 8, h: 1 }], // LOWER ONE EIGHTH BLOCK
+  '▂': [{ x: 0, y: 6, w: 8, h: 2 }], // LOWER ONE QUARTER BLOCK
+  '▃': [{ x: 0, y: 5, w: 8, h: 3 }], // LOWER THREE EIGHTHS BLOCK
+  '▄': [{ x: 0, y: 4, w: 8, h: 4 }], // LOWER HALF BLOCK
+  '▅': [{ x: 0, y: 3, w: 8, h: 5 }], // LOWER FIVE EIGHTHS BLOCK
+  '▆': [{ x: 0, y: 2, w: 8, h: 6 }], // LOWER THREE QUARTERS BLOCK
+  '▇': [{ x: 0, y: 1, w: 8, h: 7 }], // LOWER SEVEN EIGHTHS BLOCK
+  '█': [{ x: 0, y: 0, w: 8, h: 8 }], // FULL BLOCK
+  '▉': [{ x: 0, y: 0, w: 7, h: 8 }], // LEFT SEVEN EIGHTHS BLOCK
+  '▊': [{ x: 0, y: 0, w: 6, h: 8 }], // LEFT THREE QUARTERS BLOCK
+  '▋': [{ x: 0, y: 0, w: 5, h: 8 }], // LEFT FIVE EIGHTHS BLOCK
+  '▌': [{ x: 0, y: 0, w: 4, h: 8 }], // LEFT HALF BLOCK
+  '▍': [{ x: 0, y: 0, w: 3, h: 8 }], // LEFT THREE EIGHTHS BLOCK
+  '▎': [{ x: 0, y: 0, w: 2, h: 8 }], // LEFT ONE QUARTER BLOCK
+  '▏': [{ x: 0, y: 0, w: 1, h: 8 }], // LEFT ONE EIGHTH BLOCK
+  '▐': [{ x: 4, y: 0, w: 4, h: 8 }], // RIGHT HALF BLOCK
+
+  // Block elements (0x2594-0x2595)
+  '▔': [{ x: 0, y: 0, w: 8, h: 1 }], // UPPER ONE EIGHTH BLOCK
+  '▕': [{ x: 7, y: 0, w: 1, h: 8 }], // RIGHT ONE EIGHTH BLOCK
+
+  // Terminal graphic characters (0x2596-0x259F)
+  '▖': [{ x: 0, y: 4, w: 4, h: 4 }],                             // QUADRANT LOWER LEFT
+  '▗': [{ x: 4, y: 4, w: 4, h: 4 }],                             // QUADRANT LOWER RIGHT
+  '▘': [{ x: 0, y: 0, w: 4, h: 4 }],                             // QUADRANT UPPER LEFT
+  '▙': [{ x: 0, y: 0, w: 4, h: 8 }, { x: 0, y: 4, w: 8, h: 4 }], // QUADRANT UPPER LEFT AND LOWER LEFT AND LOWER RIGHT
+  '▚': [{ x: 0, y: 0, w: 4, h: 4 }, { x: 4, y: 4, w: 4, h: 4 }], // QUADRANT UPPER LEFT AND LOWER RIGHT
+  '▛': [{ x: 0, y: 0, w: 4, h: 8 }, { x: 4, y: 0, w: 4, h: 4 }], // QUADRANT UPPER LEFT AND UPPER RIGHT AND LOWER LEFT
+  '▜': [{ x: 0, y: 0, w: 8, h: 4 }, { x: 4, y: 0, w: 4, h: 8 }], // QUADRANT UPPER LEFT AND UPPER RIGHT AND LOWER RIGHT
+  '▝': [{ x: 4, y: 0, w: 4, h: 4 }],                             // QUADRANT UPPER RIGHT
+  '▞': [{ x: 4, y: 0, w: 4, h: 4 }, { x: 0, y: 4, w: 4, h: 4 }], // QUADRANT UPPER RIGHT AND LOWER LEFT
+  '▟': [{ x: 4, y: 0, w: 4, h: 8 }, { x: 0, y: 4, w: 8, h: 4 }], // QUADRANT UPPER RIGHT AND LOWER LEFT AND LOWER RIGHT
+
+  // VERTICAL ONE EIGHTH BLOCK-2 through VERTICAL ONE EIGHTH BLOCK-7
+  '\u{1FB70}': [{ x: 1, y: 0, w: 1, h: 8 }],
+  '\u{1FB71}': [{ x: 2, y: 0, w: 1, h: 8 }],
+  '\u{1FB72}': [{ x: 3, y: 0, w: 1, h: 8 }],
+  '\u{1FB73}': [{ x: 4, y: 0, w: 1, h: 8 }],
+  '\u{1FB74}': [{ x: 5, y: 0, w: 1, h: 8 }],
+  '\u{1FB75}': [{ x: 6, y: 0, w: 1, h: 8 }],
+
+  // HORIZONTAL ONE EIGHTH BLOCK-2 through HORIZONTAL ONE EIGHTH BLOCK-7
+  '\u{1FB76}': [{ x: 0, y: 1, w: 8, h: 1 }],
+  '\u{1FB77}': [{ x: 0, y: 2, w: 8, h: 1 }],
+  '\u{1FB78}': [{ x: 0, y: 3, w: 8, h: 1 }],
+  '\u{1FB79}': [{ x: 0, y: 4, w: 8, h: 1 }],
+  '\u{1FB7A}': [{ x: 0, y: 5, w: 8, h: 1 }],
+  '\u{1FB7B}': [{ x: 0, y: 6, w: 8, h: 1 }],
+
+  // LEFT AND LOWER ONE EIGHTH BLOCK
+  '\u{1FB7C}': [{ x: 0, y: 0, w: 1, h: 8 }, { x: 0, y: 7, w: 8, h: 1 }],
+  // LEFT AND UPPER ONE EIGHTH BLOCK
+  '\u{1FB7D}': [{ x: 0, y: 0, w: 1, h: 8 }, { x: 0, y: 0, w: 8, h: 1 }],
+  // RIGHT AND UPPER ONE EIGHTH BLOCK
+  '\u{1FB7E}': [{ x: 7, y: 0, w: 1, h: 8 }, { x: 0, y: 0, w: 8, h: 1 }],
+  // RIGHT AND LOWER ONE EIGHTH BLOCK
+  '\u{1FB7F}': [{ x: 7, y: 0, w: 1, h: 8 }, { x: 0, y: 7, w: 8, h: 1 }],
+  // UPPER AND LOWER ONE EIGHTH BLOCK
+  '\u{1FB80}': [{ x: 0, y: 0, w: 8, h: 1 }, { x: 0, y: 7, w: 8, h: 1 }],
+  // HORIZONTAL ONE EIGHTH BLOCK-1358
+  '\u{1FB81}': [{ x: 0, y: 0, w: 8, h: 1 }, { x: 0, y: 2, w: 8, h: 1 }, { x: 0, y: 4, w: 8, h: 1 }, { x: 0, y: 7, w: 8, h: 1 }],
+
+  // UPPER ONE QUARTER BLOCK
+  '\u{1FB82}': [{ x: 0, y: 0, w: 8, h: 2 }],
+  // UPPER THREE EIGHTHS BLOCK
+  '\u{1FB83}': [{ x: 0, y: 0, w: 8, h: 3 }],
+  // UPPER FIVE EIGHTHS BLOCK
+  '\u{1FB84}': [{ x: 0, y: 0, w: 8, h: 5 }],
+  // UPPER THREE QUARTERS BLOCK
+  '\u{1FB85}': [{ x: 0, y: 0, w: 8, h: 6 }],
+  // UPPER SEVEN EIGHTHS BLOCK
+  '\u{1FB86}': [{ x: 0, y: 0, w: 8, h: 7 }],
+
+  // RIGHT ONE QUARTER BLOCK
+  '\u{1FB87}': [{ x: 6, y: 0, w: 2, h: 8 }],
+  // RIGHT THREE EIGHTHS B0OCK
+  '\u{1FB88}': [{ x: 5, y: 0, w: 3, h: 8 }],
+  // RIGHT FIVE EIGHTHS BL0CK
+  '\u{1FB89}': [{ x: 3, y: 0, w: 5, h: 8 }],
+  // RIGHT THREE QUARTERS 0LOCK
+  '\u{1FB8A}': [{ x: 2, y: 0, w: 6, h: 8 }],
+  // RIGHT SEVEN EIGHTHS B0OCK
+  '\u{1FB8B}': [{ x: 1, y: 0, w: 7, h: 8 }],
+
+  // CHECKER BOARD FILL
+  '\u{1FB95}': [
+    { x: 0, y: 0, w: 2, h: 2 }, { x: 4, y: 0, w: 2, h: 2 },
+    { x: 2, y: 2, w: 2, h: 2 }, { x: 6, y: 2, w: 2, h: 2 },
+    { x: 0, y: 4, w: 2, h: 2 }, { x: 4, y: 4, w: 2, h: 2 },
+    { x: 2, y: 6, w: 2, h: 2 }, { x: 6, y: 6, w: 2, h: 2 }
+  ],
+  // INVERSE CHECKER BOARD FILL
+  '\u{1FB96}': [
+    { x: 2, y: 0, w: 2, h: 2 }, { x: 6, y: 0, w: 2, h: 2 },
+    { x: 0, y: 2, w: 2, h: 2 }, { x: 4, y: 2, w: 2, h: 2 },
+    { x: 2, y: 4, w: 2, h: 2 }, { x: 6, y: 4, w: 2, h: 2 },
+    { x: 0, y: 6, w: 2, h: 2 }, { x: 4, y: 6, w: 2, h: 2 }
+  ],
+  // HEAVY HORIZONTAL FILL (upper middle and lower one quarter block)
+  '\u{1FB97}': [{ x: 0, y: 2, w: 8, h: 2 }, { x: 0, y: 6, w: 8, h: 2 }]
+};
+
+type PatternDefinition = number[][];
+
+/**
+ * Defines the repeating pattern used by special characters, the pattern is made up of a 2d array of
+ * pixel values to be filled (1) or not filled (0).
+ */
+const patternCharacterDefinitions: { [key: string]: PatternDefinition | undefined } = {
+  // Shade characters (0x2591-0x2593)
+  '░': [ // LIGHT SHADE (25%)
+    [1, 0, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 1, 0],
+    [0, 0, 0, 0]
+  ],
+  '▒': [ // MEDIUM SHADE (50%)
+    [1, 0],
+    [0, 0],
+    [0, 1],
+    [0, 0]
+  ],
+  '▓': [ // DARK SHADE (75%)
+    [0, 1],
+    [1, 1],
+    [1, 0],
+    [1, 1]
+  ]
+};
+
+const enum Shapes {
+  /** │ */ TOP_TO_BOTTOM = 'M.5,0 L.5,1',
+  /** ─ */ LEFT_TO_RIGHT = 'M0,.5 L1,.5',
+
+  /** └ */ TOP_TO_RIGHT = 'M.5,0 L.5,.5 L1,.5',
+  /** ┘ */ TOP_TO_LEFT = 'M.5,0 L.5,.5 L0,.5',
+  /** ┐ */ LEFT_TO_BOTTOM = 'M0,.5 L.5,.5 L.5,1',
+  /** ┌ */ RIGHT_TO_BOTTOM = 'M0.5,1 L.5,.5 L1,.5',
+
+  /** ╵ */ MIDDLE_TO_TOP = 'M.5,.5 L.5,0',
+  /** ╴ */ MIDDLE_TO_LEFT = 'M.5,.5 L0,.5',
+  /** ╶ */ MIDDLE_TO_RIGHT = 'M.5,.5 L1,.5',
+  /** ╷ */ MIDDLE_TO_BOTTOM = 'M.5,.5 L.5,1',
+
+  /** ┴ */ T_TOP = 'M0,.5 L1,.5 M.5,.5 L.5,0',
+  /** ┤ */ T_LEFT = 'M.5,0 L.5,1 M.5,.5 L0,.5',
+  /** ├ */ T_RIGHT = 'M.5,0 L.5,1 M.5,.5 L1,.5',
+  /** ┬ */ T_BOTTOM = 'M0,.5 L1,.5 M.5,.5 L.5,1',
+
+  /** ┼ */ CROSS = 'M0,.5 L1,.5 M.5,0 L.5,1',
+
+  /** ╌ */ TWO_DASHES_HORIZONTAL = 'M.1,.5 L.4,.5 M.6,.5 L.9,.5', // .2 empty, .3 filled
+  /** ┄ */ THREE_DASHES_HORIZONTAL = 'M.0667,.5 L.2667,.5 M.4,.5 L.6,.5 M.7333,.5 L.9333,.5', // .1333 empty, .2 filled
+  /** ┉ */ FOUR_DASHES_HORIZONTAL = 'M.05,.5 L.2,.5 M.3,.5 L.45,.5 M.55,.5 L.7,.5 M.8,.5 L.95,.5', // .1 empty, .15 filled
+  /** ╎ */ TWO_DASHES_VERTICAL = 'M.5,.1 L.5,.4 M.5,.6 L.5,.9',
+  /** ┆ */ THREE_DASHES_VERTICAL = 'M.5,.0667 L.5,.2667 M.5,.4 L.5,.6 M.5,.7333 L.5,.9333',
+  /** ┊ */ FOUR_DASHES_VERTICAL = 'M.5,.05 L.5,.2 M.5,.3 L.5,.45 L.5,.55 M.5,.7 L.5,.95',
+}
+
+const enum Style {
+  NORMAL = 1,
+  BOLD = 3
+}
+
+/**
+ * @param xp The percentage of 15% of the x axis.
+ * @param yp The percentage of 15% of the x axis on the y axis.
+ */
+type DrawFunctionDefinition = (xp: number, yp: number) => string;
+
+/**
+ * This contains the definitions of all box drawing characters in the format of SVG paths (ie. the
+ * svg d attribute).
+ */
+export const boxDrawingDefinitions: { [character: string]: { [fontWeight: number]: string | DrawFunctionDefinition } | undefined } = {
+  // Uniform normal and bold
+  '─': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT },
+  '━': { [Style.BOLD]:   Shapes.LEFT_TO_RIGHT },
+  '│': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM },
+  '┃': { [Style.BOLD]:   Shapes.TOP_TO_BOTTOM },
+  '┌': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM },
+  '┏': { [Style.BOLD]:   Shapes.RIGHT_TO_BOTTOM },
+  '┐': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM },
+  '┓': { [Style.BOLD]:   Shapes.LEFT_TO_BOTTOM },
+  '└': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT },
+  '┗': { [Style.BOLD]:   Shapes.TOP_TO_RIGHT },
+  '┘': { [Style.NORMAL]: Shapes.TOP_TO_LEFT },
+  '┛': { [Style.BOLD]:   Shapes.TOP_TO_LEFT },
+  '├': { [Style.NORMAL]: Shapes.T_RIGHT },
+  '┣': { [Style.BOLD]:   Shapes.T_RIGHT },
+  '┤': { [Style.NORMAL]: Shapes.T_LEFT },
+  '┫': { [Style.BOLD]:   Shapes.T_LEFT },
+  '┬': { [Style.NORMAL]: Shapes.T_BOTTOM },
+  '┳': { [Style.BOLD]:   Shapes.T_BOTTOM },
+  '┴': { [Style.NORMAL]: Shapes.T_TOP },
+  '┻': { [Style.BOLD]:   Shapes.T_TOP },
+  '┼': { [Style.NORMAL]: Shapes.CROSS },
+  '╋': { [Style.BOLD]:   Shapes.CROSS },
+  '╴': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT },
+  '╸': { [Style.BOLD]:   Shapes.MIDDLE_TO_LEFT },
+  '╵': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP },
+  '╹': { [Style.BOLD]:   Shapes.MIDDLE_TO_TOP },
+  '╶': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT },
+  '╺': { [Style.BOLD]:   Shapes.MIDDLE_TO_RIGHT },
+  '╷': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM },
+  '╻': { [Style.BOLD]:   Shapes.MIDDLE_TO_BOTTOM },
+
+  // Double border
+  '═': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` },
+  '║': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` },
+  '╒': { [Style.NORMAL]: (xp, yp) => `M.5,1 L.5,${.5 - yp} L1,${.5 - yp} M.5,${.5 + yp} L1,${.5 + yp}` },
+  '╓': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},1 L${.5 - xp},.5 L1,.5 M${.5 + xp},.5 L${.5 + xp},1` },
+  '╔': { [Style.NORMAL]: (xp, yp) => `M1,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1` },
+  '╕': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L.5,${.5 - yp} L.5,1 M0,${.5 + yp} L.5,${.5 + yp}` },
+  '╖': { [Style.NORMAL]: (xp, yp) => `M${.5 + xp},1 L${.5 + xp},.5 L0,.5 M${.5 - xp},.5 L${.5 - xp},1` },
+  '╗': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M0,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},1` },
+  '╘': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 + yp} L1,${.5 + yp} M.5,${.5 - yp} L1,${.5 - yp}` },
+  '╙': { [Style.NORMAL]: (xp, yp) => `M1,.5 L${.5 - xp},.5 L${.5 - xp},0 M${.5 + xp},.5 L${.5 + xp},0` },
+  '╚': { [Style.NORMAL]: (xp, yp) => `M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0 M1,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},0` },
+  '╛': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L.5,${.5 + yp} L.5,0 M0,${.5 - yp} L.5,${.5 - yp}` },
+  '╜': { [Style.NORMAL]: (xp, yp) => `M0,.5 L${.5 + xp},.5 L${.5 + xp},0 M${.5 - xp},.5 L${.5 - xp},0` },
+  '╝': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M0,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},0` },
+  '╞': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M.5,${.5 - yp} L1,${.5 - yp} M.5,${.5 + yp} L1,${.5 + yp}` },
+  '╟': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1 M${.5 + xp},.5 L1,.5` },
+  '╠': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` },
+  '╡': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M0,${.5 - yp} L.5,${.5 - yp} M0,${.5 + yp} L.5,${.5 + yp}` },
+  '╢': { [Style.NORMAL]: (xp, yp) => `M0,.5 L${.5 - xp},.5 M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` },
+  '╣': { [Style.NORMAL]: (xp, yp) => `M${.5 + xp},0 L${.5 + xp},1 M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0` },
+  '╤': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp} M.5,${.5 + yp} L.5,1` },
+  '╥': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},.5 L${.5 - xp},1 M${.5 + xp},.5 L${.5 + xp},1` },
+  '╦': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1` },
+  '╧': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 - yp} M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` },
+  '╨': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},.5 L${.5 - xp},0 M${.5 + xp},.5 L${.5 + xp},0` },
+  '╩': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L1,${.5 + yp} M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` },
+  '╪': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` },
+  '╫': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` },
+  '╬': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1 M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` },
+
+  // Diagonal
+  '╱': { [Style.NORMAL]: 'M1,0 L0,1' },
+  '╲': { [Style.NORMAL]: 'M0,0 L1,1' },
+  '╳': { [Style.NORMAL]: 'M1,0 L0,1 M0,0 L1,1' },
+
+  // Mixed weight
+  '╼': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '╽': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '╾': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '╿': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┍': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┎': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┑': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┒': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┕': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┖': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┙': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┚': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┝': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM,                                 [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┞': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM,                               [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┟': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT,                                  [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┠': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.TOP_TO_BOTTOM },
+  '┡': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.TOP_TO_RIGHT },
+  '┢': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM },
+  '┥': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM,                                 [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┦': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM,                                [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┧': { [Style.NORMAL]: Shapes.TOP_TO_LEFT,                                   [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┨': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.TOP_TO_BOTTOM },
+  '┩': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.TOP_TO_LEFT },
+  '┪': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.LEFT_TO_BOTTOM },
+  '┭': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM,                               [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┮': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM,                                [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┯': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.LEFT_TO_RIGHT },
+  '┰': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT,                                 [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┱': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.LEFT_TO_BOTTOM },
+  '┲': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM },
+  '┵': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT,                                  [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┶': { [Style.NORMAL]: Shapes.TOP_TO_LEFT,                                   [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┷': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.LEFT_TO_RIGHT },
+  '┸': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT,                                 [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┹': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.TOP_TO_LEFT },
+  '┺': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.TOP_TO_RIGHT },
+  '┽': { [Style.NORMAL]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_RIGHT}`,  [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┾': { [Style.NORMAL]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_LEFT}`,   [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┿': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM,                                 [Style.BOLD]: Shapes.LEFT_TO_RIGHT },
+  '╀': { [Style.NORMAL]: `${Shapes.LEFT_TO_RIGHT} ${Shapes.MIDDLE_TO_BOTTOM}`, [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '╁': { [Style.NORMAL]: `${Shapes.MIDDLE_TO_TOP} ${Shapes.LEFT_TO_RIGHT}`,    [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '╂': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT,                                 [Style.BOLD]: Shapes.TOP_TO_BOTTOM },
+  '╃': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM,                               [Style.BOLD]: Shapes.TOP_TO_LEFT },
+  '╄': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM,                                [Style.BOLD]: Shapes.TOP_TO_RIGHT },
+  '╅': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT,                                  [Style.BOLD]: Shapes.LEFT_TO_BOTTOM },
+  '╆': { [Style.NORMAL]: Shapes.TOP_TO_LEFT,                                   [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM },
+  '╇': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: `${Shapes.MIDDLE_TO_TOP} ${Shapes.LEFT_TO_RIGHT}` },
+  '╈': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: `${Shapes.LEFT_TO_RIGHT} ${Shapes.MIDDLE_TO_BOTTOM}` },
+  '╉': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_LEFT}` },
+  '╊': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_RIGHT}` },
+
+  // Dashed
+  '╌': { [Style.NORMAL]: Shapes.TWO_DASHES_HORIZONTAL },
+  '╍': { [Style.BOLD]:   Shapes.TWO_DASHES_HORIZONTAL },
+  '┄': { [Style.NORMAL]: Shapes.THREE_DASHES_HORIZONTAL },
+  '┅': { [Style.BOLD]:   Shapes.THREE_DASHES_HORIZONTAL },
+  '┈': { [Style.NORMAL]: Shapes.FOUR_DASHES_HORIZONTAL },
+  '┉': { [Style.BOLD]:   Shapes.FOUR_DASHES_HORIZONTAL },
+  '╎': { [Style.NORMAL]: Shapes.TWO_DASHES_VERTICAL },
+  '╏': { [Style.BOLD]:   Shapes.TWO_DASHES_VERTICAL },
+  '┆': { [Style.NORMAL]: Shapes.THREE_DASHES_VERTICAL  },
+  '┇': { [Style.BOLD]:   Shapes.THREE_DASHES_VERTICAL },
+  '┊': { [Style.NORMAL]: Shapes.FOUR_DASHES_VERTICAL },
+  '┋': { [Style.BOLD]:   Shapes.FOUR_DASHES_VERTICAL },
+
+  // Curved
+  '╭': { [Style.NORMAL]: (xp, yp) => `M.5,1 L.5,${.5 + (yp / .15 * .5)} C.5,${.5 + (yp / .15 * .5)},.5,.5,1,.5` },
+  '╮': { [Style.NORMAL]: (xp, yp) => `M.5,1 L.5,${.5 + (yp / .15 * .5)} C.5,${.5 + (yp / .15 * .5)},.5,.5,0,.5` },
+  '╯': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 - (yp / .15 * .5)} C.5,${.5 - (yp / .15 * .5)},.5,.5,0,.5` },
+  '╰': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 - (yp / .15 * .5)} C.5,${.5 - (yp / .15 * .5)},.5,.5,1,.5` }
+};
+
+interface IVectorShape {
+  d: string;
+  type: VectorType;
+  leftPadding?: number;
+  rightPadding?: number;
+}
+
+const enum VectorType {
+  FILL,
+  STROKE
+}
+
+/**
+ * This contains the definitions of the primarily used box drawing characters as vector shapes. The
+ * reason these characters are defined specially is to avoid common problems if a user's font has
+ * not been patched with powerline characters and also to get pixel perfect rendering as rendering
+ * issues can occur around AA/SPAA.
+ *
+ * The line variants draw beyond the cell and get clipped to ensure the end of the line is not
+ * visible.
+ *
+ * Original symbols defined in https://github.com/powerline/fontpatcher
+ */
+export const powerlineDefinitions: { [index: string]: IVectorShape } = {
+  // Right triangle solid
+  '\u{E0B0}': { d: 'M0,0 L1,.5 L0,1', type: VectorType.FILL, rightPadding: 2 },
+  // Right triangle line
+  '\u{E0B1}': { d: 'M-1,-.5 L1,.5 L-1,1.5', type: VectorType.STROKE, leftPadding: 1, rightPadding: 1 },
+  // Left triangle solid
+  '\u{E0B2}': { d: 'M1,0 L0,.5 L1,1', type: VectorType.FILL, leftPadding: 2 },
+  // Left triangle line
+  '\u{E0B3}': { d: 'M2,-.5 L0,.5 L2,1.5', type: VectorType.STROKE, leftPadding: 1, rightPadding: 1 },
+  // Right semi-circle solid
+  '\u{E0B4}': { d: 'M0,0 L0,1 C0.552,1,1,0.776,1,.5 C1,0.224,0.552,0,0,0', type: VectorType.FILL, rightPadding: 1 },
+  // Right semi-circle line
+  '\u{E0B5}': { d: 'M.2,1 C.422,1,.8,.826,.78,.5 C.8,.174,0.422,0,.2,0', type: VectorType.STROKE, rightPadding: 1 },
+  // Left semi-circle solid
+  '\u{E0B6}': { d: 'M1,0 L1,1 C0.448,1,0,0.776,0,.5 C0,0.224,0.448,0,1,0', type: VectorType.FILL, leftPadding: 1 },
+  // Left semi-circle line
+  '\u{E0B7}': { d: 'M.8,1 C0.578,1,0.2,.826,.22,.5 C0.2,0.174,0.578,0,0.8,0', type: VectorType.STROKE, leftPadding: 1 },
+  // Lower left triangle
+  '\u{E0B8}': { d: 'M-.5,-.5 L1.5,1.5 L-.5,1.5', type: VectorType.FILL },
+  // Backslash separator
+  '\u{E0B9}': { d: 'M-.5,-.5 L1.5,1.5', type: VectorType.STROKE, leftPadding: 1, rightPadding: 1 },
+  // Lower right triangle
+  '\u{E0BA}': { d: 'M1.5,-.5 L-.5,1.5 L1.5,1.5', type: VectorType.FILL },
+  // Upper left triangle
+  '\u{E0BC}': { d: 'M1.5,-.5 L-.5,1.5 L-.5,-.5', type: VectorType.FILL },
+  // Forward slash separator
+  '\u{E0BD}': { d: 'M1.5,-.5 L-.5,1.5', type: VectorType.STROKE, leftPadding: 1, rightPadding: 1 },
+  // Upper right triangle
+  '\u{E0BE}': { d: 'M-.5,-.5 L1.5,1.5 L1.5,-.5', type: VectorType.FILL }
+};
+// Forward slash separator redundant
+powerlineDefinitions['\u{E0BB}'] = powerlineDefinitions['\u{E0BD}'];
+// Backslash separator redundant
+powerlineDefinitions['\u{E0BF}'] = powerlineDefinitions['\u{E0B9}'];
+
+/**
+ * Try drawing a custom block element or box drawing character, returning whether it was
+ * successfully drawn.
+ */
+export function tryDrawCustomChar(
+  ctx: CanvasRenderingContext2D,
+  c: string,
+  xOffset: number,
+  yOffset: number,
+  deviceCellWidth: number,
+  deviceCellHeight: number,
+  fontSize: number,
+  devicePixelRatio: number
+): boolean {
+  const blockElementDefinition = blockElementDefinitions[c];
+  if (blockElementDefinition) {
+    drawBlockElementChar(ctx, blockElementDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight);
+    return true;
+  }
+
+  const patternDefinition = patternCharacterDefinitions[c];
+  if (patternDefinition) {
+    drawPatternChar(ctx, patternDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight);
+    return true;
+  }
+
+  const boxDrawingDefinition = boxDrawingDefinitions[c];
+  if (boxDrawingDefinition) {
+    drawBoxDrawingChar(ctx, boxDrawingDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight, devicePixelRatio);
+    return true;
+  }
+
+  const powerlineDefinition = powerlineDefinitions[c];
+  if (powerlineDefinition) {
+    drawPowerlineChar(ctx, powerlineDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight, fontSize, devicePixelRatio);
+    return true;
+  }
+
+  return false;
+}
+
+function drawBlockElementChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: IBlockVector[],
+  xOffset: number,
+  yOffset: number,
+  deviceCellWidth: number,
+  deviceCellHeight: number
+): void {
+  for (let i = 0; i < charDefinition.length; i++) {
+    const box = charDefinition[i];
+    const xEighth = deviceCellWidth / 8;
+    const yEighth = deviceCellHeight / 8;
+    ctx.fillRect(
+      xOffset + box.x * xEighth,
+      yOffset + box.y * yEighth,
+      box.w * xEighth,
+      box.h * yEighth
+    );
+  }
+}
+
+const cachedPatterns: Map<PatternDefinition, Map</* fillStyle */string, CanvasPattern>> = new Map();
+
+function drawPatternChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: number[][],
+  xOffset: number,
+  yOffset: number,
+  deviceCellWidth: number,
+  deviceCellHeight: number
+): void {
+  let patternSet = cachedPatterns.get(charDefinition);
+  if (!patternSet) {
+    patternSet = new Map();
+    cachedPatterns.set(charDefinition, patternSet);
+  }
+  const fillStyle = ctx.fillStyle;
+  if (typeof fillStyle !== 'string') {
+    throw new Error(`Unexpected fillStyle type "${fillStyle}"`);
+  }
+  let pattern = patternSet.get(fillStyle);
+  if (!pattern) {
+    const width = charDefinition[0].length;
+    const height = charDefinition.length;
+    const tmpCanvas = ctx.canvas.ownerDocument.createElement('canvas');
+    tmpCanvas.width = width;
+    tmpCanvas.height = height;
+    const tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d'));
+    const imageData = new ImageData(width, height);
+
+    // Extract rgba from fillStyle
+    let r: number;
+    let g: number;
+    let b: number;
+    let a: number;
+    if (fillStyle.startsWith('#')) {
+      r = parseInt(fillStyle.slice(1, 3), 16);
+      g = parseInt(fillStyle.slice(3, 5), 16);
+      b = parseInt(fillStyle.slice(5, 7), 16);
+      a = fillStyle.length > 7 && parseInt(fillStyle.slice(7, 9), 16) || 1;
+    } else if (fillStyle.startsWith('rgba')) {
+      ([r, g, b, a] = fillStyle.substring(5, fillStyle.length - 1).split(',').map(e => parseFloat(e)));
+    } else {
+      throw new Error(`Unexpected fillStyle color format "${fillStyle}" when drawing pattern glyph`);
+    }
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        imageData.data[(y * width + x) * 4    ] = r;
+        imageData.data[(y * width + x) * 4 + 1] = g;
+        imageData.data[(y * width + x) * 4 + 2] = b;
+        imageData.data[(y * width + x) * 4 + 3] = charDefinition[y][x] * (a * 255);
+      }
+    }
+    tmpCtx.putImageData(imageData, 0, 0);
+    pattern = throwIfFalsy(ctx.createPattern(tmpCanvas, null));
+    patternSet.set(fillStyle, pattern);
+  }
+  ctx.fillStyle = pattern;
+  ctx.fillRect(xOffset, yOffset, deviceCellWidth, deviceCellHeight);
+}
+
+/**
+ * Draws the following box drawing characters by mapping a subset of SVG d attribute instructions to
+ * canvas draw calls.
+ *
+ * Box styles:       ┎┰┒┍┯┑╓╥╖╒╤╕ ┏┳┓┌┲┓┌┬┐┏┱┐
+ * ┌─┬─┐ ┏━┳━┓ ╔═╦═╗ ┠╂┨┝┿┥╟╫╢╞╪╡ ┡╇┩├╊┫┢╈┪┣╉┤
+ * │ │ │ ┃ ┃ ┃ ║ ║ ║ ┖┸┚┕┷┙╙╨╜╘╧╛ └┴┘└┺┛┗┻┛┗┹┘
+ * ├─┼─┤ ┣━╋━┫ ╠═╬═╣ ┏┱┐┌┲┓┌┬┐┌┬┐ ┏┳┓┌┮┓┌┬┐┏┭┐
+ * │ │ │ ┃ ┃ ┃ ║ ║ ║ ┡╃┤├╄┩├╆┪┢╅┤ ┞╀┦├┾┫┟╁┧┣┽┤
+ * └─┴─┘ ┗━┻━┛ ╚═╩═╝ └┴┘└┴┘└┺┛┗┹┘ └┴┘└┶┛┗┻┛┗┵┘
+ *
+ * Other:
+ * ╭─╮ ╲ ╱ ╷╻╎╏┆┇┊┋ ╺╾╴ ╌╌╌ ┄┄┄ ┈┈┈
+ * │ │  ╳  ╽╿╎╏┆┇┊┋ ╶╼╸ ╍╍╍ ┅┅┅ ┉┉┉
+ * ╰─╯ ╱ ╲ ╹╵╎╏┆┇┊┋
+ *
+ * All box drawing characters:
+ * ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏
+ * ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟
+ * ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯
+ * ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿
+ * ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏
+ * ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟
+ * ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯
+ * ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿
+ *
+ * ---
+ *
+ * Box drawing alignment tests:                                          █
+ *                                                                       ▉
+ *   ╔══╦══╗  ┌──┬──┐  ╭──┬──╮  ╭──┬──╮  ┏━━┳━━┓  ┎┒┏┑   ╷  ╻ ┏┯┓ ┌┰┐    ▊ ╱╲╱╲╳╳╳
+ *   ║┌─╨─┐║  │╔═╧═╗│  │╒═╪═╕│  │╓─╁─╖│  ┃┌─╂─┐┃  ┗╃╄┙  ╶┼╴╺╋╸┠┼┨ ┝╋┥    ▋ ╲╱╲╱╳╳╳
+ *   ║│╲ ╱│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╿ │┃  ┍╅╆┓   ╵  ╹ ┗┷┛ └┸┘    ▌ ╱╲╱╲╳╳╳
+ *   ╠╡ ╳ ╞╣  ├╢   ╟┤  ├┼─┼─┼┤  ├╫─╂─╫┤  ┣┿╾┼╼┿┫  ┕┛┖┚     ┌┄┄┐ ╎ ┏┅┅┓ ┋ ▍ ╲╱╲╱╳╳╳
+ *   ║│╱ ╲│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╽ │┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▎
+ *   ║└─╥─┘║  │╚═╤═╝│  │╘═╪═╛│  │╙─╀─╜│  ┃└─╂─┘┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▏
+ *   ╚══╩══╝  └──┴──┘  ╰──┴──╯  ╰──┴──╯  ┗━━┻━━┛           └╌╌┘ ╎ ┗╍╍┛ ┋  ▁▂▃▄▅▆▇█
+ *
+ * Source: https://www.w3.org/2001/06/utf-8-test/UTF-8-demo.html
+ */
+function drawBoxDrawingChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: { [fontWeight: number]: string | ((xp: number, yp: number) => string) },
+  xOffset: number,
+  yOffset: number,
+  deviceCellWidth: number,
+  deviceCellHeight: number,
+  devicePixelRatio: number
+): void {
+  ctx.strokeStyle = ctx.fillStyle;
+  for (const [fontWeight, instructions] of Object.entries(charDefinition)) {
+    ctx.beginPath();
+    ctx.lineWidth = devicePixelRatio * Number.parseInt(fontWeight);
+    let actualInstructions: string;
+    if (typeof instructions === 'function') {
+      const xp = .15;
+      const yp = .15 / deviceCellHeight * deviceCellWidth;
+      actualInstructions = instructions(xp, yp);
+    } else {
+      actualInstructions = instructions;
+    }
+    for (const instruction of actualInstructions.split(' ')) {
+      const type = instruction[0];
+      const f = svgToCanvasInstructionMap[type];
+      if (!f) {
+        console.error(`Could not find drawing instructions for "${type}"`);
+        continue;
+      }
+      const args: string[] = instruction.substring(1).split(',');
+      if (!args[0] || !args[1]) {
+        continue;
+      }
+      f(ctx, translateArgs(args, deviceCellWidth, deviceCellHeight, xOffset, yOffset, true, devicePixelRatio));
+    }
+    ctx.stroke();
+    ctx.closePath();
+  }
+}
+
+function drawPowerlineChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: IVectorShape,
+  xOffset: number,
+  yOffset: number,
+  deviceCellWidth: number,
+  deviceCellHeight: number,
+  fontSize: number,
+  devicePixelRatio: number
+): void {
+  // Clip the cell to make sure drawing doesn't occur beyond bounds
+  const clipRegion = new Path2D();
+  clipRegion.rect(xOffset, yOffset, deviceCellWidth, deviceCellHeight);
+  ctx.clip(clipRegion);
+
+  ctx.beginPath();
+  // Scale the stroke with DPR and font size
+  const cssLineWidth = fontSize / 12;
+  ctx.lineWidth = devicePixelRatio * cssLineWidth;
+  for (const instruction of charDefinition.d.split(' ')) {
+    const type = instruction[0];
+    const f = svgToCanvasInstructionMap[type];
+    if (!f) {
+      console.error(`Could not find drawing instructions for "${type}"`);
+      continue;
+    }
+    const args: string[] = instruction.substring(1).split(',');
+    if (!args[0] || !args[1]) {
+      continue;
+    }
+    f(ctx, translateArgs(
+      args,
+      deviceCellWidth,
+      deviceCellHeight,
+      xOffset,
+      yOffset,
+      false,
+      devicePixelRatio,
+      (charDefinition.leftPadding ?? 0) * (cssLineWidth / 2),
+      (charDefinition.rightPadding ?? 0) * (cssLineWidth / 2)
+    ));
+  }
+  if (charDefinition.type === VectorType.STROKE) {
+    ctx.strokeStyle = ctx.fillStyle;
+    ctx.stroke();
+  } else {
+    ctx.fill();
+  }
+  ctx.closePath();
+}
+
+function clamp(value: number, max: number, min: number = 0): number {
+  return Math.max(Math.min(value, max), min);
+}
+
+const svgToCanvasInstructionMap: { [index: string]: any } = {
+  'C': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.bezierCurveTo(args[0], args[1], args[2], args[3], args[4], args[5]),
+  'L': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.lineTo(args[0], args[1]),
+  'M': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.moveTo(args[0], args[1])
+};
+
+function translateArgs(args: string[], cellWidth: number, cellHeight: number, xOffset: number, yOffset: number, doClamp: boolean, devicePixelRatio: number, leftPadding: number = 0, rightPadding: number = 0): number[] {
+  const result = args.map(e => parseFloat(e) || parseInt(e));
+
+  if (result.length < 2) {
+    throw new Error('Too few arguments for instruction');
+  }
+
+  for (let x = 0; x < result.length; x += 2) {
+    // Translate from 0-1 to 0-cellWidth
+    result[x] *= cellWidth - (leftPadding * devicePixelRatio) - (rightPadding * devicePixelRatio);
+    // Ensure coordinate doesn't escape cell bounds and round to the nearest 0.5 to ensure a crisp
+    // line at 100% devicePixelRatio
+    if (doClamp && result[x] !== 0) {
+      result[x] = clamp(Math.round(result[x] + 0.5) - 0.5, cellWidth, 0);
+    }
+    // Apply the cell's offset (ie. x*cellWidth)
+    result[x] += xOffset + (leftPadding * devicePixelRatio);
+  }
+
+  for (let y = 1; y < result.length; y += 2) {
+    // Translate from 0-1 to 0-cellHeight
+    result[y] *= cellHeight;
+    // Ensure coordinate doesn't escape cell bounds and round to the nearest 0.5 to ensure a crisp
+    // line at 100% devicePixelRatio
+    if (doClamp && result[y] !== 0) {
+      result[y] = clamp(Math.round(result[y] + 0.5) - 0.5, cellHeight, 0);
+    }
+    // Apply the cell's offset (ie. x*cellHeight)
+    result[y] += yOffset;
+  }
+
+  return result;
+}

web/node_modules/@xterm/xterm/src/browser/renderer/shared/DevicePixelObserver.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2022 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { toDisposable } from 'common/Lifecycle';
+import { IDisposable } from 'common/Types';
+
+export function observeDevicePixelDimensions(element: HTMLElement, parentWindow: Window & typeof globalThis, callback: (deviceWidth: number, deviceHeight: number) => void): IDisposable {
+  // Observe any resizes to the element and extract the actual pixel size of the element if the
+  // devicePixelContentBoxSize API is supported. This allows correcting rounding errors when
+  // converting between CSS pixels and device pixels which causes blurry rendering when device
+  // pixel ratio is not a round number.
+  let observer: ResizeObserver | undefined = new parentWindow.ResizeObserver((entries) => {
+    const entry = entries.find((entry) => entry.target === element);
+    if (!entry) {
+      return;
+    }
+
+    // Disconnect if devicePixelContentBoxSize isn't supported by the browser
+    if (!('devicePixelContentBoxSize' in entry)) {
+      observer?.disconnect();
+      observer = undefined;
+      return;
+    }
+
+    // Fire the callback, ignore events where the dimensions are 0x0 as the canvas is likely hidden
+    const width = entry.devicePixelContentBoxSize[0].inlineSize;
+    const height = entry.devicePixelContentBoxSize[0].blockSize;
+    if (width > 0 && height > 0) {
+      callback(width, height);
+    }
+  });
+  try {
+    observer.observe(element, { box: ['device-pixel-content-box'] } as any);
+  } catch {
+    observer.disconnect();
+    observer = undefined;
+  }
+  return toDisposable(() => observer?.disconnect());
+}

web/node_modules/@xterm/xterm/src/browser/renderer/shared/RendererUtils.ts

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IDimensions, IRenderDimensions } from 'browser/renderer/shared/Types';
+
+export function throwIfFalsy<T>(value: T | undefined | null): T {
+  if (!value) {
+    throw new Error('value must not be falsy');
+  }
+  return value;
+}
+
+export function isPowerlineGlyph(codepoint: number): boolean {
+  // Only return true for Powerline symbols which require
+  // different padding and should be excluded from minimum contrast
+  // ratio standards
+  return 0xE0A4 <= codepoint && codepoint <= 0xE0D6;
+}
+
+export function isRestrictedPowerlineGlyph(codepoint: number): boolean {
+  return 0xE0B0 <= codepoint && codepoint <= 0xE0B7;
+}
+
+function isNerdFontGlyph(codepoint: number): boolean {
+  return 0xE000 <= codepoint && codepoint <= 0xF8FF;
+}
+
+function isBoxOrBlockGlyph(codepoint: number): boolean {
+  return 0x2500 <= codepoint && codepoint <= 0x259F;
+}
+
+export function isEmoji(codepoint: number): boolean {
+  return (
+    codepoint >= 0x1F600 && codepoint <= 0x1F64F || // Emoticons
+    codepoint >= 0x1F300 && codepoint <= 0x1F5FF || // Misc Symbols and Pictographs
+    codepoint >= 0x1F680 && codepoint <= 0x1F6FF || // Transport and Map
+    codepoint >= 0x2600  && codepoint <= 0x26FF  || // Misc symbols
+    codepoint >= 0x2700  && codepoint <= 0x27BF  || // Dingbats
+    codepoint >= 0xFE00  && codepoint <= 0xFE0F  || // Variation Selectors
+    codepoint >= 0x1F900 && codepoint <= 0x1F9FF || // Supplemental Symbols and Pictographs
+    codepoint >= 0x1F1E6 && codepoint <= 0x1F1FF
+  );
+}
+
+export function allowRescaling(codepoint: number | undefined, width: number, glyphSizeX: number, deviceCellWidth: number): boolean {
+  return (
+    // Is single cell width
+    width === 1 &&
+    // Glyph exceeds cell bounds, add 50% to avoid hurting readability by rescaling glyphs that
+    // barely overlap
+    glyphSizeX > Math.ceil(deviceCellWidth * 1.5) &&
+    // Never rescale ascii
+    codepoint !== undefined && codepoint > 0xFF &&
+    // Never rescale emoji
+    !isEmoji(codepoint) &&
+    // Never rescale powerline or nerd fonts
+    !isPowerlineGlyph(codepoint) && !isNerdFontGlyph(codepoint)
+  );
+}
+
+export function treatGlyphAsBackgroundColor(codepoint: number): boolean {
+  return isPowerlineGlyph(codepoint) || isBoxOrBlockGlyph(codepoint);
+}
+
+export function createRenderDimensions(): IRenderDimensions {
+  return {
+    css: {
+      canvas: createDimension(),
+      cell: createDimension()
+    },
+    device: {
+      canvas: createDimension(),
+      cell: createDimension(),
+      char: {
+        width: 0,
+        height: 0,
+        left: 0,
+        top: 0
+      }
+    }
+  };
+}
+
+function createDimension(): IDimensions {
+  return {
+    width: 0,
+    height: 0
+  };
+}
+
+export function computeNextVariantOffset(cellWidth: number, lineWidth: number, currentOffset: number = 0): number {
+  return (cellWidth - (Math.round(lineWidth) * 2 - currentOffset)) % (Math.round(lineWidth) * 2);
+}

web/node_modules/@xterm/xterm/src/browser/renderer/shared/SelectionRenderModel.ts

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2022 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ITerminal } from 'browser/Types';
+import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
+import { Terminal } from '@xterm/xterm';
+
+class SelectionRenderModel implements ISelectionRenderModel {
+  public hasSelection!: boolean;
+  public columnSelectMode!: boolean;
+  public viewportStartRow!: number;
+  public viewportEndRow!: number;
+  public viewportCappedStartRow!: number;
+  public viewportCappedEndRow!: number;
+  public startCol!: number;
+  public endCol!: number;
+  public selectionStart: [number, number] | undefined;
+  public selectionEnd: [number, number] | undefined;
+
+  constructor() {
+    this.clear();
+  }
+
+  public clear(): void {
+    this.hasSelection = false;
+    this.columnSelectMode = false;
+    this.viewportStartRow = 0;
+    this.viewportEndRow = 0;
+    this.viewportCappedStartRow = 0;
+    this.viewportCappedEndRow = 0;
+    this.startCol = 0;
+    this.endCol = 0;
+    this.selectionStart = undefined;
+    this.selectionEnd = undefined;
+  }
+
+  public update(terminal: ITerminal, start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
+    this.selectionStart = start;
+    this.selectionEnd = end;
+    // Selection does not exist
+    if (!start || !end || (start[0] === end[0] && start[1] === end[1])) {
+      this.clear();
+      return;
+    }
+
+    // Translate from buffer position to viewport position
+    const viewportY = terminal.buffers.active.ydisp;
+    const viewportStartRow = start[1] - viewportY;
+    const viewportEndRow = end[1] - viewportY;
+    const viewportCappedStartRow = Math.max(viewportStartRow, 0);
+    const viewportCappedEndRow = Math.min(viewportEndRow, terminal.rows - 1);
+
+    // No need to draw the selection
+    if (viewportCappedStartRow >= terminal.rows || viewportCappedEndRow < 0) {
+      this.clear();
+      return;
+    }
+
+    this.hasSelection = true;
+    this.columnSelectMode = columnSelectMode;
+    this.viewportStartRow = viewportStartRow;
+    this.viewportEndRow = viewportEndRow;
+    this.viewportCappedStartRow = viewportCappedStartRow;
+    this.viewportCappedEndRow = viewportCappedEndRow;
+    this.startCol = start[0];
+    this.endCol = end[0];
+  }
+
+  public isCellSelected(terminal: Terminal, x: number, y: number): boolean {
+    if (!this.hasSelection) {
+      return false;
+    }
+    y -= terminal.buffer.active.viewportY;
+    if (this.columnSelectMode) {
+      if (this.startCol <= this.endCol) {
+        return x >= this.startCol && y >= this.viewportCappedStartRow &&
+          x < this.endCol && y <= this.viewportCappedEndRow;
+      }
+      return x < this.startCol && y >= this.viewportCappedStartRow &&
+        x >= this.endCol && y <= this.viewportCappedEndRow;
+    }
+    return (y > this.viewportStartRow && y < this.viewportEndRow) ||
+      (this.viewportStartRow === this.viewportEndRow && y === this.viewportStartRow && x >= this.startCol && x < this.endCol) ||
+      (this.viewportStartRow < this.viewportEndRow && y === this.viewportEndRow && x < this.endCol) ||
+      (this.viewportStartRow < this.viewportEndRow && y === this.viewportStartRow && x >= this.startCol);
+  }
+}
+
+export function createSelectionRenderModel(): ISelectionRenderModel {
+  return new SelectionRenderModel();
+}

web/node_modules/@xterm/xterm/src/browser/renderer/shared/Types.d.ts

@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { FontWeight, Terminal } from '@xterm/xterm';
+import { IColorSet, ITerminal } from 'browser/Types';
+import { IDisposable } from 'common/Types';
+import { IEvent } from 'common/EventEmitter';
+
+export interface ICharAtlasConfig {
+  customGlyphs: boolean;
+  devicePixelRatio: number;
+  letterSpacing: number;
+  lineHeight: number;
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: FontWeight;
+  fontWeightBold: FontWeight;
+  deviceCellWidth: number;
+  deviceCellHeight: number;
+  deviceCharWidth: number;
+  deviceCharHeight: number;
+  allowTransparency: boolean;
+  drawBoldTextInBrightColors: boolean;
+  minimumContrastRatio: number;
+  colors: IColorSet;
+}
+
+export interface IDimensions {
+  width: number;
+  height: number;
+}
+
+export interface IOffset {
+  top: number;
+  left: number;
+}
+
+export interface IRenderDimensions {
+  /**
+   * Dimensions measured in CSS pixels (ie. device pixels / device pixel ratio).
+   */
+  css: {
+    canvas: IDimensions;
+    cell: IDimensions;
+  };
+  /**
+   * Dimensions measured in actual pixels as rendered to the device.
+   */
+  device: {
+    canvas: IDimensions;
+    cell: IDimensions;
+    char: IDimensions & IOffset;
+  };
+}
+
+export interface IRequestRedrawEvent {
+  start: number;
+  end: number;
+}
+
+/**
+ * Note that IRenderer implementations should emit the refresh event after
+ * rendering rows to the screen.
+ */
+export interface IRenderer extends IDisposable {
+  readonly dimensions: IRenderDimensions;
+
+  /**
+   * Fires when the renderer is requesting to be redrawn on the next animation
+   * frame but is _not_ a result of content changing (eg. selection changes).
+   */
+  readonly onRequestRedraw: IEvent<IRequestRedrawEvent>;
+
+  dispose(): void;
+  handleDevicePixelRatioChange(): void;
+  handleResize(cols: number, rows: number): void;
+  handleCharSizeChanged(): void;
+  handleBlur(): void;
+  handleFocus(): void;
+  handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
+  handleCursorMove(): void;
+  clear(): void;
+  renderRows(start: number, end: number): void;
+  clearTextureAtlas?(): void;
+}
+
+export interface ITextureAtlas extends IDisposable {
+  readonly pages: { canvas: HTMLCanvasElement, version: number }[];
+
+  onAddTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
+  onRemoveTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
+
+  /**
+   * Warm up the texture atlas, adding common glyphs to avoid slowing early frame.
+   */
+  warmUp(): void;
+
+  /**
+   * Call when a frame is being drawn, this will return true if the atlas was cleared to make room
+   * for a new set of glyphs.
+   */
+  beginFrame(): boolean;
+
+  /**
+   * Clear all glyphs from the texture atlas.
+   */
+  clearTexture(): void;
+  getRasterizedGlyph(code: number, bg: number, fg: number, ext: number, restrictToCellHeight: boolean): IRasterizedGlyph;
+  getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean): IRasterizedGlyph;
+}
+
+/**
+ * Represents a rasterized glyph within a texture atlas. Some numbers are
+ * tracked in CSS pixels as well in order to reduce calculations during the
+ * render loop.
+ */
+export interface IRasterizedGlyph {
+  /**
+   * The x and y offset between the glyph's top/left and the top/left of a cell
+   * in pixels.
+   */
+  offset: IVector;
+  /**
+   * The index of the texture page that the glyph is on.
+   */
+  texturePage: number;
+  /**
+   * the x and y position of the glyph in the texture in pixels.
+   */
+  texturePosition: IVector;
+  /**
+   * the x and y position of the glyph in the texture in clip space coordinates.
+   */
+  texturePositionClipSpace: IVector;
+  /**
+   * The width and height of the glyph in the texture in pixels.
+   */
+  size: IVector;
+  /**
+   * The width and height of the glyph in the texture in clip space coordinates.
+   */
+  sizeClipSpace: IVector;
+}
+
+export interface IVector {
+  x: number;
+  y: number;
+}
+
+export interface IBoundingBox {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+}
+
+export interface ISelectionRenderModel {
+  readonly hasSelection: boolean;
+  readonly columnSelectMode: boolean;
+  readonly viewportStartRow: number;
+  readonly viewportEndRow: number;
+  readonly viewportCappedStartRow: number;
+  readonly viewportCappedEndRow: number;
+  readonly startCol: number;
+  readonly endCol: number;
+  readonly selectionStart: [number, number] | undefined;
+  readonly selectionEnd: [number, number] | undefined;
+  clear(): void;
+  update(terminal: ITerminal, start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode?: boolean): void;
+  isCellSelected(terminal: Terminal, x: number, y: number): boolean;
+}

web/node_modules/@xterm/xterm/src/browser/selection/SelectionModel.ts

@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IBufferService } from 'common/services/Services';
+
+/**
+ * Represents a selection within the buffer. This model only cares about column
+ * and row coordinates, not wide characters.
+ */
+export class SelectionModel {
+  /**
+   * Whether select all is currently active.
+   */
+  public isSelectAllActive: boolean = false;
+
+  /**
+   * The minimal length of the selection from the start position. When double
+   * clicking on a word, the word will be selected which makes the selection
+   * start at the start of the word and makes this variable the length.
+   */
+  public selectionStartLength: number = 0;
+
+  /**
+   * The [x, y] position the selection starts at.
+   */
+  public selectionStart: [number, number] | undefined;
+
+  /**
+   * The [x, y] position the selection ends at.
+   */
+  public selectionEnd: [number, number] | undefined;
+
+  constructor(
+    private _bufferService: IBufferService
+  ) {
+  }
+
+  /**
+   * Clears the current selection.
+   */
+  public clearSelection(): void {
+    this.selectionStart = undefined;
+    this.selectionEnd = undefined;
+    this.isSelectAllActive = false;
+    this.selectionStartLength = 0;
+  }
+
+  /**
+   * The final selection start, taking into consideration select all.
+   */
+  public get finalSelectionStart(): [number, number] | undefined {
+    if (this.isSelectAllActive) {
+      return [0, 0];
+    }
+
+    if (!this.selectionEnd || !this.selectionStart) {
+      return this.selectionStart;
+    }
+
+    return this.areSelectionValuesReversed() ? this.selectionEnd : this.selectionStart;
+  }
+
+  /**
+   * The final selection end, taking into consideration select all, double click
+   * word selection and triple click line selection.
+   */
+  public get finalSelectionEnd(): [number, number] | undefined {
+    if (this.isSelectAllActive) {
+      return [this._bufferService.cols, this._bufferService.buffer.ybase + this._bufferService.rows - 1];
+    }
+
+    if (!this.selectionStart) {
+      return undefined;
+    }
+
+    // Use the selection start + length if the end doesn't exist or they're reversed
+    if (!this.selectionEnd || this.areSelectionValuesReversed()) {
+      const startPlusLength = this.selectionStart[0] + this.selectionStartLength;
+      if (startPlusLength > this._bufferService.cols) {
+        // Ensure the trailing EOL isn't included when the selection ends on the right edge
+        if (startPlusLength % this._bufferService.cols === 0) {
+          return [this._bufferService.cols, this.selectionStart[1] + Math.floor(startPlusLength / this._bufferService.cols) - 1];
+        }
+        return [startPlusLength % this._bufferService.cols, this.selectionStart[1] + Math.floor(startPlusLength / this._bufferService.cols)];
+      }
+      return [startPlusLength, this.selectionStart[1]];
+    }
+
+    // Ensure the the word/line is selected after a double/triple click
+    if (this.selectionStartLength) {
+      // Select the larger of the two when start and end are on the same line
+      if (this.selectionEnd[1] === this.selectionStart[1]) {
+        // Keep the whole wrapped word/line selected if the content wraps multiple lines
+        const startPlusLength = this.selectionStart[0] + this.selectionStartLength;
+        if (startPlusLength > this._bufferService.cols) {
+          return [startPlusLength % this._bufferService.cols, this.selectionStart[1] + Math.floor(startPlusLength / this._bufferService.cols)];
+        }
+        return [Math.max(startPlusLength, this.selectionEnd[0]), this.selectionEnd[1]];
+      }
+    }
+    return this.selectionEnd;
+  }
+
+  /**
+   * Returns whether the selection start and end are reversed.
+   */
+  public areSelectionValuesReversed(): boolean {
+    const start = this.selectionStart;
+    const end = this.selectionEnd;
+    if (!start || !end) {
+      return false;
+    }
+    return start[1] > end[1] || (start[1] === end[1] && start[0] > end[0]);
+  }
+
+  /**
+   * Handle the buffer being trimmed, adjust the selection position.
+   * @param amount The amount the buffer is being trimmed.
+   * @returns Whether a refresh is necessary.
+   */
+  public handleTrim(amount: number): boolean {
+    // Adjust the selection position based on the trimmed amount.
+    if (this.selectionStart) {
+      this.selectionStart[1] -= amount;
+    }
+    if (this.selectionEnd) {
+      this.selectionEnd[1] -= amount;
+    }
+
+    // The selection has moved off the buffer, clear it.
+    if (this.selectionEnd && this.selectionEnd[1] < 0) {
+      this.clearSelection();
+      return true;
+    }
+
+    // If the selection start is trimmed, ensure the start column is 0.
+    if (this.selectionStart && this.selectionStart[1] < 0) {
+      this.selectionStart[1] = 0;
+    }
+    return false;
+  }
+}

web/node_modules/@xterm/xterm/src/browser/selection/Types.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+export interface ISelectionRedrawRequestEvent {
+  start: [number, number] | undefined;
+  end: [number, number] | undefined;
+  columnSelectMode: boolean;
+}
+
+export interface ISelectionRequestScrollLinesEvent {
+  amount: number;
+  suppressScrollEvent: boolean;
+}

web/node_modules/@xterm/xterm/src/browser/services/CharSizeService.ts

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IOptionsService } from 'common/services/Services';
+import { EventEmitter } from 'common/EventEmitter';
+import { ICharSizeService } from 'browser/services/Services';
+import { Disposable } from 'common/Lifecycle';
+
+export class CharSizeService extends Disposable implements ICharSizeService {
+  public serviceBrand: undefined;
+
+  public width: number = 0;
+  public height: number = 0;
+  private _measureStrategy: IMeasureStrategy;
+
+  public get hasValidSize(): boolean { return this.width > 0 && this.height > 0; }
+
+  private readonly _onCharSizeChange = this.register(new EventEmitter<void>());
+  public readonly onCharSizeChange = this._onCharSizeChange.event;
+
+  constructor(
+    document: Document,
+    parentElement: HTMLElement,
+    @IOptionsService private readonly _optionsService: IOptionsService
+  ) {
+    super();
+    try {
+      this._measureStrategy = this.register(new TextMetricsMeasureStrategy(this._optionsService));
+    } catch {
+      this._measureStrategy = this.register(new DomMeasureStrategy(document, parentElement, this._optionsService));
+    }
+    this.register(this._optionsService.onMultipleOptionChange(['fontFamily', 'fontSize'], () => this.measure()));
+  }
+
+  public measure(): void {
+    const result = this._measureStrategy.measure();
+    if (result.width !== this.width || result.height !== this.height) {
+      this.width = result.width;
+      this.height = result.height;
+      this._onCharSizeChange.fire();
+    }
+  }
+}
+
+interface IMeasureStrategy {
+  measure(): Readonly<IMeasureResult>;
+}
+
+interface IMeasureResult {
+  width: number;
+  height: number;
+}
+
+const enum DomMeasureStrategyConstants {
+  REPEAT = 32
+}
+
+abstract class BaseMeasureStategy extends Disposable implements IMeasureStrategy {
+  protected _result: IMeasureResult = { width: 0, height: 0 };
+
+  protected _validateAndSet(width: number | undefined, height: number | undefined): void {
+    // If values are 0 then the element is likely currently display:none, in which case we should
+    // retain the previous value.
+    if (width !== undefined && width > 0 && height !== undefined && height > 0) {
+      this._result.width = width;
+      this._result.height = height;
+    }
+  }
+
+  public abstract measure(): Readonly<IMeasureResult>;
+}
+
+class DomMeasureStrategy extends BaseMeasureStategy {
+  private _measureElement: HTMLElement;
+
+  constructor(
+    private _document: Document,
+    private _parentElement: HTMLElement,
+    private _optionsService: IOptionsService
+  ) {
+    super();
+    this._measureElement = this._document.createElement('span');
+    this._measureElement.classList.add('xterm-char-measure-element');
+    this._measureElement.textContent = 'W'.repeat(DomMeasureStrategyConstants.REPEAT);
+    this._measureElement.setAttribute('aria-hidden', 'true');
+    this._measureElement.style.whiteSpace = 'pre';
+    this._measureElement.style.fontKerning = 'none';
+    this._parentElement.appendChild(this._measureElement);
+  }
+
+  public measure(): Readonly<IMeasureResult> {
+    this._measureElement.style.fontFamily = this._optionsService.rawOptions.fontFamily;
+    this._measureElement.style.fontSize = `${this._optionsService.rawOptions.fontSize}px`;
+
+    // Note that this triggers a synchronous layout
+    this._validateAndSet(Number(this._measureElement.offsetWidth) / DomMeasureStrategyConstants.REPEAT, Number(this._measureElement.offsetHeight));
+
+    return this._result;
+  }
+}
+
+class TextMetricsMeasureStrategy extends BaseMeasureStategy {
+  private _canvas: OffscreenCanvas;
+  private _ctx: OffscreenCanvasRenderingContext2D;
+
+  constructor(
+    private _optionsService: IOptionsService
+  ) {
+    super();
+    // This will throw if any required API is not supported
+    this._canvas = new OffscreenCanvas(100, 100);
+    this._ctx = this._canvas.getContext('2d')!;
+    const a = this._ctx.measureText('W');
+    if (!('width' in a && 'fontBoundingBoxAscent' in a && 'fontBoundingBoxDescent' in a)) {
+      throw new Error('Required font metrics not supported');
+    }
+  }
+
+  public measure(): Readonly<IMeasureResult> {
+    this._ctx.font = `${this._optionsService.rawOptions.fontSize}px ${this._optionsService.rawOptions.fontFamily}`;
+    const metrics = this._ctx.measureText('W');
+    this._validateAndSet(metrics.width, metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent);
+    return this._result;
+  }
+}

web/node_modules/@xterm/xterm/src/browser/services/CharacterJoinerService.ts

@@ -0,0 +1,339 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IBufferLine, ICellData, CharData } from 'common/Types';
+import { ICharacterJoiner } from 'browser/Types';
+import { AttributeData } from 'common/buffer/AttributeData';
+import { WHITESPACE_CELL_CHAR, Content } from 'common/buffer/Constants';
+import { CellData } from 'common/buffer/CellData';
+import { IBufferService } from 'common/services/Services';
+import { ICharacterJoinerService } from 'browser/services/Services';
+
+export class JoinedCellData extends AttributeData implements ICellData {
+  private _width: number;
+  // .content carries no meaning for joined CellData, simply nullify it
+  // thus we have to overload all other .content accessors
+  public content: number = 0;
+  public fg: number;
+  public bg: number;
+  public combinedData: string = '';
+
+  constructor(firstCell: ICellData, chars: string, width: number) {
+    super();
+    this.fg = firstCell.fg;
+    this.bg = firstCell.bg;
+    this.combinedData = chars;
+    this._width = width;
+  }
+
+  public isCombined(): number {
+    // always mark joined cell data as combined
+    return Content.IS_COMBINED_MASK;
+  }
+
+  public getWidth(): number {
+    return this._width;
+  }
+
+  public getChars(): string {
+    return this.combinedData;
+  }
+
+  public getCode(): number {
+    // code always gets the highest possible fake codepoint (read as -1)
+    // this is needed as code is used by caches as identifier
+    return 0x1FFFFF;
+  }
+
+  public setFromCharData(value: CharData): void {
+    throw new Error('not implemented');
+  }
+
+  public getAsCharData(): CharData {
+    return [this.fg, this.getChars(), this.getWidth(), this.getCode()];
+  }
+}
+
+export class CharacterJoinerService implements ICharacterJoinerService {
+  public serviceBrand: undefined;
+
+  private _characterJoiners: ICharacterJoiner[] = [];
+  private _nextCharacterJoinerId: number = 0;
+  private _workCell: CellData = new CellData();
+
+  constructor(
+    @IBufferService private _bufferService: IBufferService
+  ) { }
+
+  public register(handler: (text: string) => [number, number][]): number {
+    const joiner: ICharacterJoiner = {
+      id: this._nextCharacterJoinerId++,
+      handler
+    };
+
+    this._characterJoiners.push(joiner);
+    return joiner.id;
+  }
+
+  public deregister(joinerId: number): boolean {
+    for (let i = 0; i < this._characterJoiners.length; i++) {
+      if (this._characterJoiners[i].id === joinerId) {
+        this._characterJoiners.splice(i, 1);
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  public getJoinedCharacters(row: number): [number, number][] {
+    if (this._characterJoiners.length === 0) {
+      return [];
+    }
+
+    const line = this._bufferService.buffer.lines.get(row);
+    if (!line || line.length === 0) {
+      return [];
+    }
+
+    const ranges: [number, number][] = [];
+    const lineStr = line.translateToString(true);
+
+    // Because some cells can be represented by multiple javascript characters,
+    // we track the cell and the string indexes separately. This allows us to
+    // translate the string ranges we get from the joiners back into cell ranges
+    // for use when rendering
+    let rangeStartColumn = 0;
+    let currentStringIndex = 0;
+    let rangeStartStringIndex = 0;
+    let rangeAttrFG = line.getFg(0);
+    let rangeAttrBG = line.getBg(0);
+
+    for (let x = 0; x < line.getTrimmedLength(); x++) {
+      line.loadCell(x, this._workCell);
+
+      if (this._workCell.getWidth() === 0) {
+        // If this character is of width 0, skip it.
+        continue;
+      }
+
+      // End of range
+      if (this._workCell.fg !== rangeAttrFG || this._workCell.bg !== rangeAttrBG) {
+        // If we ended up with a sequence of more than one character,
+        // look for ranges to join.
+        if (x - rangeStartColumn > 1) {
+          const joinedRanges = this._getJoinedRanges(
+            lineStr,
+            rangeStartStringIndex,
+            currentStringIndex,
+            line,
+            rangeStartColumn
+          );
+          for (let i = 0; i < joinedRanges.length; i++) {
+            ranges.push(joinedRanges[i]);
+          }
+        }
+
+        // Reset our markers for a new range.
+        rangeStartColumn = x;
+        rangeStartStringIndex = currentStringIndex;
+        rangeAttrFG = this._workCell.fg;
+        rangeAttrBG = this._workCell.bg;
+      }
+
+      currentStringIndex += this._workCell.getChars().length || WHITESPACE_CELL_CHAR.length;
+    }
+
+    // Process any trailing ranges.
+    if (this._bufferService.cols - rangeStartColumn > 1) {
+      const joinedRanges = this._getJoinedRanges(
+        lineStr,
+        rangeStartStringIndex,
+        currentStringIndex,
+        line,
+        rangeStartColumn
+      );
+      for (let i = 0; i < joinedRanges.length; i++) {
+        ranges.push(joinedRanges[i]);
+      }
+    }
+
+    return ranges;
+  }
+
+  /**
+   * Given a segment of a line of text, find all ranges of text that should be
+   * joined in a single rendering unit. Ranges are internally converted to
+   * column ranges, rather than string ranges.
+   * @param line String representation of the full line of text
+   * @param startIndex Start position of the range to search in the string (inclusive)
+   * @param endIndex End position of the range to search in the string (exclusive)
+   */
+  private _getJoinedRanges(line: string, startIndex: number, endIndex: number, lineData: IBufferLine, startCol: number): [number, number][] {
+    const text = line.substring(startIndex, endIndex);
+    // At this point we already know that there is at least one joiner so
+    // we can just pull its value and assign it directly rather than
+    // merging it into an empty array, which incurs unnecessary writes.
+    let allJoinedRanges: [number, number][] = [];
+    try {
+      allJoinedRanges = this._characterJoiners[0].handler(text);
+    } catch (error) {
+      console.error(error);
+    }
+    for (let i = 1; i < this._characterJoiners.length; i++) {
+      // We merge any overlapping ranges across the different joiners
+      try {
+        const joinerRanges = this._characterJoiners[i].handler(text);
+        for (let j = 0; j < joinerRanges.length; j++) {
+          CharacterJoinerService._mergeRanges(allJoinedRanges, joinerRanges[j]);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    this._stringRangesToCellRanges(allJoinedRanges, lineData, startCol);
+    return allJoinedRanges;
+  }
+
+  /**
+   * Modifies the provided ranges in-place to adjust for variations between
+   * string length and cell width so that the range represents a cell range,
+   * rather than the string range the joiner provides.
+   * @param ranges String ranges containing start (inclusive) and end (exclusive) index
+   * @param line Cell data for the relevant line in the terminal
+   * @param startCol Offset within the line to start from
+   */
+  private _stringRangesToCellRanges(ranges: [number, number][], line: IBufferLine, startCol: number): void {
+    let currentRangeIndex = 0;
+    let currentRangeStarted = false;
+    let currentStringIndex = 0;
+    let currentRange = ranges[currentRangeIndex];
+
+    // If we got through all of the ranges, stop searching
+    if (!currentRange) {
+      return;
+    }
+
+    for (let x = startCol; x < this._bufferService.cols; x++) {
+      const width = line.getWidth(x);
+      const length = line.getString(x).length || WHITESPACE_CELL_CHAR.length;
+
+      // We skip zero-width characters when creating the string to join the text
+      // so we do the same here
+      if (width === 0) {
+        continue;
+      }
+
+      // Adjust the start of the range
+      if (!currentRangeStarted && currentRange[0] <= currentStringIndex) {
+        currentRange[0] = x;
+        currentRangeStarted = true;
+      }
+
+      // Adjust the end of the range
+      if (currentRange[1] <= currentStringIndex) {
+        currentRange[1] = x;
+
+        // We're finished with this range, so we move to the next one
+        currentRange = ranges[++currentRangeIndex];
+
+        // If there are no more ranges left, stop searching
+        if (!currentRange) {
+          break;
+        }
+
+        // Ranges can be on adjacent characters. Because the end index of the
+        // ranges are exclusive, this means that the index for the start of a
+        // range can be the same as the end index of the previous range. To
+        // account for the start of the next range, we check here just in case.
+        if (currentRange[0] <= currentStringIndex) {
+          currentRange[0] = x;
+          currentRangeStarted = true;
+        } else {
+          currentRangeStarted = false;
+        }
+      }
+
+      // Adjust the string index based on the character length to line up with
+      // the column adjustment
+      currentStringIndex += length;
+    }
+
+    // If there is still a range left at the end, it must extend all the way to
+    // the end of the line.
+    if (currentRange) {
+      currentRange[1] = this._bufferService.cols;
+    }
+  }
+
+  /**
+   * Merges the range defined by the provided start and end into the list of
+   * existing ranges. The merge is done in place on the existing range for
+   * performance and is also returned.
+   * @param ranges Existing range list
+   * @param newRange Tuple of two numbers representing the new range to merge in.
+   * @returns The ranges input with the new range merged in place
+   */
+  private static _mergeRanges(ranges: [number, number][], newRange: [number, number]): [number, number][] {
+    let inRange = false;
+    for (let i = 0; i < ranges.length; i++) {
+      const range = ranges[i];
+      if (!inRange) {
+        if (newRange[1] <= range[0]) {
+          // Case 1: New range is before the search range
+          ranges.splice(i, 0, newRange);
+          return ranges;
+        }
+
+        if (newRange[1] <= range[1]) {
+          // Case 2: New range is either wholly contained within the
+          // search range or overlaps with the front of it
+          range[0] = Math.min(newRange[0], range[0]);
+          return ranges;
+        }
+
+        if (newRange[0] < range[1]) {
+          // Case 3: New range either wholly contains the search range
+          // or overlaps with the end of it
+          range[0] = Math.min(newRange[0], range[0]);
+          inRange = true;
+        }
+
+        // Case 4: New range starts after the search range
+        continue;
+      } else {
+        if (newRange[1] <= range[0]) {
+          // Case 5: New range extends from previous range but doesn't
+          // reach the current one
+          ranges[i - 1][1] = newRange[1];
+          return ranges;
+        }
+
+        if (newRange[1] <= range[1]) {
+          // Case 6: New range extends from prvious range into the
+          // current range
+          ranges[i - 1][1] = Math.max(newRange[1], range[1]);
+          ranges.splice(i, 1);
+          return ranges;
+        }
+
+        // Case 7: New range extends from previous range past the
+        // end of the current range
+        ranges.splice(i, 1);
+        i--;
+      }
+    }
+
+    if (inRange) {
+      // Case 8: New range extends past the last existing range
+      ranges[ranges.length - 1][1] = newRange[1];
+    } else {
+      // Case 9: New range starts after the last existing range
+      ranges.push(newRange);
+    }
+
+    return ranges;
+  }
+}

web/node_modules/@xterm/xterm/src/browser/services/CoreBrowserService.ts

@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
+import { ICoreBrowserService } from './Services';
+import { EventEmitter, forwardEvent } from 'common/EventEmitter';
+import { addDisposableDomListener } from 'browser/Lifecycle';
+
+export class CoreBrowserService extends Disposable implements ICoreBrowserService {
+  public serviceBrand: undefined;
+
+  private _isFocused = false;
+  private _cachedIsFocused: boolean | undefined = undefined;
+  private _screenDprMonitor = new ScreenDprMonitor(this._window);
+
+  private readonly _onDprChange = this.register(new EventEmitter<number>());
+  public readonly onDprChange = this._onDprChange.event;
+  private readonly _onWindowChange = this.register(new EventEmitter<Window & typeof globalThis>());
+  public readonly onWindowChange = this._onWindowChange.event;
+
+  constructor(
+    private _textarea: HTMLTextAreaElement,
+    private _window: Window & typeof globalThis,
+    public readonly mainDocument: Document
+  ) {
+    super();
+
+    // Monitor device pixel ratio
+    this.register(this.onWindowChange(w => this._screenDprMonitor.setWindow(w)));
+    this.register(forwardEvent(this._screenDprMonitor.onDprChange, this._onDprChange));
+
+    this._textarea.addEventListener('focus', () => this._isFocused = true);
+    this._textarea.addEventListener('blur', () => this._isFocused = false);
+  }
+
+  public get window(): Window & typeof globalThis {
+    return this._window;
+  }
+
+  public set window(value: Window & typeof globalThis) {
+    if (this._window !== value) {
+      this._window = value;
+      this._onWindowChange.fire(this._window);
+    }
+  }
+
+  public get dpr(): number {
+    return this.window.devicePixelRatio;
+  }
+
+  public get isFocused(): boolean {
+    if (this._cachedIsFocused === undefined) {
+      this._cachedIsFocused = this._isFocused && this._textarea.ownerDocument.hasFocus();
+      queueMicrotask(() => this._cachedIsFocused = undefined);
+    }
+    return this._cachedIsFocused;
+  }
+}
+
+
+/**
+ * The screen device pixel ratio monitor allows listening for when the
+ * window.devicePixelRatio value changes. This is done not with polling but with
+ * the use of window.matchMedia to watch media queries. When the event fires,
+ * the listener will be reattached using a different media query to ensure that
+ * any further changes will register.
+ *
+ * The listener should fire on both window zoom changes and switching to a
+ * monitor with a different DPI.
+ */
+class ScreenDprMonitor extends Disposable {
+  private _currentDevicePixelRatio: number;
+  private _outerListener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | undefined;
+  private _resolutionMediaMatchList: MediaQueryList | undefined;
+  private _windowResizeListener = this.register(new MutableDisposable());
+
+  private readonly _onDprChange = this.register(new EventEmitter<number>());
+  public readonly onDprChange = this._onDprChange.event;
+
+  constructor(private _parentWindow: Window) {
+    super();
+
+    // Initialize listener and dpr value
+    this._outerListener = () => this._setDprAndFireIfDiffers();
+    this._currentDevicePixelRatio = this._parentWindow.devicePixelRatio;
+    this._updateDpr();
+
+    // Monitor active window resize
+    this._setWindowResizeListener();
+
+    // Setup additional disposables
+    this.register(toDisposable(() => this.clearListener()));
+  }
+
+
+  public setWindow(parentWindow: Window): void {
+    this._parentWindow = parentWindow;
+    this._setWindowResizeListener();
+    this._setDprAndFireIfDiffers();
+  }
+
+  private _setWindowResizeListener(): void {
+    this._windowResizeListener.value = addDisposableDomListener(this._parentWindow, 'resize', () => this._setDprAndFireIfDiffers());
+  }
+
+  private _setDprAndFireIfDiffers(): void {
+    if (this._parentWindow.devicePixelRatio !== this._currentDevicePixelRatio) {
+      this._onDprChange.fire(this._parentWindow.devicePixelRatio);
+    }
+    this._updateDpr();
+  }
+
+  private _updateDpr(): void {
+    if (!this._outerListener) {
+      return;
+    }
+
+    // Clear listeners for old DPR
+    this._resolutionMediaMatchList?.removeListener(this._outerListener);
+
+    // Add listeners for new DPR
+    this._currentDevicePixelRatio = this._parentWindow.devicePixelRatio;
+    this._resolutionMediaMatchList = this._parentWindow.matchMedia(`screen and (resolution: ${this._parentWindow.devicePixelRatio}dppx)`);
+    this._resolutionMediaMatchList.addListener(this._outerListener);
+  }
+
+  public clearListener(): void {
+    if (!this._resolutionMediaMatchList || !this._outerListener) {
+      return;
+    }
+    this._resolutionMediaMatchList.removeListener(this._outerListener);
+    this._resolutionMediaMatchList = undefined;
+    this._outerListener = undefined;
+  }
+}

web/node_modules/@xterm/xterm/src/browser/services/LinkProviderService.ts

@@ -0,0 +1,28 @@
+import { ILinkProvider, ILinkProviderService } from 'browser/services/Services';
+import { Disposable, toDisposable } from 'common/Lifecycle';
+import { IDisposable } from 'common/Types';
+
+export class LinkProviderService extends Disposable implements ILinkProviderService {
+  declare public serviceBrand: undefined;
+
+  public readonly linkProviders: ILinkProvider[] = [];
+
+  constructor() {
+    super();
+    this.register(toDisposable(() => this.linkProviders.length = 0));
+  }
+
+  public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
+    this.linkProviders.push(linkProvider);
+    return {
+      dispose: () => {
+        // Remove the link provider from the list
+        const providerIndex = this.linkProviders.indexOf(linkProvider);
+
+        if (providerIndex !== -1) {
+          this.linkProviders.splice(providerIndex, 1);
+        }
+      }
+    };
+  }
+}

web/node_modules/@xterm/xterm/src/browser/services/MouseService.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICharSizeService, IRenderService, IMouseService } from './Services';
+import { getCoords, getCoordsRelativeToElement } from 'browser/input/Mouse';
+
+export class MouseService implements IMouseService {
+  public serviceBrand: undefined;
+
+  constructor(
+    @IRenderService private readonly _renderService: IRenderService,
+    @ICharSizeService private readonly _charSizeService: ICharSizeService
+  ) {
+  }
+
+  public getCoords(event: {clientX: number, clientY: number}, element: HTMLElement, colCount: number, rowCount: number, isSelection?: boolean): [number, number] | undefined {
+    return getCoords(
+      window,
+      event,
+      element,
+      colCount,
+      rowCount,
+      this._charSizeService.hasValidSize,
+      this._renderService.dimensions.css.cell.width,
+      this._renderService.dimensions.css.cell.height,
+      isSelection
+    );
+  }
+
+  public getMouseReportCoords(event: MouseEvent, element: HTMLElement): { col: number, row: number, x: number, y: number } | undefined {
+    const coords = getCoordsRelativeToElement(window, event, element);
+    if (!this._charSizeService.hasValidSize) {
+      return undefined;
+    }
+    coords[0] = Math.min(Math.max(coords[0], 0), this._renderService.dimensions.css.canvas.width - 1);
+    coords[1] = Math.min(Math.max(coords[1], 0), this._renderService.dimensions.css.canvas.height - 1);
+    return {
+      col: Math.floor(coords[0] / this._renderService.dimensions.css.cell.width),
+      row: Math.floor(coords[1] / this._renderService.dimensions.css.cell.height),
+      x: Math.floor(coords[0]),
+      y: Math.floor(coords[1])
+    };
+  }
+}

web/node_modules/@xterm/xterm/src/browser/services/RenderService.ts

@@ -0,0 +1,285 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { RenderDebouncer } from 'browser/RenderDebouncer';
+import { IRenderDebouncerWithCallback } from 'browser/Types';
+import { IRenderDimensions, IRenderer } from 'browser/renderer/shared/Types';
+import { ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
+import { EventEmitter } from 'common/EventEmitter';
+import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
+import { DebouncedIdleTask } from 'common/TaskQueue';
+import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+
+interface ISelectionState {
+  start: [number, number] | undefined;
+  end: [number, number] | undefined;
+  columnSelectMode: boolean;
+}
+
+export class RenderService extends Disposable implements IRenderService {
+  public serviceBrand: undefined;
+
+  private _renderer: MutableDisposable<IRenderer> = this.register(new MutableDisposable());
+  private _renderDebouncer: IRenderDebouncerWithCallback;
+  private _pausedResizeTask = new DebouncedIdleTask();
+  private _observerDisposable = this.register(new MutableDisposable());
+
+  private _isPaused: boolean = false;
+  private _needsFullRefresh: boolean = false;
+  private _isNextRenderRedrawOnly: boolean = true;
+  private _needsSelectionRefresh: boolean = false;
+  private _canvasWidth: number = 0;
+  private _canvasHeight: number = 0;
+  private _selectionState: ISelectionState = {
+    start: undefined,
+    end: undefined,
+    columnSelectMode: false
+  };
+
+  private readonly _onDimensionsChange = this.register(new EventEmitter<IRenderDimensions>());
+  public readonly onDimensionsChange = this._onDimensionsChange.event;
+  private readonly _onRenderedViewportChange = this.register(new EventEmitter<{ start: number, end: number }>());
+  public readonly onRenderedViewportChange = this._onRenderedViewportChange.event;
+  private readonly _onRender = this.register(new EventEmitter<{ start: number, end: number }>());
+  public readonly onRender = this._onRender.event;
+  private readonly _onRefreshRequest = this.register(new EventEmitter<{ start: number, end: number }>());
+  public readonly onRefreshRequest = this._onRefreshRequest.event;
+
+  public get dimensions(): IRenderDimensions { return this._renderer.value!.dimensions; }
+
+  constructor(
+    private _rowCount: number,
+    screenElement: HTMLElement,
+    @IOptionsService optionsService: IOptionsService,
+    @ICharSizeService private readonly _charSizeService: ICharSizeService,
+    @IDecorationService decorationService: IDecorationService,
+    @IBufferService bufferService: IBufferService,
+    @ICoreBrowserService coreBrowserService: ICoreBrowserService,
+    @IThemeService themeService: IThemeService
+  ) {
+    super();
+
+    this._renderDebouncer = new RenderDebouncer((start, end) => this._renderRows(start, end), coreBrowserService);
+    this.register(this._renderDebouncer);
+
+    this.register(coreBrowserService.onDprChange(() => this.handleDevicePixelRatioChange()));
+
+    this.register(bufferService.onResize(() => this._fullRefresh()));
+    this.register(bufferService.buffers.onBufferActivate(() => this._renderer.value?.clear()));
+    this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
+    this.register(this._charSizeService.onCharSizeChange(() => this.handleCharSizeChanged()));
+
+    // Do a full refresh whenever any decoration is added or removed. This may not actually result
+    // in changes but since decorations should be used sparingly or added/removed all in the same
+    // frame this should have minimal performance impact.
+    this.register(decorationService.onDecorationRegistered(() => this._fullRefresh()));
+    this.register(decorationService.onDecorationRemoved(() => this._fullRefresh()));
+
+    // Clear the renderer when the a change that could affect glyphs occurs
+    this.register(optionsService.onMultipleOptionChange([
+      'customGlyphs',
+      'drawBoldTextInBrightColors',
+      'letterSpacing',
+      'lineHeight',
+      'fontFamily',
+      'fontSize',
+      'fontWeight',
+      'fontWeightBold',
+      'minimumContrastRatio',
+      'rescaleOverlappingGlyphs'
+    ], () => {
+      this.clear();
+      this.handleResize(bufferService.cols, bufferService.rows);
+      this._fullRefresh();
+    }));
+
+    // Refresh the cursor line when the cursor changes
+    this.register(optionsService.onMultipleOptionChange([
+      'cursorBlink',
+      'cursorStyle'
+    ], () => this.refreshRows(bufferService.buffer.y, bufferService.buffer.y, true)));
+
+    this.register(themeService.onChangeColors(() => this._fullRefresh()));
+
+    this._registerIntersectionObserver(coreBrowserService.window, screenElement);
+    this.register(coreBrowserService.onWindowChange((w) => this._registerIntersectionObserver(w, screenElement)));
+  }
+
+  private _registerIntersectionObserver(w: Window & typeof globalThis, screenElement: HTMLElement): void {
+    // Detect whether IntersectionObserver is detected and enable renderer pause
+    // 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 });
+      observer.observe(screenElement);
+      this._observerDisposable.value = toDisposable(() => observer.disconnect());
+    }
+  }
+
+  private _handleIntersectionChange(entry: IntersectionObserverEntry): void {
+    this._isPaused = entry.isIntersecting === undefined ? (entry.intersectionRatio === 0) : !entry.isIntersecting;
+
+    // Terminal was hidden on open
+    if (!this._isPaused && !this._charSizeService.hasValidSize) {
+      this._charSizeService.measure();
+    }
+
+    if (!this._isPaused && this._needsFullRefresh) {
+      this._pausedResizeTask.flush();
+      this.refreshRows(0, this._rowCount - 1);
+      this._needsFullRefresh = false;
+    }
+  }
+
+  public refreshRows(start: number, end: number, isRedrawOnly: boolean = false): void {
+    if (this._isPaused) {
+      this._needsFullRefresh = true;
+      return;
+    }
+    if (!isRedrawOnly) {
+      this._isNextRenderRedrawOnly = false;
+    }
+    this._renderDebouncer.refresh(start, end, this._rowCount);
+  }
+
+  private _renderRows(start: number, end: number): void {
+    if (!this._renderer.value) {
+      return;
+    }
+
+    // Since this is debounced, a resize event could have happened between the time a refresh was
+    // requested and when this triggers. Clamp the values of start and end to ensure they're valid
+    // given the current viewport state.
+    start = Math.min(start, this._rowCount - 1);
+    end = Math.min(end, this._rowCount - 1);
+
+    // Render
+    this._renderer.value.renderRows(start, end);
+
+    // Update selection if needed
+    if (this._needsSelectionRefresh) {
+      this._renderer.value.handleSelectionChanged(this._selectionState.start, this._selectionState.end, this._selectionState.columnSelectMode);
+      this._needsSelectionRefresh = false;
+    }
+
+    // Fire render event only if it was not a redraw
+    if (!this._isNextRenderRedrawOnly) {
+      this._onRenderedViewportChange.fire({ start, end });
+    }
+    this._onRender.fire({ start, end });
+    this._isNextRenderRedrawOnly = true;
+  }
+
+  public resize(cols: number, rows: number): void {
+    this._rowCount = rows;
+    this._fireOnCanvasResize();
+  }
+
+  private _handleOptionsChanged(): void {
+    if (!this._renderer.value) {
+      return;
+    }
+    this.refreshRows(0, this._rowCount - 1);
+    this._fireOnCanvasResize();
+  }
+
+  private _fireOnCanvasResize(): void {
+    if (!this._renderer.value) {
+      return;
+    }
+    // Don't fire the event if the dimensions haven't changed
+    if (this._renderer.value.dimensions.css.canvas.width === this._canvasWidth && this._renderer.value.dimensions.css.canvas.height === this._canvasHeight) {
+      return;
+    }
+    this._onDimensionsChange.fire(this._renderer.value.dimensions);
+  }
+
+  public hasRenderer(): boolean {
+    return !!this._renderer.value;
+  }
+
+  public setRenderer(renderer: IRenderer): void {
+    this._renderer.value = renderer;
+    // If the value was not set, the terminal is being disposed so ignore it
+    if (this._renderer.value) {
+      this._renderer.value.onRequestRedraw(e => this.refreshRows(e.start, e.end, true));
+
+      // Force a refresh
+      this._needsSelectionRefresh = true;
+      this._fullRefresh();
+    }
+  }
+
+  public addRefreshCallback(callback: FrameRequestCallback): number {
+    return this._renderDebouncer.addRefreshCallback(callback);
+  }
+
+  private _fullRefresh(): void {
+    if (this._isPaused) {
+      this._needsFullRefresh = true;
+    } else {
+      this.refreshRows(0, this._rowCount - 1);
+    }
+  }
+
+  public clearTextureAtlas(): void {
+    if (!this._renderer.value) {
+      return;
+    }
+    this._renderer.value.clearTextureAtlas?.();
+    this._fullRefresh();
+  }
+
+  public handleDevicePixelRatioChange(): void {
+    // Force char size measurement as DomMeasureStrategy(getBoundingClientRect) is not stable
+    // when devicePixelRatio changes
+    this._charSizeService.measure();
+
+    if (!this._renderer.value) {
+      return;
+    }
+    this._renderer.value.handleDevicePixelRatioChange();
+    this.refreshRows(0, this._rowCount - 1);
+  }
+
+  public handleResize(cols: number, rows: number): void {
+    if (!this._renderer.value) {
+      return;
+    }
+    if (this._isPaused) {
+      this._pausedResizeTask.set(() => this._renderer.value?.handleResize(cols, rows));
+    } else {
+      this._renderer.value.handleResize(cols, rows);
+    }
+    this._fullRefresh();
+  }
+
+  // TODO: Is this useful when we have onResize?
+  public handleCharSizeChanged(): void {
+    this._renderer.value?.handleCharSizeChanged();
+  }
+
+  public handleBlur(): void {
+    this._renderer.value?.handleBlur();
+  }
+
+  public handleFocus(): void {
+    this._renderer.value?.handleFocus();
+  }
+
+  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
+    this._selectionState.start = start;
+    this._selectionState.end = end;
+    this._selectionState.columnSelectMode = columnSelectMode;
+    this._renderer.value?.handleSelectionChanged(start, end, columnSelectMode);
+  }
+
+  public handleCursorMove(): void {
+    this._renderer.value?.handleCursorMove();
+  }
+
+  public clear(): void {
+    this._renderer.value?.clear();
+  }
+}

web/node_modules/@xterm/xterm/src/browser/services/Services.ts

@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IEvent } from 'common/EventEmitter';
+import { IRenderDimensions, IRenderer } from 'browser/renderer/shared/Types';
+import { IColorSet, ILink, ReadonlyColorSet } from 'browser/Types';
+import { ISelectionRedrawRequestEvent as ISelectionRequestRedrawEvent, ISelectionRequestScrollLinesEvent } from 'browser/selection/Types';
+import { createDecorator } from 'common/services/ServiceRegistry';
+import { AllColorIndex, IDisposable } from 'common/Types';
+
+export const ICharSizeService = createDecorator<ICharSizeService>('CharSizeService');
+export interface ICharSizeService {
+  serviceBrand: undefined;
+
+  readonly width: number;
+  readonly height: number;
+  readonly hasValidSize: boolean;
+
+  readonly onCharSizeChange: IEvent<void>;
+
+  measure(): void;
+}
+
+export const ICoreBrowserService = createDecorator<ICoreBrowserService>('CoreBrowserService');
+export interface ICoreBrowserService {
+  serviceBrand: undefined;
+
+  readonly isFocused: boolean;
+
+  readonly onDprChange: IEvent<number>;
+  readonly onWindowChange: IEvent<Window & typeof globalThis>;
+
+  /**
+   * Gets or sets the parent window that the terminal is rendered into. DOM and rendering APIs (e.g.
+   * requestAnimationFrame) should be invoked in the context of this window. This should be set when
+   * the window hosting the xterm.js instance changes.
+   */
+  window: Window & typeof globalThis;
+  /**
+   * The document of the primary window to be used to create elements when working with multiple
+   * windows. This is defined by the documentOverride setting.
+   */
+  readonly mainDocument: Document;
+  /**
+   * Helper for getting the devicePixelRatio of the parent window.
+   */
+  readonly dpr: number;
+}
+
+export const IMouseService = createDecorator<IMouseService>('MouseService');
+export interface IMouseService {
+  serviceBrand: undefined;
+
+  getCoords(event: {clientX: number, clientY: number}, element: HTMLElement, colCount: number, rowCount: number, isSelection?: boolean): [number, number] | undefined;
+  getMouseReportCoords(event: MouseEvent, element: HTMLElement): { col: number, row: number, x: number, y: number } | undefined;
+}
+
+export const IRenderService = createDecorator<IRenderService>('RenderService');
+export interface IRenderService extends IDisposable {
+  serviceBrand: undefined;
+
+  onDimensionsChange: IEvent<IRenderDimensions>;
+  /**
+   * Fires when buffer changes are rendered. This does not fire when only cursor
+   * or selections are rendered.
+   */
+  onRenderedViewportChange: IEvent<{ start: number, end: number }>;
+  /**
+   * Fires on render
+   */
+  onRender: IEvent<{ start: number, end: number }>;
+  onRefreshRequest: IEvent<{ start: number, end: number }>;
+
+  dimensions: IRenderDimensions;
+
+  addRefreshCallback(callback: FrameRequestCallback): number;
+
+  refreshRows(start: number, end: number): void;
+  clearTextureAtlas(): void;
+  resize(cols: number, rows: number): void;
+  hasRenderer(): boolean;
+  setRenderer(renderer: IRenderer): void;
+  handleDevicePixelRatioChange(): void;
+  handleResize(cols: number, rows: number): void;
+  handleCharSizeChanged(): void;
+  handleBlur(): void;
+  handleFocus(): void;
+  handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
+  handleCursorMove(): void;
+  clear(): void;
+}
+
+export const ISelectionService = createDecorator<ISelectionService>('SelectionService');
+export interface ISelectionService {
+  serviceBrand: undefined;
+
+  readonly selectionText: string;
+  readonly hasSelection: boolean;
+  readonly selectionStart: [number, number] | undefined;
+  readonly selectionEnd: [number, number] | undefined;
+
+  readonly onLinuxMouseSelection: IEvent<string>;
+  readonly onRequestRedraw: IEvent<ISelectionRequestRedrawEvent>;
+  readonly onRequestScrollLines: IEvent<ISelectionRequestScrollLinesEvent>;
+  readonly onSelectionChange: IEvent<void>;
+
+  disable(): void;
+  enable(): void;
+  reset(): void;
+  setSelection(row: number, col: number, length: number): void;
+  selectAll(): void;
+  selectLines(start: number, end: number): void;
+  clearSelection(): void;
+  rightClickSelect(event: MouseEvent): void;
+  shouldColumnSelect(event: KeyboardEvent | MouseEvent): boolean;
+  shouldForceSelection(event: MouseEvent): boolean;
+  refresh(isLinuxMouseSelection?: boolean): void;
+  handleMouseDown(event: MouseEvent): void;
+  isCellInSelection(x: number, y: number): boolean;
+}
+
+export const ICharacterJoinerService = createDecorator<ICharacterJoinerService>('CharacterJoinerService');
+export interface ICharacterJoinerService {
+  serviceBrand: undefined;
+
+  register(handler: (text: string) => [number, number][]): number;
+  deregister(joinerId: number): boolean;
+  getJoinedCharacters(row: number): [number, number][];
+}
+
+export const IThemeService = createDecorator<IThemeService>('ThemeService');
+export interface IThemeService {
+  serviceBrand: undefined;
+
+  readonly colors: ReadonlyColorSet;
+
+  readonly onChangeColors: IEvent<ReadonlyColorSet>;
+
+  restoreColor(slot?: AllColorIndex): void;
+  /**
+   * Allows external modifying of colors in the theme, this is used instead of {@link colors} to
+   * prevent accidental writes.
+   */
+  modifyColors(callback: (colors: IColorSet) => void): void;
+}
+
+
+export const ILinkProviderService = createDecorator<ILinkProviderService>('LinkProviderService');
+export interface ILinkProviderService extends IDisposable {
+  serviceBrand: undefined;
+  readonly linkProviders: ReadonlyArray<ILinkProvider>;
+  registerLinkProvider(linkProvider: ILinkProvider): IDisposable;
+}
+export interface ILinkProvider {
+  provideLinks(y: number, callback: (links: ILink[] | undefined) => void): void;
+}

web/node_modules/@xterm/xterm/src/browser/services/ThemeService.ts

@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) 2022 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ColorContrastCache } from 'browser/ColorContrastCache';
+import { IThemeService } from 'browser/services/Services';
+import { IColorContrastCache, IColorSet, ReadonlyColorSet } from 'browser/Types';
+import { channels, color, css, NULL_COLOR } from 'common/Color';
+import { EventEmitter } from 'common/EventEmitter';
+import { Disposable } from 'common/Lifecycle';
+import { IOptionsService, ITheme } from 'common/services/Services';
+import { AllColorIndex, IColor, SpecialColorIndex } from 'common/Types';
+
+interface IRestoreColorSet {
+  foreground: IColor;
+  background: IColor;
+  cursor: IColor;
+  ansi: IColor[];
+}
+
+
+const DEFAULT_FOREGROUND = css.toColor('#ffffff');
+const DEFAULT_BACKGROUND = css.toColor('#000000');
+const DEFAULT_CURSOR = css.toColor('#ffffff');
+const DEFAULT_CURSOR_ACCENT = css.toColor('#000000');
+const DEFAULT_SELECTION = {
+  css: 'rgba(255, 255, 255, 0.3)',
+  rgba: 0xFFFFFF4D
+};
+
+// An IIFE to generate DEFAULT_ANSI_COLORS.
+export const DEFAULT_ANSI_COLORS = Object.freeze((() => {
+  const colors = [
+    // dark:
+    css.toColor('#2e3436'),
+    css.toColor('#cc0000'),
+    css.toColor('#4e9a06'),
+    css.toColor('#c4a000'),
+    css.toColor('#3465a4'),
+    css.toColor('#75507b'),
+    css.toColor('#06989a'),
+    css.toColor('#d3d7cf'),
+    // bright:
+    css.toColor('#555753'),
+    css.toColor('#ef2929'),
+    css.toColor('#8ae234'),
+    css.toColor('#fce94f'),
+    css.toColor('#729fcf'),
+    css.toColor('#ad7fa8'),
+    css.toColor('#34e2e2'),
+    css.toColor('#eeeeec')
+  ];
+
+  // Fill in the remaining 240 ANSI colors.
+  // Generate colors (16-231)
+  const v = [0x00, 0x5f, 0x87, 0xaf, 0xd7, 0xff];
+  for (let i = 0; i < 216; i++) {
+    const r = v[(i / 36) % 6 | 0];
+    const g = v[(i / 6) % 6 | 0];
+    const b = v[i % 6];
+    colors.push({
+      css: channels.toCss(r, g, b),
+      rgba: channels.toRgba(r, g, b)
+    });
+  }
+
+  // Generate greys (232-255)
+  for (let i = 0; i < 24; i++) {
+    const c = 8 + i * 10;
+    colors.push({
+      css: channels.toCss(c, c, c),
+      rgba: channels.toRgba(c, c, c)
+    });
+  }
+
+  return colors;
+})());
+
+export class ThemeService extends Disposable implements IThemeService {
+  public serviceBrand: undefined;
+
+  private _colors: IColorSet;
+  private _contrastCache: IColorContrastCache = new ColorContrastCache();
+  private _halfContrastCache: IColorContrastCache = new ColorContrastCache();
+  private _restoreColors!: IRestoreColorSet;
+
+  public get colors(): ReadonlyColorSet { return this._colors; }
+
+  private readonly _onChangeColors = this.register(new EventEmitter<ReadonlyColorSet>());
+  public readonly onChangeColors = this._onChangeColors.event;
+
+  constructor(
+    @IOptionsService private readonly _optionsService: IOptionsService
+  ) {
+    super();
+
+    this._colors = {
+      foreground: DEFAULT_FOREGROUND,
+      background: DEFAULT_BACKGROUND,
+      cursor: DEFAULT_CURSOR,
+      cursorAccent: DEFAULT_CURSOR_ACCENT,
+      selectionForeground: undefined,
+      selectionBackgroundTransparent: DEFAULT_SELECTION,
+      selectionBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
+      selectionInactiveBackgroundTransparent: DEFAULT_SELECTION,
+      selectionInactiveBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
+      ansi: DEFAULT_ANSI_COLORS.slice(),
+      contrastCache: this._contrastCache,
+      halfContrastCache: this._halfContrastCache
+    };
+    this._updateRestoreColors();
+    this._setTheme(this._optionsService.rawOptions.theme);
+
+    this.register(this._optionsService.onSpecificOptionChange('minimumContrastRatio', () => this._contrastCache.clear()));
+    this.register(this._optionsService.onSpecificOptionChange('theme', () => this._setTheme(this._optionsService.rawOptions.theme)));
+  }
+
+  /**
+   * Sets the terminal's theme.
+   * @param theme The  theme to use. If a partial theme is provided then default
+   * colors will be used where colors are not defined.
+   */
+  private _setTheme(theme: ITheme = {}): void {
+    const colors = this._colors;
+    colors.foreground = parseColor(theme.foreground, DEFAULT_FOREGROUND);
+    colors.background = parseColor(theme.background, DEFAULT_BACKGROUND);
+    colors.cursor = parseColor(theme.cursor, DEFAULT_CURSOR);
+    colors.cursorAccent = parseColor(theme.cursorAccent, DEFAULT_CURSOR_ACCENT);
+    colors.selectionBackgroundTransparent = parseColor(theme.selectionBackground, DEFAULT_SELECTION);
+    colors.selectionBackgroundOpaque = color.blend(colors.background, colors.selectionBackgroundTransparent);
+    colors.selectionInactiveBackgroundTransparent = parseColor(theme.selectionInactiveBackground, colors.selectionBackgroundTransparent);
+    colors.selectionInactiveBackgroundOpaque = color.blend(colors.background, colors.selectionInactiveBackgroundTransparent);
+    colors.selectionForeground = theme.selectionForeground ? parseColor(theme.selectionForeground, NULL_COLOR) : undefined;
+    if (colors.selectionForeground === NULL_COLOR) {
+      colors.selectionForeground = undefined;
+    }
+
+    /**
+     * If selection color is opaque, blend it with background with 0.3 opacity
+     * Issue #2737
+     */
+    if (color.isOpaque(colors.selectionBackgroundTransparent)) {
+      const opacity = 0.3;
+      colors.selectionBackgroundTransparent = color.opacity(colors.selectionBackgroundTransparent, opacity);
+    }
+    if (color.isOpaque(colors.selectionInactiveBackgroundTransparent)) {
+      const opacity = 0.3;
+      colors.selectionInactiveBackgroundTransparent = color.opacity(colors.selectionInactiveBackgroundTransparent, opacity);
+    }
+    colors.ansi = DEFAULT_ANSI_COLORS.slice();
+    colors.ansi[0] = parseColor(theme.black, DEFAULT_ANSI_COLORS[0]);
+    colors.ansi[1] = parseColor(theme.red, DEFAULT_ANSI_COLORS[1]);
+    colors.ansi[2] = parseColor(theme.green, DEFAULT_ANSI_COLORS[2]);
+    colors.ansi[3] = parseColor(theme.yellow, DEFAULT_ANSI_COLORS[3]);
+    colors.ansi[4] = parseColor(theme.blue, DEFAULT_ANSI_COLORS[4]);
+    colors.ansi[5] = parseColor(theme.magenta, DEFAULT_ANSI_COLORS[5]);
+    colors.ansi[6] = parseColor(theme.cyan, DEFAULT_ANSI_COLORS[6]);
+    colors.ansi[7] = parseColor(theme.white, DEFAULT_ANSI_COLORS[7]);
+    colors.ansi[8] = parseColor(theme.brightBlack, DEFAULT_ANSI_COLORS[8]);
+    colors.ansi[9] = parseColor(theme.brightRed, DEFAULT_ANSI_COLORS[9]);
+    colors.ansi[10] = parseColor(theme.brightGreen, DEFAULT_ANSI_COLORS[10]);
+    colors.ansi[11] = parseColor(theme.brightYellow, DEFAULT_ANSI_COLORS[11]);
+    colors.ansi[12] = parseColor(theme.brightBlue, DEFAULT_ANSI_COLORS[12]);
+    colors.ansi[13] = parseColor(theme.brightMagenta, DEFAULT_ANSI_COLORS[13]);
+    colors.ansi[14] = parseColor(theme.brightCyan, DEFAULT_ANSI_COLORS[14]);
+    colors.ansi[15] = parseColor(theme.brightWhite, DEFAULT_ANSI_COLORS[15]);
+    if (theme.extendedAnsi) {
+      const colorCount = Math.min(colors.ansi.length - 16, theme.extendedAnsi.length);
+      for (let i = 0; i < colorCount; i++) {
+        colors.ansi[i + 16] = parseColor(theme.extendedAnsi[i], DEFAULT_ANSI_COLORS[i + 16]);
+      }
+    }
+    // Clear our the cache
+    this._contrastCache.clear();
+    this._halfContrastCache.clear();
+    this._updateRestoreColors();
+    this._onChangeColors.fire(this.colors);
+  }
+
+  public restoreColor(slot?: AllColorIndex): void {
+    this._restoreColor(slot);
+    this._onChangeColors.fire(this.colors);
+  }
+
+  private _restoreColor(slot: AllColorIndex | undefined): void {
+    // unset slot restores all ansi colors
+    if (slot === undefined) {
+      for (let i = 0; i < this._restoreColors.ansi.length; ++i) {
+        this._colors.ansi[i] = this._restoreColors.ansi[i];
+      }
+      return;
+    }
+    switch (slot) {
+      case SpecialColorIndex.FOREGROUND:
+        this._colors.foreground = this._restoreColors.foreground;
+        break;
+      case SpecialColorIndex.BACKGROUND:
+        this._colors.background = this._restoreColors.background;
+        break;
+      case SpecialColorIndex.CURSOR:
+        this._colors.cursor = this._restoreColors.cursor;
+        break;
+      default:
+        this._colors.ansi[slot] = this._restoreColors.ansi[slot];
+    }
+  }
+
+  public modifyColors(callback: (colors: IColorSet) => void): void {
+    callback(this._colors);
+    // Assume the change happened
+    this._onChangeColors.fire(this.colors);
+  }
+
+  private _updateRestoreColors(): void {
+    this._restoreColors = {
+      foreground: this._colors.foreground,
+      background: this._colors.background,
+      cursor: this._colors.cursor,
+      ansi: this._colors.ansi.slice()
+    };
+  }
+}
+
+function parseColor(
+  cssString: string | undefined,
+  fallback: IColor
+): IColor {
+  if (cssString !== undefined) {
+    try {
+      return css.toColor(cssString);
+    } catch {
+      // no-op
+    }
+  }
+  return fallback;
+}

web/node_modules/@xterm/xterm/src/common/CircularList.ts

@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICircularList } from 'common/Types';
+import { EventEmitter } from 'common/EventEmitter';
+import { Disposable } from 'common/Lifecycle';
+
+export interface IInsertEvent {
+  index: number;
+  amount: number;
+}
+
+export interface IDeleteEvent {
+  index: number;
+  amount: number;
+}
+
+/**
+ * Represents a circular list; a list with a maximum size that wraps around when push is called,
+ * overriding values at the start of the list.
+ */
+export class CircularList<T> extends Disposable implements ICircularList<T> {
+  protected _array: (T | undefined)[];
+  private _startIndex: number;
+  private _length: number;
+
+  public readonly onDeleteEmitter = this.register(new EventEmitter<IDeleteEvent>());
+  public readonly onDelete = this.onDeleteEmitter.event;
+  public readonly onInsertEmitter = this.register(new EventEmitter<IInsertEvent>());
+  public readonly onInsert = this.onInsertEmitter.event;
+  public readonly onTrimEmitter = this.register(new EventEmitter<number>());
+  public readonly onTrim = this.onTrimEmitter.event;
+
+  constructor(
+    private _maxLength: number
+  ) {
+    super();
+    this._array = new Array<T>(this._maxLength);
+    this._startIndex = 0;
+    this._length = 0;
+  }
+
+  public get maxLength(): number {
+    return this._maxLength;
+  }
+
+  public set maxLength(newMaxLength: number) {
+    // There was no change in maxLength, return early.
+    if (this._maxLength === newMaxLength) {
+      return;
+    }
+
+    // Reconstruct array, starting at index 0. Only transfer values from the
+    // indexes 0 to length.
+    const newArray = new Array<T | undefined>(newMaxLength);
+    for (let i = 0; i < Math.min(newMaxLength, this.length); i++) {
+      newArray[i] = this._array[this._getCyclicIndex(i)];
+    }
+    this._array = newArray;
+    this._maxLength = newMaxLength;
+    this._startIndex = 0;
+  }
+
+  public get length(): number {
+    return this._length;
+  }
+
+  public set length(newLength: number) {
+    if (newLength > this._length) {
+      for (let i = this._length; i < newLength; i++) {
+        this._array[i] = undefined;
+      }
+    }
+    this._length = newLength;
+  }
+
+  /**
+   * Gets the value at an index.
+   *
+   * Note that for performance reasons there is no bounds checking here, the index reference is
+   * circular so this should always return a value and never throw.
+   * @param index The index of the value to get.
+   * @returns The value corresponding to the index.
+   */
+  public get(index: number): T | undefined {
+    return this._array[this._getCyclicIndex(index)];
+  }
+
+  /**
+   * Sets the value at an index.
+   *
+   * Note that for performance reasons there is no bounds checking here, the index reference is
+   * circular so this should always return a value and never throw.
+   * @param index The index to set.
+   * @param value The value to set.
+   */
+  public set(index: number, value: T | undefined): void {
+    this._array[this._getCyclicIndex(index)] = value;
+  }
+
+  /**
+   * Pushes a new value onto the list, wrapping around to the start of the array, overriding index 0
+   * if the maximum length is reached.
+   * @param value The value to push onto the list.
+   */
+  public push(value: T): void {
+    this._array[this._getCyclicIndex(this._length)] = value;
+    if (this._length === this._maxLength) {
+      this._startIndex = ++this._startIndex % this._maxLength;
+      this.onTrimEmitter.fire(1);
+    } else {
+      this._length++;
+    }
+  }
+
+  /**
+   * Advance ringbuffer index and return current element for recycling.
+   * Note: The buffer must be full for this method to work.
+   * @throws When the buffer is not full.
+   */
+  public recycle(): T {
+    if (this._length !== this._maxLength) {
+      throw new Error('Can only recycle when the buffer is full');
+    }
+    this._startIndex = ++this._startIndex % this._maxLength;
+    this.onTrimEmitter.fire(1);
+    return this._array[this._getCyclicIndex(this._length - 1)]!;
+  }
+
+  /**
+   * Ringbuffer is at max length.
+   */
+  public get isFull(): boolean {
+    return this._length === this._maxLength;
+  }
+
+  /**
+   * Removes and returns the last value on the list.
+   * @returns The popped value.
+   */
+  public pop(): T | undefined {
+    return this._array[this._getCyclicIndex(this._length-- - 1)];
+  }
+
+  /**
+   * Deletes and/or inserts items at a particular index (in that order). Unlike
+   * Array.prototype.splice, this operation does not return the deleted items as a new array in
+   * order to save creating a new array. Note that this operation may shift all values in the list
+   * in the worst case.
+   * @param start The index to delete and/or insert.
+   * @param deleteCount The number of elements to delete.
+   * @param items The items to insert.
+   */
+  public splice(start: number, deleteCount: number, ...items: T[]): void {
+    // Delete items
+    if (deleteCount) {
+      for (let i = start; i < this._length - deleteCount; i++) {
+        this._array[this._getCyclicIndex(i)] = this._array[this._getCyclicIndex(i + deleteCount)];
+      }
+      this._length -= deleteCount;
+      this.onDeleteEmitter.fire({ index: start, amount: deleteCount });
+    }
+
+    // Add items
+    for (let i = this._length - 1; i >= start; i--) {
+      this._array[this._getCyclicIndex(i + items.length)] = this._array[this._getCyclicIndex(i)];
+    }
+    for (let i = 0; i < items.length; i++) {
+      this._array[this._getCyclicIndex(start + i)] = items[i];
+    }
+    if (items.length) {
+      this.onInsertEmitter.fire({ index: start, amount: items.length });
+    }
+
+    // Adjust length as needed
+    if (this._length + items.length > this._maxLength) {
+      const countToTrim = (this._length + items.length) - this._maxLength;
+      this._startIndex += countToTrim;
+      this._length = this._maxLength;
+      this.onTrimEmitter.fire(countToTrim);
+    } else {
+      this._length += items.length;
+    }
+  }
+
+  /**
+   * Trims a number of items from the start of the list.
+   * @param count The number of items to remove.
+   */
+  public trimStart(count: number): void {
+    if (count > this._length) {
+      count = this._length;
+    }
+    this._startIndex += count;
+    this._length -= count;
+    this.onTrimEmitter.fire(count);
+  }
+
+  public shiftElements(start: number, count: number, offset: number): void {
+    if (count <= 0) {
+      return;
+    }
+    if (start < 0 || start >= this._length) {
+      throw new Error('start argument out of range');
+    }
+    if (start + offset < 0) {
+      throw new Error('Cannot shift elements in list beyond index 0');
+    }
+
+    if (offset > 0) {
+      for (let i = count - 1; i >= 0; i--) {
+        this.set(start + i + offset, this.get(start + i));
+      }
+      const expandListBy = (start + count + offset) - this._length;
+      if (expandListBy > 0) {
+        this._length += expandListBy;
+        while (this._length > this._maxLength) {
+          this._length--;
+          this._startIndex++;
+          this.onTrimEmitter.fire(1);
+        }
+      }
+    } else {
+      for (let i = 0; i < count; i++) {
+        this.set(start + i + offset, this.get(start + i));
+      }
+    }
+  }
+
+  /**
+   * Gets the cyclic index for the specified regular index. The cyclic index can then be used on the
+   * backing array to get the element associated with the regular index.
+   * @param index The regular index.
+   * @returns The cyclic index.
+   */
+  private _getCyclicIndex(index: number): number {
+    return (this._startIndex + index) % this._maxLength;
+  }
+}

web/node_modules/@xterm/xterm/src/common/Clone.ts

@@ -0,0 +1,23 @@
+/**
+ * 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;
+}

web/node_modules/@xterm/xterm/src/common/Color.ts

@@ -0,0 +1,376 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IColor, IColorRGB } from 'common/Types';
+
+let $r = 0;
+let $g = 0;
+let $b = 0;
+let $a = 0;
+
+export const NULL_COLOR: IColor = {
+  css: '#00000000',
+  rgba: 0
+};
+
+/**
+ * Helper functions where the source type is "channels" (individual color channels as numbers).
+ */
+export namespace channels {
+  export function toCss(r: number, g: number, b: number, a?: number): string {
+    if (a !== undefined) {
+      return `#${toPaddedHex(r)}${toPaddedHex(g)}${toPaddedHex(b)}${toPaddedHex(a)}`;
+    }
+    return `#${toPaddedHex(r)}${toPaddedHex(g)}${toPaddedHex(b)}`;
+  }
+
+  export function toRgba(r: number, g: number, b: number, a: number = 0xFF): number {
+    // Note: The aggregated number is RGBA32 (BE), thus needs to be converted to ABGR32
+    // on LE systems, before it can be used for direct 32-bit buffer writes.
+    // >>> 0 forces an unsigned int
+    return (r << 24 | g << 16 | b << 8 | a) >>> 0;
+  }
+
+  export function toColor(r: number, g: number, b: number, a?: number): IColor {
+    return {
+      css: channels.toCss(r, g, b, a),
+      rgba: channels.toRgba(r, g, b, a)
+    };
+  }
+}
+
+/**
+ * Helper functions where the source type is `IColor`.
+ */
+export namespace color {
+  export function blend(bg: IColor, fg: IColor): IColor {
+    $a = (fg.rgba & 0xFF) / 255;
+    if ($a === 1) {
+      return {
+        css: fg.css,
+        rgba: fg.rgba
+      };
+    }
+    const fgR = (fg.rgba >> 24) & 0xFF;
+    const fgG = (fg.rgba >> 16) & 0xFF;
+    const fgB = (fg.rgba >> 8) & 0xFF;
+    const bgR = (bg.rgba >> 24) & 0xFF;
+    const bgG = (bg.rgba >> 16) & 0xFF;
+    const bgB = (bg.rgba >> 8) & 0xFF;
+    $r = bgR + Math.round((fgR - bgR) * $a);
+    $g = bgG + Math.round((fgG - bgG) * $a);
+    $b = bgB + Math.round((fgB - bgB) * $a);
+    const css = channels.toCss($r, $g, $b);
+    const rgba = channels.toRgba($r, $g, $b);
+    return { css, rgba };
+  }
+
+  export function isOpaque(color: IColor): boolean {
+    return (color.rgba & 0xFF) === 0xFF;
+  }
+
+  export function ensureContrastRatio(bg: IColor, fg: IColor, ratio: number): IColor | undefined {
+    const result = rgba.ensureContrastRatio(bg.rgba, fg.rgba, ratio);
+    if (!result) {
+      return undefined;
+    }
+    return channels.toColor(
+      (result >> 24 & 0xFF),
+      (result >> 16 & 0xFF),
+      (result >> 8  & 0xFF)
+    );
+  }
+
+  export function opaque(color: IColor): IColor {
+    const rgbaColor = (color.rgba | 0xFF) >>> 0;
+    [$r, $g, $b] = rgba.toChannels(rgbaColor);
+    return {
+      css: channels.toCss($r, $g, $b),
+      rgba: rgbaColor
+    };
+  }
+
+  export function opacity(color: IColor, opacity: number): IColor {
+    $a = Math.round(opacity * 0xFF);
+    [$r, $g, $b] = rgba.toChannels(color.rgba);
+    return {
+      css: channels.toCss($r, $g, $b, $a),
+      rgba: channels.toRgba($r, $g, $b, $a)
+    };
+  }
+
+  export function multiplyOpacity(color: IColor, factor: number): IColor {
+    $a = color.rgba & 0xFF;
+    return opacity(color, ($a * factor) / 0xFF);
+  }
+
+  export function toColorRGB(color: IColor): IColorRGB {
+    return [(color.rgba >> 24) & 0xFF, (color.rgba >> 16) & 0xFF, (color.rgba >> 8) & 0xFF];
+  }
+}
+
+/**
+ * Helper functions where the source type is "css" (string: '#rgb', '#rgba', '#rrggbb',
+ * '#rrggbbaa').
+ */
+export namespace css {
+  // Attempt to set get the shared canvas context
+  let $ctx: CanvasRenderingContext2D | undefined;
+  let $litmusColor: CanvasGradient | undefined;
+  try {
+    // This is guaranteed to run in the first window, so document should be correct
+    const canvas = document.createElement('canvas');
+    canvas.width = 1;
+    canvas.height = 1;
+    const ctx = canvas.getContext('2d', {
+      willReadFrequently: true
+    });
+    if (ctx) {
+      $ctx = ctx;
+      $ctx.globalCompositeOperation = 'copy';
+      $litmusColor = $ctx.createLinearGradient(0, 0, 1, 1);
+    }
+  }
+  catch {
+    // noop
+  }
+
+  /**
+   * Converts a css string to an IColor, this should handle all valid CSS color strings and will
+   * throw if it's invalid. The ideal format to use is `#rrggbb[aa]` as it's the fastest to parse.
+   *
+   * Only `#rgb[a]`, `#rrggbb[aa]`, `rgb()` and `rgba()` formats are supported when run in a Node
+   * environment.
+   */
+  export function toColor(css: string): IColor {
+    // Formats: #rgb[a] and #rrggbb[aa]
+    if (css.match(/#[\da-f]{3,8}/i)) {
+      switch (css.length) {
+        case 4: { // #rgb
+          $r = parseInt(css.slice(1, 2).repeat(2), 16);
+          $g = parseInt(css.slice(2, 3).repeat(2), 16);
+          $b = parseInt(css.slice(3, 4).repeat(2), 16);
+          return channels.toColor($r, $g, $b);
+        }
+        case 5: { // #rgba
+          $r = parseInt(css.slice(1, 2).repeat(2), 16);
+          $g = parseInt(css.slice(2, 3).repeat(2), 16);
+          $b = parseInt(css.slice(3, 4).repeat(2), 16);
+          $a = parseInt(css.slice(4, 5).repeat(2), 16);
+          return channels.toColor($r, $g, $b, $a);
+        }
+        case 7: // #rrggbb
+          return {
+            css,
+            rgba: (parseInt(css.slice(1), 16) << 8 | 0xFF) >>> 0
+          };
+        case 9: // #rrggbbaa
+          return {
+            css,
+            rgba: parseInt(css.slice(1), 16) >>> 0
+          };
+      }
+    }
+
+    // Formats: rgb() or rgba()
+    const rgbaMatch = css.match(/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(,\s*(0|1|\d?\.(\d+))\s*)?\)/);
+    if (rgbaMatch) {
+      $r = parseInt(rgbaMatch[1]);
+      $g = parseInt(rgbaMatch[2]);
+      $b = parseInt(rgbaMatch[3]);
+      $a = Math.round((rgbaMatch[5] === undefined ? 1 : parseFloat(rgbaMatch[5])) * 0xFF);
+      return channels.toColor($r, $g, $b, $a);
+    }
+
+    // Validate the context is available for canvas-based color parsing
+    if (!$ctx || !$litmusColor) {
+      throw new Error('css.toColor: Unsupported css format');
+    }
+
+    // Validate the color using canvas fillStyle
+    // See https://html.spec.whatwg.org/multipage/canvas.html#fill-and-stroke-styles
+    $ctx.fillStyle = $litmusColor;
+    $ctx.fillStyle = css;
+    if (typeof $ctx.fillStyle !== 'string') {
+      throw new Error('css.toColor: Unsupported css format');
+    }
+
+    $ctx.fillRect(0, 0, 1, 1);
+    [$r, $g, $b, $a] = $ctx.getImageData(0, 0, 1, 1).data;
+
+    // Validate the color is non-transparent as color hue gets lost when drawn to the canvas
+    if ($a !== 0xFF) {
+      throw new Error('css.toColor: Unsupported css format');
+    }
+
+    // Extract the color from the canvas' fillStyle property which exposes the color value in rgba()
+    // format
+    // See https://html.spec.whatwg.org/multipage/canvas.html#serialisation-of-a-color
+    return {
+      rgba: channels.toRgba($r, $g, $b, $a),
+      css
+    };
+  }
+}
+
+/**
+ * Helper functions where the source type is "rgb" (number: 0xrrggbb).
+ */
+export namespace rgb {
+  /**
+   * Gets the relative luminance of an RGB color, this is useful in determining the contrast ratio
+   * between two colors.
+   * @param rgb The color to use.
+   * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
+   */
+  export function relativeLuminance(rgb: number): number {
+    return relativeLuminance2(
+      (rgb >> 16) & 0xFF,
+      (rgb >> 8 ) & 0xFF,
+      (rgb      ) & 0xFF);
+  }
+
+  /**
+   * Gets the relative luminance of an RGB color, this is useful in determining the contrast ratio
+   * between two colors.
+   * @param r The red channel (0x00 to 0xFF).
+   * @param g The green channel (0x00 to 0xFF).
+   * @param b The blue channel (0x00 to 0xFF).
+   * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
+   */
+  export function relativeLuminance2(r: number, g: number, b: number): number {
+    const rs = r / 255;
+    const gs = g / 255;
+    const bs = b / 255;
+    const rr = rs <= 0.03928 ? rs / 12.92 : Math.pow((rs + 0.055) / 1.055, 2.4);
+    const rg = gs <= 0.03928 ? gs / 12.92 : Math.pow((gs + 0.055) / 1.055, 2.4);
+    const rb = bs <= 0.03928 ? bs / 12.92 : Math.pow((bs + 0.055) / 1.055, 2.4);
+    return rr * 0.2126 + rg * 0.7152 + rb * 0.0722;
+  }
+}
+
+/**
+ * Helper functions where the source type is "rgba" (number: 0xrrggbbaa).
+ */
+export namespace rgba {
+  export function blend(bg: number, fg: number): number {
+    $a = (fg & 0xFF) / 0xFF;
+    if ($a === 1) {
+      return fg;
+    }
+    const fgR = (fg >> 24) & 0xFF;
+    const fgG = (fg >> 16) & 0xFF;
+    const fgB = (fg >> 8) & 0xFF;
+    const bgR = (bg >> 24) & 0xFF;
+    const bgG = (bg >> 16) & 0xFF;
+    const bgB = (bg >> 8) & 0xFF;
+    $r = bgR + Math.round((fgR - bgR) * $a);
+    $g = bgG + Math.round((fgG - bgG) * $a);
+    $b = bgB + Math.round((fgB - bgB) * $a);
+    return channels.toRgba($r, $g, $b);
+  }
+
+  /**
+   * Given a foreground color and a background color, either increase or reduce the luminance of the
+   * foreground color until the specified contrast ratio is met. If pure white or black is hit
+   * without the contrast ratio being met, go the other direction using the background color as the
+   * foreground color and take either the first or second result depending on which has the higher
+   * contrast ratio.
+   *
+   * `undefined` will be returned if the contrast ratio is already met.
+   *
+   * @param bgRgba The background color in rgba format.
+   * @param fgRgba The foreground color in rgba format.
+   * @param ratio The contrast ratio to achieve.
+   */
+  export function ensureContrastRatio(bgRgba: number, fgRgba: number, ratio: number): number | undefined {
+    const bgL = rgb.relativeLuminance(bgRgba >> 8);
+    const fgL = rgb.relativeLuminance(fgRgba >> 8);
+    const cr = contrastRatio(bgL, fgL);
+    if (cr < ratio) {
+      if (fgL < bgL) {
+        const resultA = reduceLuminance(bgRgba, fgRgba, ratio);
+        const resultARatio = contrastRatio(bgL, rgb.relativeLuminance(resultA >> 8));
+        if (resultARatio < ratio) {
+          const resultB = increaseLuminance(bgRgba, fgRgba, ratio);
+          const resultBRatio = contrastRatio(bgL, rgb.relativeLuminance(resultB >> 8));
+          return resultARatio > resultBRatio ? resultA : resultB;
+        }
+        return resultA;
+      }
+      const resultA = increaseLuminance(bgRgba, fgRgba, ratio);
+      const resultARatio = contrastRatio(bgL, rgb.relativeLuminance(resultA >> 8));
+      if (resultARatio < ratio) {
+        const resultB = reduceLuminance(bgRgba, fgRgba, ratio);
+        const resultBRatio = contrastRatio(bgL, rgb.relativeLuminance(resultB >> 8));
+        return resultARatio > resultBRatio ? resultA : resultB;
+      }
+      return resultA;
+    }
+    return undefined;
+  }
+
+  export function reduceLuminance(bgRgba: number, fgRgba: number, ratio: number): number {
+    // This is a naive but fast approach to reducing luminance as converting to
+    // HSL and back is expensive
+    const bgR = (bgRgba >> 24) & 0xFF;
+    const bgG = (bgRgba >> 16) & 0xFF;
+    const bgB = (bgRgba >>  8) & 0xFF;
+    let fgR = (fgRgba >> 24) & 0xFF;
+    let fgG = (fgRgba >> 16) & 0xFF;
+    let fgB = (fgRgba >>  8) & 0xFF;
+    let cr = contrastRatio(rgb.relativeLuminance2(fgR, fgG, fgB), rgb.relativeLuminance2(bgR, bgG, bgB));
+    while (cr < ratio && (fgR > 0 || fgG > 0 || fgB > 0)) {
+      // Reduce by 10% until the ratio is hit
+      fgR -= Math.max(0, Math.ceil(fgR * 0.1));
+      fgG -= Math.max(0, Math.ceil(fgG * 0.1));
+      fgB -= Math.max(0, Math.ceil(fgB * 0.1));
+      cr = contrastRatio(rgb.relativeLuminance2(fgR, fgG, fgB), rgb.relativeLuminance2(bgR, bgG, bgB));
+    }
+    return (fgR << 24 | fgG << 16 | fgB << 8 | 0xFF) >>> 0;
+  }
+
+  export function increaseLuminance(bgRgba: number, fgRgba: number, ratio: number): number {
+    // This is a naive but fast approach to increasing luminance as converting to
+    // HSL and back is expensive
+    const bgR = (bgRgba >> 24) & 0xFF;
+    const bgG = (bgRgba >> 16) & 0xFF;
+    const bgB = (bgRgba >>  8) & 0xFF;
+    let fgR = (fgRgba >> 24) & 0xFF;
+    let fgG = (fgRgba >> 16) & 0xFF;
+    let fgB = (fgRgba >>  8) & 0xFF;
+    let cr = contrastRatio(rgb.relativeLuminance2(fgR, fgG, fgB), rgb.relativeLuminance2(bgR, bgG, bgB));
+    while (cr < ratio && (fgR < 0xFF || fgG < 0xFF || fgB < 0xFF)) {
+      // Increase by 10% until the ratio is hit
+      fgR = Math.min(0xFF, fgR + Math.ceil((255 - fgR) * 0.1));
+      fgG = Math.min(0xFF, fgG + Math.ceil((255 - fgG) * 0.1));
+      fgB = Math.min(0xFF, fgB + Math.ceil((255 - fgB) * 0.1));
+      cr = contrastRatio(rgb.relativeLuminance2(fgR, fgG, fgB), rgb.relativeLuminance2(bgR, bgG, bgB));
+    }
+    return (fgR << 24 | fgG << 16 | fgB << 8 | 0xFF) >>> 0;
+  }
+
+  export function toChannels(value: number): [number, number, number, number] {
+    return [(value >> 24) & 0xFF, (value >> 16) & 0xFF, (value >> 8) & 0xFF, value & 0xFF];
+  }
+}
+
+export function toPaddedHex(c: number): string {
+  const s = c.toString(16);
+  return s.length < 2 ? '0' + s : s;
+}
+
+/**
+ * Gets the contrast ratio between two relative luminance values.
+ * @param l1 The first relative luminance.
+ * @param l2 The first relative luminance.
+ * @see https://www.w3.org/TR/WCAG20/#contrast-ratiodef
+ */
+export function contrastRatio(l1: number, l2: number): number {
+  if (l1 < l2) {
+    return (l2 + 0.05) / (l1 + 0.05);
+  }
+  return (l1 + 0.05) / (l2 + 0.05);
+}

web/node_modules/@xterm/xterm/src/common/CoreTerminal.ts

@@ -0,0 +1,289 @@
+/**
+ * Copyright (c) 2014-2020 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+ * @license MIT
+ *
+ * Originally forked from (with the author's permission):
+ *   Fabrice Bellard's javascript vt100 for jslinux:
+ *   http://bellard.org/jslinux/
+ *   Copyright (c) 2011 Fabrice Bellard
+ *   The original design remains. The terminal itself
+ *   has been extended to include xterm CSI codes, among
+ *   other features.
+ *
+ * Terminal Emulation References:
+ *   http://vt100.net/
+ *   http://invisible-island.net/xterm/ctlseqs/ctlseqs.txt
+ *   http://invisible-island.net/xterm/ctlseqs/ctlseqs.html
+ *   http://invisible-island.net/vttest/
+ *   http://www.inwap.com/pdp10/ansicode.txt
+ *   http://linux.die.net/man/4/console_codes
+ *   http://linux.die.net/man/7/urxvt
+ */
+
+import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
+import { IInstantiationService, IOptionsService, IBufferService, ILogService, ICharsetService, ICoreService, ICoreMouseService, 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 { OptionsService } from 'common/services/OptionsService';
+import { IDisposable, IAttributeData, ICoreTerminal, IScrollEvent, ScrollSource } from 'common/Types';
+import { CoreService } from 'common/services/CoreService';
+import { EventEmitter, IEvent, forwardEvent } from 'common/EventEmitter';
+import { CoreMouseService } from 'common/services/CoreMouseService';
+import { UnicodeService } from 'common/services/UnicodeService';
+import { CharsetService } from 'common/services/CharsetService';
+import { updateWindowsModeWrappedState } from 'common/WindowsMode';
+import { IFunctionIdentifier, IParams } from 'common/parser/Types';
+import { IBufferSet } from 'common/buffer/Types';
+import { InputHandler } from 'common/InputHandler';
+import { WriteBuffer } from 'common/input/WriteBuffer';
+import { OscLinkService } from 'common/services/OscLinkService';
+
+// Only trigger this warning a single time per session
+let hasWriteSyncWarnHappened = false;
+
+export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
+  protected readonly _instantiationService: IInstantiationService;
+  protected readonly _bufferService: IBufferService;
+  protected readonly _logService: ILogService;
+  protected readonly _charsetService: ICharsetService;
+  protected readonly _oscLinkService: IOscLinkService;
+
+  public readonly coreMouseService: ICoreMouseService;
+  public readonly coreService: ICoreService;
+  public readonly unicodeService: IUnicodeService;
+  public readonly optionsService: IOptionsService;
+
+  protected _inputHandler: InputHandler;
+  private _writeBuffer: WriteBuffer;
+  private _windowsWrappingHeuristics = this.register(new MutableDisposable());
+
+  private readonly _onBinary = this.register(new EventEmitter<string>());
+  public readonly onBinary = this._onBinary.event;
+  private readonly _onData = this.register(new EventEmitter<string>());
+  public readonly onData = this._onData.event;
+  protected _onLineFeed = this.register(new EventEmitter<void>());
+  public readonly onLineFeed = this._onLineFeed.event;
+  private readonly _onResize = this.register(new EventEmitter<{ cols: number, rows: number }>());
+  public readonly onResize = this._onResize.event;
+  protected readonly _onWriteParsed = this.register(new EventEmitter<void>());
+  public readonly onWriteParsed = this._onWriteParsed.event;
+
+  /**
+   * Internally we track the source of the scroll but this is meaningless outside the library so
+   * it's filtered out.
+   */
+  protected _onScrollApi?: EventEmitter<number, void>;
+  protected _onScroll = this.register(new EventEmitter<IScrollEvent, void>());
+  public get onScroll(): IEvent<number, void> {
+    if (!this._onScrollApi) {
+      this._onScrollApi = this.register(new EventEmitter<number, void>());
+      this._onScroll.event(ev => {
+        this._onScrollApi?.fire(ev.position);
+      });
+    }
+    return this._onScrollApi.event;
+  }
+
+  public get cols(): number { return this._bufferService.cols; }
+  public get rows(): number { return this._bufferService.rows; }
+  public get buffers(): IBufferSet { return this._bufferService.buffers; }
+  public get options(): Required<ITerminalOptions> { return this.optionsService.options; }
+  public set options(options: ITerminalOptions) {
+    for (const key in options) {
+      this.optionsService.options[key] = options[key];
+    }
+  }
+
+  constructor(
+    options: Partial<ITerminalOptions>
+  ) {
+    super();
+
+    // Setup and initialize services
+    this._instantiationService = new InstantiationService();
+    this.optionsService = this.register(new OptionsService(options));
+    this._instantiationService.setService(IOptionsService, this.optionsService);
+    this._bufferService = this.register(this._instantiationService.createInstance(BufferService));
+    this._instantiationService.setService(IBufferService, this._bufferService);
+    this._logService = this.register(this._instantiationService.createInstance(LogService));
+    this._instantiationService.setService(ILogService, this._logService);
+    this.coreService = this.register(this._instantiationService.createInstance(CoreService));
+    this._instantiationService.setService(ICoreService, this.coreService);
+    this.coreMouseService = this.register(this._instantiationService.createInstance(CoreMouseService));
+    this._instantiationService.setService(ICoreMouseService, this.coreMouseService);
+    this.unicodeService = this.register(this._instantiationService.createInstance(UnicodeService));
+    this._instantiationService.setService(IUnicodeService, this.unicodeService);
+    this._charsetService = this._instantiationService.createInstance(CharsetService);
+    this._instantiationService.setService(ICharsetService, this._charsetService);
+    this._oscLinkService = this._instantiationService.createInstance(OscLinkService);
+    this._instantiationService.setService(IOscLinkService, this._oscLinkService);
+
+
+    // Register input handler and handle/forward events
+    this._inputHandler = this.register(new InputHandler(this._bufferService, this._charsetService, this.coreService, this._logService, this.optionsService, this._oscLinkService, this.coreMouseService, this.unicodeService));
+    this.register(forwardEvent(this._inputHandler.onLineFeed, this._onLineFeed));
+    this.register(this._inputHandler);
+
+    // Setup listeners
+    this.register(forwardEvent(this._bufferService.onResize, this._onResize));
+    this.register(forwardEvent(this.coreService.onData, this._onData));
+    this.register(forwardEvent(this.coreService.onBinary, this._onBinary));
+    this.register(this.coreService.onRequestScrollToBottom(() => this.scrollToBottom()));
+    this.register(this.coreService.onUserInput(() =>  this._writeBuffer.handleUserInput()));
+    this.register(this.optionsService.onMultipleOptionChange(['windowsMode', 'windowsPty'], () => this._handleWindowsPtyOptionChange()));
+    this.register(this._bufferService.onScroll(event => {
+      this._onScroll.fire({ position: this._bufferService.buffer.ydisp, source: ScrollSource.TERMINAL });
+      this._inputHandler.markRangeDirty(this._bufferService.buffer.scrollTop, this._bufferService.buffer.scrollBottom);
+    }));
+    this.register(this._inputHandler.onScroll(event => {
+      this._onScroll.fire({ position: this._bufferService.buffer.ydisp, source: ScrollSource.TERMINAL });
+      this._inputHandler.markRangeDirty(this._bufferService.buffer.scrollTop, this._bufferService.buffer.scrollBottom);
+    }));
+
+    // Setup WriteBuffer
+    this._writeBuffer = this.register(new WriteBuffer((data, promiseResult) => this._inputHandler.parse(data, promiseResult)));
+    this.register(forwardEvent(this._writeBuffer.onWriteParsed, this._onWriteParsed));
+  }
+
+  public write(data: string | Uint8Array, callback?: () => void): void {
+    this._writeBuffer.write(data, callback);
+  }
+
+  /**
+   * Write data to terminal synchonously.
+   *
+   * This method is unreliable with async parser handlers, thus should not
+   * be used anymore. If you need blocking semantics on data input consider
+   * `write` with a callback instead.
+   *
+   * @deprecated Unreliable, will be removed soon.
+   */
+  public writeSync(data: string | Uint8Array, maxSubsequentCalls?: number): void {
+    if (this._logService.logLevel <= LogLevelEnum.WARN && !hasWriteSyncWarnHappened) {
+      this._logService.warn('writeSync is unreliable and will be removed soon.');
+      hasWriteSyncWarnHappened = true;
+    }
+    this._writeBuffer.writeSync(data, maxSubsequentCalls);
+  }
+
+  public input(data: string, wasUserInput: boolean = true): void {
+    this.coreService.triggerDataEvent(data, wasUserInput);
+  }
+
+  public resize(x: number, y: number): void {
+    if (isNaN(x) || isNaN(y)) {
+      return;
+    }
+
+    x = Math.max(x, MINIMUM_COLS);
+    y = Math.max(y, MINIMUM_ROWS);
+
+    this._bufferService.resize(x, y);
+  }
+
+  /**
+   * Scroll the terminal down 1 row, creating a blank line.
+   * @param eraseAttr The attribute data to use the for blank line.
+   * @param isWrapped Whether the new line is wrapped from the previous line.
+   */
+  public scroll(eraseAttr: IAttributeData, isWrapped: boolean = false): void {
+    this._bufferService.scroll(eraseAttr, isWrapped);
+  }
+
+  /**
+   * Scroll the display of the terminal
+   * @param disp The number of lines to scroll down (negative scroll up).
+   * @param suppressScrollEvent Don't emit the scroll event as scrollLines. This is used to avoid
+   * unwanted events being handled by the viewport when the event was triggered from the viewport
+   * originally.
+   * @param source Which component the event came from.
+   */
+  public scrollLines(disp: number, suppressScrollEvent?: boolean, source?: ScrollSource): void {
+    this._bufferService.scrollLines(disp, suppressScrollEvent, source);
+  }
+
+  public scrollPages(pageCount: number): void {
+    this.scrollLines(pageCount * (this.rows - 1));
+  }
+
+  public scrollToTop(): void {
+    this.scrollLines(-this._bufferService.buffer.ydisp);
+  }
+
+  public scrollToBottom(): void {
+    this.scrollLines(this._bufferService.buffer.ybase - this._bufferService.buffer.ydisp);
+  }
+
+  public scrollToLine(line: number): void {
+    const scrollAmount = line - this._bufferService.buffer.ydisp;
+    if (scrollAmount !== 0) {
+      this.scrollLines(scrollAmount);
+    }
+  }
+
+  /** Add handler for ESC escape sequence. See xterm.d.ts for details. */
+  public registerEscHandler(id: IFunctionIdentifier, callback: () => boolean | Promise<boolean>): IDisposable {
+    return this._inputHandler.registerEscHandler(id, callback);
+  }
+
+  /** Add handler for DCS escape sequence. See xterm.d.ts for details. */
+  public registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: IParams) => boolean | Promise<boolean>): IDisposable {
+    return this._inputHandler.registerDcsHandler(id, callback);
+  }
+
+  /** Add handler for CSI escape sequence. See xterm.d.ts for details. */
+  public registerCsiHandler(id: IFunctionIdentifier, callback: (params: IParams) => boolean | Promise<boolean>): IDisposable {
+    return this._inputHandler.registerCsiHandler(id, callback);
+  }
+
+  /** Add handler for OSC escape sequence. See xterm.d.ts for details. */
+  public registerOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
+    return this._inputHandler.registerOscHandler(ident, callback);
+  }
+
+  protected _setup(): void {
+    this._handleWindowsPtyOptionChange();
+  }
+
+  public reset(): void {
+    this._inputHandler.reset();
+    this._bufferService.reset();
+    this._charsetService.reset();
+    this.coreService.reset();
+    this.coreMouseService.reset();
+  }
+
+
+  private _handleWindowsPtyOptionChange(): void {
+    let value = false;
+    const windowsPty = this.optionsService.rawOptions.windowsPty;
+    if (windowsPty && windowsPty.buildNumber !== undefined && windowsPty.buildNumber !== undefined) {
+      value = !!(windowsPty.backend === 'conpty' && windowsPty.buildNumber < 21376);
+    } else if (this.optionsService.rawOptions.windowsMode) {
+      value = true;
+    }
+    if (value) {
+      this._enableWindowsWrappingHeuristics();
+    } else {
+      this._windowsWrappingHeuristics.clear();
+    }
+  }
+
+  protected _enableWindowsWrappingHeuristics(): void {
+    if (!this._windowsWrappingHeuristics.value) {
+      const disposables: IDisposable[] = [];
+      disposables.push(this.onLineFeed(updateWindowsModeWrappedState.bind(null, this._bufferService)));
+      disposables.push(this.registerCsiHandler({ final: 'H' }, () => {
+        updateWindowsModeWrappedState(this._bufferService);
+        return false;
+      }));
+      this._windowsWrappingHeuristics.value = toDisposable(() => {
+        for (const d of disposables) {
+          d.dispose();
+        }
+      });
+    }
+  }
+}