@linxin666/dsh-ssh 0.2.0 → 0.2.2

package/lib/index.js

@@ -1,5 +1,5 @@
 import { installSettingsSection, settingsNamespace } from "@deepseek-ai/dsh-settings";
-import { createReadStream, createWriteStream, existsSync, lstatSync, mkdirSync, readFileSync, readdirSync, renameSync, statSync, writeFileSync } from "node:fs";
+import { closeSync, createReadStream, createWriteStream, existsSync, lstatSync, mkdirSync, openSync, readFileSync, readdirSync, renameSync, statSync, writeFileSync } from "node:fs";
 import { Client } from "ssh2";
 import { homedir, tmpdir } from "node:os";
 import { basename, dirname, join, relative, resolve } from "node:path";
@@ -1414,26 +1414,26 @@ async function connectChain(engine, entry) {
 	const hops = [];
 	let sock;
 	const chain = entry.proxyJump;
-	for (let index = 0; index < chain.length; index += 1) {
-		const hopAlias = chain[index];
-		const hop = engine.store.find(hopAlias);
-		if (hop === void 0) {
-			for (const client of hops) client.end();
-			throw new Error("proxyJump alias '" + hopAlias + "' not found — create it first");
-		}
-		const hopClient = await connectClient(buildConnectConfig(hop, sock, engine.opts));
-		hops.push(hopClient);
-		const next = index + 1 < chain.length ? engine.store.find(chain[index + 1]) : void 0;
-		const nextHost = next !== void 0 ? next.host : entry.host;
-		const nextPort = next !== void 0 ? next.port : entry.port;
-		sock = await new Promise((resolve, reject) => {
-			hopClient.forwardOut("127.0.0.1", 0, nextHost, nextPort, (error, stream) => {
-				if (error !== void 0) {
-					for (const client of hops) client.end();
-					reject(error);
-				} else resolve(stream);
+	try {
+		for (let index = 0; index < chain.length; index += 1) {
+			const hopAlias = chain[index];
+			const hop = engine.store.find(hopAlias);
+			if (hop === void 0) throw new Error("proxyJump alias '" + hopAlias + "' not found — create it first");
+			const hopClient = await connectClient(buildConnectConfig(hop, sock, engine.opts));
+			hops.push(hopClient);
+			const next = index + 1 < chain.length ? engine.store.find(chain[index + 1]) : void 0;
+			const nextHost = next !== void 0 ? next.host : entry.host;
+			const nextPort = next !== void 0 ? next.port : entry.port;
+			sock = await new Promise((resolve, reject) => {
+				hopClient.forwardOut("127.0.0.1", 0, nextHost, nextPort, (error, stream) => {
+					if (error !== void 0) reject(error);
+					else resolve(stream);
+				});
 			});
-		});
+		}
+	} catch (error) {
+		for (const client of hops) client.end();
+		throw error;
 	}
 	let target;
 	try {
@@ -1614,6 +1614,11 @@ async function execCommand(engine, alias, command, timeoutMs) {
 //#endregion
 //#region src/engine/pty.ts
 /**
+* PTY shell sessions for the web terminal: a standalone (non-pooled)
+* ssh2 connection with a long-lived shell channel, resize, and pausable
+* output delivery.
+*/
+/**
 * Open a PTY shell session for the web terminal (standalone connection).
 * The shell is a long-lived exclusive stream: it uses its own connection so
 * closing it can never tear down a pooled exec/tunnel sharing the alias.
@@ -2283,7 +2288,10 @@ function makeRoutes(deps) {
 	const { store, engine } = deps;
 	const staging = deps.stagingDir ?? join(tmpdir(), "dsh-ssh-uploads");
 	const maxUploadBytes = deps.maxUploadBytes ?? MAX_UPLOAD_BYTES;
-	mkdirSync(staging, { recursive: true });
+	mkdirSync(staging, {
+		recursive: true,
+		mode: 448
+	});
 	/** Guard helper: fence + method check. */
 	const guard = (req, res, method) => {
 		if (!isLoopbackRequest(req)) {
@@ -2543,7 +2551,7 @@ function makeRoutes(deps) {
 						} catch {}
 					};
 					const tmp = join(staging, `upload-${randomBytes(6).toString("hex")}`);
-					const sink = createWriteStream(tmp);
+					const sink = createWriteStream(tmp, { mode: 384 });
 					let settled = false;
 					const fail = (error) => {
 						if (settled) return;
@@ -2649,6 +2657,7 @@ function makeRoutes(deps) {
 					}
 					const tmp = join(staging, `download-${randomBytes(6).toString("hex")}`);
 					try {
+						closeSync(openSync(tmp, "w", 384));
 						const outcome = await engine.download(alias, remotePath, tmp);
 						res.writeHead(200, {
 							"content-type": "application/octet-stream",
@@ -3408,7 +3417,8 @@ const inject = [
 const SSH_SETTINGS_NAMESPACE = settingsNamespace("dsh-ssh");
 const Config = import_lib.default.object({
 	announceToAgent: import_lib.default.boolean().default(true),
-	enabled: import_lib.default.boolean().default(true)
+	enabled: import_lib.default.boolean().default(true),
+	terminalFontFamily: import_lib.default.string().default("")
 });
 /** Schema default, re-read for hand-built test contexts (the loader applies them normally). */
 const DEFAULT_ANNOUNCE = true;

package/lib/types/client/index.d.ts

@@ -10,8 +10,20 @@
  * Export discipline (packages/client rule): the /client surface carries what
  * cordis loading needs plus types only — all value exports stay internal.
  */
-import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client';
+import type { ClientContext, SettingsScope, SettingsScopeSpec } from '@deepseek-ai/dsh-client-runtime/client';
 import { type SshKey } from './locales.ts';
+declare module '@deepseek-ai/cordis' {
+    interface Context {
+        /**
+         * Optional rc.6 compatibility binder provided by dsh-web-ui-settings;
+         * absent when that group plugin is not installed, so callers fall back to
+         * the official settings scope.
+         */
+        webUiSettings?: {
+            bind<S>(spec: SettingsScopeSpec<S>): SettingsScope<S>;
+        };
+    }
+}
 declare module '@deepseek-ai/dsh-client-ui-slots' {
     interface LocaleNamespaceMap {
         /** dsh-ssh surface copy. */

package/lib/types/client/mount.d.ts

@@ -1,5 +1,6 @@
 import type { SshApi } from './api.ts';
 import type { PanelController } from './panel/controller.ts';
+import type { TerminalFontSource } from './panel/helpers.ts';
 /** The injected panel container (kept in the DOM, hidden when inactive). */
 export declare const PANEL_VIEW_SELECTOR = "[data-dsh-ssh-view]";
 /**
@@ -7,6 +8,7 @@ export declare const PANEL_VIEW_SELECTOR = "[data-dsh-ssh-view]";
  * to the controller's panelOpen state.
  * @param controller - the panel controller driving the view.
  * @param api - the SSH API client the tabs operate through.
+ * @param terminalFont - live terminal-font setting source (issue #577).
  * @returns disposer unmounting the tree and restoring the column.
  */
-export declare function mountPanel(controller: PanelController, api: SshApi): () => void;
+export declare function mountPanel(controller: PanelController, api: SshApi, terminalFont?: TerminalFontSource): () => void;

package/lib/types/client/panel/SshPanel.d.ts

@@ -1,5 +1,6 @@
 import type { SshApi } from '../api.ts';
 import type { PanelController } from './controller.ts';
+import { type TerminalFontSource } from './helpers.ts';
 /** The panel's tab identifiers. */
 export type SshTab = 'hosts' | 'terminal' | 'transfer' | 'tunnels' | 'cluster';
 /** Panel shell props. */
@@ -8,6 +9,8 @@ export interface SshPanelProps {
     controller: PanelController;
     /** 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 panel. */
-export declare function SshPanel({ controller, api }: SshPanelProps): import("react").JSX.Element;
+export declare function SshPanel({ controller, api, terminalFont }: SshPanelProps): import("react").JSX.Element;

package/lib/types/client/panel/TerminalTab.d.ts

@@ -1,4 +1,5 @@
 import type { SshApi } from '../api.ts';
+import { type TerminalFontSource } from './helpers.ts';
 /** Terminal tab props. */
 export interface TerminalTabProps {
     api: SshApi;
@@ -6,6 +7,11 @@ export interface TerminalTabProps {
     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 }: TerminalTabProps): import("react").JSX.Element;
+export declare function TerminalTab({ api, presetAlias, requestId, terminalFont }: TerminalTabProps): import("react").JSX.Element;

package/lib/types/client/panel/helpers.d.ts

@@ -12,3 +12,32 @@ export declare function dictionary(): Record<string, string>;
 export declare function tt(key: SshKey, values?: TranslateValues): string;
 /** Human-readable error text from an unknown thrown value. */
 export declare function errorMessage(error: unknown): string;
+/**
+ * The terminal font stack used before issue #577, kept as the last resort
+ * when neither the plugin setting nor a CSS custom property names a font.
+ */
+export declare const TERMINAL_FONT_FALLBACK = "Menlo, Consolas, \"Liberation Mono\", monospace";
+/**
+ * Live source of the user's configured terminal font family: the client
+ * entry binds the dsh-ssh settings namespace into one of these and hands it
+ * to the panel, so a settings change re-applies without a remount.
+ */
+export interface TerminalFontSource {
+    /** Current configured family, or undefined when unset / not yet loaded. */
+    get(): string | undefined;
+    /** Subscribe to changes; the returned function unsubscribes. */
+    subscribe(listener: () => void): () => void;
+}
+/**
+ * Resolve the xterm `fontFamily` (issue #577). xterm's DOM renderer takes
+ * the font only from constructor/options, so a plain stylesheet rule cannot
+ * retarget it — the value must be read back into the options. The chain,
+ * first non-empty value wins:
+ *   1. `override` — the `terminalFontFamily` plugin setting;
+ *   2. `--dsh-ssh-terminal-font` — dedicated hook for skins and user CSS
+ *      (e.g. a Nerd Font for powerline glyphs);
+ *   3. `--ds-font-family-code` — the official code-font token several skins
+ *      already remap;
+ *   4. {@link TERMINAL_FONT_FALLBACK}.
+ */
+export declare function resolveTerminalFontFamily(override?: string): string;

package/lib/types/client/sidebar-entry-core.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Shared sidebar entry injection core.
+ *
+ * dsh's sidebar shell exposes no slot an external plugin can register into,
+ * so the entry row is injected between the shell's New Session button and the
+ * workspace browser. The injection self-heals: a MutationObserver watches the
+ * sidebar root and re-inserts the row whenever a React re-render displaces it
+ * (re-insertion happens in the same frame, before paint, so no flicker).
+ *
+ * The row is plain DOM (no React tree) so it can never disturb the shell's
+ * reconciliation; the view it toggles is a separate root owned by the caller.
+ *
+ * Packages receive this file as a generated copy via scripts/sync-shared.mjs;
+ * edit the shared source and re-run the sync instead of editing a copy.
+ */
+/** Per-package configuration for one sidebar entry row. */
+export interface SidebarEntryOptions {
+    /** Full attribute name identifying the injected row (idempotency key), e.g. 'data-dsh-ssh-entry'. */
+    rowAttribute: string;
+    /** CSS selector matching the injected row, e.g. '[data-dsh-ssh-entry]'. */
+    rowSelector: string;
+    /**
+     * L2 semantic-attribute plugin id (issue #506, enum table:
+     * skins/skin-center/contracts/semantic-attrs-v1.md). When set, the row also
+     * outputs data-dsh-plugin="<id>" and data-dsh-part="sidebar-entry"; unset
+     * leaves the row without semantic attributes.
+     */
+    plugin?: string;
+    /** Inline icon markup (matches the shell's 16px nav-icon look). */
+    icon: string;
+    /** CSS module class names for the row and its two spans (entry / entryIcon / entryLabel). */
+    css: Record<string, string>;
+    /** Localized row label (aria-label + visible text). */
+    label(): string;
+    /** Optional localized tooltip (title attribute). */
+    tooltip?(): string;
+    /** Click action (open/toggle the owning panel). */
+    onToggle(): void;
+    /** Family-block position: 'before' inserts ahead of sibling plugin rows, 'after' behind them. */
+    position: 'before' | 'after';
+    /**
+     * Selectors of the sibling plugin entry rows this package orders against
+     * (its own row included — the placement guard excludes a row that is
+     * already inside the root). Each package passes the same list it used
+     * before the consolidation so the rendered order stays stable.
+     */
+    familySelectors: readonly string[];
+    /** Optional active-state bridge; highlights the row while the panel is open. */
+    active?: {
+        subscribe(listener: () => void): () => void;
+        isOpen(): boolean;
+    };
+}
+/**
+ * Mount the sidebar entry, waiting for the shell to render and self-healing
+ * on later React re-renders.
+ * @param options - the row's attribute/icon/copy/action/ordering configuration.
+ * @returns disposer removing the entry and its observers.
+ */
+export declare function mountSidebarEntry(options: SidebarEntryOptions): () => void;

package/lib/types/client/sidebar-entry.d.ts

@@ -1,16 +1,12 @@
 /**
- * Sidebar entry injection.
+ * Sidebar entry injection — package-specific wiring over the shared core.
  *
- * dsh's sidebar shell exposes no slot an external plugin can register into,
- * so — following the task-board precedent of DOM-level extension — the entry
- * row is injected between the shell's New Session button and the workspace
- * browser. The injection self-heals: a MutationObserver watches the sidebar
- * root and re-inserts the row whenever a React re-render displaces it
- * (re-insertion happens in the same frame, before paint, so no flicker).
- *
- * The row is plain DOM (no React tree) so it can never disturb the shell's
- * reconciliation; the panel view it toggles is a separate React root mounted
- * in the center column (see mount.tsx).
+ * The DOM injection / self-healing / idempotency logic lives exactly once in
+ * shared/client/sidebar-entry-core.ts (synced copy); this wrapper supplies the
+ * ssh icon, copy, CSS module, and the panel toggle. The row is plain DOM (no
+ * React tree) so it can never disturb the shell's reconciliation; the panel
+ * view it toggles is a separate React root mounted in the center column
+ * (see mount.tsx).
  */
 import type { PanelController } from './panel/controller.ts';
 /** Stable data attribute identifying the injected entry row. */

package/lib/types/index.d.ts

@@ -28,6 +28,13 @@ export interface Config {
     announceToAgent?: boolean;
     /** Master switch for the plugin (routes, tools, prompt section). */
     enabled?: boolean;
+    /**
+     * xterm `fontFamily` for the web terminal (issue #577). Empty (default)
+     * defers to the CSS chain: `--dsh-ssh-terminal-font`, then the official
+     * `--ds-font-family-code` token, then the built-in monospace stack. Set a
+     * Nerd Font stack here to render powerline/Nerd glyphs.
+     */
+    terminalFontFamily?: string;
 }
 export declare const Config: z<Config>;
 /** Model-facing announcement: plugin presence, capabilities, and limits. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-ssh",
   "description": "Remote SSH operations for the dsh web GUI: host config store (~/.dsh/dsh-ssh.json, import from ~/.ssh/config), a persistent ssh2 connection pool with jump-host support, exec / PTY web terminal / SFTP transfer / local port-forward tunnels / cluster execution, plus agent tools (ssh_list, ssh_exec, ssh_upload, ssh_download, ssh_tunnel, ssh_cluster). Hot-pluggable — mounted via ~/.dsh/cordis.patch.yml + a profile node_modules symlink, no dsh source changes.",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "engines": {
     "node": "^22.19.0 || >=24.0.0"
@@ -53,7 +53,6 @@
     "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.7",
     "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.7",
     "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-ui-sidebar": "^0.1.0-rc.7",
     "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.7",
     "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.7",
     "@deepseek-ai/dsh-llm": "^0.1.0-rc.7",
@@ -66,7 +65,6 @@
     "@types/ssh2": "^1.15.5",
     "@types/ws": "^8.5.13",
     "jsdom": "^25.0.0",
-    "lightningcss": "1.32.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "schemastery": "^3.18.0",

package/src/client/index.ts

@@ -10,20 +10,43 @@
  * Export discipline (packages/client rule): the /client surface carries what
  * cordis loading needs plus types only — all value exports stay internal.
  */
-import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ClientContext, SettingsScope, SettingsScopeSpec } from '@deepseek-ai/dsh-client-runtime/client'
 // Type-only: pulls the locale plugin's Context merge (ctx.locale).
 import type {} from '@deepseek-ai/dsh-client-locale/client'
+// Type-only: pulls the settings-surface Context merge (ctx.settingsScope).
+import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
 // Type-only: pulls the LocaleNamespaceMap merge table.
 import type {} from '@deepseek-ai/dsh-client-ui-slots'
 import { SshApi } from './api.ts'
 import { en, zh, type SshKey } from './locales.ts'
 import { mountPanel } from './mount.tsx'
 import { PanelController } from './panel/controller.ts'
+import type { TerminalFontSource } from './panel/helpers.ts'
 import { mountSidebarEntry } from './sidebar-entry.ts'
 
 /** Locale namespace this plugin owns. */
 const NS = 'dsh-ssh'
 
+/** Settings namespace the terminal-font preference lives in (issue #577). */
+const SETTINGS_NS = 'dsh-ssh'
+
+/** The dsh-ssh settings surface the browser half reads. */
+interface SshClientSettings {
+  /** User-configured xterm fontFamily; empty/undefined means the CSS chain. */
+  terminalFontFamily?: string
+}
+
+declare module '@deepseek-ai/cordis' {
+  interface Context {
+    /**
+     * Optional rc.6 compatibility binder provided by dsh-web-ui-settings;
+     * absent when that group plugin is not installed, so callers fall back to
+     * the official settings scope.
+     */
+    webUiSettings?: { bind<S>(spec: SettingsScopeSpec<S>): SettingsScope<S> }
+  }
+}
+
 declare module '@deepseek-ai/dsh-client-ui-slots' {
   interface LocaleNamespaceMap {
     /** dsh-ssh surface copy. */
@@ -32,7 +55,7 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
 }
 
 /** Required services (fiber inject waiting — the runtime must be up first). */
-export const inject = ['slots', 'locale']
+export const inject = ['slots', 'locale', 'settingsScope']
 
 /** Type-only surface (export discipline: no value exports beyond the plugin contract). */
 export type { PanelControllerSnapshot } from './panel/controller.ts'
@@ -54,10 +77,22 @@ export function apply(ctx: ClientContext): void {
 
   const controller = new PanelController()
   const api = new SshApi()
+  // Live terminal-font preference (issue #577): the settings namespace is
+  // edited by the host-registered GUI section; the panel re-applies changes
+  // to open terminals without a reconnect.
+  const binder = ctx.get('webUiSettings') ?? ctx.settingsScope
+  const scope = binder.bind<SshClientSettings>({ namespace: SETTINGS_NS })
+  const terminalFont: TerminalFontSource = {
+    get: () => {
+      const snapshot = scope.getSnapshot()
+      return snapshot.status === 'ready' ? snapshot.value?.terminalFontFamily : undefined
+    },
+    subscribe: (listener) => scope.subscribe(listener),
+  }
   const disposers: Array<() => void> = []
   try {
     disposers.push(mountSidebarEntry(controller))
-    disposers.push(mountPanel(controller, api))
+    disposers.push(mountPanel(controller, api, terminalFont))
   } catch (error) {
     // DOM failures degrade the panel, never the GUI.
     console.warn('[dsh-ssh] mount failed:', error)

package/src/client/mount.tsx

@@ -14,6 +14,7 @@
 import { createRoot, type Root } from 'react-dom/client'
 import type { SshApi } from './api.ts'
 import type { PanelController } from './panel/controller.ts'
+import type { TerminalFontSource } from './panel/helpers.ts'
 import { SshPanel } from './panel/SshPanel.tsx'
 import css from './panel/panel.module.css'
 
@@ -38,9 +39,10 @@ function conversationColumn(): HTMLElement | undefined {
  * to the controller's panelOpen state.
  * @param controller - the panel controller driving the view.
  * @param api - the SSH API client the tabs operate through.
+ * @param terminalFont - live terminal-font setting source (issue #577).
  * @returns disposer unmounting the tree and restoring the column.
  */
-export function mountPanel(controller: PanelController, api: SshApi): () => void {
+export function mountPanel(controller: PanelController, api: SshApi, terminalFont?: TerminalFontSource): () => void {
   let root: Root | undefined
   let container: HTMLDivElement | undefined
 
@@ -57,10 +59,11 @@ export function mountPanel(controller: PanelController, api: SshApi): () => void
     if (column === undefined) return
     container = document.createElement('div')
     container.dataset.dshSshView = ''
+    container.dataset.dshPlugin = 'ssh'
     container.className = css.view
     column.appendChild(container)
     root = createRoot(container)
-    root.render(<SshPanel controller={controller} api={api} />)
+    root.render(<SshPanel controller={controller} api={api} terminalFont={terminalFont} />)
   }
 
   // The frame mounts after boot settlement; watch for the column's arrival.

package/src/client/panel/HostsTab.tsx

@@ -72,16 +72,24 @@ export function HostsTab({ api, onConnect }: HostsTabProps) {
   const [collapsed, setCollapsed] = useState<Record<string, boolean>>({})
   const [testingGroup, setTestingGroup] = useState<string | null>(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?: string): Promise<void> => {
     const seq = ++seqRef.current
     try {
       const list = await api.listHosts(query)
-      if (seq !== seqRef.current) return
+      if (!mountedRef.current || seq !== seqRef.current) return
       setHosts(list)
       setError(null)
     } catch (cause) {
-      if (seq !== seqRef.current) return
+      if (!mountedRef.current || seq !== seqRef.current) return
       setError(errorMessage(cause))
     }
   }, [api])

package/src/client/panel/SshPanel.tsx

@@ -8,7 +8,7 @@
 import { useState } from 'react'
 import type { SshApi } from '../api.ts'
 import type { PanelController } from './controller.ts'
-import { tt } from './helpers.ts'
+import { tt, type TerminalFontSource } from './helpers.ts'
 import { ClusterTab } from './ClusterTab.tsx'
 import { HostsTab } from './HostsTab.tsx'
 import { TerminalTab } from './TerminalTab.tsx'
@@ -25,6 +25,8 @@ export interface SshPanelProps {
   controller: PanelController
   /** 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 tab bar definition (labels resolved at render time). */
@@ -43,7 +45,7 @@ interface ConnectRequest {
 }
 
 /** The tabbed SSH panel. */
-export function SshPanel({ controller, api }: SshPanelProps) {
+export function SshPanel({ controller, api, terminalFont }: SshPanelProps) {
   const [activeTab, setActiveTab] = useState<SshTab>('hosts')
   const [connectRequest, setConnectRequest] = useState<ConnectRequest | null>(null)
 
@@ -66,7 +68,7 @@ export function SshPanel({ controller, api }: SshPanelProps) {
         </button>
         <h2 className={css.panelTitle}>{tt('panel.title')}</h2>
       </div>
-      <div className={css.tabBar} role="tablist">
+      <div className={css.tabBar} role="tablist" data-dsh-part="tab-bar">
         {TABS.map(tab => (
           <button key={tab.id} type="button" role="tab" aria-selected={activeTab === tab.id} data-active={activeTab === tab.id ? '' : undefined} className={css.tab} onClick={() => { setActiveTab(tab.id) }}>
             {tab.label()}
@@ -75,7 +77,7 @@ export function SshPanel({ controller, api }: SshPanelProps) {
       </div>
       <div className={css.panelContent}>
         {activeTab === 'hosts' && <HostsTab api={api} onConnect={handleConnect} />}
-        {activeTab === 'terminal' && <TerminalTab api={api} presetAlias={connectRequest?.alias} requestId={connectRequest?.nonce} />}
+        {activeTab === 'terminal' && <TerminalTab api={api} presetAlias={connectRequest?.alias} requestId={connectRequest?.nonce} terminalFont={terminalFont} />}
         {activeTab === 'transfer' && <TransferTab api={api} />}
         {activeTab === 'tunnels' && <TunnelsTab api={api} />}
         {activeTab === 'cluster' && <ClusterTab api={api} />}

package/src/client/panel/TerminalTab.tsx

@@ -5,13 +5,13 @@
  * output stays visible and input is disabled. xterm's stylesheet is injected
  * once per page load (module-level guard).
  */
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react'
 import { Terminal, type IDisposable } from '@xterm/xterm'
 import { FitAddon } from '@xterm/addon-fit'
 import type { SshApi, TerminalConnection } from '../api.ts'
 import type { SshHostSummary } from '../../protocol.ts'
 import { XTERM_CSS } from './xterm.css.ts'
-import { errorMessage, tt } from './helpers.ts'
+import { errorMessage, resolveTerminalFontFamily, tt, type TerminalFontSource } from './helpers.ts'
 import css from './panel.module.css'
 
 /** Terminal tab props. */
@@ -21,6 +21,11 @@ export interface TerminalTabProps {
   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 terminal session lifecycle state shown in the status banner. */
@@ -44,8 +49,14 @@ function ensureXtermCss(): void {
   document.head.appendChild(style)
 }
 
+/** No-op source stand-in so the hook order stays stable without the prop. */
+const NO_FONT_SOURCE: TerminalFontSource = {
+  get: () => undefined,
+  subscribe: () => () => undefined,
+}
+
 /** The xterm terminal view. */
-export function TerminalTab({ api, presetAlias, requestId }: TerminalTabProps) {
+export function TerminalTab({ api, presetAlias, requestId, terminalFont }: TerminalTabProps) {
   const [hosts, setHosts] = useState<SshHostSummary[]>([])
   const [alias, setAlias] = useState(presetAlias ?? '')
   const [status, setStatus] = useState<TerminalStatus>({ kind: 'idle' })
@@ -54,9 +65,24 @@ export function TerminalTab({ api, presetAlias, requestId }: TerminalTabProps) {
   const fitRef = useRef<FitAddon | null>(null)
   const connRef = useRef<TerminalConnection | null>(null)
   const dataSubRef = useRef<IDisposable | null>(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
@@ -122,7 +148,7 @@ export function TerminalTab({ api, presetAlias, requestId }: TerminalTabProps) {
       convertEol: false,
       cursorBlink: true,
       fontSize: 13,
-      fontFamily: 'Menlo, Consolas, "Liberation Mono", monospace',
+      fontFamily: resolveTerminalFontFamily(fontOverride),
       theme: { background: '#0b0e14', foreground: '#d8dee9', cursor: '#a3b8d0' },
     })
     const fit = new FitAddon()
@@ -137,7 +163,7 @@ export function TerminalTab({ api, presetAlias, requestId }: TerminalTabProps) {
     dataSubRef.current = term.onData(data => { connection.send(data) })
     connection.onReady = () => { setStatus({ kind: 'connected', alias: target }) }
     connection.onOutput = data => { term.write(data) }
-    connection.onExit = (code, error) => {
+    connection.onExit = (_code, error) => {
       if (settled) return
       settled = true
       dataSubRef.current?.dispose()
@@ -173,7 +199,7 @@ export function TerminalTab({ api, presetAlias, requestId }: TerminalTabProps) {
       )}
       {status.kind === 'error' && <div className={css.banner} data-kind="error">{tt('terminal.error', { error: status.detail })}</div>}
       <div className={css.termWrap}>
-        <div ref={containerRef} className={css.termContainer} />
+        <div ref={containerRef} className={css.termContainer} data-dsh-part="terminal" />
         {status.kind === 'idle' && (
           <div className={css.termPlaceholder}>{hosts.length === 0 ? tt('hosts.empty') : tt('terminal.placeholder')}</div>
         )}