dsh-dbhub-live 5.1.0 → 5.2.0

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,9 +106,57 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     "cfg.off": "隐藏",
     "cfg.update": "自动更新间隔(天)",
     "cfg.sidebar": "在侧边栏显示入口",
+    "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": "只读模式",
@@ -169,9 +256,55 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     "cfg.off": "hidden",
     "cfg.update": "Update interval (days)",
     "cfg.sidebar": "Show the sidebar entry",
+    "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",
@@ -367,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
@@ -398,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);}",
@@ -457,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() {
@@ -489,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 ───────────────────────────────────────────────────
@@ -766,6 +1023,95 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
     };
   }
 
+  /**
+   * 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 ──────────────────────────────────────────────────────────────
 
   function StatusCard(props) {
@@ -809,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
@@ -869,13 +1288,16 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
       setAddTarget(nextTarget);
     };
 
-    // ── config draft (interval + the sidebar switch) ──────────────────────────
+    // ── 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];
@@ -888,6 +1310,7 @@ 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); });
     };
 
@@ -898,6 +1321,13 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
       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
@@ -1246,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; }
       };
     }, []);
 
@@ -1273,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",
@@ -1297,12 +1735,34 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
       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 an inline read-only marker. Never an icon
-    // button — the row's action budget stays at three.
+    // 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,
-        w.ro === true ? h("span", { className: "dbh-ro", title: t("ro.title") }, t("ro.chip")) : null);
+        !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
@@ -1333,7 +1793,7 @@ 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"),
@@ -1343,13 +1803,13 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
               key: key, dsn: "", env: w.env, ro: w.ro === true, adv: uiMemory.advOpen === true,
             }, sshDraftOf(w)));
           },
-        }, isEditing ? h(CloseIcon, { size: 14 }) : h(EditIcon, { size: 14 })),
+        }, 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
@@ -1532,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);
     };
@@ -1542,6 +2006,7 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
         h("div", { className: "dbh-envrow" },
           envChip(w),
           connLabelView(w),
+          roChip(w),
           rowActions(w, key)),
         editRow(w, key),
         testRow(w, key));
@@ -1580,16 +2045,203 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
           h("span", { className: "dbh-tiletitle", title: g.path }, label)),
         h("div", { className: "dbh-tilemeta" },
           envChip(w),
-          connLabelView(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 },
@@ -1599,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", {
@@ -1616,14 +2268,30 @@ window.__ModuleLoader__.load({ id: "dsh-dbhub-live", factory: (require) => {
             onChange: function (e) { toggleSidebar(e.target.checked); },
           }),
           h("span", null, t("cfg.sidebar")))),
-      // This switch and the plugin's enabled state are ANDed, and they are not
-      // the same thing: hiding the shortcut leaves the plugin (and its tools)
-      // fully usable, while disabling always hides the entry.
+      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) })),
@@ -1735,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,
@@ -1965,7 +2642,7 @@ 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;
     });
@@ -2020,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);
   }