@agent-native/core 0.9.1 → 0.11.0

package/dist/client/resources/ResourcesPanel.js

@@ -9,7 +9,7 @@ import { ResourceTree } from "./ResourceTree.js";
 import { ResourceEditor } from "./ResourceEditor.js";
 import { serializeFrontmatter } from "../../resources/metadata.js";
 import { useResourceTree, useResource, useCreateResource, useUpdateResource, useDeleteResource, useUploadResource, withMcpServersFolder, withAgentScratchFolder, } from "./use-resources.js";
-import { useMcpServers, useCreateMcpServer, useDeleteMcpServer, testMcpServerUrl, parseMcpVirtualId, } from "./use-mcp-servers.js";
+import { formatMcpServerError, getMcpUrlValidationError, useMcpServers, useCreateMcpServer, useDeleteMcpServer, testMcpServerUrl, parseMcpVirtualId, } from "./use-mcp-servers.js";
 import { McpServerDetail } from "./McpServerDetail.js";
 import { useOrg } from "../org/hooks.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../components/ui/tooltip.js";
@@ -76,10 +76,18 @@ function CreateMenu({ scope, onCreateFile, onCreateResource, onCreateMcpServer,
     useEffect(() => {
         if (view !== "menu" && view !== "agent-form") {
             setValue("");
+            if (view === "mcp-server") {
+                setMcpError(null);
+                setMcpTestResult(null);
+            }
             const t = setTimeout(() => inputRef.current?.focus(), 50);
             return () => clearTimeout(t);
         }
     }, [view]);
+    const clearMcpFeedback = () => {
+        setMcpError(null);
+        setMcpTestResult(null);
+    };
     useEffect(() => {
         if (!open)
             return;
@@ -100,6 +108,8 @@ function CreateMenu({ scope, onCreateFile, onCreateResource, onCreateMcpServer,
         function handleKey(e) {
             if (e.key === "Escape") {
                 if (view !== "menu") {
+                    if (view === "mcp-server")
+                        clearMcpFeedback();
                     setView("menu");
                 }
                 else {
@@ -130,7 +140,7 @@ Follow the create-skill pattern to build this. Before writing:
 
 1. **Determine the skill name** — derive a hyphen-case name from the description (e.g. "code review" → "code-review")
 2. **Determine the skill type** — Pattern (architectural rule), Workflow (step-by-step), or Generator (scaffolding)
-3. **Write the skill** as a ${scope} resource at path "skills/<name>.md" using resource-write
+3. **Write the skill** as a ${scope} resource at path "skills/<name>/SKILL.md" using resource-write
 
 The skill file MUST have YAML frontmatter with name and description (under 40 words), then markdown with:
 - Clear rule/purpose statement
@@ -301,6 +311,12 @@ The result should be a reusable agent profile, not a one-off task response.`,
         const url = mcpUrl.trim();
         if (!name || !url || mcpBusy)
             return;
+        const validationError = getMcpUrlValidationError(url);
+        if (validationError) {
+            setMcpError(validationError);
+            setMcpTestResult(null);
+            return;
+        }
         setMcpError(null);
         setMcpBusy(true);
         try {
@@ -315,7 +331,7 @@ The result should be a reusable agent profile, not a one-off task response.`,
             onCreated?.();
         }
         catch (err) {
-            setMcpError(err?.message ?? String(err));
+            setMcpError(formatMcpServerError(err));
         }
         finally {
             setMcpBusy(false);
@@ -325,6 +341,12 @@ The result should be a reusable agent profile, not a one-off task response.`,
         const url = mcpUrl.trim();
         if (!url || mcpBusy)
             return;
+        const validationError = getMcpUrlValidationError(url);
+        if (validationError) {
+            setMcpTestResult({ ok: false, message: validationError });
+            setMcpError(null);
+            return;
+        }
         setMcpTestResult(null);
         setMcpError(null);
         setMcpBusy(true);
@@ -341,7 +363,7 @@ The result should be a reusable agent profile, not a one-off task response.`,
             }
         }
         catch (err) {
-            setMcpTestResult({ ok: false, message: err?.message ?? String(err) });
+            setMcpTestResult({ ok: false, message: formatMcpServerError(err) });
         }
         finally {
             setMcpBusy(false);
@@ -418,15 +440,27 @@ The result should be a reusable agent profile, not a one-off task response.`,
                                                     : "text-muted-foreground hover:text-foreground"), children: "Personal" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => hasOrg && canCreateOrgMcp && setMcpScope("org"), disabled: !hasOrg || !canCreateOrgMcp, className: cn("flex-1 rounded px-2 py-1 text-[11px] font-medium", mcpScope === "org"
                                                                 ? "bg-accent text-foreground"
                                                                 : "text-muted-foreground hover:text-foreground", (!hasOrg || !canCreateOrgMcp) &&
-                                                                "cursor-not-allowed opacity-40 hover:text-muted-foreground"), children: "Organization" }) }), _jsx(TooltipContent, { children: !hasOrg
+                                                                "cursor-not-allowed opacity-50 hover:text-muted-foreground"), children: "Organization" }) }), _jsx(TooltipContent, { children: !hasOrg
                                                             ? "Join an organization to share MCP servers"
                                                             : !canCreateOrgMcp
                                                                 ? "Only owners and admins can add org-scope servers"
-                                                                : undefined })] })] }), _jsx("input", { value: mcpName, onChange: (e) => setMcpName(e.target.value), className: "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "Server name (e.g. zapier)" }), _jsx("input", { value: mcpUrl, onChange: (e) => setMcpUrl(e.target.value), className: "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "https://mcp.example.com/" }), _jsx("input", { value: mcpDescription, onChange: (e) => setMcpDescription(e.target.value), className: "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "Description (optional)" }), _jsx("label", { className: "block text-[10px] font-medium text-muted-foreground/70", children: "Headers (one per line, e.g. Authorization: Bearer \u2026)" }), _jsx("textarea", { value: mcpHeadersText, onChange: (e) => setMcpHeadersText(e.target.value), rows: 2, className: "w-full resize-y rounded-md border border-border bg-background px-2.5 py-1.5 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", style: {
+                                                                : undefined })] })] }), _jsx("input", { value: mcpName, onChange: (e) => {
+                                            setMcpName(e.target.value);
+                                            clearMcpFeedback();
+                                        }, className: "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "Server name (e.g. zapier)" }), _jsx("input", { value: mcpUrl, onChange: (e) => {
+                                            setMcpUrl(e.target.value);
+                                            clearMcpFeedback();
+                                        }, className: "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "https://mcp.example.com/" }), _jsx("input", { value: mcpDescription, onChange: (e) => {
+                                            setMcpDescription(e.target.value);
+                                            clearMcpFeedback();
+                                        }, className: "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "Description (optional)" }), _jsxs("div", { children: [_jsx("label", { className: "block text-[10px] font-medium text-foreground", children: "Headers" }), _jsx("p", { className: "mt-0.5 text-[10px] leading-snug text-muted-foreground/70", children: "Optional. One per line, for example Authorization: Bearer sk-..." })] }), _jsx("textarea", { value: mcpHeadersText, onChange: (e) => {
+                                            setMcpHeadersText(e.target.value);
+                                            clearMcpFeedback();
+                                        }, rows: 2, className: "w-full resize-y rounded-md border border-border bg-background px-2.5 py-1.5 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", style: {
                                             fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
-                                        }, placeholder: "Authorization: Bearer sk-..." }), mcpTestResult && (_jsxs("div", { className: cn("flex items-center gap-1 text-[11px]", mcpTestResult.ok
+                                        }, placeholder: "Authorization: Bearer sk-..." }), mcpTestResult && (_jsxs("div", { className: cn("flex items-start gap-1 text-[11px] leading-snug", mcpTestResult.ok
                                             ? "text-green-600 dark:text-green-400"
-                                            : "text-red-600 dark:text-red-400"), children: [mcpTestResult.ok && _jsx(IconCheck, { className: "h-3 w-3" }), mcpTestResult.message] })), mcpError && (_jsx("div", { className: "text-[11px] text-red-600 dark:text-red-400", children: mcpError }))] }), _jsxs("div", { className: "mt-2.5 flex items-center justify-between gap-2", children: [_jsx("button", { type: "button", onClick: runMcpTest, disabled: !mcpUrl.trim() || mcpBusy, className: "rounded-md border border-border bg-background px-2.5 py-1.5 text-[11px] font-medium text-foreground hover:bg-accent disabled:opacity-40 disabled:pointer-events-none", children: "Test" }), _jsx("button", { type: "button", onClick: submitMcpServer, disabled: !mcpName.trim() || !mcpUrl.trim() || mcpBusy, className: "rounded-md bg-accent px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40 disabled:pointer-events-none", children: mcpBusy ? (_jsx(IconLoader2, { className: "h-3 w-3 animate-spin" })) : ("Connect") })] })] }))] }))] }));
+                                            : "text-red-600 dark:text-red-400"), children: [mcpTestResult.ok && (_jsx(IconCheck, { className: "mt-0.5 h-3 w-3 shrink-0" })), _jsx("span", { className: "min-w-0 break-words", children: mcpTestResult.message })] })), mcpError && (_jsx("div", { className: "break-words text-[11px] leading-snug text-red-600 dark:text-red-400", children: mcpError }))] }), _jsxs("div", { className: "mt-2.5 flex items-center justify-between gap-2", children: [_jsx("button", { type: "button", onClick: runMcpTest, disabled: !mcpUrl.trim() || mcpBusy, className: "rounded-md border border-border bg-background px-2.5 py-1.5 text-[11px] font-medium text-foreground hover:bg-accent disabled:opacity-40 disabled:pointer-events-none", children: "Test" }), _jsx("button", { type: "button", onClick: submitMcpServer, disabled: !mcpName.trim() || !mcpUrl.trim() || mcpBusy, className: "rounded-md bg-accent px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40 disabled:pointer-events-none", children: mcpBusy ? (_jsx(IconLoader2, { className: "h-3 w-3 animate-spin" })) : ("Connect") })] })] }))] }))] }));
 }
 // ─── PathBreadcrumb ─────────────────────────────────────────────────────────
 function PathBreadcrumb({ path }) {
@@ -447,11 +481,11 @@ This file customizes how the AI agent behaves in this app. Edit it to add your o
 
 ## Skills
 
-Create skill files under \`skills/\` to give the agent specialized knowledge. Reference them here:
+Create skill files under \`skills/<name>/SKILL.md\` to give the agent specialized knowledge. Reference them here:
 
 | Skill | Path | Description |
 |-------|------|-------------|
-| *(use the skill button to create one)* | | |
+| *(use the skill button to create one)* | \`skills/example/SKILL.md\` | |
 `;
 // BuilderBrowserCard moved to settings/BrowserSection.tsx
 export function ResourcesPanel() {
@@ -461,6 +495,7 @@ export function ResourcesPanel() {
     const canEditOrg = !org?.orgId || org.role === "owner" || org.role === "admin";
     const [activeScope, setActiveScope] = useState(canEditOrg ? "shared" : "personal");
     const [selectedResourceId, setSelectedResourceId] = useState(null);
+    const [toolbarDeleteConfirmId, setToolbarDeleteConfirmId] = useState(null);
     const [dragOver, setDragOver] = useState(false);
     const [editorView, setEditorView] = useState(() => {
         try {
@@ -471,6 +506,9 @@ export function ResourcesPanel() {
         catch { }
         return "visual";
     });
+    useEffect(() => {
+        setToolbarDeleteConfirmId(null);
+    }, [selectedResourceId]);
     const [saveStatus, setSaveStatus] = useState("idle");
     const fileInputRef = useRef(null);
     const sharedTreeQuery = useResourceTree("shared");
@@ -640,9 +678,21 @@ export function ResourcesPanel() {
                                     : saveStatus === "saved"
                                         ? "Saved"
                                         : "" }), _jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { onClick: () => {
-                                                    if (selectedResourceId)
+                                                    if (!selectedResourceId)
+                                                        return;
+                                                    if (toolbarDeleteConfirmId === selectedResourceId) {
                                                         handleDelete(selectedResourceId);
-                                                }, "aria-label": "Delete resource", className: "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-accent/50", children: _jsx(IconTrash, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Delete resource" })] }) })] })] })) : (_jsxs("div", { className: "absolute top-1 right-1 z-10 flex items-center gap-1", children: [_jsx(CreateMenu, { scope: activeScope, onCreateFile: handleCreateFromToolbar, onCreateResource: handleCreateResourceFromToolbar, onCreateMcpServer: handleCreateMcpServer, canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrgForMcp }), _jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { onClick: () => fileInputRef.current?.click(), "aria-label": "Upload file", className: "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconUpload, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Upload file" })] }) }), _jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("a", { href: WORKSPACE_DOCS_URL, target: "_blank", rel: "noopener noreferrer", "aria-label": "What is the Workspace? \u2014 open docs", className: "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconHelp, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "What is the Workspace? \u2014 open docs" })] }) }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: (e) => {
+                                                        setToolbarDeleteConfirmId(null);
+                                                    }
+                                                    else {
+                                                        setToolbarDeleteConfirmId(selectedResourceId);
+                                                    }
+                                                }, "aria-label": toolbarDeleteConfirmId === selectedResourceId
+                                                    ? "Confirm delete resource"
+                                                    : "Delete resource", className: cn("flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-accent/50", toolbarDeleteConfirmId === selectedResourceId &&
+                                                    "bg-destructive/10 text-destructive"), children: _jsx(IconTrash, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: toolbarDeleteConfirmId === selectedResourceId
+                                                ? "Click again to delete"
+                                                : "Delete resource" })] }) })] })] })) : (_jsxs("div", { className: "absolute top-1 right-1 z-10 flex items-center gap-1", children: [_jsx(CreateMenu, { scope: activeScope, onCreateFile: handleCreateFromToolbar, onCreateResource: handleCreateResourceFromToolbar, onCreateMcpServer: handleCreateMcpServer, canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrgForMcp }), _jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { onClick: () => fileInputRef.current?.click(), "aria-label": "Upload file", className: "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconUpload, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Upload file" })] }) }), _jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("a", { href: WORKSPACE_DOCS_URL, target: "_blank", rel: "noopener noreferrer", "aria-label": "What is the Workspace? \u2014 open docs", className: "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconHelp, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "What is the Workspace? \u2014 open docs" })] }) }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: (e) => {
                             if (e.target.files && e.target.files.length > 0) {
                                 handleUploadFiles(e.target.files);
                                 e.target.value = "";