dsh-plugin-capabilities 0.1.6 → 0.2.0

package/market/mcp.json

@@ -0,0 +1,164 @@
+{
+  "version": 1,
+  "updatedAt": "2026-08-18",
+  "servers": [
+    {
+      "id": "filesystem",
+      "name": "Filesystem",
+      "nameZh": "文件系统",
+      "description": "Read/write access to a restricted set of directories. The default argument (\".\") allows the dsh working directory — edit the row to list the roots you want to expose.",
+      "descriptionZh": "受控目录的读写访问。默认参数 \".\" 只放开 dsh 工作目录，安装后可编辑该行，列出你要开放的具体目录。",
+      "transport": "stdio",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-filesystem", "."],
+      "homepage": "https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem",
+      "category": "files",
+      "runtime": "npx (Node.js)"
+    },
+    {
+      "id": "memory",
+      "name": "Memory",
+      "nameZh": "知识图谱记忆",
+      "description": "Persistent knowledge-graph memory across sessions (entities, relations, observations).",
+      "descriptionZh": "跨会话的持久知识图谱记忆（实体、关系、观察）。",
+      "transport": "stdio",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-memory"],
+      "homepage": "https://github.com/modelcontextprotocol/servers/tree/main/src/memory",
+      "category": "knowledge",
+      "runtime": "npx (Node.js)"
+    },
+    {
+      "id": "sequentialthinking",
+      "name": "Sequential Thinking",
+      "nameZh": "顺序思考",
+      "description": "Dynamic, reflective problem-solving through structured chains of thought.",
+      "descriptionZh": "通过结构化的思考链进行动态、反思式的问题求解。",
+      "transport": "stdio",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-sequentialthinking"],
+      "homepage": "https://github.com/modelcontextprotocol/servers/tree/main/src/sequentialthinking",
+      "category": "reasoning",
+      "runtime": "npx (Node.js)"
+    },
+    {
+      "id": "everything",
+      "name": "Everything",
+      "nameZh": "Everything 测试服务器",
+      "description": "Reference server exercising every MCP feature — prompts, resources, tools, sampling. Handy for verifying a client setup.",
+      "descriptionZh": "覆盖 MCP 全部能力的参考服务器——提示、资源、工具、采样，适合验证客户端配置。",
+      "transport": "stdio",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-everything"],
+      "homepage": "https://github.com/modelcontextprotocol/servers/tree/main/src/everything",
+      "category": "test",
+      "runtime": "npx (Node.js)"
+    },
+    {
+      "id": "git",
+      "name": "Git",
+      "nameZh": "Git",
+      "description": "Operations on local Git repositories: status, diff, branches, commits, tags.",
+      "descriptionZh": "操作本地 Git 仓库：状态、差异、分支、提交、标签。",
+      "transport": "stdio",
+      "command": "uvx",
+      "args": ["mcp-server-git"],
+      "homepage": "https://github.com/modelcontextprotocol/servers/tree/main/src/git",
+      "category": "dev",
+      "runtime": "uvx (Python/uv)"
+    },
+    {
+      "id": "fetch",
+      "name": "Fetch",
+      "nameZh": "网页抓取",
+      "description": "Web content fetching and conversion, optimized for LLM usage.",
+      "descriptionZh": "网页内容抓取与转换，面向 LLM 使用优化。",
+      "transport": "stdio",
+      "command": "uvx",
+      "args": ["mcp-server-fetch"],
+      "homepage": "https://github.com/modelcontextprotocol/servers/tree/main/src/fetch",
+      "category": "web",
+      "runtime": "uvx (Python/uv)"
+    },
+    {
+      "id": "sqlite",
+      "name": "SQLite",
+      "nameZh": "SQLite",
+      "description": "SQLite database access with schema inspection and query analysis. Edit the row's --db-path argument after installing.",
+      "descriptionZh": "SQLite 数据库访问，支持结构检查与查询分析。安装后可编辑该行的 --db-path 参数。",
+      "transport": "stdio",
+      "command": "uvx",
+      "args": ["mcp-server-sqlite", "--db-path", "sqlite.db"],
+      "homepage": "https://github.com/modelcontextprotocol/servers/tree/main/src/sqlite",
+      "category": "data",
+      "runtime": "uvx (Python/uv)"
+    },
+    {
+      "id": "time",
+      "name": "Time",
+      "nameZh": "时间与时区",
+      "description": "Current time and timezone conversion.",
+      "descriptionZh": "当前时间查询与时区转换。",
+      "transport": "stdio",
+      "command": "uvx",
+      "args": ["mcp-server-time"],
+      "homepage": "https://github.com/modelcontextprotocol/servers/tree/main/src/time",
+      "category": "knowledge",
+      "runtime": "uvx (Python/uv)"
+    },
+    {
+      "id": "github",
+      "name": "GitHub",
+      "nameZh": "GitHub",
+      "description": "Repositories, issues, PRs, and more. Requires a personal access token in the environment after install.",
+      "descriptionZh": "仓库、Issue、PR 等操作。安装后需在环境变量中填入个人访问令牌。",
+      "transport": "stdio",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-github"],
+      "envKeys": ["GITHUB_PERSONAL_ACCESS_TOKEN"],
+      "homepage": "https://github.com/modelcontextprotocol/servers/tree/main/src/github",
+      "category": "dev",
+      "runtime": "npx (Node.js)"
+    },
+    {
+      "id": "brave-search",
+      "name": "Brave Search",
+      "nameZh": "Brave 搜索",
+      "description": "Web/local/image/news search via the Brave API. Requires a Brave API key.",
+      "descriptionZh": "通过 Brave API 进行网页/本地/图片/新闻搜索，需要 Brave API 密钥。",
+      "transport": "stdio",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-brave-search"],
+      "envKeys": ["BRAVE_API_KEY"],
+      "homepage": "https://github.com/modelcontextprotocol/servers/tree/main/src/brave-search",
+      "category": "web",
+      "runtime": "npx (Node.js)"
+    },
+    {
+      "id": "puppeteer",
+      "name": "Puppeteer",
+      "nameZh": "Puppeteer 浏览器",
+      "description": "Browser automation: navigation, screenshots, clicks, form fills, JS evaluation.",
+      "descriptionZh": "浏览器自动化：导航、截图、点击、表单填写、JS 执行。",
+      "transport": "stdio",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-puppeteer"],
+      "homepage": "https://github.com/modelcontextprotocol/servers/tree/main/src/puppeteer",
+      "category": "web",
+      "runtime": "npx (Node.js)"
+    },
+    {
+      "id": "context7",
+      "name": "Context7",
+      "nameZh": "Context7 文档查询",
+      "description": "Up-to-date, version-specific documentation and code examples for libraries and frameworks.",
+      "descriptionZh": "获取各类库与框架的最新版本文档与代码示例。",
+      "transport": "stdio",
+      "command": "npx",
+      "args": ["-y", "@upstash/context7-mcp"],
+      "homepage": "https://github.com/upstash/context7",
+      "category": "knowledge",
+      "runtime": "npx (Node.js)"
+    }
+  ]
+}

package/market/skills.json

@@ -0,0 +1,36 @@
+{
+  "version": 1,
+  "updatedAt": "2026-08-18",
+  "repos": [
+    {
+      "id": "anthropics-skills",
+      "name": "Anthropic Official Skills",
+      "nameZh": "Anthropic 官方技能集",
+      "description": "Document skills (docx/pdf/pptx/xlsx), artifacts-builder, canvas-design, mcp-builder and more from Anthropic's skills repository.",
+      "descriptionZh": "Anthropic 官方技能仓库：文档技能（docx/pdf/pptx/xlsx）、artifacts-builder、canvas-design、mcp-builder 等。",
+      "url": "https://github.com/anthropics/skills",
+      "homepage": "https://github.com/anthropics/skills",
+      "skillCount": 13
+    },
+    {
+      "id": "obra-superpowers",
+      "name": "Superpowers",
+      "nameZh": "Superpowers 工作流技能",
+      "description": "Jesse Vincent's curated workflow skills: brainstorming, systematic debugging, test-driven development, writing plans, and the dispatch/review loop around them.",
+      "descriptionZh": "Jesse Vincent 维护的工作流技能集：头脑风暴、系统化调试、测试驱动开发、撰写计划及配套的调度/评审流程。",
+      "url": "https://github.com/obra/superpowers",
+      "homepage": "https://github.com/obra/superpowers",
+      "skillCount": 18
+    },
+    {
+      "id": "vercel-labs-skills",
+      "name": "Vercel Labs Skills",
+      "nameZh": "Vercel Labs 技能",
+      "description": "Small practical set from Vercel Labs, including find-skills (discover and install community skills).",
+      "descriptionZh": "Vercel Labs 的实用小技能集，包含 find-skills（发现并安装社区技能）。",
+      "url": "https://github.com/vercel-labs/skills",
+      "homepage": "https://github.com/vercel-labs/skills",
+      "skillCount": 4
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-plugin-capabilities",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Manage skills and MCP servers from the Web UI Settings. 在设置页管理 dsh 的技能与 MCP 服务器。",
   "type": "module",
   "main": "lib/index.js",
@@ -47,6 +47,7 @@
     "lib",
     "src",
     "skills",
+    "market",
     "cordis.patch.yml",
     "LICENSE"
   ],

package/src/client/CapabilitiesSection.tsx

@@ -1,12 +1,12 @@
 /** Settings top-level “技能与 MCP” section: one nav entry beside 通用设置 and
- * 模型, with the Skills and MCP pages as internal tabs. The two pages are the
- * same components the Plugins section used to host — promoted a level instead
- * of squeezed under 插件. Pure composition; data still arrives through the
- * injected faces. */
+ * 模型, with the Skills, MCP, and 市场 pages as internal tabs. The pages are
+ * pure composition; data still arrives through the injected faces. */
 
 import { useEffect, useId, useRef, useState } from 'react'
 import type { ReactElement } from 'react'
 import { CSS } from './css.ts'
+import { MarketTab } from './MarketTab.tsx'
+import type { MarketInjected } from './MarketTab.tsx'
 import { McpTab } from './McpTab.tsx'
 import type { McpInjected } from './McpTab.tsx'
 import { SkillsTab } from './SkillsTab.tsx'
@@ -17,18 +17,20 @@ export function CapabilitiesSection(props: {
   t: Translate
   skills: SkillsInjected
   mcp: McpInjected
+  market: MarketInjected
 }): ReactElement {
-  const { t, skills, mcp } = props
+  const { t, skills, mcp, market } = props
   const tabsId = useId()
   const tabRefs = useRef<Array<HTMLButtonElement | null>>([])
   const rows = [
     { id: 'skills', label: t('skillsTab') },
     { id: 'mcp', label: t('mcpTab') },
+    { id: 'market', label: t('marketTab') },
   ]
   const [activeId, setActiveId] = useState('skills')
   // The skills page mounts immediately; a tab mounts only when first
   // selected, then stays mounted while hidden so editor drafts and outcome
-  // banners survive switching between the two views.
+  // banners survive switching between the views.
   const [visitedIds, setVisitedIds] = useState<ReadonlySet<string>>(() => new Set(['skills']))
 
   useEffect(() => {
@@ -93,7 +95,9 @@ export function CapabilitiesSection(props: {
             >
               {row.id === 'skills'
                 ? <SkillsTab t={t} injected={skills} />
-                : <McpTab t={t} injected={mcp} />}
+                : row.id === 'mcp'
+                  ? <McpTab t={t} injected={mcp} />
+                  : <MarketTab t={t} market={market} mcp={mcp} />}
             </div>
           )
         })}

package/src/client/MarketTab.tsx

@@ -0,0 +1,263 @@
+/** Settings “市场” tab: browse and install curated skill repositories and
+ * MCP servers. Two segments (skills / MCP) with independently fetched
+ * indexes; installs reuse the repositories and MCP-row plumbing, so a
+ * skills install lands live in the catalog and an MCP install raises the
+ * same pending-restart notice as the MCP tab. */
+
+import { useCallback, useEffect, useState } from 'react'
+import type { ReactElement } from 'react'
+import { Button, IconRefreshOutline14, Modal, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
+import { CSS } from './css.ts'
+import type { MarketRepoView, MarketServerView, Translate } from './index.ts'
+import type { McpInjected } from './McpTab.tsx'
+
+/** One registered skill repository as the roots route reports it. */
+export interface RootRowView {
+  id: string
+  kind: 'local' | 'git'
+  label: string
+  url?: string
+  ref?: string
+  path?: string
+  roots: string[]
+  materialDir?: string
+  addedAt: number
+  /** False once one of its scan roots vanished from disk. */
+  live: boolean
+}
+
+export interface MarketInjected {
+  skillsIndex(): Promise<{ source: 'remote' | 'bundled'; repos: Array<MarketRepoView & { installedId: string | null }> }>
+  mcpIndex(): Promise<{ source: 'remote' | 'bundled'; servers: Array<MarketServerView & { installed: boolean }> }>
+  installSkillRepo(url: string): Promise<{ ok: boolean; root: RootRowView }>
+  installMcp(id: string): Promise<{ ok: boolean; id: string }>
+  removeRoot(id: string): Promise<{ ok: boolean }>
+}
+
+/** UI language hint for the index's zh display fields. */
+const zhUi = (): boolean => navigator.language.toLowerCase().startsWith('zh')
+
+type Segment = 'skills' | 'mcp'
+
+export function MarketTab(props: { t: Translate; market: MarketInjected; mcp: McpInjected }): ReactElement {
+  const { t, market, mcp } = props
+  const [segment, setSegment] = useState<Segment>('skills')
+  const [repos, setRepos] = useState<Array<MarketRepoView & { installedId: string | null }> | null>(null)
+  const [servers, setServers] = useState<Array<MarketServerView & { installed: boolean }> | null>(null)
+  const [source, setSource] = useState<'remote' | 'bundled'>('remote')
+  const [busyId, setBusyId] = useState<string | null>(null)
+  const [outcome, setOutcome] = useState<{ ok: boolean; text: string } | null>(null)
+  const [confirmUninstall, setConfirmUninstall] = useState<{ kind: 'root' | 'mcp'; id: string; name: string } | null>(null)
+  const [reload, setReload] = useState(0)
+
+  const refreshSkills = useCallback((): void => {
+    setRepos(null)
+    void market.skillsIndex().then(
+      (body) => { setRepos(body.repos); setSource(body.source) },
+      (error: Error) => { setRepos([]); setOutcome({ ok: false, text: `${t('failed')}: ${String(error.message ?? error)}` }) },
+    )
+  }, [market, t])
+
+  const refreshMcp = useCallback((): void => {
+    setServers(null)
+    void market.mcpIndex().then(
+      (body) => { setServers(body.servers); setSource(body.source) },
+      (error: Error) => { setServers([]); setOutcome({ ok: false, text: `${t('failed')}: ${String(error.message ?? error)}` }) },
+    )
+  }, [market, t])
+
+  useEffect(() => {
+    // Refetch the visible segment when it changes or the reload ticks; the
+    // hidden segment keeps its last state as a cache.
+    if (segment === 'skills') refreshSkills()
+    else refreshMcp()
+  }, [segment, reload, refreshSkills, refreshMcp])
+
+  const doInstallRepo = async (repo: MarketRepoView): Promise<void> => {
+    setBusyId(repo.id)
+    setOutcome(null)
+    try {
+      await market.installSkillRepo(repo.url)
+      setOutcome({ ok: true, text: t('marketRepoInstalled') })
+      refreshSkills()
+    } catch (error) {
+      setOutcome({ ok: false, text: `${t('failed')}: ${String(error instanceof Error ? error.message : error)}` })
+      refreshSkills()
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  const doInstallMcp = async (server: MarketServerView): Promise<void> => {
+    setBusyId(server.id)
+    setOutcome(null)
+    try {
+      await market.installMcp(server.id)
+      setOutcome({ ok: true, text: t('restartNeeded') })
+      refreshMcp()
+    } catch (error) {
+      setOutcome({ ok: false, text: `${t('failed')}: ${String(error instanceof Error ? error.message : error)}` })
+      refreshMcp()
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  const doUninstall = async (): Promise<void> => {
+    if (confirmUninstall === null) return
+    const target = confirmUninstall
+    setBusyId(target.id)
+    try {
+      if (target.kind === 'root') {
+        await market.removeRoot(target.id)
+        setOutcome({ ok: true, text: t('rootRemoved') })
+        refreshSkills()
+      } else {
+        await mcp.remove(target.id)
+        setOutcome({ ok: true, text: t('restartNeeded') })
+        refreshMcp()
+      }
+    } catch (error) {
+      setOutcome({ ok: false, text: `${t('failed')}: ${String(error instanceof Error ? error.message : error)}` })
+    } finally {
+      setBusyId(null)
+      setConfirmUninstall(null)
+    }
+  }
+
+  const pick = <T,>(base: T, zh: T | undefined): T => (zhUi() && zh !== undefined ? zh : base)
+  const title = (entry: { name: string; nameZh?: string }): string => pick(entry.name, entry.nameZh)
+  const desc = (entry: { description: string; descriptionZh?: string }): string => pick(entry.description, entry.descriptionZh)
+
+  return (
+    <div className="dpc-section">
+      <style>{CSS}</style>
+
+      <div className="dpc-head">
+        <h3>{t('marketTitle')}</h3>
+        <span className="dpc-spacer" />
+        <button type="button" className="dpc-refresh" aria-label={t('refresh')} title={t('refresh')} onClick={() => setReload((value) => value + 1)}>
+          <IconRefreshOutline14 size={14} aria-hidden="true" />
+        </button>
+      </div>
+      <p className="dpc-intro">{t('marketIntro')}</p>
+
+      <div className="dpc-segments" role="tablist" aria-label={t('marketTitle')}>
+        <button type="button" role="tab" aria-selected={segment === 'skills'} className="dpc-segment" data-active={segment === 'skills' ? 'true' : undefined} onClick={() => setSegment('skills')}>
+          {t('marketSkills')}
+        </button>
+        <button type="button" role="tab" aria-selected={segment === 'mcp'} className="dpc-segment" data-active={segment === 'mcp' ? 'true' : undefined} onClick={() => setSegment('mcp')}>
+          {t('marketMcp')}
+        </button>
+      </div>
+
+      {outcome !== null && (
+        <div className="dpc-banner" data-kind={outcome.ok ? 'ok' : 'error'} role="status">
+          <StateDot state={outcome.ok ? 'done' : 'error'} size={10} />
+          <div className="dpc-bannerBody"><span>{outcome.text}</span></div>
+        </div>
+      )}
+      {source === 'bundled' && (
+        <div className="dpc-banner" data-kind="info" role="status">
+          <StateDot state="ongoing" size={10} />
+          <div className="dpc-bannerBody"><span>{t('marketOffline')}</span></div>
+        </div>
+      )}
+
+      {segment === 'skills' && (
+        <>
+          <p className="dpc-intro">{t('marketSkillsIntro')}</p>
+          {repos === null && <p className="dpc-empty">{t('loading')}</p>}
+          {repos !== null && repos.length === 0 && <p className="dpc-empty">{t('marketEmpty')}</p>}
+          {repos !== null && repos.length > 0 && (
+            <ul className="dpc-cards">
+              {repos.map((repo) => (
+                <li className="dpc-card" key={repo.id}>
+                  <div className="dpc-cardTop">
+                    <strong className="dpc-cardTitle" title={repo.url}>{title(repo)}</strong>
+                    {repo.skillCount !== undefined && <span className="dpc-tag">{t('marketSkillCount').replace('{n}', String(repo.skillCount))}</span>}
+                    {repo.installedId !== null && <span className="dpc-tag" data-kind="source">{t('marketInstalled')}</span>}
+                  </div>
+                  <p className="dpc-cardDesc">{desc(repo)}</p>
+                  <div className="dpc-cardRow">
+                    <a className="dpc-link" href={repo.homepage ?? repo.url} target="_blank" rel="noreferrer">{t('marketHome')}</a>
+                    <span className="dpc-spacer" />
+                    {repo.installedId !== null ? (
+                      <Button variant="ghost" size="sm" disabled={busyId !== null} onClick={() => setConfirmUninstall({ kind: 'root', id: repo.installedId as string, name: title(repo) })}>
+                        {t('marketUninstall')}
+                      </Button>
+                    ) : (
+                      <Button variant="primary" size="sm" disabled={busyId !== null} onClick={() => void doInstallRepo(repo)}>
+                        {busyId === repo.id ? t('marketInstalling') : t('marketInstall')}
+                      </Button>
+                    )}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </>
+      )}
+
+      {segment === 'mcp' && (
+        <>
+          <p className="dpc-intro">{t('marketMcpIntro')}</p>
+          {servers === null && <p className="dpc-empty">{t('loading')}</p>}
+          {servers !== null && servers.length === 0 && <p className="dpc-empty">{t('marketEmpty')}</p>}
+          {servers !== null && servers.length > 0 && (
+            <ul className="dpc-cards">
+              {servers.map((server) => (
+                <li className="dpc-card" key={server.id}>
+                  <div className="dpc-cardTop">
+                    <strong className="dpc-cardTitle" title={server.id}>{title(server)}</strong>
+                    <span className="dpc-tag">{server.transport}</span>
+                    {server.runtime !== undefined && <span className="dpc-tag">{server.runtime}</span>}
+                    {server.installed && <span className="dpc-tag" data-kind="source">{t('marketInstalled')}</span>}
+                  </div>
+                  <p className="dpc-cardDesc">{desc(server)}</p>
+                  {server.envKeys !== undefined && server.envKeys.length > 0 && (
+                    <p className="dpc-envHint">{t('marketNeedsEnv')}: {server.envKeys.join(', ')}</p>
+                  )}
+                  <div className="dpc-cardRow">
+                    <a className="dpc-link" href={server.homepage} target="_blank" rel="noreferrer">{t('marketHome')}</a>
+                    <span className="dpc-spacer" />
+                    {server.installed ? (
+                      <Button variant="ghost" size="sm" disabled={busyId !== null} onClick={() => void mcp.list().then(
+                        (body) => {
+                          const row = body.servers.find(item => item.serverName === server.id)
+                          if (row !== undefined) setConfirmUninstall({ kind: 'mcp', id: row.id, name: server.id })
+                        },
+                        (error: Error) => setOutcome({ ok: false, text: `${t('failed')}: ${String(error.message ?? error)}` }),
+                      )}>
+                        {t('marketUninstall')}
+                      </Button>
+                    ) : (
+                      <Button variant="primary" size="sm" disabled={busyId !== null} onClick={() => void doInstallMcp(server)}>
+                        {busyId === server.id ? t('marketInstalling') : t('marketAdd')}
+                      </Button>
+                    )}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </>
+      )}
+
+      <Modal
+        open={confirmUninstall !== null}
+        onClose={() => setConfirmUninstall(null)}
+        title={t('marketUninstallConfirm')}
+        description={confirmUninstall?.name ?? undefined}
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setConfirmUninstall(null)}>{t('cancel')}</Button>
+            <Button variant="primary" disabled={busyId !== null} onClick={() => void doUninstall()}>{t('marketUninstall')}</Button>
+          </>
+        }
+      >
+        <p>{confirmUninstall?.kind === 'root' ? t('marketUninstallRootWarn') : t('removeWarn')}</p>
+      </Modal>
+    </div>
+  )
+}