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

package/lib/types/client/sidebar/panels/memoir/types.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Shared client-side wire types (kept dependency-free so pure-logic tests can
+ * import them through Node's type stripping).
+ */
+export type SectionKey = 'work' | 'lessons' | 'actions' | 'note';
+export type MemoirStatus = 'active' | 'superseded' | 'archived';
+//# sourceMappingURL=types.d.ts.map

package/lib/types/client/sidebar/panels/memoir/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/client/sidebar/panels/memoir/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;AAChE,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,CAAA"}

package/lib/types/client/sidebar/panels/memoir/types.js

@@ -0,0 +1,5 @@
+/**
+ * Shared client-side wire types (kept dependency-free so pure-logic tests can
+ * import them through Node's type stripping).
+ */
+export {};

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

@@ -0,0 +1,8 @@
+import type { SshApi } from './api.ts';
+/** Cluster tab props. */
+export interface ClusterTabProps {
+    api: SshApi;
+}
+/** The cluster execution tab. */
+export declare function ClusterTab({ api }: ClusterTabProps): import("react").JSX.Element;
+//# sourceMappingURL=ClusterTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterTab.d.ts","sourceRoot":"","sources":["../../../../../../src/client/sidebar/panels/ssh/ClusterTab.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAKtC,yBAAyB;AACzB,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAA;CACZ;AAOD,iCAAiC;AACjC,wBAAgB,UAAU,CAAC,EAAE,GAAG,EAAE,EAAE,eAAe,+BAoGlD"}

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Cluster tab: run one command across many hosts (aliases / environment /
+ * tags filters) and inspect per-host results. Stdout/stderr render in
+ * collapsed <details> blocks; status renders as a colored badge.
+ */
+import { useState } from 'react';
+import { errorMessage, tt } from "./helpers.js";
+import css from './panel.module.css';
+/** Split a comma-separated input into a trimmed, non-empty string list. */
+function splitList(text) {
+    return text.split(',').map(part => part.trim()).filter(part => part !== '');
+}
+/** The cluster execution tab. */
+export function ClusterTab({ api }) {
+    const [command, setCommand] = useState('');
+    const [aliases, setAliases] = useState('');
+    const [environment, setEnvironment] = useState('');
+    const [tags, setTags] = useState('');
+    const [running, setRunning] = useState(false);
+    const [results, setResults] = useState(null);
+    const [error, setError] = useState(null);
+    const run = async () => {
+        if (command.trim() === '' || running)
+            return;
+        if (!window.confirm(tt('cluster.confirm')))
+            return;
+        setRunning(true);
+        setError(null);
+        try {
+            const aliasList = splitList(aliases);
+            const tagList = splitList(tags);
+            const outcome = await api.cluster({
+                command: command.trim(),
+                aliases: aliasList.length > 0 ? aliasList : undefined,
+                environment: environment.trim() === '' ? undefined : environment.trim(),
+                tags: tagList.length > 0 ? tagList : undefined,
+            });
+            setResults(outcome);
+        }
+        catch (cause) {
+            setError(errorMessage(cause));
+        }
+        finally {
+            setRunning(false);
+        }
+    };
+    return (_jsxs("div", { className: css.fillBody, children: [_jsxs("div", { className: css.clusterForm, children: [_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('cluster.command') }), _jsx("textarea", { className: css.input + ' ' + css.commandInput, value: command, onChange: event => { setCommand(event.target.value); } })] }), _jsxs("div", { className: css.clusterFilters, children: [_jsx("input", { className: css.input, placeholder: tt('cluster.aliases'), value: aliases, onChange: event => { setAliases(event.target.value); } }), _jsx("input", { className: css.input, placeholder: tt('cluster.environment'), value: environment, onChange: event => { setEnvironment(event.target.value); } }), _jsx("input", { className: css.input, placeholder: tt('cluster.tags'), value: tags, onChange: event => { setTags(event.target.value); } })] }), _jsx("div", { children: _jsx("button", { type: "button", className: css.primaryButton, disabled: running || command.trim() === '', onClick: () => { void run(); }, children: tt('cluster.run') }) })] }), error !== null && _jsx("div", { className: css.banner, "data-kind": "error", children: tt('common.error', { error }) }), results === null && error === null && _jsx("div", { className: css.empty, children: tt('cluster.empty') }), results !== null && results.length === 0 && _jsx("div", { className: css.empty, children: tt('cluster.noMatch') }), results !== null && results.length > 0 && (_jsx("div", { className: css.tableWrap, children: _jsxs("table", { className: css.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: tt('cluster.col.alias') }), _jsx("th", { children: tt('cluster.col.status') }), _jsx("th", { children: tt('cluster.col.exit') }), _jsx("th", { children: tt('cluster.col.stdout') }), _jsx("th", { children: tt('cluster.col.stderr') }), _jsx("th", { children: tt('cluster.col.error') }), _jsx("th", { children: tt('cluster.col.duration') })] }) }), _jsx("tbody", { children: results.map(result => {
+                                const status = result.ok ? 'ok' : result.timedOut === true ? 'timeout' : 'fail';
+                                const label = result.ok ? tt('cluster.ok') : result.timedOut === true ? tt('cluster.timeout') : tt('cluster.fail');
+                                return (_jsxs("tr", { children: [_jsx("td", { className: css.mono, children: result.alias }), _jsx("td", { children: _jsx("span", { className: css.badge, "data-status": status, children: label }) }), _jsx("td", { className: css.mono, children: result.exitCode ?? '-' }), _jsx("td", { children: result.stdout !== undefined && result.stdout !== '' && (_jsxs("details", { className: css.cellDetails, children: [_jsx("summary", { children: tt('cluster.col.stdout') }), _jsx("pre", { className: css.cellPre, children: result.stdout })] })) }), _jsx("td", { children: result.stderr !== undefined && result.stderr !== '' && (_jsxs("details", { className: css.cellDetails, children: [_jsx("summary", { children: tt('cluster.col.stderr') }), _jsx("pre", { className: css.cellPre, children: result.stderr })] })) }), _jsx("td", { className: css.cellMuted, children: result.error ?? '' }), _jsx("td", { className: css.mono, children: result.durationMs !== undefined ? result.durationMs + ' ms' : '-' })] }, result.alias));
+                            }) })] }) }))] }));
+}

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

@@ -0,0 +1,13 @@
+import type { SshApi } from './api.ts';
+import type { SshHostSummary } from '../../../../core/ssh/protocol.ts';
+/** Host form dialog props. */
+export interface HostFormDialogProps {
+    api: SshApi;
+    /** The host being edited; null/undefined means create. */
+    editing?: SshHostSummary | null;
+    onClose: () => void;
+    onSaved: (host: SshHostSummary) => void;
+}
+/** The create/edit host modal. */
+export declare function HostFormDialog({ api, editing, onClose, onSaved }: HostFormDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=HostFormDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HostFormDialog.d.ts","sourceRoot":"","sources":["../../../../../../src/client/sidebar/panels/ssh/HostFormDialog.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,KAAK,EAA4B,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAIhG,8BAA8B;AAC9B,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAA;IACX,0DAA0D;IAC1D,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;CACxC;AA6CD,kCAAkC;AAClC,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,mBAAmB,+BAiLrF"}

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

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Host form dialog: create/edit one stored host entry. A fixed backdrop with
+ * a centered card; Escape and backdrop clicks close it. Secrets (key path,
+ * passphrase, password) are never pre-filled when editing (the API only
+ * exposes the secret-free summary).
+ */
+import { useEffect, useState } from 'react';
+import { errorMessage, tt } from "./helpers.js";
+import css from './panel.module.css';
+/** Split a comma-separated input into a trimmed, non-empty string list. */
+function splitList(text) {
+    return text.split(',').map(part => part.trim()).filter(part => part !== '');
+}
+/** Initial form state: the summary's public fields plus empty secrets. */
+function blankOf(editing) {
+    return {
+        alias: editing?.alias ?? '',
+        host: editing?.host ?? '',
+        port: String(editing?.port ?? 22),
+        user: editing?.user ?? '',
+        authKind: editing?.auth ?? 'key',
+        keyPath: '',
+        passphrase: '',
+        password: '',
+        agentPath: '',
+        proxyJump: (editing?.proxyJump ?? []).join(', '),
+        description: editing?.description ?? '',
+        environment: editing?.environment ?? '',
+        tags: (editing?.tags ?? []).join(', '),
+        location: editing?.location ?? '',
+    };
+}
+/** The create/edit host modal. */
+export function HostFormDialog({ api, editing, onClose, onSaved }) {
+    const [form, setForm] = useState(() => blankOf(editing));
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    // Escape closes the dialog.
+    useEffect(() => {
+        const onKey = (event) => {
+            if (event.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => { document.removeEventListener('keydown', onKey); };
+    }, [onClose]);
+    const set = (key, value) => {
+        setForm(prev => ({ ...prev, [key]: value }));
+    };
+    const save = async () => {
+        const alias = form.alias.trim();
+        const host = form.host.trim();
+        const user = form.user.trim();
+        if (alias === '' || host === '' || user === '') {
+            setError(tt('form.required'));
+            return;
+        }
+        const port = Number(form.port);
+        if (!Number.isInteger(port) || port < 1 || port > 65535) {
+            setError(tt('form.portInvalid'));
+            return;
+        }
+        // A password-auth host needs a password on create; when editing, a blank
+        // secret field preserves the stored credential instead.
+        if (editing == null && form.authKind === 'password' && form.password === '') {
+            setError(tt('form.passwordRequired'));
+            return;
+        }
+        // Secrets are never echoed back by the API: when editing and the secret
+        // fields are left empty, the auth block is omitted so the stored
+        // authentication is preserved.
+        const secretEmpty = form.authKind === 'password'
+            ? form.password === ''
+            : form.authKind === 'key'
+                ? form.keyPath.trim() === ''
+                : form.agentPath.trim() === '';
+        const auth = editing != null && secretEmpty
+            ? undefined
+            : form.authKind === 'password'
+                ? { kind: 'password', password: form.password }
+                : form.authKind === 'key'
+                    ? { kind: 'key', keyPath: form.keyPath.trim(), passphrase: form.passphrase === '' ? undefined : form.passphrase }
+                    : { kind: 'agent', agentPath: form.agentPath.trim() === '' ? undefined : form.agentPath.trim() };
+        const payload = {
+            host,
+            port,
+            user,
+            auth,
+            proxyJump: splitList(form.proxyJump),
+            description: form.description.trim() === '' ? undefined : form.description.trim(),
+            environment: form.environment.trim() === '' ? undefined : form.environment.trim(),
+            tags: splitList(form.tags),
+            location: form.location.trim() === '' ? undefined : form.location.trim(),
+        };
+        setSaving(true);
+        setError(null);
+        try {
+            const saved = editing != null
+                ? await api.updateHost(editing.alias, payload)
+                : await api.createHost({ ...payload, alias });
+            onSaved(saved);
+        }
+        catch (cause) {
+            setError(errorMessage(cause));
+            setSaving(false);
+        }
+    };
+    return (_jsx("div", { className: css.modalBackdrop, onClick: onClose, children: _jsxs("div", { className: css.modal, role: "dialog", "aria-modal": "true", onClick: event => { event.stopPropagation(); }, children: [_jsx("h3", { className: css.modalTitle, children: editing != null ? tt('form.title.edit', { alias: editing.alias }) : tt('form.title.create') }), _jsxs("div", { className: css.formRow, children: [_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.alias') }), _jsx("input", { className: css.input, value: form.alias, disabled: editing != null, onChange: event => { set('alias', event.target.value); } }), _jsx("span", { className: css.hint, children: tt('form.aliasHint') })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.host') }), _jsx("input", { className: css.input, value: form.host, onChange: event => { set('host', event.target.value); } })] })] }), _jsxs("div", { className: css.formRow, children: [_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.port') }), _jsx("input", { className: css.input, type: "number", min: 1, max: 65535, value: form.port, onChange: event => { set('port', event.target.value); } })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.user') }), _jsx("input", { className: css.input, value: form.user, onChange: event => { set('user', event.target.value); } })] })] }), _jsxs("div", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.auth') }), _jsxs("div", { className: css.radioRow, children: [_jsxs("label", { className: css.radioLabel, children: [_jsx("input", { type: "radio", name: "dsh-ssh-auth", checked: form.authKind === 'key', onChange: () => { set('authKind', 'key'); } }), tt('form.auth.key')] }), _jsxs("label", { className: css.radioLabel, children: [_jsx("input", { type: "radio", name: "dsh-ssh-auth", checked: form.authKind === 'password', onChange: () => { set('authKind', 'password'); } }), tt('form.auth.password')] }), _jsxs("label", { className: css.radioLabel, children: [_jsx("input", { type: "radio", name: "dsh-ssh-auth", checked: form.authKind === 'agent', onChange: () => { set('authKind', 'agent'); } }), tt('form.auth.agent')] })] }), editing != null && _jsx("span", { className: css.hint, children: tt('form.authKeepHint') })] }), form.authKind === 'key' ? (_jsxs("div", { className: css.formRow, children: [_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.keyPath') }), _jsx("input", { className: css.input, value: form.keyPath, onChange: event => { set('keyPath', event.target.value); } }), _jsx("span", { className: css.hint, children: tt('form.keyPathHint') })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.passphrase') }), _jsx("input", { className: css.input, type: "password", value: form.passphrase, onChange: event => { set('passphrase', event.target.value); } })] })] })) : form.authKind === 'agent' ? (_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.agentPath') }), _jsx("input", { className: css.input, value: form.agentPath, onChange: event => { set('agentPath', event.target.value); } }), _jsx("span", { className: css.hint, children: tt('form.agentPathHint') })] })) : (_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.password') }), _jsx("input", { className: css.input, type: "password", value: form.password, onChange: event => { set('password', event.target.value); } }), _jsx("span", { className: css.hint, children: tt('form.passwordHint') })] })), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.proxyJump') }), _jsx("input", { className: css.input, value: form.proxyJump, onChange: event => { set('proxyJump', event.target.value); } }), _jsx("span", { className: css.hint, children: tt('form.proxyJumpHint') })] }), _jsxs("div", { className: css.formRow, children: [_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.environment') }), _jsx("input", { className: css.input, value: form.environment, onChange: event => { set('environment', event.target.value); } }), _jsx("span", { className: css.hint, children: tt('form.environmentHint') })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.location') }), _jsx("input", { className: css.input, value: form.location, onChange: event => { set('location', event.target.value); } })] })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.description') }), _jsx("input", { className: css.input, value: form.description, onChange: event => { set('description', event.target.value); } })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldLabel, children: tt('form.tags') }), _jsx("input", { className: css.input, value: form.tags, onChange: event => { set('tags', event.target.value); } }), _jsx("span", { className: css.hint, children: tt('form.tagsHint') })] }), error !== null && _jsx("p", { className: css.formError, children: tt('common.error', { error }) }), _jsxs("div", { className: css.modalFooter, children: [_jsx("button", { type: "button", className: css.ghostButton, disabled: saving, onClick: onClose, children: tt('form.cancel') }), _jsx("button", { type: "button", className: css.primaryButton, disabled: saving, onClick: () => { void save(); }, children: tt('form.save') })] })] }) }));
+}

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

@@ -0,0 +1,26 @@
+import type { SshApi } from './api.ts';
+import type { SshHostSummary } from '../../../../core/ssh/protocol.ts';
+/** Hosts tab props. */
+export interface HostsTabProps {
+    api: SshApi;
+    /** Connect the given alias in the terminal tab. */
+    onConnect: (alias: string) => void;
+}
+/** Host list grouping modes (#379). */
+export type HostGroupBy = 'none' | 'environment' | 'tags';
+/** One collapsible group section of the grouped host list. */
+export interface HostGroup {
+    /** Group key: the environment name, one tag, or '' for the ungrouped bucket. */
+    key: string;
+    hosts: SshHostSummary[];
+}
+/**
+ * Bucket hosts into collapsible groups (#379). Grouping by tags places a
+ * multi-tag host in every one of its tag groups (folder view); hosts without
+ * the grouping key land in the '' bucket, which always sorts last. Groups
+ * sort alphabetically; host order inside a group follows the API listing.
+ */
+export declare function groupHosts(hosts: SshHostSummary[], groupBy: HostGroupBy): HostGroup[];
+/** The hosts table plus its toolbar and dialogs. */
+export declare function HostsTab({ api, onConnect }: HostsTabProps): import("react").JSX.Element;
+//# sourceMappingURL=HostsTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HostsTab.d.ts","sourceRoot":"","sources":["../../../../../../src/client/sidebar/panels/ssh/HostsTab.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,KAAK,EAAE,cAAc,EAAc,MAAM,kCAAkC,CAAA;AAKlF,uBAAuB;AACvB,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAA;IACX,mDAAmD;IACnD,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAKD,uCAAuC;AACvC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,aAAa,GAAG,MAAM,CAAA;AAEzD,8DAA8D;AAC9D,MAAM,WAAW,SAAS;IACxB,gFAAgF;IAChF,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,cAAc,EAAE,CAAA;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,EAAE,EAAE,OAAO,EAAE,WAAW,GAAG,SAAS,EAAE,CAoBrF;AAED,oDAAoD;AACpD,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,aAAa,+BAoOzD"}

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

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Hosts tab: the host table with search (debounced through listHosts),
+ * add/edit/delete/test actions, ~/.ssh/config import, and a connect action
+ * that hands the alias to the terminal tab via onConnect.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { errorMessage, tt } from "./helpers.js";
+import { HostFormDialog } from "./HostFormDialog.js";
+import css from './panel.module.css';
+/**
+ * Bucket hosts into collapsible groups (#379). Grouping by tags places a
+ * multi-tag host in every one of its tag groups (folder view); hosts without
+ * the grouping key land in the '' bucket, which always sorts last. Groups
+ * sort alphabetically; host order inside a group follows the API listing.
+ */
+export function groupHosts(hosts, groupBy) {
+    if (groupBy === 'none')
+        return [{ key: '', hosts }];
+    const buckets = new Map();
+    const push = (key, host) => {
+        const bucket = buckets.get(key);
+        if (bucket === undefined)
+            buckets.set(key, [host]);
+        else
+            bucket.push(host);
+    };
+    for (const host of hosts) {
+        if (groupBy === 'environment') {
+            push(host.environment ?? '', host);
+        }
+        else if (host.tags.length === 0) {
+            push('', host);
+        }
+        else {
+            for (const tag of host.tags)
+                push(tag, host);
+        }
+    }
+    return [...buckets.entries()]
+        .sort(([a], [b]) => (a === '' ? 1 : b === '' ? -1 : a.localeCompare(b)))
+        .map(([key, group]) => ({ key, hosts: group }));
+}
+/** The hosts table plus its toolbar and dialogs. */
+export function HostsTab({ api, onConnect }) {
+    const [hosts, setHosts] = useState(null);
+    const [error, setError] = useState(null);
+    const [search, setSearch] = useState('');
+    const [testingAlias, setTestingAlias] = useState(null);
+    const [testResults, setTestResults] = useState({});
+    const [importing, setImporting] = useState(false);
+    const [notice, setNotice] = useState(null);
+    const [dialog, setDialog] = useState(null);
+    const [groupBy, setGroupBy] = useState('none');
+    const [collapsed, setCollapsed] = useState({});
+    const [testingGroup, setTestingGroup] = useState(null);
+    const seqRef = useRef(0);
+    // Unmount guard for the async load below: the seq check only orders
+    // overlapping loads, it does not stop a late resolution/rejection landing
+    // after the tab unmounted — a setState there races the test-environment
+    // teardown (window is not defined; observed as a main-CI flake). The
+    // sibling tabs (terminal / transfer / tunnels) already guard with a
+    // disposed flag.
+    const mountedRef = useRef(true);
+    useEffect(() => () => { mountedRef.current = false; }, []);
+    const load = useCallback(async (query) => {
+        const seq = ++seqRef.current;
+        try {
+            const list = await api.listHosts(query);
+            if (!mountedRef.current || seq !== seqRef.current)
+                return;
+            setHosts(list);
+            setError(null);
+        }
+        catch (cause) {
+            if (!mountedRef.current || seq !== seqRef.current)
+                return;
+            setError(errorMessage(cause));
+        }
+    }, [api]);
+    useEffect(() => { void load(); }, [load]);
+    // Debounced search: every keystroke re-filters through the API.
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            const query = search.trim();
+            void load(query === '' ? undefined : query);
+        }, 300);
+        return () => { clearTimeout(timer); };
+    }, [search, load]);
+    // Every async setState path guards with mountedRef, not just load(): a
+    // promise settling after unmount would setState against the torn-down
+    // environment (window is not defined, main-CI flake).
+    const runTest = async (alias) => {
+        if (!mountedRef.current)
+            return;
+        setTestingAlias(alias);
+        try {
+            const result = await api.testHost(alias);
+            if (!mountedRef.current)
+                return;
+            setTestResults(prev => ({ ...prev, [alias]: result }));
+        }
+        catch (cause) {
+            if (!mountedRef.current)
+                return;
+            setTestResults(prev => ({ ...prev, [alias]: { ok: false, error: errorMessage(cause) } }));
+        }
+        finally {
+            if (mountedRef.current)
+                setTestingAlias(null);
+        }
+    };
+    const deleteHost = async (alias) => {
+        if (!window.confirm(tt('hosts.deleteConfirm', { alias })))
+            return;
+        try {
+            await api.deleteHost(alias);
+            if (!mountedRef.current)
+                return;
+            void load();
+        }
+        catch (cause) {
+            if (!mountedRef.current)
+                return;
+            setError(errorMessage(cause));
+        }
+    };
+    // Group-header batch action (#379): test every host in the group.
+    const testGroup = async (group) => {
+        if (!mountedRef.current)
+            return;
+        setTestingGroup(group.key);
+        try {
+            await Promise.all(group.hosts.map(host => runTest(host.alias)));
+        }
+        finally {
+            if (mountedRef.current)
+                setTestingGroup(null);
+        }
+    };
+    const importConfig = async () => {
+        if (!mountedRef.current)
+            return;
+        setImporting(true);
+        try {
+            const result = await api.importSshConfig();
+            if (!mountedRef.current)
+                return;
+            setNotice(tt('hosts.imported', { parsed: result.parsed, added: result.added, skipped: result.skipped }));
+            void load();
+        }
+        catch (cause) {
+            if (!mountedRef.current)
+                return;
+            setError(errorMessage(cause));
+        }
+        finally {
+            if (mountedRef.current)
+                setImporting(false);
+        }
+    };
+    const renderHostRow = (host) => {
+        const test = testResults[host.alias];
+        return (_jsxs("tr", { "data-dsh-part": "host-row", children: [_jsx("td", { className: css.mono, children: host.alias }), _jsxs("td", { className: css.mono, children: [host.host, ":", host.port] }), _jsx("td", { children: host.user }), _jsx("td", { children: _jsx("span", { className: css.badge, "data-kind": host.auth, children: host.auth === 'key' ? tt('form.auth.key') : host.auth === 'password' ? tt('form.auth.password') : tt('form.auth.agent') }) }), _jsx("td", { className: css.cellMuted, children: host.environment ?? '' }), _jsx("td", { className: css.cellMuted, children: host.tags.join(', ') }), _jsx("td", { className: css.cellMuted, children: host.description ?? '' }), _jsx("td", { children: _jsxs("div", { className: css.actions, children: [_jsx("button", { type: "button", className: css.linkButton, disabled: testingAlias === host.alias, onClick: () => { void runTest(host.alias); }, children: testingAlias === host.alias ? tt('hosts.testing') : tt('hosts.test') }), testingAlias === host.alias && _jsx("span", { className: css.spinner, "aria-hidden": "true" }), test !== undefined && (_jsx("span", { className: css.inlineTest, "data-status": test.ok ? 'ok' : 'fail', children: test.ok ? tt('hosts.testOk', { latency: test.latencyMs ?? 0 }) : tt('hosts.testFail', { error: test.error ?? '' }) })), _jsx("button", { type: "button", className: css.linkButton, onClick: () => { setDialog({ mode: 'edit', host }); }, children: tt('hosts.edit') }), _jsx("button", { type: "button", className: css.linkButton, "data-danger": true, onClick: () => { void deleteHost(host.alias); }, children: tt('hosts.delete') }), _jsx("button", { type: "button", className: css.ghostButton, onClick: () => { onConnect(host.alias); }, children: tt('hosts.connected') })] }) })] }, host.alias));
+    };
+    const renderHostTable = (rows) => (_jsxs("table", { className: css.table, "data-dsh-part": "host-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: tt('hosts.col.alias') }), _jsx("th", { children: tt('hosts.col.host') }), _jsx("th", { children: tt('hosts.col.user') }), _jsx("th", { children: tt('hosts.col.auth') }), _jsx("th", { children: tt('hosts.col.environment') }), _jsx("th", { children: tt('hosts.col.tags') }), _jsx("th", { children: tt('hosts.col.description') }), _jsx("th", { children: tt('hosts.col.actions') })] }) }), _jsx("tbody", { children: rows.map(renderHostRow) })] }));
+    const groups = hosts === null ? [] : groupHosts(hosts, groupBy);
+    return (_jsxs("div", { className: css.fillBody, children: [_jsxs("div", { className: css.toolbar, children: [_jsx("input", { className: css.search, type: "search", placeholder: tt('hosts.search'), value: search, onChange: event => { setSearch(event.target.value); } }), _jsxs("select", { className: css.groupBySelect, "aria-label": tt('hosts.groupBy.label'), value: groupBy, onChange: event => { setGroupBy(event.target.value); }, children: [_jsx("option", { value: "none", children: tt('hosts.groupBy.none') }), _jsx("option", { value: "environment", children: tt('hosts.groupBy.environment') }), _jsx("option", { value: "tags", children: tt('hosts.groupBy.tags') })] }), _jsx("div", { className: css.toolbarSpacer }), _jsx("button", { type: "button", className: css.primaryButton, onClick: () => { setDialog({ mode: 'create' }); }, children: tt('hosts.add') }), _jsx("button", { type: "button", className: css.ghostButton, disabled: importing, onClick: () => { void importConfig(); }, children: importing ? tt('common.loading') : tt('hosts.import') })] }), notice !== null && _jsx("div", { className: css.banner, "data-kind": "ok", children: notice }), error !== null && _jsx("div", { className: css.banner, "data-kind": "error", children: tt('common.error', { error }) }), hosts === null && error === null && _jsx("div", { className: css.loading, children: tt('common.loading') }), hosts !== null && hosts.length === 0 && _jsx("div", { className: css.empty, children: tt('hosts.empty') }), hosts !== null && hosts.length > 0 && groupBy === 'none' && (_jsx("div", { className: css.tableWrap, children: renderHostTable(hosts) })), hosts !== null && hosts.length > 0 && groupBy !== 'none' && (_jsx("div", { className: css.tableWrap, children: groups.map(group => {
+                    const isCollapsed = collapsed[group.key] === true;
+                    const label = group.key === ''
+                        ? (groupBy === 'tags' ? tt('hosts.group.noTags') : tt('hosts.group.ungrouped'))
+                        : group.key;
+                    return (_jsxs("section", { className: css.groupSection, children: [_jsxs("div", { className: css.groupHeader, children: [_jsxs("button", { type: "button", className: css.groupToggle, "aria-expanded": !isCollapsed, onClick: () => { setCollapsed(prev => ({ ...prev, [group.key]: !isCollapsed })); }, children: [_jsx("span", { className: css.groupChevron, "data-collapsed": isCollapsed || undefined, "aria-hidden": "true" }), _jsx("span", { className: css.groupName, children: label }), _jsx("span", { className: css.groupCount, children: tt('hosts.group.count', { count: group.hosts.length }) })] }), _jsx("button", { type: "button", className: css.linkButton, disabled: testingGroup === group.key, onClick: () => { void testGroup(group); }, children: testingGroup === group.key ? tt('hosts.testing') : tt('hosts.group.testAll') })] }), !isCollapsed && renderHostTable(group.hosts)] }, group.key));
+                }) })), dialog !== null && (_jsx(HostFormDialog, { api: api, editing: dialog.mode === 'edit' ? dialog.host : null, onClose: () => { setDialog(null); }, onSaved: () => { setDialog(null); void load(); } }))] }));
+}

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

@@ -0,0 +1,14 @@
+import type { SshApi } from './api.ts';
+import { type TerminalFontSource } from './helpers.ts';
+/** The panel's tab identifiers. */
+export type SshTab = 'hosts' | 'terminal' | 'transfer' | 'tunnels' | 'cluster';
+/** Panel shell props. */
+export interface SshPanelProps {
+    /** The SSH API client every tab operates through. */
+    api: SshApi;
+    /** Live terminal-font setting source handed to the terminal tab (issue #577). */
+    terminalFont?: TerminalFontSource;
+}
+/** The tabbed SSH page. */
+export declare function SshPanel({ api, terminalFont }: SshPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=SshPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SshPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/client/sidebar/panels/ssh/SshPanel.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAM,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAS1D,mCAAmC;AACnC,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAA;AAE9E,yBAAyB;AACzB,MAAM,WAAW,aAAa;IAC5B,qDAAqD;IACrD,GAAG,EAAE,MAAM,CAAA;IACX,iFAAiF;IACjF,YAAY,CAAC,EAAE,kBAAkB,CAAA;CAClC;AAiBD,2BAA2B;AAC3B,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,EAAE,aAAa,+BA+B5D"}

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SSH 主栏页面：0.2 原生 `main` 面板，版心与加载态复用 page-shell（与官方
+ * 插件页同形）。页头下是五个标签页（主机 / 终端 / 传输 / 隧道 / 集群），
+ * 标签状态属于浏览器会话状态；未激活的标签卸载，因此每个标签在激活时各自
+ * 取数。主机页的连接动作会切到终端标签并预选别名。
+ */
+import { useState } from 'react';
+import { tt } from "./helpers.js";
+import { ClusterTab } from "./ClusterTab.js";
+import { HostsTab } from "./HostsTab.js";
+import { TerminalTab } from "./TerminalTab.js";
+import { TransferTab } from "./TransferTab.js";
+import { TunnelsTab } from "./TunnelsTab.js";
+import { PageSection, PageShell } from "../../page-shell.js";
+import css from './panel.module.css';
+/** The tab bar definition (labels resolved at render time). */
+const TABS = [
+    { id: 'hosts', label: () => tt('tab.hosts') },
+    { id: 'terminal', label: () => tt('tab.terminal') },
+    { id: 'transfer', label: () => tt('tab.transfer') },
+    { id: 'tunnels', label: () => tt('tab.tunnels') },
+    { id: 'cluster', label: () => tt('tab.cluster') },
+];
+/** The tabbed SSH page. */
+export function SshPanel({ api, terminalFont }) {
+    const [activeTab, setActiveTab] = useState('hosts');
+    const [connectRequest, setConnectRequest] = useState(null);
+    const handleConnect = (alias) => {
+        setActiveTab('terminal');
+        setConnectRequest(prev => ({ alias, nonce: (prev?.nonce ?? 0) + 1 }));
+    };
+    return (_jsxs(PageShell, { plugin: "ssh", title: tt('panel.title'), intro: tt('panel.intro'), children: [_jsx(PageSection, { children: _jsx("div", { className: css.tabBar, role: "tablist", "data-dsh-part": "tab-bar", children: TABS.map(tab => (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === tab.id, "data-active": activeTab === tab.id ? '' : undefined, "data-dsh-part": "tab", className: css.tab, onClick: () => { setActiveTab(tab.id); }, children: tab.label() }, tab.id))) }) }), _jsx(PageSection, { fill: true, children: _jsxs("div", { className: css.panelContent, "data-dsh-part": "panel-content", children: [activeTab === 'hosts' && _jsx(HostsTab, { api: api, onConnect: handleConnect }), activeTab === 'terminal' && _jsx(TerminalTab, { api: api, presetAlias: connectRequest?.alias, requestId: connectRequest?.nonce, terminalFont: terminalFont }), activeTab === 'transfer' && _jsx(TransferTab, { api: api }), activeTab === 'tunnels' && _jsx(TunnelsTab, { api: api }), activeTab === 'cluster' && _jsx(ClusterTab, { api: api })] }) })] }));
+}

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

@@ -0,0 +1,18 @@
+import type { SshApi } from './api.ts';
+import { type TerminalFontSource } from './helpers.ts';
+/** Terminal tab props. */
+export interface TerminalTabProps {
+    api: SshApi;
+    /** Alias preselected by a "connect" action from the hosts tab. */
+    presetAlias?: string;
+    /** Monotonic id of the connect request (re-applies presetAlias). */
+    requestId?: number;
+    /**
+     * Live terminal-font setting source (issue #577). Absent in tests and
+     * legacy mounts: the font then comes from the CSS custom-property chain.
+     */
+    terminalFont?: TerminalFontSource;
+}
+/** The xterm terminal view. */
+export declare function TerminalTab({ api, presetAlias, requestId, terminalFont }: TerminalTabProps): import("react").JSX.Element;
+//# sourceMappingURL=TerminalTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalTab.d.ts","sourceRoot":"","sources":["../../../../../../src/client/sidebar/panels/ssh/TerminalTab.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,MAAM,EAAsB,MAAM,UAAU,CAAA;AAG1D,OAAO,EAA+C,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAGnG,0BAA0B;AAC1B,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAA;IACX,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAA;CAClC;AAoCD,+BAA+B;AAC/B,wBAAgB,WAAW,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,gBAAgB,+BAgO1F"}