dsh-plugin-capabilities 0.1.4 → 0.1.6

package/README.md

@@ -3,7 +3,7 @@
 [![npm version](https://img.shields.io/npm/v/dsh-plugin-capabilities)](https://www.npmjs.com/package/dsh-plugin-capabilities)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
 
-在 dsh 设置页管理技能与 MCP 服务器。本插件在插件区新增「技能」「MCP」两个标签页，技能目录和 profile 的 MCP 服务器行都能直接在页面上查看与维护，不必手工编辑文件；来自 Claude Code、Codex 等其他 agent 的技能与 MCP 配置也能一并纳入。`dsh web` 与 [DSH Desktop](https://github.com/qinyre/dsh-Desktop) 均可使用。
+在 dsh 设置页管理技能与 MCP 服务器。本插件在设置里新增一级分区「技能与 MCP」（与「通用设置」「模型」并列），内含「技能」「MCP」两个标签页，技能目录和 profile 的 MCP 服务器行都能直接在页面上查看与维护，不必手工编辑文件；来自 Claude Code、Codex 等其他 agent 的技能与 MCP 配置也能一并纳入。`dsh web` 与 [DSH Desktop](https://github.com/qinyre/dsh-Desktop) 均可使用。
 
 ## 技能
 
@@ -13,6 +13,8 @@
 
 如果机器上存在 Claude Code 或 Codex 的技能目录（`~/.claude/skills`、`~/.codex/skills`），它们会作为额外的扫描根自动进入目录。文件不会被复制，改动留在原地，两边实时同步。
 
+本插件还自带两条只读技能：skill-creator（创建与迭代改进技能，来自 [anthropics/skills](https://github.com/anthropics/skills)，Apache-2.0）与 find-skills（发现并安装社区技能，来自 [vercel-labs/skills](https://github.com/vercel-labs/skills)，MIT）。它们随插件进入扫描目录，设置页里来源显示为「自定义」，会话中可直接调用；升级插件即更新、卸载插件即移除，不向 `DSH_HOME` 写入任何文件。
+
 ## MCP
 
 ![「MCP」标签页](docs/images/screenshot-mcp.png)
@@ -29,7 +31,7 @@ MCP 行的变更需要重启 dsh 才会进入组合。MCP 页头部有常驻的
 dsh plugin --profile web add dsh-plugin-capabilities
 ```
 
-安装后打开 设置 → 插件，即可看到新增的「技能」与「MCP」标签页。开发时也可以直接安装本地源码检出：`dsh plugin --profile web add file:/path/to/dsh-plugin-capabilities`，包内的 `prepare` 脚本会自动构建出 `lib/`。
+安装后打开设置，即可在一级导航里看到「技能与 MCP」分区（位于「模型」与「插件」之间）。开发时也可以直接安装本地源码检出：`dsh plugin --profile web add file:/path/to/dsh-plugin-capabilities`，包内的 `prepare` 脚本会自动构建出 `lib/`。
 
 ## 工作原理
 

package/lib/client.js

@@ -28,15 +28,23 @@ __export(index_exports, {
   name: () => name
 });
 module.exports = __toCommonJS(index_exports);
-var import_react3 = require("react");
+var import_react4 = require("react");
 
-// src/client/McpTab.tsx
-var import_react = require("react");
-var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+// src/client/CapabilitiesSection.tsx
+var import_react3 = require("react");
 
 // src/client/css.ts
 var CSS = `
 .dpc-section{display:flex;flex-direction:column;gap:14px;width:100%;max-width:760px;color:var(--dsw-alias-label-primary)}
+.dpc-heading{margin:0;font-size:18px;line-height:26px;font-weight:600}
+/* Top-level section's internal tabs \u2014 same underline-tab look as the host's
+   Plugins section so the promoted placement still reads as one family. */
+.dpc-tabs{display:flex;align-items:flex-end;gap:22px;border-bottom:1px solid var(--dsw-alias-border-l2);margin-top:2px}
+.dpc-tab{position:relative;border:0;padding:7px 1px 9px;background:transparent;color:var(--dsw-alias-label-tertiary);font:inherit;font-size:13px;line-height:20px;cursor:pointer}
+.dpc-tab:hover,.dpc-tab[data-active='true']{color:var(--dsw-alias-label-primary)}
+.dpc-tab[data-active='true']::after,.dpc-tab:focus-visible::after{position:absolute;right:0;bottom:-1px;left:0;height:2px;border-radius:2px 2px 0 0;background:var(--dsw-alias-label-primary);content:''}
+.dpc-tab:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px;border-radius:2px;color:var(--dsw-alias-label-primary)}
+.dpc-tabPanel{min-width:0;padding-top:2px}
 .dpc-head{display:flex;align-items:center;gap:8px}
 .dpc-head h3{margin:0;font-size:13px;line-height:20px;font-weight:600}
 .dpc-head>svg{flex:none;color:var(--dsw-alias-label-tertiary)}
@@ -70,8 +78,8 @@ var CSS = `
 .dpc-label{display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary)}
 .dpc-label>span:first-child{color:var(--dsw-alias-label-tertiary)}
 .dpc-input,.dpc-textarea,.dpc-select{width:100%;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:7px 10px;outline:none;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px}
-.dpc-textarea{min-height:120px;resize:vertical;font-family:var(--ds-font-family-code);line-height:1.5}
-.dpc-textarea[data-short='true']{min-height:64px}
+.dpc-textarea{min-height:240px;resize:vertical;font-family:var(--ds-font-family-code);line-height:1.5}
+.dpc-textarea[data-short='true']{min-height:96px}
 .dpc-input:focus-visible,.dpc-textarea:focus-visible,.dpc-select: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)}
 .dpc-checks{display:flex;gap:16px;font-size:13px;line-height:20px}
 .dpc-checks label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
@@ -80,6 +88,11 @@ var CSS = `
    its own scroll so title, intro, and footer stay pinned. The doubled class
    beats the host dialog's module CSS regardless of injection order. */
 .dpc-modalWide.dpc-modalWide{width:min(680px,100%)}
+/* Editor dialogs (new skill / server): 640px wide so markdown bodies and
+   command/arg/env lines stop wrapping mid-token; the content column scrolls
+   on short viewports instead of clipping past the dialog edge. */
+.dpc-modalForm.dpc-modalForm{width:min(640px,100%)}
+.dpc-modalScroll.dpc-modalScroll{max-height:calc(100vh - 160px);overflow-y:auto}
 .dpc-importScroll{display:flex;flex-direction:column;gap:14px;max-height:min(400px,52vh);overflow-y:auto;padding:2px 4px 2px 2px}
 .dpc-importGroup{display:flex;flex-direction:column;gap:8px}
 .dpc-importHead{display:flex;align-items:center;gap:8px;padding:0 2px}
@@ -89,6 +102,8 @@ var CSS = `
 `;
 
 // src/client/McpTab.tsx
+var import_react = require("react");
+var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 var import_jsx_runtime = require("react/jsx-runtime");
 function importGroups(items) {
   const label = (agent) => agent === "claude-code" ? "Claude Code" : agent === "codex" ? "Codex" : agent;
@@ -335,6 +350,8 @@ function McpTab(props) {
         open: editor !== null,
         onClose: () => setEditor(null),
         title: editor !== null && editor.id !== "" ? t("editServer") : t("addServer"),
+        className: "dpc-modalForm",
+        contentClassName: "dpc-modalScroll",
         children: editor !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-form", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "dpc-label", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("serverName") }),
@@ -664,6 +681,8 @@ function SkillsTab(props) {
         open: editor !== null,
         onClose: () => setEditor(null),
         title: editor === null ? "" : editor.mode === "create" ? t("newSkill") : editor.mode === "edit" ? t("editSkill") : t("viewSkill"),
+        className: "dpc-modalForm",
+        contentClassName: "dpc-modalScroll",
         children: editor !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "dpc-form", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "dpc-label", children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("skillName") }),
@@ -765,8 +784,94 @@ function SkillsTab(props) {
   ] });
 }
 
+// src/client/CapabilitiesSection.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function CapabilitiesSection(props) {
+  const { t, skills, mcp } = props;
+  const tabsId = (0, import_react3.useId)();
+  const tabRefs = (0, import_react3.useRef)([]);
+  const rows = [
+    { id: "skills", label: t("skillsTab") },
+    { id: "mcp", label: t("mcpTab") }
+  ];
+  const [activeId, setActiveId] = (0, import_react3.useState)("skills");
+  const [visitedIds, setVisitedIds] = (0, import_react3.useState)(() => /* @__PURE__ */ new Set(["skills"]));
+  (0, import_react3.useEffect)(() => {
+    setVisitedIds((previous) => {
+      if (previous.has(activeId)) return previous;
+      return /* @__PURE__ */ new Set([...previous, activeId]);
+    });
+  }, [activeId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "dpc-section", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: CSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "dpc-heading", children: t("sectionNav") }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dpc-tabs", role: "tablist", "aria-label": t("sectionNav"), children: rows.map((row, index) => {
+      const selected = row.id === activeId;
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          ref: (element) => {
+            tabRefs.current[index] = element;
+          },
+          id: `${tabsId}-tab-${row.id}`,
+          type: "button",
+          role: "tab",
+          className: "dpc-tab",
+          "aria-selected": selected,
+          "aria-controls": `${tabsId}-panel-${row.id}`,
+          "data-active": selected ? "true" : void 0,
+          tabIndex: selected ? 0 : -1,
+          onClick: () => {
+            setActiveId(row.id);
+          },
+          onKeyDown: (event) => {
+            let nextIndex;
+            switch (event.key) {
+              case "ArrowRight":
+                nextIndex = (index + 1) % rows.length;
+                break;
+              case "ArrowLeft":
+                nextIndex = (index - 1 + rows.length) % rows.length;
+                break;
+              case "Home":
+                nextIndex = 0;
+                break;
+              case "End":
+                nextIndex = rows.length - 1;
+                break;
+              default:
+                return;
+            }
+            event.preventDefault();
+            setActiveId(rows[nextIndex]?.id ?? "skills");
+            tabRefs.current[nextIndex]?.focus();
+          },
+          children: row.label
+        },
+        row.id
+      );
+    }) }),
+    rows.filter((row) => row.id === activeId || visitedIds.has(row.id)).map((row) => {
+      const selected = row.id === activeId;
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          id: `${tabsId}-panel-${row.id}`,
+          className: "dpc-tabPanel",
+          role: "tabpanel",
+          "aria-labelledby": `${tabsId}-tab-${row.id}`,
+          hidden: !selected,
+          children: row.id === "skills" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkillsTab, { t, injected: skills }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(McpTab, { t, injected: mcp })
+        },
+        row.id
+      );
+    })
+  ] });
+}
+
 // src/client/locales.ts
 var zh = {
+  sectionNav: "\u6280\u80FD\u4E0E MCP",
   skillsTab: "\u6280\u80FD",
   mcpTab: "MCP",
   skillsTitle: "\u6280\u80FD\u7BA1\u7406",
@@ -837,6 +942,7 @@ var zh = {
   failed: "\u64CD\u4F5C\u5931\u8D25"
 };
 var en = {
+  sectionNav: "Skills & MCP",
   skillsTab: "Skills",
   mcpTab: "MCP",
   skillsTitle: "Skills",
@@ -946,25 +1052,14 @@ function apply(ctx) {
     },
     desktop: window.dshDesktop !== void 0
   };
-  ctx.slots.inject("settings.plugins.tab", () => {
-    return ctx.slots.register({
-      name: "settings.plugins.tab",
-      id: "capabilities-skills",
-      order: 30,
-      label: () => t("skillsTab"),
-      locale: NS,
-      inject: () => skillsInjected
-    }, () => (0, import_react3.createElement)(SkillsTab, { t, injected: skillsInjected }));
-  });
-  ctx.slots.inject("settings.plugins.tab", () => {
+  ctx.slots.inject("settings.section", () => {
     return ctx.slots.register({
-      name: "settings.plugins.tab",
-      id: "capabilities-mcp",
-      order: 40,
-      label: () => t("mcpTab"),
-      locale: NS,
-      inject: () => mcpInjected
-    }, () => (0, import_react3.createElement)(McpTab, { t, injected: mcpInjected }));
+      name: "settings.section",
+      id: "capabilities",
+      order: 12,
+      label: () => t("sectionNav"),
+      locale: NS
+    }, () => (0, import_react4.createElement)(CapabilitiesSection, { t, skills: skillsInjected, mcp: mcpInjected }));
   });
 }