@getcatalystiq/agent-plane-ui 0.1.27 → 0.1.29

package/dist/agent-identity-tab-BP5MPDYZ.js

@@ -0,0 +1,2 @@
+export { AgentIdentityTab } from './chunk-WUTZ6WUU.js';
+import './chunk-XFI227OB.js';

package/dist/{agent-identity-tab-HADOCEAN.cjs → agent-identity-tab-YGMVWOWT.cjs}

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunk7EBIKKRM_cjs = require('./chunk-7EBIKKRM.cjs');
+var chunkHGSMFQH7_cjs = require('./chunk-HGSMFQH7.cjs');
 require('./chunk-XXF4U7WL.cjs');
 
 
 
 Object.defineProperty(exports, "AgentIdentityTab", {
   enumerable: true,
-  get: function () { return chunk7EBIKKRM_cjs.AgentIdentityTab; }
+  get: function () { return chunkHGSMFQH7_cjs.AgentIdentityTab; }
 });

package/dist/{chunk-7EBIKKRM.cjs → chunk-HGSMFQH7.cjs}

@@ -214,11 +214,7 @@ function AgentIdentityTab({
         onSave: handleSave,
         title: "SoulSpec",
         saveLabel: saving ? "Saving..." : "Save Identity",
-        addFolderLabel: "Folder",
-        newFileTemplate: {
-          filename: "CUSTOM.md",
-          content: "# Custom\n\nAdd custom identity content...\n"
-        },
+        fixedStructure: true,
         savedVersion
       }
     ) }),

package/dist/{chunk-UMNJ5SV6.js → chunk-WUTZ6WUU.js}

@@ -212,11 +212,7 @@ function AgentIdentityTab({
         onSave: handleSave,
         title: "SoulSpec",
         saveLabel: saving ? "Saving..." : "Save Identity",
-        addFolderLabel: "Folder",
-        newFileTemplate: {
-          filename: "CUSTOM.md",
-          content: "# Custom\n\nAdd custom identity content...\n"
-        },
+        fixedStructure: true,
         savedVersion
       }
     ) }),

package/dist/editor.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkVZ43ATC5_cjs = require('./chunk-VZ43ATC5.cjs');
-var chunk7EBIKKRM_cjs = require('./chunk-7EBIKKRM.cjs');
+var chunkHGSMFQH7_cjs = require('./chunk-HGSMFQH7.cjs');
 var chunkXXF4U7WL_cjs = require('./chunk-XXF4U7WL.cjs');
 var react = require('react');
 var CodeMirror = require('@uiw/react-codemirror');
@@ -187,6 +187,6 @@ Object.defineProperty(exports, "FileTreeEditor", {
 });
 Object.defineProperty(exports, "AgentIdentityTab", {
   enumerable: true,
-  get: function () { return chunk7EBIKKRM_cjs.AgentIdentityTab; }
+  get: function () { return chunkHGSMFQH7_cjs.AgentIdentityTab; }
 });
 exports.PluginEditorPage = PluginEditorPage;

package/dist/editor.d.cts

@@ -50,12 +50,8 @@ interface AgentIdentityTabProps {
         onSave: (files: FlatFile[]) => Promise<void>;
         title?: string;
         saveLabel?: string;
-        addFolderLabel?: string;
-        newFileTemplate?: {
-            filename: string;
-            content: string;
-        };
         savedVersion?: number;
+        fixedStructure?: boolean;
     }>;
     /** Called after a successful save so the host can refresh data. */
     onSaved?: () => void;

package/dist/editor.d.ts

@@ -50,12 +50,8 @@ interface AgentIdentityTabProps {
         onSave: (files: FlatFile[]) => Promise<void>;
         title?: string;
         saveLabel?: string;
-        addFolderLabel?: string;
-        newFileTemplate?: {
-            filename: string;
-            content: string;
-        };
         savedVersion?: number;
+        fixedStructure?: boolean;
     }>;
     /** Called after a successful save so the host can refresh data. */
     onSaved?: () => void;

package/dist/editor.js

@@ -1,6 +1,6 @@
 import { useApi, Skeleton, FileTreeEditor, Card, CardHeader, CardTitle, CardContent } from './chunk-CE2RHDPY.js';
 export { FileTreeEditor } from './chunk-CE2RHDPY.js';
-export { AgentIdentityTab } from './chunk-UMNJ5SV6.js';
+export { AgentIdentityTab } from './chunk-WUTZ6WUU.js';
 import { useNavigation, useAgentPlaneClient, Badge, Button } from './chunk-XFI227OB.js';
 import { useState, useCallback } from 'react';
 import CodeMirror from '@uiw/react-codemirror';

package/dist/index.cjs

@@ -3361,7 +3361,8 @@ function FileTreeEditor2({
   saveLabel = "Save",
   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
+  savedVersion,
+  fixedStructure = false
 }) {
   const [files, setFiles] = React.useState(initialFiles);
   const [selectedPath, setSelectedPath] = React.useState(
@@ -3476,7 +3477,7 @@ function FileTreeEditor2({
               node.name,
               "/"
             ] }),
-            !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+            !readOnly && !fixedStructure && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 onClick: (e) => {
@@ -3502,7 +3503,7 @@ function FileTreeEditor2({
               onClick: () => setSelectedPath(file.path),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs truncate", children: fileName }),
-                !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                !readOnly && !fixedStructure && /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     onClick: (e) => {
@@ -3518,7 +3519,7 @@ function FileTreeEditor2({
             file.path
           );
         }),
-        !readOnly && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: `${(depth + 1) * 16 + 8}px` }, className: "py-1 pr-2", children: addingFileInDir === node.fullPath ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
+        !readOnly && !fixedStructure && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: `${(depth + 1) * 16 + 8}px` }, className: "py-1 pr-2", children: addingFileInDir === node.fullPath ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             chunkXXF4U7WL_cjs.Input,
             {
@@ -3558,7 +3559,7 @@ function FileTreeEditor2({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-64 shrink-0 border border-border rounded-md overflow-hidden", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 bg-muted/50 border-b border-border flex items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground", children: title }),
-          !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(
+          !readOnly && !fixedStructure && /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
               onClick: () => setShowAddFolder(!showAddFolder),
@@ -3570,7 +3571,7 @@ function FileTreeEditor2({
             }
           )
         ] }),
-        showAddFolder && !readOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 border-b border-border flex gap-1", children: [
+        showAddFolder && !readOnly && !fixedStructure && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 border-b border-border flex gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             chunkXXF4U7WL_cjs.Input,
             {
@@ -3593,7 +3594,7 @@ function FileTreeEditor2({
               onClick: () => setSelectedPath(file.path),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs truncate", children: file.path }),
-                !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                !readOnly && !fixedStructure && /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     onClick: (e) => {
@@ -3629,17 +3630,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) {
@@ -3658,22 +3835,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("div", { className: "flex items-center justify-end mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { size: "sm", variant: "outline", onClick: () => setImportOpen(true), children: "Import from skills.sh" }) }),
+    /* @__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"
+        }
       }
-    }
-  );
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ImportSkillDialog,
+      {
+        open: importOpen,
+        onOpenChange: setImportOpen,
+        onImported: handleImported,
+        existingFolders
+      }
+    )
+  ] });
 }
 function AgentPluginManager({ agentId, initialPlugins, onSaved }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
@@ -4069,7 +4259,7 @@ function AgentA2aInfo({
     ] })
   ] });
 }
-var AgentIdentityTab = React.lazy(() => import('./agent-identity-tab-HADOCEAN.cjs').then((m) => ({ default: m.AgentIdentityTab })));
+var AgentIdentityTab = React.lazy(() => import('./agent-identity-tab-YGMVWOWT.cjs').then((m) => ({ default: m.AgentIdentityTab })));
 function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adminApiKey }) {
   const { LinkComponent, basePath } = chunkXXF4U7WL_cjs.useNavigation();
   const { mutate } = swr.useSWRConfig();

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

@@ -3337,7 +3337,8 @@ function FileTreeEditor2({
   saveLabel = "Save",
   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
+  savedVersion,
+  fixedStructure = false
 }) {
   const [files, setFiles] = useState(initialFiles);
   const [selectedPath, setSelectedPath] = useState(
@@ -3452,7 +3453,7 @@ function FileTreeEditor2({
               node.name,
               "/"
             ] }),
-            !readOnly && /* @__PURE__ */ jsx(
+            !readOnly && !fixedStructure && /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: (e) => {
@@ -3478,7 +3479,7 @@ function FileTreeEditor2({
               onClick: () => setSelectedPath(file.path),
               children: [
                 /* @__PURE__ */ jsx("span", { className: "text-xs truncate", children: fileName }),
-                !readOnly && /* @__PURE__ */ jsx(
+                !readOnly && !fixedStructure && /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: (e) => {
@@ -3494,7 +3495,7 @@ function FileTreeEditor2({
             file.path
           );
         }),
-        !readOnly && /* @__PURE__ */ jsx("div", { style: { paddingLeft: `${(depth + 1) * 16 + 8}px` }, className: "py-1 pr-2", children: addingFileInDir === node.fullPath ? /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+        !readOnly && !fixedStructure && /* @__PURE__ */ jsx("div", { style: { paddingLeft: `${(depth + 1) * 16 + 8}px` }, className: "py-1 pr-2", children: addingFileInDir === node.fullPath ? /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -3534,7 +3535,7 @@ function FileTreeEditor2({
       /* @__PURE__ */ jsxs("div", { className: "w-64 shrink-0 border border-border rounded-md overflow-hidden", children: [
         /* @__PURE__ */ jsxs("div", { className: "p-2 bg-muted/50 border-b border-border flex items-center justify-between", children: [
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: title }),
-          !readOnly && /* @__PURE__ */ jsxs(
+          !readOnly && !fixedStructure && /* @__PURE__ */ jsxs(
             "button",
             {
               onClick: () => setShowAddFolder(!showAddFolder),
@@ -3546,7 +3547,7 @@ function FileTreeEditor2({
             }
           )
         ] }),
-        showAddFolder && !readOnly && /* @__PURE__ */ jsxs("div", { className: "p-2 border-b border-border flex gap-1", children: [
+        showAddFolder && !readOnly && !fixedStructure && /* @__PURE__ */ jsxs("div", { className: "p-2 border-b border-border flex gap-1", children: [
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -3569,7 +3570,7 @@ function FileTreeEditor2({
               onClick: () => setSelectedPath(file.path),
               children: [
                 /* @__PURE__ */ jsx("span", { className: "text-xs truncate", children: file.path }),
-                !readOnly && /* @__PURE__ */ jsx(
+                !readOnly && !fixedStructure && /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: (e) => {
@@ -3605,17 +3606,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) {
@@ -3634,22 +3811,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("div", { className: "flex items-center justify-end mb-4", children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => setImportOpen(true), children: "Import from skills.sh" }) }),
+    /* @__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"
+        }
       }
-    }
-  );
+    ),
+    /* @__PURE__ */ jsx(
+      ImportSkillDialog,
+      {
+        open: importOpen,
+        onOpenChange: setImportOpen,
+        onImported: handleImported,
+        existingFolders
+      }
+    )
+  ] });
 }
 function AgentPluginManager({ agentId, initialPlugins, onSaved }) {
   const client = useAgentPlaneClient();
@@ -4045,7 +4235,7 @@ function AgentA2aInfo({
     ] })
   ] });
 }
-var AgentIdentityTab = lazy(() => import('./agent-identity-tab-LROKQ7HM.js').then((m) => ({ default: m.AgentIdentityTab })));
+var AgentIdentityTab = lazy(() => import('./agent-identity-tab-BP5MPDYZ.js').then((m) => ({ default: m.AgentIdentityTab })));
 function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adminApiKey }) {
   const { LinkComponent, basePath } = useNavigation();
   const { mutate } = useSWRConfig();

package/package.json

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

package/dist/agent-identity-tab-LROKQ7HM.js

@@ -1,2 +0,0 @@
-export { AgentIdentityTab } from './chunk-UMNJ5SV6.js';
-import './chunk-XFI227OB.js';