opencami 1.4.0 → 1.5.0

package/dist/server/assets/skills-panel-BnRNb7u9.js

@@ -0,0 +1,762 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { ArrowLeft01Icon, Loading02Icon, ArrowUpRight01Icon, Download04Icon, StarIcon, Tick01Icon, Calendar01Icon, Search01Icon, Shield01Icon } from "@hugeicons/core-free-icons";
+import { Link } from "@tanstack/react-router";
+import { B as Button } from "./button-CwY2OHFj.js";
+import { T as Tabs, a as TabsList, b as TabsTab } from "./tabs-DDFZob0m.js";
+import "@base-ui/react/merge-props";
+import "@base-ui/react/use-render";
+import "class-variance-authority";
+import "clsx";
+import "tailwind-merge";
+import "@base-ui/react/tabs";
+async function fetchApi(url) {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const data = await res.json();
+  if (!data.ok) throw new Error(data.error || "Unknown error");
+  return data.skills;
+}
+function useInstalledSkills() {
+  const [skills, setSkills] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchApi("/api/skills?action=installed");
+      setSkills(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  return { skills, loading, error, refresh };
+}
+function useExploreSkills(sort, limit) {
+  const [skills, setSkills] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    fetchApi(`/api/skills?action=explore&sort=${sort}&limit=${limit}`).then((data) => {
+      if (!cancelled) setSkills(data);
+    }).catch((err) => {
+      if (!cancelled) setError(err instanceof Error ? err.message : String(err));
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [sort, limit]);
+  return { skills, loading, error };
+}
+function useSearchSkills(query) {
+  const [skills, setSkills] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (!query.trim()) {
+      setSkills([]);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    timerRef.current = setTimeout(() => {
+      fetchApi(`/api/skills?action=search&q=${encodeURIComponent(query)}&limit=10`).then(setSkills).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
+    }, 400);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [query]);
+  return { skills, loading, error };
+}
+function useMySkills() {
+  const [skills, setSkills] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchApi("/api/skills?action=my-skills");
+      setSkills(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  return { skills, loading, error, refresh };
+}
+function useRecommendedSkills() {
+  const [skills, setSkills] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchApi("/api/skills?action=recommended");
+      setSkills(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  return { skills, loading, error, refresh };
+}
+function useInstallSkill() {
+  const [installing, setInstalling] = useState(null);
+  const [error, setError] = useState(null);
+  const install = useCallback(async (slug) => {
+    setInstalling(slug);
+    setError(null);
+    try {
+      const res = await fetch("/api/skills", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "install", slug })
+      });
+      const data = await res.json();
+      if (!data.ok) throw new Error(data.error || "Install failed");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      throw err;
+    } finally {
+      setInstalling(null);
+    }
+  }, []);
+  return { install, installing, error };
+}
+function useUpdateSkill() {
+  const [updating, setUpdating] = useState(null);
+  const [error, setError] = useState(null);
+  const update = useCallback(async (slug) => {
+    setUpdating(slug);
+    setError(null);
+    try {
+      const res = await fetch("/api/skills", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "update", slug })
+      });
+      const data = await res.json();
+      if (!data.ok) throw new Error(data.error || "Update failed");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      throw err;
+    } finally {
+      setUpdating(null);
+    }
+  }, []);
+  return { update, updating, error };
+}
+const TRUSTED_PUBLISHERS = /* @__PURE__ */ new Set([
+  "openclaw",
+  "clawhub",
+  "anthropic",
+  "robbyczgw-cla"
+]);
+const VERIFIED_DOWNLOAD_THRESHOLD = 100;
+function getBadgeInfo(skill, isInstalled) {
+  if (isInstalled) {
+    return { type: "installed", label: "Installed" };
+  }
+  const publisher = skill.publisher || skill.author || "";
+  const downloads = skill.stats?.downloads || 0;
+  if (TRUSTED_PUBLISHERS.has(publisher.toLowerCase()) || downloads >= VERIFIED_DOWNLOAD_THRESHOLD) {
+    return { type: "verified", label: "Verified" };
+  }
+  return { type: "community", label: "Community" };
+}
+function TrustBadge({ type, label }) {
+  const styles = {
+    verified: "bg-emerald-50 text-emerald-600 border-emerald-100",
+    community: "bg-primary-50 text-primary-500 border-primary-100",
+    installed: "bg-sky-50 text-sky-600 border-sky-100"
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full border ${styles[type]}`,
+      title: `${label} Skill`,
+      children: [
+        /* @__PURE__ */ jsx(
+          HugeiconsIcon,
+          {
+            icon: type === "installed" ? Tick01Icon : Shield01Icon,
+            size: 10,
+            strokeWidth: 2
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+function SkillCard({
+  skill,
+  installed,
+  installing,
+  onInstall,
+  onUpdate,
+  updating,
+  showUpdate,
+  onClick
+}) {
+  const slug = skill.slug || "";
+  const name = skill.displayName || slug;
+  const summary = skill.summary;
+  const version = skill.version || skill.latestVersion?.version || "";
+  const downloads = skill.stats?.downloads;
+  const badge = getBadgeInfo(skill, installed);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `
+        group rounded-lg border border-primary-100 bg-surface p-4
+        transition-all duration-150 ease-out
+        ${onClick ? "cursor-pointer hover:border-primary-200 hover:shadow-sm" : ""}
+      `,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 mb-2", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-[13px] font-semibold text-primary-900 leading-tight truncate", children: name }),
+          version && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] font-mono text-primary-400", children: version })
+        ] }),
+        summary && /* @__PURE__ */ jsx("p", { className: "text-xs text-primary-500 leading-relaxed line-clamp-2 mb-3", children: summary }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-2 border-t border-primary-50", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(TrustBadge, { ...badge }),
+            downloads !== void 0 && downloads > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-primary-400 flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Download04Icon, size: 11, strokeWidth: 1.5 }),
+              downloads.toLocaleString()
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", onClick: (e) => e.stopPropagation(), children: [
+            showUpdate && onUpdate && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onUpdate,
+                disabled: !!updating,
+                className: "text-[11px] font-medium text-primary-500 hover:text-primary-700 transition-colors duration-150 disabled:opacity-50",
+                children: updating ? /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Loading02Icon, size: 12, className: "animate-spin" }) : "Update"
+              }
+            ),
+            !installed && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onInstall,
+                disabled: installing,
+                className: "text-[11px] font-medium text-primary-600 hover:text-primary-800 transition-colors duration-150 disabled:opacity-50",
+                children: installing ? /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Loading02Icon, size: 12, className: "animate-spin" }) : "Install"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function formatDate(timestamp) {
+  if (!timestamp) return "";
+  return new Date(timestamp).toLocaleDateString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+function formatNumber(n) {
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return n.toString();
+}
+function SkillDetailView({
+  skill,
+  installed,
+  installing,
+  onInstall,
+  onBack
+}) {
+  const slug = skill.slug || "";
+  const name = skill.displayName || slug;
+  const version = skill.version || skill.latestVersion?.version || "";
+  const badge = getBadgeInfo(skill, installed);
+  const downloads = skill.stats?.downloads || 0;
+  const tags = skill.tags ? Array.isArray(skill.tags) ? skill.tags : Object.keys(skill.tags).filter((k) => k !== "latest") : [];
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onBack,
+        className: "inline-flex items-center gap-1.5 text-xs font-medium text-primary-500 hover:text-primary-700 transition-colors duration-150",
+        children: [
+          /* @__PURE__ */ jsx(HugeiconsIcon, { icon: ArrowLeft01Icon, size: 14, strokeWidth: 2 }),
+          "Back to browse"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-primary-900 leading-tight", children: name }),
+          version && /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono text-primary-400", children: [
+            "v",
+            version
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(TrustBadge, { ...badge })
+      ] }),
+      skill.summary && /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-600 leading-relaxed", children: skill.summary })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6 py-4 border-y border-primary-100", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-primary-900", children: formatNumber(downloads) }),
+        /* @__PURE__ */ jsx("div", { className: "text-[11px] text-primary-400 uppercase tracking-wide", children: "Downloads" })
+      ] }),
+      skill.stats?.versions !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-primary-900", children: skill.stats.versions }),
+        /* @__PURE__ */ jsx("div", { className: "text-[11px] text-primary-400 uppercase tracking-wide", children: "Versions" })
+      ] }),
+      skill.stats?.stars !== void 0 && skill.stats.stars > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-primary-900", children: skill.stats.stars }),
+        /* @__PURE__ */ jsx("div", { className: "text-[11px] text-primary-400 uppercase tracking-wide", children: "Stars" })
+      ] })
+    ] }),
+    skill.latestVersion?.changelog && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-xs font-semibold text-primary-700 uppercase tracking-wide", children: "Latest Release" }),
+        skill.latestVersion.createdAt && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-primary-400 flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Calendar01Icon, size: 11, strokeWidth: 1.5 }),
+          formatDate(skill.latestVersion.createdAt)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-600 leading-relaxed", children: skill.latestVersion.changelog })
+    ] }),
+    tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: tags.map((tag) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "text-[10px] font-medium text-primary-500 bg-primary-50 px-2 py-1 rounded",
+        children: tag
+      },
+      tag
+    )) }),
+    (skill.createdAt || skill.updatedAt) && /* @__PURE__ */ jsxs("div", { className: "text-[11px] text-primary-400 space-y-0.5", children: [
+      skill.createdAt && /* @__PURE__ */ jsxs("div", { children: [
+        "Published ",
+        formatDate(skill.createdAt)
+      ] }),
+      skill.updatedAt && /* @__PURE__ */ jsxs("div", { children: [
+        "Last updated ",
+        formatDate(skill.updatedAt)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 pt-2", children: [
+      installed ? /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg bg-emerald-50 text-emerald-600 text-sm font-medium border border-emerald-100", children: [
+        /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Tick01Icon, size: 15, strokeWidth: 2 }),
+        "Installed"
+      ] }) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: onInstall,
+          disabled: installing,
+          className: "flex-1",
+          size: "sm",
+          children: installing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Loading02Icon, size: 14, className: "animate-spin mr-1.5" }),
+            "Installing…"
+          ] }) : "Install Skill"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: `https://clawhub.com/skills/${slug}`,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-1 px-4 py-2 text-sm font-medium text-primary-600 hover:text-primary-800 transition-colors duration-150",
+          children: [
+            "View on ClawHub",
+            /* @__PURE__ */ jsx(HugeiconsIcon, { icon: ArrowUpRight01Icon, size: 14, strokeWidth: 1.5 })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function InstalledTab() {
+  const { skills, loading, error, refresh } = useInstalledSkills();
+  const { update, updating } = useUpdateSkill();
+  const handleUpdate = async (name) => {
+    try {
+      await update(name);
+      void refresh();
+    } catch {
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Loading02Icon, size: 18, className: "animate-spin text-primary-300" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "text-sm text-red-500 py-8 text-center", children: error });
+  }
+  if (skills.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "py-12 text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-400", children: "No skills installed" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-primary-300 mt-1", children: "Browse the catalog to get started" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: skills.map((skill) => /* @__PURE__ */ jsx(
+    SkillCard,
+    {
+      skill: { slug: skill.name, displayName: skill.name, version: skill.version },
+      installed: true,
+      installing: false,
+      onInstall: () => {
+      },
+      onUpdate: () => handleUpdate(skill.name),
+      updating: updating === skill.name,
+      showUpdate: true
+    },
+    skill.name
+  )) });
+}
+function MySkillsTab() {
+  const { skills, loading, error } = useMySkills();
+  const totalDownloads = useMemo(
+    () => skills.reduce((sum, s) => sum + (s.stats?.downloads || 0), 0),
+    [skills]
+  );
+  const totalStars = useMemo(
+    () => skills.reduce((sum, s) => sum + (s.stats?.stars || 0), 0),
+    [skills]
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Loading02Icon, size: 18, className: "animate-spin text-primary-300" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "text-sm text-red-500 py-8 text-center", children: error });
+  }
+  if (skills.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "py-12 text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-400", children: "No skills configured" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-primary-300 mt-1", children: "Add slugs to .clawhub-my-skills.json" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6 py-3 px-4 rounded-lg bg-primary-50/60 border border-primary-100", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-primary-900", children: skills.length }),
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] text-primary-400 uppercase tracking-wide", children: "Skills" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-primary-900", children: totalDownloads.toLocaleString() }),
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] text-primary-400 uppercase tracking-wide", children: "Downloads" })
+      ] }),
+      totalStars > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-primary-900", children: totalStars }),
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] text-primary-400 uppercase tracking-wide", children: "Stars" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: skills.map((skill) => {
+      const slug = skill.slug || "";
+      const name = skill.displayName || slug;
+      const version = skill.version || skill.latestVersion?.version || "";
+      const downloads = skill.stats?.downloads || 0;
+      const stars = skill.stats?.stars || 0;
+      const installs = skill.stats?.installsAllTime || skill.stats?.installsCurrent || 0;
+      return /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: `https://clawhub.com/skills/${slug}`,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "group block rounded-lg border border-primary-100 bg-surface p-4 transition-all duration-150 ease-out hover:border-primary-200 hover:shadow-sm",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 mb-1.5", children: [
+              /* @__PURE__ */ jsx("h4", { className: "text-[13px] font-semibold text-primary-900 leading-tight truncate group-hover:text-primary-700 transition-colors duration-150", children: name }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+                version && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-primary-400", children: version }),
+                /* @__PURE__ */ jsx(
+                  HugeiconsIcon,
+                  {
+                    icon: ArrowUpRight01Icon,
+                    size: 12,
+                    strokeWidth: 1.5,
+                    className: "text-primary-300 opacity-0 group-hover:opacity-100 transition-opacity duration-150"
+                  }
+                )
+              ] })
+            ] }),
+            skill.summary && /* @__PURE__ */ jsx("p", { className: "text-xs text-primary-500 leading-relaxed line-clamp-2 mb-3", children: skill.summary }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 pt-2 border-t border-primary-50", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-primary-400 flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Download04Icon, size: 11, strokeWidth: 1.5 }),
+                downloads.toLocaleString()
+              ] }),
+              stars > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-primary-400 flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(HugeiconsIcon, { icon: StarIcon, size: 11, strokeWidth: 1.5 }),
+                stars
+              ] }),
+              installs > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-primary-400 flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Tick01Icon, size: 11, strokeWidth: 1.5 }),
+                installs.toLocaleString()
+              ] }),
+              skill.updatedAt && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-primary-400 flex items-center gap-1 ml-auto", children: [
+                /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Calendar01Icon, size: 11, strokeWidth: 1.5 }),
+                formatDate(skill.updatedAt)
+              ] })
+            ] })
+          ]
+        },
+        slug
+      );
+    }) })
+  ] });
+}
+function RecommendedTab() {
+  const { skills, loading, error } = useRecommendedSkills();
+  const { skills: installedSkills } = useInstalledSkills();
+  const { install, installing } = useInstallSkill();
+  const refreshInstalled = useInstalledSkills().refresh;
+  const installedSet = useMemo(
+    () => new Set(installedSkills.map((s) => s.name)),
+    [installedSkills]
+  );
+  const handleInstall = async (slug) => {
+    try {
+      await install(slug);
+      void refreshInstalled();
+    } catch {
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Loading02Icon, size: 18, className: "animate-spin text-primary-300" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "text-sm text-red-500 py-8 text-center", children: error });
+  }
+  if (skills.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "py-12 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-400", children: "No recommended skills available" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-primary-500", children: [
+      /* @__PURE__ */ jsx(HugeiconsIcon, { icon: StarIcon, size: 14, strokeWidth: 1.5, className: "text-amber-400" }),
+      /* @__PURE__ */ jsx("span", { children: "Curated skills we recommend" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: skills.map((skill) => {
+      const slug = skill.slug || "";
+      const name = skill.displayName || slug;
+      const isInstalled = installedSet.has(slug) || installedSet.has(name);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "group relative rounded-lg border border-primary-100 bg-surface p-4 transition-all duration-150 ease-out hover:border-primary-200 hover:shadow-sm",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "absolute -top-1.5 -right-1.5", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[9px] font-medium rounded-full bg-amber-50 text-amber-600 border border-amber-100", children: [
+              /* @__PURE__ */ jsx(HugeiconsIcon, { icon: StarIcon, size: 8, strokeWidth: 2 }),
+              "Pick"
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 mb-2", children: [
+              /* @__PURE__ */ jsx("h4", { className: "text-[13px] font-semibold text-primary-900 leading-tight truncate", children: name }),
+              skill.version && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] font-mono text-primary-400", children: skill.version })
+            ] }),
+            skill.summary && /* @__PURE__ */ jsx("p", { className: "text-xs text-primary-500 leading-relaxed line-clamp-2 mb-3", children: skill.summary }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-2 border-t border-primary-50", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                skill.stats?.downloads !== void 0 && skill.stats.downloads > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-primary-400 flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Download04Icon, size: 11, strokeWidth: 1.5 }),
+                  skill.stats.downloads.toLocaleString()
+                ] }),
+                skill.stats?.stars !== void 0 && skill.stats.stars > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-primary-400 flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx(HugeiconsIcon, { icon: StarIcon, size: 11, strokeWidth: 1.5 }),
+                  skill.stats.stars
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: isInstalled ? /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium text-emerald-500 flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Tick01Icon, size: 11, strokeWidth: 2 }),
+                "Installed"
+              ] }) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => handleInstall(slug),
+                  disabled: installing === slug,
+                  className: "text-[11px] font-medium text-primary-600 hover:text-primary-800 transition-colors duration-150 disabled:opacity-50",
+                  children: installing === slug ? /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Loading02Icon, size: 12, className: "animate-spin" }) : "Install"
+                }
+              ) })
+            ] })
+          ]
+        },
+        slug
+      );
+    }) })
+  ] });
+}
+function sortSkills(skills, sortBy) {
+  return [...skills].sort((a, b) => {
+    if (sortBy === "downloads") {
+      return (b.stats?.downloads || 0) - (a.stats?.downloads || 0);
+    }
+    if (sortBy === "stars") {
+      return (b.stats?.stars || 0) - (a.stats?.stars || 0);
+    }
+    if (sortBy === "updatedAt") {
+      return (b.updatedAt || 0) - (a.updatedAt || 0);
+    }
+    return 0;
+  });
+}
+function BrowseTab() {
+  const [sort, setSort] = useState("downloads");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedSkill, setSelectedSkill] = useState(null);
+  const apiSort = sort === "updatedAt" ? "newest" : sort === "stars" ? "trending" : "downloads";
+  const { skills: exploreSkills, loading: exploreLoading, error: exploreError } = useExploreSkills(apiSort, 50);
+  const { skills: searchResults, loading: searchLoading } = useSearchSkills(searchQuery);
+  const { skills: installedSkills } = useInstalledSkills();
+  const { install, installing } = useInstallSkill();
+  const installedSet = useMemo(
+    () => new Set(installedSkills.map((s) => s.name)),
+    [installedSkills]
+  );
+  const refreshInstalled = useInstalledSkills().refresh;
+  const handleInstall = async (slug) => {
+    try {
+      await install(slug);
+      void refreshInstalled();
+    } catch {
+    }
+  };
+  const isSearching = searchQuery.trim().length > 0;
+  const skills = useMemo(() => {
+    if (isSearching) {
+      return sortSkills(searchResults, sort);
+    }
+    return exploreSkills;
+  }, [isSearching, searchResults, exploreSkills, sort]);
+  const loading = isSearching ? searchLoading : exploreLoading;
+  if (selectedSkill) {
+    const slug = selectedSkill.slug || "";
+    const name = selectedSkill.displayName || slug;
+    const isInstalled = installedSet.has(slug) || installedSet.has(name);
+    return /* @__PURE__ */ jsx(
+      SkillDetailView,
+      {
+        skill: selectedSkill,
+        installed: isInstalled,
+        installing: installing === slug,
+        onInstall: () => handleInstall(slug),
+        onBack: () => setSelectedSkill(null)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx(
+          HugeiconsIcon,
+          {
+            icon: Search01Icon,
+            size: 15,
+            strokeWidth: 1.5,
+            className: "absolute left-3 top-1/2 -translate-y-1/2 text-primary-300"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            placeholder: "Search skills…",
+            className: "w-full pl-9 pr-3 py-2 text-sm rounded-lg border border-primary-100 bg-surface placeholder:text-primary-300 focus:outline-none focus:border-primary-300 transition-colors duration-150"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: sort,
+          onChange: (e) => setSort(e.target.value),
+          className: "shrink-0 text-xs text-primary-600 rounded-md border border-primary-100 bg-surface px-2 py-2 focus:outline-none focus:border-primary-300 transition-colors duration-150",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "downloads", children: "Most Downloads" }),
+            /* @__PURE__ */ jsx("option", { value: "stars", children: "Most Stars" }),
+            /* @__PURE__ */ jsx("option", { value: "updatedAt", children: "Recently Updated" })
+          ]
+        }
+      )
+    ] }),
+    loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Loading02Icon, size: 18, className: "animate-spin text-primary-300" }) }) : exploreError && !isSearching ? /* @__PURE__ */ jsx("div", { className: "text-sm text-red-500 py-8 text-center", children: exploreError }) : skills.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-12 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-400", children: isSearching ? "No skills found" : "No skills available" }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: skills.map((skill) => {
+      const slug = skill.slug || skill.name || "";
+      const name = skill.displayName || slug;
+      return /* @__PURE__ */ jsx(
+        SkillCard,
+        {
+          skill,
+          installed: installedSet.has(slug) || installedSet.has(name),
+          installing: installing === slug,
+          onInstall: () => handleInstall(slug),
+          onClick: () => setSelectedSkill(skill)
+        },
+        slug
+      );
+    }) })
+  ] });
+}
+function SkillsPanel() {
+  const [tab, setTab] = useState("installed");
+  const { skills: mySkills, loading: mySkillsLoading } = useMySkills();
+  const showMySkills = !mySkillsLoading && mySkills.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-4 pt-4 pb-3 border-b border-primary-100", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+        /* @__PURE__ */ jsx(
+          Link,
+          {
+            to: "/chat/$sessionKey",
+            params: { sessionKey: "main" },
+            className: "p-1.5 -ml-1.5 rounded-md text-primary-500 hover:text-primary-700 hover:bg-primary-50 transition-colors duration-150",
+            "aria-label": "Back to Chat",
+            children: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: ArrowLeft01Icon, size: 18, strokeWidth: 2 })
+          }
+        ),
+        /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-primary-900", children: "Skills" })
+      ] }),
+      /* @__PURE__ */ jsx(Tabs, { value: tab, onValueChange: setTab, children: /* @__PURE__ */ jsxs(TabsList, { variant: "default", className: "gap-2 *:data-[slot=tab-indicator]:duration-0", children: [
+        /* @__PURE__ */ jsx(TabsTab, { value: "installed", children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Installed" }) }),
+        showMySkills && /* @__PURE__ */ jsx(TabsTab, { value: "my-skills", children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "My Skills" }) }),
+        /* @__PURE__ */ jsx(TabsTab, { value: "recommended", children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Recommended" }) }),
+        /* @__PURE__ */ jsx(TabsTab, { value: "browse", children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Browse" }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-4 pt-4", children: [
+      tab === "installed" && /* @__PURE__ */ jsx(InstalledTab, {}),
+      tab === "my-skills" && /* @__PURE__ */ jsx(MySkillsTab, {}),
+      tab === "recommended" && /* @__PURE__ */ jsx(RecommendedTab, {}),
+      tab === "browse" && /* @__PURE__ */ jsx(BrowseTab, {})
+    ] })
+  ] });
+}
+export {
+  SkillsPanel
+};