dsh-mcp 1.0.0 → 1.2.0

package/lib/oauth.js

@@ -0,0 +1,155 @@
+/**
+ * OAuth 2.0 (authorization-code + PKCE) client provider for MCP servers,
+ * implemented for the dsh-mcp host half.
+ *
+ * The MCP SDK drives the flow (metadata discovery, dynamic client registration,
+ * PKCE, token refresh) and only asks this provider to: persist tokens, and
+ * redirect the user agent to the authorization URL. This provider opens the
+ * system browser, hosts a loopback callback server, exchanges the returned
+ * code for tokens via the SDK, and stores them in the credentials document
+ * (per server id), so reconnects reuse the tokens and the SDK refreshes them
+ * transparently.
+ */
+
+import { createServer } from "node:http";
+import { spawn } from "node:child_process";
+import {
+  discoverAuthorizationServerMetadata,
+  exchangeAuthorization,
+} from "@modelcontextprotocol/sdk/client/auth.js";
+import { credentialRef } from "@deepseek-ai/dsh-credentials";
+
+/** Credential reference namespace prefix for per-server OAuth tokens. */
+const OAUTH_REF_PREFIX = "DSH_MCP_OAUTH_";
+
+/** Short stable hash so sanitized server ids cannot collide. */
+function shortHash(value) {
+  let hash = 0;
+  for (let i = 0; i < value.length; i += 1) {
+    hash = (hash * 31 + value.charCodeAt(i)) >>> 0;
+  }
+  return hash.toString(36);
+}
+
+/**
+ * One server's OAuth token credential reference.
+ *
+ * Credential ref names must match /^[A-Za-z_][A-Za-z0-9_]*$/, but managed
+ * server ids may contain hyphens, slashes, spaces, etc.; sanitize the id and
+ * append a short stable hash of the original so distinct ids cannot collide
+ * (e.g. "a-b" and "a_b").
+ */
+function oauthTokenRef(serverId) {
+  const safe = serverId.replace(/[^A-Za-z0-9_]/g, "_");
+  return credentialRef(`${OAUTH_REF_PREFIX}${safe}_${shortHash(serverId)}`);
+}
+
+/** Open the system browser to one URL, best effort. */
+function openBrowser(url) {
+  const command =
+    process.platform === "darwin" ? "open"
+    : process.platform === "win32" ? "start"
+    : "xdg-open";
+  const child = spawn(command, [url], { detached: true, stdio: "ignore" });
+  child.on("error", () => {});
+  child.unref();
+}
+
+/**
+ * Build one OAuthClientProvider for a managed server.
+ * @param serverId - Managed server id; keys the stored token.
+ * @param ctx - Host context carrying the credentials service.
+ * @returns an MCP SDK `OAuthClientProvider` implementation.
+ */
+export function createOAuthProvider(serverId, ctx) {
+  let codeVerifierValue = null;
+  let savedClientInfo = null;
+  const port = 3100 + Math.floor(Math.random() * 20000);
+  const redirectUrl = `http://127.0.0.1:${port}/callback`;
+  const log = ctx?.logger ?? console;
+  const tag = `mcp-oauth(${serverId})`;
+
+  return {
+    get redirectUrl() {
+      return redirectUrl;
+    },
+    clientMetadata: {
+      client_name: "dsh-mcp",
+      redirect_uris: [redirectUrl],
+    },
+    async clientInformation() {
+      return savedClientInfo;
+    },
+    async saveClientInformation(info) {
+      savedClientInfo = info;
+    },
+    async tokens() {
+      const hit = await ctx.credentials.resolve(oauthTokenRef(serverId));
+      if (hit === undefined) return undefined;
+      try {
+        return JSON.parse(hit.value);
+      } catch {
+        return undefined;
+      }
+    },
+    async saveTokens(tokens) {
+      await ctx.credentials.set(oauthTokenRef(serverId), JSON.stringify(tokens));
+    },
+    async clearTokens() {
+      await ctx.credentials.unset(oauthTokenRef(serverId));
+    },
+    async saveCodeVerifier(codeVerifier) {
+      codeVerifierValue = codeVerifier;
+    },
+    async codeVerifier() {
+      return codeVerifierValue;
+    },
+    async redirectToAuthorization(authorizationUrl) {
+      let resolveResult;
+      const resultPromise = new Promise((resolve) => {
+        resolveResult = resolve;
+      });
+      const server = createServer((req, res) => {
+        const url = new URL(req.url, redirectUrl);
+        const code = url.searchParams.get("code");
+        const error = url.searchParams.get("error");
+        res.setHeader("content-type", "text/html; charset=utf-8");
+        if (error) {
+          res.end(`授权失败：${error}，可关闭此页面并返回 DSH。`);
+          log.error(`${tag}: callback rejected: ${error}`);
+          resolveResult({ error });
+          return;
+        }
+        res.end("授权成功，可关闭此页面并返回 DSH。");
+        log.info(`${tag}: authorization callback received (code)`);
+        resolveResult({ code });
+      });
+      await new Promise((resolve) => server.listen(port, "127.0.0.1", resolve));
+      log.info(`${tag}: opening browser for authorization: ${authorizationUrl}`);
+      openBrowser(authorizationUrl.toString());
+      try {
+        const result = await resultPromise;
+        if (result.error) throw new Error(`OAuth 授权失败：${result.error}`);
+        const authServerUrl = new URL(authorizationUrl.origin);
+        log.info(`${tag}: discovering authorization server metadata at ${authServerUrl}`);
+        const metadata = await discoverAuthorizationServerMetadata(authServerUrl);
+        log.info(`${tag}: exchanging authorization code for tokens`);
+        const tokens = await exchangeAuthorization(authServerUrl, {
+          metadata,
+          clientInformation: savedClientInfo,
+          authorizationCode: result.code,
+          codeVerifier: codeVerifierValue,
+          redirectUri: redirectUrl,
+        });
+        await this.saveTokens(tokens);
+        log.info(`${tag}: tokens saved`);
+      } catch (error) {
+        log.error(`${tag}: OAuth exchange failed: ${error instanceof Error ? error.message : String(error)}`);
+        throw error;
+      } finally {
+        server.close();
+        log.info(`${tag}: callback server closed`);
+      }
+    },
+  };
+}

package/lib/probe.js

@@ -29,16 +29,33 @@ async function probeConnection(config, options = {}) {
   if (!Number.isFinite(timeoutMs) || timeoutMs <= 0) {
     throw new Error(`probeConnection: timeoutMs must be a positive finite number, received ${String(timeoutMs)}`);
   }
+  // OAuth authorization is interactive (browser login), so a probe with an
+  // auth provider gets a generous budget; plain servers connect or fail
+  // immediately and never wait out the budget. 5 minutes covers slow SSO
+  // login + approval screens; an exhausted budget reports a failure view and
+  // the loopback callback keeps running, so a late authorization still stores
+  // the tokens and the next probe succeeds.
+  const OAUTH_PROBE_BUDGET_MS = 5 * 60e3;
+  const budgetMs = options.authProvider === void 0 ? timeoutMs : Math.max(timeoutMs, OAUTH_PROBE_BUDGET_MS);
   const client = new Client(
     { name: "dsh-mcp-client", version: "0.0.1" },
-    { capabilities: {} }
+    {
+      capabilities: {},
+      ...(options.authProvider === void 0 ? {} : { authProvider: options.authProvider })
+    }
   );
   const timeout = new Promise((_, reject) => {
-    const timer = setTimeout(() => reject(new Error(`connection probe timed out after ${timeoutMs}ms`)), timeoutMs);
+    const timer = setTimeout(() => reject(new Error(`connection probe timed out after ${budgetMs}ms`)), budgetMs);
     timer.unref();
   });
   try {
-    return await Promise.race([runProbe(client, config), timeout]);
+    // The SDK performs OAuth in the transport layer, so the authProvider must
+    // reach the transport config (not only the Client options).
+    const transportConfig = {
+      ...config,
+      ...(options.authProvider === void 0 ? {} : { authProvider: options.authProvider })
+    };
+    return await Promise.race([runProbe(client, transportConfig), timeout]);
   } catch (error) {
     return { ok: false, message: probeErrorMessage(error) };
   } finally {

package/lib/transport.js

@@ -16,7 +16,10 @@ function createTransport(config) {
     case "streamable-http":
       return new StreamableHTTPClientTransport(
         new URL(config.url),
-        { requestInit: { headers: config.headers } }
+        {
+          requestInit: { headers: config.headers },
+          ...(config.authProvider === void 0 ? {} : { authProvider: config.authProvider })
+        }
       );
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-mcp",
-  "version": "1.0.0",
-  "description": "MCP server 管理插件（独立版）：托管 MCP 服务器注册表（持久化定义、运行时挂载、环境变量注入、连接探测）+ Web 设置管理页。由 deepseek-harness 仓库内的 mcp-manager / ui-settings-mcp / web-mcp 迁移合并而来。MCP server registry with WebUI management for DeepSeek Harness.",
+  "version": "1.2.0",
+  "description": "MCP 管理界面 + tool search：可视化配置/启停/刷新 MCP 服务器与工具勾选，按需检索（tool search）热注入；工具列表稳定命中缓存、不撑爆上下文。DeepSeek Harness plugin: MCP management UI + tool search — stable tool list, cache-friendly, no context bloat.",
   "type": "module",
   "main": "lib/index.js",
   "exports": {

package/src/client/McpSettingsSection.module.css

@@ -49,7 +49,7 @@ button:hover {
 }
 
 button:focus-visible {
-  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline: 2px solid var(--dsw-alias-brand-primary);
   outline-offset: 1px;
 }
 
@@ -59,13 +59,13 @@ button:disabled {
 }
 
 .primary {
-  border-color: var(--dsw-alias-state-business-primary);
-  background: var(--dsw-alias-state-business-primary);
-  color: var(--dsw-alias-label-on-accent);
+  border-color: var(--dsw-alias-button-primary-fill);
+  background: var(--dsw-alias-button-primary-fill);
+  color: var(--dsw-alias-label-primary-foreground);
 }
 
 .primary:hover {
-  background: var(--dsw-alias-state-business-primary-hover);
+  background: var(--dsw-alias-button-primary-hover);
 }
 
 .list {
@@ -123,8 +123,8 @@ button:disabled {
 }
 
 .badge.mounting {
-  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 12%, transparent);
-  color: var(--dsw-alias-state-business-primary);
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent);
+  color: var(--dsw-alias-brand-primary);
 }
 
 .badge.live {

package/src/client/McpSettingsSection.tsx

@@ -248,6 +248,14 @@ export function McpSettingsSection(props: McpSettingsSectionProps): ReactNode {
         t={t}
         actions={actions}
         injected={{ save, remove, test, list }}
+        onSaved={() => {
+          // Mounting is asynchronous: refresh again after the connection
+          // settles so the badge and tool count reflect the live state without
+          // a manual refresh (mirrors the enable-toggle path).
+          const serverName = state.draft.serverName
+          timersRef.current.push(window.setTimeout(() => refreshServer(serverName), 2000))
+          timersRef.current.push(window.setTimeout(() => refreshServer(serverName), 6000))
+        }}
       />
     )
   }
@@ -298,7 +306,7 @@ export function McpSettingsSection(props: McpSettingsSectionProps): ReactNode {
                     <div className={css.rowTitle}>
                       <span className={css.serverName}>{server.serverName}</span>
                       <span className={`${css.badge} ${css[server.status.phase]}`}>{t(phaseKey(server.status.phase))}</span>
-                      {!server.enabled ? <span className={css.muted}>{t('statusStopped')}</span> : null}
+                      {!server.enabled && server.status.phase !== 'stopped' ? <span className={css.muted}>{t('statusStopped')}</span> : null}
                     </div>
                     <div className={css.rowMeta}>
                       <span>{server.transport}</span>

package/src/client/ServerForm.module.css

@@ -43,7 +43,7 @@ button:hover {
 }
 
 button:focus-visible {
-  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline: 2px solid var(--dsw-alias-brand-primary);
   outline-offset: 1px;
 }
 
@@ -53,13 +53,13 @@ button:disabled {
 }
 
 .primary {
-  border-color: var(--dsw-alias-state-business-primary);
-  background: var(--dsw-alias-state-business-primary);
-  color: var(--dsw-alias-label-on-accent);
+  border-color: var(--dsw-alias-button-primary-fill);
+  background: var(--dsw-alias-button-primary-fill);
+  color: var(--dsw-alias-label-primary-foreground);
 }
 
 .primary:hover {
-  background: var(--dsw-alias-state-business-primary-hover);
+  background: var(--dsw-alias-button-primary-hover);
 }
 
 .danger {
@@ -106,8 +106,8 @@ button:disabled {
 .field input:focus-visible,
 .field select:focus-visible,
 .field textarea:focus-visible {
-  border-color: var(--dsw-alias-state-business-primary);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-business-primary) 18%, transparent);
+  border-color: var(--dsw-alias-brand-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-brand-primary) 18%, transparent);
 }
 
 .envBlock {

package/src/client/ServerForm.tsx

@@ -3,7 +3,7 @@ import type { McpServerId, McpServerView } from './types.ts'
 import type {
   McpDraft, McpEnvRowDraft, McpTestOutcome,
 } from './mcp-store.ts'
-import { createEnvRowDraft } from './mcp-store.ts'
+import { createEnvRowDraft, failureLocaleKey } from './mcp-store.ts'
 import type { McpSettingsLocaleKey } from './locales.ts'
 import css from './ServerForm.module.css'
 
@@ -34,11 +34,13 @@ export interface McpServerFormProps {
   t: (key: McpSettingsLocaleKey) => string
   actions: McpServerFormActions
   injected: McpServerFormRemote
+  /** Called after a successful save, before the editor closes. */
+  onSaved?: () => void
 }
 
 /** Render the editor for one server draft. */
 export function McpServerForm(props: McpServerFormProps): ReactNode {
-  const { draft, busy, testRunning, test, t, actions, injected } = props
+  const { draft, busy, testRunning, test, t, actions, injected, onSaved } = props
   const [saveError, setSaveError] = useState<string | null>(null)
 
   const update = (patch: Partial<McpDraft>): void => {
@@ -76,11 +78,12 @@ export function McpServerForm(props: McpServerFormProps): ReactNode {
     try {
       const failure = await injected.save(draft)
       if (failure !== null) {
-        setSaveError(failure.message)
+        setSaveError(t(failureLocaleKey(failure.code)))
         return
       }
       await refresh()
       actions.cancelEdit()
+      onSaved?.()
     } catch {
       setSaveError(t('failureTitle'))
     } finally {
@@ -287,6 +290,10 @@ export function McpServerForm(props: McpServerFormProps): ReactNode {
         </p>
       ) : null}
 
+      {testRunning && draft.transport === 'streamable-http' ? (
+        <p className={css.muted} role="status">{t('testBrowserHint')}</p>
+      ) : null}
+
       <div className={css.actions}>
         <button type="button" disabled={testRunning || busy !== null} onClick={() => void runTest()}>
           {testRunning ? t('testRunning') : t('test')}

package/src/client/locales.ts

@@ -43,6 +43,7 @@ export const zh = {
   edit: '编辑',
   test: '测试连接',
   testRunning: '正在测试…',
+  testBrowserHint: '正在测试…若弹出浏览器授权页，请完成授权后返回，结果会自动刷新。',
   testOk: '连接成功',
   testFail: '连接失败',
   testUnknown: '未知结果',
@@ -120,6 +121,7 @@ export const en = {
   edit: 'Edit',
   test: 'Test connection',
   testRunning: 'Testing…',
+  testBrowserHint: 'Testing… if a browser authorization page opens, complete it and return; the result refreshes automatically.',
   testOk: 'Connection succeeded',
   testFail: 'Connection failed',
   testUnknown: 'Unknown result',

package/src/client/mcp-store.ts

@@ -102,7 +102,9 @@ export function emptyDraft(): McpDraft {
     headersText: '',
     env: [],
     toolCallTimeoutMs: String(DEFAULT_TOOL_CALL_TIMEOUT_MS),
-    failOnStartupError: false,
+    // Reject the mount by default when the startup connection fails, so a
+    // broken server never registers stale tools.
+    failOnStartupError: true,
   }
 }