dsh-skill-store 0.1.0

package/lib/client.js

@@ -0,0 +1,296 @@
+window.__ModuleLoader__.load({ id: "dsh-skill-store", factory: (require) => {
+var module = { exports: {} };
+var exports = module.exports;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var react = require("react");
+var react_dom_client = require("react-dom/client");
+
+// ── Simple React skill store panel ─────────────────────────────────
+
+function useSkillsApi() {
+  const [skills, setSkills] = react.useState([]);
+  const [total, setTotal] = react.useState(0);
+  const [categories, setCategories] = react.useState({});
+  const [installed, setInstalled] = react.useState(new Set());
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+
+  const apiFetch = react.useCallback(async (path, opts) => {
+    const res = await fetch(`/api/dsh-skill-store${path}`, {
+      headers: { "Content-Type": "application/json" },
+      ...opts,
+    });
+    if (!res.ok) {
+      const e = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
+      throw new Error(e.error ?? `HTTP ${res.status}`);
+    }
+    return res.json();
+  }, []);
+
+  const loadSkills = react.useCallback(async (search = "", category = "", source = "github", sort = "") => {
+    setLoading(true);
+    setError(null);
+    try {
+      const qs = new URLSearchParams({ limit: "100", source });
+      if (search) qs.set("search", search);
+      if (category) qs.set("category", category);
+      if (sort) qs.set("sort", sort);
+      const data = await apiFetch(`/list?${qs.toString()}`);
+      setSkills(data.entries);
+      setTotal(data.total);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiFetch]);
+
+  const loadCategories = react.useCallback(async (source = "github") => {
+    try {
+      const data = await apiFetch(`/categories?source=${encodeURIComponent(source)}`);
+      setCategories(data);
+    } catch {}
+  }, [apiFetch]);
+
+  const loadInstalled = react.useCallback(async () => {
+    try {
+      const data = await apiFetch("/installed");
+      setInstalled(new Set(data.skills.map(s => s.name)));
+    } catch {}
+  }, [apiFetch]);
+
+  const install = react.useCallback(async (name, source = "github") => {
+    await apiFetch("/install", { method: "POST", body: JSON.stringify({ name, source }) });
+    await loadInstalled();
+  }, [apiFetch, loadInstalled]);
+
+  const uninstall = react.useCallback(async (name) => {
+    await apiFetch("/uninstall", { method: "POST", body: JSON.stringify({ name }) });
+    await loadInstalled();
+  }, [apiFetch, loadInstalled]);
+
+  const refresh = react.useCallback(async () => {
+    await apiFetch("/refresh", { method: "POST" });
+    await loadSkills();
+    await loadCategories();
+  }, [apiFetch, loadSkills, loadCategories]);
+
+  return { skills, total, categories, installed, loading, error, loadSkills, loadCategories, loadInstalled, install, uninstall, refresh };
+}
+
+function SkillStoreUI() {
+  const { skills, total, categories, installed, loading, error, loadSkills, loadCategories, loadInstalled, install, uninstall, refresh } = useSkillsApi();
+  const [search, setSearch] = react.useState("");
+  const [category, setCategory] = react.useState("");
+  const [selected, setSelected] = react.useState(null);
+  const [content, setContent] = react.useState(null);
+  const [busy, setBusy] = react.useState(null);
+  const [source, setSource] = react.useState("github");
+  const [sort, setSort] = react.useState(source === "clawhub" ? "stars" : "");
+
+  react.useEffect(() => { loadCategories(source); loadInstalled(); }, [source]);
+  react.useEffect(() => { loadSkills(search, category, source, sort); }, [search, category, source, sort]);
+
+  const viewDetail = async (skill) => {
+    setSelected(skill);
+    setContent(null);
+    try {
+      const res = await fetch(`/api/dsh-skill-store/detail/${encodeURIComponent(skill.name)}?source=${encodeURIComponent(source)}`);
+      const data = await res.json();
+      setContent(data.content ?? data.fetchError ?? "(no content)");
+    } catch { setContent("(failed to load)"); }
+  };
+
+  const doInstall = async (sk) => { setBusy(sk.name); try { await install(sk.name, source); } catch (e) { alert(e.message); } finally { setBusy(null); } };
+  const doUninstall = async (s) => { if (!confirm(`Remove "${s.name}"?`)) return; setBusy(s.name); try { await uninstall(s.name); } catch (e) { alert(e.message); } finally { setBusy(null); } };
+
+  const catNames = Object.keys(categories).sort();
+  const catCounts = categories;
+
+  return react.createElement("div", { style: s.container },
+    // Header
+    react.createElement("div", { style: s.header },
+      react.createElement("h2", { style: s.title }, "🧩 技能商店"),
+      react.createElement("span", { style: s.count }, total > 0 ? `${total} 个技能` : ""),
+      react.createElement("button", { onClick: refresh, style: s.refreshBtn }, "🔄 刷新索引")
+    ),
+    // Source switch
+    react.createElement("div", { style: s.sourceBar },
+      react.createElement("button", {
+        onClick: () => { setSource("github"); setCategory(""); setSort(""); },
+        style: { ...s.sourceBtn, ...(source === "github" ? s.sourceBtnOn : {}) }
+      }, "GitHub 镜像"),
+      react.createElement("button", {
+        onClick: () => { setSource("skillhub"); setCategory(""); setSort("stars"); },
+        style: { ...s.sourceBtn, ...(source === "skillhub" ? s.sourceBtnOn : {}) }
+      }, "SkillHub 中文社区"),
+      react.createElement("button", {
+        onClick: () => { setSource("clawhub"); setCategory(""); setSort("stars"); },
+        style: { ...s.sourceBtn, ...(source === "clawhub" ? s.sourceBtnOn : {}) }
+      }, "ClawHub"),
+      (source === "clawhub" || source === "skillhub") && react.createElement("select", {
+        value: sort, onChange: (e) => setSort(e.target.value), style: { ...s.select, marginLeft: "auto" }
+      },
+        react.createElement("option", { value: "stars" }, "按星标排序"),
+        react.createElement("option", { value: "downloads" }, "按下载量排序"),
+        react.createElement("option", { value: "installs" }, "按安装量排序"),
+        react.createElement("option", { value: "recent" }, "按更新时间排序")
+      )
+    ),
+    // Search & filter
+    react.createElement("div", { style: s.bar },
+      react.createElement("input", { type: "text", placeholder: "搜索技能名称或描述...", value: search, onChange: (e) => setSearch(e.target.value), style: s.input }),
+      react.createElement("select", { value: category, onChange: (e) => setCategory(e.target.value), style: s.select },
+        react.createElement("option", { value: "" }, "全部分类"),
+        ...catNames.map(c => react.createElement("option", { key: c, value: c }, `${c} (${catCounts[c]?.length ?? 0})`))
+      )
+    ),
+    // Status
+    error && react.createElement("div", { style: s.error }, "⚠ ", error),
+    loading && react.createElement("div", { style: s.loading },
+      source === "skillhub"
+        ? "⏳ 正在从 SkillHub 索引技能，首次约需 30-60 秒..."
+        : source === "clawhub"
+          ? "⏳ 正在从 ClawHub 索引技能，首次约需 2 分钟..."
+          : "⏳ 正在从 GitHub 索引技能数据，首次加载可能需要 1-2 分钟..."),
+    // Card grid
+    !loading && !error && react.createElement("div", { style: s.grid },
+      skills.length === 0 && react.createElement("div", { style: s.empty }, "没有找到技能，试试不同的关键词或刷新索引"),
+      skills.map(skill => {
+        const isInstalled = installed.has(skill.name);
+        return react.createElement("div", { key: skill.name, style: { ...s.card, ...(isInstalled ? s.cardOn : {}) }, onClick: () => viewDetail(skill) },
+          react.createElement("div", { style: s.cardTop },
+            react.createElement("strong", { style: s.cardTitle }, skill.displayName || skill.name),
+            skill.author && react.createElement("span", { style: s.author }, skill.author)
+          ),
+          // Popularity row — only ClawHub carries these numbers
+          (skill.stars != null || skill.downloads != null) && react.createElement("div", { style: s.stats },
+            skill.stars != null && react.createElement("span", { style: s.stat, title: "星标" }, `★ ${fmtNum(skill.stars)}`),
+            skill.downloads != null && react.createElement("span", { style: s.stat, title: "下载量" }, `↓ ${fmtNum(skill.downloads)}`),
+            skill.installs != null && react.createElement("span", { style: s.stat, title: "安装量" }, `⬇ ${fmtNum(skill.installs)}`),
+            skill.upstreamStars != null && react.createElement("span", { style: s.stat, title: "上游仓库星标" }, `repo ★ ${fmtNum(skill.upstreamStars)}`)
+          ),
+          react.createElement("p", { style: s.desc }, skill.description),
+          ((skill.topics?.length > 0) || (skill.tags?.length > 0)) && react.createElement("div", { style: s.tags },
+            ...(skill.topics || skill.tags || []).slice(0, 5).map(t => react.createElement("span", { key: t, style: s.tag }, t))
+          ),
+          (skill.collectionLabel || skill.categoryLabel) && react.createElement("div", { style: s.collLabel },
+            skill.collectionLabel || skill.categoryLabel
+          ),
+          react.createElement("button", {
+            onClick: (e) => { e.stopPropagation(); isInstalled ? doUninstall(skill) : doInstall(skill); },
+            disabled: busy === skill.name,
+            style: { ...s.btn, ...(isInstalled ? s.btnOn : {}) }
+          }, busy === skill.name ? "处理中..." : isInstalled ? "✅ 已安装 (点击卸载)" : "📦 安装")
+        );
+      })
+    ),
+    // Detail modal
+    selected && react.createElement("div", { style: s.modalBg, onClick: () => setSelected(null) },
+      react.createElement("div", { style: s.modal, onClick: (e) => e.stopPropagation() },
+        react.createElement("div", { style: s.modalTop },
+          react.createElement("h3", null, selected.name),
+          react.createElement("button", { onClick: () => setSelected(null), style: s.closeBtn }, "×")
+        ),
+        react.createElement("p", { style: { color: "#555", marginBottom: "12px" } }, selected.description),
+        (selected.stars != null || selected.downloads != null) && react.createElement("div", { style: s.modalStats },
+          selected.stars != null && react.createElement("span", { style: s.stat }, `★ ${fmtNum(selected.stars)} 星标`),
+          selected.downloads != null && react.createElement("span", { style: s.stat }, `↓ ${fmtNum(selected.downloads)} 下载`),
+          selected.installs != null && react.createElement("span", { style: s.stat }, `⬇ ${fmtNum(selected.installs)} 安装`),
+          selected.upstreamStars != null && react.createElement("span", { style: s.stat }, `repo ★ ${fmtNum(selected.upstreamStars)}`),
+          selected.version && react.createElement("span", { style: s.stat }, `v${selected.version}`)
+        ),
+        ((selected.topics?.length > 0) || (selected.tags?.length > 0)) && react.createElement("div", { style: { ...s.tags, marginBottom: "10px" } },
+          ...(selected.topics || selected.tags || []).map(t => react.createElement("span", { key: t, style: s.tag }, t))
+        ),
+        content ? react.createElement("pre", { style: s.preview }, content.length > 8000 ? content.slice(0, 8000) + "\n\n... (content truncated)" : content)
+                : react.createElement("p", { style: { color: "#999" } }, "加载中..."),
+        react.createElement("div", { style: s.modalBtns },
+          react.createElement("a", { href: selected.browseUrl, target: "_blank", rel: "noopener", style: s.linkBtn }, "📂 源文件"),
+          react.createElement("button", {
+            onClick: () => installed.has(selected.name) ? doUninstall(selected) : doInstall(selected),
+            style: { ...s.btn, ...(installed.has(selected.name) ? s.btnOn : {}) }
+          }, installed.has(selected.name) ? "卸载" : "安装")
+        )
+      )
+    )
+  );
+}
+
+/** Compact number formatting: 476827 → "476.8k". */
+function fmtNum(n) {
+  const v = Number(n) || 0;
+  if (v >= 1e6) return (v / 1e6).toFixed(1) + "m";
+  if (v >= 1e3) return (v / 1e3).toFixed(1) + "k";
+  return String(v);
+}
+
+const s = {
+  container: { padding: "16px 20px", maxWidth: "1200px", margin: "0 auto", fontFamily: "system-ui, sans-serif" },
+  header: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "16px" },
+  title: { margin: 0, fontSize: "20px", fontWeight: 600 },
+  count: { color: "#888", fontSize: "14px" },
+  refreshBtn: { marginLeft: "auto", padding: "6px 14px", border: "1px solid #ddd", borderRadius: "6px", background: "#f5f5f5", cursor: "pointer", fontSize: "13px" },
+  sourceBar: { display: "flex", gap: "8px", alignItems: "center", marginBottom: "12px" },
+  sourceBtn: { padding: "6px 16px", border: "1px solid #ddd", borderRadius: "18px", background: "#fff", cursor: "pointer", fontSize: "13px", color: "#555" },
+  sourceBtnOn: { background: "#2563eb", color: "#fff", borderColor: "#2563eb" },
+  stats: { display: "flex", gap: "10px", flexWrap: "wrap", marginTop: "4px" },
+  stat: { fontSize: "11px", color: "#c2410c", background: "#fff7ed", padding: "2px 7px", borderRadius: "10px" },
+  collLabel: { marginTop: "8px", fontSize: "11px", color: "#6b7280", background: "#f3f4f6", display: "inline-block", padding: "2px 8px", borderRadius: "10px" },
+  bar: { display: "flex", gap: "10px", marginBottom: "16px" },
+  input: { flex: 1, padding: "8px 12px", border: "1px solid #ddd", borderRadius: "6px", fontSize: "14px" },
+  select: { padding: "8px 12px", border: "1px solid #ddd", borderRadius: "6px", fontSize: "14px", minWidth: "160px" },
+  loading: { textAlign: "center", padding: "40px", color: "#666", lineHeight: "1.6" },
+  error: { padding: "16px", background: "#fff0f0", border: "1px solid #fcc", borderRadius: "8px", color: "#c00", marginBottom: "16px" },
+  empty: { textAlign: "center", padding: "40px", color: "#999" },
+  grid: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "12px" },
+  card: { border: "1px solid #e0e0e0", borderRadius: "8px", padding: "14px", cursor: "pointer", background: "#fff", transition: "box-shadow 0.15s" },
+  cardOn: { borderColor: "#4caf50", background: "#f6fdf6" },
+  cardTop: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "6px" },
+  cardTitle: { fontSize: "15px", color: "#333" },
+  author: { fontSize: "12px", color: "#999" },
+  desc: { fontSize: "13px", color: "#666", margin: "6px 0", lineHeight: "1.4", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" },
+  tags: { display: "flex", gap: "4px", flexWrap: "wrap", marginTop: "8px" },
+  tag: { padding: "2px 8px", background: "#e8e8ff", color: "#445", borderRadius: "10px", fontSize: "11px" },
+  btn: { marginTop: "10px", padding: "6px 16px", border: "none", borderRadius: "6px", background: "#2563eb", color: "#fff", cursor: "pointer", fontSize: "13px", width: "100%" },
+  btnOn: { background: "#4caf50" },
+  modalBg: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000 },
+  modal: { background: "#fff", borderRadius: "12px", padding: "24px", maxWidth: "640px", width: "90%", maxHeight: "80vh", overflowY: "auto" },
+  modalTop: { display: "flex", justifyContent: "space-between", alignItems: "center" },
+  modalStats: { display: "flex", gap: "8px", flexWrap: "wrap", marginBottom: "10px" },
+  closeBtn: { padding: "4px 10px", border: "none", background: "none", fontSize: "22px", cursor: "pointer" },
+  preview: { background: "#f5f5f5", padding: "12px", borderRadius: "6px", fontSize: "12px", maxHeight: "300px", overflowY: "auto", whiteSpace: "pre-wrap", wordBreak: "break-word" },
+  modalBtns: { display: "flex", gap: "10px", marginTop: "16px", justifyContent: "flex-end" },
+  linkBtn: { padding: "6px 14px", border: "1px solid #ddd", borderRadius: "6px", background: "#f5f5f5", cursor: "pointer", textDecoration: "none", color: "#333", fontSize: "13px" },
+};
+
+// ── DSH Plugin Registration ────────────────────────────────────────
+
+var NS = "dsh-skill-store";
+
+function apply(ctx) {
+  ctx.effect(() => {
+    // Register as a settings section using slots
+    if (ctx.slots?.inject) {
+      ctx.slots.inject("settings.section", () => ctx.slots.register({
+        name: "settings.section",
+        id: "skill-store",
+        order: 60,
+        label: () => "🧩 技能商店",
+        locale: NS,
+        inject: () => ({
+          hooks: {},
+          viewState: {},
+        }),
+      }, SkillStoreUI));
+    }
+  }, "dsh-skill-store: slot registration");
+}
+
+exports.name = "dsh-skill-store";
+exports.inject = ["slots"];
+exports.apply = apply;
+exports.NS = NS;
+
+return module.exports;
+} });