dsh-plugin-mcp-ui 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 tofu-zyc (TOFU BOX)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,91 @@
+# dsh-plugin-mcp-ui
+
+「设置 → MCP 服务器」页面插件。给 `@deepseek-ai/dsh-mcp-client` 补一个配置界面：
+在网页上增删改 MCP 服务器，写入 profile 的 `cordis.patch.yml`，热生效。
+
+官方 alpha（`0.1.6-alpha.1`）把 mcp-client 打包了但**一个服务器都不启用**，且
+没有任何配置 UI——这个插件补的就是这一段。
+
+## 功能
+
+- 列表页：展示本插件管理的全部 MCP 服务器，支持启用/禁用、编辑、删除；
+- 表单：`stdio`（command / args / env / cwd）与 `streamable-http`（url / headers）
+  两种传输，外加超时、断线重连、`failOnStartupError`；
+- 只读展示 patch 里**其它来源**的 mcp-client 行（手写或其它 patch 带入的），
+  本页不会碰它们；
+- 校验对齐 dsh-mcp-client 的 Config schema（serverName 字符集/长度、url 前缀、
+  正整数超时、serverName 在注册范围内唯一）。
+
+## 工作原理（重要）
+
+**真实配置源是 profile 的 `cordis.patch.yml` 中的一个标记块**，不是数据库也不是
+settings 命名空间：
+
+```yaml
+# >>> dsh-plugin-mcp-ui managed ... >>>
+- insert:
+    - id: mcp-filesystem
+      name: '@deepseek-ai/dsh-mcp-client'
+      config:
+        transport: stdio
+        serverName: "filesystem"
+        command: "npx"
+        args:
+          - "-y"
+# <<< dsh-plugin-mcp-ui managed <<<
+```
+
+- 块外内容**逐字保留**（字符串拼接 + 临时文件原子替换，不 YAML 重排整个文件）；
+- profile 开着 `patchReload: live`（web profile 默认如此）时，保存后 Cordis 热应用
+  补丁，**数秒内生效，无需重启**；否则重启 dsh 生效；
+- 因此这个文件本身可以进 git，UI 写的内容和你手改的内容完全同构、可审计；
+- 卸载本插件后标记块变成普通注释行包裹的合法配置，MCP 服务器照常加载，不会失联。
+
+文件定位（`resolvePatchPath`，按顺序）：
+
+1. patch 行显式配置的 `config.patchPath`；
+2. **运行时锚点 `ctx.baseUrl`**：dsh 把 bundle 层、profile 的
+   `cordis.patch.yml`、home 层、`--patch` 覆盖层全部当作同一个 include
+   （`<profileDir>/cordis.yml`）的 patch 传入，所以条目的 `ctx.baseUrl` 就是
+   profile 目录 —— `link:` 开发安装走的就是这条路，**无需任何额外配置**；
+3. 安装位置推导 `<profileDir>/node_modules/dsh-plugin-mcp-ui/`（registry 安装）。
+
+第 2 步只在目录确实是 profile（存在 `cordis.yml` 且 `package.json` 带
+`dsh.profile`）时才采信；三步全落空时插件会带提示拒绝启动，不会写到错误的
+文件里。真要手工指定时用**覆盖行**（无 `insert:`，靠 id 命中自注册行、
+`name` 做安全校验），不要再 insert 造成同 id 双行：
+
+```yaml
+- id: mcp-ui
+  name: dsh-plugin-mcp-ui
+  config:
+    patchPath: 'C:/Users/you/.dsh/profiles/web/cordis.patch.yml'
+```
+
+## 安装
+
+```sh
+dsh plugin --profile web add github:tofu-zyc/dsh-plugin-tofu-box#path:dsh-plugin-mcp-ui
+```
+
+刷新设置页即可看到「MCP 服务器」标签。本包自带 `cordis.patch.yml` 自注册
+（`dsh.bundle.patch` 机制），无需手工 insert。
+
+## 注意
+
+- 工具命名为 `mcp__<serverName>__<工具名>`；`serverName` 在同一注册范围唯一，
+  重复注册会抛错（页面会先校验拦下）。
+- stdio 服务器启动慢/挂起可能短暂阻塞工具注册；`failOnStartupError` 默认关闭，
+  单个服务器坏了不会拖垮启动。
+- env / headers 会以**明文**写进 `cordis.patch.yml`，注意 git 提交范围。
+- MCP prompt 模板不被 dsh-mcp-client 支持，本页面也不提供。
+
+## 与 DSH 版本的耦合点（0.1.6-alpha.1）
+
+- 数据面走 `ctx.connection.rpc.intercept('/api', ...)`（宿主）×
+  `ctx.connection.rpc.call('/api', ...)`（浏览器），认证复用官方连接层；
+  旧的 `ctx.connection.api` 已在 0.1.2 移除，勿混淆。
+- Config schema 对齐 `@deepseek-ai/dsh-mcp-client`：
+  `transport: stdio | streamable-http` 判别联合、`toolCallTimeoutMs` 默认 60000、
+  `reconnect { enabled, initialDelayMs, maxDelayMs, maxAttempts }`。
+- headless（无 connection 服务）时宿主半边只打一条日志，不注册 UI 通道。

package/client.js

@@ -0,0 +1,335 @@
+window.__ModuleLoader__.load({
+  id: "dsh-plugin-mcp-ui",
+  factory: (require) => {
+    var module = { exports: {} };
+    var exports = module.exports;
+    Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+    const React = require("react");
+    const { useState, useEffect, useCallback } = React;
+
+    const CSS = `
+.mcpui{display:flex;flex-direction:column;gap:14px;padding:4px 0 24px;color:inherit}
+.mcpui-head{display:flex;flex-direction:column;gap:4px}
+.mcpui-title{font-size:15px;font-weight:600}
+.mcpui-sub{font-size:12.5px;opacity:.72;line-height:1.5}
+.mcpui-path{font-size:11.5px;opacity:.6;font-family:ui-monospace,SFMono-Regular,monospace;word-break:break-all}
+.mcpui-warn{font-size:12px;line-height:1.55;padding:8px 12px;border-radius:8px;background:rgba(210,150,40,.14);border:1px solid rgba(210,150,40,.35)}
+.mcpui-toast{position:sticky;top:8px;z-index:20;align-self:flex-start;padding:6px 12px;border-radius:8px;font-size:12.5px}
+.mcpui-toast-ok{background:rgba(46,160,67,.18)}
+.mcpui-toast-err{background:rgba(213,83,61,.18)}
+.mcpui-state{padding:20px 8px;font-size:13px;opacity:.7}
+.mcpui-error{color:#d5533d;opacity:1}
+.mcpui-list{display:flex;flex-direction:column;gap:10px}
+.mcpui-card{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid rgba(128,128,128,.28);border-radius:10px}
+.mcpui-card-off{opacity:.55}
+.mcpui-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
+.mcpui-card-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
+.mcpui-name{font-size:13.5px;font-weight:600}
+.mcpui-chip{font-size:11px;padding:1px 8px;border-radius:999px;background:rgba(128,128,128,.16)}
+.mcpui-chip-on{background:rgba(46,160,67,.22)}
+.mcpui-chip-transport{background:rgba(80,140,255,.18)}
+.mcpui-summary{font-size:12px;opacity:.72;font-family:ui-monospace,SFMono-Regular,monospace;word-break:break-all;line-height:1.45}
+.mcpui-rowid{font-size:11px;opacity:.5;font-family:ui-monospace,SFMono-Regular,monospace}
+.mcpui-actions{display:flex;align-items:center;gap:8px}
+.mcpui-btn{font-size:12.5px;padding:5px 12px;border-radius:8px;border:1px solid rgba(128,128,128,.4);background:transparent;color:inherit;cursor:pointer}
+.mcpui-btn:hover{border-color:rgba(80,140,255,.7)}
+.mcpui-btn-primary{background:rgba(80,140,255,.22);border-color:rgba(80,140,255,.55)}
+.mcpui-btn-danger{color:#d5533d;border-color:rgba(213,83,61,.45)}
+.mcpui-btn:disabled{opacity:.5;cursor:not-allowed}
+.mcpui-switch{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer}
+.mcpui-switch input{accent-color:rgb(80,140,255)}
+.mcpui-form{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid rgba(80,140,255,.45);border-radius:10px}
+.mcpui-form-title{font-size:13px;font-weight:600}
+.mcpui-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
+.mcpui-field{display:flex;flex-direction:column;gap:4px;min-width:0}
+.mcpui-field-wide{grid-column:1 / -1}
+.mcpui-label{font-size:11px;opacity:.6}
+.mcpui-hint{font-size:11px;opacity:.5;line-height:1.4}
+.mcpui-input,.mcpui-select,.mcpui-textarea{font-size:12.5px;padding:6px 8px;border-radius:7px;border:1px solid rgba(128,128,128,.4);background:transparent;color:inherit;width:100%;box-sizing:border-box;font-family:inherit}
+.mcpui-textarea{font-family:ui-monospace,SFMono-Regular,monospace;resize:vertical;min-height:56px}
+.mcpui-input:focus,.mcpui-select:focus,.mcpui-textarea:focus{outline:none;border-color:rgba(80,140,255,.7)}
+.mcpui-field-error{font-size:11.5px;color:#d5533d}
+.mcpui-ext{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px dashed rgba(128,128,128,.4);border-radius:10px;opacity:.75}
+.mcpui-ext-title{font-size:12px;font-weight:600}
+.mcpui-ext-item{font-size:12px;font-family:ui-monospace,SFMono-Regular,monospace;word-break:break-all}
+.mcpui-form-actions{display:flex;gap:8px;justify-content:flex-end}
+`;
+
+    const TRANSPORTS = [
+      { value: "stdio", label: "stdio（本机命令）" },
+      { value: "streamable-http", label: "streamable-http（远程 URL）" },
+    ];
+
+    const EMPTY_FORM = {
+      id: "",
+      serverName: "",
+      transport: "stdio",
+      disabled: false,
+      command: "",
+      args: "",
+      env: "",
+      cwd: "",
+      url: "",
+      headers: "",
+      toolCallTimeoutMs: "",
+      failOnStartupError: false,
+      reconnect: true,
+    };
+
+    function entryToForm(entry) {
+      return {
+        id: entry.id ?? "",
+        serverName: entry.serverName ?? "",
+        transport: entry.transport ?? "stdio",
+        disabled: entry.disabled === true,
+        command: entry.command ?? "",
+        args: Array.isArray(entry.args) ? entry.args.join("\n") : "",
+        env: Object.entries(entry.env ?? {}).map(([k, v]) => `${k}=${v}`).join("\n"),
+        cwd: entry.cwd ?? "",
+        url: entry.url ?? "",
+        headers: Object.entries(entry.headers ?? {}).map(([k, v]) => `${k}=${v}`).join("\n"),
+        toolCallTimeoutMs: entry.toolCallTimeoutMs != null ? String(entry.toolCallTimeoutMs) : "",
+        failOnStartupError: entry.failOnStartupError === true,
+        reconnect: entry.reconnect !== false,
+      };
+    }
+
+    function Switch({ checked, onChange, label, disabled }) {
+      return React.createElement("label", { className: "mcpui-switch" },
+        React.createElement("input", {
+          type: "checkbox", checked: !!checked, disabled: !!disabled,
+          onChange: (e) => onChange(e.target.checked),
+        }),
+        label,
+      );
+    }
+
+    function Field({ label, hint, error, wide, children }) {
+      return React.createElement("div", { className: "mcpui-field" + (wide ? " mcpui-field-wide" : "") },
+        React.createElement("span", { className: "mcpui-label" }, label),
+        children,
+        hint ? React.createElement("span", { className: "mcpui-hint" }, hint) : null,
+        error ? React.createElement("span", { className: "mcpui-field-error" }, error) : null,
+      );
+    }
+
+    function ServerCard({ entry, onEdit, onDelete, onToggle, busy }) {
+      return React.createElement("div", { className: "mcpui-card" + (entry.disabled ? " mcpui-card-off" : "") },
+        React.createElement("div", { className: "mcpui-card-head" },
+          React.createElement("div", { className: "mcpui-card-title" },
+            React.createElement("span", { className: "mcpui-name" }, entry.serverName),
+            React.createElement("span", { className: "mcpui-chip mcpui-chip-transport" },
+              entry.transport === "stdio" ? "stdio" : "http"),
+            React.createElement("span", { className: "mcpui-chip" + (entry.disabled ? "" : " mcpui-chip-on") },
+              entry.disabled ? "已禁用" : "已启用"),
+          ),
+          React.createElement("div", { className: "mcpui-actions" },
+            React.createElement(Switch, {
+              checked: !entry.disabled, disabled: busy,
+              onChange: (on) => onToggle(entry, on), label: "",
+            }),
+            React.createElement("button", { className: "mcpui-btn", disabled: busy, onClick: () => onEdit(entry) }, "编辑"),
+            React.createElement("button", { className: "mcpui-btn mcpui-btn-danger", disabled: busy, onClick: () => onDelete(entry) }, "删除"),
+          ),
+        ),
+        React.createElement("div", { className: "mcpui-summary" }, entry.summary ?? ""),
+        React.createElement("div", { className: "mcpui-rowid" }, `patch 行 id: ${entry.id}`),
+      );
+    }
+
+    function ServerForm({ initial, originalId, errors, saving, onSave, onCancel }) {
+      const [form, setForm] = useState(initial);
+      const set = (patch) => setForm((f) => ({ ...f, ...patch }));
+      const input = (key, props) => React.createElement("input", Object.assign({
+        className: "mcpui-input", value: form[key] ?? "",
+        onChange: (e) => set({ [key]: e.target.value }),
+      }, props));
+      const textarea = (key, rows) => React.createElement("textarea", {
+        className: "mcpui-textarea", rows: rows ?? 3, value: form[key] ?? "",
+        onChange: (e) => set({ [key]: e.target.value }),
+      });
+      const isStdio = form.transport === "stdio";
+      return React.createElement("div", { className: "mcpui-form" },
+        React.createElement("div", { className: "mcpui-form-title" }, originalId ? `编辑服务器「${originalId}」` : "添加 MCP 服务器"),
+        React.createElement("div", { className: "mcpui-fields" },
+          Field({ label: "serverName", error: errors.serverName, hint: "工具将命名为 mcp__<serverName>__<工具名>；字母数字_-，1-32 位" },
+            input("serverName", { placeholder: "例如 filesystem" })),
+          Field({ label: "传输方式" },
+            React.createElement("select", {
+              className: "mcpui-select", value: form.transport,
+              onChange: (e) => set({ transport: e.target.value }),
+            }, TRANSPORTS.map((t) => React.createElement("option", { key: t.value, value: t.value }, t.label)))),
+          isStdio
+            ? Field({ label: "command", error: errors.command, hint: "可执行文件，如 npx / uvx / node" }, input("command", { placeholder: "npx" }))
+            : Field({ label: "url", error: errors.url, hint: "http(s):// 开头的 MCP 端点" }, input("url", { placeholder: "https://example.com/mcp" })),
+          isStdio
+            ? Field({ label: "args（每行一个参数）", wide: true }, textarea("args", 3))
+            : Field({ label: "headers（每行 KEY=VALUE）", wide: true, error: errors.headers, hint: "认证头写在这里，例如 Authorization=Bearer xxx" }, textarea("headers", 3)),
+          isStdio
+            ? Field({ label: "env（每行 KEY=VALUE）", wide: true, error: errors.env, hint: "传给子进程的环境变量，例如 API_KEY=xxx" }, textarea("env", 3))
+            : null,
+          isStdio
+            ? Field({ label: "cwd（可选工作目录）" }, input("cwd", { placeholder: "留空则使用默认目录" }))
+            : null,
+          Field({ label: "toolCallTimeoutMs（可选）", error: errors.toolCallTimeoutMs, hint: "单次工具调用超时，默认 60000" },
+            input("toolCallTimeoutMs", { placeholder: "60000", inputMode: "numeric" })),
+          Field({ label: "行 id（可选，留空自动生成）", error: errors.id },
+            input("id", { placeholder: "mcp-<serverName>" })),
+        ),
+        React.createElement("div", { className: "mcpui-actions" },
+          Switch({ checked: !form.disabled, onChange: (on) => set({ disabled: !on }), label: "启用" }),
+          Switch({ checked: form.reconnect, onChange: (on) => set({ reconnect: on }), label: "断线自动重连" }),
+          Switch({ checked: form.failOnStartupError, onChange: (on) => set({ failOnStartupError: on }), label: "启动失败即报错（默认容忍）" }),
+        ),
+        React.createElement("div", { className: "mcpui-form-actions" },
+          React.createElement("button", { className: "mcpui-btn", onClick: onCancel, disabled: saving }, "取消"),
+          React.createElement("button", {
+            className: "mcpui-btn mcpui-btn-primary", disabled: saving,
+            onClick: () => onSave({ ...form, ...(isStdio ? { url: "", headers: "" } : { command: "", args: "", env: "", cwd: "" }) }),
+          }, saving ? "保存中…" : "保存"),
+        ),
+      );
+    }
+
+    function McpUiPage({ call }) {
+      const [state, setState] = useState({ loading: true, error: "", data: null });
+      const [form, setForm] = useState(null); // { form, originalId } | null
+      const [errors, setErrors] = useState({});
+      const [saving, setSaving] = useState(false);
+      const [busy, setBusy] = useState(false);
+      const [toast, setToast] = useState(null);
+
+      const refresh = useCallback(async () => {
+        try {
+          const data = await call("list");
+          setState({ loading: false, error: "", data });
+        } catch (error) {
+          setState((s) => ({ loading: false, error: error.message ?? String(error), data: s.data }));
+        }
+      }, [call]);
+      useEffect(() => { void refresh(); }, [refresh]);
+
+      const notify = (kind, text) => setToast({ kind, text });
+      useEffect(() => {
+        if (!toast) return;
+        const t = setTimeout(() => setToast(null), 4000);
+        return () => clearTimeout(t);
+      }, [toast]);
+
+      const guard = async (fn) => {
+        try { await fn(); return true; }
+        catch (error) {
+          setErrors(error.details ?? {});
+          notify("err", error.message ?? String(error));
+          return false;
+        }
+      };
+
+      const onSave = async (formValues) => {
+        setSaving(true); setErrors({});
+        const changed = await guard(async () => {
+          await call("save", { entry: formValues, originalId: form?.originalId ?? "" });
+        });
+        setSaving(false);
+        if (!changed) return;
+        setForm(null);
+        notify("ok", "已写入 patch 文件；patchReload: live 下数秒内热生效");
+        void refresh();
+      };
+      const onDelete = (entry) => {
+        if (!window.confirm(`删除 MCP 服务器「${entry.serverName}」（patch 行 ${entry.id}）？`)) return;
+        setBusy(true);
+        guard(async () => { await call("remove", { serverId: entry.id }); })
+          .then((changed) => { if (changed) notify("ok", "已删除"); void refresh(); })
+          .finally(() => setBusy(false));
+      };
+      const onToggle = (entry, on) => {
+        setBusy(true);
+        guard(async () => { await call("toggle", { serverId: entry.id, enabled: on }); })
+          .then(() => { notify("ok", on ? "已启用" : "已禁用"); void refresh(); })
+          .finally(() => setBusy(false));
+      };
+      const onEdit = (entry) => {
+        setErrors({});
+        setForm({ form: entryToForm(entry), originalId: entry.id });
+      };
+
+      const data = state.data;
+      const startNew = () => { setErrors({}); setForm({ form: { ...EMPTY_FORM }, originalId: "" }); };
+
+      return React.createElement("div", { className: "mcpui" },
+        React.createElement("style", null, CSS),
+        toast ? React.createElement("div", { className: "mcpui-toast mcpui-toast-" + toast.kind }, toast.text) : null,
+        React.createElement("div", { className: "mcpui-head" },
+          React.createElement("div", { className: "mcpui-title" }, "MCP 服务器"),
+          React.createElement("div", { className: "mcpui-sub" },
+            "这里的增删改会写入 profile 的 cordis.patch.yml 标记块（块外内容原样保留），由 @deepseek-ai/dsh-mcp-client 逐行挂载。",
+            "profile 开启 patchReload: live 时保存后数秒热生效；否则重启 dsh 后生效。"),
+          data?.path ? React.createElement("div", { className: "mcpui-path" }, `管理文件：${data.path}`) : null,
+        ),
+        React.createElement("div", { className: "mcpui-warn" },
+          "注意：stdio 服务器若启动缓慢或挂起，可能短暂阻塞工具注册；「启动失败即报错」保持关闭可避免拖垮启动。密码/Token 会以明文保存在 patch 文件中，请留意 git 提交范围。"),
+        form
+          ? React.createElement(ServerForm, {
+              key: form.originalId || "__new__",
+              initial: form.form, originalId: form.originalId, errors, saving,
+              onSave, onCancel: () => { setForm(null); setErrors({}); },
+            })
+          : null,
+        state.loading && !data
+          ? React.createElement("div", { className: "mcpui-state" }, "加载中…")
+          : null,
+        state.error
+          ? React.createElement("div", { className: "mcpui-state mcpui-error" }, `读取失败：${state.error}`)
+          : null,
+        data
+          ? React.createElement(React.Fragment, null,
+              React.createElement("div", { className: "mcpui-list" },
+                data.entries.length === 0 && !form
+                  ? React.createElement("div", { className: "mcpui-state" }, "暂无由本页管理的 MCP 服务器。")
+                  : null,
+                data.entries.map((entry) => React.createElement(ServerCard, {
+                  key: entry.id, entry, busy, onEdit, onDelete, onToggle,
+                }))),
+              data.external.length > 0
+                ? React.createElement("div", { className: "mcpui-ext" },
+                    React.createElement("div", { className: "mcpui-ext-title" }, "patch 中其它来源的 mcp-client 行（只读，本页不编辑）"),
+                    data.external.map((row) => React.createElement("div", {
+                      key: row.id, className: "mcpui-ext-item",
+                    }, `${row.id} · ${row.serverName || "?"} · ${row.target || ""}`)))
+                : null,
+              !form
+                ? React.createElement("div", { className: "mcpui-actions" },
+                    React.createElement("button", { className: "mcpui-btn mcpui-btn-primary", onClick: startNew }, "添加 MCP 服务器"),
+                    React.createElement("button", { className: "mcpui-btn", onClick: () => void refresh() }, "刷新"))
+                : null)
+          : null,
+      );
+    }
+
+    const inject = ["slots", "connection"];
+
+    function apply(ctx) {
+      // 走官方 typert 网关：/api/mcpUi/<method>，payload 形如 { args: {...} }，
+      // 服务端是 dsh-plugin-mcp-ui 的 TypertRemoteService（SRC marker 发现）。
+      const call = async (method, args) => {
+        const response = await ctx.connection.rpc.call("/api", `mcpUi/${method}`, { args: args ?? {} });
+        if (!response.ok) {
+          const error = new Error(response.error?.message ?? "请求失败");
+          error.details = response.error?.details ?? {};
+          throw error;
+        }
+        return response.value;
+      };
+
+      ctx.slots.inject("settings.section", () => ctx.slots.register(
+        { name: "settings.section", id: "mcp-ui", order: 12, label: () => "MCP 服务器" },
+        () => React.createElement(McpUiPage, { call }),
+      ));
+    }
+
+    exports.apply = apply;
+    exports.inject = inject;
+    return module.exports;
+  },
+});

package/cordis.patch.yml

@@ -0,0 +1,5 @@
+# dsh-plugin-mcp-ui 自 wiring（dsh.bundle.patch 机制）：安装即注册，
+# 无需在 profile 的 cordis.patch.yml 手动 insert。
+- insert:
+    - id: mcp-ui
+      name: dsh-plugin-mcp-ui

package/index.js

@@ -0,0 +1,479 @@
+import { existsSync, readFileSync, writeFileSync, renameSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import z from '@deepseek-ai/schemastery'
+import { TypertRemoteService, RemoteError } from '@deepseek-ai/dsh-typert-protocol'
+
+export const name = 'dsh-plugin-mcp-ui'
+
+export const Config = z.object({
+  // 被管理的 profile patch 文件。缺省时自动定位（见 resolvePatchPath）：
+  // 1) 运行时锚点 ctx.baseUrl = profile 目录（dsh 每个顶层条目都挂在这棵
+  //    include 树上，link: 开发安装也准）；
+  // 2) 回退到安装位置 <profileDir>/node_modules/dsh-plugin-mcp-ui/（registry 安装）。
+  // 两者都拿不到时才需要显式配置（覆盖行，勿重复 insert）。
+  patchPath: z.string(),
+})
+
+const BEGIN = '# >>> dsh-plugin-mcp-ui managed (edits inside this block are owned by the settings UI) >>>'
+const END = '# <<< dsh-plugin-mcp-ui managed <<<'
+// profile 根配置文件名（dsh 的 include 锚点文件）与 patch 文件名。
+const PROFILE_ROOT_FILENAME = 'cordis.yml'
+const PROFILE_PATCH_FILENAME = 'cordis.patch.yml'
+const MCP_ROW_NAME = '@deepseek-ai/dsh-mcp-client'
+const SERVER_NAME_RE = /^[A-Za-z0-9_-]{1,32}$/
+const ROW_ID_RE = /^[a-z0-9][a-z0-9_-]{0,63}$/
+const URL_RE = /^https?:\/\/\S+$/
+// Remote 方法标记的原型属性名（@Remote() 装饰器的运行时等价物，见
+// dsh-typert-protocol 的 addMarkerInitializer/mark）。
+const REMOTE_METHODS_KEY = '@deepseek-ai/dsh-typert-protocol/remote-methods'
+
+// ---- entry <-> YAML -------------------------------------------------------
+// 块内容是本插件生成的确定性 YAML 子集：双引号标量（JSON 字符串是合法 YAML
+// 双引号标量）、固定缩进。解析只针对自己写出的形状，永不解析用户区域。
+
+function q(value) {
+  return JSON.stringify(String(value))
+}
+
+function parseScalar(raw) {
+  const text = raw.trim()
+  if (text.startsWith('"')) return JSON.parse(text)
+  if (text === 'true') return true
+  if (text === 'false') return false
+  if (text !== '' && !Number.isNaN(Number(text))) return Number(text)
+  return text
+}
+
+function emitBlock(entries) {
+  const lines = [BEGIN]
+  if (entries.length > 0) {
+    lines.push('- insert:')
+    for (const entry of entries) {
+      lines.push(`    - id: ${entry.id}`)
+      lines.push(`      name: '${MCP_ROW_NAME}'`)
+      if (entry.disabled === true) lines.push('      disabled: true')
+      lines.push('      config:')
+      lines.push(`        transport: ${entry.transport}`)
+      lines.push(`        serverName: ${q(entry.serverName)}`)
+      if (entry.transport === 'stdio') {
+        lines.push(`        command: ${q(entry.command)}`)
+        if (Array.isArray(entry.args) && entry.args.length > 0) {
+          lines.push('        args:')
+          for (const arg of entry.args) lines.push(`          - ${q(arg)}`)
+        }
+        if (entry.env && Object.keys(entry.env).length > 0) {
+          lines.push('        env:')
+          for (const [key, value] of Object.entries(entry.env)) lines.push(`          ${q(key)}: ${q(value)}`)
+        }
+        if (typeof entry.cwd === 'string' && entry.cwd !== '') lines.push(`        cwd: ${q(entry.cwd)}`)
+      } else {
+        lines.push(`        url: ${q(entry.url)}`)
+        if (entry.headers && Object.keys(entry.headers).length > 0) {
+          lines.push('        headers:')
+          for (const [key, value] of Object.entries(entry.headers)) lines.push(`          ${q(key)}: ${q(value)}`)
+        }
+      }
+      if (Number.isInteger(entry.toolCallTimeoutMs) && entry.toolCallTimeoutMs > 0) {
+        lines.push(`        toolCallTimeoutMs: ${entry.toolCallTimeoutMs}`)
+      }
+      if (entry.failOnStartupError === true) lines.push('        failOnStartupError: true')
+      if (entry.reconnect === false) {
+        lines.push('        reconnect:')
+        lines.push('          enabled: false')
+      }
+    }
+  }
+  lines.push(END)
+  return lines.join('\n')
+}
+
+function parseBlock(body) {
+  const entries = []
+  let current = null
+  let mode = null // 'args' | 'env' | 'headers' | null
+  for (const raw of body.split(/\r?\n/)) {
+    if (raw.trim() === '') continue
+    if (/^- insert:\s*$/.test(raw)) { mode = null; continue }
+    const row = raw.match(/^ {4}- id: (\S+)\s*$/)
+    if (row) {
+      current = { id: row[1], disabled: false }
+      entries.push(current)
+      mode = null
+      continue
+    }
+    if (!current) continue
+    const rowKey = raw.match(/^ {6}(\S+): ?(.*)$/)
+    if (rowKey) {
+      if (rowKey[1] === 'disabled') current.disabled = parseScalar(rowKey[2]) === true
+      mode = null
+      continue
+    }
+    const cfgKey = raw.match(/^ {8}([A-Za-z][\w]*): ?(.*)$/)
+    if (cfgKey) {
+      const [, key, value] = cfgKey
+      if (value === '') {
+        if (key === 'args' || key === 'env' || key === 'headers') {
+          current[key] = key === 'args' ? [] : {}
+          mode = key
+        }
+      } else {
+        current[key] = parseScalar(value)
+        mode = null
+      }
+      continue
+    }
+    if (mode === 'args') {
+      const item = raw.match(/^ {10}- (.+)$/)
+      if (item) { current.args.push(parseScalar(item[1])); continue }
+    } else if (mode === 'env' || mode === 'headers') {
+      const item = raw.match(/^ {10}"?([^":"]+)"?: (.+)$/)
+      if (item) { current[mode][parseScalar(item[1])] = parseScalar(item[2]); continue }
+    }
+    mode = null
+  }
+  return entries
+}
+
+function splitFile(text) {
+  const begin = text.indexOf(BEGIN)
+  const end = text.indexOf(END)
+  if (begin === -1 || end === -1 || end < begin) {
+    return { head: pruneEmptyFlow(text.replace(/\s*$/, '')), managed: [], tail: '' }
+  }
+  const head = pruneEmptyFlow(text.slice(0, begin).replace(/\s*$/, ''))
+  const body = text.slice(begin + BEGIN.length, end)
+  const tail = pruneEmptyFlow(text.slice(end + END.length).replace(/^\s*\n?/, '').replace(/\s*$/, ''))
+  return { head, managed: parseBlock(body), tail }
+}
+
+// dsh 的 profile patch 模板自带一行空流数组 `[]`（仅此一行才有意义）。
+// 管理块是块序列，若与 `[]` 并存会构成两个 YAML 文档节点 → 文件非法。
+// 拼接前剔除这种独立成行的 `[]`；任何其他内容一律逐字保留。
+function pruneEmptyFlow(text) {
+  if (!/^\[\s*\]$/m.test(text)) return text
+  return text
+    .split('\n')
+    .filter((line) => !/^\[\s*\]$/.test(line.trimEnd()))
+    .join('\n')
+    .replace(/\s*$/, '')
+}
+
+// 是否含真实的 YAML 数组内容（非注释、非空行）。
+function hasArrayContent(text) {
+  return text.split('\n').some((line) => {
+    const t = line.trim()
+    return t !== '' && !t.startsWith('#')
+  })
+}
+
+function joinFile({ head, entries, tail }) {
+  const parts = []
+  if (head !== '') parts.push(head)
+  parts.push(emitBlock(entries))
+  if (tail !== '') parts.push(tail)
+  let out = `${parts.join('\n')}\n`
+  // 全文件（head + 标记块 + tail）若只剩注释，YAML 解析为 null，
+  // dsh 会拒绝整个 profile patch。补一行 `[]` 保证顶层是合法空数组。
+  if (entries.length === 0 && !hasArrayContent(head) && !hasArrayContent(tail)) {
+    out = `${out}[]\n`
+  }
+  return out
+}
+
+// 只读扫描标记块之外的 mcp-client 行（用户手写 / 其它 patch 带来的），
+// 仅供展示，UI 不编辑它们。
+function scanExternal(text, managedIds) {
+  const begin = text.indexOf(BEGIN)
+  const end = text.indexOf(END)
+  const outside =
+    begin === -1 || end === -1 || end < begin
+      ? text
+      : text.slice(0, begin) + '\n' + text.slice(end + END.length)
+  const external = []
+  const lines = outside.split(/\r?\n/)
+  let holder = null
+  const flush = () => {
+    if (holder && holder.name === MCP_ROW_NAME && holder.serverName !== '' && !managedIds.has(holder.id)) {
+      external.push({ id: holder.id, serverName: holder.serverName, target: holder.target })
+    }
+    holder = null
+  }
+  for (const line of lines) {
+    const id = line.match(/^\s*-? ?id: '?([\w-]+)'?\s*$/)
+    if (id) {
+      flush()
+      holder = { id: id[1], name: '', serverName: '', target: '' }
+      continue
+    }
+    if (!holder) continue
+    if (/name: '?@deepseek-ai\/dsh-mcp-client'?/.test(line)) holder.name = MCP_ROW_NAME
+    const serverName = line.match(/^\s*serverName: "?([^"\s]+)"?\s*$/)
+    if (serverName && holder.name === MCP_ROW_NAME && holder.serverName === '') holder.serverName = serverName[1]
+    const target = line.match(/^\s*(command|url): "?([^"\s]+)"?\s*$/)
+    if (target && holder.name === MCP_ROW_NAME && holder.target === '') holder.target = target[2]
+  }
+  flush()
+  return external
+}
+
+// ---- 校验 / 规范化 ---------------------------------------------------------
+
+function parseKV(input) {
+  if (input && typeof input === 'object' && !Array.isArray(input)) {
+    const direct = {}
+    for (const [key, value] of Object.entries(input)) direct[String(key)] = String(value ?? '')
+    return direct
+  }
+  const out = {}
+  for (const line of String(input ?? '').split(/\r?\n/)) {
+    const trimmed = line.trim()
+    if (trimmed === '') continue
+    const eq = trimmed.indexOf('=')
+    if (eq <= 0) throw new Error(`无法解析 "${line}"：应为 KEY=VALUE 每行一条`)
+    out[trimmed.slice(0, eq).trim()] = trimmed.slice(eq + 1).trim()
+  }
+  return out
+}
+
+function normalizeEntry(input, existing) {
+  const errors = {}
+  const serverName = String(input.serverName ?? '').trim()
+  if (!SERVER_NAME_RE.test(serverName)) {
+    errors.serverName = 'serverName 只允许字母、数字、下划线、连字符，长度 1-32（与 dsh-mcp-client 约束一致）'
+  }
+  const transport = input.transport === 'streamable-http' ? 'streamable-http' : 'stdio'
+  const entry = {
+    id: String(input.id ?? '').trim() || `mcp-${serverName}`.toLowerCase(),
+    serverName,
+    transport,
+    disabled: input.disabled === true,
+  }
+  if (!ROW_ID_RE.test(entry.id)) errors.id = '行 id 需匹配 ^[a-z0-9][a-z0-9_-]{0,63}$'
+  if (transport === 'stdio') {
+    entry.command = String(input.command ?? '').trim()
+    if (entry.command === '') errors.command = 'stdio 传输必须填写 command'
+    const argsText = Array.isArray(input.args) ? input.args.join('\n') : String(input.args ?? '')
+    entry.args = argsText.split(/\r?\n/).map((line) => line.trimEnd()).filter((line) => line.trim() !== '')
+    try {
+      entry.env = parseKV(input.env)
+    } catch (error) {
+      errors.env = error.message
+    }
+    entry.cwd = String(input.cwd ?? '').trim()
+  } else {
+    entry.url = String(input.url ?? '').trim()
+    if (!URL_RE.test(entry.url)) errors.url = 'streamable-http 传输必须填写 http(s):// 开头的 url'
+    try {
+      entry.headers = parseKV(input.headers)
+    } catch (error) {
+      errors.headers = error.message
+    }
+  }
+  if (input.toolCallTimeoutMs !== undefined && input.toolCallTimeoutMs !== null && input.toolCallTimeoutMs !== '') {
+    const timeout = Number(input.toolCallTimeoutMs)
+    if (!Number.isInteger(timeout) || timeout <= 0) errors.toolCallTimeoutMs = '超时须为正整数（毫秒）'
+    else entry.toolCallTimeoutMs = timeout
+  }
+  entry.failOnStartupError = input.failOnStartupError === true
+  entry.reconnect = input.reconnect === false ? false : true
+
+  if (Object.keys(errors).length > 0) {
+    const error = new Error('表单校验未通过')
+    error.details = errors
+    throw error
+  }
+  const clash = existing.find((e) => e.serverName === serverName && e.id !== input.__keepId)
+  if (clash) {
+    const error = new Error(`serverName "${serverName}" 已被行 "${clash.id}" 占用（同一注册范围内必须唯一）`)
+    error.details = { serverName: error.message }
+    throw error
+  }
+  const idTaken = existing.some((e) => e.id === entry.id && e.id !== input.__keepId)
+  if (idTaken) {
+    const error = new Error(`patch 行 id "${entry.id}" 已存在，请换一个或先删除旧行`)
+    error.details = { id: error.message }
+    throw error
+  }
+  return entry
+}
+
+function summarize(entry) {
+  if (entry.transport === 'stdio') {
+    return [entry.command, ...(entry.args ?? [])].join(' ')
+  }
+  return entry.url ?? ''
+}
+
+function invalidError(error) {
+  if (error instanceof RemoteError) return error
+  const remote = new RemoteError('mcp-ui/invalid', error?.message ?? String(error), error?.details ?? {})
+  return remote
+}
+
+// ---- patch 文件读写 --------------------------------------------------------
+
+function resolvePatchPath(ctx, config) {
+  if (typeof config?.patchPath === 'string' && config.patchPath !== '') {
+    return path.isAbsolute(config.patchPath) ? config.patchPath : path.resolve(process.cwd(), config.patchPath)
+  }
+  const anchored = profileDirFromContext(ctx)
+  if (anchored !== '') return path.join(anchored, PROFILE_PATCH_FILENAME)
+  const here = fileURLToPath(import.meta.url)
+  // 回退：仅当本包物理位于 <profileDir>/node_modules/<pkg>/ 下时才按安装位置
+  // 推导；link:/junction 开发安装的 realpath 在仓库里，这里一定推不出来，
+  // 所以上面的运行时锚点才是主路径。
+  const pkgDir = path.dirname(here)
+  const nodeModulesDir = path.dirname(pkgDir)
+  const profileDir = path.dirname(nodeModulesDir)
+  if (
+    path.basename(pkgDir) === 'dsh-plugin-mcp-ui' &&
+    path.basename(nodeModulesDir) === 'node_modules' &&
+    existsSync(path.join(profileDir, 'node_modules')) // pnpm .pnpm 内层 node_modules 也在此被排除
+  ) {
+    return path.join(profileDir, PROFILE_PATCH_FILENAME)
+  }
+  throw new Error(
+    'tofu-mcp-ui: 无法定位 profile 的 cordis.patch.yml：既没有从 ctx.baseUrl 拿到 ' +
+    'profile 目录（宿主未给出 include 锚点），也不是 node_modules 常规安装（开发安装/link 场景）。' +
+    '请在 patch 行上用覆盖行配置 config.patchPath，例如 ' +
+    "{ id: 'mcp-ui', name: 'dsh-plugin-mcp-ui', config: { patchPath: 'C:/Users/you/.dsh/profiles/web/cordis.patch.yml' } }",
+  )
+}
+
+// 只有真正的 profile 目录才认：cordis.yml 存在 + manifest 带 dsh.profile。
+// 既校验锚点合法，也防止锚点意外退化成别处时把 MCP 行写进错误的文件。
+function isProfileDir(dir) {
+  if (typeof dir !== 'string' || dir === '') return false
+  if (!existsSync(path.join(dir, PROFILE_ROOT_FILENAME))) return false
+  try {
+    const manifest = JSON.parse(readFileSync(path.join(dir, 'package.json'), 'utf8'))
+    return Boolean(manifest && typeof manifest === 'object' && manifest.dsh?.profile)
+  } catch {
+    return false
+  }
+}
+
+// dsh 把「bundle 层 + profile 的 cordis.patch.yml + home 层 + --patch 覆盖层」
+// 全部当作同一个 include（<profileDir>/cordis.yml）的 patch 传入，于是每个顶层
+// 条目的 ctx.baseUrl 就是 profile 目录的 file URL；插件 ctx 继承同一个 baseUrl。
+// 这是 link: 开发安装下唯一可靠的锚点（安装位置推导会指向仓库）。
+function profileDirFromContext(ctx) {
+  const baseUrl = ctx?.baseUrl
+  if (typeof baseUrl !== 'string' || baseUrl === '') return ''
+  try {
+    const url = new URL(baseUrl)
+    if (url.protocol !== 'file:') return ''
+    const dir = fileURLToPath(url)
+    return isProfileDir(dir) ? dir : ''
+  } catch {
+    return ''
+  }
+}
+
+function readState(patchPath) {
+  const text = existsSync(patchPath) ? readFileSync(patchPath, 'utf8') : ''
+  const { head, managed, tail } = splitFile(text)
+  return { head, entries: managed, tail, external: scanExternal(text, new Set(managed.map((e) => e.id))) }
+}
+
+// 内容未变则不写盘（避免 patchReload: live 下的空转热重载）。
+function writeEntries(patchPath, state, entries) {
+  const next = joinFile({ head: state.head, entries, tail: state.tail })
+  const current = existsSync(patchPath) ? readFileSync(patchPath, 'utf8') : ''
+  if (next === current) return false
+  const tmp = `${patchPath}.mcp-ui.tmp`
+  writeFileSync(tmp, next, 'utf8')
+  renameSync(tmp, patchPath)
+  return true
+}
+
+// ---- Remote 服务 ------------------------------------------------------------
+// 浏览器经官方 typert 网关调用 `/api/mcpUi/<method>`（api-gateway 的 SRC
+// marker 发现路径），认证、路由、错误编码全部复用官方设施；本插件不再
+// 自建通道。方法返回值必须是 JSON-safe 普通对象；失败抛 RemoteError。
+// 注意：网关按函数源码解析参数名，签名必须是唯一标识符、无解构/默认值/rest，
+// 且避免与 typert lookup 参数（如 id）重名。
+
+class McpUiService extends TypertRemoteService {
+  constructor(ctx, patchPath) {
+    super(ctx, 'mcpUi')
+    this.__patchPath = patchPath
+  }
+
+  list() {
+    const state = readState(this.__patchPath)
+    return {
+      path: this.__patchPath,
+      exists: existsSync(this.__patchPath),
+      entries: state.entries.map((e) => ({ ...e, summary: summarize(e) })),
+      external: state.external,
+    }
+  }
+
+  save(entry, originalId) {
+    try {
+      const state = readState(this.__patchPath)
+      const keepId = typeof originalId === 'string' ? originalId : ''
+      if (keepId !== '' && !state.entries.some((e) => e.id === keepId)) {
+        throw new Error(`要编辑的行 "${keepId}" 已不存在，请刷新列表`)
+      }
+      const rest = state.entries.filter((e) => e.id !== (keepId || entry?.id))
+      const normalized = normalizeEntry({ ...entry, __keepId: keepId }, state.entries)
+      const index = keepId === '' ? rest.length : state.entries.findIndex((e) => e.id === keepId)
+      const merged = [...rest]
+      merged.splice(Math.max(0, Math.min(index, merged.length)), 0, normalized)
+      const changed = writeEntries(this.__patchPath, state, merged)
+      return { changed, entry: { ...normalized, summary: summarize(normalized) } }
+    } catch (error) {
+      throw invalidError(error)
+    }
+  }
+
+  remove(serverId) {
+    try {
+      const state = readState(this.__patchPath)
+      const id = String(serverId ?? '')
+      if (!state.entries.some((e) => e.id === id)) throw new Error(`行 "${id}" 不存在，请刷新列表`)
+      const changed = writeEntries(this.__patchPath, state, state.entries.filter((e) => e.id !== id))
+      return { changed }
+    } catch (error) {
+      throw invalidError(error)
+    }
+  }
+
+  toggle(serverId, enabled) {
+    try {
+      const state = readState(this.__patchPath)
+      const id = String(serverId ?? '')
+      const index = state.entries.findIndex((e) => e.id === id)
+      if (index === -1) throw new Error(`行 "${id}" 不存在，请刷新列表`)
+      const entries = [...state.entries]
+      entries[index] = { ...entries[index], disabled: enabled === false }
+      const changed = writeEntries(this.__patchPath, state, entries)
+      return { changed, entry: entries[index] }
+    } catch (error) {
+      throw invalidError(error)
+    }
+  }
+}
+
+// 等价于对四个方法各写一个 @Remote()：在原型上登记 version-1 方法标记。
+Object.defineProperty(McpUiService.prototype, REMOTE_METHODS_KEY, {
+  configurable: true,
+  value: Object.freeze({
+    version: 1,
+    methods: Object.freeze(
+      ['list', 'save', 'remove', 'toggle'].map((method) =>
+        Object.freeze({ method, invocation: Object.freeze({ kind: 'direct' }) })),
+    ),
+  }),
+})
+
+function apply(ctx, config) {
+  const patchPath = resolvePatchPath(ctx, config)
+  new McpUiService(ctx, patchPath)
+  ctx.logger.info(`tofu-mcp-ui: managing MCP servers in ${patchPath}`)
+}
+
+export { apply }

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "dsh-plugin-mcp-ui",
+  "version": "1.0.2",
+  "license": "MIT",
+  "keywords": ["dsh-plugin", "deepseek-harness", "dsh", "mcp", "settings", "ui"],
+  "publishConfig": { "registry": "https://registry.npmjs.org" },
+  "repository": { "type": "git", "url": "git+https://github.com/tofu-zyc/dsh-plugin-tofu-box.git", "directory": "dsh-plugin-mcp-ui" },
+  "bugs": { "url": "https://github.com/tofu-zyc/dsh-plugin-tofu-box/issues" },
+  "homepage": "https://github.com/tofu-zyc/dsh-plugin-tofu-box/tree/main/dsh-plugin-mcp-ui",
+  "description": "在 Web 设置页管理 MCP 服务器：增删改查 stdio / streamable-http server，写入 profile patch 标记块并热生效。",
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/dsh-typert-protocol": "^0.1.6-alpha.1",
+    "@deepseek-ai/schemastery": "^3.18.2"
+  },
+  "peerDependenciesMeta": {
+    "@deepseek-ai/dsh-typert-protocol": { "optional": true },
+    "@deepseek-ai/schemastery": { "optional": true }
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-ui-settings"
+      ]
+    }
+  },
+  "files": [
+    "client.js",
+    "index.js",
+    "cordis.patch.yml",
+    "README.md"
+  ]
+}