dsh-plugin-capabilities 0.3.0 → 0.3.2

package/lib/client.js

@@ -140,11 +140,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: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)}}
 `;
 
@@ -246,6 +257,7 @@ 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 longText = (entry) => entry.detail !== void 0 ? pick(entry.detail, entry.detailZh) : desc(entry);
   const cardStop = (event) => {
     event.stopPropagation();
   };
@@ -339,6 +351,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") }),
@@ -359,15 +374,28 @@ 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: desc(detailRepo) }),
+            /* @__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: [
               /* @__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)) })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "dpc-skillList", children: detailRepo.skills.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "dpc-skillItem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "dpc-skillName", children: item.name }),
+                item.description !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpc-skillDesc", children: pick(item.description, item.descriptionZh) })
+              ] }, item.name)) })
             ] })
           ] }),
           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) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dpc-detailDesc", children: longText(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(" ") })