@dsh-cove/dsh-web-all 0.0.0-stage → 0.4.4

package/lib/types/client/sidebar/panels/ssh/TerminalTab.js

@@ -0,0 +1,207 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Terminal tab: an xterm.js PTY view over the host's WebSocket terminal route.
+ * A host <select> plus connect/disconnect controls; the terminal container is
+ * sized by FitAddon (default 80x24 before first fit). On remote exit the last
+ * output stays visible and input is disabled. xterm's stylesheet is injected
+ * once per page load (module-level guard).
+ */
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { XTERM_CSS } from "./xterm.css.js";
+import { errorMessage, resolveTerminalFontFamily, tt } from "./helpers.js";
+import css from './panel.module.css';
+/** Injected-once guard for the xterm stylesheet (one tag per page load). */
+let xtermCssInjected = false;
+function ensureXtermCss() {
+    if (xtermCssInjected || typeof document === 'undefined')
+        return;
+    xtermCssInjected = true;
+    if (document.querySelector('style[data-dsh-ssh-xterm]') !== null)
+        return;
+    const style = document.createElement('style');
+    style.dataset.dshSshXterm = '';
+    style.textContent = XTERM_CSS;
+    document.head.appendChild(style);
+}
+/** No-op source stand-in so the hook order stays stable without the prop. */
+const NO_FONT_SOURCE = {
+    get: () => undefined,
+    subscribe: () => () => undefined,
+};
+/** The xterm terminal view. */
+export function TerminalTab({ api, presetAlias, requestId, terminalFont }) {
+    const [hosts, setHosts] = useState([]);
+    const [alias, setAlias] = useState(presetAlias ?? '');
+    const [status, setStatus] = useState({ kind: 'idle' });
+    const [authPrompt, setAuthPrompt] = useState(undefined);
+    const [authInputs, setAuthInputs] = useState([]);
+    const containerRef = useRef(null);
+    const termRef = useRef(null);
+    const fitRef = useRef(null);
+    const connRef = useRef(null);
+    const dataSubRef = useRef(null);
+    const fontSource = terminalFont ?? NO_FONT_SOURCE;
+    const fontOverride = useSyncExternalStore(fontSource.subscribe, fontSource.get);
+    useEffect(() => { ensureXtermCss(); }, []);
+    // Live re-apply a terminal-font change (issue #577): xterm re-measures
+    // and repaints on the options write; a refit keeps cols/rows aligned with
+    // the new metrics and the remote PTY learns the new size.
+    useEffect(() => {
+        const term = termRef.current;
+        if (term === null)
+            return;
+        const next = resolveTerminalFontFamily(fontOverride);
+        if (term.options.fontFamily === next)
+            return;
+        term.options.fontFamily = next;
+        fitRef.current?.fit();
+        connRef.current?.resize(term.cols, term.rows);
+    }, [fontOverride]);
+    // Fetch the host list on tab activation.
+    useEffect(() => {
+        let disposed = false;
+        void (async () => {
+            try {
+                const list = await api.listHosts();
+                if (!disposed)
+                    setHosts(list);
+            }
+            catch (cause) {
+                if (!disposed)
+                    setStatus({ kind: 'error', detail: errorMessage(cause) });
+            }
+        })();
+        return () => { disposed = true; };
+    }, [api]);
+    // A hosts-tab connect action preselects its alias here.
+    useEffect(() => {
+        if (presetAlias !== undefined)
+            setAlias(presetAlias);
+    }, [presetAlias, requestId]);
+    const teardown = () => {
+        setAuthPrompt(undefined);
+        setAuthInputs([]);
+        const connection = connRef.current;
+        connRef.current = null;
+        if (connection !== null) {
+            connection.onReady = undefined;
+            connection.onOutput = undefined;
+            connection.onExit = undefined;
+            connection.onAuthPrompt = undefined;
+            connection.close();
+        }
+        // Release the xterm input subscription explicitly and dispose the
+        // terminal so no listener (or the terminal Renderer) survives a
+        // disconnect or the tab unmounting.
+        dataSubRef.current?.dispose();
+        dataSubRef.current = null;
+        termRef.current?.dispose();
+        termRef.current = null;
+        fitRef.current = null;
+    };
+    // Unmount cleanup (never touches state on an unmounting component).
+    useEffect(() => () => { teardown(); }, []);
+    // Keep the terminal fitted to its container. A window resize is only one
+    // trigger: the status banner appearing after connect, panel resizes, and
+    // sidebar toggles all change the container without a window resize, so the
+    // container itself is observed (otherwise the viewport keeps the pre-banner
+    // height and the last line is clipped below the fold). ResizeObserver may
+    // be absent (jsdom tests); the window listener then remains the only path.
+    useEffect(() => {
+        let lastCols = -1;
+        let lastRows = -1;
+        const sync = () => {
+            const term = termRef.current;
+            const fit = fitRef.current;
+            if (term === null || fit === null)
+                return;
+            fit.fit();
+            const conn = connRef.current;
+            if (conn !== null && (term.cols !== lastCols || term.rows !== lastRows)) {
+                lastCols = term.cols;
+                lastRows = term.rows;
+                conn.resize(term.cols, term.rows);
+            }
+        };
+        window.addEventListener('resize', sync);
+        const container = containerRef.current;
+        if (container === null || typeof ResizeObserver === 'undefined') {
+            return () => { window.removeEventListener('resize', sync); };
+        }
+        const observer = new ResizeObserver(() => { sync(); });
+        observer.observe(container);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', sync);
+        };
+    }, []);
+    const connect = () => {
+        const target = alias;
+        const container = containerRef.current;
+        if (target === '' || container === null)
+            return;
+        if (status.kind === 'connecting' || status.kind === 'connected')
+            return;
+        teardown();
+        setStatus({ kind: 'connecting' });
+        const term = new Terminal({
+            convertEol: false,
+            cursorBlink: true,
+            fontSize: 13,
+            fontFamily: resolveTerminalFontFamily(fontOverride),
+            theme: { background: '#0b0e14', foreground: '#d8dee9', cursor: '#a3b8d0' },
+        });
+        const fit = new FitAddon();
+        term.loadAddon(fit);
+        term.open(container);
+        fit.fit();
+        const connection = api.openTerminal(target, term.cols, term.rows);
+        termRef.current = term;
+        fitRef.current = fit;
+        connRef.current = connection;
+        let settled = false;
+        dataSubRef.current = term.onData(data => { connection.send(data); });
+        connection.onAuthPrompt = (name, instructions, prompts) => {
+            setAuthPrompt({ name, instructions, prompts });
+            setAuthInputs(prompts.map(() => ''));
+        };
+        connection.onReady = () => {
+            setAuthPrompt(undefined);
+            setAuthInputs([]);
+            setStatus({ kind: 'connected', alias: target });
+        };
+        connection.onOutput = data => { term.write(data); };
+        connection.onExit = (_code, error) => {
+            if (settled)
+                return;
+            settled = true;
+            setAuthPrompt(undefined);
+            setAuthInputs([]);
+            dataSubRef.current?.dispose();
+            dataSubRef.current = null;
+            term.options.disableStdin = true;
+            connRef.current = null;
+            // Keep the last output visible; input is now disabled.
+            setStatus({ kind: 'exited', alias: target, detail: error });
+        };
+    };
+    const disconnect = () => {
+        teardown();
+        setStatus({ kind: 'idle' });
+    };
+    const submitAuth = (e) => {
+        e?.preventDefault();
+        if (connRef.current === null || authPrompt === undefined)
+            return;
+        connRef.current.sendAuthResponse(authInputs);
+        setAuthPrompt(undefined);
+    };
+    const active = status.kind === 'connecting' || status.kind === 'connected';
+    return (_jsxs("div", { className: css.termBody, children: [_jsxs("div", { className: css.controls, children: [_jsxs("select", { className: css.input, value: alias, onChange: event => { setAlias(event.target.value); }, children: [_jsx("option", { value: "", children: tt('terminal.selectHost') }), hosts.map(host => _jsxs("option", { value: host.alias, children: [host.alias, " (", host.host, ")"] }, host.alias))] }), _jsx("button", { type: "button", className: css.primaryButton, disabled: alias === '' || active, onClick: connect, children: tt('terminal.connect') }), _jsx("button", { type: "button", className: css.ghostButton, disabled: !active, onClick: disconnect, children: tt('terminal.disconnect') })] }), status.kind === 'connecting' && _jsx("div", { className: css.banner, "data-kind": "info", children: tt('terminal.connecting') }), status.kind === 'connected' && _jsx("div", { className: css.banner, "data-kind": "ok", children: tt('terminal.ready', { alias: status.alias }) }), status.kind === 'exited' && (_jsxs("div", { className: css.banner, "data-kind": "info", children: [tt('terminal.exited', { alias: status.alias }), status.detail !== undefined ? ' (' + status.detail + ')' : ''] })), status.kind === 'error' && _jsx("div", { className: css.banner, "data-kind": "error", children: tt('terminal.error', { error: status.detail }) }), _jsxs("div", { className: css.termWrap, children: [_jsx("div", { ref: containerRef, className: css.termContainer, "data-dsh-part": "terminal" }), status.kind === 'idle' && (_jsx("div", { className: css.termPlaceholder, children: hosts.length === 0 ? tt('hosts.empty') : tt('terminal.placeholder') })), authPrompt !== undefined && (_jsx("div", { className: css.modalBackdrop, style: { position: 'absolute', zIndex: 10 }, children: _jsxs("form", { className: css.modalCard, style: { maxWidth: 420 }, onSubmit: submitAuth, children: [_jsx("div", { className: css.modalHeader, children: _jsx("h3", { className: css.modalTitle, children: authPrompt.name || tt('terminal.auth.title') }) }), _jsx("p", { className: css.hint, children: authPrompt.instructions || tt('terminal.auth.hint') }), authPrompt.prompts.map((p, idx) => (_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: p.prompt.trim() || tt('terminal.auth.title') }), _jsx("input", { autoFocus: idx === 0, className: css.input, type: p.echo ? 'text' : 'password', placeholder: tt('terminal.auth.placeholder'), value: authInputs[idx] ?? '', onChange: event => {
+                                                const next = [...authInputs];
+                                                next[idx] = event.target.value;
+                                                setAuthInputs(next);
+                                            } })] }, idx))), _jsxs("div", { className: css.modalFooter, children: [_jsx("button", { type: "button", className: css.ghostButton, onClick: disconnect, children: tt('terminal.auth.cancel') }), _jsx("button", { type: "submit", className: css.primaryButton, children: tt('terminal.auth.submit') })] })] }) }))] })] }));
+}

package/lib/types/client/sidebar/panels/ssh/TransferTab.d.ts

@@ -0,0 +1,8 @@
+import type { SshApi } from './api.ts';
+/** Transfer tab props. */
+export interface TransferTabProps {
+    api: SshApi;
+}
+/** The upload/download tab. */
+export declare function TransferTab({ api }: TransferTabProps): import("react").JSX.Element;
+//# sourceMappingURL=TransferTab.d.ts.map

package/lib/types/client/sidebar/panels/ssh/TransferTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransferTab.d.ts","sourceRoot":"","sources":["../../../../../../src/client/sidebar/panels/ssh/TransferTab.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAKtC,0BAA0B;AAC1B,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAA;CACZ;AAoCD,+BAA+B;AAC/B,wBAAgB,WAAW,CAAC,EAAE,GAAG,EAAE,EAAE,gBAAgB,+BAoLpD"}

package/lib/types/client/sidebar/panels/ssh/TransferTab.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Transfer tab: upload/download one file with progress, plus a toggleable
+ * remote directory browser (api.ls) whose file rows fill the remote path
+ * input and whose directory rows navigate.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { errorMessage, tt } from "./helpers.js";
+import css from './panel.module.css';
+/** Join a directory path with a child entry name. */
+function joinRemotePath(dir, name) {
+    const base = dir.endsWith('/') ? dir : dir + '/';
+    return base + name;
+}
+/** Parent path of a remote directory ('/' stays '/'). */
+function parentOf(dir) {
+    const trimmed = dir.replace(/\/+$/, '');
+    const index = trimmed.lastIndexOf('/');
+    if (index <= 0)
+        return '/';
+    return trimmed.slice(0, index);
+}
+/** Human byte sizes through the transfer.* locale templates. */
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return tt('transfer.bytes', { value: bytes });
+    if (bytes < 1024 * 1024)
+        return tt('transfer.kib', { value: (bytes / 1024).toFixed(1) });
+    if (bytes < 1024 * 1024 * 1024)
+        return tt('transfer.mib', { value: (bytes / (1024 * 1024)).toFixed(1) });
+    return tt('transfer.gib', { value: (bytes / (1024 * 1024 * 1024)).toFixed(1) });
+}
+/** The upload/download tab. */
+export function TransferTab({ api }) {
+    const [hosts, setHosts] = useState([]);
+    const [listError, setListError] = useState(null);
+    const [alias, setAlias] = useState('');
+    const [remotePath, setRemotePath] = useState('');
+    const [browseOpen, setBrowseOpen] = useState(false);
+    const [browseDir, setBrowseDir] = useState('/');
+    const [entries, setEntries] = useState([]);
+    const [browsing, setBrowsing] = useState(false);
+    const [transfer, setTransfer] = useState(null);
+    const [status, setStatus] = useState(null);
+    const fileRef = useRef(null);
+    const seqRef = useRef(0);
+    useEffect(() => {
+        let disposed = false;
+        void (async () => {
+            try {
+                const list = await api.listHosts();
+                if (!disposed)
+                    setHosts(list);
+            }
+            catch (cause) {
+                if (!disposed)
+                    setListError(errorMessage(cause));
+            }
+        })();
+        return () => { disposed = true; };
+    }, [api]);
+    const loadDir = async (path) => {
+        if (alias === '')
+            return;
+        const seq = ++seqRef.current;
+        setBrowsing(true);
+        try {
+            const list = await api.ls(alias, path);
+            if (seq !== seqRef.current)
+                return;
+            const sorted = [...list].sort((a, b) => {
+                if (a.type !== b.type)
+                    return a.type === 'dir' ? -1 : 1;
+                return a.name.localeCompare(b.name);
+            });
+            setEntries(sorted);
+            setBrowseDir(path);
+            setListError(null);
+        }
+        catch (cause) {
+            if (seq === seqRef.current)
+                setListError(errorMessage(cause));
+        }
+        finally {
+            if (seq === seqRef.current)
+                setBrowsing(false);
+        }
+    };
+    const openBrowse = () => {
+        if (alias === '')
+            return;
+        setBrowseOpen(true);
+        const path = remotePath.trim() === '' ? '/' : remotePath.trim();
+        void loadDir(path);
+    };
+    const handleFile = async (event) => {
+        const file = event.target.files?.[0];
+        event.target.value = '';
+        if (file === undefined || alias === '' || remotePath.trim() === '' || transfer !== null)
+            return;
+        setStatus(null);
+        setTransfer({ kind: 'upload', phase: 'connecting', percent: 0, file: file.name });
+        try {
+            const outcome = await api.uploadFile(file, alias, remotePath.trim(), progress => {
+                setTransfer(prev => prev === null ? prev : {
+                    kind: 'upload',
+                    phase: progress.phase,
+                    percent: progress.percent,
+                    speedBps: progress.speedBps,
+                    file: progress.file,
+                });
+            });
+            setStatus({ kind: 'ok', bytes: outcome.transferredBytes });
+        }
+        catch (cause) {
+            setStatus({ kind: 'error', error: errorMessage(cause) });
+        }
+        finally {
+            setTransfer(null);
+        }
+    };
+    const handleDownload = async () => {
+        if (alias === '' || remotePath.trim() === '' || transfer !== null)
+            return;
+        setStatus(null);
+        setTransfer({ kind: 'download', phase: 'connecting', percent: 0, file: remotePath.trim() });
+        try {
+            const result = await api.downloadFile(alias, remotePath.trim(), progress => {
+                setTransfer(prev => prev === null ? prev : {
+                    kind: 'download',
+                    phase: progress.phase,
+                    percent: progress.percent,
+                    speedBps: progress.speedBps,
+                    file: progress.file,
+                });
+            });
+            // Streamed downloads (File System Access API) were already saved; the
+            // Blob fallback triggers a browser save here.
+            if (!result.streamed && result.blob !== undefined) {
+                const url = URL.createObjectURL(result.blob);
+                const anchor = document.createElement('a');
+                anchor.href = url;
+                anchor.download = result.filename;
+                document.body.appendChild(anchor);
+                anchor.click();
+                anchor.remove();
+                // Defer the revoke: some engines need the URL alive past the click.
+                setTimeout(() => { URL.revokeObjectURL(url); }, 10_000);
+            }
+            setStatus({ kind: 'ok', bytes: result.bytes });
+        }
+        catch (cause) {
+            setStatus({ kind: 'error', error: errorMessage(cause) });
+        }
+        finally {
+            setTransfer(null);
+        }
+    };
+    const ready = alias !== '' && remotePath.trim() !== '' && transfer === null;
+    return (_jsxs("div", { className: css.tabBody, children: [_jsxs("div", { className: css.controls, children: [_jsxs("select", { className: css.input, value: alias, onChange: event => { setAlias(event.target.value); }, children: [_jsx("option", { value: "", children: tt('transfer.selectHost') }), hosts.map(host => _jsxs("option", { value: host.alias, children: [host.alias, " (", host.host, ")"] }, host.alias))] }), _jsx("input", { className: css.input, placeholder: tt('transfer.remotePathHint'), value: remotePath, onChange: event => { setRemotePath(event.target.value); } }), _jsx("button", { type: "button", className: css.ghostButton, disabled: alias === '', onClick: openBrowse, children: tt('transfer.browseRemote') }), _jsx("div", { className: css.toolbarSpacer }), _jsx("button", { type: "button", className: css.primaryButton, disabled: !ready, onClick: () => { fileRef.current?.click(); }, children: tt('transfer.upload') }), _jsx("button", { type: "button", className: css.ghostButton, disabled: !ready, onClick: () => { void handleDownload(); }, children: tt('transfer.download') }), _jsx("input", { ref: fileRef, type: "file", className: css.hiddenFile, onChange: event => { void handleFile(event); } })] }), listError !== null && _jsx("div", { className: css.banner, "data-kind": "error", children: tt('common.error', { error: listError }) }), browseOpen && (_jsxs("div", { className: css.browsePanel, children: [_jsxs("div", { className: css.browseHeader, children: [_jsx("span", { className: css.browsePath, children: browseDir }), _jsx("button", { type: "button", className: css.linkButton, disabled: browsing, onClick: () => { void loadDir(browseDir); }, children: tt('transfer.refresh') })] }), _jsxs("div", { className: css.browseList, children: [browseDir !== '/' && (_jsxs("button", { type: "button", className: css.dirRow, "data-up": true, onClick: () => { void loadDir(parentOf(browseDir)); }, children: [_jsx("span", { className: css.dirName, children: tt('transfer.upLevel') }), _jsx("span", { className: css.dirType }), _jsx("span", { className: css.dirSize })] })), entries.map(entry => (_jsxs("button", { type: "button", className: css.dirRow, "data-type": entry.type, onClick: () => {
+                                    if (entry.type === 'dir') {
+                                        void loadDir(joinRemotePath(browseDir, entry.name));
+                                    }
+                                    else {
+                                        setRemotePath(joinRemotePath(browseDir, entry.name));
+                                    }
+                                }, children: [_jsx("span", { className: css.dirName, children: entry.name }), _jsx("span", { className: css.dirType, children: entry.type === 'dir' ? '[' + tt('transfer.dir') + ']' : entry.type === 'file' ? '[' + tt('transfer.file') + ']' : '' }), _jsx("span", { className: css.dirSize, children: formatBytes(entry.size) })] }, entry.name)))] })] })), transfer !== null && (_jsxs("div", { className: css.transferBlock, children: [_jsxs("div", { className: css.progressMeta, children: [_jsx("span", { children: transfer.kind === 'upload' ? tt('transfer.uploading', { file: transfer.file }) : tt('transfer.downloading') }), _jsx("span", { children: tt('transfer.percent', { value: Math.round(transfer.percent) }) }), transfer.speedBps !== undefined && transfer.phase === 'transferring' && _jsx("span", { children: tt('transfer.speed', { value: formatBytes(transfer.speedBps) }) })] }), _jsx("div", { className: css.progressTrack, children: _jsx("div", { className: css.progressBar, style: { width: Math.min(100, Math.max(0, transfer.percent)) + '%' } }) })] })), status !== null && (_jsx("div", { className: css.banner, "data-kind": status.kind, children: status.kind === 'ok' ? tt('transfer.done', { bytes: status.bytes }) : tt('transfer.failed', { error: status.error }) }))] }));
+}

package/lib/types/client/sidebar/panels/ssh/TunnelsTab.d.ts

@@ -0,0 +1,18 @@
+import type { SshApi } from './api.ts';
+import type { TunnelInfo } from '../../../../core/ssh/protocol.ts';
+/** Live-tunnel polling interval while the tab is mounted (ms). */
+export declare const TUNNEL_POLL_MS = 5000;
+/**
+ * Return `next` only when the tunnel list changed in a user-visible way
+ * (identity, ordering or any renderable field), else `null` so a poll tick
+ * with no real change keeps the previous reference and React skips the
+ * re-render. `prev === null` (first load) always accepts the list.
+ */
+export declare function diffTunnels(prev: TunnelInfo[] | null, next: TunnelInfo[]): TunnelInfo[] | null;
+/** Tunnels tab props. */
+export interface TunnelsTabProps {
+    api: SshApi;
+}
+/** The tunnels tab. */
+export declare function TunnelsTab({ api }: TunnelsTabProps): import("react").JSX.Element;
+//# sourceMappingURL=TunnelsTab.d.ts.map

package/lib/types/client/sidebar/panels/ssh/TunnelsTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TunnelsTab.d.ts","sourceRoot":"","sources":["../../../../../../src/client/sidebar/panels/ssh/TunnelsTab.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,KAAK,EAAkB,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAIlF,kEAAkE;AAClE,eAAO,MAAM,cAAc,OAAO,CAAA;AAElC;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,GAAG,IAAI,CAc9F;AAED,yBAAyB;AACzB,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,uBAAuB;AACvB,wBAAgB,UAAU,CAAC,EAAE,GAAG,EAAE,EAAE,eAAe,+BAiKlD"}

package/lib/types/client/sidebar/panels/ssh/TunnelsTab.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Tunnels tab: the live local port-forward list (auto-refresh every 5s while
+ * mounted) with per-row stop, a stop-all action scoped to the selected alias,
+ * and a new-tunnel form.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { errorMessage, tt } from "./helpers.js";
+import css from './panel.module.css';
+/** Live-tunnel polling interval while the tab is mounted (ms). */
+export const TUNNEL_POLL_MS = 5000;
+/**
+ * Return `next` only when the tunnel list changed in a user-visible way
+ * (identity, ordering or any renderable field), else `null` so a poll tick
+ * with no real change keeps the previous reference and React skips the
+ * re-render. `prev === null` (first load) always accepts the list.
+ */
+export function diffTunnels(prev, next) {
+    if (prev === null)
+        return next;
+    if (prev.length !== next.length)
+        return next;
+    for (let index = 0; index < prev.length; index += 1) {
+        const a = prev[index];
+        const b = next[index];
+        if (a.id !== b.id || a.alias !== b.alias || a.state !== b.state
+            || a.localPort !== b.localPort || a.remoteHost !== b.remoteHost
+            || a.remotePort !== b.remotePort || a.startedAt !== b.startedAt
+            || a.error !== b.error) {
+            return next;
+        }
+    }
+    return null;
+}
+/** The tunnels tab. */
+export function TunnelsTab({ api }) {
+    const [hosts, setHosts] = useState([]);
+    const [tunnels, setTunnels] = useState(null);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);
+    const [alias, setAlias] = useState('');
+    const [remotePort, setRemotePort] = useState('');
+    const [remoteHost, setRemoteHost] = useState('');
+    const [localPort, setLocalPort] = useState('');
+    const [busy, setBusy] = useState(false);
+    // Hosts for the new-tunnel form (failure does not block tunnel listing).
+    useEffect(() => {
+        let disposed = false;
+        void (async () => {
+            try {
+                const list = await api.listHosts();
+                if (!disposed)
+                    setHosts(list);
+            }
+            catch {
+                // Tunnels may still exist; keep the list usable.
+            }
+        })();
+        return () => { disposed = true; };
+    }, [api]);
+    // Live list with a TUNNEL_POLL_MS heartbeat while mounted. Every load
+    // carries a sequence number so stale responses never overwrite newer
+    // state, and the list is diff-set so an unchanged poll tick keeps the
+    // previous state reference (no wasted re-render).
+    const seqRef = useRef(0);
+    useEffect(() => {
+        const load = async () => {
+            const seq = ++seqRef.current;
+            try {
+                const list = await api.listTunnels();
+                if (seq !== seqRef.current)
+                    return;
+                setTunnels(prev => diffTunnels(prev, list) ?? prev);
+                setError(null);
+            }
+            catch (cause) {
+                if (seq !== seqRef.current)
+                    return;
+                setError(errorMessage(cause));
+            }
+        };
+        void load();
+        const timer = setInterval(() => { void load(); }, TUNNEL_POLL_MS);
+        return () => { clearInterval(timer); };
+    }, [api]);
+    const refresh = async () => {
+        const seq = ++seqRef.current;
+        try {
+            const list = await api.listTunnels();
+            if (seq !== seqRef.current)
+                return;
+            setTunnels(list);
+            setError(null);
+        }
+        catch (cause) {
+            if (seq !== seqRef.current)
+                return;
+            setError(errorMessage(cause));
+        }
+    };
+    const stopTunnel = async (tunnelId) => {
+        try {
+            await api.stopTunnel(tunnelId);
+            await refresh();
+        }
+        catch (cause) {
+            setError(errorMessage(cause));
+        }
+    };
+    const stopAll = async () => {
+        if (!window.confirm(tt('tunnel.stopAllConfirm')))
+            return;
+        setBusy(true);
+        try {
+            await api.stopAllTunnels(alias === '' ? undefined : alias);
+            await refresh();
+        }
+        catch (cause) {
+            setError(errorMessage(cause));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const start = async () => {
+        if (alias === '' || remotePort.trim() === '')
+            return;
+        const remotePortNumber = Number(remotePort);
+        const localPortNumber = localPort.trim() === '' ? undefined : Number(localPort);
+        if (!Number.isInteger(remotePortNumber) || remotePortNumber < 1 || remotePortNumber > 65535) {
+            setError(tt('form.portInvalid'));
+            return;
+        }
+        if (localPortNumber !== undefined && (!Number.isInteger(localPortNumber) || localPortNumber < 1 || localPortNumber > 65535)) {
+            setError(tt('form.portInvalid'));
+            return;
+        }
+        setBusy(true);
+        setNotice(null);
+        try {
+            const tunnel = await api.startTunnel({
+                alias,
+                remotePort: remotePortNumber,
+                remoteHost: remoteHost.trim() === '' ? undefined : remoteHost.trim(),
+                localPort: localPortNumber,
+            });
+            setNotice(tt('tunnel.started', { localPort: tunnel.localPort }));
+            setRemotePort('');
+            setRemoteHost('');
+            setLocalPort('');
+            await refresh();
+        }
+        catch (cause) {
+            setError(tt('tunnel.failed', { error: errorMessage(cause) }));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("div", { className: css.tabBody, children: [_jsxs("div", { className: css.controls, children: [_jsx("button", { type: "button", className: css.ghostButton, disabled: busy, onClick: () => { void stopAll(); }, children: tt('tunnel.stopAll') }), _jsx("button", { type: "button", className: css.ghostButton, onClick: () => { void refresh(); }, children: tt('common.refresh') })] }), error !== null && _jsx("div", { className: css.banner, "data-kind": "error", children: error }), notice !== null && _jsx("div", { className: css.banner, "data-kind": "ok", children: notice }), tunnels !== null && tunnels.length === 0 && _jsx("div", { className: css.empty, children: tt('tunnel.empty') }), _jsx("div", { className: css.tunnelList, children: (tunnels ?? []).map(tunnel => (_jsxs("div", { className: css.tunnelRow, "data-state": tunnel.state, children: [_jsx("span", { className: css.tunnelLabel, children: tt('tunnel.row', { alias: tunnel.alias, localPort: tunnel.localPort, remoteHost: tunnel.remoteHost, remotePort: tunnel.remotePort }) }), _jsx("button", { type: "button", className: css.ghostButton, onClick: () => { void stopTunnel(tunnel.id); }, children: tt('tunnel.stop') })] }, tunnel.id))) }), _jsxs("div", { className: css.formCard, children: [_jsxs("div", { className: css.formRow, children: [_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('tunnel.alias') }), _jsxs("select", { className: css.input, value: alias, onChange: event => { setAlias(event.target.value); }, children: [_jsx("option", { value: "", children: tt('terminal.selectHost') }), hosts.map(host => _jsx("option", { value: host.alias, children: host.alias }, host.alias))] })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('tunnel.remotePort') }), _jsx("input", { className: css.input, type: "number", min: 1, max: 65535, value: remotePort, onChange: event => { setRemotePort(event.target.value); } })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('tunnel.remoteHost') }), _jsx("input", { className: css.input, value: remoteHost, placeholder: tt('tunnel.remoteHostHint'), onChange: event => { setRemoteHost(event.target.value); } })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('tunnel.localPort') }), _jsx("input", { className: css.input, type: "number", min: 1, max: 65535, value: localPort, placeholder: tt('tunnel.localPortHint'), onChange: event => { setLocalPort(event.target.value); } })] })] }), _jsx("div", { children: _jsx("button", { type: "button", className: css.primaryButton, disabled: busy || alias === '' || remotePort.trim() === '', onClick: () => { void start(); }, children: tt('tunnel.start') }) })] })] }));
+}

package/lib/types/client/sidebar/panels/ssh/api.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Browser-side API client for the /api/dsh-ssh route family. The only data
+ * access path the panel components use — plain fetch/WebSocket, same origin.
+ */
+import { type ClusterResult, type ExecResult, type HostPayload, type ImportResult, type RemoteDirEntry, type SshHostSummary, type TestResult, type TransferProgress, type TunnelInfo } from '../../../../core/ssh/protocol.ts';
+/** Error carrying the route's JSON error message. */
+export declare class SshApiError extends Error {
+    constructor(message: string);
+}
+/** One open terminal connection (WebSocket JSON frames). */
+export interface TerminalConnection {
+    /** Fired on the ready frame (shell is up). */
+    onReady: (() => void) | undefined;
+    /** Fired on every output frame. */
+    onOutput: ((data: string) => void) | undefined;
+    /** Fired on the exit frame (or transport error). */
+    onExit: ((code: number | null, error?: string) => void) | undefined;
+    /** Fired when the server requests keyboard-interactive 2FA. */
+    onAuthPrompt: ((name: string, instructions: string, prompts: Array<{
+        prompt: string;
+        echo: boolean;
+    }>) => void) | undefined;
+    /** Send raw input to the remote shell. */
+    send(data: string): void;
+    /** Resize the remote PTY. */
+    resize(cols: number, rows: number): void;
+    /** Send interactive 2FA response codes to the remote server. */
+    sendAuthResponse(responses: string[]): void;
+    /** Close the socket and the remote session. */
+    close(): void;
+}
+/** The browser half's only data entry point. */
+export declare class SshApi {
+    listHosts(queryText?: string): Promise<SshHostSummary[]>;
+    createHost(payload: HostPayload): Promise<SshHostSummary>;
+    updateHost(alias: string, patch: HostPayload): Promise<SshHostSummary>;
+    deleteHost(alias: string): Promise<void>;
+    importSshConfig(): Promise<ImportResult>;
+    testHost(alias: string): Promise<TestResult>;
+    exec(alias: string, command: string, timeoutMs?: number): Promise<ExecResult>;
+    cluster(options: {
+        command: string;
+        aliases?: string[];
+        environment?: string;
+        tags?: string[];
+        timeoutMs?: number;
+        maxWorkers?: number;
+    }): Promise<ClusterResult[]>;
+    ls(alias: string, path: string): Promise<RemoteDirEntry[]>;
+    listTunnels(): Promise<TunnelInfo[]>;
+    startTunnel(options: {
+        alias: string;
+        remotePort: number;
+        remoteHost?: string;
+        localPort?: number;
+    }): Promise<TunnelInfo>;
+    stopTunnel(tunnelId: string): Promise<boolean>;
+    stopAllTunnels(alias?: string): Promise<number>;
+    /**
+     * Upload one file (raw bytes) to a remote path. Progress arrives through
+     * the NDJSON response stream; resolves when the result frame lands.
+     */
+    uploadFile(file: File, alias: string, remotePath: string, onProgress?: (progress: TransferProgress) => void): Promise<{
+        transferredBytes: number;
+    }>;
+    /**
+     * Download a remote file with client-side progress. Streams straight to
+     * disk when the File System Access API is available (no full-file RAM
+     * copy); otherwise falls back to an in-memory Blob.
+     */
+    downloadFile(alias: string, remotePath: string, onProgress?: (progress: TransferProgress) => void): Promise<{
+        blob?: Blob;
+        filename: string;
+        streamed: boolean;
+        bytes: number;
+    }>;
+    /** Open a WebSocket terminal session. */
+    openTerminal(alias: string, cols: number, rows: number): TerminalConnection;
+}
+//# sourceMappingURL=api.d.ts.map