foxclaw 0.1.0 → 0.1.3

package/python/frontend_src/src/components/panels/ToolsPanel.vue

@@ -0,0 +1,746 @@
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import PanelBox from './PanelBox.vue'
+import { panels, loadPanel, refreshPanel, openMdSkill, toggleMdSkill } from '../../stores/panels.js'
+import { getJSON, postJSON, delJSON } from '../../api.js'
+import { clip } from '../../lib/fmt.js'
+
+const p = panels.tools
+const busy = ref('')
+const err = ref('')
+
+const mcp = ref([])
+async function loadMcp() {
+  try {
+    const d = await getJSON('/ahs/mcp/servers')
+    mcp.value = d.servers || []
+  } catch {
+    mcp.value = []
+  }
+}
+onMounted(() => {
+  loadPanel('tools')
+  loadMcp()
+})
+
+const ready = computed(() => p.skills.length > 0 || p.md.length > 0 || mcp.value.length > 0)
+const blocked = computed(() =>
+  p.skills.filter((s) => s.blocked).length + p.md.filter((s) => s.blocked).length
+)
+const breakerN = computed(() => Object.keys(p.breakers || {}).length)
+
+const TRUST = { high: 'green', medium: 'amber', low: 'red' }
+const trustCN = (t) => ({ high: '高信任', medium: '中信任', low: '低信任' }[t] || t || '—')
+
+async function pickMd(s) {
+  err.value = ''
+  try { await openMdSkill(s.id) } catch (e) { err.value = String(e.message || e) }
+}
+
+async function flip(s) {
+  busy.value = s.id
+  err.value = ''
+  try { await toggleMdSkill(s.id, !s.enabled) } catch (e) { err.value = String(e.message || e) }
+  busy.value = ''
+}
+
+const tId = ref('')
+const tArgs = ref({})
+const tBusy = ref(false)
+const tRes = ref(null)
+const tErr = ref('')
+const tNonce = ref('')
+
+function endTest() {
+  tId.value = ''
+  tArgs.value = {}
+  tRes.value = null
+  tErr.value = ''
+  tNonce.value = ''
+}
+
+function beginTest(s) {
+  if (tId.value === s.id) { endTest(); return }
+  const a = {}
+  for (const [k] of Object.entries(s.params || {})) a[k] = ''
+  tId.value = s.id
+  tArgs.value = a
+  tRes.value = null
+  tErr.value = ''
+  tNonce.value = ''
+  err.value = ''
+}
+
+function coerce(params, args) {
+  const out = {}
+  for (const [k, ty] of Object.entries(params || {})) {
+    const raw = String(args[k] ?? '').trim()
+    if (raw === '') continue
+    const t = String(ty || '').toLowerCase()
+    if (t.includes('bool')) out[k] = /^(1|true|yes|y|是)$/i.test(raw)
+    else if (t.includes('float') || t.includes('number')) out[k] = Number(raw)
+    else if (t.includes('int')) out[k] = parseInt(raw, 10) || 0
+    else out[k] = raw
+  }
+  return out
+}
+
+async function runTest(s, confirm = false) {
+  if (tBusy.value) return
+  tBusy.value = true
+  tErr.value = ''
+  try {
+    const d = await postJSON(`/ahs/skills/${encodeURIComponent(s.id)}/test`, {
+      args: coerce(s.params, tArgs.value),
+      confirmed: confirm,
+      mode: 'strict',
+      confirm_nonce: confirm ? tNonce.value : '',
+    })
+    tRes.value = d
+    tNonce.value = d.confirm_nonce || ''
+  } catch (e) {
+    tErr.value = String(e.message || e)
+  } finally {
+    tBusy.value = false
+  }
+}
+
+const pretty = (o) => {
+  if (o == null) return ''
+  if (typeof o === 'string') return o
+  try { return JSON.stringify(o, null, 2) } catch { return String(o) }
+}
+
+async function dropSkill(s) {
+  if (!confirm(`删除技能「${s.name || s.id}」?它的触发词和参数会一起消失。`)) return
+  busy.value = s.id
+  err.value = ''
+  try {
+    await delJSON(`/ahs/skills/${encodeURIComponent(s.id)}`)
+    if (tId.value === s.id) endTest()
+    await refreshPanel('tools')
+    await loadMcp()
+  } catch (e) {
+    err.value = String(e.message || e)
+  } finally {
+    busy.value = ''
+  }
+}
+
+const splitList = (t) => String(t || '').split(/[,，\s]+/).map((s) => s.trim()).filter(Boolean)
+
+function parseParams(txt) {
+  const out = {}
+  for (const part of String(txt || '').split(/[,，;\n]/)) {
+    const i = part.search(/[:：]/)
+    const k = (i < 0 ? part : part.slice(0, i)).trim()
+    const v = i < 0 ? '' : part.slice(i + 1).trim()
+    if (k) out[k] = v || 'str'
+  }
+  return out
+}
+
+function parseHeaders(txt) {
+  const out = {}
+  for (const line of String(txt || '').split('\n')) {
+    const i = line.indexOf(':')
+    if (i > 0) out[line.slice(0, i).trim()] = line.slice(i + 1).trim()
+  }
+  return out
+}
+
+const SIDE = { read: 'read · 只读', write: 'write · 写入', send: 'send · 代发', pay: 'pay · 付款' }
+const showIns = ref(false)
+const insBusy = ref(false)
+const insErr = ref('')
+const insOk = ref('')
+const insAck = ref(false)
+const insParams = ref('query:str')
+const insHeaders = ref('')
+const ins = reactive({
+  id: '', name: '', description: '', kind: 'web_api', side_effect: 'read',
+  endpoint: '', http_method: 'GET', mcp_server: '', mcp_tool: '', triggers: '',
+  timeout: 10, destructive: false, external: true, allow_local: false,
+})
+
+function toggleIns() {
+  showIns.value = !showIns.value
+  insErr.value = ''
+  insOk.value = ''
+  insAck.value = false
+}
+
+async function doInstall(ack = false) {
+  if (insBusy.value) return
+  const id = ins.id.trim()
+  insErr.value = ''
+  insOk.value = ''
+  if (!id) { insErr.value = '技能 id 必填'; return }
+  insBusy.value = true
+  const body = {
+    id,
+    name: (ins.name || id).trim(),
+    description: ins.description.trim(),
+    kind: ins.kind,
+    triggers: splitList(ins.triggers),
+    side_effect: ins.side_effect,
+    destructive: !!ins.destructive,
+    external: !!ins.external,
+    params: parseParams(insParams.value),
+    endpoint: ins.kind === 'web_api' ? ins.endpoint.trim() : '',
+    http_method: ins.http_method,
+    http_headers: parseHeaders(insHeaders.value),
+    param_location: 'auto',
+    allow_local: !!ins.allow_local,
+    timeout: Number(ins.timeout) || 10,
+    mcp_server: ins.kind === 'mcp' ? ins.mcp_server.trim() : '',
+    mcp_tool: ins.kind === 'mcp' ? ins.mcp_tool.trim() : '',
+    acknowledged: ack,
+  }
+  try {
+    const d = await postJSON('/ahs/skills', body)
+    const warn = (d.warnings || []).length ? ` · ${d.warnings.join('；')}` : ''
+    insOk.value = `${d.created ? '已安装' : '已更新'}「${body.name}」${warn}`
+    insAck.value = false
+    Object.assign(ins, { id: '', name: '', description: '', endpoint: '', triggers: '', mcp_server: '', mcp_tool: '' })
+    await refreshPanel('tools')
+  } catch (e) {
+    insErr.value = String(e.message || e)
+    insAck.value = !!(e.detail && e.detail.needs_ack)
+  } finally {
+    insBusy.value = false
+  }
+}
+
+const MI_MAX = 4 * 1024 * 1024
+const miOpen = ref(false)
+const miBusy = ref(false)
+const miErr = ref('')
+const miOk = ref('')
+const miAck = ref(false)
+const miText = ref('')
+const miFile = ref('')
+const miB64 = ref('')          // zip 的 base64;非空时优先于 miText
+const miRef = ref(null)
+
+function toggleMi() {
+  miOpen.value = !miOpen.value
+  miErr.value = ''
+  miOk.value = ''
+  miAck.value = false
+}
+
+function resetMi() {
+  miText.value = ''
+  miFile.value = ''
+  miB64.value = ''
+  miAck.value = false
+  if (miRef.value) miRef.value.value = ''
+}
+
+function toB64(file) {
+  return new Promise((resolve, reject) => {
+    const fr = new FileReader()
+    fr.onload = () => {
+      const s = String(fr.result || '')
+      resolve(s.slice(s.indexOf(',') + 1))     // 去掉 data:...;base64, 前缀
+    }
+    fr.onerror = () => reject(new Error('读取文件失败'))
+    fr.readAsDataURL(file)
+  })
+}
+
+async function onMiFile(ev) {
+  const f = ev.target.files && ev.target.files[0]
+  miFile.value = ''
+  miB64.value = ''
+  miErr.value = ''
+  miOk.value = ''
+  miAck.value = false
+  if (!f) return
+  miFile.value = `${f.name} · ${(f.size / 1024).toFixed(0)} KB`
+  if (f.size > MI_MAX) { miErr.value = '文件超过 4MB,拒绝上传'; return }
+  try {
+    if (/\.zip$/i.test(f.name)) {
+      miB64.value = await toB64(f)
+      miText.value = ''
+    } else {
+      miText.value = await f.text()
+    }
+  } catch (e) {
+    miErr.value = String(e.message || e)
+  }
+}
+
+async function doMdInstall(ack = false) {
+  if (miBusy.value) return
+  const content = miText.value.trim()
+  if (!ack && !content && !miB64.value) {
+    miErr.value = '粘贴 SKILL.md 正文,或选一个 .md / .zip 文件'
+    return
+  }
+  miBusy.value = true
+  miErr.value = ''
+  miOk.value = ''
+  const body = { acknowledged: ack }
+  if (miB64.value) body.package_b64 = miB64.value
+  else body.content = content
+  try {
+    const d = await postJSON('/ahs/md-skills', body)
+    const name = (d.skill && (d.skill.name || d.skill.id)) || '指令技能'
+    miOk.value = `${d.created ? '已安装' : '已更新'}「${name}」`
+    resetMi()
+    await refreshPanel('tools')
+  } catch (e) {
+    miErr.value = String(e.message || e)
+    miAck.value = !!(e.detail && e.detail.needs_ack)
+  } finally {
+    miBusy.value = false
+  }
+}
+
+const showMcpAdd = ref(false)
+const mcpBusy = ref(false)
+const mcpErr = ref('')
+const mcpOk = ref('')
+const mcpAck = ref(false)
+const mf = reactive({ id: '', name: '', url: '', transport: 'streamable_http', headers: '' })
+
+function toggleMcpAdd() {
+  showMcpAdd.value = !showMcpAdd.value
+  mcpErr.value = ''
+  mcpOk.value = ''
+  mcpAck.value = false
+}
+
+async function addMcp(ack = false) {
+  if (mcpBusy.value) return
+  const id = mf.id.trim()
+  mcpErr.value = ''
+  mcpOk.value = ''
+  if (!id || !mf.url.trim()) { mcpErr.value = 'id 和 URL 都要填'; return }
+  mcpBusy.value = true
+  try {
+    const d = await postJSON('/ahs/mcp/servers', {
+      id,
+      name: mf.name.trim() || id,
+      url: mf.url.trim(),
+      headers: parseHeaders(mf.headers),
+      transport: mf.transport,
+      acknowledged: ack,
+    })
+    mcpOk.value = `已接入 ${d.server?.name || id} · 注册 ${d.tools_registered ?? 0} 个工具`
+    mcpAck.value = false
+    Object.assign(mf, { id: '', name: '', url: '', headers: '' })
+    await loadMcp()
+    await refreshPanel('tools')
+  } catch (e) {
+    mcpErr.value = String(e.message || e)
+    mcpAck.value = !!(e.detail && e.detail.needs_ack)
+  } finally {
+    mcpBusy.value = false
+  }
+}
+
+async function refreshMcp(s) {
+  if (mcpBusy.value) return
+  mcpBusy.value = true
+  mcpErr.value = ''
+  mcpOk.value = ''
+  try {
+    const d = await postJSON(`/ahs/mcp/servers/${encodeURIComponent(s.id)}/refresh`, {})
+    mcpOk.value = `已重连 ${s.name || s.id} · 现共 ${d.tools ?? 0} 个工具`
+    await loadMcp()
+    await refreshPanel('tools')
+  } catch (e) {
+    mcpErr.value = String(e.message || e)
+  } finally {
+    mcpBusy.value = false
+  }
+}
+
+async function delMcp(s) {
+  if (!confirm(`移除连接器「${s.name || s.id}」?它注册的 MCP 技能会一起删掉。`)) return
+  err.value = ''
+  try {
+    const d = await delJSON(`/ahs/mcp/servers/${encodeURIComponent(s.id)}`)
+    await loadMcp()
+    await refreshPanel('tools')
+    mcpOk.value = `已移除,连带删除 ${d.removed_skills ?? 0} 个技能`
+  } catch (e) {
+    err.value = String(e.message || e)
+  }
+}
+</script>
+
+<template>
+  <PanelBox
+    title="技能"
+    tag="Tools"
+    :state="p.state"
+    :ready="ready"
+    @refresh="refreshPanel('tools'); loadMcp()"
+  >
+    <div class="pn-kpi">
+      <div><b>{{ p.skills.length + p.md.length }}</b><span>技能总数</span></div>
+      <div><b>{{ p.skills.length }}</b><span>执行技能</span></div>
+      <div><b>{{ p.md.length }}</b><span>指令技能</span></div>
+      <div><b>{{ blocked }}</b><span>被封杀</span></div>
+      <div><b>{{ breakerN }}</b><span>熔断中</span></div>
+    </div>
+
+    <div v-if="err" class="pn-st err">{{ err }}</div>
+
+    <div class="pn-cols">
+      <div class="pn-sec">
+        <div class="pn-h">执行技能 <em>{{ p.skills.length }}</em></div>
+        <div v-if="!p.skills.length" class="pn-empty">没有注册的执行技能。</div>
+        <template v-for="s in p.skills" :key="s.id">
+          <div class="pn-row" :title="s.description">
+            <span class="m">
+              <b>{{ s.name || s.id }}</b>
+              <span class="s">
+                {{ s.kind }} · {{ s.side_effect || 'read' }}<template v-if="s.source === 'user'"> · 用户安装</template><template v-if="s.blocked"> · 已封杀</template>
+              </span>
+            </span>
+            <span class="pn-tag" :class="TRUST[s.trust] || ''">{{ trustCN(s.trust) }}</span>
+            <button class="mbtn" :class="{ on: tId === s.id }" @click="beginTest(s)">
+              {{ tId === s.id ? '收起' : '测试' }}
+            </button>
+            <button v-if="s.source !== 'builtin'" class="mbtn danger" :disabled="busy === s.id" @click="dropSkill(s)">
+              删除
+            </button>
+          </div>
+
+          <div v-if="tId === s.id" class="tk-test">
+            <div v-if="!(s.params && Object.keys(s.params).length)" class="tip dim">
+              该技能没有声明参数,直接运行即可。
+            </div>
+            <label v-for="(ty, k) in (s.params || {})" :key="k" class="f">
+              <span>{{ k }}<em>{{ ty }}</em></span>
+              <input v-model="tArgs[k]" :placeholder="String(ty || 'str')" spellcheck="false" />
+            </label>
+            <div class="fbar">
+              <button class="go" :disabled="tBusy" @click="runTest(s, false)">
+                {{ tBusy ? '调用中…' : '运行' }}
+              </button>
+              <button
+                v-if="tRes && tRes.status === 'needs_confirmation'"
+                class="go warn"
+                :disabled="tBusy"
+                @click="runTest(s, true)"
+              >
+                确认并重跑
+              </button>
+              <span class="tip dim">走真实权限 / 断路器 / SSRF 校验</span>
+            </div>
+            <div v-if="tErr" class="pn-note meta bad">{{ tErr }}</div>
+            <div v-if="tRes" class="tk-res" :class="tRes.success ? 'ok' : 'bad'">
+              <div class="r-h">
+                <b>{{ tRes.status }}</b>
+                <span v-if="tRes.message">{{ tRes.message }}</span>
+              </div>
+              <pre v-if="pretty(tRes.output)">{{ pretty(tRes.output) }}</pre>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <div class="pn-sec">
+        <div class="pn-h">指令技能 <em>{{ p.md.length }}</em></div>
+        <div v-if="!p.md.length" class="pn-empty">没有 SKILL.md 指令技能。</div>
+        <div v-for="s in p.md" :key="s.id" class="pn-row clickable" :title="'点击查看 SKILL.md 正文'" @click="pickMd(s)">
+          <span class="m">
+            <b>{{ s.name || s.id }}</b>
+            <span class="s">{{ clip(s.description || '无描述', 34) }}</span>
+          </span>
+          <span class="pn-tag" :class="TRUST[s.trust] || ''">{{ trustCN(s.trust) }}</span>
+          <button
+            class="sw"
+            :class="{ on: s.enabled }"
+            :disabled="busy === s.id"
+            :title="s.enabled ? '点击停用' : '点击启用'"
+            @click.stop="flip(s)"
+          >
+            {{ s.enabled ? '启用' : '停用' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="pn-sec">
+      <div class="pn-h">
+        安装指令技能
+        <button class="mbtn" @click="toggleMi">{{ miOpen ? '收起' : '+ 上传' }}</button>
+      </div>
+      <div v-if="miOpen" class="tk-form">
+        <label class="f"><span>SKILL.md 或 OpenClaw 包(.md / .zip)</span>
+          <input ref="miRef" type="file" accept=".md,.markdown,.zip" @change="onMiFile" />
+        </label>
+        <div v-if="miFile" class="pn-note">{{ miFile }}</div>
+        <label class="f"><span>或粘贴正文(frontmatter + 指示)</span>
+          <textarea
+            v-model="miText"
+            rows="8"
+            spellcheck="false"
+            :disabled="!!miB64"
+            placeholder="--- name: my-skill / description: 什么时候用它 --- 然后写正文"
+          />
+        </label>
+        <div class="fbar">
+          <button class="go" :disabled="miBusy" @click="doMdInstall(false)">
+            {{ miBusy ? '安装中…' : '安装' }}
+          </button>
+          <button v-if="miAck" class="go warn" :disabled="miBusy" @click="doMdInstall(true)">
+            已知风险,继续安装
+          </button>
+          <span v-if="miErr" class="tip bad">{{ miErr }}</span>
+          <span v-else-if="miOk" class="tip ok">{{ miOk }}</span>
+          <span v-else class="tip dim">只取 SKILL.md 与 _meta.json;包内 scripts/ 不落地、不执行</span>
+        </div>
+      </div>
+      <div v-else class="pn-note">
+        指令技能是注入提示词的 markdown,不是可执行工具。命令行也能装:
+        <code>foxclaw skills install @owner/slug</code>、<code>github:owner/repo</code>、<code>./pkg.zip</code>。
+      </div>
+    </div>
+
+    <div class="pn-sec">
+      <div class="pn-h">
+        安装技能
+        <button class="mbtn" @click="toggleIns">{{ showIns ? '收起' : '+ 新增' }}</button>
+      </div>
+      <div v-if="showIns" class="tk-form">
+        <div class="frow">
+          <label class="f"><span>id</span>
+            <input v-model="ins.id" placeholder="weather_query" spellcheck="false" />
+          </label>
+          <label class="f"><span>名称</span>
+            <input v-model="ins.name" placeholder="查天气" />
+          </label>
+        </div>
+        <label class="f"><span>描述</span>
+          <input v-model="ins.description" placeholder="给模型看的说明:能做什么,什么时候用" />
+        </label>
+        <div class="frow">
+          <label class="f"><span>类型</span>
+            <select v-model="ins.kind">
+              <option value="web_api">web_api · HTTP 接口</option>
+              <option value="mcp">mcp · 已有 server 的工具</option>
+            </select>
+          </label>
+          <label class="f"><span>副作用</span>
+            <select v-model="ins.side_effect">
+              <option v-for="(cn, k) in SIDE" :key="k" :value="k">{{ cn }}</option>
+            </select>
+          </label>
+          <label class="f narrow"><span>超时(s)</span>
+            <input v-model.number="ins.timeout" type="number" min="1" max="120" />
+          </label>
+        </div>
+        <label class="f"><span>触发词(逗号分隔)</span>
+          <input v-model="ins.triggers" placeholder="天气, 气温, 下雨" />
+        </label>
+        <label class="f"><span>参数(schema:名:类型)</span>
+          <input v-model="insParams" placeholder="city:str, days:int" spellcheck="false" />
+        </label>
+
+        <template v-if="ins.kind === 'web_api'">
+          <div class="frow">
+            <label class="f grow"><span>endpoint</span>
+              <input v-model="ins.endpoint" placeholder="https://api.example.com/weather" spellcheck="false" />
+            </label>
+            <label class="f narrow"><span>方法</span>
+              <select v-model="ins.http_method">
+                <option>GET</option>
+                <option>POST</option>
+              </select>
+            </label>
+          </div>
+          <label class="f"><span>请求头(每行 Key: Value)</span>
+            <textarea v-model="insHeaders" rows="2" spellcheck="false" placeholder="Authorization: Bearer xxx" />
+          </label>
+          <label class="chk"><input v-model="ins.allow_local" type="checkbox" /> 允许访问内网 / 本机地址</label>
+        </template>
+        <div v-else class="frow">
+          <label class="f"><span>MCP server</span>
+            <input v-model="ins.mcp_server" placeholder="amap-maps" spellcheck="false" />
+          </label>
+          <label class="f"><span>工具名</span>
+            <input v-model="ins.mcp_tool" placeholder="maps_direction" spellcheck="false" />
+          </label>
+        </div>
+
+        <label class="chk"><input v-model="ins.destructive" type="checkbox" /> 不可逆操作(删除 / 付款这类)</label>
+        <label class="chk"><input v-model="ins.external" type="checkbox" /> 会调用外部服务(联网)</label>
+
+        <div class="fbar">
+          <button class="go" :disabled="insBusy" @click="doInstall(false)">
+            {{ insBusy ? '安装中…' : '安装' }}
+          </button>
+          <button v-if="insAck" class="go warn" :disabled="insBusy" @click="doInstall(true)">
+            已知风险,继续安装
+          </button>
+          <span v-if="insErr" class="tip bad">{{ insErr }}</span>
+          <span v-else-if="insOk" class="tip ok">{{ insOk }}</span>
+          <span v-else class="tip dim">同 id 覆盖更新;内置技能的 id 不可覆盖</span>
+        </div>
+      </div>
+      <div v-else class="pn-note">
+        只能装 <code>web_api</code> 与 <code>mcp</code> 两类 —— 本地代码技能不接受从界面安装。
+      </div>
+    </div>
+
+    <div class="pn-sec">
+      <div class="pn-h">
+        连接器 <em>{{ mcp.length }}</em>
+        <button class="mbtn" @click="toggleMcpAdd">{{ showMcpAdd ? '收起' : '+ 接入' }}</button>
+      </div>
+
+      <div v-if="showMcpAdd" class="tk-form">
+        <div class="frow">
+          <label class="f"><span>id</span>
+            <input v-model="mf.id" placeholder="my-notes" spellcheck="false" />
+          </label>
+          <label class="f"><span>显示名</span>
+            <input v-model="mf.name" placeholder="我的备忘录" />
+          </label>
+        </div>
+        <label class="f"><span>URL</span>
+          <input v-model="mf.url" placeholder="https://example.com/mcp" spellcheck="false" />
+        </label>
+        <div class="frow">
+          <label class="f narrow"><span>传输</span>
+            <select v-model="mf.transport">
+              <option value="streamable_http">streamable_http</option>
+              <option value="sse">sse</option>
+            </select>
+          </label>
+          <label class="f grow"><span>请求头(每行 Key: Value)</span>
+            <textarea v-model="mf.headers" rows="2" spellcheck="false" placeholder="Authorization: Bearer xxx" />
+          </label>
+        </div>
+        <div class="fbar">
+          <button class="go" :disabled="mcpBusy" @click="addMcp(false)">
+            {{ mcpBusy ? '连接中…' : '接入' }}
+          </button>
+          <button v-if="mcpAck" class="go warn" :disabled="mcpBusy" @click="addMcp(true)">
+            已知风险,继续
+          </button>
+          <span v-if="mcpErr" class="tip bad">{{ mcpErr }}</span>
+          <span v-else-if="mcpOk" class="tip ok">{{ mcpOk }}</span>
+          <span v-else class="tip dim">接入后会连一次,把它暴露的工具注册成技能</span>
+        </div>
+      </div>
+
+      <div v-if="!mcp.length" class="pn-empty">
+        还没接入外部应用。邮箱、你自己的另一个知识库这类需要授权的,会作为 MCP 服务出现在这一节。
+      </div>
+      <div v-for="s in mcp" :key="s.id" class="pn-row" :title="s.url">
+        <span class="m">
+          <b>{{ s.name || s.id }}</b>
+          <span class="s">{{ s.tool_count ?? 0 }} 个工具<template v-if="s.transport"> · {{ s.transport }}</template></span>
+        </span>
+        <button class="mbtn" :disabled="mcpBusy" @click="refreshMcp(s)">重连</button>
+        <button class="mbtn danger" @click="delMcp(s)">移除</button>
+      </div>
+    </div>
+  </PanelBox>
+</template>
+
+<style scoped>
+.sw {
+  flex-shrink: 0; padding: 4px 10px; border-radius: var(--r-pill);
+  font-size: 11px; font-family: var(--mono);
+  background: var(--surface-2); color: var(--faint);
+  border: 1px solid transparent;
+}
+.sw.on { background: rgba(26, 157, 95, 0.12); color: var(--green); }
+.sw:disabled { opacity: 0.5; }
+
+.mbtn {
+  flex-shrink: 0; padding: 4px 10px; border-radius: var(--r-pill);
+  font-size: 11px; font-family: var(--mono); color: var(--dim);
+  background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line-soft);
+  transition: color 0.13s, border-color 0.13s, background 0.13s;
+}
+.mbtn:hover { color: var(--green); border-color: rgba(26, 157, 95, 0.35); background: #fff; }
+.mbtn.on { color: var(--green); background: rgba(26, 157, 95, 0.1); border-color: rgba(26, 157, 95, 0.4); }
+.mbtn.danger:hover { color: var(--red); border-color: rgba(229, 72, 77, 0.35); }
+.mbtn:disabled { opacity: 0.5; }
+
+.tk-form, .tk-test {
+  margin: 4px 0 6px;
+  padding: 11px 12px;
+  border-radius: var(--r-mid);
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid var(--line-soft);
+}
+.tk-test { display: flex; flex-direction: column; gap: 7px; }
+.tk-test .f span em {
+  font-style: normal; font-weight: 600; font-family: var(--mono); font-size: 11px; color: var(--dim);
+}
+
+.frow { display: flex; gap: 8px; }
+.frow .f { flex: 1 1 0; min-width: 0; }
+.frow .f.grow { flex: 2 1 0; }
+.frow .f.narrow { flex: 0 1 104px; }
+.f { display: block; margin-bottom: 7px; }
+.f > span {
+  display: block; margin-bottom: 3px;
+  font-size: 11px; color: var(--faint);
+}
+.f input, .f select, .f textarea {
+  display: block; width: 100%;
+  padding: 5px 8px; border-radius: 6px;
+  font-family: inherit; font-size: 12.5px; color: var(--ink);
+  background: rgba(23, 32, 26, 0.04);
+  border: 1px solid transparent; outline: none;
+  transition: border-color 0.14s, background 0.14s;
+}
+.f textarea { resize: vertical; line-height: 1.6; }
+.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--line); background: #fff; }
+.f input::placeholder, .f textarea::placeholder { color: var(--dim); }
+.f input[type='file'] { padding: 4px 6px; font-size: 11.5px; color: var(--dim); }
+
+.chk {
+  display: flex; align-items: center; gap: 6px;
+  margin-bottom: 6px; font-size: 12px; color: var(--dim);
+}
+.chk input { accent-color: var(--green); }
+
+.fbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
+.go {
+  flex-shrink: 0; padding: 6px 15px; border-radius: var(--r-pill);
+  font-size: 12.5px; font-weight: 600; color: #fff; background: var(--green);
+  transition: opacity 0.15s, transform 0.12s;
+}
+.go:hover:not(:disabled) { opacity: 0.9; }
+.go:active:not(:disabled) { transform: scale(0.97); }
+.go:disabled { background: rgba(23, 32, 26, 0.12); color: var(--faint); }
+.go.warn { background: var(--amber); }
+
+.tip {
+  flex: 1 1 auto; min-width: 0;
+  font-size: 11.5px; color: var(--dim);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.tip.dim { color: var(--faint); }
+.tip.ok { color: var(--green); }
+.tip.bad { color: var(--red); white-space: normal; }
+
+.tk-res {
+  margin-top: 4px; padding: 8px 10px; border-radius: var(--r-sm);
+  background: rgba(23, 32, 26, 0.03); border: 1px solid var(--line-soft);
+}
+.tk-res .r-h { display: flex; gap: 6px; font-size: 12px; color: var(--dim); }
+.tk-res .r-h b { font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
+.tk-res.bad .r-h b { color: var(--amber); }
+.tk-res pre {
+  margin: 6px 0 0; max-height: 220px; overflow: auto;
+  font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--dim);
+  white-space: pre-wrap; word-break: break-word;
+}
+.pn-note.meta { margin-top: 6px; }
+.pn-note.meta.bad { color: var(--red); }
+</style>