@tiphareth/dsh-hardssh 0.1.2

package/src/client/ssh/locales.ts

@@ -0,0 +1,322 @@
+/**
+ * dsh-ssh surface copy: zh is the key source, en mirrors every key.
+ */
+
+export const zh = {
+  'entry.label': 'SSH',
+  'entry.tooltip': '远程 SSH 运维面板',
+  'panel.title': '远程 SSH',
+  'tab.hosts': '主机',
+  'tab.terminal': '终端',
+  'tab.transfer': '传输',
+  'tab.tunnels': '隧道',
+  'tab.cluster': '集群',
+  // hosts
+  'hosts.empty': '尚未配置主机。点击「新增主机」添加，或从 ~/.ssh/config 导入。',
+  'hosts.add': '新增主机',
+  'hosts.import': '导入 ~/.ssh/config',
+  'hosts.search': '搜索别名 / 描述 / 标签…',
+  'hosts.col.alias': '别名',
+  'hosts.col.host': '主机',
+  'hosts.col.user': '用户',
+  'hosts.col.auth': '认证',
+  'hosts.col.environment': '环境',
+  'hosts.col.tags': '标签',
+  'hosts.col.description': '备注',
+  'hosts.col.actions': '操作',
+  'hosts.test': '测试',
+  'hosts.edit': '编辑',
+  'hosts.delete': '删除',
+  'hosts.deleteConfirm': '确定删除主机「{alias}」？将同时停止其隧道。',
+  'hosts.imported': '解析 {parsed} 个配置块，新增 {added} 台主机，跳过 {skipped} 个。',
+  'hosts.testing': '连接测试中…',
+  'hosts.testOk': '连接成功（{latency} ms）',
+  'hosts.testFail': '连接失败：{error}',
+  'hosts.connected': '连接',
+  'hosts.notConnected': '未连接',
+  // host form
+  'form.title.create': '新增主机',
+  'form.title.edit': '编辑主机 {alias}',
+  'form.alias': '别名',
+  'form.aliasHint': '小写字母、数字与单连字符，操作时使用',
+  'form.host': '主机地址',
+  'form.port': '端口',
+  'form.user': '用户名',
+  'form.auth': '认证方式',
+  'form.auth.key': '密钥',
+  'form.auth.password': '密码',
+  'form.authKeepHint': '编辑时密钥/密码留空将保留原认证方式与已存凭据；如需更换认证方式请填写新凭据。',
+  'form.keyPath': '私钥路径',
+  'form.keyPathHint': '如 ~/.ssh/id_ed25519',
+  'form.agentHint': '留空则使用 ssh-agent 已加载的密钥：设置 SSH_AUTH_SOCK（Git-Bash ssh-agent / WSL / unix），零输入',
+  'form.passphrase': '密钥口令',
+  'form.password': '密码',
+  'form.passwordHint': '仅本次会话使用：首次连接时手动输入，不落盘（VSCode Remote-SSH 式）',
+  'form.proxyJump': '跳板机别名',
+  'form.proxyJumpHint': '逗号分隔的本地主机别名，按顺序连接',
+  'form.description': '备注',
+  'form.environment': '环境',
+  'form.environmentHint': '如 development / production',
+  'form.tags': '标签',
+  'form.tagsHint': '逗号分隔',
+  'form.location': '位置',
+  'form.save': '保存',
+  'form.cancel': '取消',
+  'form.required': '请填写必填字段：别名、主机地址、用户名。',
+  'form.portInvalid': '端口必须是 1-65535 之间的整数。',
+  // terminal
+  'terminal.selectHost': '选择主机',
+  'terminal.connect': '连接',
+  'terminal.disconnect': '断开',
+  'terminal.placeholder': '选择主机后点击「连接」打开远程终端。',
+  'terminal.connecting': '正在连接…',
+  'terminal.ready': '终端已连接（{alias}）',
+  'terminal.exited': '终端已退出（{alias}）',
+  'terminal.error': '终端错误：{error}',
+  // transfer
+  'transfer.selectHost': '选择主机',
+  'transfer.remotePath': '远程路径',
+  'transfer.remotePathHint': '如 /tmp/ 或 /home/user/app.tar.gz',
+  'transfer.upload': '上传',
+  'transfer.uploading': '正在上传 {file}…',
+  'transfer.download': '下载',
+  'transfer.downloading': '正在下载…',
+  'transfer.done': '完成：{bytes} 字节',
+  'transfer.failed': '传输失败：{error}',
+  'transfer.browseRemote': '浏览远程目录',
+  'transfer.refresh': '刷新',
+  'transfer.name': '名称',
+  'transfer.upLevel': '上级目录',
+  'transfer.size': '大小',
+  'transfer.modified': '修改时间',
+  'transfer.bytes': '{value} B',
+  'transfer.kib': '{value} KB',
+  'transfer.mib': '{value} MB',
+  'transfer.gib': '{value} GB',
+  'transfer.percent': '{value}%',
+  'transfer.speed': '{value}/s',
+  'transfer.dir': '目录',
+  'transfer.file': '文件',
+  // tunnels
+  'tunnel.empty': '没有活跃的隧道。',
+  'tunnel.start': '新建隧道',
+  'tunnel.alias': '主机别名',
+  'tunnel.remotePort': '远程端口',
+  'tunnel.remoteHost': '远程主机',
+  'tunnel.remoteHostHint': '默认 127.0.0.1（服务器自身）',
+  'tunnel.localPort': '本地端口',
+  'tunnel.localPortHint': '留空自动分配',
+  'tunnel.stop': '停止',
+  'tunnel.stopAll': '全部停止',
+  'tunnel.stopAllConfirm': '确定停止全部隧道吗？',
+  'tunnel.row': '{alias}: 127.0.0.1:{localPort} -> {remoteHost}:{remotePort}',
+  'tunnel.started': '隧道已建立：127.0.0.1:{localPort}',
+  'tunnel.failed': '隧道启动失败：{error}',
+  // cluster
+  'cluster.command': '命令',
+  'cluster.run': '执行',
+  'cluster.confirm': '确定在匹配的主机上执行该命令吗？该操作会真实运行在远程服务器上。',
+  'cluster.aliases': '主机别名（逗号分隔，留空为全部）',
+  'cluster.environment': '环境过滤',
+  'cluster.tags': '标签过滤（逗号分隔）',
+  'cluster.results': '执行结果',
+  'cluster.empty': '输入命令后点击「执行」。',
+  'cluster.noMatch': '没有匹配的主机。',
+  'cluster.ok': '成功',
+  'cluster.fail': '失败',
+  'cluster.timeout': '超时',
+  'cluster.col.alias': '主机',
+  'cluster.col.status': '状态',
+  'cluster.col.exit': '退出码',
+  'cluster.col.stdout': '标准输出',
+  'cluster.col.stderr': '标准错误',
+  'cluster.col.error': '错误',
+  'cluster.col.duration': '耗时',
+  // common
+  'common.loading': '加载中…',
+  'common.error': '出错：{error}',
+  'common.refresh': '刷新',
+  'common.close': '关闭',
+  'common.confirm': '确定',
+  // host fingerprint (TOFU)
+  'fingerprint.title': '确认主机密钥 · {alias}',
+  'fingerprint.titleMismatch': '主机密钥变化 · {alias}',
+  'fingerprint.intro': '首次连接该服务器。请通过独立可信渠道核对其密钥指纹，确认无误后再信任：',
+  'fingerprint.mismatchIntro': '该服务器的密钥与之前记录的不一致，可能存在中间人攻击或服务器密钥轮换：',
+  'fingerprint.mismatchWarn': '若确认服务器正常（如重装系统/轮换密钥），请先「重置」再重新信任。',
+  'fingerprint.cancel': '取消',
+  'fingerprint.trust': '信任',
+  'fingerprint.forget': '重置',
+  // session secret (VSCode Remote-SSH style)
+  'sessionSecret.title': '请输入 {account} 的密码',
+  'sessionSecret.titlePassphrase': '请输入 {account} 的密钥口令',
+  'sessionSecret.intro': '',
+  'sessionSecret.introPassphrase': '',
+  'sessionSecret.placeholder': '密码',
+  'sessionSecret.placeholderPassphrase': '密钥口令',
+  'sessionSecret.required': '请输入后再连接',
+  'sessionSecret.connect': '连接',
+  'sessionSecret.cancel': '取消',
+} as const
+
+export const en: Record<keyof typeof zh, string> = {
+  'entry.label': 'SSH',
+  'entry.tooltip': 'Remote SSH operations panel',
+  'panel.title': 'Remote SSH',
+  'tab.hosts': 'Hosts',
+  'tab.terminal': 'Terminal',
+  'tab.transfer': 'Transfer',
+  'tab.tunnels': 'Tunnels',
+  'tab.cluster': 'Cluster',
+  'hosts.empty': 'No hosts configured. Click "Add host" or import from ~/.ssh/config.',
+  'hosts.add': 'Add host',
+  'hosts.import': 'Import ~/.ssh/config',
+  'hosts.search': 'Search alias / description / tags…',
+  'hosts.col.alias': 'Alias',
+  'hosts.col.host': 'Host',
+  'hosts.col.user': 'User',
+  'hosts.col.auth': 'Auth',
+  'hosts.col.environment': 'Environment',
+  'hosts.col.tags': 'Tags',
+  'hosts.col.description': 'Description',
+  'hosts.col.actions': 'Actions',
+  'hosts.test': 'Test',
+  'hosts.edit': 'Edit',
+  'hosts.delete': 'Delete',
+  'hosts.deleteConfirm': 'Delete host "{alias}"? Its tunnels will be stopped.',
+  'hosts.imported': 'Parsed {parsed} blocks, added {added} hosts, skipped {skipped}.',
+  'hosts.testing': 'Testing connection…',
+  'hosts.testOk': 'Connected ({latency} ms)',
+  'hosts.testFail': 'Connection failed: {error}',
+  'hosts.connected': 'Connect',
+  'hosts.notConnected': 'Not connected',
+  'form.title.create': 'Add host',
+  'form.title.edit': 'Edit host {alias}',
+  'form.alias': 'Alias',
+  'form.aliasHint': 'Lowercase letters, digits and single hyphens; used in every operation',
+  'form.host': 'Host',
+  'form.port': 'Port',
+  'form.user': 'User',
+  'form.auth': 'Authentication',
+  'form.auth.key': 'Key',
+  'form.auth.password': 'Password',
+  'form.authKeepHint': 'While editing, empty secret fields keep the stored authentication and credentials; enter new secrets to switch methods.',
+  'form.keyPath': 'Private key path',
+  'form.keyPathHint': 'e.g. ~/.ssh/id_ed25519',
+  'form.agentHint': 'Leave empty to use keys from ssh-agent: set SSH_AUTH_SOCK (unix / Git-Bash ssh-agent / WSL) — zero input',
+  'form.passphrase': 'Key passphrase',
+  'form.password': 'Password',
+  'form.passwordHint': 'Session-only: enter on first connect, never persisted (VSCode Remote-SSH style)',
+  'form.proxyJump': 'Jump host aliases',
+  'form.proxyJumpHint': 'Comma-separated local aliases, chained in order',
+  'form.description': 'Description',
+  'form.environment': 'Environment',
+  'form.environmentHint': 'e.g. development / production',
+  'form.tags': 'Tags',
+  'form.tagsHint': 'Comma-separated',
+  'form.location': 'Location',
+  'form.save': 'Save',
+  'form.cancel': 'Cancel',
+  'form.required': 'Required fields missing: alias, host, user.',
+  'form.portInvalid': 'Port must be an integer between 1 and 65535.',
+  'terminal.selectHost': 'Select host',
+  'terminal.connect': 'Connect',
+  'terminal.disconnect': 'Disconnect',
+  'terminal.placeholder': 'Select a host and click "Connect" to open the remote terminal.',
+  'terminal.connecting': 'Connecting…',
+  'terminal.ready': 'Terminal connected ({alias})',
+  'terminal.exited': 'Terminal exited ({alias})',
+  'terminal.error': 'Terminal error: {error}',
+  'transfer.selectHost': 'Select host',
+  'transfer.remotePath': 'Remote path',
+  'transfer.remotePathHint': 'e.g. /tmp/ or /home/user/app.tar.gz',
+  'transfer.upload': 'Upload',
+  'transfer.uploading': 'Uploading {file}…',
+  'transfer.download': 'Download',
+  'transfer.downloading': 'Downloading…',
+  'transfer.done': 'Done: {bytes} bytes',
+  'transfer.failed': 'Transfer failed: {error}',
+  'transfer.browseRemote': 'Browse remote',
+  'transfer.refresh': 'Refresh',
+  'transfer.name': 'Name',
+  'transfer.upLevel': 'Parent directory',
+  'transfer.size': 'Size',
+  'transfer.modified': 'Modified',
+  'transfer.bytes': '{value} B',
+  'transfer.kib': '{value} KB',
+  'transfer.mib': '{value} MB',
+  'transfer.gib': '{value} GB',
+  'transfer.percent': '{value}%',
+  'transfer.speed': '{value}/s',
+  'transfer.dir': 'Directory',
+  'transfer.file': 'File',
+  'tunnel.empty': 'No active tunnels.',
+  'tunnel.start': 'New tunnel',
+  'tunnel.alias': 'Host alias',
+  'tunnel.remotePort': 'Remote port',
+  'tunnel.remoteHost': 'Remote host',
+  'tunnel.remoteHostHint': 'Default 127.0.0.1 (the server itself)',
+  'tunnel.localPort': 'Local port',
+  'tunnel.localPortHint': 'Leave empty for auto-assign',
+  'tunnel.stop': 'Stop',
+  'tunnel.stopAll': 'Stop all',
+  'tunnel.stopAllConfirm': 'Stop all tunnels?',
+  'tunnel.row': '{alias}: 127.0.0.1:{localPort} -> {remoteHost}:{remotePort}',
+  'tunnel.started': 'Tunnel up: 127.0.0.1:{localPort}',
+  'tunnel.failed': 'Tunnel failed: {error}',
+  'cluster.command': 'Command',
+  'cluster.run': 'Run',
+  'cluster.confirm': 'Run this command on the matching hosts? It executes for real on the remote servers.',
+  'cluster.aliases': 'Host aliases (comma-separated; empty = all)',
+  'cluster.environment': 'Environment filter',
+  'cluster.tags': 'Tag filter (comma-separated)',
+  'cluster.results': 'Results',
+  'cluster.empty': 'Type a command and click "Run".',
+  'cluster.noMatch': 'No hosts matched.',
+  'cluster.ok': 'OK',
+  'cluster.fail': 'Failed',
+  'cluster.timeout': 'Timed out',
+  'cluster.col.alias': 'Host',
+  'cluster.col.status': 'Status',
+  'cluster.col.exit': 'Exit',
+  'cluster.col.stdout': 'Stdout',
+  'cluster.col.stderr': 'Stderr',
+  'cluster.col.error': 'Error',
+  'cluster.col.duration': 'Duration',
+  'common.loading': 'Loading…',
+  'common.error': 'Error: {error}',
+  'common.refresh': 'Refresh',
+  'common.close': 'Close',
+  'common.confirm': 'Confirm',
+  'fingerprint.title': 'Confirm host key · {alias}',
+  'fingerprint.titleMismatch': 'Host key changed · {alias}',
+  'fingerprint.intro': 'First time connecting to this server. Verify the key fingerprint through an independent trusted channel, then confirm:',
+  'fingerprint.mismatchIntro': 'The server key differs from the previously recorded one — possible man-in-the-middle or key rotation:',
+  'fingerprint.mismatchWarn': 'If the server is legitimate (e.g. reinstall / key rotation), reset first, then re-trust.',
+  'fingerprint.cancel': 'Cancel',
+  'fingerprint.trust': 'Trust',
+  'fingerprint.forget': 'Reset',
+  'sessionSecret.title': 'Enter the password for {account}',
+  'sessionSecret.titlePassphrase': 'Enter the passphrase for {account}',
+  'sessionSecret.intro': '',
+  'sessionSecret.introPassphrase': '',
+  'sessionSecret.placeholder': 'Password',
+  'sessionSecret.placeholderPassphrase': 'Passphrase',
+  'sessionSecret.required': 'Enter a value first',
+  'sessionSecret.connect': 'Connect',
+  'sessionSecret.cancel': 'Cancel',
+}
+
+/** Locale key union. */
+export type SshKey = keyof typeof zh
+
+/** Tiny interpolation: {name} -> value. */
+export function t(dictionary: Record<string, string>, key: string, values?: Record<string, string | number>): string {
+  let text = dictionary[key] ?? key
+  if (values !== undefined) {
+    for (const [name, value] of Object.entries(values)) {
+      text = text.replaceAll(`{${name}}`, String(value))
+    }
+  }
+  return text
+}

package/src/client/ssh/mount.tsx

@@ -0,0 +1,83 @@
+/**
+ * Panel view mounting.
+ *
+ * The `conversation` slot is single-occupant (ui-conversation) and external
+ * plugins cannot declare slots, so the panel takes over the center column at
+ * the DOM level: a container is appended inside the `[data-pane="conversation"]`
+ * grid item (an extra trailing child React never manages), and a stylesheet
+ * rule hides the conversation content while the panel is active. Toggling is
+ * a data attribute on <html> — no React involvement, so the conversation
+ * subtree underneath stays mounted and stateful.
+ */
+import { createRoot, type Root } from 'react-dom/client'
+import type { SshApi } from './api.ts'
+import type { PanelController } from './panel/controller.ts'
+import { SshPanel } from './panel/SshPanel.tsx'
+import css from './panel/panel.module.css'
+
+/** The injected panel container (kept in the DOM, hidden when inactive). */
+export const PANEL_VIEW_SELECTOR = '[data-dsh-ssh-view]'
+
+const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"]'
+const ACTIVE_ATTR = 'data-dsh-ssh-active'
+
+/** Find the center column, or undefined while the frame is not mounted. */
+function conversationColumn(): HTMLElement | undefined {
+  return document.querySelector<HTMLElement>(CONVERSATION_COLUMN_SELECTOR) ?? undefined
+}
+
+/**
+ * Mount the panel React tree into the center column and bind its visibility
+ * to the controller's panelOpen state.
+ * @param controller - the panel controller driving the view.
+ * @param api - the SSH API client the tabs operate through.
+ * @returns disposer unmounting the tree and restoring the column.
+ */
+export function mountPanel(controller: PanelController, api: SshApi): () => void {
+  let root: Root | undefined
+  let container: HTMLDivElement | undefined
+
+  const ensure = (): void => {
+    if (container !== undefined) {
+      if (container.isConnected) return
+      // The conversation pane was replaced; drop the stale tree and remount.
+      root?.unmount()
+      root = undefined
+      container.remove()
+      container = undefined
+    }
+    const column = conversationColumn()
+    if (column === undefined) return
+    container = document.createElement('div')
+    container.dataset.dshSshView = ''
+    container.className = css.view
+    column.appendChild(container)
+    root = createRoot(container)
+    root.render(<SshPanel controller={controller} api={api} />)
+  }
+
+  // The frame mounts after boot settlement; watch for the column's arrival.
+  const waitObserver = new MutationObserver(() => { ensure() })
+  waitObserver.observe(document.body, { childList: true, subtree: true })
+
+  const applyActive = (): void => {
+    if (controller.getSnapshot().panelOpen) {
+      document.documentElement.setAttribute(ACTIVE_ATTR, '')
+    } else {
+      document.documentElement.removeAttribute(ACTIVE_ATTR)
+    }
+  }
+  const unsubscribe = controller.subscribe(applyActive)
+  applyActive()
+  ensure()
+
+  return () => {
+    waitObserver.disconnect()
+    unsubscribe()
+    document.documentElement.removeAttribute(ACTIVE_ATTR)
+    root?.unmount()
+    root = undefined
+    container?.remove()
+    container = undefined
+  }
+}

package/src/client/ssh/panel/ClusterTab.tsx

@@ -0,0 +1,123 @@
+/**
+ * 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 type { SshApi } from '../api.ts'
+import type { ClusterResult } from '../../../ssh/protocol.ts'
+import { errorMessage, tt } from './helpers.ts'
+import css from './panel.module.css'
+
+/** Cluster tab props. */
+export interface ClusterTabProps {
+  api: SshApi
+}
+
+/** Split a comma-separated input into a trimmed, non-empty string list. */
+function splitList(text: string): string[] {
+  return text.split(',').map(part => part.trim()).filter(part => part !== '')
+}
+
+/** The cluster execution tab. */
+export function ClusterTab({ api }: ClusterTabProps) {
+  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<ClusterResult[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const run = async (): Promise<void> => {
+    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 (
+    <div className={css.fillBody}>
+      <div className={css.clusterForm}>
+        <label className={css.field}>
+          <span className={css.fieldLabel}>{tt('cluster.command')}</span>
+          <textarea className={css.input + ' ' + css.commandInput} value={command} onChange={event => { setCommand(event.target.value) }} />
+        </label>
+        <div className={css.clusterFilters}>
+          <input className={css.input} placeholder={tt('cluster.aliases')} value={aliases} onChange={event => { setAliases(event.target.value) }} />
+          <input className={css.input} placeholder={tt('cluster.environment')} value={environment} onChange={event => { setEnvironment(event.target.value) }} />
+          <input className={css.input} placeholder={tt('cluster.tags')} value={tags} onChange={event => { setTags(event.target.value) }} />
+        </div>
+        <div>
+          <button type="button" className={css.primaryButton} disabled={running || command.trim() === ''} onClick={() => { void run() }}>{tt('cluster.run')}</button>
+        </div>
+      </div>
+      {error !== null && <div className={css.banner} data-kind="error">{tt('common.error', { error })}</div>}
+      {results === null && error === null && <div className={css.empty}>{tt('cluster.empty')}</div>}
+      {results !== null && results.length === 0 && <div className={css.empty}>{tt('cluster.noMatch')}</div>}
+      {results !== null && results.length > 0 && (
+        <div className={css.tableWrap}>
+          <table className={css.table}>
+            <thead>
+              <tr>
+                <th>{tt('cluster.col.alias')}</th>
+                <th>{tt('cluster.col.status')}</th>
+                <th>{tt('cluster.col.exit')}</th>
+                <th>{tt('cluster.col.stdout')}</th>
+                <th>{tt('cluster.col.stderr')}</th>
+                <th>{tt('cluster.col.error')}</th>
+                <th>{tt('cluster.col.duration')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {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 (
+                  <tr key={result.alias}>
+                    <td className={css.mono}>{result.alias}</td>
+                    <td><span className={css.badge} data-status={status}>{label}</span></td>
+                    <td className={css.mono}>{result.exitCode ?? '-'}</td>
+                    <td>
+                      {result.stdout !== undefined && result.stdout !== '' && (
+                        <details className={css.cellDetails}>
+                          <summary>{tt('cluster.col.stdout')}</summary>
+                          <pre className={css.cellPre}>{result.stdout}</pre>
+                        </details>
+                      )}
+                    </td>
+                    <td>
+                      {result.stderr !== undefined && result.stderr !== '' && (
+                        <details className={css.cellDetails}>
+                          <summary>{tt('cluster.col.stderr')}</summary>
+                          <pre className={css.cellPre}>{result.stderr}</pre>
+                        </details>
+                      )}
+                    </td>
+                    <td className={css.cellMuted}>{result.error ?? ''}</td>
+                    <td className={css.mono}>{result.durationMs !== undefined ? result.durationMs + ' ms' : '-'}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/ssh/panel/HostFingerprintDialog.tsx

@@ -0,0 +1,82 @@
+/**
+ * Host fingerprint confirm dialog: shown when a connection is refused because
+ * the server's host key is not trusted yet (TOFU first encounter) or changed
+ * (possible MITM / key rotation). Displays the canonical SHA256 fingerprint
+ * and lets the operator confirm (trust) or reset (forget) the record.
+ */
+import { useState } from 'react'
+import type { SshApi } from '../api.ts'
+import { tt } from './helpers.ts'
+import css from './panel.module.css'
+
+/** The dialog's props. */
+export interface HostFingerprintDialogProps {
+  api: SshApi
+  alias: string
+  /** The server's canonical fingerprint (SHA256:…). */
+  fingerprintSha256: string
+  /** True when the refused connection reported a MISMATCH (key changed). */
+  mismatch: boolean
+  onClose: () => void
+  /** Called after a successful trust (retry the connection). */
+  onTrusted: () => void
+}
+
+/** Confirm (or reset) one host key. */
+export function HostFingerprintDialog({ api, alias, fingerprintSha256, mismatch, onClose, onTrusted }: HostFingerprintDialogProps) {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const trust = async (): Promise<void> => {
+    setBusy(true)
+    setError(null)
+    try {
+      await api.hostKeyAction(alias, 'trust')
+      onTrusted()
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+      setBusy(false)
+    }
+  }
+
+  const forget = async (): Promise<void> => {
+    setBusy(true)
+    setError(null)
+    try {
+      await api.hostKeyAction(alias, 'forget')
+      onTrusted()
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className={css.modalBackdrop} onClick={onClose}>
+      <div className={css.modal} role="dialog" aria-modal="true" onClick={event => { event.stopPropagation() }}>
+        <div className={css.modalHeader}>
+          <h3 className={css.modalTitle}>{mismatch ? tt('fingerprint.titleMismatch', { alias }) : tt('fingerprint.title', { alias })}</h3>
+        </div>
+        <div className={css.modalBody}>
+          <p className={css.fingerprintIntro}>{tt(mismatch ? 'fingerprint.mismatchIntro' : 'fingerprint.intro')}</p>
+          <code className={css.fingerprintCode}>{fingerprintSha256}</code>
+          {mismatch && (
+            <p className={css.fingerprintWarn}>{tt('fingerprint.mismatchWarn')}</p>
+          )}
+          {error !== null && <p className={css.formError}>{error}</p>}
+        </div>
+        <div className={css.modalFooter}>
+          <button type="button" className={css.modalGhost} disabled={busy} onClick={onClose}>{tt('fingerprint.cancel')}</button>
+          {mismatch && (
+            <button type="button" className={css.modalGhost} disabled={busy} onClick={() => { void forget() }}>
+              {tt('fingerprint.forget')}
+            </button>
+          )}
+          <button type="button" className={css.modalPrimary} disabled={busy} onClick={() => { void trust() }}>
+            {tt('fingerprint.trust')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}