dsh-ssh-vault 0.0.0-stage → 2.0.0

package/client.js

@@ -0,0 +1,1134 @@
+/**
+ * SSH 保险库的浏览器半边：设置界面的连接管理页。
+ *
+ * 与 Host 侧一样保持零依赖、零构建——这里手写 React 元素，只 require 宿主提供的 'react'。
+ * 数据经同源、document-relative 的 POST 走 `/ssh-vault/*`（见 lib/vault-api.js）。
+ * 文案交给宿主的 locale 服务：注册 `ssh-vault` 命名空间的中英字典，slot 组件用宿主注入的 t，
+ * 所以 DSH 里切换语言后设置页与对话内卡片会立刻跟着变；没有 locale 服务的老宿主退回按 <html lang> 判断。
+ *
+ * 安全性上值得注意的一点：口令通过 HTTP body 提交，**不进入会话日志**，
+ * 这比让模型调用 `ssh_hosts add password=...` 更干净。
+ */
+window.__ModuleLoader__.load({
+  id: 'dsh-ssh-vault',
+  factory(require) {
+    const React = require('react')
+    const h = React.createElement
+    const { useCallback, useContext, useEffect, useRef, useState } = React
+
+    // —— 文案：全部经宿主的 locale 服务提供，这里只维护中英两份字典 ——
+    const DICT = {
+      zh: {
+        sectionTitle: 'SSH 连接',
+        heading: 'SSH 连接',
+        intro: '集中管理远程主机。地址、端口、账号与口令都保存在加密保险库中，对话里只用别名。',
+        keyMode: '密钥保护',
+        vaultDir: '保险库位置',
+        add: '添加连接',
+        empty: '还没有配置任何主机。点「添加连接」开始。',
+        loading: '加载中…',
+        alias: '别名',
+        host: '主机地址',
+        port: '端口',
+        username: '账号',
+        authType: '认证方式',
+        authPassword: '口令认证',
+        authKey: '密钥认证',
+        password: '密码',
+        passwordKeep: '留空表示保持已保存的密码',
+        keyUpload: '上传私钥文件',
+        keyUploadHint: '私钥会保存到保险库目录并自动收紧权限，无需自己处理文件 ACL',
+        keyUploaded: '已选择',
+        keyPath: '或填写私钥路径（运行 DSH 的机器上的绝对路径）',
+        shell: '远程 shell',
+        description: '备注',
+        tags: '标签（逗号分隔）',
+        save: '保存',
+        cancel: '取消',
+        edit: '编辑',
+        remove: '删除',
+        test: '测试连接',
+        testing: '测试中…',
+        testOk: '连接正常',
+        testFail: '连接失败',
+        confirmRemove: '确定要删除 {alias} 吗？保险库中的凭据会一并移除。',
+        noHostsForTest: '请先添加主机。',
+        saved: '已保存',
+        errorRequired: '请填写必填项。',
+        transportError: '无法连接到宿主：路由不可用。',
+        routeMissing: '宿主没有注册设置接口：插件文件已更新，但宿主进程仍在运行旧代码。请重启 DSH Desktop。',
+        notAuthorized: '请求被宿主拒绝（未认证）。请刷新页面后重试。',
+        chooseFile: '选择文件',
+        noFileChosen: '未选择任何文件',
+        usernameKeyHint: '密钥认证同样需要账号——SSH 连接的是 user@host。',
+        openVault: '用资源管理器打开',
+        openWorking: '正在打开…',
+        openDone: '已打开',
+        healthIdle: '尚未检测',
+        keyAcceptHint: '支持 OpenSSH（id_rsa / id_ed25519，通常没有扩展名）与 PEM（.pem / .key）。'
+          + '若文件选择器里看不到你的私钥，把类型切到「所有文件」即可。',
+        keyIsPublic: '这是公钥，不能用于登录。请选择不带 .pub 后缀的私钥文件。',
+        keyIsPpk: '这是 PuTTY 的 .ppk 私钥，OpenSSH 无法直接使用；请先用 puttygen 转换。',
+        keyNotPrivate: '这不是 OpenSSH/PEM 私钥（缺少 BEGIN … PRIVATE KEY 头）。',
+        keyTooLarge: '文件过大，不像是私钥。',
+        keyReadError: '无法读取该文件。',
+        passphrase: '私钥口令（可选）',
+        passphraseHint: '私钥本身带密码时填写；留空表示私钥未加密。',
+        passwordBadge: '已存密码',
+        noPasswordBadge: '无密码',
+        sudoBadge: 'sudo 口令',
+        keyBadge: '密钥',
+        agentBadge: 'agent',
+        bindAddress: '出口源地址（可选）',
+        updatedAt: '更新于',
+        running: '执行中…',
+        noOutput: '（无输出）',
+        anyFailed: '有失败',
+        shellLabel: 'shell',
+        dockHint: '命令输出：发送第一条消息后并入对话记录',
+      },
+      en: {
+        sectionTitle: 'SSH Connections',
+        heading: 'SSH Connections',
+        intro: 'Manage remote hosts in one place. Address, port, account and password live in an encrypted vault; the conversation only uses aliases.',
+        keyMode: 'Key protection',
+        vaultDir: 'Vault location',
+        add: 'Add connection',
+        empty: 'No hosts configured yet. Start with “Add connection”.',
+        loading: 'Loading…',
+        alias: 'Alias',
+        host: 'Host address',
+        port: 'Port',
+        username: 'Account',
+        authType: 'Authentication',
+        authPassword: 'Password',
+        authKey: 'Private key',
+        password: 'Password',
+        passwordKeep: 'Leave blank to keep the stored password',
+        keyUpload: 'Upload private key file',
+        keyUploadHint: 'The key is stored in the vault directory with its permissions tightened for you',
+        keyUploaded: 'selected',
+        keyPath: 'Or give a private key path (absolute, on the machine running DSH)',
+        shell: 'Remote shell',
+        description: 'Note',
+        tags: 'Tags (comma separated)',
+        save: 'Save',
+        cancel: 'Cancel',
+        edit: 'Edit',
+        remove: 'Delete',
+        test: 'Test connection',
+        testing: 'Testing…',
+        testOk: 'Connection OK',
+        testFail: 'Connection failed',
+        confirmRemove: 'Delete {alias}? Its credentials are removed from the vault too.',
+        noHostsForTest: 'Add a host first.',
+        saved: 'Saved',
+        errorRequired: 'Fill in the required fields.',
+        transportError: 'Cannot reach the host: route unavailable.',
+        routeMissing: 'The host has no settings route: the plugin files are updated but the host process is still running the old code. Restart DSH Desktop.',
+        notAuthorized: 'The host rejected the request (not authenticated). Refresh the page and try again.',
+        chooseFile: 'Choose file',
+        noFileChosen: 'No file chosen',
+        usernameKeyHint: 'Key authentication still needs the account — SSH connects as user@host.',
+        openVault: 'Open in file manager',
+        openWorking: 'Opening…',
+        openDone: 'Opened',
+        healthIdle: 'Not checked yet',
+        keyAcceptHint: 'OpenSSH keys (id_rsa / id_ed25519, usually without an extension) and PEM keys (.pem / .key) '
+          + 'are accepted. If your key is not listed, switch the file type filter to “All files”.',
+        keyIsPublic: 'This is a public key; it cannot be used to log in. Choose the private key without the .pub suffix.',
+        keyIsPpk: 'This is a PuTTY .ppk key, which OpenSSH cannot use directly. Convert it with puttygen first.',
+        keyNotPrivate: 'This is not an OpenSSH/PEM private key (no BEGIN … PRIVATE KEY header).',
+        keyTooLarge: 'The file is too large to be a private key.',
+        keyReadError: 'Could not read that file.',
+        passphrase: 'Key passphrase (optional)',
+        passphraseHint: 'Fill in when the key itself is encrypted; leave blank for an unencrypted key.',
+        passwordBadge: 'password stored',
+        noPasswordBadge: 'no password',
+        sudoBadge: 'sudo password',
+        keyBadge: 'key',
+        agentBadge: 'agent',
+        bindAddress: 'Source address (optional)',
+        updatedAt: 'updated',
+        running: 'Running…',
+        noOutput: 'No output',
+        anyFailed: 'Failed',
+        shellLabel: 'shell',
+        dockHint: 'Command output: it moves into the transcript after your first message',
+      },
+    }
+    // —— 界面语言：交给宿主的 locale 服务 ——
+    //
+    // DSH 的客户端 locale 服务（`ctx.get('locale')`）提供 register(ns, { zh, en }) 注册字典、
+    // bind(ns) 取 t(key, vars)；slot 注册时带 `locale: ns`，宿主就会把 t 作为 prop 传给组件，
+    // 并在语言切换时换掉 t 的引用、按 revision 重新渲染该组件。
+    // 老宿主没有这个服务，所以下面保留了 fallbackT：只在这种情况下按 <html lang> 猜中英。
+    const NS = 'ssh-vault'
+    const LocaleContext = React.createContext(null)
+
+    /**
+     * 兜底取词：没有 locale 服务（或组件不在 withLocale 内）时使用。
+     * @param key - 字典键。
+     * @returns 文案；两种语言都缺该键时返回键名本身。
+     */
+    const fallbackT = (key) => {
+      const lang = String(globalThis.document?.documentElement?.lang ?? '').toLowerCase().startsWith('zh') ? 'zh' : 'en'
+      return DICT[lang]?.[key] ?? DICT.zh[key] ?? key
+    }
+
+    /** 组件内取 t：优先用 withLocale 注入的那个；语言切换后它的引用会变，从而触发重渲染。 */
+    const useT = () => useContext(LocaleContext) ?? fallbackT
+
+    /**
+     * 把要注册的 slot 组件包一层：宿主传进来的 t（注册选项带 `locale` 时才有）放进 context，
+     * 老宿主没传就退回 fallbackT。
+     * @param Component - 被注册的组件。
+     * @returns 包了 LocaleContext.Provider 的组件。
+     */
+    function withLocale(Component) {
+      return function LocaleRoot(props) {
+        const t = props.t ?? fallbackT
+        return h(LocaleContext.Provider, { value: t }, h(Component, props))
+      }
+    }
+
+    // —— 配色：照搬宿主 primitives 的真实定义 ——
+    //
+    // 下面每个值都取自 @deepseek-ai/dsh-client-ui-primitives 的 Button.module.css 与
+    // Input.module.css，不再凭 token 名字猜语义。之前的两处错误正是猜出来的：
+    //   · 副按钮拿 `bg-layer-1` 当底色——宿主按钮其实是「透明底 + border-l3 描边」；
+    //   · 主按钮用 `brand-primary` 配写死的白字——宿主用的是
+    //     `button-primary-fill` 配 `label-primary-foreground`。
+    // 表面色保留中性半透明回退，token 缺失时也不会落成看不清的底色。
+    const C = {
+      text: 'var(--dsw-alias-label-primary, currentColor)',
+      textDim: 'var(--dsw-alias-label-secondary, currentColor)',
+      textDimmed: 'var(--dsw-alias-label-dimmed, currentColor)',
+      border: 'var(--dsw-alias-border-l3, rgba(127,127,127,0.45))',
+      borderSubtle: 'var(--dsw-alias-border-l4, rgba(127,127,127,0.28))',
+      inputBg: 'var(--dsw-alias-bg-layer-1, rgba(127,127,127,0.10))',
+      primaryFill: 'var(--dsw-alias-button-primary-fill, #4f7cff)',
+      primaryText: 'var(--dsw-alias-label-primary-foreground, #ffffff)',
+      radiusSm: 'var(--dsw-radius-sm, 6px)',
+      radiusMd: 'var(--dsw-radius-md, 8px)',
+      surface: 'rgba(127,127,127,0.08)',
+      surfaceStrong: 'rgba(127,127,127,0.14)',
+      ok: 'var(--dsw-alias-state-success-primary, #2e9e5b)',
+      bad: 'var(--dsw-alias-state-error-primary, #d64545)',
+    }
+
+    const S = {
+      page: { display: 'flex', flexDirection: 'column', gap: '14px', color: C.text, fontSize: '13px', lineHeight: 1.6 },
+      head: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '12px' },
+      h: { margin: 0, fontSize: '15px', fontWeight: 600, color: C.text },
+      titleRow: { display: 'flex', alignItems: 'center', gap: '8px' },
+      titleIcon: { flex: 'none', color: C.text },
+      intro: { margin: '4px 0 0', color: C.textDim, maxWidth: '62ch' },
+      meta: {
+        marginTop: '6px', color: C.textDim, fontSize: '12px',
+        // 第一行（版本 + 密钥保护）保持单行；全角空格也是可换行点，必须显式禁掉。
+        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+      },
+      metaBlock: { display: 'flex', flexDirection: 'column', minWidth: 0 },
+      metaRow: { display: 'flex', alignItems: 'center', gap: '8px', marginTop: '2px', color: C.textDim, fontSize: '12px', minWidth: 0 },
+      metaPath: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 },
+      miniButton: {
+        appearance: 'none', WebkitAppearance: 'none', boxSizing: 'border-box', flex: 'none',
+        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+        height: '22px', padding: '0 8px',
+        border: `0.5px solid ${C.border}`, borderRadius: C.radiusSm,
+        background: 'transparent', color: C.text,
+        font: 'inherit', fontSize: '11px', lineHeight: '16px', cursor: 'pointer', whiteSpace: 'nowrap',
+      },
+      button: {
+        // 与宿主 .button / .outline 对齐：透明底、0.5px 描边、继承的文字色。
+        appearance: 'none', WebkitAppearance: 'none', boxSizing: 'border-box',
+        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '4px',
+        height: '28px', padding: '0 10px',
+        border: `0.5px solid ${C.border}`, borderRadius: C.radiusSm,
+        background: 'transparent', color: C.text,
+        font: 'inherit', fontSize: '12px', lineHeight: '18px', cursor: 'pointer', whiteSpace: 'nowrap',
+      },
+      primary: {
+        // 与宿主 .primary 对齐：专用填充色与专用前景色，都不写死。
+        border: 'none', background: C.primaryFill, color: C.primaryText,
+      },
+      danger: { borderColor: C.bad, color: C.bad },
+      card: { border: `0.5px solid ${C.borderSubtle}`, borderRadius: C.radiusMd, background: C.surface, padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px' },
+      hostBlock: { display: 'flex', flexDirection: 'column', gap: '8px' },
+      cardHead: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' },
+      alias: { fontWeight: 600, fontSize: '13px' },
+      badge: { border: `0.5px solid ${C.border}`, borderRadius: '999px', padding: '1px 8px', fontSize: '11px', color: C.textDim },
+      kv: { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '2px 12px', color: C.textDim, fontSize: '12px' },
+      row: { display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' },
+      form: { border: `0.5px solid ${C.border}`, borderRadius: C.radiusMd, background: C.surfaceStrong, padding: '12px', display: 'flex', flexDirection: 'column', gap: '10px' },
+      fields: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: '10px' },
+      field: { display: 'flex', flexDirection: 'column', gap: '3px' },
+      label: { fontSize: '12px', color: C.textDim },
+      input: {
+        // 与宿主 .wrap / .input 对齐：bg-layer-1 底、border-l4 描边、label-primary 字。
+        boxSizing: 'border-box', height: '28px', width: '100%', padding: '0 8px',
+        border: `0.5px solid ${C.borderSubtle}`, borderRadius: C.radiusSm,
+        background: C.inputBg, color: C.text, font: 'inherit', fontSize: '12px',
+      },
+      hint: { fontSize: '11px', color: C.textDim },
+      error: { color: C.bad, fontSize: '12px' },
+      okText: { color: C.ok, fontSize: '12px', fontWeight: 600 },
+      badText: { color: C.bad, fontSize: '12px', fontWeight: 600 },
+      pre: {
+        margin: 0, padding: '8px', borderRadius: C.radiusSm, background: C.inputBg, border: `0.5px solid ${C.borderSubtle}`,
+        fontSize: '11.5px', whiteSpace: 'pre-wrap', wordBreak: 'break-word', maxHeight: '200px', overflow: 'auto', fontFamily: 'ui-monospace, SFMono-Regular, Consolas, monospace',
+      },
+      footer: { color: C.textDimmed, fontSize: '11px' },
+      dot: { width: '8px', height: '8px', borderRadius: '50%', flex: 'none' },
+    }
+
+    /** 连通状态点：灰=未测、黄=检测中、绿=通、红=不通。 */
+    const HEALTH_DOT = {
+      idle: { background: C.textDim },
+      checking: { background: 'var(--dsw-alias-state-warn-primary, #c98a12)' },
+      ok: { background: C.ok },
+      fail: { background: C.bad },
+    }
+
+    /**
+     * 连通状态点的悬停说明。
+     * @param entry - 该主机的体检结果，未检测时为 undefined。
+     * @param t - 当前语言的取词函数。
+     * @returns 说明文本。
+     */
+    function healthTitle(entry, t) {
+      if (entry === undefined) return t('healthIdle')
+      if (entry.status === 'checking') return t('testing')
+      const head = entry.status === 'ok' ? t('testOk') : t('testFail')
+      return entry.detail ? `${head}：${entry.detail}` : head
+    }
+
+    // inline style 表达不了的状态。选择器与宿主的 hover / active / disabled 行为对齐：
+    // 主按钮用 data-variant 排除，改走宿主自己的 button-primary-hover。
+    const SCOPE = 'dsh-ssh-vault'
+    const CSS = [
+      `.${SCOPE} button { transition: background-color .12s ease, border-color .12s ease; }`,
+      `.${SCOPE} button:not([data-variant="primary"]):hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,0.12)); }`,
+      `.${SCOPE} button:not([data-variant="primary"]):active:not(:disabled) { background: var(--dsw-alias-interactive-bg-active, rgba(127,127,127,0.18)); }`,
+      `.${SCOPE} button[data-variant="primary"]:hover:not(:disabled) { background: var(--dsw-alias-button-primary-hover, var(--dsw-alias-button-primary-fill, #4f7cff)); }`,
+      `.${SCOPE} button:disabled { opacity: .4; cursor: not-allowed; }`,
+      `.${SCOPE} button:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary, currentColor); outline-offset: 1px; }`,
+      `.${SCOPE} input::placeholder { color: var(--dsw-alias-label-dimmed, currentColor); }`,
+    ].join('\n')
+
+    /**
+     * 调一次宿主路由。
+     * @param action - 路由末段。
+     * @param payload - JSON 请求体。
+     * @param t - 当前语言的取词函数，用于本地生成的错误文案。
+     * @returns `{ ok: true, value }` 或 `{ ok: false, error }`。
+     */
+    async function call(action, payload, t = fallbackT) {
+      let response
+      try {
+        // document-relative：页面用 <base href="./">，绝对路径会逃出部署前缀。
+        response = await fetch(`ssh-vault/${action}`, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify(payload ?? {}),
+        })
+      } catch {
+        return { ok: false, error: t('transportError') }
+      }
+      // 404 与 401/403 的含义完全不同：前者是宿主根本没注册路由（进程跑的还是旧代码），
+      // 后者只是这次请求没被信任。混成一句话会把排查引向错误方向。
+      if (response.status === 404) return { ok: false, error: t('routeMissing') }
+      if (response.status === 401 || response.status === 403) return { ok: false, error: t('notAuthorized') }
+      if (!response.ok) return { ok: false, error: `${t('transportError')} (HTTP ${response.status})` }
+      try {
+        const envelope = await response.json()
+        if (envelope && envelope.ok === true) return { ok: true, value: envelope.value }
+        const message = envelope && envelope.error && envelope.error.message ? envelope.error.message : t('transportError')
+        return { ok: false, error: message }
+      } catch {
+        return { ok: false, error: t('transportError') }
+      }
+    }
+
+    /** 把一个文件读成 base64（去掉 data URL 前缀）。 */
+    function readAsBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onload = () => {
+          const text = String(reader.result ?? '')
+          const comma = text.indexOf(',')
+          resolve(comma >= 0 ? text.slice(comma + 1) : text)
+        }
+        reader.onerror = () => reject(reader.error ?? new Error('read failed'))
+        reader.readAsDataURL(file)
+      })
+    }
+
+    /**
+     * 先在本机看一眼选中的文件到底是不是私钥。
+     *
+     * 这才是真正管用的限制：`accept` 只能按扩展名过滤，而最常见的私钥
+     * （`id_rsa`、`id_ed25519`）恰恰没有扩展名——只靠扩展名会把主用途挡在门外。
+     * 内容检查既拦得住无关文件，也不会误伤它们。
+     *
+     * @param file - 用户选中的文件。
+     * @param t - 当前语言的取词函数。
+     * @returns 问题描述；看起来是私钥时返回 `null`。
+     */
+    async function inspectKeyFile(file, t = fallbackT) {
+      if (file.size > 64 * 1024) return t('keyTooLarge')
+      let text
+      try {
+        text = (await file.text()).slice(0, 8192)
+      } catch {
+        return t('keyReadError')
+      }
+      const first = (text.split(/\r?\n/, 1)[0] ?? '').trim()
+      if (/^(ssh-rsa|ssh-ed25519|ssh-dss|ecdsa-sha2-|sk-ssh-|sk-ecdsa-)/.test(first)) return t('keyIsPublic')
+      if (/^PuTTY-User-Key-File-/.test(first)) return t('keyIsPpk')
+      if (!/^-----BEGIN (?:OPENSSH |RSA |DSA |EC |ENCRYPTED )?PRIVATE KEY-----/m.test(text)) return t('keyNotPrivate')
+      return null
+    }
+
+    /** 一行表单字段。 */
+    function Field(props) {
+      return h('label', { style: S.field },
+        h('span', { style: S.label }, props.label),
+        props.children,
+        props.hint ? h('span', { style: S.hint }, props.hint) : null)
+    }
+
+    /**
+     * 认证方式徽章。
+     * @param host - 列表里的一条主机记录。
+     * @param t - 当前语言的取词函数。
+     * @returns 徽章文字数组。
+     */
+    function authBadges(host, t) {
+      const badges = []
+      if (host.authType === 'key') badges.push(t('keyBadge'))
+      else if (host.hasPassword) badges.push(t('passwordBadge'))
+      else badges.push(t('noPasswordBadge'))
+      if (host.hasSudoPassword) badges.push(t('sudoBadge'))
+      if (host.credentialRef) badges.push(`credentialRef: ${host.credentialRef}`)
+      return badges
+    }
+
+    /** 新增／编辑表单。 */
+    function HostForm(props) {
+      const t = useT()
+      const existing = props.record
+      const [alias, setAlias] = useState(existing ? existing.alias : '')
+      const [host, setHost] = useState('')
+      const [port, setPort] = useState('22')
+      const [username, setUsername] = useState('')
+      const [authType, setAuthType] = useState(existing ? existing.authType : 'password')
+      const [password, setPassword] = useState('')
+      const [keyPath, setKeyPath] = useState(existing && existing.privateKeyPath ? existing.privateKeyPath : '')
+      const [keyFile, setKeyFile] = useState(null)
+      const [keyFileError, setKeyFileError] = useState('')
+      const [passphrase, setPassphrase] = useState('')
+      const [shell, setShell] = useState(existing ? existing.shell : 'bash')
+      const [description, setDescription] = useState(existing ? existing.description : '')
+      const [tags, setTags] = useState(existing && existing.tags.length > 0 ? existing.tags.join(', ') : '')
+      const [bindAddress, setBindAddress] = useState(existing ? existing.bindAddress : '')
+      const [error, setError] = useState('')
+      const [busy, setBusy] = useState(false)
+
+      // 编辑一台已存在的主机时，地址与账号需要先向宿主索取（列表里是脱敏值）。
+      useEffect(() => {
+        if (!existing) return
+        let alive = true
+        // reveal 的失败结果本来就不展示，取词函数用默认值即可，免得语言切换触发重复请求。
+        call('reveal', { alias: existing.alias }).then((result) => {
+          if (!alive || !result.ok) return
+          setHost(result.value.host ?? '')
+          setPort(String(result.value.port ?? 22))
+          setUsername(result.value.username ?? '')
+        })
+        return () => { alive = false }
+      }, [existing])
+
+      const submit = async () => {
+        setError('')
+        if (alias.trim().length === 0 || host.trim().length === 0 || username.trim().length === 0) {
+          setError(t('errorRequired'))
+          return
+        }
+        if (authType === 'password' && password.length === 0 && !(existing && existing.hasPassword)) {
+          setError(t('errorRequired'))
+          return
+        }
+        setBusy(true)
+        const payload = {
+          alias: alias.trim(),
+          // 编辑时带上旧别名：改名要靠它定位原记录，凭据、私钥路径、备注才会跟着搬过去。
+          ...(existing !== null ? { renameFrom: existing.alias } : {}),
+          host: host.trim(),
+          port: Number(port),
+          username: username.trim(),
+          authType,
+          shell,
+          description,
+          tags: tags.split(',').map((tag) => tag.trim()).filter((tag) => tag.length > 0),
+          bindAddress,
+        }
+        if (authType === 'password') payload.password = password
+        else {
+          payload.privateKeyPath = keyPath.trim()
+          if (passphrase.length > 0) payload.passphrase = passphrase
+          if (keyFile) {
+            try {
+              payload.privateKeyFile = { name: keyFile.name, base64: await readAsBase64(keyFile) }
+            } catch {
+              setBusy(false)
+              setError(t('transportError'))
+              return
+            }
+          }
+        }
+        const result = await call('save', payload, t)
+        setBusy(false)
+        if (!result.ok) {
+          setError(result.error)
+          return
+        }
+        props.onDone(alias.trim())
+      }
+
+      return h('div', { style: S.form },
+        h('div', { style: S.fields },
+          h(Field, { label: t('alias') },
+            h('input', { style: S.input, value: alias, onChange: (e) => setAlias(e.target.value) })),
+          h(Field, { label: t('host') },
+            h('input', { style: S.input, value: host, placeholder: '192.0.2.10', onChange: (e) => setHost(e.target.value) })),
+          h(Field, { label: t('port') },
+            h('input', { style: S.input, value: port, inputMode: 'numeric', onChange: (e) => setPort(e.target.value) })),
+          h(Field, { label: t('username'), hint: authType === 'key' ? t('usernameKeyHint') : undefined },
+            h('input', { style: S.input, value: username, onChange: (e) => setUsername(e.target.value) }))),
+
+        h('div', { style: S.row },
+          h('span', { style: S.label }, t('authType')),
+          h('label', { style: S.row },
+            h('input', { type: 'radio', checked: authType === 'password', onChange: () => setAuthType('password') }),
+            t('authPassword')),
+          h('label', { style: S.row },
+            h('input', { type: 'radio', checked: authType === 'key', onChange: () => setAuthType('key') }),
+            t('authKey'))),
+
+        authType === 'password'
+          ? h(Field, { label: t('password'), hint: existing && existing.hasPassword ? t('passwordKeep') : undefined },
+            h('input', { style: S.input, type: 'password', value: password, autoComplete: 'new-password', onChange: (e) => setPassword(e.target.value) }))
+          : h('div', { style: S.fields },
+            h(Field, { label: t('keyUpload'), hint: `${t('keyUploadHint')}　${t('keyAcceptHint')}` },
+              // 原生 file input 自带边框与内边距，塞进 28px 的输入框里就会像截图那样错位。
+              // 隐藏它、用自己的按钮当触发器，高度与圆角便与其它控件一致。
+              h('label', { style: { ...S.button, alignSelf: 'flex-start' } },
+                t('chooseFile'),
+                h('input', {
+                  type: 'file',
+                  // accept 只是给文件选择器的建议：无扩展名的 id_rsa 仍需切到「所有文件」，
+                  // 真正的把关在 inspectKeyFile（本机预检）与 Host 侧的内容校验。
+                  accept: '.pem,.key,.ppk,.openssh,application/x-pem-file',
+                  style: { display: 'none' },
+                  onChange: async (e) => {
+                    const picked = e.target.files && e.target.files[0] ? e.target.files[0] : null
+                    setKeyFileError('')
+                    if (picked === null) {
+                      setKeyFile(null)
+                      return
+                    }
+                    const problem = await inspectKeyFile(picked, t)
+                    if (problem !== null) {
+                      // 选错就地拒绝并清空，免得把无关文件传上去再被 Host 退回来。
+                      setKeyFile(null)
+                      setKeyFileError(problem)
+                      e.target.value = ''
+                      return
+                    }
+                    setKeyFile(picked)
+                  },
+                })),
+              h('span', { style: keyFileError.length > 0 ? S.badText : S.hint },
+                keyFileError.length > 0
+                  ? keyFileError
+                  : keyFile ? `${t('keyUploaded')}: ${keyFile.name}` : t('noFileChosen'))),
+            h(Field, { label: t('keyPath') },
+              h('input', { style: S.input, value: keyPath, placeholder: 'C:\\keys\\id_rsa', onChange: (e) => setKeyPath(e.target.value) })),
+            h(Field, { label: t('passphrase'), hint: t('passphraseHint') },
+              h('input', { style: S.input, type: 'password', autoComplete: 'new-password', value: passphrase, onChange: (e) => setPassphrase(e.target.value) }))),
+
+        h('div', { style: S.fields },
+          h(Field, { label: t('shell') },
+            h('input', { style: S.input, value: shell, placeholder: 'bash', onChange: (e) => setShell(e.target.value) })),
+          h(Field, { label: t('bindAddress') },
+            h('input', { style: S.input, value: bindAddress, onChange: (e) => setBindAddress(e.target.value) })),
+          h(Field, { label: t('description') },
+            h('input', { style: S.input, value: description, onChange: (e) => setDescription(e.target.value) })),
+          h(Field, { label: t('tags') },
+            h('input', { style: S.input, value: tags, onChange: (e) => setTags(e.target.value) }))),
+
+        error.length > 0 ? h('div', { style: S.error }, error) : null,
+        h('div', { style: S.row },
+          h('button', { 'data-variant': 'primary', style: { ...S.button, ...S.primary }, disabled: busy, onClick: submit }, t('save')),
+          h('button', { style: S.button, disabled: busy, onClick: props.onCancel }, t('cancel'))))
+    }
+
+    /** 设置页主体。 */
+    function SshVaultSettings() {
+      const t = useT()
+      // t 会随语言切换换引用；两个 useCallback 用 ref 取最新 t，保持依赖稳定——
+      // 否则切一次语言就会重新拉列表、重测所有主机（串行 SSH，代价很高）。
+      const tRef = useRef(t)
+      tRef.current = t
+      const [state, setState] = useState({ status: 'loading', hosts: [], error: '', keyMode: '', vaultDir: '', version: '' })
+      const [form, setForm] = useState(null)
+      const [tests, setTests] = useState({})
+      // 打开按钮的反馈必须留在按钮旁边：失败信息若只出现在页顶，点按钮的人看不到。
+      const [openState, setOpenState] = useState({ status: 'idle', detail: '' })
+      /** 每台主机的连通体检结果：alias -> { status, detail }。 */
+      const [health, setHealth] = useState({})
+
+      const load = useCallback(async () => {
+        const result = await call('list', undefined, tRef.current)
+        if (result.ok) {
+          setState({
+            status: 'ready',
+            hosts: result.value.hosts,
+            error: '',
+            keyMode: result.value.keyMode,
+            vaultDir: result.value.vaultDir,
+            version: result.value.version ?? '',
+          })
+        } else {
+          setState({ status: 'ready', hosts: [], error: result.error, keyMode: '', vaultDir: '', version: '' })
+        }
+      }, [])
+
+      useEffect(() => { load() }, [load])
+
+      /**
+       * 体检一台主机，同时更新卡片上的状态点。
+       * @param alias - 主机别名。
+       * @returns 归一化结果，供下方的详细结果区复用。
+       */
+      const measureHost = useCallback(async (alias) => {
+        setHealth((map) => ({ ...map, [alias]: { status: 'checking' } }))
+        const result = await call('test', { alias }, tRef.current)
+        const ok = result.ok === true && result.value.ok === true
+        const detail = result.ok === true ? result.value.detail : result.error
+        const notes = result.ok === true ? (result.value.notes ?? []) : []
+        setHealth((map) => ({ ...map, [alias]: { status: ok ? 'ok' : 'fail', detail } }))
+        return { ok, status: ok ? 'ok' : 'fail', detail, notes }
+      }, [])
+
+      // 卡片一出现就各自体检一次。串行执行：同时开一批 SSH 连接对远端不友好，而且
+      // 一台不通的主机（Host 侧给了 15 秒超时）会让并发的其余连接一起挤在超时上。
+      //
+      // 依赖里带 updatedAt：编辑连接改的是地址/端口/凭据，别名并不变。只看别名的话
+      // 保存后不会重测，旧的红点就一直留在那里。
+      const aliasKey = state.hosts.map((host) => `${host.alias}|${host.updatedAt}`).join(',')
+      useEffect(() => {
+        if (state.status !== 'ready' || state.hosts.length === 0) return undefined
+        let cancelled = false
+        const run = async () => {
+          for (const host of state.hosts) {
+            if (cancelled) return
+            await measureHost(host.alias)
+            if (cancelled) return
+          }
+        }
+        run()
+        return () => { cancelled = true }
+        // 用 aliasKey 而不是 state.hosts：数组引用每次渲染都变，会变成无限重测。
+      }, [aliasKey, state.status, measureHost])
+
+      const runTest = async (alias) => {
+        setTests((map) => ({ ...map, [alias]: { status: 'running' } }))
+        // 手动测试也必须走 measureHost：否则测试成功了，卡片上的点还停在红色。
+        const entry = await measureHost(alias)
+        setTests((map) => ({ ...map, [alias]: { status: entry.status, detail: entry.detail, notes: entry.notes } }))
+      }
+
+      const removeHost = async (alias) => {
+        if (typeof window !== 'undefined' && typeof window.confirm === 'function'
+          && !window.confirm(t('confirmRemove').replace('{alias}', alias))) return
+        const result = await call('remove', { alias }, t)
+        if (!result.ok) {
+          setState((s) => ({ ...s, error: result.error }))
+          return
+        }
+        await load()
+      }
+
+      // 终端图标：设置导航项的图标由 shell 按 section id 绘制，插件无法覆盖
+      // （settings.section 的注册选项只有 id / order / label），所以在页面标题旁补一个。
+      const terminalIcon = h('svg', {
+        viewBox: '0 0 24 24', width: 18, height: 18, style: S.titleIcon, 'aria-hidden': true,
+        fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round',
+      },
+      h('rect', { x: 2.5, y: 4.5, width: 19, height: 15, rx: 2.5 }),
+      h('path', { d: 'M6.5 9.5l3 2.5-3 2.5' }),
+      h('path', { d: 'M12.5 14.5h5' }))
+
+      const openVault = async () => {
+        setOpenState({ status: 'working', detail: '' })
+        const result = await call('openVault', undefined, t)
+        setOpenState(result.ok ? { status: 'ok', detail: '' } : { status: 'fail', detail: result.error })
+      }
+
+      const metaText = `dsh-ssh-vault v${state.version}　·　${t('keyMode')}: ${state.keyMode}`
+
+      const header = h('div', { style: S.head },
+        h('div', { style: { minWidth: 0 } },
+          h('div', { style: S.titleRow }, terminalIcon, h('h3', { style: S.h }, t('heading'))),
+          h('p', { style: S.intro }, t('intro')),
+          state.status === 'ready' && state.error.length === 0
+            ? h('div', { style: S.metaBlock },
+              h('div', { style: S.meta, title: metaText }, metaText),
+              h('div', { style: S.metaRow },
+                h('span', { style: S.metaPath, title: state.vaultDir }, `${t('vaultDir')}: ${state.vaultDir}`),
+                h('button', {
+                  style: S.miniButton,
+                  disabled: openState.status === 'working',
+                  onClick: openVault,
+                }, openState.status === 'working' ? t('openWorking') : t('openVault')),
+                openState.status === 'ok' ? h('span', { key: 'open-ok', style: S.okText }, t('openDone')) : null,
+                openState.status === 'fail'
+                  ? h('span', {
+                    key: 'open-fail',
+                    title: openState.detail,
+                    style: { ...S.badText, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+                  }, openState.detail)
+                  : null))
+            : null),
+        h('button', {
+          'data-variant': 'primary',
+          style: { ...S.button, ...S.primary },
+          onClick: () => setForm({ mode: 'new', record: null }),
+        }, t('add')))
+
+      // 「添加」的表单出现在顶部；「编辑」的表单在**对应卡片下方**就地展开——
+      // 表单原先渲染在列表之前，点编辑时会把视线和滚动位置一起拉到页面顶端。
+      const formHandlers = {
+        onDone: async (savedAlias) => {
+          setForm(null)
+          await load()
+          // 编辑动的是地址/凭据，保存后必须重测这一台，否则旧的红点会一直挂着。
+          if (typeof savedAlias === 'string' && savedAlias.length > 0) await measureHost(savedAlias)
+        },
+        onCancel: () => setForm(null),
+      }
+      const isEditing = (host) => form !== null && form.mode === 'edit' && form.record !== null && form.record.alias === host.alias
+
+      return h('div', { className: SCOPE, style: S.page },
+        h('style', { key: 'scope-style' }, CSS),
+        header,
+        state.error.length > 0 ? h('div', { style: S.error }, state.error) : null,
+        form !== null && form.mode === 'new'
+          ? h(HostForm, { key: 'new-form', record: null, ...formHandlers })
+          : null,
+        state.status === 'loading'
+          ? h('div', { style: { color: C.textDim } }, t('loading'))
+          : state.hosts.length === 0 && form === null
+            ? h('div', { style: { color: C.textDim } }, t('empty'))
+            : state.hosts.map((host) => {
+              const test = tests[host.alias]
+              return h('div', { key: host.alias, style: S.hostBlock },
+                h('div', { style: S.card },
+                  h('div', { style: S.cardHead },
+                    h('span', {
+                      style: {
+                        ...S.dot,
+                        ...HEALTH_DOT[health[host.alias] === undefined ? 'idle' : health[host.alias].status],
+                      },
+                      title: healthTitle(health[host.alias], t),
+                    }),
+                    h('span', { style: S.alias }, host.alias),
+                    ...authBadges(host, t).map((badge, index) => h('span', { key: index, style: S.badge }, badge)),
+                    host.updatedAt ? h('span', { style: { ...S.badge, borderColor: 'transparent' } }, `${t('updatedAt')} ${String(host.updatedAt).slice(0, 19).replace('T', ' ')}`) : null),
+                  h('div', { style: S.kv },
+                    h('span', null, `${host.host}:${host.port}`),
+                    h('span', null, host.username),
+                    h('span', null, t('shellLabel')),
+                    h('span', null, host.shell),
+                    ...(host.description ? [h('span', null, t('description')), h('span', null, host.description)] : []),
+                    ...(host.tags.length > 0 ? [h('span', null, t('tags')), h('span', null, host.tags.join(', '))] : [])),
+                  h('div', { style: S.row },
+                    h('button', { style: S.button, disabled: test && test.status === 'running', onClick: () => runTest(host.alias) },
+                      test && test.status === 'running' ? t('testing') : t('test')),
+                    h('button', {
+                      style: S.button,
+                      onClick: () => setForm(isEditing(host) ? null : { mode: 'edit', record: host }),
+                    }, isEditing(host) ? t('cancel') : t('edit')),
+                    h('button', { style: { ...S.button, ...S.danger }, onClick: () => removeHost(host.alias) }, t('remove'))),
+                  test && test.status !== 'running'
+                    ? h('div', null,
+                      h('div', { style: test.status === 'ok' ? S.okText : S.badText }, test.status === 'ok' ? t('testOk') : t('testFail')),
+                      test.detail ? h('pre', { style: S.pre }, test.detail) : null,
+                      test.notes && test.notes.length > 0 ? h('pre', { style: S.pre }, test.notes.join('\n')) : null)
+                    : null),
+                isEditing(host) ? h(HostForm, { record: host, ...formHandlers }) : null)
+            }))
+    }
+
+    // —— SSH 工具的对话内终端视图 ——
+    //
+    // 注册点是 `tool.call.toolview`：按**工具名**分发，所以我们只影响自己注册的三个工具，
+    // 不覆盖任何内置 UI（ssh_run / ssh_probe / ssh_transfer 都不在已占用列表里）。
+    // 内置 bash 工具在同一槽位用的是宿主的 TerminalBlock；纯 JS 客户端拿不到宿主包
+    // （builtins 只有 ctx / React / host / styles / console），所以这里自绘一个可滚动终端。
+
+    /**
+     * 从工具节点里取出这次调用的形状。
+     *
+     * 运行中时节点本身就是 call；已结算时挂在 `block.call` 上，结果在 `block.content`。
+     *
+     * @param block - 工具节点。
+     * @returns 归一化的调用视图，或 null（交给通用行）。
+     */
+    function sshCallOf(block) {
+      if (block === null || typeof block !== 'object') return null
+      const settled = Object.prototype.hasOwnProperty.call(block, 'kind')
+      const call = settled ? block.call : block
+      if (call === null || typeof call !== 'object') return null
+      let args = {}
+      try {
+        const parsed = JSON.parse(call.argsRaw)
+        if (parsed !== null && typeof parsed === 'object' && !Array.isArray(parsed)) args = parsed
+      } catch {
+        args = {}
+      }
+      return {
+        settled,
+        name: typeof call.name === 'string' ? call.name : '',
+        args,
+        text: settled ? resultTextOf(block) : '',
+        isError: block.isError === true,
+      }
+    }
+
+    /**
+     * 取结果里的唯一文本块，并剥掉 Host 侧包上的 console 围栏（围栏只是给通用行兜底用的）。
+     * @param block - 已结算的工具节点。
+     * @returns 输出文本。
+     */
+    function resultTextOf(block) {
+      const content = block.content
+      if (!Array.isArray(content) || content.length !== 1) return ''
+      const only = content[0]
+      if (only === null || typeof only !== 'object' || only.type !== 'text' || typeof only.text !== 'string') return ''
+      const fenced = /^```[a-z]*\n([\s\S]*?)\n```$/.exec(only.text)
+      return fenced === null ? only.text : fenced[1]
+    }
+
+    /**
+     * 终端标题行：优先显示实际命令，其余工具给出一行等价描述。
+     * @param call - 归一化的调用视图。
+     * @returns 标题文本。
+     */
+    function sshHeadlineOf(call) {
+      if (typeof call.args.command === 'string' && call.args.command.trim().length > 0) return call.args.command
+      if (call.name === 'ssh_probe') return `ssh_probe ${String(call.args.host ?? '')}`
+      if (call.name === 'ssh_transfer') {
+        const arrow = call.args.direction === 'upload' ? '→' : '←'
+        return `scp ${String(call.args.local ?? '')} ${arrow} ${String(call.args.remote ?? '')}`
+      }
+      return call.name
+    }
+
+    /**
+     * 把输出拆成正文与退出状态。
+     *
+     * 标记约定与 Host 侧渲染一致：`[exit code: N]` / `[killed by signal: X]`。退出码要从
+     * 正文里摘掉，否则同一次失败会既出现在文本里又出现在状态标签上。标记后面还可能跟着
+     * 诊断建议，所以匹配不要求它位于整段文本的最末尾。
+     *
+     * @param text - 工具结果文本。
+     * @returns 去掉标记的正文，以及退出码或终止信号。
+     */
+    function splitTerminalStatus(text) {
+      const signal = /\n\[killed by signal: ([^\]\n]+)\](?:\n|$)/.exec(text)
+      if (signal !== null) {
+        return { body: text.replace(signal[0], '\n').replace(/\n+$/, ''), signal: signal[1], exitCode: undefined }
+      }
+      const exit = /\n\[exit code: (\d+)\](?:\n|$)/.exec(text)
+      if (exit !== null) {
+        return { body: text.replace(exit[0], '\n').replace(/\n+$/, ''), signal: undefined, exitCode: Number(exit[1]) }
+      }
+      return { body: text.replace(/\n+$/, ''), signal: undefined, exitCode: 0 }
+    }
+
+    const MONO = 'ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace'
+    const T = {
+      card: {
+        border: `0.5px solid ${C.border}`, borderRadius: C.radiusMd, overflow: 'hidden',
+        // 中性半透明底：深色主题下变深、浅色主题下是淡灰，文字始终走 label-primary 保证对比。
+        background: 'rgba(0,0,0,0.14)',
+      },
+      head: {
+        display: 'flex', alignItems: 'center', gap: '8px', padding: '5px 10px',
+        borderBottom: `0.5px solid ${C.borderSubtle}`, color: C.textDim,
+        fontFamily: MONO, fontSize: '11.5px', lineHeight: 1.5,
+      },
+      dot: { width: '7px', height: '7px', borderRadius: '50%', flex: 'none', background: C.textDim },
+      dotOk: { width: '7px', height: '7px', borderRadius: '50%', flex: 'none', background: C.ok },
+      dotRunning: { width: '7px', height: '7px', borderRadius: '50%', flex: 'none', background: 'var(--dsw-alias-state-business-primary, #4f7cff)' },
+      dotError: { width: '7px', height: '7px', borderRadius: '50%', flex: 'none', background: C.bad },
+      headText: { minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: C.text },
+      pre: {
+        margin: 0, padding: '8px 10px', maxHeight: '320px', overflow: 'auto',
+        fontFamily: MONO, fontSize: '12px', lineHeight: 1.55,
+        color: C.text, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+      },
+      empty: { padding: '8px 10px', color: C.textDim, fontSize: '11.5px', fontFamily: MONO },
+      statusBadge: {
+        marginLeft: 'auto', flex: 'none', padding: '0 6px', borderRadius: '999px',
+        border: `0.5px solid ${C.border}`, fontSize: '10.5px', color: C.textDim,
+      },
+      /** 居中的段名徽章：绝对定位到标题栏正中，不受左右两项的宽度影响。 */
+      badgeCentered: {
+        position: 'absolute', left: '50%', transform: 'translateX(-50%)',
+        flex: 'none', padding: '0 6px', borderRadius: '999px',
+        border: `0.5px solid ${C.border}`, fontSize: '10.5px', color: C.textDim,
+      },
+    }
+
+    /**
+     * 对话里的 SSH 终端行：标题显示命令与主机，下面是一个可滚动的输出区。
+     * @param props - toolview 运行时注入的阶段数据。
+     * @returns 终端视图。
+     */
+    function SshTerminalRow(props) {
+      const t = useT()
+      const call = sshCallOf(props?.block)
+      if (call === null) return null
+      const running = !call.settled
+      const host = typeof call.args.host === 'string' ? call.args.host : ''
+      const headline = sshHeadlineOf(call)
+      const label = host === '' ? headline : `${host} · ${headline}`
+      const status = splitTerminalStatus(call.text)
+      // 非零退出码不算错误返回（工具按约定不抛错），但状态点必须反映它，否则失败看起来是成功的。
+      const failed = call.isError || status.signal !== undefined
+        || (status.exitCode !== undefined && status.exitCode !== 0)
+      const badge = status.signal !== undefined
+        ? status.signal
+        : status.exitCode !== undefined && status.exitCode !== 0 ? `exit ${status.exitCode}` : null
+      const body = status.body
+      return h('div', { style: T.card },
+        h('div', { style: T.head },
+          h('span', { style: failed ? T.dotError : running ? T.dotRunning : T.dot, 'aria-hidden': true }),
+          h('span', { style: T.headText, title: label }, label),
+          badge !== null ? h('span', { style: T.statusBadge }, badge) : null),
+        body.length > 0
+          ? h('pre', { style: T.pre }, body)
+          : h('div', { style: T.empty }, running ? t('running') : t('noOutput')))
+    }
+
+    /** 与 Host 侧约定的分节标记：`─── 连接状态:ok ───` / `─── 命令执行:fail ───`。 */
+    const SECTION_RE = /^─── (.+?):(ok|fail) ───$/
+
+    /**
+     * 把 `/hosts` 的输出按分节标记拆开。
+     * @param text - 命令结果文本。
+     * @returns 各段：标题、该段是否失败、正文。
+     */
+    function splitSections(text) {
+      const sections = []
+      let current = null
+      for (const line of text.split('\n')) {
+        const match = SECTION_RE.exec(line)
+        if (match !== null) {
+          current = { title: match[1], failed: match[2] === 'fail', lines: [] }
+          sections.push(current)
+          continue
+        }
+        if (current !== null) current.lines.push(line)
+      }
+      return sections.map((section) => ({ ...section, body: section.lines.join('\n').trim() }))
+    }
+
+    /**
+     * 对话里 `/hosts` 命令行的终端视图。
+     *
+     * 通用命令行卡片会把结果塞进一个无样式的 `<pre>` 并默认折叠，和 `ssh_run` 的终端卡片
+     * 完全不像两种东西。命令名的渲染槽位目前是空的，所以直接接管，复用同一套卡片样式。
+     *
+     * 每个分段渲染成一张独立卡片、**各自**亮灯：连接状态只看探测结果，命令执行只看命令的
+     * 退出状态。早先两张卡共用整条命令的成败标志，命令一失败连通的卡片也跟着变红。
+     *
+     * @param props - 命令行注入的节点；`node` 就是这次命令的生命周期数据。
+     * @returns 终端视图。
+     */
+    function HostsCommandRow(props) {
+      const t = useT()
+      const node = props?.node
+      const outcome = node?.outcome
+      const running = outcome === null || outcome === undefined
+      const text = typeof outcome?.text === 'string' ? outcome.text : ''
+      const name = typeof node?.name === 'string' && node.name.length > 0 ? node.name : 'hosts'
+      const sections = splitSections(text)
+      if (sections.length === 0) {
+        // 运行中或整条命令报错时没有分节标记，退回单卡片。
+        return h('div', { style: T.card },
+          h('div', { style: T.head },
+            h('span', { style: running ? T.dotRunning : T.dotError, 'aria-hidden': true }),
+            h('span', { style: T.headText }, `/${name}`)),
+          text.length > 0
+            ? h('pre', { style: T.pre }, text)
+            : h('div', { style: T.empty }, running ? t('running') : t('noOutput')))
+      }
+      return h('div', { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+        ...sections.map((section, index) => h('div', { key: index, style: T.card },
+          // 段名居中：它是这张卡的身份，不该和右侧的「有失败」挤在同一条对齐线上。
+          h('div', { style: { ...T.head, position: 'relative' } },
+            h('span', {
+              style: section.failed ? T.dotError : running ? T.dotRunning : T.dotOk,
+              'aria-hidden': true,
+            }),
+            h('span', { style: T.headText }, index === 0 ? `/${name}` : section.title),
+            index === 0 ? h('span', { style: T.badgeCentered }, section.title) : null,
+            section.failed ? h('span', { style: T.statusBadge }, t('anyFailed')) : null),
+          section.body.length > 0
+            ? h('pre', { style: T.pre }, section.body)
+            : h('div', { style: T.empty }, running ? t('running') : t('noOutput')))))
+    }
+
+    /**
+     * 从宿主 Chat 目标快照里取出 `/hosts` 的命令节点。
+     *
+     * DSH 的 Chat 视图有一个约定：**整段记录只有命令节点时它不算「活跃视图」**
+     * （`chatViewDefinition.isActive` 要求至少有一个非 command 节点）。于是新建会话里
+     * 先跑 `/hosts` 的结果既不在对话区显示，也不会自动展开——用户看起来就是「回车没反应」，
+     * 直到发出第一条消息，命令卡片才作为历史出现在顶部。
+     *
+     * 这个函数把那些命令节点找出来，交给下面的 dock 面板在「首条消息之前」代为显示。
+     *
+     * @param snapshot - Chat 目标快照 `{ order, nodes }`；尚未激活时为 undefined。
+     * @returns `/hosts` 的命令数据数组（按时间顺序）；快照不可读时为 null。
+     */
+    function hostsCommandNodesOf(snapshot) {
+      if (snapshot === undefined || snapshot === null || !Array.isArray(snapshot.order)) return null
+      const nodes = snapshot.nodes
+      if (nodes === undefined || typeof nodes.get !== 'function') return null
+      const commands = []
+      for (const key of snapshot.order) {
+        const node = nodes.get(key)
+        if (node?.kind === 'command' && node.data?.name === 'hosts') commands.push(node.data)
+      }
+      return commands
+    }
+
+    /**
+     * Chat 视图是否已经有非命令内容。
+     * @param snapshot - Chat 目标快照。
+     * @returns 有普通消息（对话区会自己渲染）时为 true。
+     */
+    function chatHasTranscript(snapshot) {
+      if (snapshot === undefined || snapshot === null || !Array.isArray(snapshot.order)) return false
+      const nodes = snapshot.nodes
+      if (nodes === undefined || typeof nodes.get !== 'function') return false
+      return snapshot.order.some((key) => nodes.get(key)?.kind !== 'command')
+    }
+
+    /**
+     * 首条消息之前的 `/hosts` 结果面板。
+     *
+     * 宿主只会在「有非命令节点」时才把 Chat 视图当作活跃视图，所以新会话里单独跑 `/hosts`
+     * 的结果默认不可见。这里把这些命令节点渲染在输入框上方的 dock 里：运行中立刻能看到
+     * 「执行中…」，结果出来就地显示；一旦发出第一条消息，对话区接管，本面板返回 null，
+     * 不会重复显示。
+     *
+     * @param props - 注入的两个 hook 与 locale 的 t。
+     * @returns dock 卡片，或 null（不该显示时）。
+     */
+    function HostsResultDock(props) {
+      const t = useT()
+      const session = props.useSshHostsSession((snapshot) => snapshot)
+      const chat = props.useSshHostsChat((snapshot) => snapshot)
+      const commands = hostsCommandNodesOf(chat)
+      if (session?.blank !== true || chatHasTranscript(chat) || commands === null || commands.length === 0) return null
+      return h('div', {
+        style: { display: 'flex', flexDirection: 'column', gap: '8px', maxHeight: '38vh', overflowY: 'auto' },
+        'data-ssh-vault-hosts-dock': '',
+      },
+      h('div', { style: { color: C.textDim, fontSize: '11px' } }, t('dockHint')),
+      ...commands.map((command, index) => h(HostsCommandRow, {
+        key: `hosts-${command.commandId ?? command.seq ?? index}`,
+        node: command,
+      })))
+    }
+
+    return {
+      // locale 是可选的：这里只声明 slots，locale 用 ctx.get('locale') 做可选查找，
+      // 没有它的老宿主照样能加载（文案退回 fallbackT）。
+      inject: ['slots'],
+      apply(ctx) {
+        const locale = ctx.get('locale')
+        if (locale !== undefined) {
+          // 字典随插件卸载一并撤销；语言切换时宿主按 revision 重渲染带 locale 的 slot。
+          ctx.effect(() => locale.register(NS, { zh: DICT.zh, en: DICT.en }), 'ssh-vault: dictionaries')
+        }
+        const loc = locale === undefined ? {} : { locale: NS }
+        // 设置导航项的文字在宿主列表快照里求值，locale revision 变化时会被重新调用。
+        const label = () => (locale === undefined ? fallbackT('sectionTitle') : locale.bind(NS)('sectionTitle'))
+        ctx.slots.inject('settings.section', () => ctx.slots.register({
+          name: 'settings.section',
+          id: 'ssh-vault',
+          order: 20,
+          label,
+          ...loc,
+        }, withLocale(SshVaultSettings)))
+        // SSH 工具的对话内终端：按工具名分发，只占我们自己的三个名字。
+        ctx.slots.inject('tool.call.toolview', function* () {
+          for (const key of ['ssh_run', 'ssh_probe', 'ssh_transfer']) {
+            yield ctx.slots.register({ name: 'tool.call.toolview', key, ...loc }, withLocale(SshTerminalRow))
+          }
+        })
+        // `/hosts` 命令自己的行：让它的输出也呈终端样式，而不是通用的折叠 <pre>。
+        ctx.slots.inject('conversation.chat.commandview', () => ctx.slots.register({
+          name: 'conversation.chat.commandview',
+          key: 'hosts',
+          ...loc,
+        }, withLocale(HostsCommandRow)))
+
+        // 新会话里「只有命令、还没有任何消息」时，宿主不把 Chat 视图当活跃视图，
+        // `/hosts` 结果因此不可见。把它渲染到输入框上方的 dock 里补上这个空档。
+        // sessions / uiConversation 用 ctx.inject 等它们就绪（它们可能比本插件晚加载）；
+        // 老宿主没有这两个服务时回调永不触发，插件其余部分照常工作。
+        const EMPTY_SOURCE = { getSnapshot: () => undefined, subscribe: () => () => {} }
+        ctx.inject(['sessions', 'uiConversation'], (dockCtx) => {
+          const sessions = dockCtx.sessions
+          const uiConversation = dockCtx.uiConversation
+          dockCtx.slots.inject('conversation.input.dock', () => dockCtx.slots.register({
+            name: 'conversation.input.dock',
+            id: 'ssh-vault-hosts-result',
+            order: 5,
+            ...loc,
+            inject: (sessionId) => {
+              let sessionSource = EMPTY_SOURCE
+              let chatSource = EMPTY_SOURCE
+              try {
+                const binding = sessions.binding(sessionId)
+                if (binding !== undefined) {
+                  sessionSource = binding.session
+                  // Chat 目标快照在第一次订阅时才会激活；绑定失败就退回空源，面板不显示。
+                  chatSource = uiConversation.binding(binding).target('chat') ?? EMPTY_SOURCE
+                }
+              } catch {
+                // 会话正在销毁等边界情况：让面板安静地不显示，不把异常抛给渲染器。
+              }
+              return {
+                hooks: {
+                  sshHostsSession: sessionSource,
+                  sshHostsChat: chatSource,
+                },
+              }
+            },
+          }, withLocale(HostsResultDock)))
+        })
+      },
+    }
+  },
+})