@celljs/ta-web 4.7.0 → 4.8.0

package/src/browser/style/layout.ts

@@ -93,6 +93,8 @@ export const LAYOUT_STYLE = `
 .ta-run-tokens { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--ta-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
 .ta-run-tokens > span { display: inline-flex; align-items: center; gap: 1px; }
 .ta-run-line { display: flex; min-width: 0; min-height: 22px; padding-left: 6px; margin-top: -6px; }
+/* Under the open steps of a turn the line is one more step: the same pitch, its dot on the string's line. */
+.ta-thread-item:has(> .ta-message > .ta-process:last-child > .ta-process-steps) + .ta-run-line { margin-top: -18px; padding-left: 4.5px; }
 .ta-status-waiting::before { background: var(--ta-yellow); }
 /* On the head of a turn the face of ta already shows that it works. */
 .ta-turn-head .ta-run-status > .ta-status { display: none; }
@@ -144,6 +146,9 @@ export const LAYOUT_STYLE = `
 .ta-plus-line { height: 1px; margin: 5px 8px; border: 0; background: var(--ta-border-muted); flex: none; }
 .ta-plus-back { display: flex; align-items: center; gap: 6px; width: 100%; height: 34px; margin-bottom: 4px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--ta-border-muted); border-radius: 9px 9px 0 0; background: none; color: var(--ta-secondary); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
 .ta-plus-back:hover { color: var(--ta-text); }
+.ta-plus-search { box-sizing: border-box; width: 100%; height: 32px; margin: 0 0 6px; padding: 0 10px; border: 1px solid var(--ta-border); border-radius: 9px; background: var(--ta-main); color: var(--ta-text); font: inherit; font-size: 13px; outline: none; }
+.ta-plus-search:focus { border-color: var(--ta-border-strong, var(--ta-secondary)); }
+.ta-plus-empty { padding: 10px 8px; color: var(--ta-secondary); font-size: 12.5px; }
 @keyframes ta-plus-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
 .ta-console-composer textarea { padding: 5px 2px; }
 /* A long placeholder stays on one line, so the empty box keeps its height beside the controls of the +. */

package/src/browser/style/shell.ts

@@ -133,6 +133,7 @@ export const SHELL_STYLE = `
 .ta-toast-message { color: var(--ta-text); overflow-wrap: anywhere; white-space: pre-wrap; }
 .ta-toast-count { margin-left: 6px; padding: 0 5px; border-radius: 6px; background: var(--ta-chip); color: var(--ta-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
 .ta-toast-detail { color: var(--ta-secondary); font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
+.ta-toast-art { align-self: flex-start; width: 200px; height: auto; margin-top: 8px; border-radius: 10px; }
 .ta-toast-action { align-self: flex-start; margin-top: 6px; height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--ta-border-field); background: transparent; font-size: 12px; font-weight: 500; transition: background 120ms; }
 .ta-toast-action:hover { background: var(--ta-hover); }
 .ta-toast .ta-toast-close { width: 24px; height: 24px; margin-top: -1px; color: var(--ta-muted); }

package/src/browser/terminal/canvas-font.spec.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'bun:test';
+import { CanvasFontFix } from './canvas-font';
+
+/** A context that, as Chromium 156, keeps its font when the new one starts with a space. */
+class StrictContext {
+    protected value = '10px sans-serif';
+    get font(): string {
+        return this.value;
+    }
+    set font(font: string) {
+        if (!/^\s/.test(font)) {
+            this.value = font.replace(/^(normal )+/, '');
+        }
+    }
+}
+
+describe('CanvasFontFix', () => {
+    it('sets the font xterm.js meant, and leaves a valid one as it is', () => {
+        const context = new StrictContext();
+        context.font = ' normal 24px Menlo';
+        expect(context.font).toBe('10px sans-serif');
+        CanvasFontFix.install([StrictContext.prototype, undefined]);
+        CanvasFontFix.install([StrictContext.prototype]);
+        context.font = ' normal 24px Menlo';
+        expect(context.font).toBe('24px Menlo');
+        context.font = 'italic bold 12px monospace';
+        expect(context.font).toBe('italic bold 12px monospace');
+    });
+});

package/src/browser/terminal/canvas-font.ts

@@ -0,0 +1,32 @@
+const INSTALLED = Symbol.for('ta.canvasFontTrim');
+
+/**
+ * xterm.js's WebGL renderer sets the font of its canvases as `${italic} ${weight} ${size}px ${family}`,
+ * which starts with a space when the text is not italic. Chromium 156 (Electron 45, the desktop app)
+ * rejects a font with leading spaces and keeps `10px sans-serif`: the glyphs come out tiny in cells of
+ * the right size. Setting `font` without the leading spaces makes it the font xterm.js meant; a font
+ * that was valid is unchanged. Remove when @xterm/addon-webgl writes `normal` there.
+ */
+export namespace CanvasFontFix {
+    export function install(prototypes: readonly (object | undefined)[] = defaults()): void {
+        for (const prototype of prototypes) {
+            const target = prototype as Record<PropertyKey, unknown> | undefined;
+            const font = target && Object.getOwnPropertyDescriptor(target, 'font');
+            if (!target || !font?.set || target[INSTALLED]) {
+                continue;
+            }
+            const set = font.set;
+            Object.defineProperty(target, 'font', {
+                ...font,
+                set(this: object, value: unknown) {
+                    set.call(this, typeof value === 'string' ? value.trimStart() : value);
+                },
+            });
+            Object.defineProperty(target, INSTALLED, { value: true });
+        }
+    }
+
+    function defaults(): (object | undefined)[] {
+        return [globalThis.CanvasRenderingContext2D?.prototype, globalThis.OffscreenCanvasRenderingContext2D?.prototype];
+    }
+}

package/src/browser/terminal/terminal-links.spec.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'bun:test';
+import { TerminalLinkUtil } from './terminal-links';
+
+const texts = (line: string) => TerminalLinkUtil.find(line).map(link => line.slice(link.start, link.end));
+
+describe('TerminalLinkUtil', () => {
+    it('finds web pages, without the punctuation after them', () => {
+        expect(texts('Local: http://localhost:5173/, docs at https://example.com/a?b=1.')).toEqual(['http://localhost:5173/', 'https://example.com/a?b=1']);
+        expect(TerminalLinkUtil.find('see (https://x.dev/a)')[0].target).toEqual({ type: 'url', url: 'https://x.dev/a' });
+    });
+
+    it('finds paths with the place compilers and grep print', () => {
+        const line = "src/app.ts:12:5 - error TS2304: Cannot find name 'x'.";
+        expect(texts(line)).toEqual(['src/app.ts:12:5']);
+        expect(TerminalLinkUtil.find(line)[0].target).toEqual({ type: 'path', path: 'src/app.ts', selection: { startLine: 12, startColumn: 5 } });
+        expect(texts('src/a.ts(10,5): error')).toEqual(['src/a.ts(10,5)']);
+        expect(TerminalLinkUtil.find('src/a.ts(10,5): error')[0].target).toMatchObject({ path: 'src/a.ts', selection: { startLine: 10, startColumn: 5 } });
+        expect(texts('lib/x.js:3:const a = 1')).toEqual(['lib/x.js:3']);
+        expect(texts('modified:   ./docs/README.md and /etc/hosts, AGENTS.md.')).toEqual(['./docs/README.md', '/etc/hosts', 'AGENTS.md']);
+        expect(texts('cd docs/ ; ls')).toEqual(['docs/']);
+    });
+
+    it('leaves out what is no file', () => {
+        expect(texts('v4.6.1 1.2.3 e.g. console.log ~/x deepseek-flash <inline:ta> Node.js /help and/or')).toEqual([]);
+        expect(texts('see https://example.com/src/a.ts')).toEqual(['https://example.com/src/a.ts']);
+    });
+
+    it('reads the directory of OSC 7', () => {
+        expect(TerminalLinkUtil.cwdOf('file://mac.local/Users/me/my%20app')).toBe('/Users/me/my app');
+        expect(TerminalLinkUtil.cwdOf('nonsense')).toBeUndefined();
+    });
+});

package/src/browser/terminal/terminal-links.ts

@@ -0,0 +1,75 @@
+import { type LinkTarget, LinkUtil } from '../util/link';
+
+/** A link in a line of a terminal: `text.slice(start, end)`. */
+export interface TerminalLink {
+    start: number;
+    end: number;
+    target: LinkTarget;
+}
+
+const URL_START = /\b(?:https?|file):\/\//gi;
+/** What a path may be in: anything up to a space, a quote or a bracket. */
+const WORD = /[^\s'"`<>()[\]{}|;,]+/g;
+/** A path at the start of a word, with the line and column a compiler or grep prints after it (`:10`, `:10:5`). */
+const PATH = /^(?:\.{1,2}\/|\/)?(?:[\w@+.-]+\/)*[\w@+.-]+\/?(?::\d+(?::\d+)?)?/;
+/** A path no one mistakes for a word, with or without an extension: `./x`, `../x`, `/etc/hosts` (not `/help`). */
+const EXPLICIT = /^(?:\.{1,2}\/[^/]|\/[^/]+\/[^/])/;
+/** TypeScript's and MSBuild's `(10,5)` right after a path. */
+const PARENS = /^\((\d+)(?:,(\d+))?\)/;
+
+/**
+ * The links of a line of a terminal, as VS Code finds them: http(s) and file URLs, and paths of files
+ * (`src/a.ts:10:5`, `./b.md`, `/etc/hosts`, `docs/`) with the place a compiler or grep prints after
+ * them. A name alone is a file only with an extension files have (LinkUtil.codeReference); a path
+ * starting with `./`, `../` or two names under `/` is one with any name.
+ */
+export namespace TerminalLinkUtil {
+    export function find(text: string): TerminalLink[] {
+        const links: TerminalLink[] = [];
+        for (const found of text.matchAll(URL_START)) {
+            const start = found.index;
+            const url = /^file:/i.test(found[0]) ? /^file:\/\/[^\s'"`<>]+/i.exec(text.slice(start))?.[0] : LinkUtil.bareUrl(text.slice(start));
+            const target = url && LinkUtil.parse(url);
+            if (target) {
+                links.push({ start, end: start + url.length, target });
+            }
+        }
+        const inUrl = (index: number) => links.some(link => index >= link.start && index < link.end);
+        const urls = links.length;
+        for (const word of text.matchAll(WORD)) {
+            if (inUrl(word.index)) {
+                continue;
+            }
+            const path = PATH.exec(word[0])?.[0].replace(/[.:]+$/, '');
+            if (!path) {
+                continue;
+            }
+            const start = word.index;
+            let end = start + path.length;
+            let reference = path;
+            const parens = path.length === word[0].length ? PARENS.exec(text.slice(end)) : null;
+            if (parens && !/:\d+$/.test(path)) {
+                reference = `${path}:${parens[1]}${parens[2] ? `:${parens[2]}` : ''}`;
+                end += parens[0].length;
+            }
+            const target = LinkUtil.codeReference(reference) ?? (EXPLICIT.test(reference) ? LinkUtil.parse(reference) : undefined);
+            if (target) {
+                links.push({ start, end, target });
+            }
+        }
+        return urls === links.length ? links : links.sort((a, b) => a.start - b.start);
+    }
+
+    /** `file://host/path` of OSC 7, the directory a shell says it is in. */
+    export function cwdOf(osc7: string): string | undefined {
+        const found = /^file:\/\/[^/]*(\/.*)$/i.exec(osc7.trim());
+        if (!found) {
+            return undefined;
+        }
+        try {
+            return decodeURIComponent(found[1]);
+        } catch {
+            return undefined;
+        }
+    }
+}

package/src/browser/terminal/terminal-theme.spec.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'bun:test';
+import { TerminalTheme } from './terminal-theme';
+
+describe('TerminalTheme', () => {
+    it("takes the page's background and text, and VS Code's colours for the theme", () => {
+        const page: Record<string, string> = { '--ta-code': ' #161618', '--ta-text': '#e5e5e5', '--ta-mono': " 'SF Mono', monospace" };
+        const dark = TerminalTheme.of('dark', name => page[name] ?? '');
+        expect(dark.background).toBe('#161618');
+        expect(dark.foreground).toBe('#e5e5e5');
+        expect(dark.cursor).toBe('#e5e5e5');
+        expect(dark.cursorAccent).toBe('#161618');
+        expect(dark.green).toBe('#0dbc79');
+        expect(TerminalTheme.fontFamily(name => page[name] ?? '')).toBe("'SF Mono', monospace");
+    });
+
+    it('has colours of its own when the page has none yet', () => {
+        const light = TerminalTheme.of('light', () => '');
+        expect(light.background).toBe('#f7f8fa');
+        expect(light.foreground).toBe('#1a1a1a');
+        expect(light.blue).toBe('#0451a5');
+        expect(TerminalTheme.fontFamily(() => '')).toBe('monospace');
+    });
+});

package/src/browser/terminal/terminal-theme.ts

@@ -0,0 +1,66 @@
+import type { ITheme } from '@xterm/xterm';
+import type { Theme } from '../settings/settings-protocol';
+
+/** The sixteen colours of VS Code's terminal, for a dark and a light page. */
+const ANSI: Record<Theme, ITheme> = {
+    dark: {
+        black: '#000000',
+        red: '#cd3131',
+        green: '#0dbc79',
+        yellow: '#e5e510',
+        blue: '#2472c8',
+        magenta: '#bc3fbc',
+        cyan: '#11a8cd',
+        white: '#e5e5e5',
+        brightBlack: '#666666',
+        brightRed: '#f14c4c',
+        brightGreen: '#23d18b',
+        brightYellow: '#f5f543',
+        brightBlue: '#3b8eea',
+        brightMagenta: '#d670d6',
+        brightCyan: '#29b8db',
+        brightWhite: '#e5e5e5',
+        selectionBackground: '#264f78',
+        selectionInactiveBackground: '#3a3d41',
+        scrollbarSliderBackground: 'rgba(121, 121, 121, 0.4)',
+        scrollbarSliderHoverBackground: 'rgba(100, 100, 100, 0.7)',
+        scrollbarSliderActiveBackground: 'rgba(191, 191, 191, 0.4)',
+    },
+    light: {
+        black: '#000000',
+        red: '#cd3131',
+        green: '#00bc00',
+        yellow: '#949800',
+        blue: '#0451a5',
+        magenta: '#bc05bc',
+        cyan: '#0598bc',
+        white: '#555555',
+        brightBlack: '#666666',
+        brightRed: '#cd3131',
+        brightGreen: '#14ce14',
+        brightYellow: '#b5ba00',
+        brightBlue: '#0451a5',
+        brightMagenta: '#bc05bc',
+        brightCyan: '#0598bc',
+        brightWhite: '#a5a5a5',
+        selectionBackground: '#add6ff',
+        selectionInactiveBackground: '#e5ebf1',
+        scrollbarSliderBackground: 'rgba(100, 100, 100, 0.4)',
+        scrollbarSliderHoverBackground: 'rgba(100, 100, 100, 0.7)',
+        scrollbarSliderActiveBackground: 'rgba(0, 0, 0, 0.6)',
+    },
+};
+
+export namespace TerminalTheme {
+    /** The colours of a terminal on the page: its background and text are the page's (`--ta-*`), the rest VS Code's. */
+    export function of(theme: Theme, variable: (name: string) => string): ITheme {
+        const background = variable('--ta-code').trim() || (theme === 'dark' ? '#161618' : '#f7f8fa');
+        const foreground = variable('--ta-text').trim() || (theme === 'dark' ? '#e5e5e5' : '#1a1a1a');
+        return { ...ANSI[theme], background, foreground, cursor: foreground, cursorAccent: background };
+    }
+
+    /** The font of the page's code: `--ta-mono`. */
+    export function fontFamily(variable: (name: string) => string): string {
+        return variable('--ta-mono').trim() || 'monospace';
+    }
+}

package/src/browser/terminal/web-terminal.ts

@@ -0,0 +1,330 @@
+import type { FitAddon } from '@xterm/addon-fit';
+import type { IBufferCellPosition, ILink, Terminal } from '@xterm/xterm';
+import type { WebTerminal, WebTerminalOptions } from '../extension/web-extension-api';
+import { message } from '../i18n/messages';
+import type { OpenLinkOptions } from '../links/links-protocol';
+import { ShortcutUtil } from '../settings/agent-settings';
+import type { TaSettings } from '../settings/settings-protocol';
+import type { LinkTarget } from '../util/link';
+import { TerminalLinkUtil } from './terminal-links';
+import { TerminalTheme } from './terminal-theme';
+
+type XtermModule = typeof import('./xterm.js');
+
+/** Loads xterm.js the first time a terminal is made, not with the page. */
+export namespace XtermLoader {
+    let loading: Promise<XtermModule> | undefined;
+
+    export function load(): Promise<XtermModule> {
+        loading ??= import('./xterm.js').catch(error => {
+            loading = undefined;
+            throw error;
+        });
+        return loading;
+    }
+}
+
+const DEFAULT_COLS = 80;
+const DEFAULT_ROWS = 24;
+const SCROLLBACK = 5000;
+/** Rows of one line that wraps, at most, read for its links. */
+const MAX_WRAPPED_ROWS = 50;
+/** A view being dragged to a new size fits once it stops. */
+const FIT_MS = 50;
+
+/** Opens what a link points to, as a link of a reply (TaLinks.open). */
+export type TerminalLinkOpener = (target: LinkTarget, options: OpenLinkOptions) => void;
+
+function cssVariable(name: string): string {
+    return getComputedStyle(document.documentElement).getPropertyValue(name);
+}
+
+/**
+ * A terminal as VS Code's: xterm.js on the GPU (its WebGL renderer; the DOM one when the browser has
+ * no WebGL or loses it), in the theme of the page, which it follows. It opens in an element of its own
+ * that moves from view to view, so that it keeps its screen and scrollback while no view shows it.
+ * URLs and paths of files are links, opened with Cmd or Ctrl + click, from the directory the shell says
+ * it is in (OSC 7), else the one it started in.
+ */
+export class DefaultWebTerminal implements WebTerminal {
+    cols: number;
+    rows: number;
+    /** Where paths of its links are read from. */
+    protected cwd?: string;
+    protected term?: Terminal;
+    protected fit?: FitAddon;
+    protected module?: XtermModule;
+    protected opened = false;
+    protected disposed = false;
+    /** Focus asked for before xterm.js opened: it takes it once it does. */
+    protected wantsFocus = false;
+    /** Output that came before xterm.js loaded. */
+    protected pending: string[] = [];
+    protected readonly dataListeners = new Set<(data: string) => void>();
+    protected readonly resizeListeners = new Set<(size: { cols: number; rows: number }) => void>();
+    protected readonly host = document.createElement('div');
+    protected parent?: HTMLElement;
+    protected observer?: ResizeObserver;
+    protected fitTimer?: ReturnType<typeof setTimeout>;
+    protected unsubscribe?: () => void;
+
+    constructor(
+        protected readonly settings: TaSettings,
+        protected readonly openLink: TerminalLinkOpener,
+        options: WebTerminalOptions = {},
+    ) {
+        this.cols = options.cols ?? DEFAULT_COLS;
+        this.rows = options.rows ?? DEFAULT_ROWS;
+        this.cwd = options.cwd;
+        this.host.className = 'ta-terminal';
+        XtermLoader.load().then(
+            module => this.start(module),
+            error => console.error('The terminal did not load:', error),
+        );
+    }
+
+    write(data: string): void {
+        if (this.term) {
+            this.term.write(data);
+        } else if (!this.disposed) {
+            this.pending.push(data);
+        }
+    }
+
+    onData(listener: (data: string) => void): () => void {
+        this.dataListeners.add(listener);
+        return () => this.dataListeners.delete(listener);
+    }
+
+    onResize(listener: (size: { cols: number; rows: number }) => void): () => void {
+        this.resizeListeners.add(listener);
+        return () => this.resizeListeners.delete(listener);
+    }
+
+    attach(element: HTMLElement): () => void {
+        this.detach();
+        this.parent = element;
+        element.appendChild(this.host);
+        this.observer = new ResizeObserver(() => this.layout());
+        this.observer.observe(element);
+        this.open();
+        this.layout();
+        return () => {
+            if (this.parent === element) {
+                this.detach();
+            }
+        };
+    }
+
+    focus(): void {
+        if (this.opened) {
+            this.term?.focus();
+        } else {
+            this.wantsFocus = true;
+        }
+    }
+
+    dispose(): void {
+        this.disposed = true;
+        this.detach();
+        this.unsubscribe?.();
+        this.term?.dispose();
+        this.pending = [];
+        this.dataListeners.clear();
+        this.resizeListeners.clear();
+    }
+
+    protected start(module: XtermModule): void {
+        if (this.disposed) {
+            return;
+        }
+        this.module = module;
+        const term = new module.Terminal({
+            cols: this.cols,
+            rows: this.rows,
+            // The Unicode 11 widths of emoji and CJK, as programs reckon them.
+            allowProposedApi: true,
+            fontFamily: TerminalTheme.fontFamily(cssVariable),
+            fontSize: 12,
+            lineHeight: 1.2,
+            scrollback: SCROLLBACK,
+            cursorBlink: true,
+            cursorInactiveStyle: 'outline',
+            minimumContrastRatio: 4.5,
+            drawBoldTextInBrightColors: true,
+            rescaleOverlappingGlyphs: true,
+            theme: TerminalTheme.of(this.settings.state.theme, cssVariable),
+        });
+        const unicode = new module.Unicode11Addon();
+        term.loadAddon(unicode);
+        term.unicode.activeVersion = '11';
+        this.fit = new module.FitAddon();
+        term.loadAddon(this.fit);
+        // Shift+Enter as the kitty keyboard protocol writes it: a new line in the editor of pi (ta), not a send.
+        term.attachCustomKeyEventHandler(event => {
+            if (event.key === 'Enter' && event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey) {
+                if (event.type === 'keydown') {
+                    this.emitData('\x1b[13;2u');
+                }
+                return false;
+            }
+            return true;
+        });
+        term.onData(data => this.emitData(data));
+        // Mouse reports in the old encoding, bytes over 127: as characters, which the server sends as they are.
+        term.onBinary(data => this.emitData(data));
+        term.onResize(size => {
+            this.cols = size.cols;
+            this.rows = size.rows;
+            for (const listener of this.resizeListeners) {
+                listener(size);
+            }
+        });
+        term.parser.registerOscHandler(7, data => {
+            this.cwd = TerminalLinkUtil.cwdOf(data) ?? this.cwd;
+            return true;
+        });
+        term.registerLinkProvider({ provideLinks: (y, callback) => callback(this.linksAt(term, y)) });
+        for (const data of this.pending) {
+            term.write(data);
+        }
+        this.pending = [];
+        this.term = term;
+        this.unsubscribe = this.settings.subscribe(state => {
+            term.options.theme = TerminalTheme.of(state.theme, cssVariable);
+        });
+        this.open();
+        this.layout();
+    }
+
+    /**
+     * Opens xterm.js where it can measure its font: once, the first time it is in the page with a size
+     * (a hidden tab has none; ResizeObserver calls again when it shows).
+     */
+    protected open(): void {
+        const { term, module, parent } = this;
+        if (!term || !module || this.opened || !parent?.clientWidth || !parent.clientHeight) {
+            return;
+        }
+        this.opened = true;
+        term.open(this.host);
+        const input = this.host.querySelector('.xterm-helper-textarea');
+        for (const name of ['autocomplete', 'autocorrect', 'autocapitalize']) {
+            input?.setAttribute(name, 'off');
+        }
+        input?.setAttribute('spellcheck', 'false');
+        try {
+            const webgl = new module.WebglAddon();
+            webgl.onContextLoss(() => webgl.dispose());
+            term.loadAddon(webgl);
+        } catch (error) {
+            console.warn('No WebGL for the terminal; it draws with the DOM:', error);
+        }
+        // After the renderer: WebGL measures characters otherwise than the DOM, so the size it fits differs.
+        this.fit?.fit();
+        if (this.wantsFocus) {
+            this.wantsFocus = false;
+            term.focus();
+        }
+    }
+
+    /**
+     * Opens it the first time its view has a size, and fits it to the view after that, once the size
+     * settled; a hidden view (no size) keeps the size it had. Timers, not frames: a window in the
+     * background gets no frames, and the terminal would stay unopened there.
+     */
+    protected layout(): void {
+        if (!this.parent?.clientWidth || !this.parent.clientHeight) {
+            return;
+        }
+        if (!this.opened) {
+            this.open();
+            return;
+        }
+        clearTimeout(this.fitTimer);
+        this.fitTimer = setTimeout(() => {
+            const size = this.parent?.clientWidth && this.parent.clientHeight ? this.fit?.proposeDimensions() : undefined;
+            if (size && (size.cols !== this.term?.cols || size.rows !== this.term?.rows)) {
+                this.fit?.fit();
+            }
+        }, FIT_MS);
+    }
+
+    /** The links of the line (with the rows it wraps onto) that crosses row `y` (from 1). */
+    protected linksAt(term: Terminal, y: number): ILink[] | undefined {
+        const buffer = term.buffer.active;
+        let first = y - 1;
+        while (first > 0 && y - 1 - first < MAX_WRAPPED_ROWS && buffer.getLine(first)?.isWrapped) {
+            first--;
+        }
+        // The text of the line, and where each of its characters (UTF-16 units) is on the screen.
+        let text = '';
+        const places: (IBufferCellPosition & { width: number })[] = [];
+        for (let row = first; row - first < MAX_WRAPPED_ROWS; row++) {
+            const line = buffer.getLine(row);
+            if (!line || (row > first && !line.isWrapped)) {
+                break;
+            }
+            for (let x = 0; x < line.length; x++) {
+                const cell = line.getCell(x);
+                const width = cell?.getWidth() ?? 1;
+                if (!cell || width === 0) {
+                    // The second half of a wide character.
+                    continue;
+                }
+                const chars = cell.getChars() || ' ';
+                for (let unit = 0; unit < chars.length; unit++) {
+                    places.push({ x: x + 1, y: row + 1, width });
+                }
+                text += chars;
+            }
+        }
+        const links = TerminalLinkUtil.find(text).filter(link => places[link.start].y <= y && places[link.end - 1].y >= y);
+        if (!links.length) {
+            return undefined;
+        }
+        const mac = ShortcutUtil.isMac();
+        return links.map(link => {
+            const start = places[link.start];
+            const last = places[link.end - 1];
+            const hint =
+                link.target.type === 'path'
+                    ? mac
+                        ? 'ta.terminal.openLinkMac'
+                        : 'ta.terminal.openLink'
+                    : mac
+                      ? 'ta.terminal.openUrlMac'
+                      : 'ta.terminal.openUrl';
+            return {
+                range: { start: { x: start.x, y: start.y }, end: { x: last.x + last.width - 1, y: last.y } },
+                text: text.slice(link.start, link.end),
+                decorations: { underline: true, pointerCursor: true },
+                activate: (event: MouseEvent) => {
+                    if (mac ? event.metaKey : event.ctrlKey) {
+                        this.openLink(link.target, { cwd: this.cwd, external: event.shiftKey && link.target.type !== 'path' });
+                    }
+                },
+                hover: () => {
+                    this.host.title = message(this.settings.state.language, hint);
+                },
+                leave: () => {
+                    this.host.title = '';
+                },
+            };
+        });
+    }
+
+    protected detach(): void {
+        this.observer?.disconnect();
+        this.observer = undefined;
+        clearTimeout(this.fitTimer);
+        this.host.remove();
+        this.parent = undefined;
+    }
+
+    protected emitData(data: string): void {
+        for (const listener of this.dataListeners) {
+            listener(data);
+        }
+    }
+}

package/src/browser/terminal/xterm.ts

@@ -0,0 +1,10 @@
+// What a terminal loads the first time one is made: xterm.js, its WebGL renderer and its styles.
+import '@xterm/xterm/css/xterm.css';
+import { CanvasFontFix } from './canvas-font';
+
+CanvasFontFix.install();
+
+export { FitAddon } from '@xterm/addon-fit';
+export { Unicode11Addon } from '@xterm/addon-unicode11';
+export { WebglAddon } from '@xterm/addon-webgl';
+export { Terminal } from '@xterm/xterm';