tabby-rdp 0.1.0

package/dist/desktop.service.js

@@ -0,0 +1,665 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemoteDesktopService = void 0;
+exports.installStyle = installStyle;
+const core_1 = require("@angular/core");
+const rxjs_1 = require("rxjs");
+const tabby_core_1 = require("tabby-core");
+const path = require("path");
+const url_1 = require("url");
+const targets_1 = require("./targets");
+const deskScript_1 = require("./deskScript");
+const desktopForm_1 = require("./desktopForm");
+const desktops_1 = require("./desktops");
+const remoteSetup_1 = require("./remoteSetup");
+const rdcleanpath_1 = require("./rdcleanpath");
+const signin_1 = require("./signin");
+// tsc turns import() into require(); the vendored IronRDP bundles are ES modules.
+const importESM = new Function('u', 'return import(u)');
+const vendor = (f) => (0, url_1.pathToFileURL)(path.join(__dirname, '..', 'vendor', f)).href;
+const STYLE = `
+.trd-overlay { position: absolute; inset: 0; z-index: 30; display: flex; background: #111; }
+.trd-host { flex: auto; min-width: 0; min-height: 0; display: flex; }
+.trd-host iron-remote-desktop { flex: auto; }
+.trd-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+    padding: 2em; text-align: center; color: #bbb; font-size: 13px; white-space: pre-line; pointer-events: none; }
+.trd-status:empty { display: none; }
+`;
+/**
+ * grd ignores the scale factor in RDP monitor layouts, so a Retina-sized remote monitor would render its UI at
+ * half size. This applies the scale through Mutter's DisplayConfig (temporarily, like GNOME's Display settings
+ * before "Keep changes"), once the new mode is current. Usage: python3 - <width> <height> <scale>
+ */
+const SCALE_SCRIPT = `
+import sys, time
+from gi.repository import Gio, GLib
+W, H, SCALE = int(sys.argv[1]), int(sys.argv[2]), float(sys.argv[3])
+bus = Gio.bus_get_sync(Gio.BusType.SESSION)
+def call(method, args=None, reply=None):
+    return bus.call_sync('org.gnome.Mutter.DisplayConfig', '/org/gnome/Mutter/DisplayConfig',
+                         'org.gnome.Mutter.DisplayConfig', method, args, reply, 0, -1, None)
+for _ in range(50):
+    serial, monitors, logical, _ = call('GetCurrentState').unpack()
+    if len(monitors) == 1:
+        (connector, _, _, _), modes, _ = monitors[0]
+        mode = next((m for m in modes if m[6].get('is-current')), None)
+        if mode and (mode[1], mode[2]) == (W, H):
+            if logical and abs(logical[0][2] - SCALE) < 0.01:
+                print('RD_OK scale already set'); sys.exit(0)
+            if not any(abs(s - SCALE) < 0.01 for s in mode[5]):
+                print('RD_ERR scale not supported for this mode'); sys.exit(0)
+            call('ApplyMonitorsConfig', GLib.Variant('(uua(iiduba(ssa{sv}))a{sv})',
+                 (serial, 1, [(0, 0, SCALE, 0, True, [(connector, mode[0], {})])], {})))
+            print('RD_OK scaled'); sys.exit(0)
+    time.sleep(0.1)
+print('RD_ERR the new mode never became current')
+`;
+/** The remote display size for a pane of this size under these settings. */
+function remoteSizeFor(rect, settings) {
+    const dpr = settings.sharpness === 'retina' ? Math.max(1, window.devicePixelRatio || 1) : 1;
+    const even = (v, min, max) => Math.max(min, Math.min(max, Math.floor(v / 2) * 2));
+    return {
+        width: rect.width ? even(rect.width * dpr, 640, 7680) : 1920,
+        height: rect.height ? even(rect.height * dpr, 480, 4320) : 1080,
+        scale: Math.round(dpr * 100),
+    };
+}
+class DesktopSession {
+    /** `key`: see sessionKey(); one desktop per key. */
+    constructor(container, key, spec) {
+        this.key = key;
+        this.spec = spec;
+        this.state = 'connecting';
+        this.visible = false;
+        this.proxy = null;
+        this.ui = null;
+        this.log = [];
+        /** What the remote display was last set to. */
+        this.remoteSize = null;
+        this.remote = null;
+        this.reclaimFocus = (event) => {
+            if (this.visible && !this.overlay.contains(event.target)) {
+                setTimeout(() => this.visible && this.focusDesktop());
+            }
+        };
+        this.disposers = [];
+        this.disposed = new Promise(resolve => { this.markDisposed = resolve; });
+        this.overlay = document.createElement('div');
+        this.overlay.className = 'trd-overlay';
+        this.overlay.innerHTML = `
+            <div class="trd-host"></div>
+            <div class="trd-status"></div>`;
+        this.host = this.overlay.querySelector('.trd-host');
+        this.statusEl = this.overlay.querySelector('.trd-status');
+        if (getComputedStyle(container).position === 'static') {
+            container.style.position = 'relative';
+        }
+        container.appendChild(this.overlay);
+        // IronRDP only sends keys while its element has focus, but Tabby re-focuses the terminal
+        // (asynchronously) whenever the pane is focused, including on a click into the pane. See
+        // setVisible(): the terminal can't take focus while the desktop shows; this catches the rest.
+        this.container = container;
+        container.addEventListener('focusin', this.reclaimFocus, true);
+        this.overlay.addEventListener('mousedown', () => this.focusDesktop());
+    }
+    /**
+     * Shows or hides the desktop layer. While it shows, the terminal's input textarea is disabled so
+     * nothing can focus it: keystrokes can't leak into the shell underneath, and Tabby's re-focus of
+     * the terminal becomes a no-op.
+     */
+    setVisible(visible) {
+        this.visible = visible;
+        this.overlay.style.display = visible ? '' : 'none';
+        this.container.querySelectorAll('textarea.xterm-helper-textarea').forEach(input => {
+            input.disabled = visible;
+        });
+        if (visible) {
+            setTimeout(() => this.visible && this.focusDesktop());
+        }
+    }
+    status(msg) {
+        this.log.push(`${new Date().toISOString()} ${msg}`);
+        this.statusEl.textContent = msg;
+    }
+    onDispose(f) {
+        this.disposers.push(f);
+    }
+    /** Focuses the remote desktop. IronRDP reveals its canvas asynchronously, so retry for about half a second. */
+    focusDesktop(attempts = 30) {
+        // While the sign-in form shows, it is what takes focus back (the user name, or the password once filled).
+        const signin = this.overlay.querySelector('.trd-signin form');
+        if (signin) {
+            if (!signin.contains(document.activeElement)) {
+                const user = signin.querySelector('[name=username]');
+                (user.value ? signin.querySelector('[name=password]') : user).focus();
+            }
+            return;
+        }
+        const host = this.host.querySelector('iron-remote-desktop');
+        const canvas = host?.shadowRoot?.querySelector('canvas');
+        canvas?.focus();
+        if (host && document.activeElement !== host && attempts > 1 && this.visible) {
+            setTimeout(() => this.visible && this.focusDesktop(attempts - 1), 16);
+        }
+    }
+    dispose() {
+        this.markDisposed();
+        this.setVisible(false);
+        this.container.removeEventListener('focusin', this.reclaimFocus, true);
+        this.disposers.forEach(f => f());
+        try {
+            this.ui?.shutdown();
+        }
+        catch { }
+        this.proxy?.close();
+        this.overlay.remove();
+    }
+}
+/**
+ * A remote desktop per terminal pane (an SSH tab, or a local terminal running `ssh`), shown as a layer
+ * over that pane's terminal. Toggling hides the layer and returns to the console; the RDP session keeps
+ * running until disconnected or the pane closes. One desktop per remote account.
+ */
+let RemoteDesktopService = class RemoteDesktopService {
+    constructor(app, targets, notifications, config, zone) {
+        this.app = app;
+        this.targets = targets;
+        this.notifications = notifications;
+        this.config = config;
+        this.zone = zone;
+        /** Emits whenever a pane's desktop is opened, shown, hidden, connected, ended or disconnected. */
+        this.changed$ = new rxjs_1.Subject();
+        this.sessions = new Map();
+        this.ironrdp = null;
+        this.lastUsed = new Map();
+    }
+    has(pane) {
+        this.prune();
+        return this.sessions.has(pane);
+    }
+    isVisible(pane) {
+        return !!this.sessions.get(pane)?.visible;
+    }
+    async toggle(pane) {
+        if (this.isVisible(pane)) {
+            this.showConsole(pane);
+        }
+        else {
+            await this.showDesktop(pane);
+        }
+    }
+    /** The desktops this pane's SSH host offers: its own, then those configured behind it. */
+    desktopsOf(target) {
+        return (0, desktops_1.desktopsFor)(target, this.config.store.remoteDesktop?.desktops);
+    }
+    /** The desktop a plain toggle (hotkey, header, toolbar) opens for this target: the last one used there. */
+    defaultDesktop(target) {
+        const specs = this.desktopsOf(target);
+        return specs.find(s => s.id === this.lastUsed.get(target.key)) ?? specs[0];
+    }
+    /**
+     * The desktops of the pane's SSH host (from the last lookup) and the one a plain toggle acts on: the one
+     * the pane has open, else the host's default.
+     */
+    choicesOf(pane) {
+        const target = this.targets.cached(pane);
+        const specs = target ? this.desktopsOf(target) : [];
+        return { specs, current: this.desktopOf(pane) ?? (target ? this.defaultDesktop(target) : null) };
+    }
+    /** The desktop this pane shows or has open, if any. */
+    desktopOf(pane) {
+        return this.sessions.get(pane)?.spec ?? null;
+    }
+    /** `remoteDesktop.desktops`: the desktops configured behind SSH hosts. */
+    configuredDesktops() {
+        const list = this.config.store.remoteDesktop?.desktops;
+        return Array.isArray(list) ? [...list] : [];
+    }
+    /** "Add a desktop behind <host>…": asks over the pane, saves it to the config, and opens it. */
+    async addDesktop(pane) {
+        const target = await this.targets.targetOf(pane);
+        if (!target) {
+            this.notifications.error('No SSH connection found in this terminal');
+            return;
+        }
+        if (this.isVisible(pane)) {
+            this.showConsole(pane);
+        }
+        // The resolved hostname, so a profile tab and a plain `ssh` to that machine both offer it.
+        const hostname = target.key.replace(/:\d+$/, '').replace(/^[^@]*@/, '');
+        const entry = await (0, desktopForm_1.askNewDesktop)(pane.element.nativeElement, hostname, target.label);
+        if (!entry) {
+            pane.frontend?.focus();
+            return;
+        }
+        this.config.store.remoteDesktop.desktops = [...this.configuredDesktops(), entry];
+        this.config.save();
+        this.changed$.next();
+        await this.showDesktop(pane, `${entry.host}:${entry.port}`);
+    }
+    /** Removes a configured desktop and its saved accounts. Open sessions to it keep running. */
+    removeDesktop(index) {
+        const list = this.configuredDesktops();
+        const [removed] = list.splice(index, 1);
+        if (!removed) {
+            return;
+        }
+        this.config.store.remoteDesktop.desktops = list;
+        this.config.save();
+        this.changed$.next();
+        (0, signin_1.forgetCredentialsFor)(`${removed.host ?? '127.0.0.1'}:${removed.port ?? 3389}`);
+    }
+    /**
+     * Shows a desktop over the pane: `desktopId` (see desktopsOf), or the one it has open, or the default. A pane
+     * holds one desktop at a time; choosing another one replaces it.
+     */
+    async showDesktop(pane, desktopId) {
+        this.prune();
+        let session = this.sessions.get(pane);
+        if (session?.state === 'ended' || session && desktopId && session.spec.id !== desktopId) {
+            this.disconnect(pane);
+            session = undefined;
+        }
+        if (!session) {
+            const target = await this.targets.targetOf(pane);
+            if (!target) {
+                this.notifications.error('No SSH connection found in this terminal');
+                return;
+            }
+            if (this.sessions.has(pane)) {
+                // Opened meanwhile (e.g. a double click); just show it.
+                return this.showDesktop(pane, desktopId);
+            }
+            const spec = desktopId ? this.desktopsOf(target).find(s => s.id === desktopId) : this.defaultDesktop(target);
+            if (!spec) {
+                this.notifications.error('That desktop is no longer configured for this host');
+                return;
+            }
+            this.lastUsed.set(target.key, spec.id);
+            const key = (0, desktops_1.sessionKey)(target, spec);
+            // One desktop per key: another client would only get an extra, empty monitor (GNOME), or take
+            // over the session (Windows).
+            const existing = this.paneWithDesktopFor(key);
+            if (existing) {
+                this.selectPane(existing);
+                return this.showDesktop(existing);
+            }
+            const created = new DesktopSession(pane.element.nativeElement, key, spec);
+            session = created;
+            this.sessions.set(pane, created);
+            pane.destroyed$.subscribe(() => this.disconnect(pane));
+            // Tabby focuses the terminal when the pane gets focus (tab switch, split focus); take it back.
+            const focused = pane.focused$.subscribe(() => {
+                if (created.visible) {
+                    setTimeout(() => created.visible && created.focusDesktop());
+                }
+            });
+            created.onDispose(() => focused.unsubscribe());
+            this.connect(pane, target, spec, created);
+        }
+        session.setVisible(true);
+        this.changed$.next();
+        const shown = session;
+        setTimeout(() => this.followPane(pane, shown));
+    }
+    /**
+     * `desk`: show this machine's desktop and bring the console along: a terminal on the desktop,
+     * attached to the console's tmux session (or opened in its folder when it isn't in tmux).
+     */
+    async openConsole(pane, request) {
+        await this.showDesktop(pane, desktops_1.OWN_DESKTOP);
+        const target = await this.targets.targetOf(pane);
+        if (!target) {
+            return;
+        }
+        // Wait for the desktop (possibly another pane's, for the same account) to be connected.
+        let session;
+        for (let i = 0; i < 240; i++) {
+            const owner = this.paneWithDesktopFor(target.key); // the host's own desktop
+            session = owner ? this.sessions.get(owner) : undefined;
+            if (!session || session.state !== 'connecting') {
+                break;
+            }
+            await new Promise(r => setTimeout(r, 250));
+        }
+        if (session?.state !== 'connected') {
+            return;
+        }
+        try {
+            const out = await target.exec('sh -s', (0, deskScript_1.consoleScript)(request));
+            const err = /^RD_ERR (.*)$/m.exec(out);
+            session.log.push(err ? `desk: ${err[1]}` : `desk: ${/^RD_OK (.*)$/m.exec(out)?.[1] ?? 'no result'}`);
+            if (err) {
+                this.notifications.error(`desk: ${err[1]}`);
+            }
+        }
+        catch (e) {
+            this.notifications.error(`desk: ${e?.message ?? e}`);
+        }
+    }
+    /** True when this pane has no desktop but another pane has this desktop (default: the toggle's) open. */
+    isOpenElsewhere(pane, spec) {
+        const target = this.targets.cached(pane);
+        if (!target || this.has(pane)) {
+            return false;
+        }
+        return !!this.paneWithDesktopFor((0, desktops_1.sessionKey)(target, spec ?? this.defaultDesktop(target)));
+    }
+    paneWithDesktopFor(key) {
+        for (const [pane, session] of this.sessions) {
+            if (session.key === key && session.state !== 'ended') {
+                return pane;
+            }
+        }
+        return null;
+    }
+    /** Drops sessions of panes that are gone: "close all" and closing the window skip destroyed$. */
+    prune() {
+        if (!this.sessions.size) {
+            return;
+        }
+        const alive = new Set(this.app.tabs.flatMap(t => t instanceof tabby_core_1.SplitTabComponent ? t.getAllTabs() : [t]));
+        for (const [pane, session] of [...this.sessions]) {
+            if (!alive.has(pane)) {
+                this.sessions.delete(pane);
+                session.dispose();
+            }
+        }
+    }
+    /** Brings a pane forward: its top-level tab, and the pane itself within a split. */
+    selectPane(pane) {
+        const top = this.app.tabs.find(t => t === pane || (t instanceof tabby_core_1.SplitTabComponent && t.getAllTabs().includes(pane)));
+        if (top) {
+            this.app.selectTab(top);
+        }
+        if (pane.parent instanceof tabby_core_1.SplitTabComponent) {
+            pane.parent.focus(pane);
+        }
+    }
+    showConsole(pane) {
+        const session = this.sessions.get(pane);
+        if (session) {
+            session.setVisible(false);
+            this.changed$.next();
+        }
+        pane.frontend?.focus();
+    }
+    disconnect(pane) {
+        const session = this.sessions.get(pane);
+        if (!session) {
+            return;
+        }
+        this.sessions.delete(pane);
+        const wasVisible = session.visible;
+        session.dispose();
+        this.changed$.next();
+        if (wasVisible) {
+            pane.frontend?.focus();
+        }
+    }
+    settings() {
+        const store = this.config.store.remoteDesktop ?? {};
+        return {
+            resize: ['live', 'reconnect', 'off'].includes(store.resize) ? store.resize : 'live',
+            sharpness: store.sharpness === 'retina' ? 'retina' : 'standard',
+            desk: store.desk === true,
+        };
+    }
+    /** Changes a setting, saves it, and applies it to open desktops. */
+    updateSettings(change) {
+        const store = this.config.store.remoteDesktop;
+        Object.assign(store, change);
+        this.config.save();
+        for (const [pane, session] of this.sessions) {
+            this.followPane(pane, session);
+        }
+    }
+    /** Follows the pane's size (debounced) while the desktop shows, per the resize setting. */
+    watchSize(pane, session) {
+        let timer;
+        const observer = new ResizeObserver(() => {
+            // Refit the view right away (the component only refits on window resizes by itself) ...
+            try {
+                session.ui?.setScale(1 /* ScreenScale.Fit */);
+            }
+            catch { }
+            // ... and change the remote resolution once the size settles.
+            clearTimeout(timer);
+            timer = setTimeout(() => this.followPane(pane, session), 300);
+        });
+        observer.observe(session.overlay);
+        session.onDispose(() => {
+            clearTimeout(timer);
+            observer.disconnect();
+        });
+    }
+    followPane(pane, session) {
+        const rect = session.overlay.getBoundingClientRect();
+        if (session.state !== 'connected' || !session.visible || !rect.width || !rect.height) {
+            return; // hidden panes measure 0; they catch up when shown again
+        }
+        const settings = this.settings();
+        const wanted = remoteSizeFor(rect, settings);
+        const current = session.remoteSize;
+        if (settings.resize === 'off' || current && current.width === wanted.width && current.height === wanted.height && current.scale === wanted.scale) {
+            return;
+        }
+        if (settings.resize === 'reconnect') {
+            session.log.push(`resize: reconnecting at ${wanted.width}x${wanted.height}`);
+            this.zone.run(() => {
+                this.disconnect(pane);
+                this.showDesktop(pane);
+            });
+            return;
+        }
+        this.applySize(session, wanted);
+    }
+    applySize(session, size) {
+        session.log.push(`resize: ${size.width}x${size.height} @${size.scale}%`);
+        session.remoteSize = size;
+        session.ui.resize(size.width, size.height, size.scale);
+        // Windows honors the scale in the monitor layout; grd needs it set through Mutter.
+        if (size.scale !== 100 && session.remote && session.spec.id === desktops_1.OWN_DESKTOP) {
+            session.remote.exec(`python3 - ${size.width} ${size.height} ${size.scale / 100}`, SCALE_SCRIPT).then(out => {
+                session.log.push(`scale: ${/^RD_(OK|ERR) (.*)$/m.exec(out)?.[2] ?? out.trim().slice(-120)}`);
+            }, e => session.log.push(`scale: ${e?.message ?? e}`));
+        }
+    }
+    /** Status log of the pane's desktop session (for tests and troubleshooting). */
+    logOf(pane) {
+        return this.sessions.get(pane)?.log ?? [];
+    }
+    loadIronRDP() {
+        this.ironrdp ??= (async () => {
+            await importESM(vendor('iron-remote-desktop.js'));
+            const rdp = await importESM(vendor('iron-remote-desktop-rdp.js'));
+            // Troubleshooting: localStorage.trdLogLevel = 'DEBUG' (or TRACE), then restart Tabby.
+            let level = 'INFO';
+            try {
+                level = localStorage.getItem('trdLogLevel') || level;
+            }
+            catch { }
+            await rdp.init(level);
+            return rdp;
+        })();
+        this.ironrdp.catch(() => { this.ironrdp = null; });
+        return this.ironrdp;
+    }
+    /**
+     * Where to connect and as whom. The host's own desktop: the setup script (grd, generated credentials).
+     * Others: the saved account, or the sign-in form (retry=true after a failed sign-in).
+     */
+    async endpointFor(target, spec, session, retryError) {
+        if (spec.id === desktops_1.OWN_DESKTOP) {
+            session.status(`Preparing the remote desktop on ${target.label}…`);
+            const endpoint = await (0, remoteSetup_1.prepareRemoteDesktop)(target, this.settings().desk, this.config.store.remoteDesktop?.sessionBackend);
+            return { host: '127.0.0.1', port: endpoint.port, credentials: { username: endpoint.username, password: endpoint.password }, remember: false };
+        }
+        const saved = retryError ? null : await (0, signin_1.loadCredentials)(session.key);
+        if (saved) {
+            return { host: spec.host, port: spec.port, credentials: saved, remember: false };
+        }
+        session.status('');
+        const asked = (0, signin_1.askCredentials)(session.overlay, {
+            title: `Sign in to ${spec.name} (via ${target.label})`,
+            username: spec.username,
+            error: retryError,
+            canRemember: true,
+        }, session.disposed);
+        if (session.visible) {
+            setTimeout(() => session.visible && session.focusDesktop());
+        }
+        const entered = await asked;
+        return entered && { host: spec.host, port: spec.port, credentials: entered, remember: entered.remember };
+    }
+    async connect(pane, target, spec, session) {
+        const alive = () => this.sessions.get(pane) === session;
+        let retryError;
+        try {
+            // Signing in to a desktop behind the host can take a few tries; the host's own one can't fail that way.
+            for (let attempt = 0;; attempt++) {
+                const [endpoint, rdp] = await Promise.all([this.endpointFor(target, spec, session, retryError), this.loadIronRDP()]);
+                if (!alive()) {
+                    return;
+                }
+                if (!endpoint) {
+                    session.state = 'ended';
+                    this.changed$.next();
+                    session.status('Sign-in cancelled.\nShow the desktop again to sign in.');
+                    return;
+                }
+                session.remote = target;
+                session.proxy ??= await (0, rdcleanpath_1.startRDCleanPathProxy)(() => target.openTcp(endpoint.host, endpoint.port), m => session.log.push(m));
+                const outcome = await this.run(pane, target, spec, session, rdp, endpoint);
+                if (outcome.signInFailed && spec.id !== desktops_1.OWN_DESKTOP && attempt < 5 && alive()) {
+                    await (0, signin_1.forgetCredentials)(session.key);
+                    retryError = outcome.signInFailed;
+                    continue;
+                }
+                return;
+            }
+        }
+        catch (e) {
+            session.state = 'ended';
+            this.changed$.next();
+            session.status(`Remote desktop failed: ${e?.message ?? e}`);
+        }
+    }
+    /** One RDP connection attempt, until it ends. */
+    async run(pane, target, spec, session, rdp, endpoint) {
+        const credentials = endpoint.credentials;
+        const alive = () => this.sessions.get(pane) === session;
+        const el = document.createElement('iron-remote-desktop');
+        try {
+            el.setAttribute('scale', 'fit');
+            el.setAttribute('flexcenter', 'true');
+            el.module = rdp.Backend;
+            const ready = new Promise(resolve => el.addEventListener('ready', (e) => resolve(e.detail.irgUserInteraction), { once: true }));
+            session.host.replaceChildren(el);
+            session.ui = await ready;
+            // The component outlines itself while it has the keyboard; the desktop should look like the
+            // terminal it replaces, edge to edge. Its styles live in a shadow root, so adopt a sheet there.
+            // Not a <style> element: the component only forwards keys while its own container is the shadow
+            // root's first child, and an element added before it renders would take that place.
+            if (el.shadowRoot) {
+                const sheet = new CSSStyleSheet();
+                sheet.replaceSync('.capturing-inputs, canvas:focus, canvas:focus-visible { outline: none !important; }');
+                el.shadowRoot.adoptedStyleSheets = [...el.shadowRoot.adoptedStyleSheets, sheet];
+            }
+            // Size the remote display to the pane (see the sharpness setting).
+            const settings = this.settings();
+            const size = remoteSizeFor(session.overlay.getBoundingClientRect(), settings);
+            const { width, height } = size;
+            // DOMAIN\user or user@domain go to the server as typed; only the former needs splitting.
+            const [domain, username] = /^([^\\]+)\\(.+)$/.exec(credentials.username)?.slice(1) ?? [spec.domain ?? '', credentials.username];
+            session.status(spec.id === desktops_1.OWN_DESKTOP ? `Connecting to ${target.label}…` : `Connecting to ${spec.name} via ${target.label}…`);
+            const config = session.ui.configBuilder()
+                .withUsername(username)
+                .withPassword(credentials.password)
+                .withDestination(`${spec.id === desktops_1.OWN_DESKTOP ? target.label : endpoint.host}:${endpoint.port}`)
+                .withProxyAddress(session.proxy.url)
+                .withServerDomain(domain)
+                .withAuthToken(session.proxy.token)
+                .withDesktopSize({ width, height })
+                // Display control lets the remote monitor follow the pane (live resize, remote scaling).
+                .withExtension(rdp.displayControl(true))
+                // GNOME Remote Desktop requires the graphics pipeline; Windows does better with bitmaps
+                // (IronRDP decodes EGFX without H.264, which Windows would want).
+                .withExtension(rdp.graphicsPipeline(spec.kind === 'gnome'))
+                .build();
+            let info;
+            try {
+                info = await session.ui.connect(config);
+            }
+            catch (e) {
+                // IronErrorKind: 1 WrongPassword, 2 LogonFailure.
+                const kind = typeof e?.kind === 'function' ? e.kind() : undefined;
+                const detail = typeof e?.backtrace === 'function' ? e.backtrace() : (e?.message ?? String(e));
+                if (kind === 1 || kind === 2) {
+                    session.log.push(`sign-in failed: ${detail.split('\n')[0]}`);
+                    return { connected: false, signInFailed: kind === 1 ? 'Wrong user name or password.' : 'The sign-in was refused.' };
+                }
+                throw new Error(detail);
+            }
+            if (!alive()) {
+                return { connected: false };
+            }
+            session.ui.setVisibility(true);
+            session.remoteSize = { width, height, scale: 100 };
+            if (size.scale !== 100) {
+                // Retina: the connection starts unscaled; ask for the matching remote scale right away.
+                this.applySize(session, size);
+            }
+            this.watchSize(pane, session);
+            session.state = 'connected';
+            session.status('');
+            this.changed$.next();
+            if (endpoint.remember) {
+                (0, signin_1.saveCredentials)(session.key, credentials).then(() => session.log.push('sign-in: saved in the keychain'), e => session.log.push(`sign-in: keychain: ${e?.message ?? e}`));
+            }
+            if (session.visible) {
+                session.focusDesktop();
+            }
+            const end = await info.run();
+            session.state = 'ended';
+            this.changed$.next();
+            session.status(`Remote desktop session ended: ${end.reason()}\nShow the desktop again to reconnect.`);
+            return { connected: true };
+        }
+        catch (e) {
+            session.state = 'ended';
+            this.changed$.next();
+            session.status(`Remote desktop failed: ${e?.message ?? e}`);
+            return { connected: false };
+        }
+    }
+};
+exports.RemoteDesktopService = RemoteDesktopService;
+exports.RemoteDesktopService = RemoteDesktopService = __decorate([
+    (0, core_1.Injectable)({ providedIn: 'root' }),
+    __metadata("design:paramtypes", [tabby_core_1.AppService,
+        targets_1.RemoteTargets,
+        tabby_core_1.NotificationsService,
+        tabby_core_1.ConfigService,
+        core_1.NgZone])
+], RemoteDesktopService);
+let styleInstalled = false;
+function installStyle() {
+    if (styleInstalled) {
+        return;
+    }
+    styleInstalled = true;
+    const style = document.createElement('style');
+    style.textContent = STYLE + signin_1.STYLE;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=desktop.service.js.map