@getcatalystiq/agent-plane-ui 0.1.12 → 0.1.13

package/dist/index.d.cts

@@ -103,6 +103,18 @@ interface AgentPlaneClient {
         get(marketplaceId: string): Promise<unknown>;
         listPlugins(marketplaceId: string): Promise<unknown[]>;
         getPlugin(marketplaceId: string, pluginName: string): Promise<unknown>;
+        getPluginFiles(marketplaceId: string, pluginName: string): Promise<unknown>;
+        savePluginFiles(marketplaceId: string, pluginName: string, data: {
+            skills: {
+                path: string;
+                content: string;
+            }[];
+            agents: {
+                path: string;
+                content: string;
+            }[];
+            mcpJson: string | null;
+        }): Promise<unknown>;
         create(params: Record<string, unknown>): Promise<unknown>;
         delete(marketplaceId: string): Promise<void>;
         updateToken(marketplaceId: string, params: Record<string, unknown>): Promise<unknown>;

package/dist/index.d.ts

@@ -103,6 +103,18 @@ interface AgentPlaneClient {
         get(marketplaceId: string): Promise<unknown>;
         listPlugins(marketplaceId: string): Promise<unknown[]>;
         getPlugin(marketplaceId: string, pluginName: string): Promise<unknown>;
+        getPluginFiles(marketplaceId: string, pluginName: string): Promise<unknown>;
+        savePluginFiles(marketplaceId: string, pluginName: string, data: {
+            skills: {
+                path: string;
+                content: string;
+            }[];
+            agents: {
+                path: string;
+                content: string;
+            }[];
+            mcpJson: string | null;
+        }): Promise<unknown>;
         create(params: Record<string, unknown>): Promise<unknown>;
         delete(marketplaceId: string): Promise<void>;
         updateToken(marketplaceId: string, params: Record<string, unknown>): Promise<unknown>;

package/dist/index.js

@@ -1,202 +1,13 @@
-import * as React3 from 'react';
-import React3__default, { createContext, lazy, useRef, useMemo, useContext, useState, useCallback, useEffect, Suspense } from 'react';
+import { cn, Card, CardHeader, CardTitle, CardContent, Button, Badge, useNavigation, useApi, Skeleton, useAgentPlaneClient, Input, supportsClaudeRunner, buttonVariants } from './chunk-HMB7OKXO.js';
+export { AgentPlaneProvider, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Skeleton, badgeVariants, buttonVariants, cn, useAgentPlaneClient, useApi, useAuthError, useNavigation } from './chunk-HMB7OKXO.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import useSWR, { useSWRConfig } from 'swr';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { cva } from 'class-variance-authority';
+import * as React3 from 'react';
+import React3__default, { lazy, useState, useCallback, useMemo, useRef, useEffect, Suspense } from 'react';
+import { useSWRConfig } from 'swr';
 import ReactMarkdown from 'react-markdown';
 import { Command } from 'cmdk';
 import * as Popover from '@radix-ui/react-popover';
 
-// src/provider.tsx
-var ClientContext = createContext(null);
-var NavigationContext = createContext(
-  null
-);
-function DefaultLink({ href, children, className }) {
-  return /* @__PURE__ */ jsx("a", { href, className, children });
-}
-function AgentPlaneProvider({
-  client,
-  onNavigate,
-  LinkComponent = DefaultLink,
-  onAuthError,
-  basePath = "",
-  children
-}) {
-  const clientRef = useRef(client);
-  clientRef.current = client;
-  const onAuthErrorRef = useRef(onAuthError);
-  onAuthErrorRef.current = onAuthError;
-  const clientValue = useMemo(
-    () => ({
-      // Expose a stable object whose `.client` always points to the latest ref.
-      get client() {
-        return clientRef.current;
-      },
-      get onAuthError() {
-        return onAuthErrorRef.current;
-      }
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable
-    []
-  );
-  const navigationValue = useMemo(
-    () => ({
-      onNavigate,
-      LinkComponent,
-      basePath
-    }),
-    [onNavigate, LinkComponent, basePath]
-  );
-  return /* @__PURE__ */ jsx(ClientContext.Provider, { value: clientValue, children: /* @__PURE__ */ jsx(NavigationContext.Provider, { value: navigationValue, children }) });
-}
-function useAgentPlaneClient() {
-  const ctx = useContext(ClientContext);
-  if (!ctx) {
-    throw new Error(
-      "useAgentPlaneClient must be used within an <AgentPlaneProvider>"
-    );
-  }
-  return ctx.client;
-}
-function useAuthError() {
-  const ctx = useContext(ClientContext);
-  if (!ctx) {
-    throw new Error(
-      "useAuthError must be used within an <AgentPlaneProvider>"
-    );
-  }
-  return ctx.onAuthError;
-}
-function useNavigation() {
-  const ctx = useContext(NavigationContext);
-  if (!ctx) {
-    throw new Error(
-      "useNavigation must be used within an <AgentPlaneProvider>"
-    );
-  }
-  return ctx;
-}
-function useApi(key, fetcher, options) {
-  const client = useAgentPlaneClient();
-  const onAuthError = useAuthError();
-  return useSWR(
-    key,
-    () => fetcher(client),
-    {
-      revalidateOnFocus: false,
-      errorRetryCount: 3,
-      onError: (err) => {
-        if (onAuthError && err && typeof err === "object" && "status" in err && err.status === 401) {
-          onAuthError(err instanceof Error ? err : new Error(String(err)));
-        }
-      },
-      ...options
-    }
-  );
-}
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-function supportsClaudeRunner(model) {
-  return !model.includes("/") || model.startsWith("anthropic/");
-}
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-white shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React3.forwardRef(
-  ({ className, variant, size, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var Card = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("rounded-xl border bg-card text-card-foreground shadow", className), ...props })
-);
-Card.displayName = "Card";
-var CardHeader = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
-);
-CardHeader.displayName = "CardHeader";
-var CardTitle = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("font-semibold leading-none tracking-tight", className), ...props })
-);
-CardTitle.displayName = "CardTitle";
-var CardDescription = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
-);
-CardDescription.displayName = "CardDescription";
-var CardContent = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
-);
-CardContent.displayName = "CardContent";
-var badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground shadow",
-        secondary: "border-transparent bg-secondary text-secondary-foreground",
-        destructive: "border-transparent bg-destructive text-white shadow",
-        outline: "text-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
-}
-var Input = React3.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "input",
-      {
-        type,
-        className: cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
 function Select({ className = "", ...props }) {
   return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsx(
@@ -265,9 +76,6 @@ function DetailPageHeader({ backHref, backLabel, title, actions, badge, subtitle
     subtitle && /* @__PURE__ */ jsx("div", { className: "mt-1", children: subtitle })
   ] });
 }
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
-}
 function MetricCard({ label, children, className }) {
   return /* @__PURE__ */ jsxs(Card, { className, children: [
     /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium text-muted-foreground", children: label }) }),
@@ -1523,46 +1331,248 @@ function PluginMarketplaceDetailPage({ marketplaceId, initialData, initialPlugin
     ] })
   ] });
 }
-function AgentsTab({ agents }) {
+function AgentsTab({
+  agents,
+  onSelectAgent,
+  selectedFilename
+}) {
   if (agents.length === 0) {
     return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4", children: "No agents defined in this plugin." });
   }
-  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: agents.map((agent) => /* @__PURE__ */ jsxs(Card, { children: [
-    /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: agent.name }) }),
-    /* @__PURE__ */ jsxs(CardContent, { children: [
-      agent.description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: agent.description }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground italic", children: "No description" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/60 mt-2 font-mono", children: agent.filename })
-    ] })
-  ] }, agent.filename)) });
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: agents.map((agent) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: `cursor-pointer transition-colors hover:border-primary/50 ${selectedFilename === agent.filename ? "border-primary ring-1 ring-primary/30" : ""}`,
+      onClick: () => onSelectAgent(agent.filename),
+      children: [
+        /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: agent.name }) }),
+        /* @__PURE__ */ jsxs(CardContent, { children: [
+          agent.description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: agent.description }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground italic", children: "No description" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/60 mt-2 font-mono", children: agent.filename })
+        ] })
+      ]
+    },
+    agent.filename
+  )) });
 }
-function SkillsTab({ skills }) {
+function SkillsTab({
+  skills,
+  onSelectSkill,
+  selectedSkill
+}) {
   if (skills.length === 0) {
     return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4", children: "No skills defined in this plugin." });
   }
-  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: skills.map((skill) => /* @__PURE__ */ jsxs(Card, { children: [
-    /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: skill }) }),
-    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground font-mono", children: [
-      "skills/",
-      skill,
-      "/"
-    ] }) })
-  ] }, skill)) });
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: skills.map((skill) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: `cursor-pointer transition-colors hover:border-primary/50 ${selectedSkill === skill ? "border-primary ring-1 ring-primary/30" : ""}`,
+      onClick: () => onSelectSkill(skill),
+      children: [
+        /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: skill }) }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground font-mono", children: [
+          "skills/",
+          skill,
+          "/"
+        ] }) })
+      ]
+    },
+    skill
+  )) });
 }
-function ConnectorsTab({ hasMcpJson }) {
+function ConnectorsTab({
+  hasMcpJson,
+  mcpJsonContent,
+  onSelectConnector,
+  selected
+}) {
   if (!hasMcpJson) {
     return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4", children: "No connectors defined in this plugin." });
   }
-  return /* @__PURE__ */ jsxs(Card, { children: [
-    /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: ".mcp.json" }) }),
-    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "This plugin includes an MCP connector configuration that will be suggested to agents using it." }) })
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: `cursor-pointer transition-colors hover:border-primary/50 ${selected ? "border-primary ring-1 ring-primary/30" : ""}`,
+      onClick: onSelectConnector,
+      children: [
+        /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: ".mcp.json" }) }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "This plugin includes an MCP connector configuration that will be suggested to agents using it." }) })
+      ]
+    }
+  );
+}
+function FileEditorInline({
+  filePath,
+  content,
+  onChange,
+  onSave,
+  onClose,
+  saving,
+  saveError,
+  saveSuccess,
+  readOnly
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "mt-4 border border-border rounded-md overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-muted/50 border-b border-border flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-mono", children: filePath }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        saveError && /* @__PURE__ */ jsx("span", { className: "text-xs text-destructive", children: saveError }),
+        saveSuccess && /* @__PURE__ */ jsx("span", { className: "text-xs text-green-500", children: saveSuccess }),
+        !readOnly && /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onSave, disabled: saving, className: "h-7 text-xs", children: saving ? "Saving..." : "Save" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onClose, className: "h-7 text-xs", children: "Close" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        value: content,
+        onChange: (e) => onChange(e.target.value),
+        readOnly,
+        className: "w-full min-h-[400px] p-3 bg-background text-foreground text-sm font-mono resize-y focus:outline-none",
+        spellCheck: false
+      }
+    )
   ] });
 }
 function PluginDetailPage({ marketplaceId, pluginName }) {
   const { LinkComponent, basePath } = useNavigation();
+  const client = useAgentPlaneClient();
   const { data: plugin, error, isLoading } = useApi(
     `marketplace-${marketplaceId}-plugin-${pluginName}`,
     (c) => c.pluginMarketplaces.getPlugin(marketplaceId, pluginName)
   );
+  const [editorState, setEditorState] = useState(null);
+  const [pluginFiles, setPluginFiles] = useState(null);
+  const [filesLoading, setFilesLoading] = useState(false);
+  const [filesError, setFilesError] = useState("");
+  const [editedContent, setEditedContent] = useState(/* @__PURE__ */ new Map());
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState("");
+  const [saveSuccess, setSaveSuccess] = useState("");
+  const fetchFiles = useCallback(async () => {
+    if (pluginFiles) return pluginFiles;
+    setFilesLoading(true);
+    setFilesError("");
+    try {
+      const files = await client.pluginMarketplaces.getPluginFiles(marketplaceId, pluginName);
+      setPluginFiles(files);
+      return files;
+    } catch (err) {
+      setFilesError(err instanceof Error ? err.message : "Failed to load files");
+      return null;
+    } finally {
+      setFilesLoading(false);
+    }
+  }, [client, marketplaceId, pluginName, pluginFiles]);
+  const handleSelectAgent = useCallback(async (filename) => {
+    if (editorState?.type === "agent" && editorState.identifier === filename) {
+      setEditorState(null);
+      return;
+    }
+    setSaveError("");
+    setSaveSuccess("");
+    const files = await fetchFiles();
+    if (files) {
+      setEditorState({ type: "agent", identifier: filename });
+    }
+  }, [editorState, fetchFiles]);
+  const handleSelectSkill = useCallback(async (skill) => {
+    if (editorState?.type === "skill" && editorState.identifier === skill) {
+      setEditorState(null);
+      return;
+    }
+    setSaveError("");
+    setSaveSuccess("");
+    const files = await fetchFiles();
+    if (files) {
+      setEditorState({ type: "skill", identifier: skill });
+    }
+  }, [editorState, fetchFiles]);
+  const handleSelectConnector = useCallback(async () => {
+    if (editorState?.type === "connector") {
+      setEditorState(null);
+      return;
+    }
+    setSaveError("");
+    setSaveSuccess("");
+    const files = await fetchFiles();
+    if (files) {
+      setEditorState({ type: "connector", identifier: ".mcp.json" });
+    }
+  }, [editorState, fetchFiles]);
+  function getEditorFile() {
+    if (!editorState || !pluginFiles) return null;
+    if (editorState.type === "agent") {
+      const file = pluginFiles.agents.find((f) => f.path === editorState.identifier);
+      if (!file) return null;
+      const editedKey = `agents/${file.path}`;
+      return {
+        path: `agents/${file.path}`,
+        content: editedContent.has(editedKey) ? editedContent.get(editedKey) : file.content
+      };
+    }
+    if (editorState.type === "skill") {
+      const skillFiles = pluginFiles.skills.filter((f) => f.path.startsWith(editorState.identifier + "/") || f.path === editorState.identifier);
+      const file = skillFiles.length > 0 ? skillFiles[0] : null;
+      if (!file) return null;
+      const editedKey = `skills/${file.path}`;
+      return {
+        path: `skills/${file.path}`,
+        content: editedContent.has(editedKey) ? editedContent.get(editedKey) : file.content
+      };
+    }
+    if (editorState.type === "connector") {
+      const editedKey = ".mcp.json";
+      return {
+        path: ".mcp.json",
+        content: editedContent.has(editedKey) ? editedContent.get(editedKey) : pluginFiles.mcpJson ?? ""
+      };
+    }
+    return null;
+  }
+  function handleContentChange(content) {
+    const file = getEditorFile();
+    if (!file) return;
+    setEditedContent((prev) => new Map(prev).set(file.path, content));
+  }
+  async function handleSave() {
+    if (!pluginFiles) return;
+    setSaving(true);
+    setSaveError("");
+    setSaveSuccess("");
+    const updatedSkills = pluginFiles.skills.map((f) => {
+      const key = `skills/${f.path}`;
+      return editedContent.has(key) ? { ...f, content: editedContent.get(key) } : f;
+    });
+    const updatedAgents = pluginFiles.agents.map((f) => {
+      const key = `agents/${f.path}`;
+      return editedContent.has(key) ? { ...f, content: editedContent.get(key) } : f;
+    });
+    const updatedMcpJson = editedContent.has(".mcp.json") ? editedContent.get(".mcp.json") : pluginFiles.mcpJson;
+    try {
+      const result = await client.pluginMarketplaces.savePluginFiles(
+        marketplaceId,
+        pluginName,
+        {
+          skills: updatedSkills,
+          agents: updatedAgents,
+          mcpJson: updatedMcpJson || null
+        }
+      );
+      setPluginFiles({
+        ...pluginFiles,
+        skills: updatedSkills,
+        agents: updatedAgents,
+        mcpJson: updatedMcpJson ?? null
+      });
+      setEditedContent(/* @__PURE__ */ new Map());
+      setSaveSuccess(`Saved (commit ${result.commitSha.slice(0, 7)})`);
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  }
   if (error) {
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[40vh]", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
       "Failed to load plugin: ",
@@ -1576,18 +1586,90 @@ function PluginDetailPage({ marketplaceId, pluginName }) {
       /* @__PURE__ */ jsx(Skeleton, { className: "h-64 rounded-lg" })
     ] });
   }
+  const readOnly = pluginFiles ? !pluginFiles.isOwned : true;
+  const editorFile = getEditorFile();
   const tabs = [
     {
       label: `Agents (${plugin.agents.length})`,
-      content: /* @__PURE__ */ jsx(AgentsTab, { agents: plugin.agents })
+      content: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          AgentsTab,
+          {
+            agents: plugin.agents,
+            onSelectAgent: handleSelectAgent,
+            selectedFilename: editorState?.type === "agent" ? editorState.identifier : null
+          }
+        ),
+        editorState?.type === "agent" && editorFile && (filesLoading ? /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[400px] rounded-md" }) }) : filesError ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-destructive", children: filesError }) : /* @__PURE__ */ jsx(
+          FileEditorInline,
+          {
+            filePath: editorFile.path,
+            content: editorFile.content,
+            onChange: handleContentChange,
+            onSave: handleSave,
+            onClose: () => setEditorState(null),
+            saving,
+            saveError,
+            saveSuccess,
+            readOnly
+          }
+        ))
+      ] })
     },
     {
       label: `Skills (${plugin.skills.length})`,
-      content: /* @__PURE__ */ jsx(SkillsTab, { skills: plugin.skills })
+      content: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          SkillsTab,
+          {
+            skills: plugin.skills,
+            onSelectSkill: handleSelectSkill,
+            selectedSkill: editorState?.type === "skill" ? editorState.identifier : null
+          }
+        ),
+        editorState?.type === "skill" && editorFile && (filesLoading ? /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[400px] rounded-md" }) }) : filesError ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-destructive", children: filesError }) : /* @__PURE__ */ jsx(
+          FileEditorInline,
+          {
+            filePath: editorFile.path,
+            content: editorFile.content,
+            onChange: handleContentChange,
+            onSave: handleSave,
+            onClose: () => setEditorState(null),
+            saving,
+            saveError,
+            saveSuccess,
+            readOnly
+          }
+        ))
+      ] })
     },
     {
       label: `Connectors (${plugin.hasMcpJson ? 1 : 0})`,
-      content: /* @__PURE__ */ jsx(ConnectorsTab, { hasMcpJson: plugin.hasMcpJson })
+      content: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          ConnectorsTab,
+          {
+            hasMcpJson: plugin.hasMcpJson,
+            mcpJsonContent: pluginFiles?.mcpJson ?? null,
+            onSelectConnector: handleSelectConnector,
+            selected: editorState?.type === "connector"
+          }
+        ),
+        editorState?.type === "connector" && editorFile && (filesLoading ? /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[400px] rounded-md" }) }) : filesError ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-destructive", children: filesError }) : /* @__PURE__ */ jsx(
+          FileEditorInline,
+          {
+            filePath: editorFile.path,
+            content: editorFile.content,
+            onChange: handleContentChange,
+            onSave: handleSave,
+            onClose: () => setEditorState(null),
+            saving,
+            saveError,
+            saveSuccess,
+            readOnly
+          }
+        ))
+      ] })
     }
   ];
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
@@ -1605,7 +1687,8 @@ function PluginDetailPage({ marketplaceId, pluginName }) {
         plugin.version && /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
           "v",
           plugin.version
-        ] })
+        ] }),
+        pluginFiles && (pluginFiles.isOwned ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Editable" }) : /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Read-only" }))
       ] }),
       plugin.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: plugin.description })
     ] }),
@@ -4288,4 +4371,4 @@ function ScheduleCard({
   ] });
 }
 
-export { AdminTable, AdminTableHead, AdminTableRow, AgentA2aInfo, AgentConnectorsManager, AgentDetailPage, AgentEditForm, AgentListPage, AgentPlaneProvider, AgentPluginManager, AgentRuns, AgentScheduleForm, AgentSkillManager, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, ConfirmDialog, CopyButton, DashboardPage, DetailPageHeader, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, EmptyRow, FormError, FormField, Input, LocalDate, McpServerListPage, MetricCard, ModelSelector, PaginationBar, PluginDetailPage, PluginMarketplaceDetailPage, PluginMarketplaceListPage, RunDetailPage, RunListPage, RunSourceBadge, RunStatusBadge, SectionHeader, Select, SettingsPage, Skeleton, Tabs, Textarea, Th, ToolkitMultiselect, TranscriptViewer, badgeVariants, buttonVariants, cn, parsePaginationParams, useAgentPlaneClient, useApi, useAuthError, useNavigation };
+export { AdminTable, AdminTableHead, AdminTableRow, AgentA2aInfo, AgentConnectorsManager, AgentDetailPage, AgentEditForm, AgentListPage, AgentPluginManager, AgentRuns, AgentScheduleForm, AgentSkillManager, ConfirmDialog, CopyButton, DashboardPage, DetailPageHeader, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, EmptyRow, FormError, FormField, LocalDate, McpServerListPage, MetricCard, ModelSelector, PaginationBar, PluginDetailPage, PluginMarketplaceDetailPage, PluginMarketplaceListPage, RunDetailPage, RunListPage, RunSourceBadge, RunStatusBadge, SectionHeader, Select, SettingsPage, Tabs, Textarea, Th, ToolkitMultiselect, TranscriptViewer, parsePaginationParams };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getcatalystiq/agent-plane-ui",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Embeddable React component library for AgentPlane",
   "type": "module",
   "exports": {
@@ -55,7 +55,7 @@
     "@codemirror/lang-json": "^6.0.0",
     "@codemirror/lang-markdown": "^6.0.0",
     "@codemirror/theme-one-dark": "^6.0.0",
-    "@getcatalystiq/agent-plane": "^0.5.9",
+    "@getcatalystiq/agent-plane": "^0.5.10",
     "@uiw/react-codemirror": "^4.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",