tabby-rdp 0.5.1 → 0.5.3

package/dist/packageChangeDialog.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PackageChangeDialog = void 0;
+const STYLE = `
+.trd-package-dialog { width: min(460px, calc(100vw - 40px)); padding: 24px; border-radius: 8px; outline: none;
+    border: 1px solid rgba(128,128,128,.35); background: var(--bs-body-bg, #1b1b1b); color: var(--bs-body-color, #ddd);
+    box-shadow: 0 16px 60px rgba(0,0,0,.45); }
+.trd-package-dialog::backdrop { background: rgba(0,0,0,.55); }
+.trd-package-dialog h4 { font-size: 18px; margin: 0 0 16px; }
+.trd-package-dialog p { white-space: pre-line; overflow-wrap: anywhere; }
+.trd-package-dialog [data-detail] { font-size: 13px; opacity: .8; }
+.trd-package-dialog p:empty { display: none; }
+.trd-package-dialog progress { display: block; width: 100%; height: 8px; margin: 18px 0 8px; accent-color: #589cf0; }
+.trd-package-dialog [hidden] { display: none !important; }
+.trd-package-dialog [data-elapsed] { font-size: 12px; opacity: .7; }
+.trd-package-dialog [data-phase=error] { color: var(--bs-danger, #f08080); }
+.trd-package-dialog [data-phase=success] { color: var(--bs-success, #79c99b); }
+.trd-package-dialog .trd-package-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
+`;
+/** One modal remains open from confirmation through the installer's verified result. */
+class PackageChangeDialog {
+    constructor() {
+        this.dialog = null;
+        this.previousFocus = null;
+        this.started = 0;
+    }
+    update(state) {
+        if (state.phase === 'cancelled') {
+            this.close();
+            return;
+        }
+        this.open();
+        this.field('[data-title]').textContent = state.action === 'install'
+            ? `Install tabby-rdp ${state.version}` : 'Uninstall tabby-rdp';
+        const result = this.field('[data-result]');
+        result.dataset.phase = state.phase;
+        result.setAttribute('role', state.phase === 'error' ? 'alert' : 'status');
+        const complete = state.phase === 'success' || state.phase === 'error';
+        this.field('progress').hidden = complete;
+        this.field('[data-elapsed]').hidden = complete;
+        this.field('[data-cancel]').hidden = true;
+        this.field('[data-confirm]').hidden = true;
+        this.field('[data-close]').hidden = !complete;
+        this.field('[data-detail]').textContent = '';
+        let message = state.message ?? '';
+        if (state.phase === 'preparing') {
+            message = state.action === 'install' ? 'Checking compatibility…' : 'Checking installation…';
+        }
+        if (state.phase === 'installing') {
+            message = `Installing tabby-rdp ${state.version}…`;
+        }
+        if (state.phase === 'uninstalling') {
+            message = 'Uninstalling tabby-rdp…';
+        }
+        if (state.phase === 'verifying') {
+            message = state.action === 'install' ? 'Verifying installation…' : 'Verifying removal…';
+        }
+        if (state.phase === 'success') {
+            this.field('[data-title]').textContent = state.action === 'install' ? 'Installation complete' : 'Uninstall complete';
+            if (!state.message) {
+                message = state.action === 'install' ? `tabby-rdp ${state.version} is installed.` : 'tabby-rdp is uninstalled.';
+                this.field('[data-detail]').textContent = 'Close remote desktops, then restart Tabby.';
+            }
+        }
+        if (state.phase === 'error') {
+            this.field('[data-title]').textContent = state.action === 'install' ? 'Installation failed' : 'Uninstall failed';
+        }
+        this.field('[data-message]').textContent = message;
+        if (complete) {
+            this.stopTimer();
+            this.field('[data-close]').focus();
+        }
+        else {
+            this.dialog.focus();
+        }
+    }
+    confirm(message, detail, action) {
+        this.open();
+        this.stopTimer();
+        this.field('[data-title]').textContent = message;
+        this.field('[data-message]').textContent = detail;
+        this.field('[data-detail]').textContent = '';
+        this.field('progress').hidden = true;
+        this.field('[data-elapsed]').hidden = true;
+        this.field('[data-close]').hidden = true;
+        const cancel = this.field('[data-cancel]');
+        const accept = this.field('[data-confirm]');
+        cancel.hidden = false;
+        accept.hidden = false;
+        accept.textContent = action;
+        this.field('[data-result]').dataset.phase = 'confirming';
+        cancel.focus();
+        return new Promise(resolve => { this.confirmation = resolve; });
+    }
+    field(selector) { return this.dialog.querySelector(selector); }
+    open() {
+        if (this.dialog) {
+            if (!this.dialog.open) {
+                this.dialog.showModal();
+            }
+            if (!this.timer) {
+                this.startTimer();
+            }
+            return;
+        }
+        if (!document.getElementById('trd-package-dialog-style')) {
+            const style = document.createElement('style');
+            style.id = 'trd-package-dialog-style';
+            style.textContent = STYLE;
+            document.head.appendChild(style);
+        }
+        this.previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        const dialog = document.createElement('dialog');
+        this.dialog = dialog;
+        dialog.className = 'trd-package-dialog';
+        dialog.setAttribute('aria-labelledby', 'trd-package-dialog-title');
+        dialog.setAttribute('tabindex', '-1');
+        dialog.setAttribute('closedby', 'none');
+        dialog.innerHTML = `<h4 id="trd-package-dialog-title" data-title></h4>
+            <div data-result role="status" aria-live="polite"><p data-message></p><p data-detail></p></div>
+            <progress aria-label="Package change progress"></progress><div data-elapsed></div>
+            <div class="trd-package-actions"><button class="btn btn-secondary" data-cancel hidden>Cancel</button>
+                <button class="btn btn-primary" data-confirm hidden></button><button class="btn btn-primary" data-close hidden>Close</button></div>`;
+        this.field('[data-confirm]').addEventListener('click', () => this.decide(true));
+        this.field('[data-cancel]').addEventListener('click', () => this.decide(false));
+        this.field('[data-close]').addEventListener('click', () => this.close());
+        dialog.addEventListener('cancel', event => {
+            event.preventDefault();
+            this.dismiss();
+        });
+        // Keep package-dialog keystrokes out of Tabby's terminal and shortcut handlers.
+        dialog.addEventListener('keydown', event => {
+            event.stopPropagation();
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.dismiss();
+            }
+        });
+        dialog.addEventListener('keyup', event => event.stopPropagation());
+        document.body.appendChild(dialog);
+        dialog.showModal();
+        this.startTimer();
+    }
+    decide(accepted) {
+        const resolve = this.confirmation;
+        if (!resolve) {
+            return;
+        }
+        this.confirmation = undefined;
+        this.field('[data-confirm]').hidden = true;
+        this.field('[data-cancel]').hidden = true;
+        resolve(accepted);
+        if (!accepted) {
+            this.close();
+        }
+    }
+    dismiss() {
+        if (this.confirmation) {
+            this.decide(false);
+        }
+        else if (!this.field('[data-close]').hidden) {
+            this.close();
+        }
+    }
+    startTimer() {
+        this.started = Date.now();
+        const tick = () => {
+            const seconds = Math.floor((Date.now() - this.started) / 1000);
+            this.field('[data-elapsed]').textContent = `Elapsed ${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
+        };
+        tick();
+        this.timer = setInterval(tick, 1000);
+    }
+    stopTimer() { clearInterval(this.timer); this.timer = undefined; }
+    close() {
+        this.stopTimer();
+        this.dialog?.close();
+        this.dialog?.remove();
+        this.dialog = null;
+        if (this.previousFocus?.isConnected) {
+            this.previousFocus.focus();
+        }
+        this.previousFocus = null;
+    }
+}
+exports.PackageChangeDialog = PackageChangeDialog;

package/dist/rdcleanpath.js

@@ -527,6 +527,8 @@ async function handshake(openUpstream, destination, pcb, x224Request, legacyTls,
     }
     const raw = await openUpstream(destination, signal);
     track(raw);
+    // What this handshake opened, in order, for destroyAll if it fails.
+    const opened = [raw];
     try {
         if (gone()) {
             throw new Error('the client left');
@@ -556,6 +558,7 @@ async function handshake(openUpstream, destination, pcb, x224Request, legacyTls,
             ...name ? { host: name, ca: (0, authorities_1.certificateAuthorities)(), ...(0, net_1.isIP)(name) ? {} : { servername: name } } : {},
             ...legacyTls ? KEY_ENCIPHERMENT_ONLY_TLS : {}, ...options.tls,
         });
+        opened.push(upstream);
         track(upstream);
         // An error after the one the handshake below waits for (the stream under it failing as the socket is destroyed,
         // which a TLS socket over a stream passes on as its own) would have no listener until the relay is up, and an
@@ -571,10 +574,22 @@ async function handshake(openUpstream, destination, pcb, x224Request, legacyTls,
         return { raw, upstream, x224 };
     }
     catch (e) {
-        raw.destroy();
+        destroyAll(opened);
         throw e;
     }
 }
+/**
+ * Destroys streams opened one over the other (the stream to the server, then TLS over it), the last opened first. TLS
+ * over a socket works inside the socket's own handle (Node's TLSWrap), and a socket destroyed under TLS still using it
+ * frees what TLS then reads: right after the handshake, where a certificate refused at once ends the connection, that
+ * crashed Tabby's window (a segmentation fault, in Node as in Electron). TLS destroyed first is done with the socket
+ * before the socket goes. (Over a stream of JavaScript, an SSH channel or a gateway's tunnel, the order did no harm.)
+ */
+function destroyAll(streams) {
+    for (const stream of [...streams].reverse()) {
+        stream.destroy();
+    }
+}
 /** Whether `given` is the secret, compared in a time that doesn't tell how much of it was right. */
 function sameSecret(given, secret) {
     const bytes = Buffer.from(given);
@@ -666,9 +681,7 @@ async function startRDCleanPathProxy(openUpstream, checkCertificate, log = () =>
             closed = true;
             leaving.abort();
             clearTimeout(deadline);
-            for (const stream of streams) {
-                stream.destroy();
-            }
+            destroyAll(streams);
             // What was handed to this connection went with it: the next starts with all the room.
             if (flowClient === ws) {
                 flowClient = null;

package/dist/rdpFile.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MICROPHONE_NOTE = void 0;
+exports.MAX_RDP_FILE = exports.MICROPHONE_NOTE = void 0;
 exports.parseRdpFile = parseRdpFile;
 /**
  * The note for a file that asks for the microphone: not applied while the setting is off. With it on, every desktop
@@ -53,6 +53,11 @@ function decode(data) {
     }
     return b.toString('utf8');
 }
+/**
+ * The most an .rdp file may be: one Remote Desktop Connection saves is a few KB, a signed one a few more. A larger one is
+ * refused before it is read: what it holds would be parsed on the thread that runs Tabby's window.
+ */
+exports.MAX_RDP_FILE = 1024 * 1024;
 /** The connection a .rdp file describes, or null without a usable `full address`. */
 function parseRdpFile(data) {
     const settings = new Map();
@@ -60,9 +65,13 @@ function parseRdpFile(data) {
     // twice, differently, gets the narrower of the two rather than whichever line comes last.
     let clipboardOff = false;
     for (const line of decode(data).split(/\r?\n/)) {
-        const m = /^\s*([^:]+?)\s*:\s*([sib])\s*:(.*)$/i.exec(line);
-        if (m) {
-            const key = m[1].toLowerCase();
+        // The name up to the first colon, trimmed after: a pattern with room for spaces on both sides of the name (as
+        // `\s*([^:]+?)\s*:` had) tries every way of splitting a line of spaces without a colon before it fails, in time
+        // that grows with the cube of its length, and a line of a few thousand spaces held up Tabby's window for seconds
+        // (security review, finding 2). This one takes a line's length, whatever it holds.
+        const m = /^([^:]*):\s*([sib])\s*:(.*)$/i.exec(line);
+        const key = m?.[1].trim().toLowerCase();
+        if (m && key) {
             const value = m[3].trim();
             settings.set(key, value);
             clipboardOff ||= key === 'redirectclipboard' && /^[+-]?\d+$/.test(value) && Number(value) === 0;

package/dist/rdpProfile.js

@@ -124,7 +124,7 @@ exports.RDPTabRecovery = RDPTabRecovery = __decorate([
 // ---- profile settings --------------------------------------------------------------------------
 /**
  * The profile's own fields in Tabby's profile editor (name, group, icon and color are Tabby's). Plain DOM like the
- * rest of the plugin, writing to the profile as you type.
+ * rest of the plugin. Address and gateway edits stay in the form until Save validates both of them.
  */
 let RDPProfileSettingsComponent = class RDPProfileSettingsComponent {
     constructor(element, injector) {
@@ -188,6 +188,7 @@ let RDPProfileSettingsComponent = class RDPProfileSettingsComponent {
                     Applies on the next connection.</div>
             </div>`;
         const field = (name) => root.querySelector(`[name="${name}"]`);
+        this.connectionInputs = { address: field('address'), gateway: field('gateway') };
         field('address').value = o.host ? (0, desktopForm_1.formatAddress)(o.host, o.port || 3389) : '';
         field('kind').value = o.kind === 'gnome' || o.kind === 'xrdp' ? o.kind : 'windows';
         field('username').value = o.username ?? '';
@@ -196,10 +197,6 @@ let RDPProfileSettingsComponent = class RDPProfileSettingsComponent {
             const text = field('address').value;
             const address = (0, desktopForm_1.parseAddress)(text);
             root.querySelector('[data-for=address]').textContent = text.trim() && !address ? 'This doesn\'t look like an address.' : '';
-            if (address) {
-                o.host = address.host;
-                o.port = address.port;
-            }
         });
         field('kind').addEventListener('change', () => {
             const kind = field('kind').value;
@@ -227,12 +224,12 @@ let RDPProfileSettingsComponent = class RDPProfileSettingsComponent {
         ownAccount();
         field('username').addEventListener('input', () => { o.username = field('username').value.trim(); });
         field('domain').addEventListener('input', () => { o.domain = field('domain').value.trim(); });
-        // The gateway, and its account where that isn't the desktop's (offered once there is a gateway and a saved account).
+        // The gateway, and its separate account or sign-in prompt.
         const gateway = field('gateway');
         const gatewayAccount = field('gatewayAccount');
         gateway.value = o.gateway ?? '';
-        gatewayAccount.append(new Option('The same as the desktop\'s', ''), ...accounts.map(a => new Option(label(a), a.id)));
-        if (o.gatewayAccount && !accounts.some(a => a.id === o.gatewayAccount)) {
+        gatewayAccount.append(new Option('The same as the desktop\'s', ''), new Option('Ask for a gateway account when connecting', accounts_1.ASK_GATEWAY_ACCOUNT), ...accounts.map(a => new Option(label(a), a.id)));
+        if (o.gatewayAccount && o.gatewayAccount !== accounts_1.ASK_GATEWAY_ACCOUNT && !accounts.some(a => a.id === o.gatewayAccount)) {
             gatewayAccount.append(new Option('(a saved account that no longer exists)', o.gatewayAccount));
         }
         gatewayAccount.value = o.gatewayAccount ?? '';
@@ -241,10 +238,7 @@ let RDPProfileSettingsComponent = class RDPProfileSettingsComponent {
             root.querySelector('[data-for=gateway]').textContent = text && !(0, gateway_1.parseGateway)(text) ? 'A name or address, with :port if it isn\'t 443.' : '';
             root.querySelector('[data-gateway-account]').hidden = !text || gatewayAccount.options.length < 2;
         };
-        gateway.addEventListener('input', () => {
-            o.gateway = gateway.value.trim();
-            gatewayChanged();
-        });
+        gateway.addEventListener('input', gatewayChanged);
         gatewayAccount.addEventListener('change', () => { o.gatewayAccount = gatewayAccount.value; });
         gatewayChanged();
         // Its own clipboard sharing, or the setting's (named, as it is now).
@@ -265,10 +259,45 @@ let RDPProfileSettingsComponent = class RDPProfileSettingsComponent {
     }
     save() {
         const o = this.profile.options;
+        if (this.connectionInputs) {
+            const { address: addressInput, gateway: gatewayInput } = this.connectionInputs;
+            const addressText = addressInput.value.trim();
+            const address = (0, desktopForm_1.parseAddress)(addressText);
+            const gatewayText = gatewayInput.value.trim();
+            // Empty addresses are useful in group/type defaults. They clear the destination instead of retaining it.
+            const addressError = addressText && !address ? 'This doesn\'t look like an address.' : '';
+            const gatewayError = gatewayText && !(0, gateway_1.parseGateway)(gatewayText) ? 'A name or address, with :port if it isn\'t 443.' : '';
+            const root = this.element.nativeElement;
+            root.querySelector('[data-for=address]').textContent = addressError;
+            root.querySelector('[data-for=gateway]').textContent = gatewayError;
+            if (addressError || gatewayError) {
+                ;
+                (addressError ? addressInput : gatewayInput).focus();
+                // Tabby invokes this synchronous hook before cleaning the proxy and closing the modal. Throwing
+                // stops that Save operation; a return value would be ignored by the host.
+                throw new Error(`Cannot save this RDP profile: ${addressError || gatewayError}`);
+            }
+            // Commit the two connection fields together only after both drafts pass validation.
+            o.host = address?.host ?? '';
+            // A blank destination carries no port edit: keep custom/inherited ports in group and type defaults.
+            if (address) {
+                o.port = address.port;
+            }
+            o.gateway = gatewayText;
+        }
         const { id, account, via, gateway } = this.before;
         if (!id) {
             return;
         }
+        if (!o.host) {
+            // A saved profile's address cleared: the desktop it led to is gone from it, as when the profile is removed
+            // (see RDPProfilesService.deleteProfile). Not for the type's or a group's defaults, which have no id of
+            // their own (an empty address is useful there): profiles that name that address keep what is saved for it.
+            if (!via && this.profile.id) {
+                this.injector.get(desktop_service_1.RemoteDesktopService).forgetDesktop(id, true, `"${this.profile.name}"`).catch(() => null);
+            }
+            return;
+        }
         if ((o.via ?? '') !== via) {
             // Reached another way, it is another desktop. A direct one's saved passwords (through any gateway, the ones
             // it had before included) and certificate were its own; one behind a host shares them with that host's
@@ -374,8 +403,9 @@ let RDPProfilesService = class RDPProfilesService extends tabby_core_1.QuickConn
     }
     deleteProfile(profile) {
         // A direct desktop's saved passwords (through any gateway: one it went through before too) and certificate are
-        // its own; one behind a host shares them with that host's desktop at the same address.
-        if (!profile.options.via) {
+        // its own; one behind a host shares them with that host's desktop at the same address. A profile without an
+        // address of its own leads to no desktop of its own: desktopIdOf would name 127.0.0.1:3389 for it.
+        if (!profile.options.via && (0, desktops_1.configText)(profile.options.host)) {
             this.injector.get(desktop_service_1.RemoteDesktopService).forgetDesktop((0, desktops_1.desktopIdOf)(profile.options), true, `"${profile.name}"`).catch(() => null);
         }
     }

package/dist/releaseSettings.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderReleaseSettings = renderReleaseSettings;
+const help_1 = require("./help");
+/** Rebuilt from manager state; every package mutation stays behind the manager's confirmation and validation. */
+function renderReleaseSettings(root, releases, actions) {
+    const oldSelection = root.dataset.releaseChannel === releases.state.channel ? root.querySelector('[data-version]')?.value : undefined;
+    root.dataset.releaseChannel = releases.state.channel;
+    const selected = releases.versions.some(p => p.version === oldSelection) ? oldSelection : releases.recommended ?? '';
+    const blocked = releases.busy || releases.checking || !!releases.pending || releases.removed;
+    const disable = (condition) => condition ? 'disabled' : '';
+    const reason = selected ? releases.reason(selected) : null;
+    const stable = releases.catalog?.stable;
+    const previous = releases.state.previous;
+    const status = releases.checking ? 'Checking…' : releases.checkedAt !== null ? `Last checked ${new Date(releases.checkedAt).toLocaleString()}.` : 'Not checked';
+    root.innerHTML = `
+        <div class="trd-release-summary">
+            <div><span class="trd-sub">Running version</span><h4>tabby-rdp ${(0, help_1.esc)(releases.running)}</h4></div>
+            <button class="btn btn-link btn-sm" data-release-notes="${(0, help_1.esc)(releases.running)}">Release notes</button>
+        </div>
+        ${releases.pending ? `<div class="trd-release-notice" role="status"><b>Restart required to use ${(0, help_1.esc)(releases.pending)}.</b> Close remote desktops and restart Tabby.</div>` : ''}
+        ${releases.removed ? '<div class="trd-release-notice" role="status"><b>Plugin uninstalled.</b> Close remote desktops and restart Tabby.</div>' : ''}
+        ${releases.notice ? `<p role="status">${(0, help_1.esc)(releases.notice)}</p>` : ''}
+        ${releases.storageWarning ? `<p role="alert">${(0, help_1.esc)(releases.storageWarning)}</p>` : ''}
+        <div class="form-line">
+            <div class="header"><label class="title" for="trd-release-channel">Release channel</label><div class="description">Preview includes beta releases and release candidates.</div></div>
+            <select id="trd-release-channel" class="form-control" data-channel ${disable(blocked)}><option value="stable" ${releases.state.channel === 'stable' ? 'selected' : ''}>Stable</option><option value="preview" ${releases.state.channel === 'preview' ? 'selected' : ''}>Preview</option></select>
+        </div>
+        <label class="trd-release-pause"><input type="checkbox" data-pause ${disable(releases.busy)} ${!releases.state.paused ? 'checked' : ''}> Check for updates automatically</label>
+        <div class="trd-release-actions"><button class="btn btn-secondary btn-sm" data-check ${disable(releases.checking || releases.busy)}>Check now</button><span class="trd-sub" role="status">${(0, help_1.esc)(status)}</span></div>
+        ${releases.error ? `<p class="trd-release-error" role="alert">${(0, help_1.esc)(releases.error)}${releases.catalog ? ' Showing the last successful check.' : ''}</p>` : ''}
+        ${releases.state.channel === 'preview' && releases.catalog && !releases.catalog.preview ? '<p>No preview releases available.</p>' : ''}
+        ${releases.recommended ? `<p>Latest: <b>${(0, help_1.esc)(releases.recommended)}</b> <button class="btn btn-link btn-sm" data-release-notes="${(0, help_1.esc)(releases.recommended)}">Release notes</button></p>` : ''}
+        <h5><label for="trd-release-version">Version</label></h5>
+        <div class="trd-release-actions">
+            <select id="trd-release-version" class="form-control" data-version ${disable(blocked || !releases.versions.length)}>
+                ${!releases.versions.length ? '<option>No versions loaded</option>' : releases.versions.map(p => {
+        const why = releases.reason(p.version);
+        return `<option value="${(0, help_1.esc)(p.version)}" ${p.version === selected ? 'selected' : ''} ${disable(!!why)}>${(0, help_1.esc)(p.version)}${why ? ` — ${(0, help_1.esc)(why)}` : ''}</option>`;
+    }).join('')}
+            </select>
+            <button class="btn btn-primary btn-sm" data-install ${disable(blocked || !!releases.error || !selected || !!reason || selected === releases.running)}>Install selected version…</button>
+            <button class="btn btn-link btn-sm" data-selected-notes ${disable(!selected)}>Release notes</button>
+        </div>
+        <p class="trd-sub" data-version-reason ${reason ? '' : 'hidden'}>${(0, help_1.esc)(reason ?? '')}</p>
+        <div class="trd-release-actions">
+            ${stable && stable !== releases.running ? `<button class="btn btn-secondary btn-sm" data-stable ${disable(blocked || !!releases.error || !!releases.reason(stable))}>Return to stable ${(0, help_1.esc)(stable)}…</button>` : ''}
+            <button class="btn btn-secondary btn-sm" data-restore ${disable(blocked || !!releases.error || !previous || !!releases.reason(previous) || previous === releases.running)}>Restore previous version${previous ? ` (${(0, help_1.esc)(previous)})` : ''}…</button>
+        </div>
+        ${!previous ? '<p class="trd-sub">No previous version saved.</p>' : releases.reason(previous) ? `<p class="trd-sub">Previous version unavailable: ${(0, help_1.esc)(releases.reason(previous))}</p>` : ''}
+        <h5>Disable or uninstall</h5>
+        <p class="trd-sub">Saved connections, settings, passwords and remote setup are kept.</p>
+        <div class="trd-release-actions"><button class="btn btn-secondary btn-sm" data-plugins>Manage in Tabby…</button><button class="btn btn-outline-danger btn-sm" data-uninstall ${disable(blocked)}>Uninstall plugin…</button><a href="#" data-recovery>Cleanup instructions</a></div>`;
+    root.querySelector('[data-channel]').addEventListener('change', e => {
+        void releases.setChannel(e.target.value);
+    });
+    root.querySelector('[data-pause]').addEventListener('change', e => { void releases.setPaused(!e.target.checked); });
+    root.querySelector('[data-check]').addEventListener('click', () => { void releases.refreshCatalog(true); });
+    root.querySelector('[data-version]').addEventListener('change', () => renderReleaseSettings(root, releases, actions));
+    root.querySelector('[data-install]').addEventListener('click', () => { void releases.install(selected); });
+    root.querySelector('[data-stable]')?.addEventListener('click', () => { if (stable) {
+        void releases.install(stable, true);
+    } });
+    root.querySelector('[data-restore]').addEventListener('click', () => { if (previous) {
+        void releases.install(previous);
+    } });
+    root.querySelector('[data-uninstall]').addEventListener('click', () => { void releases.uninstall(); });
+    root.querySelector('[data-plugins]').addEventListener('click', actions.plugins);
+    root.querySelector('[data-recovery]').addEventListener('click', e => { e.preventDefault(); actions.link(`${help_1.TROUBLESHOOTING_URL}#recovery`); });
+    root.querySelector('[data-selected-notes]').addEventListener('click', () => actions.notes(selected));
+    root.querySelectorAll('[data-release-notes]').forEach(el => el.addEventListener('click', () => actions.notes(el.dataset.releaseNotes)));
+}