dsh-plugin-capabilities 0.3.1 → 0.3.3

package/lib/client.js

@@ -78,7 +78,7 @@ 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:240px;resize:vertical;font-family:var(--ds-font-family-code);line-height:1.5}
+.dpc-textarea{min-height:320px;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}
@@ -91,8 +91,9 @@ var CSS = `
 /* 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-modalForm.dpc-modalForm{width:min(760px,100%)}
 .dpc-modalScroll.dpc-modalScroll{max-height:calc(100vh - 160px);overflow-y:auto}
+.dpc-mdPreview{min-height:320px;max-height:60vh;overflow-y:auto;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:8px 12px;background:var(--dsw-alias-bg-layer-1);font-size:13px}
 .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}
@@ -140,15 +141,22 @@ 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. */
+/* Market detail modal. The host dialog card is a fixed 380px column with no
+   scroll, which the long-form intros turn into a clipped strip \u2014 widen it
+   (doubled selector outranks the module class regardless of style order),
+   cap the height, and scroll inside the content region. */
+.dpc-marketDialog.dpc-marketDialog{width:min(720px,100%);max-height:calc(100vh - 48px)}
+.dpc-marketContent{overflow-y:auto;min-height:0}
+.dpc-detailTagsRow{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
 .dpc-detailDesc{margin:0;font-size:13px;line-height:20px}
-.dpc-detailSection{margin-top:12px;display:flex;flex-direction:column;gap:6px}
+.dpc-detailSection{margin-top:14px;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}
-.dpc-skillList{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
+.dpc-skillList{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
 .dpc-skillItem{display:flex;gap:8px;align-items:baseline;font-size:12px;line-height:18px;min-width:0}
 .dpc-skillName{font-family:var(--ds-font-family-code);color:var(--dsw-alias-label-primary);white-space:nowrap;flex:none}
 .dpc-skillDesc{color:var(--dsw-alias-label-secondary);min-width:0}
+@media(max-width:560px){.dpc-skillList{grid-template-columns:minmax(0,1fr)}}
 @media(max-width:680px){.dpc-cards{grid-template-columns:minmax(0,1fr)}}
 `;
 
@@ -344,6 +352,9 @@ function MarketTab(props) {
         open: detailRepo !== null || detailServer !== null,
         onClose: () => setDetail(null),
         title: detailRepo !== null ? title(detailRepo) : detailServer !== null ? title(detailServer) : "",
+        closeLabel: t("close"),
+        className: "dpc-marketDialog",
+        contentClassName: "dpc-marketContent",
         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") }),
@@ -364,6 +375,16 @@ function MarketTab(props) {
           ), 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 || detailServer !== null) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-detailTagsRow", children: [
+            detailRepo !== null && detailRepo.skillCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-tag", children: t("marketSkillCount").replace("{n}", String(detailRepo.skillCount)) }),
+            detailRepo !== null && detailRepo.installedId !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-tag", "data-kind": "source", children: t("marketInstalled") }),
+            detailServer !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-tag", children: detailServer.transport }),
+              detailServer.runtime !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-tag", children: detailServer.runtime }),
+              detailServer.category !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-tag", children: detailServer.category }),
+              detailServer.installed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-tag", "data-kind": "source", children: t("marketInstalled") })
+            ] })
+          ] }),
           detailRepo !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dpc-detailDesc", children: longText(detailRepo) }),
             detailRepo.skills !== void 0 && detailRepo.skills.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpc-detailSection", children: [
@@ -1021,6 +1042,7 @@ function SkillsTab(props) {
   const { t, injected } = props;
   const [skills, setSkills] = (0, import_react3.useState)(null);
   const [editor, setEditor] = (0, import_react3.useState)(null);
+  const [preview, setPreview] = (0, import_react3.useState)(false);
   const [confirmName, setConfirmName] = (0, import_react3.useState)(null);
   const [busy, setBusy] = (0, import_react3.useState)(false);
   const [outcome, setOutcome] = (0, import_react3.useState)(null);
@@ -1059,6 +1081,7 @@ function SkillsTab(props) {
   }, [injected, reload, t]);
   const openCreate = () => {
     setFormError(null);
+    setPreview(false);
     setEditor({ mode: "create", name: "", description: "", whenToUse: "", modelInvocable: true, userInvocable: true, content: "" });
   };
   const openExisting = async (skill) => {
@@ -1066,6 +1089,7 @@ function SkillsTab(props) {
     setFormError(null);
     try {
       const body = await injected.get(skill.name);
+      setPreview(!skill.editable);
       setEditor({
         mode: skill.editable ? "edit" : "view",
         name: skill.name,
@@ -1413,9 +1437,16 @@ function SkillsTab(props) {
               t("userInvocable")
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "dpc-label", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: t("skillContent") }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "dpc-label", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "dpc-cardRow", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: t("skillContent") }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "dpc-spacer" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "dpc-segments", role: "tablist", "aria-label": t("skillContent"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", role: "tab", "aria-selected": preview, className: "dpc-segment", "data-active": preview ? "true" : void 0, onClick: () => setPreview(true), children: t("skillPreview") }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", role: "tab", "aria-selected": !preview, className: "dpc-segment", "data-active": !preview ? "true" : void 0, onClick: () => setPreview(false), children: readOnly ? t("skillPlainText") : t("edit") })
+              ] })
+            ] }),
+            preview ? typeof import_dsh_client_ui_primitives3.MarkdownText === "function" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dpc-mdPreview", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dsh_client_ui_primitives3.MarkdownText, { text: editor.content }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("textarea", { className: "dpc-textarea", value: editor.content, readOnly: true }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "textarea",
               {
                 className: "dpc-textarea",
@@ -1566,6 +1597,8 @@ var zh = {
   skillDescription: "\u63CF\u8FF0",
   skillWhenToUse: "\u4F7F\u7528\u65F6\u673A\uFF08\u53EF\u9009\uFF09",
   skillContent: "\u6B63\u6587\uFF08Markdown\uFF09",
+  skillPreview: "Markdown \u9884\u89C8",
+  skillPlainText: "\u7EAF\u6587\u672C",
   modelInvocable: "\u5141\u8BB8\u6A21\u578B\u8C03\u7528",
   userInvocable: "\u5141\u8BB8\u7528\u6237 / \u8C03\u7528",
   save: "\u4FDD\u5B58",
@@ -1696,6 +1729,8 @@ var en = {
   skillDescription: "Description",
   skillWhenToUse: "When to use (optional)",
   skillContent: "Body (Markdown)",
+  skillPreview: "Markdown preview",
+  skillPlainText: "Plain text",
   modelInvocable: "Model-invocable",
   userInvocable: "User-invocable (/)",
   save: "Save",