@getcatalystiq/agent-plane-ui 0.1.28 → 0.1.30

package/dist/index.cjs

@@ -3362,7 +3362,8 @@ function FileTreeEditor2({
   addFolderLabel = "Folder",
   newFileTemplate = { filename: "SKILL.md", content: "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n" },
   savedVersion,
-  fixedStructure = false
+  fixedStructure = false,
+  headerActions
 }) {
   const [files, setFiles] = React.useState(initialFiles);
   const [selectedPath, setSelectedPath] = React.useState(
@@ -3553,7 +3554,10 @@ function FileTreeEditor2({
         isDirty && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Badge, { variant: "destructive", className: "text-xs", children: "Unsaved changes" }),
         readOnly && /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Badge, { variant: "secondary", className: "text-xs", children: "Read-only" })
       ] }),
-      !readOnly && !hideSave && /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { onClick: handleSave, disabled: saving || !isDirty, size: "sm", children: saving ? "Saving..." : saveLabel })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        headerActions,
+        !readOnly && !hideSave && /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { onClick: handleSave, disabled: saving || !isDirty, size: "sm", children: saving ? "Saving..." : saveLabel })
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 min-h-[500px]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-64 shrink-0 border border-border rounded-md overflow-hidden", children: [
@@ -3630,17 +3634,193 @@ function FileTreeEditor2({
     ] })
   ] });
 }
+function TabButton({ label, active, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick,
+      className: `relative pb-2 text-sm font-medium transition-colors ${active ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+      children: [
+        label,
+        active && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-x-0 bottom-0 h-0.5 bg-foreground rounded-full" })
+      ]
+    }
+  );
+}
+function ImportSkillDialog({ open, onOpenChange, onImported, existingFolders }) {
+  const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
+  const [tab, setTab] = React.useState("all");
+  const [entries, setEntries] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const [search, setSearch] = React.useState("");
+  const [selected, setSelected] = React.useState(null);
+  const [preview, setPreview] = React.useState("");
+  const [previewLoading, setPreviewLoading] = React.useState(false);
+  const [importing, setImporting] = React.useState(false);
+  const [importError, setImportError] = React.useState("");
+  const [url, setUrl] = React.useState("");
+  const [urlImporting, setUrlImporting] = React.useState(false);
+  React.useEffect(() => {
+    if (!open) return;
+    setLoading(true);
+    setError("");
+    setSelected(null);
+    setPreview("");
+    client.skillsDirectory.list(tab).then((data) => setEntries(data)).catch((err) => setError(err instanceof Error ? err.message : "Failed to load skills")).finally(() => setLoading(false));
+  }, [tab, open, client]);
+  const filtered = React.useMemo(() => {
+    if (!search.trim()) return entries;
+    const q = search.toLowerCase();
+    return entries.filter(
+      (e) => e.name.toLowerCase().includes(q) || e.owner.toLowerCase().includes(q) || e.repo.toLowerCase().includes(q)
+    );
+  }, [entries, search]);
+  async function handleSelect(entry) {
+    setSelected(entry);
+    setPreviewLoading(true);
+    setPreview("");
+    setImportError("");
+    try {
+      const content = await client.skillsDirectory.preview(entry.owner, entry.repo, entry.skill);
+      setPreview(content);
+    } catch (err) {
+      setPreview(`Failed to load preview: ${err instanceof Error ? err.message : "Unknown error"}`);
+    } finally {
+      setPreviewLoading(false);
+    }
+  }
+  async function handleImport() {
+    if (!selected) return;
+    setImporting(true);
+    setImportError("");
+    try {
+      const result = await client.skillsDirectory.import({
+        owner: selected.owner,
+        repo: selected.repo,
+        skill_name: selected.skill
+      });
+      if (existingFolders.includes(result.folder)) {
+        setImportError(`Skill folder "${result.folder}" already exists. Remove it first or rename.`);
+        return;
+      }
+      if (result.warnings.length > 0) {
+        setImportError(`Imported with warnings: ${result.warnings.join("; ")}`);
+      }
+      onImported({ folder: result.folder, files: result.files });
+      onOpenChange(false);
+      resetState();
+    } catch (err) {
+      setImportError(err instanceof Error ? err.message : "Failed to import skill");
+    } finally {
+      setImporting(false);
+    }
+  }
+  async function handleUrlImport() {
+    if (!url.trim()) return;
+    setUrlImporting(true);
+    setImportError("");
+    try {
+      const result = await client.skillsDirectory.import({ url: url.trim() });
+      if (existingFolders.includes(result.folder)) {
+        setImportError(`Skill folder "${result.folder}" already exists. Remove it first or rename.`);
+        return;
+      }
+      onImported({ folder: result.folder, files: result.files });
+      onOpenChange(false);
+      resetState();
+    } catch (err) {
+      setImportError(err instanceof Error ? err.message : "Failed to import skill");
+    } finally {
+      setUrlImporting(false);
+    }
+  }
+  function resetState() {
+    setTab("all");
+    setSearch("");
+    setSelected(null);
+    setPreview("");
+    setUrl("");
+    setError("");
+    setImportError("");
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Dialog, { open, onOpenChange: (v) => {
+    onOpenChange(v);
+    if (!v) resetState();
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkXXF4U7WL_cjs.DialogContent, { className: "max-w-2xl max-h-[80vh] flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkXXF4U7WL_cjs.DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.DialogTitle, { children: "Import from skills.sh" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.DialogDescription, { children: "Browse the open skills directory and import skills into this agent." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkXXF4U7WL_cjs.DialogBody, { className: "flex-1 overflow-hidden flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TabButton, { label: "All Time", active: tab === "all", onClick: () => setTab("all") }),
+        /* @__PURE__ */ jsxRuntime.jsx(TabButton, { label: "Trending", active: tab === "trending", onClick: () => setTab("trending") }),
+        /* @__PURE__ */ jsxRuntime.jsx(TabButton, { label: "Hot", active: tab === "hot", onClick: () => setTab("hot") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Input, { placeholder: "Search skills...", value: search, onChange: (e) => setSearch(e.target.value) }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: error }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-hidden flex gap-4 min-h-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1/2 overflow-y-auto border border-muted-foreground/25 rounded-lg", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "Loading skills..." }) : filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-sm text-muted-foreground", children: search ? "No skills match your search" : "No skills found" }) : filtered.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => handleSelect(entry),
+            className: `w-full text-left px-3 py-2 border-b border-muted-foreground/10 hover:bg-muted/50 transition-colors ${selected?.skill === entry.skill && selected?.owner === entry.owner ? "bg-muted/50" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-sm truncate", children: entry.name }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground truncate", children: [
+                  entry.owner,
+                  "/",
+                  entry.repo
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-mono ml-2 shrink-0", children: entry.installs })
+              ] })
+            ]
+          },
+          `${entry.owner}/${entry.repo}/${entry.skill}`
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1/2 overflow-y-auto border border-muted-foreground/25 rounded-lg p-3", children: !selected ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Select a skill to preview" }) : previewLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Loading preview..." }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs whitespace-pre-wrap break-words font-mono", children: preview }) })
+      ] }),
+      importError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: importError }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-muted-foreground/25 pt-3", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.FormField, { label: "Or paste a skills.sh URL", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkXXF4U7WL_cjs.Input,
+          {
+            value: url,
+            onChange: (e) => setUrl(e.target.value),
+            placeholder: "skills.sh/owner/repo/skill",
+            onKeyDown: (e) => e.key === "Enter" && handleUrlImport(),
+            className: "flex-1"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { size: "sm", variant: "outline", onClick: handleUrlImport, disabled: urlImporting || !url.trim(), children: urlImporting ? "Importing..." : "Import URL" })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkXXF4U7WL_cjs.DialogFooter, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { variant: "outline", size: "sm", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { size: "sm", onClick: handleImport, disabled: !selected || importing || previewLoading, children: importing ? "Importing..." : "Import Selected" })
+    ] })
+  ] }) });
+}
 function AgentSkillManager({ agentId, initialSkills, onSaved }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
+  const [importOpen, setImportOpen] = React.useState(false);
+  const [extraSkills, setExtraSkills] = React.useState([]);
+  const allSkills = React.useMemo(() => [...initialSkills, ...extraSkills], [initialSkills, extraSkills]);
   const initialFiles = React.useMemo(
-    () => initialSkills.flatMap(
+    () => allSkills.flatMap(
       (s) => s.files.map((f) => ({
         path: s.folder === "(root)" ? f.path : `${s.folder}/${f.path}`,
         content: f.content
       }))
     ),
-    [initialSkills]
+    [allSkills]
   );
+  const existingFolders = React.useMemo(() => allSkills.map((s) => s.folder), [allSkills]);
+  const handleImported = React.useCallback((skill) => {
+    setExtraSkills((prev) => [...prev, skill]);
+  }, []);
   const handleSave = React.useCallback(async (files) => {
     const folderMap = /* @__PURE__ */ new Map();
     for (const file of files) {
@@ -3659,22 +3839,35 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
     }
     const skills = Array.from(folderMap.entries()).map(([folder, files2]) => ({ folder, files: files2 }));
     await client.agents.update(agentId, { skills });
+    setExtraSkills([]);
     onSaved?.();
   }, [agentId, client, onSaved]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    FileTreeEditor2,
-    {
-      initialFiles,
-      onSave: handleSave,
-      title: "Skills",
-      saveLabel: "Save Skills",
-      addFolderLabel: "Skill",
-      newFileTemplate: {
-        filename: "SKILL.md",
-        content: "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n"
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FileTreeEditor2,
+      {
+        initialFiles,
+        onSave: handleSave,
+        title: "Skills",
+        saveLabel: "Save Skills",
+        addFolderLabel: "Skill",
+        newFileTemplate: {
+          filename: "SKILL.md",
+          content: "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n"
+        },
+        headerActions: /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { size: "sm", variant: "outline", onClick: () => setImportOpen(true), children: "Import from skills.sh" })
       }
-    }
-  );
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ImportSkillDialog,
+      {
+        open: importOpen,
+        onOpenChange: setImportOpen,
+        onImported: handleImported,
+        existingFolders
+      }
+    )
+  ] });
 }
 function AgentPluginManager({ agentId, initialPlugins, onSaved }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();

package/dist/index.d.cts

@@ -7,6 +7,22 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 import { DailyAgentStat } from './charts.cjs';
 
+/** Skills directory types. */
+interface SkillDirectoryEntry {
+    name: string;
+    owner: string;
+    repo: string;
+    skill: string;
+    installs: string;
+}
+interface ImportedSkillResult {
+    folder: string;
+    files: Array<{
+        path: string;
+        content: string;
+    }>;
+    warnings: string[];
+}
 /** Minimal stream event types used by the playground UI. */
 interface PlaygroundTextDeltaEvent {
     type: "text_delta";
@@ -155,6 +171,17 @@ interface AgentPlaneClient {
         toolkits(): Promise<unknown[]>;
         tools(toolkit: string): Promise<unknown[]>;
     };
+    skillsDirectory: {
+        list(tab?: "all" | "trending" | "hot"): Promise<SkillDirectoryEntry[]>;
+        preview(owner: string, repo: string, skill: string): Promise<string>;
+        import(params: {
+            owner: string;
+            repo: string;
+            skill_name: string;
+        } | {
+            url: string;
+        }): Promise<ImportedSkillResult>;
+    };
     pluginMarketplaces: {
         list(): Promise<unknown[]>;
         get(marketplaceId: string): Promise<unknown>;

package/dist/index.d.ts

@@ -7,6 +7,22 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 import { DailyAgentStat } from './charts.js';
 
+/** Skills directory types. */
+interface SkillDirectoryEntry {
+    name: string;
+    owner: string;
+    repo: string;
+    skill: string;
+    installs: string;
+}
+interface ImportedSkillResult {
+    folder: string;
+    files: Array<{
+        path: string;
+        content: string;
+    }>;
+    warnings: string[];
+}
 /** Minimal stream event types used by the playground UI. */
 interface PlaygroundTextDeltaEvent {
     type: "text_delta";
@@ -155,6 +171,17 @@ interface AgentPlaneClient {
         toolkits(): Promise<unknown[]>;
         tools(toolkit: string): Promise<unknown[]>;
     };
+    skillsDirectory: {
+        list(tab?: "all" | "trending" | "hot"): Promise<SkillDirectoryEntry[]>;
+        preview(owner: string, repo: string, skill: string): Promise<string>;
+        import(params: {
+            owner: string;
+            repo: string;
+            skill_name: string;
+        } | {
+            url: string;
+        }): Promise<ImportedSkillResult>;
+    };
     pluginMarketplaces: {
         list(): Promise<unknown[]>;
         get(marketplaceId: string): Promise<unknown>;

package/dist/index.js

@@ -3338,7 +3338,8 @@ function FileTreeEditor2({
   addFolderLabel = "Folder",
   newFileTemplate = { filename: "SKILL.md", content: "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n" },
   savedVersion,
-  fixedStructure = false
+  fixedStructure = false,
+  headerActions
 }) {
   const [files, setFiles] = useState(initialFiles);
   const [selectedPath, setSelectedPath] = useState(
@@ -3529,7 +3530,10 @@ function FileTreeEditor2({
         isDirty && !readOnly && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs", children: "Unsaved changes" }),
         readOnly && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: "Read-only" })
       ] }),
-      !readOnly && !hideSave && /* @__PURE__ */ jsx(Button, { onClick: handleSave, disabled: saving || !isDirty, size: "sm", children: saving ? "Saving..." : saveLabel })
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        headerActions,
+        !readOnly && !hideSave && /* @__PURE__ */ jsx(Button, { onClick: handleSave, disabled: saving || !isDirty, size: "sm", children: saving ? "Saving..." : saveLabel })
+      ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex gap-4 min-h-[500px]", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-64 shrink-0 border border-border rounded-md overflow-hidden", children: [
@@ -3606,17 +3610,193 @@ function FileTreeEditor2({
     ] })
   ] });
 }
+function TabButton({ label, active, onClick }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      className: `relative pb-2 text-sm font-medium transition-colors ${active ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+      children: [
+        label,
+        active && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 h-0.5 bg-foreground rounded-full" })
+      ]
+    }
+  );
+}
+function ImportSkillDialog({ open, onOpenChange, onImported, existingFolders }) {
+  const client = useAgentPlaneClient();
+  const [tab, setTab] = useState("all");
+  const [entries, setEntries] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState(null);
+  const [preview, setPreview] = useState("");
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [importing, setImporting] = useState(false);
+  const [importError, setImportError] = useState("");
+  const [url, setUrl] = useState("");
+  const [urlImporting, setUrlImporting] = useState(false);
+  useEffect(() => {
+    if (!open) return;
+    setLoading(true);
+    setError("");
+    setSelected(null);
+    setPreview("");
+    client.skillsDirectory.list(tab).then((data) => setEntries(data)).catch((err) => setError(err instanceof Error ? err.message : "Failed to load skills")).finally(() => setLoading(false));
+  }, [tab, open, client]);
+  const filtered = useMemo(() => {
+    if (!search.trim()) return entries;
+    const q = search.toLowerCase();
+    return entries.filter(
+      (e) => e.name.toLowerCase().includes(q) || e.owner.toLowerCase().includes(q) || e.repo.toLowerCase().includes(q)
+    );
+  }, [entries, search]);
+  async function handleSelect(entry) {
+    setSelected(entry);
+    setPreviewLoading(true);
+    setPreview("");
+    setImportError("");
+    try {
+      const content = await client.skillsDirectory.preview(entry.owner, entry.repo, entry.skill);
+      setPreview(content);
+    } catch (err) {
+      setPreview(`Failed to load preview: ${err instanceof Error ? err.message : "Unknown error"}`);
+    } finally {
+      setPreviewLoading(false);
+    }
+  }
+  async function handleImport() {
+    if (!selected) return;
+    setImporting(true);
+    setImportError("");
+    try {
+      const result = await client.skillsDirectory.import({
+        owner: selected.owner,
+        repo: selected.repo,
+        skill_name: selected.skill
+      });
+      if (existingFolders.includes(result.folder)) {
+        setImportError(`Skill folder "${result.folder}" already exists. Remove it first or rename.`);
+        return;
+      }
+      if (result.warnings.length > 0) {
+        setImportError(`Imported with warnings: ${result.warnings.join("; ")}`);
+      }
+      onImported({ folder: result.folder, files: result.files });
+      onOpenChange(false);
+      resetState();
+    } catch (err) {
+      setImportError(err instanceof Error ? err.message : "Failed to import skill");
+    } finally {
+      setImporting(false);
+    }
+  }
+  async function handleUrlImport() {
+    if (!url.trim()) return;
+    setUrlImporting(true);
+    setImportError("");
+    try {
+      const result = await client.skillsDirectory.import({ url: url.trim() });
+      if (existingFolders.includes(result.folder)) {
+        setImportError(`Skill folder "${result.folder}" already exists. Remove it first or rename.`);
+        return;
+      }
+      onImported({ folder: result.folder, files: result.files });
+      onOpenChange(false);
+      resetState();
+    } catch (err) {
+      setImportError(err instanceof Error ? err.message : "Failed to import skill");
+    } finally {
+      setUrlImporting(false);
+    }
+  }
+  function resetState() {
+    setTab("all");
+    setSearch("");
+    setSelected(null);
+    setPreview("");
+    setUrl("");
+    setError("");
+    setImportError("");
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (v) => {
+    onOpenChange(v);
+    if (!v) resetState();
+  }, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl max-h-[80vh] flex flex-col", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Import from skills.sh" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Browse the open skills directory and import skills into this agent." })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogBody, { className: "flex-1 overflow-hidden flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx(TabButton, { label: "All Time", active: tab === "all", onClick: () => setTab("all") }),
+        /* @__PURE__ */ jsx(TabButton, { label: "Trending", active: tab === "trending", onClick: () => setTab("trending") }),
+        /* @__PURE__ */ jsx(TabButton, { label: "Hot", active: tab === "hot", onClick: () => setTab("hot") })
+      ] }),
+      /* @__PURE__ */ jsx(Input, { placeholder: "Search skills...", value: search, onChange: (e) => setSearch(e.target.value) }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden flex gap-4 min-h-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-1/2 overflow-y-auto border border-muted-foreground/25 rounded-lg", children: loading ? /* @__PURE__ */ jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "Loading skills..." }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-sm text-muted-foreground", children: search ? "No skills match your search" : "No skills found" }) : filtered.map((entry) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => handleSelect(entry),
+            className: `w-full text-left px-3 py-2 border-b border-muted-foreground/10 hover:bg-muted/50 transition-colors ${selected?.skill === entry.skill && selected?.owner === entry.owner ? "bg-muted/50" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "font-medium text-sm truncate", children: entry.name }),
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground truncate", children: [
+                  entry.owner,
+                  "/",
+                  entry.repo
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-mono ml-2 shrink-0", children: entry.installs })
+              ] })
+            ]
+          },
+          `${entry.owner}/${entry.repo}/${entry.skill}`
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "w-1/2 overflow-y-auto border border-muted-foreground/25 rounded-lg p-3", children: !selected ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Select a skill to preview" }) : previewLoading ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Loading preview..." }) : /* @__PURE__ */ jsx("pre", { className: "text-xs whitespace-pre-wrap break-words font-mono", children: preview }) })
+      ] }),
+      importError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: importError }),
+      /* @__PURE__ */ jsx("div", { className: "border-t border-muted-foreground/25 pt-3", children: /* @__PURE__ */ jsx(FormField, { label: "Or paste a skills.sh URL", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: url,
+            onChange: (e) => setUrl(e.target.value),
+            placeholder: "skills.sh/owner/repo/skill",
+            onKeyDown: (e) => e.key === "Enter" && handleUrlImport(),
+            className: "flex-1"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: handleUrlImport, disabled: urlImporting || !url.trim(), children: urlImporting ? "Importing..." : "Import URL" })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleImport, disabled: !selected || importing || previewLoading, children: importing ? "Importing..." : "Import Selected" })
+    ] })
+  ] }) });
+}
 function AgentSkillManager({ agentId, initialSkills, onSaved }) {
   const client = useAgentPlaneClient();
+  const [importOpen, setImportOpen] = useState(false);
+  const [extraSkills, setExtraSkills] = useState([]);
+  const allSkills = useMemo(() => [...initialSkills, ...extraSkills], [initialSkills, extraSkills]);
   const initialFiles = useMemo(
-    () => initialSkills.flatMap(
+    () => allSkills.flatMap(
       (s) => s.files.map((f) => ({
         path: s.folder === "(root)" ? f.path : `${s.folder}/${f.path}`,
         content: f.content
       }))
     ),
-    [initialSkills]
+    [allSkills]
   );
+  const existingFolders = useMemo(() => allSkills.map((s) => s.folder), [allSkills]);
+  const handleImported = useCallback((skill) => {
+    setExtraSkills((prev) => [...prev, skill]);
+  }, []);
   const handleSave = useCallback(async (files) => {
     const folderMap = /* @__PURE__ */ new Map();
     for (const file of files) {
@@ -3635,22 +3815,35 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
     }
     const skills = Array.from(folderMap.entries()).map(([folder, files2]) => ({ folder, files: files2 }));
     await client.agents.update(agentId, { skills });
+    setExtraSkills([]);
     onSaved?.();
   }, [agentId, client, onSaved]);
-  return /* @__PURE__ */ jsx(
-    FileTreeEditor2,
-    {
-      initialFiles,
-      onSave: handleSave,
-      title: "Skills",
-      saveLabel: "Save Skills",
-      addFolderLabel: "Skill",
-      newFileTemplate: {
-        filename: "SKILL.md",
-        content: "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n"
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      FileTreeEditor2,
+      {
+        initialFiles,
+        onSave: handleSave,
+        title: "Skills",
+        saveLabel: "Save Skills",
+        addFolderLabel: "Skill",
+        newFileTemplate: {
+          filename: "SKILL.md",
+          content: "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n"
+        },
+        headerActions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => setImportOpen(true), children: "Import from skills.sh" })
       }
-    }
-  );
+    ),
+    /* @__PURE__ */ jsx(
+      ImportSkillDialog,
+      {
+        open: importOpen,
+        onOpenChange: setImportOpen,
+        onImported: handleImported,
+        existingFolders
+      }
+    )
+  ] });
 }
 function AgentPluginManager({ agentId, initialPlugins, onSaved }) {
   const client = useAgentPlaneClient();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getcatalystiq/agent-plane-ui",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "Embeddable React component library for AgentPlane",
   "type": "module",
   "exports": {