dsh-dbhub-live 5.0.1 → 5.2.0-dev.3

package/lib/client.js

@@ -41,10 +41,49 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
   }
   var ChevronIcon = pickIcon("IconChevronDownOutline14", "▼");
   var CopyIcon = pickIcon("IconCopyOutline16", "⧉");
-  var EditIcon = pickIcon("IconEditOutline16", "✏");
   var CloseIcon = pickIcon("IconCloseOutline16", "✕");
-  var TrashIcon = pickIcon("IconTrashOutline16", "🗑");
-  var RunIcon = pickIcon("IconPlayOutline16", "▶");
+  // Row-action glyphs are drawn here instead of taken from the icon set: at 1x the
+  // bundled edit glyph reads as an unidentifiable dash, while these three shapes
+  // (filled play, pencil, lidded trash) stay recognisable at 16px on any DPI.
+  var svgIcon = function (children) {
+    return function (props) {
+      var size = (props && props.size) || 16;
+      return h("svg", {
+        className: "dbh-svgicon",
+        width: size, height: size, viewBox: "0 0 16 16",
+        fill: "none", stroke: "currentColor", strokeWidth: "1.5",
+        strokeLinecap: "round", strokeLinejoin: "round",
+        "aria-hidden": true, focusable: false,
+      }, children);
+    };
+  };
+  var RunIcon = svgIcon(h("path", {
+    key: "play", d: "M5.2 3.3v9.4L12.6 8 5.2 3.3z",
+    fill: "currentColor", stroke: "none",
+  }));
+  var EditIcon = svgIcon([
+    h("path", { key: "body", d: "M10.9 2.6a1.6 1.6 0 0 1 2.3 2.3L5.6 12.5l-3 .7.7-3 7.6-7.6z" }),
+    h("path", { key: "tip", d: "M9.7 3.8l2.3 2.3" }),
+  ]);
+  var TrashIcon = svgIcon([
+    h("path", { key: "lid", d: "M3 4.5h10" }),
+    h("path", { key: "handle", d: "M6.3 4.5V3.1h3.4v1.4" }),
+    h("path", { key: "body", d: "M4.5 4.5l.6 8.6h5.8l.6-8.6" }),
+    h("path", { key: "line1", d: "M6.6 7v4.2" }),
+    h("path", { key: "line2", d: "M9.4 7v4.2" }),
+  ]);
+  // Read-only state: the user asked for the universally recognised emoji lock
+  // pair — 🔓 when writable, 🔒 when writes are blocked. The hand-drawn 16px
+  // shackle was too small to tell open from closed at a glance.
+  // The refresh glyph is the update check's affordance: a named primitive when
+  // the running dsh ships it, a text glyph otherwise (a rename must not blank
+  // the button).
+  var RefreshIcon = pickIcon("IconRefreshOutlineRegular", "↻");
+  // The platform's own toggle: same geometry, tokens and 120ms thumb animation
+  // as the harness settings pages, so it follows every theme/skin. A local
+  // fallback with the same geometry keeps the control alive if a baseline build
+  // predates the primitive.
+  var SwitchPrimitive = primitives && typeof primitives.Switch === "function" ? primitives.Switch : null;
 
   var NS = "dsh-dbhub-live";
 
@@ -67,7 +106,83 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     "cfg.off": "隐藏",
     "cfg.update": "自动更新间隔(天)",
     "cfg.sidebar": "在侧边栏显示入口",
-    "cfg.sidebarHint": "打开后左侧栏出现「DBHub 数据库工具」快捷入口；关闭后仍可从 设置 → DBHub 数据库工具 或插件页该行的「配置」进入。",
+    "cfg.policy": "向模型注入数据库访问策略",
+    "cfg.policyHint": "开启后，系统提示词会声明「本插件已配置的连接一律走 dbhub_* 工具，不要用命令行客户端/脚本/驱动或其它插件绕过」，并说明本插件不支持的库可以用你安装的其它数据库插件。关闭只是不再注入这段文字——工具、只读与其它设置全部照常工作。",
+    "cfg.sidebarHint": "关闭后左侧栏不再出现「DBHub 数据库工具」快捷入口——但插件照常工作（工具仍可用），本设置页与插件页也始终可进入。注意：点「禁用」会让入口无条件消失，与这个开关无关。",
+    "cfg.enabledHint": "侧边栏入口 = 本开关 且 插件处于启用状态。",
+    "cfg.disabledHint": "插件已禁用：侧边栏入口已隐藏（与上面的开关无关）。本设置页与插件页仍然可用——点上方的「启用」即可恢复。",
+    "cfg.enableHint": "停用后模型无法调用本插件的工具；连接与配置全部保留，随时可以再启用。",
+    "cfg.updateHint": "dbhub 可执行文件的自动更新间隔（天）；0 = 不自动更新。",
+    // Modern surfaces (5.2 redesign): one compact status line, DSH-style settings
+    // rows, an on-demand update link, and a collapsed technical-details block.
+    "status.conns": "{n} 个连接",
+    "settings.title": "插件设置",
+    "settings.toggle": "设置",
+    "settings.more": "说明与技术详情",
+    "settings.notes": "说明",
+    "settings.less": "收起说明",
+    "row.enable": "启用插件",
+    "row.sidebar": "侧边栏入口",
+    "row.policy": "向模型注入访问策略",
+    "row.update": "dbhub 自动更新",
+    "state.enable": "启用",
+    "state.disable": "停用",
+    "state.show": "显示",
+    "state.hide": "隐藏",
+    "state.on": "开启",
+    "state.off": "关闭",
+    "unit.days": "天",
+    "note.tools": "模型侧固定 {n} 个工具；每次调用使用一次性 dbhub 进程，无常驻服务。",
+    "note.update": "“dbhub 自动更新”只控制 dbhub 可执行文件；插件自身的版本更新走页头的升级提示。",
+    "note.sidebar": "关闭侧边栏入口只是隐藏快捷入口，插件仍然工作；停用插件才会让模型无法调用工具。",
+    "note.policy": "开启后，系统提示词会声明「本插件已配置的连接一律走 dbhub_* 工具，不要用命令行客户端/脚本/驱动或其它插件绕过」，并说明本插件不支持的库可以用你安装的其它数据库插件。关闭只是不再注入这段文字，工具、只读与其它设置全部照常工作。",
+    "note.version": "插件 v{plugin} · DSH {dsh} · {runtime}",
+    "ver.link": "可升级到 {v}",
+    "ro.chipOnHint": "只读已开启，模型无法写入；点此关闭",
+    "ro.chipOffHint": "开启只读，阻止模型写入（模型只能开、不能关）",
+    "ro.chip": "只读",
+    "ro.writable": "可写",
+    "ver.copySpec": "点击复制 dsh-dbhub-live@{v}",
+    "ver.check": "检查更新",
+    "ver.checking": "检查中…",
+    "ver.checkFailed": "检查更新失败",
+    "ver.checkedAgo": "检查于 {n} 分钟前",
+    "ver.webHint": "Web 版：在终端执行 dsh plugin --profile web up dsh-dbhub-live@{v}，然后重启 dsh web。",
+    "ver.desktopHint": "桌面版：打开左侧菜单 → 插件，卸载 dsh-dbhub-live 后重新安装最新版；连接与凭据保存在 ~/.dsh/storages/dsh-dbhub-live，不会被删除。",
+    "ver.genericHint": "Web 版执行 dsh plugin --profile web up dsh-dbhub-live@{v} 后重启 dsh web；桌面版在插件页卸载后重新安装。",
+    "ver.releaseNotes": "更新说明",
+    "ver.copy": "复制",
+    "ver.copyCmd": "复制命令",
+    "ver.runtimeDesktop": "桌面版",
+    "ver.runtimeWeb": "Web 版",
+    "ro.turnOn": "开启只读",
+    "ro.turnOff": "关闭只读",
+    "cap.tooOld": "dbhub {v} 不支持只读 / SSH 隧道（需要 1.4.0 及以上）",
+    "cap.untested": "dbhub {v} 未经验证（只读 / SSH 在 1.4.0+ 实测）",
+    "add.readOnly": "只读模式",
+    "ro.chip": "只读",
+    "ro.title": "只读模式：dbhub 只放行只读语句，写操作会被拒绝（READONLY_VIOLATION）",
+    "ro.sshTitle": "SSH 隧道 {host}:{port}（用户 {user}）",
+    "add.adv": "高级：SSH 隧道",
+    "adv.enable": "经 SSH 隧道连接",
+    "adv.host": "SSH 主机",
+    "adv.port": "端口",
+    "adv.user": "SSH 用户",
+    "adv.auth": "认证方式",
+    "adv.auth.key": "密钥",
+    "adv.auth.password": "密码",
+    "adv.keyPath": "密钥路径",
+    "adv.passphrase": "密钥口令",
+    "adv.password": "SSH 密码",
+    "adv.proxyJump": "ProxyJump（可选，单跳）",
+    "adv.keepSecret": "留空 = 保持原值",
+    "adv.hostHint": "主机名请填域名或 IP（不要填 ~/.ssh/config 里的别名）；库地址仍来自 DSN，要写“从跳板机看过去”的地址。",
+    "adv.slow": "SSH 隧道首次连接较慢，请稍候。",
+    "btn.testConn": "测试该配置",
+    "btn.testSsh": "测试 SSH 隧道",
+    "adv.testSshHint": "只测 SSH 层：先看跳板机端口通不通、密钥文件在不在，再让 dbhub 真的建一次隧道（故意连一个必然关闭的端口——数据库那步失败才说明隧道通了）。",
+    "adv.testSshNeedFields": "请先填 SSH 主机与用户（并选择认证方式），再测试隧道。",
+    "btn.saveOpts": "保存选项",
     "btn.save": "保存配置",
     "btn.add": "添加连接",
     "btn.addConn": "＋ 添加连接",
@@ -85,6 +200,7 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     "btn.enable": "启用",
     "btn.test": "测试",
     "test.testing": "测试中…",
+    "test.elapsed": "测试中… {s}s",
     "test.timeout": "测试超时未返回",
     "saved.ok": "已保存 ✓",
     "badge.saved": "已保存",
@@ -105,6 +221,7 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     "src.user": "已保存·用户",
     "src.collected": "已保存·扫描",
     "src.copied": "已保存·复制",
+    "src.promoted": "已保存·选项提升",
     "src.mise": "自动·mise env",
     "src.env": "自动·.env",
     "pretest.title": "校验并保存连接",
@@ -139,7 +256,81 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     "cfg.off": "hidden",
     "cfg.update": "Update interval (days)",
     "cfg.sidebar": "Show the sidebar entry",
-    "cfg.sidebarHint": "When on, a DBHub Database Tools shortcut appears in the sidebar; when off the page stays reachable from Settings → DBHub Database Tools and from the plugin row's Configure control.",
+    "cfg.policy": "Announce the database-access policy to the model",
+    "cfg.policyHint": "When on, the system prompt states that this plugin's configured connections go through the dbhub_* tools (no command-line client, script, driver or other plugin detour) and that databases it does not cover may use your other database plugin. Turning it off only removes that text — tools, read-only and every other setting keep working.",
+    "cfg.sidebarHint": "When off, the “DBHub Database Tools” shortcut no longer appears in the sidebar — the plugin keeps working (its tools stay available) and this settings page plus the Plugins row stay reachable. Note: pressing Disable hides the entry unconditionally, independently of this switch.",
+    "cfg.enabledHint": "The sidebar entry = this switch AND the plugin being enabled.",
+    "cfg.disabledHint": "The plugin is disabled, so the sidebar entry is hidden (independently of the switch above). This settings page and the Plugins row still work — press Enable above to bring it back.",
+    "cfg.enableHint": "While disabled the model cannot call this plugin's tools; every connection and setting is kept and can be re-enabled at any time.",
+    "cfg.updateHint": "Auto-update interval (days) for the dbhub executable; 0 = never update automatically.",
+    "status.conns": "{n} connections",
+    "settings.title": "Plugin settings",
+    "settings.toggle": "Settings",
+    "settings.more": "Details & diagnostics",
+    "settings.notes": "Details",
+    "settings.less": "Hide details",
+    "row.enable": "Enable plugin",
+    "row.sidebar": "Sidebar entry",
+    "row.policy": "Inject database access policy into the model",
+    "row.update": "dbhub auto-update",
+    "state.enable": "Enabled",
+    "state.disable": "Disabled",
+    "state.show": "Shown",
+    "state.hide": "Hidden",
+    "state.on": "On",
+    "state.off": "Off",
+    "unit.days": "days",
+    "note.tools": "The model always sees {n} tools; every call runs a one-shot dbhub process (no resident service).",
+    "note.update": "The dbhub auto-update interval only controls the dbhub executable; the plugin's own update is offered by the header link.",
+    "note.sidebar": "Hiding the sidebar entry only removes the shortcut — the plugin keeps working. Only disabling the plugin stops the model from calling its tools.",
+    "note.policy": "When on, the system prompt states that every connection configured here goes through the dbhub_* tools (no CLI clients, scripts, drivers or other plugins), and that databases this plugin does not support may use other database plugins the user installed. Turning it off removes only that text; tools, read-only and every other setting keep working.",
+    "note.version": "Plugin v{plugin} · DSH {dsh} · {runtime}",
+    "ver.link": "Upgrade to {v}",
+    "ro.chipOnHint": "Read-only is on and the model cannot write; click to turn it off",
+    "ro.chipOffHint": "Turn read-only on to block model writes (the model can only turn it on, never off)",
+    "ro.chip": "RO",
+    "ro.writable": "Writable",
+    "ver.copySpec": "Click to copy dsh-dbhub-live@{v}",
+    "ver.check": "Check for updates",
+    "ver.checking": "Checking…",
+    "ver.checkFailed": "Update check failed",
+    "ver.checkedAgo": "Checked {n} min ago",
+    "ver.webHint": "Web: run dsh plugin --profile web up dsh-dbhub-live@{v} in a terminal, then restart dsh web.",
+    "ver.desktopHint": "Desktop: open Plugins in the left menu, uninstall dsh-dbhub-live, then install the latest version again. Connections and credentials live in ~/.dsh/storages/dsh-dbhub-live and are preserved.",
+    "ver.genericHint": "Web: run dsh plugin --profile web up dsh-dbhub-live@{v} and restart dsh web. Desktop: uninstall the plugin on the Plugins page, then reinstall it.",
+    "ver.releaseNotes": "Release notes",
+    "ver.copy": "Copy",
+    "ver.copyCmd": "Copy command",
+    "ver.runtimeDesktop": "Desktop",
+    "ver.runtimeWeb": "Web",
+    "ro.turnOn": "Turn read-only on",
+    "ro.turnOff": "Turn read-only off",
+    "cap.tooOld": "dbhub {v} does not support read-only / SSH tunnels (1.4.0 or newer required)",
+    "cap.untested": "dbhub {v} is untested (read-only / SSH were measured on 1.4.0+)",
+    "add.readOnly": "Read-only mode",
+    "ro.chip": "RO",
+    "ro.title": "Read-only mode: dbhub only allows read statements and rejects writes (READONLY_VIOLATION)",
+    "ro.sshTitle": "SSH tunnel {host}:{port} (user {user})",
+    "add.adv": "Advanced: SSH tunnel",
+    "adv.enable": "Connect through an SSH tunnel",
+    "adv.host": "SSH host",
+    "adv.port": "Port",
+    "adv.user": "SSH user",
+    "adv.auth": "Auth",
+    "adv.auth.key": "Key",
+    "adv.auth.password": "Password",
+    "adv.keyPath": "Key path",
+    "adv.passphrase": "Key passphrase",
+    "adv.password": "SSH password",
+    "adv.proxyJump": "ProxyJump (optional, single hop)",
+    "adv.keepSecret": "blank = keep the stored value",
+    "adv.hostHint": "Use a domain or IP (never an ~/.ssh/config alias); the database address still comes from the DSN and must be the one the bastion sees.",
+    "adv.slow": "The first connection through an SSH tunnel is slow — please wait.",
+    "btn.testConn": "Test this configuration",
+    "btn.testSsh": "Test SSH tunnel",
+    "adv.testSshHint": "Tests the SSH layer ONLY: first whether the bastion's port is reachable and the key file exists, then whether dbhub can bring the tunnel up (it deliberately aims at a port that must be closed — the database step failing is what proves the tunnel worked).",
+    "adv.testSshNeedFields": "Fill in the SSH host and user first (and pick an auth method), then test the tunnel.",
+    "btn.saveOpts": "Save options",
     "btn.save": "Save",
     "btn.add": "Add connection",
     "btn.addConn": "＋ Add connection",
@@ -157,6 +348,7 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     "btn.enable": "Enable",
     "btn.test": "Test",
     "test.testing": "testing…",
+    "test.elapsed": "testing… {s}s",
     "test.timeout": "no test result (timed out)",
     "saved.ok": "Saved ✓",
     "badge.saved": "saved",
@@ -177,6 +369,7 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     "src.user": "saved · user",
     "src.collected": "saved · scan",
     "src.copied": "saved · copied",
+    "src.promoted": "saved · promoted",
     "src.mise": "auto · mise env",
     "src.env": "auto · .env",
     "pretest.title": "Validate & Save Connection",
@@ -234,6 +427,9 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     "persisted(user)": "src.user",
     "persisted(collected)": "src.collected",
     "persisted(copied)": "src.copied",
+    // An auto-discovered row that the user (or the model) explicitly gave an
+    // option to is persisted with this provenance (D10).
+    "persisted(promoted)": "src.promoted",
     "工作区 mise env": "src.mise",
     "工作目录 .env": "src.env",
   };
@@ -268,6 +464,16 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
 
   var STYLE_ID = "dsh-dbhub-live-style";
 
+  // Client-side watchdogs for a connection probe. The Host answers every probe
+  // (success, failure, or its own timeout), so these only cover "the report
+  // never arrived". The tunnelled tier is longer because SSH setup is slow; the
+  // HOST budget (adhoc.mjs PROBE_TIMEOUT_MS / PROBE_TIMEOUT_SSH_MS) stays
+  // strictly below its client counterpart — asserted in test/adhoc-toml.test.mjs.
+  var PRETEST_WATCHDOG_MS = 30000;
+  var PRETEST_WATCHDOG_SSH_MS = 60000;
+  var TEST_WATCHDOG_MS = 30000;
+  var TEST_WATCHDOG_SSH_MS = 60000;
+
   var CSS_TEXT = [
     ".dbh-wrap{box-sizing:border-box;height:100%;width:100%;overflow:auto;padding:22px clamp(14px,3vw,32px) 44px;color:var(--dsw-alias-label-primary);font-family:inherit;}",
     // Content column: capped at 960px, which also caps the tile grid at 3 columns.
@@ -294,8 +500,8 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     ".dbh-iconbtn:disabled{cursor:default;}",
     ".dbh-iconbtn-busy{opacity:.5;}",
     ".dbh-iconbtn-danger:hover:not(:disabled){color:var(--dsw-alias-state-error-primary);background:var(--dsw-alias-interactive-bg-hover-danger);}",
-    ".dbh-sect{display:flex;align-items:center;gap:8px;padding:8px 0 2px;flex-wrap:wrap;}",
-    ".dbh-secttitle{font-size:12px;font-weight:600;color:var(--dsw-alias-label-secondary);letter-spacing:.02em;}",
+    ".dbh-sect{display:flex;align-items:center;gap:8px;padding:14px 0 2px;flex-wrap:wrap;}",
+    ".dbh-secttitle{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary);letter-spacing:.01em;}",
     ".dbh-sectcount{font-size:11px;color:var(--dsw-alias-label-tertiary);}",
     ".dbh-grow{flex:1;min-width:0;}",
     // Level 1: one bordered card per workspace. Transparent surface + hairline
@@ -325,6 +531,7 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     ".dbh-conn-pre{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-tertiary);}",
     ".dbh-conn-db{flex:none;color:var(--dsw-alias-label-primary);font-weight:600;}",
     ".dbh-acts{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto;}",
+    ".dbh-svgicon{display:block;flex:none;pointer-events:none;}",
     // The source handle: dashed outline + copy glyph says "id, click to copy".
     ".dbh-src{display:inline-flex;align-items:center;gap:4px;flex:none;height:22px;padding:0 6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--dsw-alias-label-secondary);background:transparent;border:1px dashed var(--dsw-alias-border-l2,rgba(127,127,127,.45));border-radius:6px;cursor:pointer;transition:background .14s,border-color .14s,color .14s;}",
     ".dbh-src:hover{background:var(--dsw-alias-interactive-bg-hover);border-style:solid;color:var(--dsw-alias-label-primary);}",
@@ -332,6 +539,24 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     ".dbh-src-ok{color:var(--dsw-alias-state-success-primary);border-color:var(--dsw-alias-state-success-tertiary);border-style:solid;}",
     ".dbh-srcid{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
     ".dbh-editrow{display:flex;align-items:center;gap:6px;padding:4px 0 6px;flex-wrap:wrap;}",
+    // Editor block: the input row plus its advanced (SSH) section, so the row
+    // still contributes exactly ONE sibling to the environment wrapper.
+    ".dbh-editbox{display:flex;flex-direction:column;gap:6px;padding:4px 0 6px;}",
+    // Read-only marker inside the environment chip: an attribute that differs
+    // per row and CHANGES the semantics of every query, so it must be visible
+    // at a glance (the origin/source is the opposite case and stays a tooltip).
+    ".dbh-ro{flex:none;margin-left:4px;font-size:10px;font-weight:500;color:var(--dsw-alias-state-warn-primary);}",
+    // Checkboxes are styled by the platform's own input rendering; only the
+    // accent colour is themed, and the neutral fallback is a translucent grey.
+    ".dbh-checkbox{flex:none;accent-color:var(--dsw-alias-brand-primary,rgba(127,127,127,.8));}",
+    ".dbh-adv{display:flex;flex-direction:column;gap:6px;}",
+    ".dbh-advtoggle{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;font-size:12px;font-family:inherit;line-height:1;border:1px dashed var(--dsw-alias-border-l2,rgba(127,127,127,.45));border-radius:6px;background:transparent;color:var(--dsw-alias-label-secondary);cursor:pointer;}",
+    ".dbh-advtoggle:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);}",
+    ".dbh-advtoggle:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px;}",
+    ".dbh-advbody{display:flex;flex-direction:column;gap:6px;margin-left:6px;padding-left:10px;border-left:2px solid var(--dsw-alias-border-l1,rgba(127,127,127,.3));}",
+    ".dbh-advrow{display:flex;align-items:center;gap:8px;}",
+    ".dbh-advlabel{flex:0 0 92px;font-size:12px;color:var(--dsw-alias-label-secondary);}",
+    ".dbh-advrow .dbh-input{flex:1;}",
     ".dbh-input{box-sizing:border-box;height:28px;min-width:0;padding:0 8px;font-size:12px;font-family:inherit;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-3,transparent);border:1px solid var(--dsw-alias-border-l2,rgba(127,127,127,.45));border-radius:6px;}",
     ".dbh-input:focus{outline:none;border-color:var(--dsw-alias-brand-primary);}",
     ".dbh-envinput{flex:0 0 130px;}",
@@ -357,8 +582,8 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     ".dbh-hint{font-size:11px;color:var(--dsw-alias-label-tertiary);line-height:1.5;}",
     ".dbh-empty{font-size:12px;color:var(--dsw-alias-label-tertiary);padding:8px 0;}",
     ".dbh-saved{font-size:12px;color:var(--dsw-alias-state-success-primary);}",
-    ".dbh-test-ok{font-size:12px;color:var(--dsw-alias-state-success-primary);word-break:break-all;}",
-    ".dbh-test-fail{font-size:12px;color:var(--dsw-alias-state-error-primary);word-break:break-all;}",
+    ".dbh-test-ok{font-size:12px;color:var(--dsw-alias-state-success-primary);word-break:break-word;white-space:pre-wrap;}",
+    ".dbh-test-fail{font-size:12px;color:var(--dsw-alias-state-error-primary);word-break:break-word;white-space:pre-wrap;}",
     ".dbh-pretest{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--dsw-alias-state-error-primary);border-radius:8px;background:var(--dsw-alias-bg-layer-2,transparent);}",
     ".dbh-pretest-title{font-weight:600;font-size:13px;color:var(--dsw-alias-state-error-primary);}",
     // Overwrite confirmation: a warning, not an error — the write is still the
@@ -366,6 +591,115 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     ".dbh-warncard{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--dsw-alias-state-warn-primary,rgba(127,127,127,.6));border-radius:8px;background:var(--dsw-alias-bg-layer-2,transparent);}",
     ".dbh-warncard-title{font-weight:600;font-size:13px;color:var(--dsw-alias-state-warn-primary);}",
     ".dbh-summary{font-size:12px;color:var(--dsw-alias-label-secondary);}",
+    // ── modern surfaces (dsh >= 0.2.1) ──────────────────────────────────────
+    // One component, three surfaces: the settings dialog (narrow, unchanged from
+    // the 0.1.x layout), the wide page reached from the left menu / the Plugins
+    // row, and a phone browser. The page classes come from the MEASURED
+    // container width, so a docked desktop window degrades like a phone does.
+    ".dbh-titlebar{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:2px 0 2px;}",
+    ".dbh-title{margin:0;font-size:18px;font-weight:600;line-height:1.25;color:var(--dsw-alias-label-primary);}",
+    ".dbh-ver{flex:none;font-size:12px;color:var(--dsw-alias-label-tertiary);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}",
+    // Update affordance: a quiet text link (brand colour only) that expands into a
+    // neutral panel on demand — never a red/error-styled banner.
+    ".dbh-updatelink{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 4px;font-size:12px;font-family:inherit;line-height:1;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--dsw-alias-brand-text);cursor:pointer;}",
+    ".dbh-updatelink:hover{text-decoration:underline;}",
+    ".dbh-updatelink:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px;}",
+    ".dbh-vercheck{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;font-size:11px;font-family:inherit;line-height:1;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--dsw-alias-label-tertiary);cursor:pointer;}",
+    ".dbh-vercheck:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);}",
+    ".dbh-vercheck:disabled{cursor:default;opacity:.7;}",
+    ".dbh-vercheck:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px;}",
+    // One status line: running/disabled + how many connections. Tool count and the
+    // one-shot execution mode are implementation facts and live in the notes.
+    ".dbh-statusline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary);padding:0 0 6px;}",
+    ".dbh-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--dsw-alias-state-success-primary);}",
+    ".dbh-dot-off{background:var(--dsw-alias-state-idle-primary);}",
+    ".dbh-statussep{color:var(--dsw-alias-label-tertiary);}",
+    ".dbh-linkbtn{display:inline-flex;align-items:center;gap:3px;padding:0 4px;height:20px;border:1px solid transparent;border-radius:6px;background:transparent;font-family:inherit;font-size:12px;line-height:1;color:var(--dsw-alias-label-secondary);cursor:pointer;white-space:nowrap;}",
+    ".dbh-linkbtn:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);}",
+    ".dbh-linkbtn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px;}",
+    ".dbh-updatepanel{display:flex;flex-direction:column;gap:6px;margin:0 0 8px;padding:10px 12px;border:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,.3));border-radius:8px;background:var(--dsw-alias-bg-layer-2,transparent);}",
+    ".dbh-updaterow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}",
+    ".dbh-spec{flex:1 1 auto;min-width:0;padding:3px 8px;border-radius:6px;background:var(--dsw-alias-bg-layer-3,transparent);border:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,.3));font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--dsw-alias-label-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
+    ".dbh-link{font-size:11px;color:var(--dsw-alias-brand-text);text-decoration:none;align-self:flex-start;}",
+    ".dbh-link:hover{text-decoration:underline;}",
+    // Settings: the harness's own row pattern — title left, control right, thin
+    // separators, no card/grid, no coloured chrome of our own.
+    ".dbh-inner.dbh-wide{max-width:1320px;gap:12px;}",
+    ".dbh-wide .dbh-tiles{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}",
+    ".dbh-settings{display:flex;flex-direction:column;}",
+    ".dbh-settings-title{font-size:11px;font-weight:600;color:var(--dsw-alias-label-tertiary);letter-spacing:.02em;padding:2px 0 2px;}",
+    // Wide page: all four controls on one quiet line — the labels stay attached
+    // to their switches instead of a label at the far left and a control at the
+    // far right with half a screen of empty middle.
+    ".dbh-settingsbar{padding:0 0 2px;}",
+    ".dbh-barline{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;padding:2px 0 4px;}",
+    ".dbh-bartitle{font-size:11px;font-weight:600;color:var(--dsw-alias-label-tertiary);letter-spacing:.02em;margin-right:2px;}",
+    ".dbh-bargroup{display:inline-flex;align-items:center;gap:6px;flex:none;}",
+    ".dbh-barlabel{font-size:12px;color:var(--dsw-alias-label-secondary);}",
+    ".dbh-barstate{font-size:12px;color:var(--dsw-alias-label-tertiary);}",
+    ".dbh-settingsbar [role=\"switch\"]{transform:scale(.85);}",
+    // Narrow desktop column: drop the section title and the state words, tighten
+    // the gaps, so the four controls still flow on one/two lines instead of
+    // collapsing into a vertical list.
+    ".dbh-barnarrow .dbh-barline{gap:6px 12px;}",
+    ".dbh-barnarrow .dbh-bartitle{display:none;}",
+    ".dbh-barnarrow .dbh-barstate{display:none;}",
+    ".dbh-barnarrow .dbh-barlabel{font-size:11px;}",
+    ".dbh-barnarrow .dbh-srow-input{width:50px;}",
+    // Narrow surfaces: the same controls as compact rows (weak by design — the
+    // connection list below is the main content).
+    ".dbh-srow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:0.5px solid var(--dsw-alias-border-l2,rgba(127,127,127,.3));}",
+    ".dbh-srow:last-child{border-bottom:none;}",
+    ".dbh-srow-main{min-width:0;}",
+    ".dbh-srow-title{font-size:13px;line-height:18px;color:var(--dsw-alias-label-secondary);}",
+    ".dbh-srow-ctl{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:nowrap;}",
+    ".dbh-srow-state{font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary);min-width:2.4em;text-align:right;white-space:nowrap;}",
+    ".dbh-srow-input{width:58px;height:26px;flex:none;text-align:center;}",
+    ".dbh-srow-unit{font-size:12px;color:var(--dsw-alias-label-secondary);}",
+    ".dbh-btn-sm{height:26px;padding:0 10px;font-size:12px;}",
+    ".dbh-settings-foot{display:flex;align-items:center;gap:8px;padding:6px 0 2px;}",
+    ".dbh-notes{display:flex;flex-direction:column;gap:4px;margin:2px 0 4px;padding:10px 12px;border-radius:8px;background:var(--dsw-alias-bg-layer-2,transparent);font-size:12px;line-height:1.55;color:var(--dsw-alias-label-secondary);}",
+    // Read-only toggle: a quiet chip on the connection row, in EVERY layout, so it
+    // can be flipped while reading the list instead of opening the edit form.
+    ".dbh-rochip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;flex:none;border-radius:999px;border:1px dashed var(--dsw-alias-border-l2,rgba(127,127,127,.45));background:transparent;color:var(--dsw-alias-label-tertiary);font-size:11px;font-family:inherit;line-height:1;cursor:pointer;transition:background .12s,border-color .12s,color .12s;}",
+    ".dbh-rochip:hover:not(:disabled){border-color:var(--dsw-alias-border-l3,rgba(127,127,127,.6));color:var(--dsw-alias-label-secondary);}",
+    ".dbh-rochip-on{border-style:solid;border-color:var(--dsw-alias-border-l3,rgba(127,127,127,.6));background:var(--dsw-alias-bg-layer-3,rgba(127,127,127,.16));color:var(--dsw-alias-label-primary);}",
+    ".dbh-rochip:disabled{opacity:.55;cursor:default;}",
+    ".dbh-rochip:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px;}",
+    ".dbh-roemoji{font-size:13px;line-height:1;}",
+    // Fallback switch only when the baseline predates the Switch primitive: same
+    // 36x20 geometry and token colours as the platform control.
+    ".dbh-fbswitch{position:relative;flex:none;width:36px;height:20px;padding:2px;border:0;border-radius:999px;background:var(--dsw-alias-border-l3,rgba(127,127,127,.45));cursor:pointer;transition:background .12s;}",
+    ".dbh-fbswitch-on{background:var(--dsw-alias-brand-primary);}",
+    ".dbh-fbswitch:disabled{opacity:.5;cursor:default;}",
+    ".dbh-fbswitch:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px;}",
+    ".dbh-fbswitch-thumb{display:block;width:16px;height:16px;border-radius:50%;background:var(--dsw-alias-label-primary-foreground);transition:transform .12s ease;}",
+    ".dbh-fbswitch-on .dbh-fbswitch-thumb{transform:translateX(16px);}",
+    // Phone browser: one column, touch-sized controls, actions on their own row.
+    ".dbh-inner.dbh-mobile{font-size:13px;gap:8px;}",
+    ".dbh-mobile .dbh-titlebar{gap:6px;}",
+    ".dbh-mobile .dbh-title{font-size:16px;}",
+    ".dbh-mobile .dbh-statusline{font-size:12px;}",
+    ".dbh-mobile .dbh-updatepanel{padding:8px 10px;}",
+    ".dbh-mobile .dbh-envrow{gap:6px;}",
+    ".dbh-mobile .dbh-envname{max-width:120px;}",
+    ".dbh-mobile .dbh-conn{flex:1 1 100%;order:1;min-width:0;}",
+    ".dbh-mobile .dbh-rochip{height:24px;padding:0 8px;order:2;}",
+    ".dbh-mobile .dbh-roemoji{font-size:14px;}",
+    ".dbh-mobile .dbh-acts{order:3;width:100%;margin-left:0;justify-content:flex-end;gap:6px;padding:2px 0 0;}",
+    ".dbh-mobile .dbh-iconbtn{width:32px;height:32px;}",
+    ".dbh-mobile .dbh-btn{height:30px;padding:0 12px;}",
+    ".dbh-mobile .dbh-tiles{grid-template-columns:1fr;}",
+    ".dbh-mobile .dbh-srow{gap:8px;padding:6px 0;}",
+    ".dbh-mobile .dbh-srow-title{font-size:12px;}",
+    ".dbh-mobile .dbh-srow-state{font-size:11px;min-width:2.2em;}",
+    ".dbh-mobile .dbh-srow [role=\"switch\"]{transform:scale(.8);}",
+    ".dbh-mobile .dbh-btn-sm{height:24px;padding:0 8px;font-size:11px;}",
+    ".dbh-mobile .dbh-groupbody{margin:0 4px 6px 8px;padding-left:8px;}",
+    ".dbh-mobile .dbh-editrow .dbh-envinput{flex:1 1 100%;}",
+    ".dbh-mobile .dbh-editrow .dbh-input{flex:1 1 100%;}",
+    ".dbh-mobile .dbh-srcid{max-width:72px;}",
+    ".dbh-mobile .dbh-updatehead{align-items:flex-start;}",
   ].join("");
 
   function ensureStyle() {
@@ -398,10 +732,24 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
   // The settings section's page (also the sidebar panel's body): the same
   // management page the Plugins page renders in its 'page' view, wrapped in its
   // own scroll container. The Plugins-row mount keeps the shell's container.
+  // `surface` names the MOUNT, not the width: the settings dialog is a 760px
+  // modal, the left-menu entry and the Plugins row are full pages, and the
+  // card itself still measures its column before choosing a layout.
   function ConfigPanel(props) {
     ensureStyle();
+    var surface = props && typeof props.surface === "string" ? props.surface : "modal";
     return h("div", { className: "dbh-wrap" },
-      h(StatusCard, Object.assign({}, props, { view: "page" })));
+      h(StatusCard, Object.assign({}, props, { view: "page", surface: surface })));
+  }
+
+  /** Settings -> DBHub dialog (narrow, unchanged density). */
+  function SettingsSectionPanel(props) {
+    return h(ConfigPanel, Object.assign({}, props, { surface: "modal" }));
+  }
+
+  /** Left-menu DBHub panel: a full page with most of the viewport available. */
+  function MainPanel(props) {
+    return h(ConfigPanel, Object.assign({}, props, { surface: "main" }));
   }
 
   // ── pure layout helpers ───────────────────────────────────────────────────
@@ -568,7 +916,201 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
   // same page session (switching settings sections, opening the sidebar panel)
   // and reset on reload. Deliberately not persisted anywhere: it is view state,
   // not configuration.
-  var uiMemory = { expanded: {}, addOpen: false, addTarget: "", settingsOpen: false };
+  var uiMemory = { expanded: {}, addOpen: false, addTarget: "", settingsOpen: false, advOpen: false };
+
+  /**
+   * Upstream dbhub capabilities, published by the Host as a JSON string.
+   * `''` (the probe has not finished) means "assume supported": the controls stay
+   * usable and a genuine incompatibility surfaces as a dbhub error, whereas
+   * disabling them on a guess would block a working setup.
+   */
+  function capsOf(value) {
+    var raw = value && typeof value.capabilities === "string" ? value.capabilities : "";
+    if (!raw) return { version: "", readonlyTools: true, ssh: true, warning: "" };
+    try {
+      var parsed = JSON.parse(raw);
+      if (!parsed || typeof parsed !== "object") return { version: "", readonlyTools: true, ssh: true, warning: "" };
+      return {
+        version: typeof parsed.version === "string" ? parsed.version : "",
+        readonlyTools: parsed.readonlyTools !== false,
+        ssh: parsed.ssh !== false,
+        warning: typeof parsed.warning === "string" ? parsed.warning : "",
+      };
+    } catch (e) {
+      return { version: "", readonlyTools: true, ssh: true, warning: "" };
+    }
+  }
+
+  /** Localized one-line explanation of a capability warning ('' when fine). */
+  function capabilityHint(caps, t) {
+    if (!caps || !caps.warning) return "";
+    if (caps.warning === "tooOld") return t("cap.tooOld", { v: caps.version || "?" });
+    if (caps.warning === "untested") return t("cap.untested", { v: caps.version || "?" });
+    return "";
+  }
+
+  /**
+   * Build the option half of a write payload from one form draft.
+   *
+   * Secrets follow the "blank = keep the stored value" rule: an empty password /
+   * passphrase / key path is simply OMITTED, and the Host merges it with what is
+   * already stored (a user must never have to re-type a password to flip the
+   * read-only checkbox). `sshOn === false` is the explicit "no tunnel" signal and
+   * must survive as a defined `null` — otherwise it would read as "unchanged".
+   *
+   * @returns `{ readOnly, ssh? , sshOff? }` (spread into a configOp payload).
+   */
+  function connDraftOf(form) {
+    var f = form || {};
+    var out = { readOnly: f.ro === true };
+    var host = String(f.sshHost || "").trim();
+    var user = String(f.sshUser || "").trim();
+    var keyPath = String(f.sshKeyPath || "").trim();
+    var password = String(f.sshPassword || "");
+    var passphrase = String(f.sshPassphrase || "");
+    var requested = !!host || !!user || !!keyPath || !!password || f.sshOn === true;
+    if (f.sshOn !== true) {
+      if (requested === false) return out;
+      out.ssh = null;
+      return out;
+    }
+    var auth = f.sshAuthKind === "password" ? "password" : "key";
+    var ssh = {
+      host: host,
+      port: String(f.sshPort || "").trim(),
+      user: user,
+      auth: auth,
+      proxyJump: String(f.sshProxyJump || "").trim(),
+    };
+    if (auth === "password") {
+      if (password) ssh.password = password;
+    } else {
+      if (keyPath) ssh.keyPath = keyPath;
+      if (passphrase) ssh.passphrase = passphrase;
+    }
+    out.ssh = ssh;
+    return out;
+  }
+
+  /** The option draft behind a write form: forms built for a write carry the
+   *  originating form under `_draft`, editing forms ARE the draft. */
+  function draftOf(form) {
+    return form && form._draft ? form._draft : form;
+  }
+
+  /** Spread `connDraftOf` into one configOp payload. */
+  function withConnDraft(op, form) {
+    var d = connDraftOf(draftOf(form));
+    op.readOnly = d.readOnly === true;
+    if (d.ssh === null) op.ssh = null;
+    else if (d.ssh) op.ssh = d.ssh;
+    return op;
+  }
+
+  /** Empty draft fields for the advanced (SSH) section. */
+  function sshDraftOf(row) {
+    var ssh = row && row.ssh && typeof row.ssh === "object" ? row.ssh : null;
+    return {
+      sshOn: !!ssh,
+      sshHost: ssh ? String(ssh.host || "") : "",
+      sshPort: ssh && ssh.port ? String(ssh.port) : "",
+      sshUser: ssh ? String(ssh.user || "") : "",
+      sshAuthKind: ssh && ssh.authKind === "password" ? "password" : "key",
+      sshKeyPath: "",
+      sshPassword: "",
+      sshPassphrase: "",
+      sshProxyJump: ssh ? String(ssh.proxyJump || "") : "",
+    };
+  }
+
+  /**
+   * Parse the Host's transient update snapshot (a JSON string). Always returns
+   * the full shape so render code never has to guard field by field.
+   * @returns `{ latest, latestSpec, hasUpdate, checkedAt, source, error }`
+   */
+  function parseUpdate(value) {
+    var out = { latest: "", latestSpec: "", hasUpdate: false, checkedAt: 0, source: "", error: "" };
+    var raw = value && typeof value.update === "string" ? value.update : "";
+    if (!raw) return out;
+    try {
+      var parsed = JSON.parse(raw);
+      if (!parsed || typeof parsed !== "object") return out;
+      out.latest = typeof parsed.latest === "string" ? parsed.latest.trim() : "";
+      out.latestSpec = typeof parsed.latestSpec === "string" && parsed.latestSpec
+        ? parsed.latestSpec
+        : (out.latest ? "dsh-dbhub-live@" + out.latest : "");
+      out.hasUpdate = parsed.hasUpdate === true && !!out.latest;
+      out.checkedAt = typeof parsed.checkedAt === "number" && parsed.checkedAt > 0 ? parsed.checkedAt : 0;
+      out.source = typeof parsed.source === "string" ? parsed.source : "";
+      out.error = typeof parsed.error === "string" ? parsed.error : "";
+    } catch (e) {
+      /* a malformed snapshot is simply "no update information" */
+    }
+    return out;
+  }
+
+  /**
+   * Measured width of the page's own content column. The same component serves
+   * a 500px settings dialog, a full page and a phone browser, so the layout is
+   * decided by how much room it actually has. ResizeObserver is absent in older
+   * browsers and in the offscreen render gate; then the caller falls back to
+   * `window.innerWidth` (or to the mount surface's default).
+   */
+  function useMeasuredWidth(ref) {
+    var state = react.useState(0);
+    var setWidth = state[1];
+    react.useEffect(function () {
+      var el = ref && ref.current;
+      if (typeof ResizeObserver !== "function" || !el) return undefined;
+      var observer = new ResizeObserver(function (entries) {
+        var entry = entries && entries[0];
+        var w = entry && entry.contentRect ? entry.contentRect.width : 0;
+        if (w > 0) setWidth(Math.round(w));
+      });
+      try {
+        observer.observe(el);
+      } catch (e) {
+        return undefined;
+      }
+      return function () {
+        try { observer.disconnect(); } catch (e) { /* disposal must never throw */ }
+      };
+    }, []);
+    return state[0];
+  }
+
+  /**
+   * The 显示/隐藏 style switch used by the modern surfaces. A native checkbox
+   * stays in the DOM (keyboard + screen-reader semantics, and the offscreen gate
+   * can drive it); the track/knob are decoration.
+   */
+  function switchControl(opts) {
+    var o = opts || {};
+    var label = o.ariaLabel || o.label || "";
+    if (SwitchPrimitive) {
+      return h(SwitchPrimitive, {
+        checked: o.checked === true,
+        onChange: function (next) { if (typeof o.onChange === "function") o.onChange(next); },
+        label: label,
+        disabled: o.disabled === true,
+        title: o.title || "",
+        className: o.className,
+        key: o.key,
+      });
+    }
+    // Fallback with the same 36x20 geometry and token colours as the primitive.
+    return h("button", {
+      type: "button",
+      role: "switch",
+      "aria-checked": o.checked === true,
+      "aria-label": label,
+      title: o.title || "",
+      disabled: o.disabled === true,
+      className: "dbh-fbswitch" + (o.checked === true ? " dbh-fbswitch-on" : "") + (o.className ? " " + o.className : ""),
+      key: o.key,
+      onClick: function () { if (typeof o.onChange === "function") o.onChange(o.checked !== true); },
+    }, h("span", { className: "dbh-fbswitch-thumb" }));
+  }
 
   // ── the page ──────────────────────────────────────────────────────────────
 
@@ -597,6 +1139,10 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     var lastError = typeof value.lastError === "string" && value.lastError ? value.lastError : "";
     var modeLabel = t("mode." + (value.mode || "oneshot"));
     var workspaces = workspacesOf(value);
+    var caps = capsOf(value);
+    var capHint = capabilityHint(caps, t);
+    var roSupported = caps.readonlyTools !== false;
+    var sshSupported = caps.ssh !== false;
     var savedCount = workspaces.filter(function (w) { return w.persisted; }).length;
     var groups = groupRows(workspaces);
     var layout = layoutModeOf(groups);
@@ -609,6 +1155,79 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
         meta.emoji + " " + t(meta.key) + " · " + t("tools.fixed", { n: String(toolCount) }) + " · " + summary);
     }
 
+    // ── modern surfaces (dsh >= 0.2.1) ───────────────────────────────────────
+    //
+    // The Host decides `dshModern` from the RUNNING dsh version (lib/meta.mjs):
+    // on 0.1.x every flag below stays false and the page renders exactly the old
+    // DOM, which the offscreen gate's legacy assertions pin.
+    var modern = value.dshModern === true;
+    var surface = props.surface === "main" || props.surface === "modal" || props.surface === "page"
+      ? props.surface
+      : "page";
+    var pluginVersion = typeof value.pluginVersion === "string" ? String(value.pluginVersion).trim() : "";
+    var dshVersion = typeof value.dshVersion === "string" ? String(value.dshVersion).trim() : "";
+    var runtime = value.runtime === "desktop" ? "desktop" : value.runtime === "web" ? "web" : "";
+    var update = parseUpdate(value);
+    var innerRef = react.useRef(null);
+    var measuredWidth = useMeasuredWidth(innerRef);
+    var viewportWidth = 0;
+    try {
+      if (typeof window !== "undefined" && window && typeof window.innerWidth === "number") viewportWidth = window.innerWidth;
+    } catch (e) { /* an embedded webview may restrict access */ }
+    var contentWidth = measuredWidth > 0 ? measuredWidth : viewportWidth;
+    // Phone browser = the VIEWPORT is small. A narrow settings dialog on a
+    // desktop is not a phone: its column is small but the window is not.
+    var isMobile = modern && (viewportWidth > 0 ? viewportWidth < 700 : (contentWidth > 0 && contentWidth < 600));
+    var isWide = modern && !isMobile && surface !== "modal" && (contentWidth === 0 || contentWidth >= 720);
+    var checkingState = react.useState(false);
+    var checking = checkingState[0];
+    var setChecking = checkingState[1];
+    // The update explanation is progressive disclosure: the header only shows the
+    // quiet "可升级到 x" link, and this state opens the neutral detail panel.
+    var updateOpenState = react.useState(false);
+    var updateOpen = updateOpenState[0];
+    var setUpdateOpen = updateOpenState[1];
+    // Implementation details (tool count, one-shot mode, policy text, versions)
+    // start collapsed: the settings page is for acting, not reading.
+    var notesState = react.useState(false);
+    var notesOpen = notesState[0];
+    var setNotesOpen = notesState[1];
+    var checkBaseline = react.useRef(0);
+    var checkTimer = react.useRef(null);
+    var runUpdateCheck = function (force) {
+      setChecking(true);
+      checkBaseline.current = update.checkedAt;
+      if (checkTimer.current) clearTimeout(checkTimer.current);
+      checkTimer.current = setTimeout(function () {
+        checkTimer.current = null;
+        setChecking(false);
+      }, 20000);
+      try {
+        if (typeof props.configOp === "function") props.configOp({ op: "updateCheck", force: force === true });
+      } catch (e) {
+        setChecking(false);
+      }
+    };
+    // Opening the page asks the Host for a (throttled) update check; the Host
+    // owns the network call and the cache, so a refresh here costs nothing.
+    react.useEffect(function () {
+      if (!modern) return undefined;
+      try {
+        if (typeof props.configOp === "function") props.configOp({ op: "updateCheck", force: false });
+      } catch (e) { /* an offline host is not a page failure */ }
+      return undefined;
+    }, [modern]);
+    react.useEffect(function () {
+      if (!checking) return;
+      if (update.checkedAt > 0 && update.checkedAt !== checkBaseline.current) {
+        if (checkTimer.current) {
+          clearTimeout(checkTimer.current);
+          checkTimer.current = null;
+        }
+        setChecking(false);
+      }
+    }, [value.update, checking]);
+
     // ── view state (page only) ───────────────────────────────────────────────
     //
     // `useWorkspaces` is a standard prop of root-scoped slots: it tells us which
@@ -669,11 +1288,16 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
       setAddTarget(nextTarget);
     };
 
-    // ── config draft (interval is a draft; the sidebar switch applies at once) ──
+    // ── config draft (interval + the sidebar switch + the policy switch) ──────
     var draftState = react.useState(function () {
       return {
         updateIntervalDays: typeof value.updateIntervalDays === "number" ? String(value.updateIntervalDays) : "7",
+        // The user's own "hide the shortcut" preference. Independent of the
+        // plugin's enabled state: hiding the entry does NOT disable anything.
         showSidebarEntry: value.showSidebarEntry !== false,
+        // The user's own "let the plugin announce its access policy" preference.
+        // Independent of everything else: off removes one prompt section only.
+        announceAccessPolicy: value.announceAccessPolicy !== false,
       };
     });
     var draft = draftState[0];
@@ -686,15 +1310,24 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
       props.saveConfig({
         updateIntervalDays: Number(draft.updateIntervalDays),
         showSidebarEntry: draft.showSidebarEntry !== false,
+        announceAccessPolicy: draft.announceAccessPolicy !== false,
       }).then(function () { setSaved(true); });
     };
 
+    // The switch applies immediately (no Save round-trip), like it always has.
     var toggleSidebar = function (next) {
       setDraft(Object.assign({}, draft, { showSidebarEntry: next }));
       setSaved(false);
       props.saveConfig({ showSidebarEntry: next });
     };
 
+    // Same immediate-apply contract for the policy announcement.
+    var togglePolicy = function (next) {
+      setDraft(Object.assign({}, draft, { announceAccessPolicy: next }));
+      setSaved(false);
+      props.saveConfig({ announceAccessPolicy: next });
+    };
+
     // ── pre-test + confirm dialog for add/edit ────────────────────────────────
     //
     // Both the add form and the edit form gate saves behind a live connection
@@ -715,25 +1348,50 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     var pretestRef = react.useRef(null);
     pretestRef.current = pretest;
 
-    var addState = react.useState({ ws: "", env: "default", dsn: "" });
+    var addState = react.useState(Object.assign({ ws: "", env: "default", dsn: "", ro: false, adv: false }, sshDraftOf(null)));
     var addForm = addState[0];
     var setAddForm = addState[1];
     var addDsn = function () {
       if (!addForm.dsn.trim()) return;
-      requestWrite({
+      // The read-only switch and the tunnel ride the SAME write as the DSN, so
+      // one click produces one atomic store write (and one op for the legacy
+      // single-field command channel). `_draft` keeps the originating form
+      // reachable for the pre-test payload and the final save.
+      requestWrite(withConnDraft({
         ws: addTarget || addForm.ws.trim(),
         env: addForm.env.trim() || "default",
         dsn: addForm.dsn.trim(),
-      }, true);
+        _draft: addForm,
+      }, addForm), true);
     };
 
     var editState = react.useState(null);
     var editing = editState[0];
     var setEditing = editState[1];
-    // An edit can change the DSN, the environment NAME, or both. A name-only
-    // change is a rename (no connection data to verify); a DSN change keeps the
-    // pre-test gate and carries the rename along in the SAME host op — two
-    // configOp writes would race on the single `configOp` namespace field.
+    var updateEditing = function (patch) {
+      setEditing(function (prev) { return prev ? Object.assign({}, prev, patch) : prev; });
+    };
+    // Does the draft differ from the row's mirrored OPTIONS? Secrets are not
+    // comparable (a blank input means "keep"), so only the non-secret fields and
+    // the read-only flag take part.
+    var optionsDiffer = function (row, form) {
+      var d = connDraftOf(form);
+      if ((row.ro === true) !== (d.readOnly === true)) return true;
+      var had = row.ssh || null;
+      var want = d.ssh === undefined ? had : d.ssh;
+      if (!had && !want) return false;
+      if (!had || !want) return true;
+      return String(had.host || "") !== String(want.host || "")
+        || String(had.port || "") !== String(want.port || "")
+        || String(had.user || "") !== String(want.user || "")
+        || String(had.authKind || "") !== String(want.auth || "")
+        || String(had.proxyJump || "") !== String(want.proxyJump || "");
+    };
+    // An edit can change the DSN, the environment NAME, the options, or any
+    // combination. A name-only change is a rename (no connection data to verify);
+    // a DSN change keeps the pre-test gate and carries the rename along in the
+    // SAME host op — two configOp writes would race on the single `configOp`
+    // namespace field.
     var saveEdit = function (row) {
       if (!editing) return;
       var newEnv = String(editing.env || "").trim() || "default";
@@ -742,12 +1400,29 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
       // "prod " or an over-long name is not a rename onto a different env.
       var renaming = normalizeEnvForCompare(newEnv) !== normalizeEnvForCompare(row.env);
       if (!dsn) {
-        if (renaming) requestWrite({ ws: row.path, env: newEnv, dsn: "", _editRow: row }, true);
+        var optionsChanged = optionsDiffer(row, editing);
+        if (!renaming && !optionsChanged) { setEditing(null); return; } // nothing changed
+        if (!optionsChanged) {
+          // Pure rename: nothing to probe, but landing on an existing
+          // environment still replaces that connection, so it goes through the
+          // same overwrite gate as a connection write.
+          requestWrite({ op: "rename", _opKind: "rename", ws: row.path, env: newEnv, dsn: "", _editRow: row, _renameFrom: row.env }, true);
+          return;
+        }
+        if (!renaming) {
+          // Options-only write on a row that keeps its name: no DSN to verify
+          // and no name that could collide.
+          props.configOp(withConnDraft({ op: "options", workspace: row.path, env: row.env }, editing));
+          setEditing(null);
+          return;
+        }
+        // Renamed AND re-optioned: one atomic `options` command carrying newEnv.
+        requestWrite(withConnDraft({ op: "options", _opKind: "options", ws: row.path, env: newEnv, dsn: "", _editRow: row, _renameFrom: row.env }, editing), true);
         return;
       }
       // Editing the connection of the SAME environment is not an overwrite
       // question (it is the point of the edit); renaming onto another one is.
-      requestWrite({ ws: row.path, env: newEnv, dsn: dsn, _editRow: row, _renameFrom: renaming ? row.env : "" }, renaming);
+      requestWrite(withConnDraft({ ws: row.path, env: newEnv, dsn: dsn, _editRow: row, _renameFrom: renaming ? row.env : "" }, editing), renaming);
     };
 
     // ── overwrite gate ───────────────────────────────────────────────────────
@@ -762,8 +1437,15 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
 
     var executeWrite = function (form) {
       if (form._editRow && !String(form.dsn || "").trim()) {
-        // a name-only rename carries no connection data to probe
-        props.configOp({ op: "rename", workspace: form.ws, env: form._editRow.env, newEnv: form.env });
+        // a name/option-only change carries no connection data to probe
+        var op;
+        if (form._opKind === "rename") {
+          op = { op: "rename", workspace: form.ws, env: form._editRow.env, newEnv: form.env };
+        } else {
+          op = withConnDraft({ op: "options", workspace: form.ws, env: form._editRow.env }, draftOf(form));
+          if (form._renameFrom && normalizeEnvForCompare(form._renameFrom) !== normalizeEnvForCompare(form.env)) op.newEnv = form.env;
+        }
+        props.configOp(op);
         setEditing(null);
         return;
       }
@@ -787,12 +1469,25 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
 
     // Dispatch a raw-DSN pre-test and record the nonce so the test-result
     // mirror callback can route it back here. Pretest nonces are prefixed
-    // "pretest:" so the regular effect branch skips them.
+    // "pretest:" so the regular effect branch skips them. The payload carries
+    // the draft's options too, so "试连" really validates the tunnel/read-only
+    // combination the user is about to save.
     var dispatchPretest = function (form) {
       var nonce = "pretest:" + (form.ws || "") + "|" + (form.env || "default") + "|" + Date.now();
       nonceKeys.current[nonce] = nonce;
       setPretest({ form: form, pendingNonce: nonce, failMessage: null });
-      props.configOp({ op: "test", dsn: form.dsn, workspace: form.ws || undefined, env: form.env || "default", nonce: nonce });
+      var draft = connDraftOf(draftOf(form));
+      var payload = { op: "test", dsn: form.dsn, workspace: form.ws || undefined, env: form.env || "default", nonce: nonce };
+      // An edit validates the options the row already has; a brand-new form only
+      // asserts what it actually carries (so it cannot clear a stored tunnel).
+      if (form._editRow || draft.readOnly === true) payload.readOnly = draft.readOnly === true;
+      if (draft.ssh === null) payload.ssh = null;
+      else if (draft.ssh) payload.ssh = draft.ssh;
+      props.configOp(payload);
+      // Watchdog tier: an SSH handshake is slower than a direct connect, so a
+      // tunnelled validation gets a longer leash (host side is tiered to match
+      // and stays strictly below this).
+      var leash = draft.ssh ? PRETEST_WATCHDOG_SSH_MS : PRETEST_WATCHDOG_MS;
       testTimers.current[nonce] = setTimeout(function () {
         if (!nonceKeys.current[nonce]) return;
         delete nonceKeys.current[nonce];
@@ -803,29 +1498,36 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
           next.pendingNonce = null;
           return next;
         });
-      }, 30000);
+      }, leash);
+    };
+
+    /** The `add` payload for one save (options included). */
+    var saveOpOf = function (f) {
+      var op = withConnDraft({
+        op: "add", workspace: f.ws || undefined, env: f.env || "default", dsn: String(f.dsn || "").trim(),
+      }, draftOf(f));
+      if (f._renameFrom) op.renameFrom = f._renameFrom;
+      return op;
     };
 
     /** Close the add panel and clear it after a successful save. */
     var finishAddPanel = function (form) {
       if (form && form._editRow) { setEditing(null); return; }
-      setAddForm({ ws: "", env: "default", dsn: "" });
+      setAddForm(Object.assign({ ws: "", env: "default", dsn: "", ro: false, adv: uiMemory.advOpen === true }, sshDraftOf(null)));
       setAdd(false, "");
     };
 
     var confirmSave = function () {
       if (!pretest) return;
       var f = pretest.form;
-      var op = { op: "add", workspace: f.ws || undefined, env: f.env || "default", dsn: f.dsn.trim() };
-      if (f._renameFrom) op.renameFrom = f._renameFrom;
-      props.configOp(op);
+      props.configOp(saveOpOf(f));
       finishAddPanel(f);
       setPretest(null);
     };
     var cancelPretest = function () { setPretest(null); };
 
     var openAdd = function (target) {
-      setAddForm({ ws: String(target || ""), env: "default", dsn: "" });
+      setAddForm(Object.assign({ ws: String(target || ""), env: "default", dsn: "", ro: false, adv: uiMemory.advOpen === true }, sshDraftOf(null)));
       setEditing(null);
       setPretest(null);
       setAdd(true, target || "");
@@ -877,17 +1579,69 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
       nonceKeys.current[nonce] = key;
       setTests(function (prev) {
         var next = Object.assign({}, prev);
-        next[key] = { phase: "testing", nonce: nonce };
+        // `startedAt` drives the elapsed readout: a probe really can take several
+        // seconds, and an unlabelled spinner reads as "hung".
+        next[key] = { phase: "testing", nonce: nonce, startedAt: Date.now() };
         return next;
       });
       props.configOp({ op: "test", workspace: row.path, env: row.env, nonce: nonce });
       // Backstop: the host reports on every path (incl. failures); if the
       // mirror never carries our nonce back, surface a timeout, don't spin.
+      var tunnelled = !!(row && row.ssh);
       testTimers.current[nonce] = setTimeout(function () {
         if (!nonceKeys.current[nonce]) return;
         finishTest(key, nonce, false, t("test.timeout"));
-      }, 30000);
+      }, tunnelled ? TEST_WATCHDOG_SSH_MS : TEST_WATCHDOG_MS);
     };
+    /**
+     * SSH-LAYER-ONLY test: is the bastion reachable / does the tunnel come up,
+     * independently of the database? Answers the "which side is wrong?" question
+     * that a plain connection test cannot. Shares the nonce + test-result
+     * machinery with the row tests, under its own key.
+     */
+    var startSshTest = function (form, targetOf, key) {
+      var cur = tests[key];
+      if (cur && cur.phase === "testing") return;
+      var target = targetOf ? targetOf() : {};
+      var nonce = key + "|" + Date.now();
+      nonceKeys.current[nonce] = key;
+      setTests(function (prev) {
+        var next = Object.assign({}, prev);
+        next[key] = { phase: "testing", nonce: nonce, startedAt: Date.now() };
+        return next;
+      });
+      var d = connDraftOf(form);
+      var ssh = d.ssh && typeof d.ssh === "object" ? d.ssh : null;
+      if (!ssh) {
+        finishTest(key, nonce, false, t("adv.testSshNeedFields"));
+        return;
+      }
+      props.configOp({
+        op: "test", kind: "ssh",
+        workspace: target.ws || undefined, env: target.env || "default",
+        ssh: ssh, nonce: nonce,
+      });
+      testTimers.current[nonce] = setTimeout(function () {
+        if (!nonceKeys.current[nonce]) return;
+        finishTest(key, nonce, false, t("test.timeout"));
+      }, TEST_WATCHDOG_SSH_MS);
+    };
+    // ── elapsed readout for a running probe ──
+    //
+    // The 1s ticker exists ONLY while at least one row is testing: an idle page
+    // must not hold an interval (the offscreen render gate fails the run if one
+    // survives), and the effect's cleanup covers finish/unmount alike.
+    var tickState = react.useState(0);
+    var setTick = tickState[1];
+    var anyTesting = false;
+    for (var tk in tests) {
+      if (Object.prototype.hasOwnProperty.call(tests, tk) && tests[tk] && tests[tk].phase === "testing") { anyTesting = true; break; }
+    }
+    react.useEffect(function () {
+      if (!anyTesting || typeof setInterval !== "function") return undefined;
+      var id = setInterval(function () { setTick(function (n) { return n + 1; }); }, 1000);
+      return function () { clearInterval(id); };
+    }, [anyTesting]);
     react.useEffect(function () {
       var raw = typeof value.testResult === "string" ? value.testResult : "";
       if (!raw) return;
@@ -905,8 +1659,8 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
         if (!pt || pt.pendingNonce !== res.nonce) return;
         var f = pt.form;
         if (res.ok === true) {
-          // Test passed — save immediately.
-          props.configOp({ op: "add", workspace: f.ws || undefined, env: f.env || "default", dsn: f.dsn.trim() });
+          // Test passed — save immediately (options included, in the same op).
+          props.configOp(saveOpOf(f));
           finishAddPanel(f);
           setPretest(null);
         } else {
@@ -922,6 +1676,7 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
       return function () {
         for (var id in timers) { if (Object.prototype.hasOwnProperty.call(timers, id)) clearTimeout(timers[id]); }
         if (copyTimer.current) clearTimeout(copyTimer.current);
+        if (checkTimer.current) { clearTimeout(checkTimer.current); checkTimer.current = null; }
       };
     }, []);
 
@@ -949,7 +1704,14 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     };
 
     // ── derived copy ──
-    var statusText = meta.emoji + " " + t(meta.key) + " · " + t("tools.fixed", { n: String(toolCount) })
+    //
+    // Modern surfaces show only what a user acts on: state + connection count.
+    // The legacy (0.1.x) DOM keeps its original status sentence verbatim.
+    var statusText = t(meta.key);
+    var connSummary = workspaces.length > 0
+      ? t("status.conns", { n: String(workspaces.length) })
+      : t("desc.unconfigured");
+    var legacyStatusText = meta.emoji + " " + t(meta.key) + " · " + t("tools.fixed", { n: String(toolCount) })
       + (workspaces.length === 0 ? " · " + t("desc.unconfigured") : "");
     var cfgSummary = t("cfg.summary", {
       n: typeof draft.updateIntervalDays === "string" && draft.updateIntervalDays ? draft.updateIntervalDays : "7",
@@ -966,8 +1728,42 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     var originTitle = function (w, base) {
       var text = (base ? String(base) + " · " : "") + t("ws.source") + "：" + sourceLabelOf(w, t);
       if (!w.persisted) text += " " + t("ws.autoHint");
+      // Read-only and the tunnel are per-row ATTRIBUTES (they change what a query
+      // may do and how it is routed), so they ride the chip: the flag is visible,
+      // the details are one hover away.
+      if (w.ro === true) text += " · " + t("ro.title");
+      if (w.ssh) text += " · " + t("ro.sshTitle", { host: String(w.ssh.host || ""), port: String(w.ssh.port || ""), user: String(w.ssh.user || "") });
       return text;
     };
+    // Environment chip: the name plus, on the legacy layout, an inline read-only
+    // marker. The modern layout renders read-only as its own row control below so
+    // it can be flipped without opening the edit form.
+    var envChip = function (w) {
+      return h("span", { className: "dbh-envname", title: originTitle(w, w.env) },
+        w.env,
+        !modern && w.ro === true ? h("span", { className: "dbh-ro", title: t("ro.title") }, t("ro.chip")) : null);
+    };
+    /**
+     * Per-row read-only toggle, on EVERY modern layout (dialog, wide page, phone).
+     * One click writes `{op:'options', readOnly}` — no edit form, no re-typing a
+     * DSN. The chip itself is the state: outlined = writable, filled + lock = the
+     * model cannot write. The legacy layout keeps its marker-in-the-chip form.
+     */
+    var roChip = function (w) {
+      if (!modern) return null;
+      var on = w.ro === true;
+      return h("button", {
+        type: "button",
+        className: "dbh-rochip" + (on ? " dbh-rochip-on" : ""),
+        title: roSupported ? (on ? t("ro.chipOnHint") : t("ro.chipOffHint")) : capHint,
+        "aria-label": on ? t("ro.turnOff") : t("ro.turnOn"),
+        "aria-pressed": on,
+        disabled: !roSupported,
+        onClick: function () {
+          props.configOp({ op: "options", workspace: w.path, env: w.env, readOnly: w.ro !== true });
+        },
+      }, h("span", { className: "dbh-roemoji", "aria-hidden": true }, on ? "🔒" : "🔓"), t(on ? "ro.chip" : "ro.writable"));
+    };
     // The source handle is a first-class, visibly-copyable chip: it shows the
     // trailing characters that tell look-alike handles apart, and its dashed
     // outline + copy glyph say "this is an id", not "copy the row". Action
@@ -997,19 +1793,23 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
           "aria-busy": isTesting,
           disabled: isTesting,
           onClick: function () { startTest(w, key); },
-        }, h(RunIcon, { size: 14 })),
+        }, h(RunIcon, { size: 16 })),
         h("button", {
           type: "button", className: "dbh-iconbtn",
           title: isEditing ? t("btn.cancel") : t("btn.edit"),
           "aria-label": isEditing ? t("btn.cancel") : t("btn.edit"),
-          onClick: function () { setEditing(isEditing ? null : { key: key, dsn: "", env: w.env }); },
-        }, isEditing ? h(CloseIcon, { size: 14 }) : h(EditIcon, { size: 14 })),
+          onClick: function () {
+            setEditing(isEditing ? null : Object.assign({
+              key: key, dsn: "", env: w.env, ro: w.ro === true, adv: uiMemory.advOpen === true,
+            }, sshDraftOf(w)));
+          },
+        }, isEditing ? h(CloseIcon, { size: 14 }) : h(EditIcon, { size: 16 })),
         w.persisted ? h("button", {
           type: "button", className: "dbh-iconbtn dbh-iconbtn-danger",
           title: t("btn.delete"),
           "aria-label": t("btn.delete"),
           onClick: function () { props.configOp({ op: "remove", workspace: w.path, env: w.env }); },
-        }, h(TrashIcon, { size: 14 })) : null);
+        }, h(TrashIcon, { size: 16 })) : null);
     };
     // Browsers serialize a copy of adjacent BLOCK-level boxes with a separator,
     // and the split label is two flex items — pasting it into the DSN field used
@@ -1025,32 +1825,163 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
       } catch (err) { /* fall back to the browser's own serialization */ }
     };
     var pendingPretest = !!(pretest && pretest.pendingNonce);
-    var editRow = function (w, key) {
-      if (!(editing && editing.key === key)) return null;
-      return h("div", { className: "dbh-editrow", key: "edit" },
-        h("input", {
-          className: "dbh-input dbh-envinput",
-          "aria-label": t("add.env"),
-          placeholder: t("env.newPlaceholder"),
-          value: typeof editing.env === "string" ? editing.env : w.env,
-          onChange: function (e) { setEditing(Object.assign({}, editing, { env: e.target.value })); },
-        }),
+
+    /**
+     * The advanced (SSH) section shared by the add panel and the row editor.
+     *
+     * Layout red line: these inputs must NOT use `.dbh-field` and must appear
+     * AFTER the DSN input in document order — the offscreen gate pins the add
+     * panel's field count and the 0..2 input indices.
+     *
+     * Secrets are never echoed: the stored password / passphrase / key path stay
+     * in the Host, and a blank input means "keep what is stored".
+     */
+    var advPanel = function (form, update, keyPrefix, targetOf) {
+      var open = form.adv === true || uiMemory.advOpen === true;
+      var toggle = function () {
+        var next = !open;
+        uiMemory.advOpen = next;
+        update({ adv: next });
+      };
+      var children = [];
+      children.push(h("button", {
+        type: "button", className: "dbh-advtoggle", "aria-expanded": open,
+        disabled: !sshSupported,
+        title: sshSupported ? t("add.adv") : capHint,
+        key: keyPrefix + "-toggle",
+        onClick: toggle,
+      }, (open ? "▾ " : "▸ ") + t("add.adv")));
+      if (open) {
+        var body = [];
+        body.push(h("label", { className: "dbh-check", key: keyPrefix + "-on" },
+          h("input", {
+            type: "checkbox", className: "dbh-checkbox",
+            checked: form.sshOn === true,
+            onChange: function (e) { update({ sshOn: e.target.checked }); },
+          }),
+          h("span", null, t("adv.enable"))));
+        if (form.sshOn === true) {
+          var field = function (key, label, props, valueKey) {
+            return h("div", { className: "dbh-advrow", key: keyPrefix + "-" + key },
+              h("span", { className: "dbh-advlabel" }, label),
+              h("input", Object.assign({
+                className: "dbh-input",
+                value: String(form[valueKey] || ""),
+                onChange: function (e) { var patch = {}; patch[valueKey] = e.target.value; update(patch); },
+              }, props)));
+          };
+          body.push(field("host", t("adv.host"), { placeholder: "bastion.example.com", "aria-label": t("adv.host") }, "sshHost"));
+          body.push(field("port", t("adv.port"), { placeholder: "22", "aria-label": t("adv.port") }, "sshPort"));
+          body.push(field("user", t("adv.user"), { placeholder: "ops", "aria-label": t("adv.user") }, "sshUser"));
+          body.push(h("label", { className: "dbh-advrow", key: keyPrefix + "-auth" },
+            h("span", { className: "dbh-advlabel" }, t("adv.auth")),
+            h("span", { className: "dbh-check" },
+              h("input", {
+                type: "radio", name: keyPrefix + "-authkind", className: "dbh-checkbox",
+                checked: form.sshAuthKind !== "password",
+                onChange: function () { update({ sshAuthKind: "key" }); },
+              }),
+              h("span", null, t("adv.auth.key"))),
+            h("span", { className: "dbh-check" },
+              h("input", {
+                type: "radio", name: keyPrefix + "-authkind", className: "dbh-checkbox",
+                checked: form.sshAuthKind === "password",
+                onChange: function () { update({ sshAuthKind: "password" }); },
+              }),
+              h("span", null, t("adv.auth.password")))));
+          if (form.sshAuthKind === "password") {
+            body.push(field("password", t("adv.password"), { type: "password", placeholder: t("adv.keepSecret"), "aria-label": t("adv.password") }, "sshPassword"));
+          } else {
+            body.push(field("keyPath", t("adv.keyPath"), { placeholder: "~/.ssh/id_ed25519", "aria-label": t("adv.keyPath") }, "sshKeyPath"));
+            body.push(field("passphrase", t("adv.passphrase"), { type: "password", placeholder: t("adv.keepSecret"), "aria-label": t("adv.passphrase") }, "sshPassphrase"));
+          }
+          body.push(field("proxyJump", t("adv.proxyJump"), { placeholder: "jump.example.com:2222", "aria-label": t("adv.proxyJump") }, "sshProxyJump"));
+          // The SSH-layer test: reachability of the bastion, the local key file,
+          // and whether dbhub can bring the tunnel up — WITHOUT the database in
+          // the picture, so a failure can be attributed to one side.
+          var sshKey = keyPrefix + "|sshtest";
+          var sshEntry = tests[sshKey];
+          var sshBusy = !!(sshEntry && sshEntry.phase === "testing");
+          body.push(h("div", { className: "dbh-advrow", key: keyPrefix + "-sshtest" },
+            h("button", {
+              type: "button", className: "dbh-btn",
+              disabled: sshBusy,
+              title: t("adv.testSshHint"),
+              onClick: function () { startSshTest(form, targetOf, sshKey); },
+            }, t("btn.testSsh"))));
+          if (sshBusy) {
+            var sshSecs = sshEntry.startedAt ? Math.max(0, Math.round((Date.now() - sshEntry.startedAt) / 1000)) : 0;
+            body.push(h("div", { className: "dbh-test-ok", key: keyPrefix + "-sshrun" }, "⏳ " + t("test.elapsed", { s: String(sshSecs) })));
+          } else if (sshEntry && sshEntry.phase === "done") {
+            body.push(h("div", {
+              className: sshEntry.ok ? "dbh-test-ok" : "dbh-test-fail",
+              key: keyPrefix + "-sshres",
+            }, (sshEntry.ok ? "✓ " : "✗ ") + sshEntry.message));
+          }
+          body.push(h("div", { className: "dbh-hint", key: keyPrefix + "-hint" }, t("adv.hostHint") + " " + t("adv.slow")));
+        }
+        children.push(h("div", { className: "dbh-advbody", key: keyPrefix + "-body" }, body));
+      }
+      return h("div", { className: "dbh-adv", key: keyPrefix + "-adv" }, children);
+    };
+
+    /** The read-only checkbox shared by both forms. */
+    var roCheck = function (form, update, keyPrefix) {
+      return h("label", {
+        className: "dbh-check",
+        key: keyPrefix + "-ro",
+        title: roSupported ? t("ro.title") : capHint,
+      },
         h("input", {
-          className: "dbh-input",
-          "aria-label": t("add.dsn"),
-          placeholder: t("dsn.editPlaceholder"),
-          value: editing.dsn,
-          onChange: function (e) { setEditing(Object.assign({}, editing, { dsn: e.target.value })); },
+          type: "checkbox", className: "dbh-checkbox",
+          checked: form.ro === true,
+          disabled: !roSupported,
+          "aria-label": t("add.readOnly"),
+          onChange: function (e) { update({ ro: e.target.checked }); },
         }),
-        h("button", {
-          type: "button", className: "dbh-btn dbh-btn-primary",
-          disabled: pendingPretest,
-          onClick: function () { saveEdit(w); },
-        }, t("btn.saved")));
+        h("span", null, t("add.readOnly")));
+    };
+
+    /** Editor for the options of an auto-discovered (options-only) row. */
+    var editRow = function (w, key) {
+      if (!(editing && editing.key === key)) return null;
+      var update = function (patch) { updateEditing(patch); };
+      return h("div", { className: "dbh-editbox", key: "edit" },
+        h("div", { className: "dbh-editrow" },
+          h("input", {
+            className: "dbh-input dbh-envinput",
+            "aria-label": t("add.env"),
+            placeholder: t("env.newPlaceholder"),
+            value: typeof editing.env === "string" ? editing.env : w.env,
+            onChange: function (e) { updateEditing({ env: e.target.value }); },
+          }),
+          h("input", {
+            className: "dbh-input",
+            "aria-label": t("add.dsn"),
+            placeholder: t("dsn.editPlaceholder"),
+            value: editing.dsn,
+            onChange: function (e) { updateEditing({ dsn: e.target.value }); },
+          }),
+          roCheck(editing, update, "ed"),
+          h("button", {
+            type: "button", className: "dbh-btn dbh-btn-primary",
+            disabled: pendingPretest,
+            onClick: function () { saveEdit(w); },
+          }, t("btn.saved"))),
+        advPanel(editing, update, "ed|" + w.path + "|" + w.env, function () {
+          return { ws: w.path, env: String(editing.env || "").trim() || w.env };
+        }));
     };
     var testRow = function (w, key) {
       var entry = tests[key];
-      if (!entry || entry.phase !== "done") return null;
+      if (!entry) return null;
+      if (entry.phase === "testing") {
+        // Elapsed seconds, so a slow (tunnelled) probe reads as "working", not
+        // as a frozen page. Re-rendered by the testing-only ticker above.
+        var secs = entry.startedAt ? Math.max(0, Math.round((Date.now() - entry.startedAt) / 1000)) : 0;
+        return h("div", { key: "test", className: "dbh-test-ok" }, "⏳ " + t("test.elapsed", { s: String(secs) }));
+      }
+      if (entry.phase !== "done") return null;
       return h("div", { key: "test", className: entry.ok ? "dbh-test-ok" : "dbh-test-fail" },
         (entry.ok ? "✓ " : "✗ ") + entry.message);
     };
@@ -1061,7 +1992,11 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     var connLabelView = function (w) {
       var parts = splitConn(w.conn);
       return h("span", { className: "dbh-conn", title: w.conn, onCopy: function (e) { onConnCopy(w, e); } },
-        h("span", { className: "dbh-conn-lock", "aria-hidden": true }, "🔒"),
+        // The lock used to sit in front of every connection string, which read
+        // like "this row needs a password" and clashed with the read-only lock.
+        // Modern rows show the plain type://host:port/db; the only lock left is
+        // the read-only chip. Legacy keeps its original marker.
+        !modern ? h("span", { className: "dbh-conn-lock", "aria-hidden": true }, "🔒") : null,
         h("span", { className: "dbh-conn-pre" }, parts.prefix),
         parts.tail ? h("span", { className: "dbh-conn-db" }, parts.tail) : null);
     };
@@ -1069,8 +2004,9 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
       var key = w.path + "|" + w.env;
       return h("div", { className: "dbh-envwrap", key: key },
         h("div", { className: "dbh-envrow" },
-          h("span", { className: "dbh-envname", title: originTitle(w, w.env) }, w.env),
+          envChip(w),
           connLabelView(w),
+          roChip(w),
           rowActions(w, key)),
         editRow(w, key),
         testRow(w, key));
@@ -1108,17 +2044,204 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
         h("div", { className: "dbh-tilehead" },
           h("span", { className: "dbh-tiletitle", title: g.path }, label)),
         h("div", { className: "dbh-tilemeta" },
-          h("span", { className: "dbh-envname", title: originTitle(w, w.env) }, w.env),
-          connLabelView(w)),
+          envChip(w),
+          connLabelView(w),
+          roChip(w)),
         h("div", { className: "dbh-tileacts" }, rowActions(w, key)),
         editRow(w, key),
         testRow(w, key));
     };
 
     // ── assemble the page ──
-    var head = h("div", { className: "dbh-head" },
+    //
+    // Modern header: title + subdued version plus a quiet "可升级到 x" link that
+    // expands into a neutral panel on demand. The legacy (0.1.x) header below is
+    // byte-for-byte the old one.
+    var latestSpec = update.latestSpec || (update.latest ? "dsh-dbhub-live@" + update.latest : "");
+    var webCmd = update.latest ? "dsh plugin --profile web up dsh-dbhub-live@" + update.latest : "";
+    var checkedMinutes = update.checkedAt ? Math.max(0, Math.round((Date.now() - update.checkedAt) / 60000)) : 0;
+    var copyLatest = function () { if (latestSpec) copySource(latestSpec, "ver"); };
+    var copyWebCmd = function () { if (webCmd) copySource(webCmd, "cmd"); };
+    var checkLabel = checking
+      ? t("ver.checking")
+      : update.error
+        ? t("ver.checkFailed") + "：" + update.error
+        : update.checkedAt
+          ? t("ver.checkedAgo", { n: String(checkedMinutes) })
+          : t("ver.check");
+    var titlebar = modern ? h("div", { className: "dbh-titlebar" },
+      h("h2", { className: "dbh-title" }, t("title")),
+      pluginVersion ? h("span", { className: "dbh-ver", title: dshVersion ? "DSH " + dshVersion : "" }, "v" + pluginVersion) : null,
+      h("span", { className: "dbh-grow" }),
+      update.hasUpdate ? h("button", {
+        type: "button", className: "dbh-updatelink",
+        title: t("ver.copySpec", { v: update.latest }),
+        onClick: function () { setUpdateOpen(!updateOpen); },
+      }, "↑ " + t("ver.link", { v: update.latest })) : null,
+      h("button", {
+        type: "button", className: "dbh-vercheck", disabled: checking,
+        title: checkLabel, "aria-label": t("ver.check"),
+        onClick: function () { runUpdateCheck(true); },
+      }, h(RefreshIcon, { size: 12 }))) : null;
+
+    // Update guidance, expanded on demand: the Host names the runtime (web or
+    // desktop) because the two profiles update differently. Neutral panel — the
+    // old red "error" styling made users think something had broken.
+    var updateView = null;
+    if (modern && updateOpen && update.hasUpdate) {
+      updateView = h("div", { className: "dbh-updatepanel" },
+        h("div", { className: "dbh-updaterow" },
+          h("code", { className: "dbh-spec" }, latestSpec),
+          h("button", {
+            type: "button", className: "dbh-linkbtn",
+            title: t("ver.copySpec", { v: update.latest }),
+            onClick: copyLatest,
+          }, copiedKey === "ver" ? t("copy.ok") : t("ver.copy"))),
+        h("div", { className: "dbh-hint" }, runtime === "desktop"
+          ? t("ver.desktopHint", { v: update.latest })
+          : runtime === "web"
+            ? t("ver.webHint", { v: update.latest })
+            : t("ver.genericHint", { v: update.latest })),
+        runtime !== "desktop" && webCmd ? h("div", { className: "dbh-updaterow" },
+          h("code", { className: "dbh-spec" }, webCmd),
+          h("button", { type: "button", className: "dbh-linkbtn", onClick: copyWebCmd },
+            copiedKey === "cmd" ? t("copy.ok") : t("ver.copyCmd"))) : null,
+        h("a", {
+          className: "dbh-link",
+          href: "https://github.com/mr-mihu/dsh-dbhub-live/releases/tag/v" + update.latest,
+          target: "_blank", rel: "noreferrer noopener",
+        }, t("ver.releaseNotes")));
+    }
+
+    // One status line: state + connection count (+ the dialog's 设置 toggle).
+    var statusline = modern ? h("div", { className: "dbh-statusline" },
+      h("span", { className: "dbh-dot" + (enabled ? "" : " dbh-dot-off"), "aria-hidden": true }),
+      h("span", null, statusText),
+      h("span", { className: "dbh-statussep" }, "·"),
+      h("span", null, connSummary),
+      h("span", { className: "dbh-grow" }),
+      !isWide ? h("button", {
+        type: "button", className: "dbh-linkbtn",
+        "aria-expanded": settingsOpen,
+        onClick: toggleSettings,
+      }, t("settings.toggle") + (settingsOpen ? " ▴" : " ▾")) : null) : null;
+    var errorLine = modern && lastError ? h("div", { className: "dbh-error" }, lastError) : null;
+
+    // Technical details live here, collapsed, so the rows above stay actionable.
+    var notesView = h("div", { className: "dbh-notes" },
+      h("div", null, t("note.tools", { n: String(toolCount) })),
+      h("div", null, t("note.update")),
+      h("div", null, t("note.sidebar")),
+      h("div", null, t("note.policy")),
+      h("div", null, t("note.version", {
+        plugin: pluginVersion || "?",
+        dsh: dshVersion || "?",
+        runtime: runtime === "desktop" ? t("ver.runtimeDesktop") : t("ver.runtimeWeb"),
+      })),
+      capHint ? h("div", null, capHint) : null);
+
+    // Shared settings rows: the wide page shows them directly, the dialog behind
+    // its 设置 toggle. Controls are the harness's own Switch primitive; the state
+    // word (显示/隐藏, 启用/停用, 开启/关闭) sits next to it so the row's meaning
+    // never depends on a colour or a tick alone.
+    // The four settings controls, shared by the wide one-line bar and the narrow
+    // stacked rows so both surfaces write through the same callbacks.
+    var ctlEnable = function () {
+      return switchControl({
+        checked: enabled, ariaLabel: t("row.enable"),
+        onChange: function (next) { props.setEnabled(next); },
+      });
+    };
+    var ctlSidebar = function () {
+      return switchControl({
+        checked: draft.showSidebarEntry !== false, ariaLabel: t("row.sidebar"),
+        title: t("cfg.sidebarHint"), onChange: toggleSidebar,
+      });
+    };
+    var ctlPolicy = function () {
+      return switchControl({
+        checked: draft.announceAccessPolicy !== false, ariaLabel: t("row.policy"),
+        title: t("cfg.policyHint"), onChange: togglePolicy,
+      });
+    };
+    var ctlInterval = function () {
+      return [
+        h("input", {
+          key: "input", className: "dbh-input dbh-srow-input", type: "number", min: "0",
+          "aria-label": t("row.update"), title: t("cfg.updateHint"),
+          value: typeof draft.updateIntervalDays === "string" ? draft.updateIntervalDays : "",
+          onChange: function (e) { setSaved(false); setDraft(Object.assign({}, draft, { updateIntervalDays: e.target.value })); },
+        }),
+        h("span", { key: "unit", className: "dbh-srow-unit" }, t("unit.days")),
+        h("button", { key: "save", type: "button", className: "dbh-btn dbh-btn-sm", onClick: saveConfig }, t("btn.save")),
+      ];
+    };
+    var notesButton = function (labelKey) {
+      return h("button", {
+        type: "button", className: "dbh-linkbtn",
+        "aria-expanded": notesOpen,
+        onClick: function () { setNotesOpen(!notesOpen); },
+      }, "ⓘ " + t(notesOpen ? "settings.less" : labelKey));
+    };
+
+    // Wide page: one compact line so the four controls (and their labels) sit
+    // together instead of stretching across the page with a gaping middle. It
+    // wraps only when the docked window is genuinely narrow.
+    var settingsBar = function (narrow) {
+      return h("div", { className: "dbh-settings dbh-settingsbar" + (narrow ? " dbh-barnarrow" : "") },
+        h("div", { className: "dbh-barline" },
+          h("span", { className: "dbh-bartitle" }, t("settings.title")),
+          h("div", { className: "dbh-bargroup" },
+            h("span", { className: "dbh-barlabel" }, t("row.enable")),
+            h("span", { className: "dbh-barstate" }, t(enabled ? "state.enable" : "state.disable")),
+            ctlEnable()),
+          h("div", { className: "dbh-bargroup" },
+            h("span", { className: "dbh-barlabel" }, t("row.sidebar")),
+            h("span", { className: "dbh-barstate" }, t(draft.showSidebarEntry !== false ? "state.show" : "state.hide")),
+            ctlSidebar()),
+          h("div", { className: "dbh-bargroup" },
+            h("span", { className: "dbh-barlabel" }, t("row.policy")),
+            h("span", { className: "dbh-barstate" }, t(draft.announceAccessPolicy !== false ? "state.on" : "state.off")),
+            ctlPolicy()),
+          h("div", { className: "dbh-bargroup" },
+            h("span", { className: "dbh-barlabel" }, t("row.update")),
+            ctlInterval()),
+          h("span", { className: "dbh-grow" }),
+          notesButton("settings.notes"),
+          saved ? h("span", { className: "dbh-saved" }, t("saved.ok")) : null),
+        notesOpen ? notesView : null);
+    };
+
+    // Narrow surfaces (dialog + phone): compact rows, still behind the 设置 toggle.
+    var settingsRows = function () {
+      return h("div", { className: "dbh-settings" },
+        h("div", { className: "dbh-settings-title" }, t("settings.title")),
+        h("div", { className: "dbh-srow" },
+          h("div", { className: "dbh-srow-main" }, h("div", { className: "dbh-srow-title" }, t("row.enable"))),
+          h("div", { className: "dbh-srow-ctl" },
+            h("span", { className: "dbh-srow-state" }, t(enabled ? "state.enable" : "state.disable")),
+            ctlEnable())),
+        h("div", { className: "dbh-srow" },
+          h("div", { className: "dbh-srow-main" }, h("div", { className: "dbh-srow-title" }, t("row.sidebar"))),
+          h("div", { className: "dbh-srow-ctl" },
+            h("span", { className: "dbh-srow-state" }, t(draft.showSidebarEntry !== false ? "state.show" : "state.hide")),
+            ctlSidebar())),
+        h("div", { className: "dbh-srow" },
+          h("div", { className: "dbh-srow-main" }, h("div", { className: "dbh-srow-title" }, t("row.policy"))),
+          h("div", { className: "dbh-srow-ctl" },
+            h("span", { className: "dbh-srow-state" }, t(draft.announceAccessPolicy !== false ? "state.on" : "state.off")),
+            ctlPolicy())),
+        h("div", { className: "dbh-srow" },
+          h("div", { className: "dbh-srow-main" }, h("div", { className: "dbh-srow-title" }, t("row.update"))),
+          h("div", { className: "dbh-srow-ctl" }, ctlInterval())),
+        h("div", { className: "dbh-settings-foot" }, notesButton("settings.more")),
+        notesOpen ? notesView : null);
+    };
+
+    // Legacy (dsh 0.1.x): the original header + settings strip, byte-for-byte.
+    var legacyHead = h("div", { className: "dbh-head" },
       h("div", { className: "dbh-headtext" },
-        h("span", { className: "dbh-statustext", title: modeLabel }, statusText),
+        h("span", { className: "dbh-statustext", title: modeLabel }, legacyStatusText),
         lastError ? h("span", { className: "dbh-error" }, lastError) : null),
       h("span", { className: "dbh-cfgsum" }, cfgSummary),
       h("button", { type: "button", className: "dbh-btn", onClick: toggleSettings },
@@ -1128,7 +2251,7 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
         onClick: function () { props.setEnabled(!enabled); },
       }, t(enabled ? "btn.disable" : "btn.enable")));
 
-    var settingsPanel = settingsOpen ? h("div", { className: "dbh-strip" },
+    var legacySettingsPanel = settingsOpen ? h("div", { className: "dbh-strip" },
       h("div", { className: "dbh-row" },
         h("span", { className: "dbh-label" }, t("cfg.update")),
         h("input", {
@@ -1140,16 +2263,35 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
         h("span", { className: "dbh-grow" }),
         h("label", { className: "dbh-check", title: t("cfg.sidebarHint") },
           h("input", {
-            type: "checkbox",
+            type: "checkbox", className: "dbh-checkbox",
             checked: draft.showSidebarEntry !== false,
             onChange: function (e) { toggleSidebar(e.target.checked); },
           }),
           h("span", null, t("cfg.sidebar")))),
-      h("div", { className: "dbh-hint" }, t("cfg.sidebarHint")),
+      h("div", { className: "dbh-row" },
+        h("label", { className: "dbh-check", title: t("cfg.policyHint") },
+          h("input", {
+            type: "checkbox", className: "dbh-checkbox",
+            "aria-label": t("cfg.policy"),
+            checked: draft.announceAccessPolicy !== false,
+            onChange: function (e) { togglePolicy(e.target.checked); },
+          }),
+          h("span", null, t("cfg.policy")))),
+      h("div", { className: "dbh-hint" }, (enabled ? t("cfg.enabledHint") : t("cfg.disabledHint")) + " " + t("cfg.sidebarHint")),
       h("div", { className: "dbh-addfoot" },
         saved ? h("span", { className: "dbh-saved" }, t("saved.ok")) : null,
         h("button", { type: "button", className: "dbh-btn dbh-btn-primary", onClick: saveConfig }, t("btn.save")))) : null;
 
+    // Any non-modal page (left-menu panel, Plugins page) uses the one-line bar,
+    // even when the measured column is narrow: a docked/small desktop window used
+    // to fall back to four stacked rows ("all buttons in a column"). Only the
+    // dialog and the phone keep the stacked form.
+    var useSettingsBar = modern && !isMobile && surface !== "modal";
+    var settingsPanel = modern
+      ? (settingsOpen && !useSettingsBar ? settingsRows() : null)
+      : legacySettingsPanel;
+    var configBlock = useSettingsBar ? settingsBar(!isWide) : null;
+
     var section = h("div", { className: "dbh-sect" },
       h("span", { className: "dbh-secttitle" }, t("conn.title")),
       h("span", { className: "dbh-sectcount" }, t("conn.total", { n: String(workspaces.length), m: String(groups.length) })),
@@ -1239,6 +2381,15 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
           value: addForm.dsn,
           onChange: function (e) { setAddForm(Object.assign({}, addForm, { dsn: e.target.value })); },
         })));
+      // Options come AFTER the DSN input: the offscreen gate pins the field count
+      // and the 0..2 input indices inside the add panel, so nothing may be
+      // inserted before the DSN box.
+      var updateAdd = function (patch) { setAddForm(Object.assign({}, addForm, patch)); };
+      fields.push(h("div", { className: "dbh-row", key: "ro" }, roCheck(addForm, updateAdd, "add")));
+      fields.push(advPanel(addForm, updateAdd, "add", function () {
+        return { ws: addTarget || String(addForm.ws || "").trim(), env: String(addForm.env || "").trim() || "default" };
+      }));
+      if (capHint) fields.push(h("div", { className: "dbh-hint", key: "cap" }, capHint));
       fields.push(h("div", { className: "dbh-addfoot", key: "foot" },
         h("button", { type: "button", className: "dbh-btn", onClick: closeAdd }, t("btn.cancel")),
         h("button", {
@@ -1252,9 +2403,18 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     var wsList = h("datalist", { id: "dbh-ws-list" },
       groups.map(function (g) { return h("option", { key: g.key, value: g.path }, g.title); }));
 
-    return h("div", { className: "dbh-inner" },
-      head,
-      settingsPanel,
+    var innerClass = "dbh-inner"
+      + (modern ? " dbh-modern" : "")
+      + (modern && isWide ? " dbh-wide" : "")
+      + (modern && isMobile ? " dbh-mobile" : "")
+      + (modern && surface === "modal" ? " dbh-modal" : "");
+
+    return h("div", { className: innerClass, ref: innerRef },
+      modern ? titlebar : legacyHead,
+      modern ? updateView : null,
+      modern ? statusline : null,
+      modern ? errorLine : null,
+      configBlock || settingsPanel,
       section,
       body,
       overwriteView || pretestView,
@@ -1482,21 +2642,24 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
         label: function () { return t("title"); },
         locale: NS,
         inject: function () { return face; },
-      }, ConfigPanel);
+      }, SettingsSectionPanel);
       console.log("[dsh-dbhub-live] 设置页入口已注册: settings.section id=dbhub");
       return reg;
     });
-    // The sidebar shortcut is optional: the `showSidebarEntry` option (the
-    // switch on the settings page) registers and disposes the entry LIVE, so
-    // turning it off takes effect without a reload and never locks anyone out
-    // (Settings and the Plugins row keep working).
+    // The sidebar shortcut is the AND of two independent things:
+    //   · the user's `showSidebarEntry` switch — hide the shortcut while the
+    //     plugin keeps working (its tools stay available); and
+    //   · the plugin's enabled state — a disabled plugin contributes no entry at
+    //     all, whatever the switch says.
+    // The settings section and the Plugins-row card do NOT depend on this, so
+    // neither state can lock anyone out of the configuration.
     var sidebarReg = null;
     var sidebarSlotReady = false;
     var sidebarWanted = function () {
       try {
         var snap = face.getSnapshot();
         var v = snap && typeof snap === "object" && snap.value && typeof snap.value === "object" ? snap.value : {};
-        return v.showSidebarEntry !== false;
+        return v.enabled !== false && v.showSidebarEntry !== false;
       } catch (e) {
         return true;
       }
@@ -1534,7 +2697,7 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
         key: "dbhub",
         locale: NS,
         inject: function () { return face; },
-      }, ConfigPanel);
+      }, MainPanel);
     });
     face.subscribe(syncSidebar);
   }