From 334152417b50ca3b837d04ecdf8be9bda7c79e23 Mon Sep 17 00:00:00 2001
From: TaskPool <admin@viaeon.com>
Date: Mon, 27 Jul 2026 02:25:48 +0800
Subject: [PATCH] feat(ui): show both stdio and HTTP mode MCP config in
 settings

---
 web/src/pages/Settings.tsx | 33 +++++++++++++++++++++++++++------
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 020f7c4..e997a71 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -290,24 +290,45 @@ export default function Settings() {
               </Button>
             </div>
             <div className="rounded-md border border-[var(--border)] bg-[var(--bg-secondary)] p-3 text-xs leading-5 text-[var(--text-secondary)]">
-              <div className="mb-1 font-medium text-[var(--text-primary)]">MCP Server（Hermes / OpenClaw）</div>
+              <div className="mb-2 font-medium text-[var(--text-primary)]">MCP Server（AI Agent 接入）</div>
               <p className="mb-2">
-                OpenAPI 是 REST 接口；AI Agent 请使用 <code className="rounded bg-[var(--bg-tertiary)] px-1">taskpool mcp</code> 作为 MCP
-                Server 完整接管任务/脚本/日志。
+                OpenAPI 是 REST 接口；AI Agent 请使用 MCP Server 完整接管任务/脚本/日志。支持两种模式：
               </p>
-              <pre className="overflow-x-auto whitespace-pre-wrap rounded-md border border-[var(--border)] bg-[var(--bg-primary)] p-2 font-mono text-[11px] text-[var(--text-primary)]">{`{
+              <div className="mb-3 space-y-2">
+                <div className="rounded border border-[var(--border)] bg-[var(--bg-tertiary)]/50 p-2">
+                  <div className="mb-1 text-xs font-medium text-[var(--text-primary)]">stdio 模式</div>
+                  <p className="mb-2 text-[var(--text-muted)]">本地 Agent 使用，需要安装 taskpool 二进制（Claude Desktop / Cursor）</p>
+                  <pre className="overflow-x-auto whitespace-pre-wrap rounded border border-[var(--border)] bg-[var(--bg-primary)] p-2 font-mono text-[11px] text-[var(--text-primary)]">{`{
   "mcpServers": {
     "taskpool": {
       "command": "taskpool",
       "args": ["mcp"],
       "env": {
         "TASKPOOL_URL": "${window.location.origin}",
-        "TASKPOOL_TOKEN": "${siteForm.openapi_token || '在设置页生成 OpenAPI Token'}"
+        "TASKPOOL_TOKEN": "${siteForm.openapi_token || '在设置页生成 Token'}"
       }
     }
   }
 }`}</pre>
-              <p className="mt-2 text-[var(--text-muted)]">详细说明见仓库 docs/guide/mcp.md 与 skills/taskpool/SKILL.md</p>
+                </div>
+                <div className="rounded border border-[var(--border)] bg-[var(--bg-tertiary)]/50 p-2">
+                  <div className="mb-1 text-xs font-medium text-[var(--text-primary)]">HTTP 模式</div>
+                  <p className="mb-2 text-[var(--text-muted)]">远程 Agent 使用，通过 URL 访问（Hermes / OpenClaw）</p>
+                  <div className="mb-2 text-[var(--text-muted)]">1. 启动 MCP HTTP 服务：</div>
+                  <pre className="mb-2 overflow-x-auto whitespace-pre-wrap rounded border border-[var(--border)] bg-[var(--bg-primary)] p-2 font-mono text-[11px] text-[var(--text-primary)]">{`TASKPOOL_URL=${window.location.origin} \\
+TASKPOOL_TOKEN=${siteForm.openapi_token || '你的Token'} \\
+taskpool mcp --http :8053`}</pre>
+                  <div className="mb-2 text-[var(--text-muted)]">2. Agent 配置：</div>
+                  <pre className="overflow-x-auto whitespace-pre-wrap rounded border border-[var(--border)] bg-[var(--bg-primary)] p-2 font-mono text-[11px] text-[var(--text-primary)]">{`{
+  "mcpServers": {
+    "taskpool": {
+      "url": "http://你的服务器:8053/mcp"
+    }
+  }
+}`}</pre>
+                </div>
+              </div>
+              <p className="text-[var(--text-muted)]">详细说明见仓库 docs/guide/mcp.md 与 skills/taskpool/SKILL.md</p>
             </div>
             <h3 className="pt-2 text-sm font-medium text-[var(--text-secondary)]">日志保留</h3>
             <p className="text-xs text-[var(--text-muted)]">设置各类日志的保留天数和最大条数限制，超出后自动清理最旧记录</p>