@agent-native/core 0.79.26 → 0.80.0

package/dist/client/resources/ResourcesPanel.js

@@ -1,20 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconPlus, IconUpload, IconArrowLeft, IconPencil, IconBulb, IconBolt, IconTrash, IconEye, IconCode, IconClock, IconMessageChatbot, IconExternalLink, IconLoader2, IconHelp, IconPlugConnected, IconCheck, } from "@tabler/icons-react";
-import React, { useState, useRef, useCallback, useEffect } from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconPlus, IconUpload, IconArrowLeft, IconPencil, IconBulb, IconBolt, IconTrash, IconEye, IconCode, IconClock, IconMessageChatbot, IconExternalLink, IconHelp, IconPlugConnected, } from "@tabler/icons-react";
+import React, { useState, useRef, useCallback, useEffect, useMemo, } from "react";
 import { serializeFrontmatter } from "../../resources/metadata.js";
 import { sendToAgentChat } from "../agent-chat.js";
 import { agentNativePath } from "../api-path.js";
 import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { PromptComposer } from "../composer/PromptComposer.js";
+import { useT } from "../i18n.js";
 import { useOrg } from "../org/hooks.js";
 import { cn } from "../utils.js";
 import { BuiltinCapabilityDetail } from "./BuiltinCapabilityDetail.js";
+import { isMcpIntegrationCatalogAvailable } from "./mcp-integration-catalog.js";
+import { McpIntegrationDialog } from "./McpIntegrationDialog.js";
 import { McpServerDetail } from "./McpServerDetail.js";
 import { ResourceEditor } from "./ResourceEditor.js";
 import { ResourceTree } from "./ResourceTree.js";
 import { parseMcpBuiltinVirtualId, useBuiltinCapabilities, } from "./use-builtin-capabilities.js";
-import { formatMcpServerError, getMcpUrlValidationError, useMcpServers, useCreateMcpServer, useDeleteMcpServer, testMcpServerUrl, parseMcpVirtualId, } from "./use-mcp-servers.js";
+import { useMcpServers, useCreateMcpServer, useDeleteMcpServer, parseMcpVirtualId, } from "./use-mcp-servers.js";
 import { useResourceTree, useResource, useCreateResource, useUpdateResource, useDeleteResource, useUploadResource, withMcpServersFolder, withAgentScratchFolder, } from "./use-resources.js";
 const WORKSPACE_DOCS_URL = "https://agent-native.com/docs/workspace";
 const LOCAL_WORKSPACE_RESOURCE_METADATA_SOURCE = "local-workspace-resource";
@@ -53,22 +56,17 @@ function buildAgentResourceContent({ name, description, model, tools, body, }) {
     return serializeFrontmatter(fields) + body.trim() + "\n";
 }
 function CreateMenu({ scope, onCreateFile, onCreateResource, onCreateMcpServer, canCreateOrgMcp, hasOrg, onCreated, showToast, }) {
+    const t = useT();
     const [open, setOpen] = useState(false);
+    const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
     const [view, setView] = useState("menu");
+    const showMcpIntegrations = useMemo(() => isMcpIntegrationCatalogAvailable(), []);
     const [value, setValue] = useState("");
     const [agentName, setAgentName] = useState("");
     const [agentDescription, setAgentDescription] = useState("");
     const [agentModel, setAgentModel] = useState("inherit");
     const [agentInstructions, setAgentInstructions] = useState(`# Role\n\nDefine how this agent should work.\n\n## Focus\n\n- What kinds of tasks it should handle\n- What tone or approach it should use\n- Important constraints or preferences\n`);
     const defaultMcpScope = scope === "shared" && canCreateOrgMcp ? "org" : "user";
-    const [mcpScope, setMcpScope] = useState(defaultMcpScope);
-    const [mcpName, setMcpName] = useState("");
-    const [mcpUrl, setMcpUrl] = useState("");
-    const [mcpDescription, setMcpDescription] = useState("");
-    const [mcpHeadersText, setMcpHeadersText] = useState("");
-    const [mcpBusy, setMcpBusy] = useState(false);
-    const [mcpError, setMcpError] = useState(null);
-    const [mcpTestResult, setMcpTestResult] = useState(null);
     const inputRef = useRef(null);
     const skillFileInputRef = useRef(null);
     const skillHoverTimerRef = useRef(null);
@@ -105,35 +103,19 @@ function CreateMenu({ scope, onCreateFile, onCreateResource, onCreateMcpServer,
             setAgentDescription("");
             setAgentModel("inherit");
             setAgentInstructions(`# Role\n\nDefine how this agent should work.\n\n## Focus\n\n- What kinds of tasks it should handle\n- What tone or approach it should use\n- Important constraints or preferences\n`);
-            setMcpScope(defaultMcpScope);
-            setMcpName("");
-            setMcpUrl("");
-            setMcpDescription("");
-            setMcpHeadersText("");
-            setMcpError(null);
-            setMcpTestResult(null);
-            setMcpBusy(false);
             setSkillUploadSlug("");
             setSkillUploadContent("");
             setSkillUploadFileName("");
             setSkillFlyoutOpen(false);
         }
-    }, [open, defaultMcpScope]);
+    }, [open]);
     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);
-    };
     const submitFile = () => {
         const trimmed = value.trim();
         if (trimmed) {
@@ -335,86 +317,6 @@ The result should be a reusable agent profile, not a one-off task response.`,
         setOpen(false);
         onCreated?.();
     };
-    const parseHeaderLines = (text) => {
-        const out = {};
-        for (const line of text.split(/\r?\n/)) {
-            const trimmed = line.trim();
-            if (!trimmed)
-                continue;
-            const idx = trimmed.indexOf(":");
-            if (idx <= 0)
-                continue;
-            const key = trimmed.slice(0, idx).trim();
-            const value = trimmed.slice(idx + 1).trim();
-            if (!key || !value)
-                continue;
-            out[key] = value;
-        }
-        return Object.keys(out).length > 0 ? out : undefined;
-    };
-    const submitMcpServer = async () => {
-        const name = mcpName.trim();
-        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 {
-            await onCreateMcpServer({
-                scope: mcpScope,
-                name,
-                url,
-                headers: parseHeaderLines(mcpHeadersText),
-                description: mcpDescription.trim() || undefined,
-            });
-            setOpen(false);
-            onCreated?.();
-        }
-        catch (err) {
-            setMcpError(formatMcpServerError(err));
-        }
-        finally {
-            setMcpBusy(false);
-        }
-    };
-    const runMcpTest = async () => {
-        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);
-        try {
-            const res = await testMcpServerUrl(url, parseHeaderLines(mcpHeadersText));
-            if (res.ok) {
-                setMcpTestResult({
-                    ok: true,
-                    message: `${res.toolCount ?? 0} tool${res.toolCount === 1 ? "" : "s"} available`,
-                });
-            }
-            else {
-                setMcpTestResult({ ok: false, message: res.error ?? "Failed" });
-            }
-        }
-        catch (err) {
-            setMcpTestResult({ ok: false, message: formatMcpServerError(err) });
-        }
-        finally {
-            setMcpBusy(false);
-        }
-    };
     const menuItems = [
         {
             icon: _jsx(IconPlus, { className: "h-3.5 w-3.5" }),
@@ -459,88 +361,70 @@ The result should be a reusable agent profile, not a one-off task response.`,
                 onCreated?.();
             },
         },
-        {
-            icon: _jsx(IconPlugConnected, { className: "h-3.5 w-3.5" }),
-            label: "Connect MCP Server",
-            desc: "Expose external tools to the agent",
-            action: () => setView("mcp-server"),
-        },
+        ...(showMcpIntegrations
+            ? [
+                {
+                    icon: _jsx(IconPlugConnected, { className: "h-3.5 w-3.5" }),
+                    label: t("mcpIntegrations.menuLabel"),
+                    desc: t("mcpIntegrations.menuDescription"),
+                    action: () => {
+                        setOpen(false);
+                        setMcpDialogOpen(true);
+                    },
+                },
+            ]
+            : []),
     ];
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx("input", { ref: skillFileInputRef, type: "file", accept: ".md,text/markdown", multiple: true, className: "hidden", onChange: (e) => {
-                    handleUploadSkillFiles(e.target.files);
-                    e.target.value = "";
-                } }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: cn("flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50", open && "bg-accent/50 text-foreground"), children: _jsx(IconPlus, { className: "h-3.5 w-3.5" }) }) }) }), _jsx(TooltipContent, { children: "Create new..." })] }), _jsxs(PopoverContent, { align: "end", sideOffset: 6, collisionPadding: 8, className: cn("z-[260] p-0 text-[13px] leading-normal", view === "menu" || view === "file"
-                    ? "w-[260px]"
-                    : "max-h-[70vh] w-[calc(100vw-24px)] max-w-[380px] overflow-y-auto"), children: [view === "menu" && (_jsx("div", { className: "py-1", children: menuItems.map((item) => {
-                            const isSkill = item.label === "Create Skill";
-                            return (_jsxs("div", { className: "relative", onMouseEnter: (e) => {
-                                    if (isSkill) {
-                                        openSkillFlyout(e.currentTarget);
-                                        return;
-                                    }
-                                    if (!item.hoverAction)
-                                        return;
-                                    if (skillHoverTimerRef.current)
-                                        window.clearTimeout(skillHoverTimerRef.current);
-                                    skillHoverTimerRef.current = window.setTimeout(() => {
-                                        item.hoverAction?.();
-                                    }, 180);
-                                }, onMouseLeave: () => {
-                                    if (isSkill) {
-                                        scheduleSkillFlyoutClose();
-                                        return;
-                                    }
-                                    if (skillHoverTimerRef.current) {
-                                        window.clearTimeout(skillHoverTimerRef.current);
-                                        skillHoverTimerRef.current = null;
-                                    }
-                                }, children: [_jsxs("button", { type: "button", onClick: item.action, className: cn("flex w-full items-center gap-2.5 px-3 py-2 text-left hover:bg-accent/50", isSkill && skillFlyoutOpen && "bg-accent/50"), children: [_jsx("span", { className: "text-muted-foreground", children: item.icon }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-[12px] font-medium text-foreground", children: item.label }), _jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground/60", children: item.desc })] }), isSkill && (_jsx("span", { className: "ml-auto text-muted-foreground/60", children: "\u203A" }))] }), isSkill && skillFlyoutOpen && (_jsxs("div", { role: "menu", onMouseEnter: () => openSkillFlyout(), onMouseLeave: scheduleSkillFlyoutClose, className: cn("absolute top-0 z-20 w-[240px] rounded-lg border border-border bg-popover py-1 shadow-md", skillFlyoutSide === "right"
-                                            ? "left-full ml-1"
-                                            : "right-full mr-1"), children: [_jsxs("button", { type: "button", onClick: () => {
-                                                    setSkillFlyoutOpen(false);
-                                                    setView("skill");
-                                                }, className: "flex w-full items-center gap-2.5 px-3 py-2 text-left hover:bg-accent/50", children: [_jsx("span", { className: "text-muted-foreground", children: _jsx(IconBulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[12px] font-medium text-foreground", children: "Create new skill" }), _jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground/60", children: "Describe a skill and let the agent draft it" })] })] }), _jsxs("button", { type: "button", onClick: () => {
-                                                    setSkillFlyoutOpen(false);
-                                                    skillFileInputRef.current?.click();
-                                                }, className: "flex w-full items-center gap-2.5 px-3 py-2 text-left hover:bg-accent/50", children: [_jsx("span", { className: "text-muted-foreground", children: _jsx(IconUpload, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[12px] font-medium text-foreground", children: "Upload skill file" }), _jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground/60", children: "Import an existing SKILL.md file" })] })] })] }))] }, item.label));
-                        }) })), view === "file" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-1.5 block text-[11px] font-medium text-muted-foreground", children: "File path" }), _jsx("input", { ref: inputRef, value: value, onChange: (e) => setValue(e.target.value), onKeyDown: (e) => {
-                                    if (e.key === "Enter")
-                                        submitFile();
-                                    if (e.key === "Escape") {
-                                        e.stopPropagation();
-                                        setView("menu");
-                                    }
-                                }, 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: "notes/ideas.md" }), _jsx("div", { className: "mt-2.5 flex justify-end", children: _jsx("button", { onClick: submitFile, disabled: !value.trim(), 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: "Create" }) })] })), view === "skill" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-1 block text-[11px] font-semibold text-foreground", children: "Create Skill" }), _jsx("p", { className: "mb-2 text-[10px] text-muted-foreground/60 leading-relaxed", children: "Describe what kind of skill you want and the agent will create it." }), _jsx(PromptComposer, { autoFocus: true, placeholder: "e.g. A skill that reviews PRs for security issues and OWASP top 10 vulnerabilities", draftScope: "resources:create-skill", onSubmit: (text) => submitSkill(text) })] })), view === "skill-upload" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-1 block text-[11px] font-semibold text-foreground", children: "Upload skill file" }), _jsxs("p", { className: "mb-2 text-[10px] text-muted-foreground/60 leading-relaxed", children: ["Review the content from", " ", _jsx("span", { className: "font-mono", children: skillUploadFileName || "the selected file" }), " ", "before saving."] }), _jsx("label", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: "Skill name" }), _jsx("input", { value: skillUploadSlug, onChange: (e) => setSkillUploadSlug(e.target.value), className: "mb-2 w-full 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", placeholder: "my-skill" }), _jsxs("p", { className: "mb-2 text-[10px] text-muted-foreground/60", children: ["Will be saved at", " ", _jsxs("span", { className: "font-mono", children: ["skills/", slugifyName(skillUploadSlug || "uploaded-skill"), "/SKILL.md"] })] }), _jsx("label", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: "Content" }), _jsx("textarea", { value: skillUploadContent, onChange: (e) => setSkillUploadContent(e.target.value), rows: 14, className: "w-full rounded-md border border-border bg-background px-2.5 py-1.5 font-mono text-[11px] leading-relaxed text-foreground outline-none focus:ring-1 focus:ring-accent" }), _jsxs("div", { className: "mt-2.5 flex justify-end gap-2", children: [_jsx("button", { onClick: () => setView("menu"), className: "rounded-md px-3 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-accent/40", children: "Back" }), _jsx("button", { onClick: saveUploadedSkill, disabled: !skillUploadContent.trim() || !skillUploadSlug.trim(), 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: "Save" })] })] })), view === "job" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-1 block text-[11px] font-semibold text-foreground", children: "Schedule Task" }), _jsx("p", { className: "mb-2 text-[10px] text-muted-foreground/60 leading-relaxed", children: "Describe what should happen and when." }), _jsx(PromptComposer, { autoFocus: true, placeholder: "e.g. Every weekday at 9am, check for overdue scorecards and send a Slack update", draftScope: "resources:create-job", onSubmit: (text) => submitJob(text) })] })), view === "agent-mode" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-1 block text-[11px] font-semibold text-foreground", children: "Create Agent" }), _jsx("p", { className: "mb-2 text-[10px] leading-relaxed text-muted-foreground/60", children: "Build a reusable sub-agent profile for this workspace." }), _jsxs("div", { className: "space-y-2", children: [_jsxs("button", { onClick: () => setView("agent-prompt"), className: "flex w-full items-start gap-2 rounded-md border border-border px-3 py-2 text-left hover:bg-accent/40", children: [_jsx(IconPencil, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsxs("div", { children: [_jsx("div", { className: "text-[12px] font-medium text-foreground", children: "Describe It" }), _jsx("div", { className: "text-[10px] text-muted-foreground/60", children: "Let the agent draft the profile from a prompt." })] })] }), _jsxs("button", { onClick: () => setView("agent-form"), className: "flex w-full items-start gap-2 rounded-md border border-border px-3 py-2 text-left hover:bg-accent/40", children: [_jsx(IconMessageChatbot, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsxs("div", { children: [_jsx("div", { className: "text-[12px] font-medium text-foreground", children: "Fill Form" }), _jsx("div", { className: "text-[10px] text-muted-foreground/60", children: "Set the fields manually and start with a markdown template." })] })] })] })] })), view === "agent-prompt" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-1 block text-[11px] font-semibold text-foreground", children: "Create Agent From Prompt" }), _jsxs("p", { className: "mb-2 text-[10px] text-muted-foreground/60 leading-relaxed", children: ["Describe the agent you want. It will be saved under", " ", _jsx("code", { children: "agents/" }), "."] }), _jsx(PromptComposer, { autoFocus: true, placeholder: "e.g. A design agent that critiques layouts, suggests UI direction, and prefers concise product reasoning", draftScope: "resources:create-agent", onSubmit: (text) => submitAgentPrompt(text) })] })), view === "agent-form" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-2 block text-[11px] font-semibold text-foreground", children: "Create Agent Manually" }), _jsxs("div", { className: "space-y-2", children: [_jsx("input", { value: agentName, onChange: (e) => setAgentName(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: "Agent name" }), _jsx("input", { value: agentDescription, onChange: (e) => setAgentDescription(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: "Short description" }), _jsx("label", { className: "block text-[11px] font-medium text-muted-foreground", children: "Model" }), _jsx("select", { value: agentModel, onChange: (e) => setAgentModel(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 focus:ring-1 focus:ring-accent", children: AGENT_MODEL_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), _jsx("label", { className: "block text-[11px] font-medium text-muted-foreground", children: "Instructions" }), _jsx("textarea", { value: agentInstructions, onChange: (e) => setAgentInstructions(e.target.value), rows: 8, className: "w-full resize-y 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", style: {
-                                            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
-                                            lineHeight: 1.5,
-                                        } })] }), _jsx("div", { className: "mt-2.5 flex justify-end", children: _jsx("button", { onClick: submitAgentManual, disabled: !agentName.trim() ||
-                                        !agentDescription.trim() ||
-                                        !agentInstructions.trim(), 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: "Create" }) })] })), view === "mcp-server" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-1 block text-[11px] font-semibold text-foreground", children: "Connect MCP Server" }), _jsxs("p", { className: "mb-2 text-[10px] text-muted-foreground/60 leading-relaxed", children: ["Point at any Streamable HTTP MCP server (Zapier, Cloudflare, internal tools). Its tools become available to the agent. Use Personal for private or staging servers; use Organization only for vetted servers the whole org should share.", " ", _jsxs("a", { href: "https://agent-native.com/docs/mcp-clients#remote-via-ui", target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-0.5 text-muted-foreground/80 underline hover:text-foreground", children: ["Learn more", _jsx(IconExternalLink, { className: "inline h-2.5 w-2.5" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex gap-1 rounded-md border border-border p-0.5", children: [_jsx("button", { type: "button", onClick: () => setMcpScope("user"), className: cn("flex-1 rounded px-2 py-1 text-[11px] font-medium", mcpScope === "user"
-                                                    ? "bg-accent text-foreground"
-                                                    : "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-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);
-                                            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-staging)" }), _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-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: "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") })] })] }))] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx("input", { ref: skillFileInputRef, type: "file", accept: ".md,text/markdown", multiple: true, className: "hidden", onChange: (e) => {
+                            handleUploadSkillFiles(e.target.files);
+                            e.target.value = "";
+                        } }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: cn("flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50", open && "bg-accent/50 text-foreground"), children: _jsx(IconPlus, { className: "h-3.5 w-3.5" }) }) }) }), _jsx(TooltipContent, { children: "Create new..." })] }), _jsxs(PopoverContent, { align: "end", sideOffset: 6, collisionPadding: 8, className: cn("z-[260] p-0 text-[13px] leading-normal", view === "menu" || view === "file"
+                            ? "w-[260px]"
+                            : "max-h-[70vh] w-[calc(100vw-24px)] max-w-[380px] overflow-y-auto"), children: [view === "menu" && (_jsx("div", { className: "py-1", children: menuItems.map((item) => {
+                                    const isSkill = item.label === "Create Skill";
+                                    return (_jsxs("div", { className: "relative", onMouseEnter: (e) => {
+                                            if (isSkill) {
+                                                openSkillFlyout(e.currentTarget);
+                                                return;
+                                            }
+                                            if (!item.hoverAction)
+                                                return;
+                                            if (skillHoverTimerRef.current)
+                                                window.clearTimeout(skillHoverTimerRef.current);
+                                            skillHoverTimerRef.current = window.setTimeout(() => {
+                                                item.hoverAction?.();
+                                            }, 180);
+                                        }, onMouseLeave: () => {
+                                            if (isSkill) {
+                                                scheduleSkillFlyoutClose();
+                                                return;
+                                            }
+                                            if (skillHoverTimerRef.current) {
+                                                window.clearTimeout(skillHoverTimerRef.current);
+                                                skillHoverTimerRef.current = null;
+                                            }
+                                        }, children: [_jsxs("button", { type: "button", onClick: item.action, className: cn("flex w-full items-center gap-2.5 px-3 py-2 text-left hover:bg-accent/50", isSkill && skillFlyoutOpen && "bg-accent/50"), children: [_jsx("span", { className: "text-muted-foreground", children: item.icon }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-[12px] font-medium text-foreground", children: item.label }), _jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground/60", children: item.desc })] }), isSkill && (_jsx("span", { className: "ml-auto text-muted-foreground/60", children: "\u203A" }))] }), isSkill && skillFlyoutOpen && (_jsxs("div", { role: "menu", onMouseEnter: () => openSkillFlyout(), onMouseLeave: scheduleSkillFlyoutClose, className: cn("absolute top-0 z-20 w-[240px] rounded-lg border border-border bg-popover py-1 shadow-md", skillFlyoutSide === "right"
+                                                    ? "left-full ml-1"
+                                                    : "right-full mr-1"), children: [_jsxs("button", { type: "button", onClick: () => {
+                                                            setSkillFlyoutOpen(false);
+                                                            setView("skill");
+                                                        }, className: "flex w-full items-center gap-2.5 px-3 py-2 text-left hover:bg-accent/50", children: [_jsx("span", { className: "text-muted-foreground", children: _jsx(IconBulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[12px] font-medium text-foreground", children: "Create new skill" }), _jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground/60", children: "Describe a skill and let the agent draft it" })] })] }), _jsxs("button", { type: "button", onClick: () => {
+                                                            setSkillFlyoutOpen(false);
+                                                            skillFileInputRef.current?.click();
+                                                        }, className: "flex w-full items-center gap-2.5 px-3 py-2 text-left hover:bg-accent/50", children: [_jsx("span", { className: "text-muted-foreground", children: _jsx(IconUpload, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[12px] font-medium text-foreground", children: "Upload skill file" }), _jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground/60", children: "Import an existing SKILL.md file" })] })] })] }))] }, item.label));
+                                }) })), view === "file" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-1.5 block text-[11px] font-medium text-muted-foreground", children: "File path" }), _jsx("input", { ref: inputRef, value: value, onChange: (e) => setValue(e.target.value), onKeyDown: (e) => {
+                                            if (e.key === "Enter")
+                                                submitFile();
+                                            if (e.key === "Escape") {
+                                                e.stopPropagation();
+                                                setView("menu");
+                                            }
+                                        }, 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: "notes/ideas.md" }), _jsx("div", { className: "mt-2.5 flex justify-end", children: _jsx("button", { onClick: submitFile, disabled: !value.trim(), 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: "Create" }) })] })), view === "skill" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-1 block text-[11px] font-semibold text-foreground", children: "Create Skill" }), _jsx("p", { className: "mb-2 text-[10px] text-muted-foreground/60 leading-relaxed", children: "Describe what kind of skill you want and the agent will create it." }), _jsx(PromptComposer, { autoFocus: true, placeholder: "e.g. A skill that reviews PRs for security issues and OWASP top 10 vulnerabilities", draftScope: "resources:create-skill", onSubmit: (text) => submitSkill(text) })] })), view === "skill-upload" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-1 block text-[11px] font-semibold text-foreground", children: "Upload skill file" }), _jsxs("p", { className: "mb-2 text-[10px] text-muted-foreground/60 leading-relaxed", children: ["Review the content from", " ", _jsx("span", { className: "font-mono", children: skillUploadFileName || "the selected file" }), " ", "before saving."] }), _jsx("label", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: "Skill name" }), _jsx("input", { value: skillUploadSlug, onChange: (e) => setSkillUploadSlug(e.target.value), className: "mb-2 w-full 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", placeholder: "my-skill" }), _jsxs("p", { className: "mb-2 text-[10px] text-muted-foreground/60", children: ["Will be saved at", " ", _jsxs("span", { className: "font-mono", children: ["skills/", slugifyName(skillUploadSlug || "uploaded-skill"), "/SKILL.md"] })] }), _jsx("label", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: "Content" }), _jsx("textarea", { value: skillUploadContent, onChange: (e) => setSkillUploadContent(e.target.value), rows: 14, className: "w-full rounded-md border border-border bg-background px-2.5 py-1.5 font-mono text-[11px] leading-relaxed text-foreground outline-none focus:ring-1 focus:ring-accent" }), _jsxs("div", { className: "mt-2.5 flex justify-end gap-2", children: [_jsx("button", { onClick: () => setView("menu"), className: "rounded-md px-3 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-accent/40", children: "Back" }), _jsx("button", { onClick: saveUploadedSkill, disabled: !skillUploadContent.trim() || !skillUploadSlug.trim(), 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: "Save" })] })] })), view === "job" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-1 block text-[11px] font-semibold text-foreground", children: "Schedule Task" }), _jsx("p", { className: "mb-2 text-[10px] text-muted-foreground/60 leading-relaxed", children: "Describe what should happen and when." }), _jsx(PromptComposer, { autoFocus: true, placeholder: "e.g. Every weekday at 9am, check for overdue scorecards and send a Slack update", draftScope: "resources:create-job", onSubmit: (text) => submitJob(text) })] })), view === "agent-mode" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-1 block text-[11px] font-semibold text-foreground", children: "Create Agent" }), _jsx("p", { className: "mb-2 text-[10px] leading-relaxed text-muted-foreground/60", children: "Build a reusable sub-agent profile for this workspace." }), _jsxs("div", { className: "space-y-2", children: [_jsxs("button", { onClick: () => setView("agent-prompt"), className: "flex w-full items-start gap-2 rounded-md border border-border px-3 py-2 text-left hover:bg-accent/40", children: [_jsx(IconPencil, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsxs("div", { children: [_jsx("div", { className: "text-[12px] font-medium text-foreground", children: "Describe It" }), _jsx("div", { className: "text-[10px] text-muted-foreground/60", children: "Let the agent draft the profile from a prompt." })] })] }), _jsxs("button", { onClick: () => setView("agent-form"), className: "flex w-full items-start gap-2 rounded-md border border-border px-3 py-2 text-left hover:bg-accent/40", children: [_jsx(IconMessageChatbot, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsxs("div", { children: [_jsx("div", { className: "text-[12px] font-medium text-foreground", children: "Fill Form" }), _jsx("div", { className: "text-[10px] text-muted-foreground/60", children: "Set the fields manually and start with a markdown template." })] })] })] })] })), view === "agent-prompt" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-1 block text-[11px] font-semibold text-foreground", children: "Create Agent From Prompt" }), _jsxs("p", { className: "mb-2 text-[10px] text-muted-foreground/60 leading-relaxed", children: ["Describe the agent you want. It will be saved under", " ", _jsx("code", { children: "agents/" }), "."] }), _jsx(PromptComposer, { autoFocus: true, placeholder: "e.g. A design agent that critiques layouts, suggests UI direction, and prefers concise product reasoning", draftScope: "resources:create-agent", onSubmit: (text) => submitAgentPrompt(text) })] })), view === "agent-form" && (_jsxs("div", { className: "p-3", children: [_jsx("label", { className: "mb-2 block text-[11px] font-semibold text-foreground", children: "Create Agent Manually" }), _jsxs("div", { className: "space-y-2", children: [_jsx("input", { value: agentName, onChange: (e) => setAgentName(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: "Agent name" }), _jsx("input", { value: agentDescription, onChange: (e) => setAgentDescription(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: "Short description" }), _jsx("label", { className: "block text-[11px] font-medium text-muted-foreground", children: "Model" }), _jsx("select", { value: agentModel, onChange: (e) => setAgentModel(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 focus:ring-1 focus:ring-accent", children: AGENT_MODEL_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), _jsx("label", { className: "block text-[11px] font-medium text-muted-foreground", children: "Instructions" }), _jsx("textarea", { value: agentInstructions, onChange: (e) => setAgentInstructions(e.target.value), rows: 8, className: "w-full resize-y 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", style: {
+                                                    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+                                                    lineHeight: 1.5,
+                                                } })] }), _jsx("div", { className: "mt-2.5 flex justify-end", children: _jsx("button", { onClick: submitAgentManual, disabled: !agentName.trim() ||
+                                                !agentDescription.trim() ||
+                                                !agentInstructions.trim(), 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: "Create" }) })] }))] })] }), _jsx(McpIntegrationDialog, { open: mcpDialogOpen, onOpenChange: setMcpDialogOpen, defaultScope: defaultMcpScope, canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: onCreateMcpServer, onCreated: onCreated })] }));
 }
 // ─── PathBreadcrumb ─────────────────────────────────────────────────────────
 function PathBreadcrumb({ path }) {