dsh-plugin-capabilities 0.2.0 → 0.3.0

package/README.md

@@ -35,7 +35,11 @@ MCP 行的变更需要重启 dsh 才会进入组合。MCP 页头部有常驻的
 
 ## 市场
 
-「市场」页分两栏：「技能市场」是精选的技能仓库（Anthropic 官方技能集、Superpowers 工作流集等），点「安装」走的就是上文 GitHub 仓库的下载解包流程，装完立即出现在「技能」页；「MCP 市场」是一份精选服务器列表（官方 filesystem/memory/git 等，加上 context7 这类常用第三方），点「添加」直接写入一条 profile 服务器行，和手工添加完全等价。列表数据来自[本插件仓库](https://github.com/qinyre/dsh-plugin-capabilities)的在线索引（`market/*.json`），离线时自动回退到包内快照；需要 API 密钥的服务器会在卡片上标出环境变量名，装好后到 MCP 列表里补填即可。已安装的条目可以直接卸载：技能仓库走仓库移除，MCP 行走服务器删除。
+![「技能市场」](docs/images/screenshot-market-skills.png)
+
+![「MCP 市场」](docs/images/screenshot-market-mcp.png)
+
+「市场」页分两栏：「技能市场」是精选的技能仓库（Anthropic 官方技能集、Superpowers 工作流集等），点「安装」走的就是上文 GitHub 仓库的下载解包流程，装完立即出现在「技能」页；「MCP 市场」是一份精选服务器列表（官方 filesystem/memory/git 等，加上 context7 这类常用第三方），点「添加」直接写入一条 profile 服务器行，和手工添加完全等价。0.3.0 起点开条目可以看详情：技能仓库列出里面具体有哪些技能，MCP 服务器列出启动命令、需要的环境变量和提供的工具，不必再去 GitHub 主页。列表数据来自[本插件仓库](https://github.com/qinyre/dsh-plugin-capabilities)的在线索引（`market/*.json`），离线时自动回退到包内快照；需要 API 密钥的服务器会在卡片上标出环境变量名，装好后到 MCP 列表里补填即可。已安装的条目可以直接卸载：技能仓库走仓库移除，MCP 行走服务器删除。
 
 ## 安装
 

package/lib/client.js

@@ -58,7 +58,7 @@ var CSS = `
 .dpc-refresh:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:-2px}
 .dpc-empty{margin:0;font-size:13px;line-height:20px;color:var(--dsw-alias-label-tertiary)}
 .dpc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:10px;margin:0;padding:0;list-style:none}
-.dpc-card{display:flex;flex-direction:column;gap:8px;min-width:0;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-bg-layer-3);padding:12px 14px}
+.dpc-card{display:flex;flex-direction:column;gap:8px;min-width:0;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-bg-layer-3);padding:12px 14px;cursor:pointer}
 .dpc-card:hover{background:var(--dsw-alias-interactive-bg-hover)}
 .dpc-cardTop{display:flex;align-items:center;gap:8px}
 .dpc-cardTitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px;font-weight:600;font-family:var(--ds-font-family-code)}
@@ -140,6 +140,11 @@ var CSS = `
 .dpc-format .dpc-form{margin-top:8px}
 .dpc-formatHint{margin:2px 0 0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
 .dpc-code{margin:4px 0 8px;border:1px solid var(--dsw-alias-border-l2);border-radius:6px;padding:8px 10px;overflow-x:auto;background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);font-family:var(--ds-font-family-code);font-size:11px;line-height:17px;white-space:pre}
+/* Market detail modal. */
+.dpc-detailDesc{margin:0;font-size:13px;line-height:20px}
+.dpc-detailSection{margin-top:12px;display:flex;flex-direction:column;gap:6px}
+.dpc-detailLabel{font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary)}
+.dpc-detailTags{display:flex;flex-wrap:wrap;gap:4px}
 @media(max-width:680px){.dpc-cards{grid-template-columns:minmax(0,1fr)}}
 `;
 
@@ -157,6 +162,7 @@ function MarketTab(props) {
   const [busyId, setBusyId] = (0, import_react.useState)(null);
   const [outcome, setOutcome] = (0, import_react.useState)(null);
   const [confirmUninstall, setConfirmUninstall] = (0, import_react.useState)(null);
+  const [detail, setDetail] = (0, import_react.useState)(null);
   const [reload, setReload] = (0, import_react.useState)(0);
   const refreshSkills = (0, import_react.useCallback)(() => {
     setRepos(null);
@@ -240,6 +246,11 @@ function MarketTab(props) {
   const pick = (base, zh2) => zhUi() && zh2 !== void 0 ? zh2 : base;
   const title = (entry) => pick(entry.name, entry.nameZh);
   const desc = (entry) => pick(entry.description, entry.descriptionZh);
+  const cardStop = (event) => {
+    event.stopPropagation();
+  };
+  const detailRepo = detail !== null && detail.kind === "skills" && repos !== null ? repos.find((repo) => repo.id === detail.id) ?? null : null;
+  const detailServer = detail !== null && detail.kind === "mcp" && servers !== null ? servers.find((server) => server.id === detail.id) ?? null : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-section", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: CSS }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-head", children: [
@@ -264,7 +275,7 @@ function MarketTab(props) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dpc-intro", children: t("marketSkillsIntro") }),
       repos === null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dpc-empty", children: t("loading") }),
       repos !== null && repos.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dpc-empty", children: t("marketEmpty") }),
-      repos !== null && repos.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "dpc-cards", children: repos.map((repo) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "dpc-card", children: [
+      repos !== null && repos.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "dpc-cards", children: repos.map((repo) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "dpc-card", onClick: () => setDetail({ kind: "skills", id: repo.id }), children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-cardTop", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { className: "dpc-cardTitle", title: repo.url, children: title(repo) }),
           repo.skillCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-tag", children: t("marketSkillCount").replace("{n}", String(repo.skillCount)) }),
@@ -272,9 +283,16 @@ function MarketTab(props) {
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dpc-cardDesc", children: desc(repo) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-cardRow", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "dpc-link", href: repo.homepage ?? repo.url, target: "_blank", rel: "noreferrer", children: t("marketHome") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "dpc-link", onClick: () => setDetail({ kind: "skills", id: repo.id }), children: t("marketDetail") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "dpc-link", href: repo.homepage ?? repo.url, target: "_blank", rel: "noreferrer", onClick: cardStop, children: t("marketHome") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-spacer" }),
-          repo.installedId !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.Button, { variant: "ghost", size: "sm", disabled: busyId !== null, onClick: () => setConfirmUninstall({ kind: "root", id: repo.installedId, name: title(repo) }), children: t("marketUninstall") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.Button, { variant: "primary", size: "sm", disabled: busyId !== null, onClick: () => void doInstallRepo(repo), children: busyId === repo.id ? t("marketInstalling") : t("marketInstall") })
+          repo.installedId !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.Button, { variant: "ghost", size: "sm", disabled: busyId !== null, onClick: (event) => {
+            event.stopPropagation();
+            setConfirmUninstall({ kind: "root", id: repo.installedId, name: title(repo) });
+          }, children: t("marketUninstall") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.Button, { variant: "primary", size: "sm", disabled: busyId !== null, onClick: (event) => {
+            event.stopPropagation();
+            void doInstallRepo(repo);
+          }, children: busyId === repo.id ? t("marketInstalling") : t("marketInstall") })
         ] })
       ] }, repo.id)) })
     ] }),
@@ -282,7 +300,7 @@ function MarketTab(props) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dpc-intro", children: t("marketMcpIntro") }),
       servers === null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dpc-empty", children: t("loading") }),
       servers !== null && servers.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dpc-empty", children: t("marketEmpty") }),
-      servers !== null && servers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "dpc-cards", children: servers.map((server) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "dpc-card", children: [
+      servers !== null && servers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "dpc-cards", children: servers.map((server) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "dpc-card", onClick: () => setDetail({ kind: "mcp", id: server.id }), children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-cardTop", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { className: "dpc-cardTitle", title: server.id, children: title(server) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-tag", children: server.transport }),
@@ -296,18 +314,80 @@ function MarketTab(props) {
           server.envKeys.join(", ")
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-cardRow", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "dpc-link", href: server.homepage, target: "_blank", rel: "noreferrer", children: t("marketHome") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "dpc-link", onClick: () => setDetail({ kind: "mcp", id: server.id }), children: t("marketDetail") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "dpc-link", href: server.homepage, target: "_blank", rel: "noreferrer", onClick: cardStop, children: t("marketHome") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-spacer" }),
-          server.installed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.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 !== void 0) setConfirmUninstall({ kind: "mcp", id: row.id, name: server.id });
-            },
-            (error) => setOutcome({ ok: false, text: `${t("failed")}: ${String(error.message ?? error)}` })
-          ), children: t("marketUninstall") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.Button, { variant: "primary", size: "sm", disabled: busyId !== null, onClick: () => void doInstallMcp(server), children: busyId === server.id ? t("marketInstalling") : t("marketAdd") })
+          server.installed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.Button, { variant: "ghost", size: "sm", disabled: busyId !== null, onClick: (event) => {
+            event.stopPropagation();
+            void mcp.list().then(
+              (body) => {
+                const row = body.servers.find((item) => item.serverName === server.id);
+                if (row !== void 0) setConfirmUninstall({ kind: "mcp", id: row.id, name: server.id });
+              },
+              (error) => setOutcome({ ok: false, text: `${t("failed")}: ${String(error.message ?? error)}` })
+            );
+          }, children: t("marketUninstall") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.Button, { variant: "primary", size: "sm", disabled: busyId !== null, onClick: (event) => {
+            event.stopPropagation();
+            void doInstallMcp(server);
+          }, children: busyId === server.id ? t("marketInstalling") : t("marketAdd") })
         ] })
       ] }, server.id)) })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_dsh_client_ui_primitives.Modal,
+      {
+        open: detailRepo !== null || detailServer !== null,
+        onClose: () => setDetail(null),
+        title: detailRepo !== null ? title(detailRepo) : detailServer !== null ? title(detailServer) : "",
+        footer: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          detailRepo !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "dpc-link", href: detailRepo.homepage ?? detailRepo.url, target: "_blank", rel: "noreferrer", children: t("marketHome") }),
+          detailServer !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "dpc-link", href: detailServer.homepage, target: "_blank", rel: "noreferrer", children: t("marketHome") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-spacer" }),
+          detailRepo !== null && (detailRepo.installedId !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.Button, { variant: "ghost", disabled: busyId !== null, onClick: () => {
+            setConfirmUninstall({ kind: "root", id: detailRepo.installedId, name: title(detailRepo) });
+            setDetail(null);
+          }, children: t("marketUninstall") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.Button, { variant: "primary", disabled: busyId !== null, onClick: () => void doInstallRepo(detailRepo), children: busyId === detailRepo.id ? t("marketInstalling") : t("marketInstall") })),
+          detailServer !== null && (detailServer.installed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.Button, { variant: "ghost", disabled: busyId !== null, onClick: () => void mcp.list().then(
+            (body) => {
+              const row = body.servers.find((item) => item.serverName === detailServer.id);
+              if (row !== void 0) {
+                setConfirmUninstall({ kind: "mcp", id: row.id, name: title(detailServer) });
+                setDetail(null);
+              }
+            },
+            (error) => setOutcome({ ok: false, text: `${t("failed")}: ${String(error.message ?? error)}` })
+          ), children: t("marketUninstall") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.Button, { variant: "primary", disabled: busyId !== null, onClick: () => void doInstallMcp(detailServer), children: busyId === detailServer.id ? t("marketInstalling") : t("marketAdd") }))
+        ] }),
+        children: [
+          detailRepo !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dpc-detailDesc", children: desc(detailRepo) }),
+            detailRepo.skills !== void 0 && detailRepo.skills.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-detailSection", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpc-detailLabel", children: t("marketSkillListLabel") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpc-detailTags", children: detailRepo.skills.map((name2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-tag", children: name2 }, name2)) })
+            ] })
+          ] }),
+          detailServer !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dpc-detailDesc", children: desc(detailServer) }),
+            detailServer.command !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-detailSection", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpc-detailLabel", children: t("marketCommandLabel") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "dpc-code", children: [detailServer.command, ...detailServer.args ?? []].join(" ") })
+            ] }),
+            detailServer.transport === "streamable-http" && detailServer.url !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-detailSection", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpc-detailLabel", children: t("marketCommandLabel") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "dpc-code", children: detailServer.url })
+            ] }),
+            detailServer.envKeys !== void 0 && detailServer.envKeys.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-detailSection", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpc-detailLabel", children: t("marketNeedsEnv") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpc-detailTags", children: detailServer.envKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-tag", children: key }, key)) })
+            ] }),
+            detailServer.tools !== void 0 && detailServer.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-detailSection", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpc-detailLabel", children: t("marketToolsLabel") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpc-detailTags", children: detailServer.tools.map((name2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-tag", children: name2 }, name2)) })
+            ] })
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_dsh_client_ui_primitives.Modal,
       {
@@ -1588,7 +1668,11 @@ var zh = {
   marketNeedsEnv: "\u9700\u8981\u73AF\u5883\u53D8\u91CF",
   marketRepoInstalled: "\u4ED3\u5E93\u5DF2\u5B89\u88C5\uFF0C\u6280\u80FD\u7A0D\u5019\u51FA\u73B0\u5728\u300C\u6280\u80FD\u300D\u9875\u5217\u8868\u3002",
   marketUninstallConfirm: "\u786E\u8BA4\u79FB\u9664\uFF1F",
-  marketUninstallRootWarn: "\u5C06\u53D6\u6D88\u626B\u63CF\u8BE5\u4ED3\u5E93\u5E76\u5220\u9664\u4E0B\u8F7D\u7684\u526F\u672C\uFF08\u79FB\u9664\u540E\u53EF\u91CD\u65B0\u5B89\u88C5\uFF09\u3002"
+  marketUninstallRootWarn: "\u5C06\u53D6\u6D88\u626B\u63CF\u8BE5\u4ED3\u5E93\u5E76\u5220\u9664\u4E0B\u8F7D\u7684\u526F\u672C\uFF08\u79FB\u9664\u540E\u53EF\u91CD\u65B0\u5B89\u88C5\uFF09\u3002",
+  marketDetail: "\u8BE6\u60C5",
+  marketSkillListLabel: "\u6280\u80FD\u6E05\u5355",
+  marketToolsLabel: "\u63D0\u4F9B\u5DE5\u5177",
+  marketCommandLabel: "\u542F\u52A8\u547D\u4EE4"
 };
 var en = {
   sectionNav: "Skills & MCP",
@@ -1714,7 +1798,11 @@ var en = {
   marketNeedsEnv: "Needs environment variables",
   marketRepoInstalled: "Repository installed \u2014 its skills appear on the Skills tab shortly.",
   marketUninstallConfirm: "Uninstall?",
-  marketUninstallRootWarn: "Stops scanning the repository and deletes the downloaded copy (you can reinstall later)."
+  marketUninstallRootWarn: "Stops scanning the repository and deletes the downloaded copy (you can reinstall later).",
+  marketDetail: "Details",
+  marketSkillListLabel: "Skills included",
+  marketToolsLabel: "Tools provided",
+  marketCommandLabel: "Launch command"
 };
 
 // src/client/index.ts