@max-null/dsh-skill-mcp-center 0.1.0 → 0.2.0

package/client.js

@@ -40,7 +40,17 @@ var CSS = `
 .smc-tab:hover { color: var(--dsw-alias-label-secondary); }
 .smc-tab.active { color: var(--dsw-alias-label-primary); border-bottom-color: var(--dsw-alias-state-business-primary); }
 
-.smc-card { border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; background: var(--dsw-alias-bg-layer-1); min-width: 0; }
+.smc-card { border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; margin-bottom: 10px; background: var(--dsw-alias-bg-layer-1); min-width: 0; overflow: hidden; }
+.smc-card-pad { padding: 14px 16px; }
+.smc-card:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.smc-card-head { display: flex; align-items: center; }
+.smc-card-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 12px 8px 12px 16px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; }
+.smc-card-title:hover .smc-card-name { color: var(--dsw-alias-state-business-primary); }
+.smc-card-name { font-size: 14px; font-weight: 600; color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.smc-card-desc { font-size: 12px; color: var(--dsw-alias-label-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.smc-chevron { flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--dsw-alias-label-caption); border-bottom: 1.5px solid var(--dsw-alias-label-caption); transform: rotate(45deg); transition: transform .15s; margin: 0 14px 0 4px; }
+.smc-chevron.open { transform: rotate(-135deg); }
+.smc-card .smc-detail { margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--dsw-alias-border-l1); }
 .smc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
 .smc-name { font-weight: 600; color: var(--dsw-alias-label-primary); }
 .smc-desc { color: var(--dsw-alias-label-secondary); font-size: 13px; margin-top: 4px; }
@@ -84,13 +94,48 @@ var CSS = `
 .smc-toast.ok { border-color: var(--dsw-alias-state-success-primary); }
 .smc-toast.error { border-color: var(--dsw-alias-state-error-primary); }
 
-.smc-sidebar { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
+.smc-sidebar { display: flex; flex-direction: column; gap: 0; padding: 8px; height: 100%; box-sizing: border-box; }
+.smc-sidebar-head { flex: none; display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--dsw-alias-border-l1); margin-bottom: 6px; }
+.smc-sidebar-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
+.smc-search-sidebar { height: 28px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-base); color: var(--dsw-alias-label-primary); font-size: 13px; outline: none; width: 100%; font-family: inherit; box-sizing: border-box; }
+.smc-search-sidebar:focus { border-color: var(--dsw-alias-state-business-primary); }
+.smc-search-sidebar::placeholder { color: var(--dsw-alias-label-caption); }
 .smc-srv { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; }
 .smc-srv:hover { background: var(--dsw-alias-interactive-bg-hover); }
 .smc-srv-name { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-primary); }
-.smc-srv-count { font-size: 11px; color: var(--dsw-alias-label-tertiary); }
+.smc-srv-desc { font-size: 11px; color: var(--dsw-alias-label-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 10px 4px 26px; flex: none; }
 .smc-srv-state { font-size: 11px; color: var(--dsw-alias-label-caption); padding: 0 10px 6px 26px; }
 .smc-empty { padding: 24px; text-align: center; color: var(--dsw-alias-label-tertiary); font-size: 12.5px; }
+.smc-ns-bar { display: flex; gap: 4px; margin-bottom: 8px; }
+.smc-ns-btn { flex: 1; height: 26px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: none; color: var(--dsw-alias-label-secondary); font-size: 12px; cursor: pointer; font-family: inherit; }
+.smc-ns-btn:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.smc-ns-btn.active { color: var(--dsw-alias-state-business-primary); border-color: var(--dsw-alias-state-business-primary); }
+.smc-md { margin: 6px 0 2px; padding: 8px 10px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; background: var(--dsw-alias-bg-base); font-size: 11px; line-height: 1.6; color: var(--dsw-alias-label-secondary); white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow-y: auto; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; }
+.smc-md-err { margin: 6px 0 2px; font-size: 11px; color: var(--dsw-alias-state-error-primary); }
+.smc-detail .smc-md { margin-top: 8px; }
+.smc-search { position: sticky; top: 0; z-index: 1; height: 30px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-base); color: var(--dsw-alias-label-primary); font-size: 13px; outline: none; width: 240px; font-family: inherit; }
+.smc-search:focus { border-color: var(--dsw-alias-state-business-primary); }
+.smc-search::placeholder { color: var(--dsw-alias-label-caption); }
+.smc-toolbar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 6px 2px; background: var(--dsw-alias-bg-layer-2); }
+.smc-toolbar .smc-search { position: static; width: 100%; flex: 1; margin: 0; }
+.smc-toolbar-count { flex: none; font-size: 12px; color: var(--dsw-alias-label-tertiary); white-space: nowrap; }
+.smc-group { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; font-size: 13px; font-weight: 600; color: var(--dsw-alias-label-secondary); }
+.smc-group .smc-count { font-size: 11px; font-weight: 400; color: var(--dsw-alias-label-caption); }
+.smc-detail { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--dsw-alias-border-l1); font-size: 12px; color: var(--dsw-alias-label-secondary); word-break: break-all; }
+.smc-detail-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
+/* DSH 0.1.x \u8BBE\u7F6E\u5BFC\u822A\u65E0 icon \u5951\u7EA6\uFF08external section \u4E00\u5F8B\u9ED8\u8BA4\u9F7F\u8F6E\uFF09\u3002settings-nav-icon
+   \u6807\u8BB0\u672C\u63D2\u4EF6\u884C\u540E\uFF1A\u9690\u85CF\u58F3\u6E32\u67D3\u7684\u9F7F\u8F6E SVG\uFF0C\u7528 Lucide wrench \u7684 currentColor mask \u66FF\u6362\uFF0C
+   \u8DDF\u968F\u539F\u751F\u5BFC\u822A hover/active \u989C\u8272\u4E14\u4E0D\u6539\u53D8\u58F3\u7684 16px \u56FE\u6807\u8282\u594F\u3002 */
+[data-dsh-skill-mcp-center-settings-nav] > svg:first-child { display: none; }
+[data-dsh-skill-mcp-center-settings-nav]::before {
+  content: '';
+  flex: none;
+  width: 16px;
+  height: 16px;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
 `;
 var cssInjected = false;
 function injectCss() {
@@ -101,6 +146,30 @@ function injectCss() {
   style.textContent = CSS;
   document.head.append(style);
 }
+var SETTINGS_NAV_MARKER = "data-dsh-skill-mcp-center-settings-nav";
+function registerSettingsNavIcon(label) {
+  let disposed = false;
+  const sync = () => {
+    if (disposed) return;
+    const currentLabel = label().trim();
+    const buttons = document.querySelectorAll('[role="dialog"] nav button');
+    for (const button of buttons) {
+      const matches = currentLabel.length > 0 && button.textContent?.trim() === currentLabel;
+      if (matches) button.setAttribute(SETTINGS_NAV_MARKER, "");
+      else button.removeAttribute(SETTINGS_NAV_MARKER);
+    }
+  };
+  sync();
+  const observer = new MutationObserver(sync);
+  observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+  return () => {
+    disposed = true;
+    observer.disconnect();
+    document.querySelectorAll(`[${SETTINGS_NAV_MARKER}]`).forEach((element) => {
+      element.removeAttribute(SETTINGS_NAV_MARKER);
+    });
+  };
+}
 var LOCALE_NS = "@max-null/dsh-skill-mcp-center";
 var t = (key) => key;
 var localeRevision = 0;
@@ -122,10 +191,6 @@ var zhDict = {
   loading: "\u52A0\u8F7D\u4E2D\u2026",
   loadFailed: "\u52A0\u8F7D\u5931\u8D25\uFF1A{e}",
   noSkills: "\u672A\u53D1\u73B0\u4EFB\u4F55 skill\uFF08\u68C0\u67E5 ~/.dsh/skills \u4E0E\u9879\u76EE .agents/skills\uFF09",
-  sourceSystem: "\u7CFB\u7EDF",
-  sourceUser: "\u7528\u6237",
-  sourceWorkspace: "\u5DE5\u4F5C\u533A",
-  sourceRuntime: "\u8FD0\u884C\u65F6",
   sectionSub: "\u7BA1\u7406\uFF08\u9759\u6001\u914D\u7F6E\uFF09\xB7 \u8FD0\u884C\u65F6\u72B6\u6001\u5728\u53F3\u4FA7\u8FB9\u680F",
   modelDisabled: "\u6A21\u578B\u5DF2\u505C\u7528",
   toggleModelVisible: "\u5207\u6362\u6A21\u578B\u53EF\u89C1",
@@ -158,16 +223,28 @@ var zhDict = {
   noMcpServer: "\u672A\u914D\u7F6E MCP server",
   connected: "\u5DF2\u8FDE\u63A5",
   notSynced: "\u672A\u540C\u6B65",
-  failed: "failed"
+  failed: "failed",
+  searchSkills: "\u641C\u7D22 skill\uFF08\u540D\u79F0 / \u63CF\u8FF0\uFF09\u2026",
+  groupGlobal: "\u5168\u5C40",
+  groupWorkspace: "\u5DE5\u4F5C\u533A",
+  groupBundled: "\u5185\u7F6E\uFF08DSH \u5B98\u65B9\uFF09",
+  readOnlyBadge: "\u5185\u7F6E\u53EA\u8BFB",
+  noMatch: "\u6CA1\u6709\u5339\u914D\u7684 skill",
+  detailPath: "\u8DEF\u5F84",
+  detailProvider: "provider",
+  clickForDetail: "\u70B9\u51FB\u67E5\u770B\u8BE6\u60C5",
+  allNamespaces: "\u5168\u90E8",
+  nsGlobal: "\u5168\u5C40",
+  nsWorkspace: "\u5DE5\u4F5C\u533A",
+  noWorkspace: "\u672A\u9009\u62E9\u5DE5\u4F5C\u533A",
+  viewMd: "\u67E5\u770B SKILL.md",
+  hideMd: "\u6536\u8D77",
+  mdLoadFailed: "\u8BFB\u53D6\u5931\u8D25\uFF1A{e}"
 };
 var enDict = {
   loading: "Loading\u2026",
   loadFailed: "Failed to load: {e}",
   noSkills: "No skills found (check ~/.dsh/skills and project .agents/skills)",
-  sourceSystem: "system",
-  sourceUser: "user",
-  sourceWorkspace: "workspace",
-  sourceRuntime: "runtime",
   sectionSub: "Manage (static config) \xB7 runtime status lives in the sidebar",
   modelDisabled: "Model disabled",
   toggleModelVisible: "Toggle model visibility",
@@ -200,7 +277,23 @@ var enDict = {
   noMcpServer: "No MCP server",
   connected: "Connected",
   notSynced: "Not synced",
-  failed: "failed"
+  failed: "failed",
+  searchSkills: "Search skills (name / description)\u2026",
+  groupGlobal: "Global",
+  groupWorkspace: "Workspace",
+  groupBundled: "Built-in (DSH official)",
+  readOnlyBadge: "built-in read-only",
+  noMatch: "No matching skills",
+  detailPath: "path",
+  detailProvider: "provider",
+  clickForDetail: "click for details",
+  allNamespaces: "All",
+  nsGlobal: "Global",
+  nsWorkspace: "Workspace",
+  noWorkspace: "No workspace selected",
+  viewMd: "View SKILL.md",
+  hideMd: "Hide",
+  mdLoadFailed: "Failed to read: {e}"
 };
 var rpc = async () => {
   throw new Error("skill-mcp-center: rpc not wired");
@@ -232,19 +325,25 @@ function useToast() {
   }, [t2]);
   return t2;
 }
-var SOURCE_GROUP = {
-  bundled: { label: "sourceSystem", cls: "bundled" },
-  "user-dsh": { label: "sourceUser", cls: "user" },
-  "user-agents": { label: "sourceUser", cls: "user" },
-  "project-dsh": { label: "sourceWorkspace", cls: "workspace" },
-  "project-agents": { label: "sourceWorkspace", cls: "workspace" },
-  runtime: { label: "sourceRuntime", cls: "runtime" }
-};
+var SKILL_GROUPS = [
+  { key: "global", labelKey: "groupGlobal", sources: ["user-dsh", "user-agents"] },
+  { key: "workspace", labelKey: "groupWorkspace", sources: ["project-dsh", "project-agents"] },
+  { key: "bundled", labelKey: "groupBundled", sources: ["bundled"] }
+];
+function groupOf(source) {
+  const idx = SKILL_GROUPS.findIndex((g) => g.sources.includes(source));
+  return idx === -1 ? SKILL_GROUPS.length : idx;
+}
 function SkillView() {
   useLocale();
   const [items, setItems] = (0, import_react.useState)(null);
   const [error, setError] = (0, import_react.useState)(null);
   const [busy, setBusy] = (0, import_react.useState)(null);
+  const [query, setQuery] = (0, import_react.useState)("");
+  const [expanded, setExpanded] = (0, import_react.useState)(null);
+  const [mdPath, setMdPath] = (0, import_react.useState)(null);
+  const [mdText, setMdText] = (0, import_react.useState)(null);
+  const [mdError, setMdError] = (0, import_react.useState)(null);
   const load = (0, import_react.useCallback)(() => {
     void rpc("listSkills").then(
       (v) => {
@@ -261,7 +360,6 @@ function SkillView() {
   }, [load]);
   if (error !== null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "smc-sub", children: t("loadFailed", { e: error }) });
   if (items === null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "smc-sub", children: t("loading") });
-  if (items.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "smc-sub", children: t("noSkills") });
   const toggle = (s) => {
     setBusy(s.path);
     void rpc("toggleSkill", { path: s.path }).then(
@@ -276,32 +374,117 @@ function SkillView() {
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: items.map((s) => {
-    const g = SOURCE_GROUP[s.source] ?? { label: s.source, cls: "" };
+  const openMd = (s) => {
+    if (mdPath === s.path) {
+      setMdPath(null);
+      setMdText(null);
+      setMdError(null);
+      return;
+    }
+    setMdPath(s.path);
+    setMdText(null);
+    setMdError(null);
+    void rpc("readSkill", { path: s.path }).then(
+      (v) => {
+        setMdText(v);
+      },
+      (e) => {
+        setMdError(e instanceof Error ? e.message : String(e));
+      }
+    );
+  };
+  const q = query.trim().toLowerCase();
+  const visible = items.filter((s) => q === "" || s.name.toLowerCase().includes(q) || s.description.toLowerCase().includes(q));
+  const buckets = SKILL_GROUPS.map(() => []);
+  const other = [];
+  for (const s of visible) {
+    const g = groupOf(s.source);
+    if (g < SKILL_GROUPS.length) buckets[g].push(s);
+    else other.push(s);
+  }
+  const renderCard = (s) => {
+    const open = expanded === s.path;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-name", children: s.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `smc-badge ${g.cls}`, children: t(g.label) }),
-        !s.modelInvocable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-badge disabled", children: t("modelDisabled") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-spacer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-card-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "smc-card-title",
+            "aria-expanded": open,
+            title: t("clickForDetail"),
+            onClick: () => {
+              setExpanded(open ? null : s.path);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-card-name", children: s.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-card-desc", children: s.description })
+            ]
+          }
+        ),
+        s.writable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "button",
           {
             type: "button",
-            className: `smc-toggle${s.writable && s.modelInvocable ? " on" : ""}`,
-            disabled: !s.writable || busy === s.name,
-            title: s.writable ? t("toggleModelVisible") : t("skillReadonly"),
+            className: `smc-toggle${s.modelInvocable ? " on" : ""}`,
+            disabled: busy === s.path,
+            title: t("toggleModelVisible"),
             onClick: () => {
               toggle(s);
             },
             "aria-label": s.modelInvocable ? t("disable") : t("enable")
           }
-        )
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `smc-chevron${open ? " open" : ""}` })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-desc", children: s.description }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-meta", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-badge", children: t("provider", { name: s.provider }) }) })
-    ] }, s.name);
-  }) });
+      open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-detail", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-detail-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "smc-badge", children: [
+            t("detailProvider"),
+            " \xB7 ",
+            s.provider
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-badge", children: s.source }),
+          !s.modelInvocable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-badge disabled", children: t("modelDisabled") }),
+          !s.writable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-badge disabled", children: t("readOnlyBadge") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-spacer" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "smc-btn", onClick: () => {
+            openMd(s);
+          }, children: mdPath === s.path ? t("hideMd") : t("viewMd") })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-detail-row", children: [
+          t("detailPath"),
+          "\uFF1A",
+          s.path
+        ] }),
+        mdPath === s.path && (mdError !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-md-err", children: t("mdLoadFailed", { e: mdError }) }) : mdText === null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-md", children: t("loading") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-md", children: mdText }))
+      ] })
+    ] }, s.path);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-toolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { className: "smc-search", placeholder: t("searchSkills"), value: query, onChange: (e) => {
+        setQuery(e.target.value);
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-toolbar-count", children: visible.length })
+    ] }),
+    visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "smc-sub", children: t("noMatch") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      SKILL_GROUPS.map((g, i) => buckets[i].length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-group", children: [
+          t(g.labelKey),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-count", children: buckets[i].length })
+        ] }),
+        buckets[i].map(renderCard)
+      ] }, g.key) : null),
+      other.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-group", children: [
+          other[0]?.source ?? "",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-count", children: other.length })
+        ] }),
+        other.map(renderCard)
+      ] }, "other") : null
+    ] })
+  ] });
 }
 function McpView() {
   useLocale();
@@ -361,7 +544,7 @@ function McpView() {
       setEditing(null);
       load();
     } }),
-    items.map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-card", children: [
+    items.map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-card smc-card-pad", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-row", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-name", children: s.serverName }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-badge", children: s.transport }),
@@ -522,9 +705,19 @@ function Toast() {
   if (toast === null) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `smc-toast ${toast.kind}`, children: toast.message });
 }
+function skillInNamespace(s, ns) {
+  if (ns === "all") return true;
+  if (ns === "global") return s.source === "user-dsh" || s.source === "user-agents";
+  return s.source === "project-dsh" || s.source === "project-agents";
+}
 function SidebarSkillTab({ visible, cwd }) {
   useLocale();
   const [items, setItems] = (0, import_react.useState)([]);
+  const [ns, setNs] = (0, import_react.useState)("all");
+  const [query, setQuery] = (0, import_react.useState)("");
+  const [mdPath, setMdPath] = (0, import_react.useState)(null);
+  const [mdText, setMdText] = (0, import_react.useState)(null);
+  const [mdError, setMdError] = (0, import_react.useState)(null);
   const load = (0, import_react.useCallback)(() => {
     void rpc("listSkills", { cwd }).then(
       (v) => {
@@ -539,26 +732,96 @@ function SidebarSkillTab({ visible, cwd }) {
     if (!visible) return;
     load();
   }, [visible, load]);
-  if (items.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-empty", children: t("noSkills") });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-sidebar", children: items.map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-srv", title: `${s.description}
-${s.path}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `smc-dot${s.modelInvocable ? "" : " idle"}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-srv-name", children: s.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        type: "button",
-        className: `smc-toggle${s.modelInvocable ? " on" : ""}`,
-        title: t("toggleModelVisible"),
-        onClick: () => {
-          void rpc("toggleSkill", { path: s.path }).then(() => {
-            load();
-          });
-        },
-        "aria-label": s.modelInvocable ? t("disable") : t("enable")
+  const openMd = (path) => {
+    if (mdPath === path) {
+      setMdPath(null);
+      setMdText(null);
+      setMdError(null);
+      return;
+    }
+    setMdPath(path);
+    setMdText(null);
+    setMdError(null);
+    void rpc("readSkill", { path, cwd }).then(
+      (v) => {
+        setMdText(v);
+      },
+      (e) => {
+        setMdError(e instanceof Error ? e.message : String(e));
       }
-    )
-  ] }, s.path)) });
+    );
+  };
+  const q = query.trim().toLowerCase();
+  const visibleItems = items.filter((s) => skillInNamespace(s, ns) && (q === "" || s.name.toLowerCase().includes(q) || s.description.toLowerCase().includes(q)));
+  const noWorkspace = ns === "workspace" && (cwd === void 0 || cwd === "");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-sidebar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-sidebar-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          className: "smc-search-sidebar",
+          placeholder: t("searchSkills"),
+          value: query,
+          onChange: (e) => {
+            setQuery(e.target.value);
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-ns-bar", style: { marginBottom: 0 }, children: ["all", "global", "workspace"].map((k) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: `smc-ns-btn${ns === k ? " active" : ""}`,
+          onClick: () => {
+            setNs(k);
+            setMdPath(null);
+            setMdText(null);
+            setMdError(null);
+          },
+          children: t(k === "all" ? "allNamespaces" : k === "global" ? "nsGlobal" : "nsWorkspace")
+        },
+        k
+      )) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-sidebar-list", children: noWorkspace ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-empty", children: t("noWorkspace") }) : visibleItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-empty", children: q !== "" ? t("noMatch") : t("noSkills") }) : visibleItems.map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smc-srv", title: `${s.description}
+${s.path}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `smc-dot${s.modelInvocable ? "" : " idle"}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-srv-name", children: s.name }),
+        !s.modelInvocable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-srv-count", children: t("modelDisabled") }),
+        !s.writable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smc-srv-count", children: t("readOnlyBadge") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "smc-btn",
+            style: { height: 20, padding: "0 6px", fontSize: 11 },
+            onClick: () => {
+              openMd(s.path);
+            },
+            "aria-label": mdPath === s.path ? t("hideMd") : t("viewMd"),
+            children: mdPath === s.path ? t("hideMd") : "MD"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: `smc-toggle${s.modelInvocable ? " on" : ""}`,
+            title: t("toggleModelVisible"),
+            onClick: () => {
+              void rpc("toggleSkill", { path: s.path }).then(() => {
+                load();
+              });
+            },
+            "aria-label": s.modelInvocable ? t("disable") : t("enable")
+          }
+        )
+      ] }),
+      s.description !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-srv-desc", children: s.description }),
+      mdPath === s.path && (mdError !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-md-err", children: t("mdLoadFailed", { e: mdError }) }) : mdText === null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-md", children: t("loading") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smc-md", children: mdText }))
+    ] }, s.path)) })
+  ] });
 }
 var inject = ["slots", "connection", "locale"];
 function apply(ctx) {
@@ -581,6 +844,7 @@ function apply(ctx) {
     localeRevision += 1;
     localeListeners.forEach((l) => l());
   }));
+  ctx.effect(() => registerSettingsNavIcon(() => "Skill & MCP"));
   ctx.slots.inject("settings.section", () => ctx.slots.register({
     name: "settings.section",
     id: "skill-mcp-center",

package/dist/index.d.ts

@@ -4,9 +4,10 @@
  * package's `dsh.client` declaration.
  */
 import type { Context } from '@deepseek-ai/cordis';
+import type { SkillConfig } from './service.ts';
 export { SkillMcpService } from './service.ts';
-export type { McpConfig, McpServer, McpServerStatus, SkillView } from './service.ts';
+export type { McpConfig, McpServer, McpServerStatus, SkillConfig, SkillView } from './service.ts';
 export declare const name = "dsh-skill-mcp-center";
 /** The engine declares its own loader/tools dependencies. */
 export declare const inject: string[];
-export declare function apply(ctx: Context): Promise<void>;
+export declare function apply(ctx: Context, config?: SkillConfig): Promise<void>;

package/dist/index.js

@@ -4,7 +4,7 @@ export { SkillMcpService } from "./service.js";
 export const name = 'dsh-skill-mcp-center';
 /** The engine declares its own loader/tools dependencies. */
 export const inject = ['loader', 'tools'];
-export async function apply(ctx) {
-    await ctx.plugin(SkillMcpService);
+export async function apply(ctx, config = {}) {
+    await ctx.plugin(SkillMcpService, config);
     await ctx.plugin(SkillMcpRpc);
 }

package/dist/rpc.js

@@ -26,6 +26,13 @@ export class SkillMcpRpc extends Service {
                             return internal('toggleSkill: path is required');
                         return { ok: true, value: await ctx.skillMcp.toggleSkill(path) };
                     }
+                    case 'readSkill': {
+                        const path = p.path;
+                        if (typeof path !== 'string' || path === '')
+                            return internal('readSkill: path is required');
+                        const cwd = p.cwd;
+                        return { ok: true, value: await ctx.skillMcp.readSkill(path, typeof cwd === 'string' ? cwd : undefined) };
+                    }
                     case 'listMcpServers':
                         return { ok: true, value: await ctx.skillMcp.listMcpServers() };
                     case 'createMcpServer':

package/dist/service.d.ts

@@ -26,6 +26,11 @@ export interface SkillView {
     /** Absolute SKILL.md path (the toggle target; opaque to the client display). */
     path: string;
 }
+/** Plugin configuration for the skill/MCP engine. */
+export interface SkillConfig {
+    /** Additional read-only official/bundled skill roots (e.g. the harness repo's own `.agents/skills`). */
+    officialSkillDirs?: string[];
+}
 /** One MCP server as the Settings surface exposes it. */
 export interface McpServer {
     id: string;
@@ -59,11 +64,18 @@ export interface McpConfig {
 }
 export declare class SkillMcpService extends Service {
     static inject: string[];
-    constructor(ctx: Context);
+    private readonly officialSkillDirs;
+    constructor(ctx: Context, config?: SkillConfig);
     /** User-level skills plus, when a workspace is given, its project-level skills. */
     listSkills(cwd?: string): Promise<SkillView[]>;
     /** Flip one disk-backed skill's model invocation by rewriting its SKILL.md frontmatter. */
     toggleSkill(path: string): Promise<SkillView>;
+    /**
+     * Read one skill's SKILL.md raw text for display. Paths must live under a
+     * known skill root — a plain path join against the same roots `listSkills`
+     * scans, so the RPC cannot be used to read arbitrary files.
+     */
+    readSkill(path: string, cwd?: string): Promise<string>;
     /** Every `mcp-client` loader entry as a server card. */
     listMcpServers(): Promise<McpServer[]>;
     /** Add one mcp-client entry — hot-connects (create → init) and persists. */

package/dist/service.js

@@ -9,7 +9,7 @@
 import { Service } from '@deepseek-ai/cordis';
 import { readdir, readFile, writeFile } from 'node:fs/promises';
 import { homedir } from 'node:os';
-import { join } from 'node:path';
+import { join, sep } from 'node:path';
 import { parseSkillFrontmatter, setDisableModelInvocation } from "./frontmatter.js";
 /** Runtime mirror of cordis FiberState (a cross-package const enum). */
 const FIBER_PHASE = {
@@ -57,7 +57,7 @@ function skillPathFor(root, name, isDirectory) {
     return null;
 }
 /** Scan one root for SKILL.md entries and parse their frontmatter. */
-async function scanSkillRoot(root, source) {
+async function scanSkillRoot(root, source, writable = true, provider = 'filesystem') {
     let entries;
     try {
         entries = await readdir(root, { withFileTypes: true });
@@ -84,10 +84,10 @@ async function scanSkillRoot(root, source) {
             name: fm.name,
             description: fm.description,
             source,
-            provider: 'filesystem',
+            provider,
             modelInvocable: fm.modelInvocable,
             userInvocable: true,
-            writable: true,
+            writable,
             path: skillPath,
         });
     }
@@ -95,8 +95,10 @@ async function scanSkillRoot(root, source) {
 }
 export class SkillMcpService extends Service {
     static inject = ['loader', 'tools'];
-    constructor(ctx) {
+    officialSkillDirs;
+    constructor(ctx, config = {}) {
         super(ctx, 'skillMcp');
+        this.officialSkillDirs = config.officialSkillDirs ?? [];
     }
     /** User-level skills plus, when a workspace is given, its project-level skills. */
     async listSkills(cwd) {
@@ -108,6 +110,9 @@ export class SkillMcpService extends Service {
             skills.push(...await scanSkillRoot(join(cwd, '.agents', 'skills'), 'project-agents'));
             skills.push(...await scanSkillRoot(join(cwd, '.dsh', 'skills'), 'project-dsh'));
         }
+        for (const dir of this.officialSkillDirs) {
+            skills.push(...await scanSkillRoot(dir, 'bundled', false, 'dsh-official'));
+        }
         return skills;
     }
     /** Flip one disk-backed skill's model invocation by rewriting its SKILL.md frontmatter. */
@@ -135,6 +140,30 @@ export class SkillMcpService extends Service {
             path,
         };
     }
+    /**
+     * Read one skill's SKILL.md raw text for display. Paths must live under a
+     * known skill root — a plain path join against the same roots `listSkills`
+     * scans, so the RPC cannot be used to read arbitrary files.
+     */
+    async readSkill(path, cwd) {
+        const roots = [...SKILL_ROOTS.map(root => root.path)];
+        if (cwd !== undefined && cwd !== '') {
+            roots.push(join(cwd, '.agents', 'skills'), join(cwd, '.dsh', 'skills'));
+        }
+        roots.push(...this.officialSkillDirs);
+        // Segment-boundary prefix check: a sibling directory like `skills-notes`
+        // must not satisfy a `skills` root. join(root, '') normalizes to root.
+        if (!roots.some(root => path === root || path.startsWith(`${root}${sep}`)))
+            throw new Error('skill-not-found');
+        let text;
+        try {
+            text = await readFile(path, 'utf8');
+        }
+        catch {
+            throw new Error('skill-not-found');
+        }
+        return text;
+    }
     /** Every `mcp-client` loader entry as a server card. */
     async listMcpServers() {
         const servers = [];
@@ -182,7 +211,7 @@ export class SkillMcpService extends Service {
     /** Runtime status per server: upstream `mcpStatus` seam when present, else derived. */
     async mcpStatus() {
         const servers = await this.listMcpServers();
-        const seam = this.ctx.mcpStatus;
+        const seam = this.ctx.get('mcpStatus');
         if (seam !== undefined) {
             const byName = new Map(seam.list().map(s => [s.serverName, s]));
             return servers.map(s => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@max-null/dsh-skill-mcp-center",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Skill & MCP management center for DeepSeek Harness — manage skills and MCP servers in Settings, live MCP status in the sidebar",
   "license": "MIT",
   "publishConfig": {