@difizen/libro-terminal 0.1.0

package/src/protocol.ts

@@ -0,0 +1,102 @@
+import type { JSONPrimitive } from '@difizen/libro-common';
+
+import type { TerminalConnection } from './connection.js';
+
+/**
+ * The server model for a terminal session.
+ */
+export interface TerminalModel {
+  /**
+   * The name of the terminal session.
+   */
+  readonly name: string;
+}
+
+export interface TerminalOption {
+  name?: string;
+  /**
+   * Current working directory.
+   */
+  cwd?: string;
+}
+
+export const TerminalOption = Symbol('TerminalOption');
+
+export const TerminalConnectionFactory = Symbol('TerminalConnectionFactory');
+export type TerminalConnectionFactory = (options: TerminalOption) => TerminalConnection;
+
+/**
+ * A message from the terminal session.
+ */
+export interface TerminalMessage {
+  /**
+   * The type of the message.
+   */
+  readonly type: TerminalMessageType;
+
+  /**
+   * The content of the message.
+   */
+  readonly content?: JSONPrimitive[];
+}
+
+/**
+ * Valid message types for the terminal.
+ */
+export type TerminalMessageType = 'stdout' | 'disconnect' | 'set_size' | 'stdin';
+
+export type TerminalConnectionStatus = 'connected' | 'connecting' | 'disconnected';
+
+export interface TerminalViewOption extends TerminalOption {
+  name: string;
+  /**
+   * Human readable terminal representation on the UI.
+   */
+  readonly title?: string;
+
+  initialCommand?: string;
+
+  /**
+   * Path to the executable shell. For example: `/bin/bash`, `bash`, `sh`.
+   */
+  readonly shellPath?: string;
+
+  /**
+   * Shell arguments to executable shell, for example: [`-l`] - without login.
+   */
+  readonly shellArgs?: string[];
+
+  /**
+   * Environment variables for terminal.
+   */
+  readonly env?: { [key: string]: string | null };
+
+  /**
+   * In case `destroyTermOnClose` is true - terminal process will be destroyed on close terminal widget, otherwise will be kept
+   * alive.
+   */
+  readonly destroyOnClose?: boolean;
+
+  /**
+   * Terminal server side can send to the client `terminal title` to display this value on the UI. If
+   * useServerTitle = true then display this title, otherwise display title defined by 'title' argument.
+   */
+  readonly useServerTitle?: boolean;
+
+  /**
+   * Whether it is a pseudo terminal where an extension controls its input and output.
+   */
+  readonly isPseudoTerminal?: boolean;
+
+  /**
+   * Terminal attributes. Can be useful to apply some implementation specific information.
+   */
+  readonly attributes?: { [key: string]: string | null };
+
+  /**
+   * Terminal kind that indicates whether a terminal is created by a user or by some extension for a user
+   */
+  readonly kind?: 'user' | string;
+}
+
+export const TerminalViewOption = Symbol('TerminalViewOption');

package/src/restapi.ts

@@ -0,0 +1,75 @@
+import { URL } from '@difizen/libro-common';
+import type { ISettings } from '@difizen/libro-kernel';
+import { createResponseError } from '@difizen/libro-kernel';
+import { ServerConnection } from '@difizen/libro-kernel';
+import { inject, singleton } from '@difizen/mana-app';
+
+import type { TerminalModel, TerminalOption } from './protocol.js';
+
+export const TERMINAL_SERVICE_URL = 'api/terminals';
+
+@singleton()
+export class TerminalRestAPI {
+  @inject(ServerConnection) serverConnection: ServerConnection;
+
+  async startNew(
+    options: TerminalOption,
+    serverSettings?: Partial<ISettings>,
+  ): Promise<TerminalModel> {
+    const settings = { ...this.serverConnection.settings, ...serverSettings };
+    const url = URL.join(settings.baseUrl, TERMINAL_SERVICE_URL);
+    const init = {
+      method: 'POST',
+      body: JSON.stringify(options),
+    };
+    const response = await this.serverConnection.makeRequest(url, init, settings);
+
+    if (response.status !== 201) {
+      const err = await createResponseError(response);
+      throw err;
+    }
+    const data = await response.json();
+    return data;
+  }
+
+  async listRunning(serverSettings?: Partial<ISettings>): Promise<TerminalModel[]> {
+    const settings = { ...this.serverConnection.settings, ...serverSettings };
+    const url = URL.join(settings.baseUrl, TERMINAL_SERVICE_URL);
+    const response = await this.serverConnection.makeRequest(url, {}, settings);
+    if (response.status !== 200) {
+      const err = await createResponseError(response);
+      throw err;
+    }
+    const data = await response.json();
+
+    if (!Array.isArray(data)) {
+      throw new Error('Invalid Session list');
+    }
+    return data;
+  }
+
+  async shutdown(name: string, serverSettings?: Partial<ISettings>): Promise<void> {
+    if (!name) {
+      console.warn('No terminal name specified');
+      return;
+    }
+    const settings = { ...this.serverConnection.settings, ...serverSettings };
+    const url = URL.join(settings.baseUrl, TERMINAL_SERVICE_URL, name);
+
+    const init = {
+      method: 'DELETE',
+    };
+    const response = await this.serverConnection.makeRequest(url, init, settings);
+    if (response.status === 404) {
+      const data = await response.json();
+      const msg =
+        data.message ?? `The terminal session "${name}"" does not exist on the server`;
+      console.warn(msg);
+    } else {
+      if (response.status !== 204) {
+        const err = await createResponseError(response);
+        throw err;
+      }
+    }
+  }
+}

package/src/theme-service.ts

@@ -0,0 +1,180 @@
+import type { ColorDefinition } from '@difizen/mana-app';
+import { ColorRegistry, ThemeService } from '@difizen/mana-app';
+import { inject, singleton } from '@difizen/mana-app';
+import type { ITheme } from 'xterm';
+
+/**
+ * It should be aligned with https://github.com/microsoft/vscode/blob/0dfa355b3ad185a6289ba28a99c141ab9e72d2be/src/vs/workbench/contrib/terminal/common/terminalColorRegistry.ts#L40
+ */
+export const terminalAnsiColorMap: {
+  [key: string]: { index: number; defaults: ColorDefinition['defaults'] };
+} = {
+  'terminal.ansiBlack': {
+    index: 0,
+    defaults: {
+      light: '#000000',
+      dark: '#000000',
+      hc: '#000000',
+    },
+  },
+  'terminal.ansiRed': {
+    index: 1,
+    defaults: {
+      light: '#cd3131',
+      dark: '#cd3131',
+      hc: '#cd0000',
+    },
+  },
+  'terminal.ansiGreen': {
+    index: 2,
+    defaults: {
+      light: '#00BC00',
+      dark: '#0DBC79',
+      hc: '#00cd00',
+    },
+  },
+  'terminal.ansiYellow': {
+    index: 3,
+    defaults: {
+      light: '#949800',
+      dark: '#e5e510',
+      hc: '#cdcd00',
+    },
+  },
+  'terminal.ansiBlue': {
+    index: 4,
+    defaults: {
+      light: '#0451a5',
+      dark: '#2472c8',
+      hc: '#0000ee',
+    },
+  },
+  'terminal.ansiMagenta': {
+    index: 5,
+    defaults: {
+      light: '#bc05bc',
+      dark: '#bc3fbc',
+      hc: '#cd00cd',
+    },
+  },
+  'terminal.ansiCyan': {
+    index: 6,
+    defaults: {
+      light: '#0598bc',
+      dark: '#11a8cd',
+      hc: '#00cdcd',
+    },
+  },
+  'terminal.ansiWhite': {
+    index: 7,
+    defaults: {
+      light: '#555555',
+      dark: '#e5e5e5',
+      hc: '#e5e5e5',
+    },
+  },
+  'terminal.ansiBrightBlack': {
+    index: 8,
+    defaults: {
+      light: '#666666',
+      dark: '#666666',
+      hc: '#7f7f7f',
+    },
+  },
+  'terminal.ansiBrightRed': {
+    index: 9,
+    defaults: {
+      light: '#cd3131',
+      dark: '#f14c4c',
+      hc: '#ff0000',
+    },
+  },
+  'terminal.ansiBrightGreen': {
+    index: 10,
+    defaults: {
+      light: '#14CE14',
+      dark: '#23d18b',
+      hc: '#00ff00',
+    },
+  },
+  'terminal.ansiBrightYellow': {
+    index: 11,
+    defaults: {
+      light: '#b5ba00',
+      dark: '#f5f543',
+      hc: '#ffff00',
+    },
+  },
+  'terminal.ansiBrightBlue': {
+    index: 12,
+    defaults: {
+      light: '#0451a5',
+      dark: '#3b8eea',
+      hc: '#5c5cff',
+    },
+  },
+  'terminal.ansiBrightMagenta': {
+    index: 13,
+    defaults: {
+      light: '#bc05bc',
+      dark: '#d670d6',
+      hc: '#ff00ff',
+    },
+  },
+  'terminal.ansiBrightCyan': {
+    index: 14,
+    defaults: {
+      light: '#0598bc',
+      dark: '#29b8db',
+      hc: '#00ffff',
+    },
+  },
+  'terminal.ansiBrightWhite': {
+    index: 15,
+    defaults: {
+      light: '#a5a5a5',
+      dark: '#e5e5e5',
+      hc: '#ffffff',
+    },
+  },
+};
+
+@singleton()
+export class TerminalThemeService {
+  @inject(ColorRegistry)
+  protected readonly colorRegistry: ColorRegistry;
+
+  readonly onDidChange = ThemeService.get().onDidColorThemeChange;
+
+  get theme(): ITheme {
+    const foregroundColor = this.colorRegistry.getCurrentColor('terminal.foreground');
+    const backgroundColor =
+      this.colorRegistry.getCurrentColor('terminal.background') ||
+      this.colorRegistry.getCurrentColor('panel.background');
+    const cursorColor =
+      this.colorRegistry.getCurrentColor('terminalCursor.foreground') ||
+      foregroundColor;
+    const cursorAccentColor =
+      this.colorRegistry.getCurrentColor('terminalCursor.background') ||
+      backgroundColor;
+    const selectionColor = this.colorRegistry.getCurrentColor(
+      'terminal.selectionBackground',
+    );
+
+    const theme: ITheme = {
+      background: backgroundColor,
+      foreground: foregroundColor,
+      cursor: cursorColor,
+      cursorAccent: cursorAccentColor,
+      selection: selectionColor,
+    };
+    // eslint-disable-next-line guard-for-in
+    for (const id in terminalAnsiColorMap) {
+      const colorId = id.substring(13);
+      const colorName = colorId.charAt(0).toLowerCase() + colorId.slice(1);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (theme as any)[colorName] = this.colorRegistry.getCurrentColor(id);
+    }
+    return theme;
+  }
+}

package/src/view.tsx

@@ -0,0 +1,327 @@
+import { CodeOutlined } from '@ant-design/icons';
+import { isFirefox } from '@difizen/mana-app';
+import {
+  BaseView,
+  view,
+  transient,
+  inject,
+  Disposable,
+  KeyCode,
+  isOSX,
+  DisposableCollection,
+  Emitter,
+} from '@difizen/mana-app';
+import { forwardRef } from 'react';
+import type { RendererType } from 'xterm';
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+
+import type { CursorStyle, TerminalRendererType } from './configuration.js';
+import {
+  DEFAULT_TERMINAL_RENDERER_TYPE,
+  isTerminalRendererType,
+} from './configuration.js';
+import { TerminalConfiguration } from './configuration.js';
+import type { TerminalConnection } from './connection.js';
+import { TerminalManager } from './manager.js';
+import type { TerminalMessage } from './protocol.js';
+import { TerminalViewOption } from './protocol.js';
+import { TerminalThemeService } from './theme-service.js';
+
+export const TerminalComponent = forwardRef<HTMLDivElement>(function TerminalComponent(
+  _props: { top?: number },
+  ref,
+) {
+  // const instance = useInject<LibroTerminalView>(ViewInstance);
+  return (
+    <div tabIndex={1} className="libro-terminal" ref={ref}>
+      /
+    </div>
+  );
+});
+
+@transient()
+@view('libro-terminal-view')
+export class LibroTerminalView extends BaseView {
+  protected term: Terminal;
+  override view = TerminalComponent;
+  protected options: TerminalViewOption;
+  protected termOpened = false;
+  protected initialData = '';
+  protected fitAddon: FitAddon;
+  @inject(TerminalConfiguration)
+  protected readonly config: TerminalConfiguration;
+  @inject(TerminalThemeService)
+  protected readonly themeService: TerminalThemeService;
+  @inject(TerminalManager)
+  protected readonly terminalManager: TerminalManager;
+
+  protected readonly toDisposeOnConnect = new DisposableCollection();
+
+  protected readonly onDidOpenEmitter = new Emitter<void>();
+  readonly onDidOpen = this.onDidOpenEmitter.event;
+
+  protected readonly onDidOpenFailureEmitter = new Emitter<void>();
+  readonly onDidOpenFailure = this.onDidOpenFailureEmitter.event;
+
+  protected readonly onSizeChangedEmitter = new Emitter<{
+    cols: number;
+    rows: number;
+  }>();
+  readonly onSizeChanged = this.onSizeChangedEmitter.event;
+
+  protected readonly onDataEmitter = new Emitter<string>();
+  readonly onData = this.onDataEmitter.event;
+
+  protected readonly onKeyEmitter = new Emitter<{
+    key: string;
+    domEvent: KeyboardEvent;
+  }>();
+  readonly onKey = this.onKeyEmitter.event;
+  protected readonly onDidCloseEmitter = new Emitter<LibroTerminalView>();
+  readonly onDidClose = this.onDidCloseEmitter.event;
+
+  protected connection?: TerminalConnection;
+
+  constructor(@inject(TerminalViewOption) options: TerminalViewOption) {
+    super();
+    this.options = options;
+    this.title.icon = CodeOutlined;
+    this.createTerm();
+    this.createConnection();
+    if (this.options.destroyOnClose === true) {
+      this.toDispose.push(Disposable.create(() => this.term.dispose()));
+    }
+    this.toDispose.push(
+      this.themeService.onDidChange(() =>
+        this.term.setOption('theme', this.themeService.theme),
+      ),
+    );
+    this.toDispose.push(
+      this.term.onTitleChange((title: string) => {
+        if (this.options.useServerTitle) {
+          this.title.label = title;
+        }
+      }),
+    );
+    this.toDispose.push(this.onDidCloseEmitter);
+    this.toDispose.push(this.onDidOpenEmitter);
+    this.toDispose.push(this.onDidOpenFailureEmitter);
+    this.toDispose.push(this.onSizeChangedEmitter);
+    this.toDispose.push(this.onDataEmitter);
+    this.toDispose.push(this.onKeyEmitter);
+
+    this.toDispose.push(
+      this.term.onResize((data) => {
+        this.onSizeChangedEmitter.fire(data);
+      }),
+    );
+
+    this.toDispose.push(
+      this.term.onData((data) => {
+        this.onDataEmitter.fire(data);
+      }),
+    );
+
+    this.toDispose.push(
+      this.term.onBinary((data) => {
+        this.onDataEmitter.fire(data);
+      }),
+    );
+
+    this.toDispose.push(
+      this.term.onKey((data) => {
+        this.onKeyEmitter.fire(data);
+      }),
+    );
+  }
+  protected createConnection = async () => {
+    const connection = await this.terminalManager.getOrCreate(this.options);
+    this.connection = connection;
+    connection.messageReceived(this.onMessage);
+    if (this.isDisposed) {
+      return;
+    }
+    this.initialConnection();
+    this.toDispose.push(connection.connectionStatusChanged(this.initialConnection));
+  };
+
+  /**
+   * Handle a message from the terminal session.
+   */
+  protected onMessage(msg: TerminalMessage): void {
+    switch (msg.type) {
+      case 'stdout':
+        if (msg.content) {
+          this.term.write(msg.content[0] as string);
+        }
+        break;
+      case 'disconnect':
+        this.term.write('\r\n\r\n[Finished… Term Session]\r\n');
+        break;
+      default:
+        break;
+    }
+  }
+
+  protected initialConnection() {
+    if (this.isDisposed) {
+      return;
+    }
+    if (this.connection?.connectionStatus !== 'connected') {
+      return;
+    }
+    this.title.label = `Terminal ${this.connection.name}`;
+    if (this.connection && this.options.initialCommand) {
+      this.connection?.send({
+        type: 'stdin',
+        content: [this.options.initialCommand + '\r'],
+      });
+    }
+  }
+
+  protected createTerm = () => {
+    const term = new Terminal({
+      cursorBlink: this.config.get('terminal.integrated.cursorBlinking'),
+      cursorStyle: this.getCursorStyle(),
+      cursorWidth: this.config.get('terminal.integrated.cursorWidth'),
+      fontFamily: this.config.get('terminal.integrated.fontFamily'),
+      fontSize: this.config.get('terminal.integrated.fontSize'),
+      fontWeight: this.config.get('terminal.integrated.fontWeight'),
+      fontWeightBold: this.config.get('terminal.integrated.fontWeightBold'),
+      drawBoldTextInBrightColors: this.config.get(
+        'terminal.integrated.drawBoldTextInBrightColors',
+      ),
+      letterSpacing: this.config.get('terminal.integrated.letterSpacing'),
+      lineHeight: this.config.get('terminal.integrated.lineHeight'),
+      scrollback: this.config.get('terminal.integrated.scrollback'),
+      fastScrollSensitivity: this.config.get(
+        'terminal.integrated.fastScrollSensitivity',
+      ),
+      rendererType: this.getTerminalRendererType(
+        this.config.get('terminal.integrated.rendererType'),
+      ),
+      theme: this.themeService.theme,
+    });
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+    this.fitAddon = fitAddon;
+    this.term = term;
+    this.term.attachCustomKeyEventHandler((e) => this.customKeyHandler(e));
+  };
+  protected get enableCopy(): boolean {
+    return this.config.get('terminal.enableCopy');
+  }
+
+  protected get enablePaste(): boolean {
+    return this.config.get('terminal.enablePaste');
+  }
+  protected get copyOnSelection(): boolean {
+    return this.config.get('terminal.integrated.copyOnSelection');
+  }
+
+  protected customKeyHandler = (event: KeyboardEvent): boolean => {
+    const keyBindings = KeyCode.createKeyCode(event).toString();
+    const ctrlCmdCopy =
+      (isOSX && keyBindings === 'meta+c') || (!isOSX && keyBindings === 'ctrl+c');
+    const ctrlCmdPaste =
+      (isOSX && keyBindings === 'meta+v') || (!isOSX && keyBindings === 'ctrl+v');
+    if (ctrlCmdCopy && this.enableCopy && this.term.hasSelection()) {
+      return false;
+    }
+    if (ctrlCmdPaste && this.enablePaste) {
+      return false;
+    }
+    return true;
+  };
+  /**
+   * Get the cursor style compatible with `xterm`.
+   * @returns CursorStyle
+   */
+  protected getCursorStyle = (): CursorStyle => {
+    const value = this.config.get('terminal.integrated.cursorStyle');
+    return value === 'line' ? 'bar' : value;
+  };
+  /**
+   * Returns given renderer type if it is valid and supported or default renderer otherwise.
+   *
+   * @param terminalRendererType desired terminal renderer type
+   */
+  protected getTerminalRendererType = (
+    terminalRendererType?: string | TerminalRendererType,
+  ): RendererType => {
+    if (terminalRendererType && isTerminalRendererType(terminalRendererType)) {
+      return terminalRendererType;
+    }
+    return DEFAULT_TERMINAL_RENDERER_TYPE;
+  };
+
+  protected resizeTerminal = (): void => {
+    const geo = this.fitAddon.proposeDimensions();
+    const cols = geo.cols;
+    const rows = geo.rows - 1; // subtract one row for margin
+    this.term.resize(cols, rows);
+  };
+
+  override onViewResize = (): void => {
+    if (!this.isVisible || !this.isAttached) {
+      return;
+    }
+    this.open();
+    this.resizeTerminal();
+  };
+
+  protected open = (): void => {
+    if (this.termOpened) {
+      return;
+    }
+    const node = this.container?.current;
+    if (node) {
+      this.term.open(node);
+    }
+    if (this.initialData) {
+      this.term.write(this.initialData);
+    }
+    this.termOpened = true;
+    this.initialData = '';
+
+    if (isFirefox) {
+      // The software scrollbars don't work with xterm.js, so we disable the scrollbar if we are on firefox.
+      if (this.term.element) {
+        (this.term.element?.children.item(0) as HTMLElement).style.overflow = 'hidden';
+      }
+    }
+  };
+
+  scrollLineUp = (): void => {
+    this.term.scrollLines(-1);
+  };
+
+  scrollLineDown = (): void => {
+    this.term.scrollLines(1);
+  };
+
+  scrollToTop = (): void => {
+    this.term.scrollToTop();
+  };
+
+  scrollToBottom = (): void => {
+    this.term.scrollToBottom();
+  };
+
+  scrollPageUp = (): void => {
+    this.term.scrollPages(-1);
+  };
+
+  scrollPageDown = (): void => {
+    this.term.scrollPages(1);
+  };
+
+  resetTerminal = (): void => {
+    this.term.reset();
+  };
+
+  writeLine = (text: string): void => {
+    this.term.writeln(text);
+  };
+}