ai-remote 0.1.0

package/src/protocols/ssh/terminal.ts

@@ -0,0 +1,242 @@
+// The terminal surface: xterm.js, themed to match the gateway, wired to an
+// SSH session's bytes in and keystrokes out.
+
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import xtermStyles from '@xterm/xterm/css/xterm.css';
+
+const STYLE_ELEMENT_ID = 'xterm-styles';
+
+/**
+ * The width almost every command's output is laid out for.
+ *
+ * A terminal narrower than this does not merely look cramped, it garbles: `ls
+ * -l`, `Get-ChildItem`, `ps` and `top` all place columns by character position,
+ * so the last column wraps one letter per line and the table stops being a
+ * table. Fitting the font to the panel rather than the panel to the font is
+ * what keeps that from happening in a docked panel or on a phone.
+ */
+const MIN_COLUMNS = 80;
+
+/** Comfortable on a wide panel, and the size a roomy one keeps. */
+const BASE_FONT_SIZE = 13;
+
+/**
+ * The floor. On a small mobile screen this yields 80 columns without wrapping
+ * or cutting off table outputs.
+ */
+const MIN_FONT_SIZE = 7;
+
+/** xterm ships its own stylesheet; the bundle carries it instead of a CDN. */
+function installStyles() {
+  if (document.getElementById(STYLE_ELEMENT_ID)) return;
+  const style = document.createElement('style');
+  style.id = STYLE_ELEMENT_ID;
+  style.textContent = xtermStyles;
+  document.head.appendChild(style);
+}
+
+/** The gateway's palette, so the terminal belongs to the same application. */
+const THEME = {
+  background: '#0b0d12',
+  foreground: '#dfe4ec',
+  cursor: '#f38020',
+  cursorAccent: '#0b0d12',
+  selectionBackground: 'rgba(243, 128, 32, 0.32)',
+  black: '#1b1f27',
+  red: '#ff6b6b',
+  green: '#4ade80',
+  yellow: '#fbbf24',
+  blue: '#60a5fa',
+  magenta: '#c084fc',
+  cyan: '#34d3ee',
+  white: '#cbd3e1',
+  brightBlack: '#63708a',
+  brightRed: '#ff8787',
+  brightGreen: '#86efac',
+  brightYellow: '#fcd34d',
+  brightBlue: '#93c5fd',
+  brightMagenta: '#d8b4fe',
+  brightCyan: '#67e8f9',
+  brightWhite: '#f5f7fa',
+};
+
+export class SshTerminal {
+  constructor(container) {
+    installStyles();
+
+    this.container = container;
+    this.terminal = new Terminal({
+      allowProposedApi: true,
+      convertEol: false,
+      cursorBlink: true,
+      cursorStyle: 'bar',
+      drawBoldTextInBrightColors: true,
+      fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+      fontSize: BASE_FONT_SIZE,
+      lineHeight: 1.25,
+      letterSpacing: 0,
+      macOptionIsMeta: true,
+      minimumContrastRatio: 1.5,
+      scrollback: 10_000,
+      theme: THEME,
+    });
+
+    this.fitAddon = new FitAddon();
+    this.terminal.loadAddon(this.fitAddon);
+    this.terminal.open(container);
+    this.fit();
+
+    // The panel is resizable and the browser window is not the only thing that
+    // changes its size, so follow the element rather than the window.
+    this.observer = new ResizeObserver(() => this.fit());
+    this.observer.observe(container);
+
+    this.dataHandler = null;
+    this.terminal.onData((data: Uint8Array) => this.dataHandler?.(data));
+  }
+
+  get columns() {
+    return this.terminal.cols;
+  }
+
+  get rows() {
+    return this.terminal.rows;
+  }
+
+  onData(handler) {
+    this.dataHandler = handler;
+  }
+
+  onResize(handler) {
+    this.terminal.onResize(({ cols, rows }) => handler(cols, rows));
+  }
+
+  write(data: Uint8Array) {
+    this.terminal.write(data);
+  }
+
+  /** Gateway-side notices, kept visually apart from what the host prints. */
+  notice(text: string, tone = 'info') {
+    const color = { info: '\x1b[38;5;245m', good: '\x1b[38;5;114m', bad: '\x1b[38;5;203m' }[tone] || '';
+    this.terminal.write(`${color}${text}\x1b[0m\r\n`);
+  }
+
+  clear() {
+    this.terminal.clear();
+  }
+
+  focus() {
+    this.terminal.focus();
+  }
+
+  /**
+   * Size the terminal to the panel, choosing the font so MIN_COLUMNS fit.
+   *
+   * The columns matter more than the type size here: the commands people run in
+   * a side panel -- `ls -l`, `top`, anything in PowerShell that prints a table
+   * -- are laid out for 80 columns, and a narrower grid wraps every row into an
+   * unreadable stack.
+   *
+   * `proposeDimensions()` reports the grid the current font size yields, and a
+   * monospace cell's width scales with its font size, so `fontSize * cols /
+   * MIN_COLUMNS` lands close to the size that gives MIN_COLUMNS. It is measured
+   * rather than assumed because the cell-width-to-font-size ratio belongs to
+   * whichever font the platform picked. A second pass settles the rounding.
+   * Changing the font resizes the element, which the ResizeObserver sees, so
+   * the guard keeps that from recursing.
+   */
+  fit() {
+    if (this.fitting) return;
+    if (this.container.clientWidth <= 0 || this.container.clientHeight <= 0) return;
+
+    this.fitting = true;
+    try {
+      for (let pass = 0; pass < 2; pass++) {
+        const proposed = this.fitAddon.proposeDimensions();
+        if (!proposed || !(proposed.cols > 0)) break;
+
+        const current = this.terminal.options.fontSize || BASE_FONT_SIZE;
+        const wanted = Math.min(
+          BASE_FONT_SIZE,
+          Math.max(MIN_FONT_SIZE, Math.floor((current * proposed.cols) / MIN_COLUMNS))
+        );
+        if (wanted === current) break;
+        this.terminal.options.fontSize = wanted;
+      }
+
+      this.fitAddon.fit();
+
+      // A panel narrow enough to be short of MIN_COLUMNS even at the smallest
+      // type keeps the columns and scrolls sideways instead, because wrapped
+      // output is harder to read than output that has to be scrolled to.
+      const short = this.terminal.cols < MIN_COLUMNS;
+      this.container.classList.toggle('is-narrow', short);
+      if (short) this.terminal.resize(MIN_COLUMNS, this.terminal.rows);
+    } catch {
+      // A hidden panel has no size to fit to; the next resize will catch it.
+    } finally {
+      this.fitting = false;
+    }
+  }
+
+  /** The grid the host is being told about, for a status line or a log. */
+  get geometry() {
+    return {
+      columns: this.terminal.cols,
+      rows: this.terminal.rows,
+      fontSize: this.terminal.options.fontSize,
+    };
+  }
+
+  get selection() {
+    return this.terminal.getSelection();
+  }
+
+  /**
+   * Read one line from the user, for a password or a one-time code the host
+   * asked for during authentication. The shell is not open yet, so the
+   * terminal is free to be a prompt.
+   */
+  readLine({ prompt = '', echo = false } = {}) {
+    return new Promise((resolve) => {
+      const previous = this.dataHandler;
+      let answer = '';
+
+      this.terminal.write(prompt.replaceAll('\n', '\r\n'));
+      this.dataHandler = (data: Uint8Array) => {
+        for (const character of data) {
+          const code = character.charCodeAt(0);
+
+          if (code === 0x0d || code === 0x0a) { // Enter, or a pasted line break
+            this.terminal.write('\r\n');
+            this.dataHandler = previous;
+            resolve(answer);
+            return;
+          }
+          if (code === 0x7f || code === 0x08) { // Backspace
+            if (answer.length === 0) continue;
+            answer = answer.slice(0, -1);
+            if (echo) this.terminal.write('\b \b');
+            continue;
+          }
+          if (code === 0x03) {            // Ctrl-C
+            this.terminal.write('^C\r\n');
+            this.dataHandler = previous;
+            resolve('');
+            return;
+          }
+          if (code < 0x20) continue;
+
+          answer += character;
+          if (echo) this.terminal.write(character);
+        }
+      };
+    });
+  }
+
+  destroy() {
+    this.observer?.disconnect();
+    this.terminal.dispose();
+  }
+}