@agent-native/core 0.114.4 → 0.114.6

package/dist/client/resources/ResourcesPanel.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@agent-native/toolkit/ui/button";
 import { IconPlus, IconUpload, IconArrowLeft, IconPencil, IconBulb, IconBolt, IconTrash, IconEye, IconCode, IconClock, IconHierarchy2, IconExternalLink, IconHelp, IconPlugConnected, } from "@tabler/icons-react";
 import React, { useState, useRef, useCallback, useEffect, useMemo, } from "react";
 import { CLAUDE_SONNET_MODEL_ID, CLAUDE_SONNET_MODEL_LABEL, } from "../../agent/model-config.js";
@@ -23,6 +24,37 @@ import { useMcpServers, useCreateMcpServer, useDeleteMcpServer, parseMcpVirtualI
 import { useResourceTree, useResource, useCreateResource, useUpdateResource, useDeleteResource, 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";
+const EMPTY_RESOURCE_ACTION_LABELS = {
+    files: "Add file",
+    instructions: "Add instructions",
+    agents: "Add agent",
+    memory: "Add memory",
+    skills: "Add skill",
+    learnings: "Add learning",
+    "remote-agents": "Add remote agent",
+};
+const EMPTY_RESOURCE_SEEDS = {
+    instructions: {
+        path: "AGENTS.md",
+        content: "# Agent Instructions\n\n",
+        mimeType: "text/markdown",
+    },
+    memory: {
+        path: "memory/MEMORY.md",
+        content: "# Memory\n\n",
+        mimeType: "text/markdown",
+    },
+    learnings: {
+        path: "LEARNINGS.md",
+        content: "# Learnings\n\n",
+        mimeType: "text/markdown",
+    },
+    "remote-agents": {
+        path: "remote-agents/new-agent.json",
+        content: '{\n  "id": "new-agent",\n  "name": "New agent",\n  "description": "",\n  "url": "",\n  "color": "#6B7280"\n}\n',
+        mimeType: "application/json",
+    },
+};
 const SPECIAL_RESOURCE_ROOTS = new Set([
     "agents",
     "agent-scratch",
@@ -105,7 +137,7 @@ function buildAgentResourceContent({ name, description, model, tools, body, }) {
     ];
     return serializeFrontmatter(fields) + body.trim() + "\n";
 }
-function CreateMenu({ scope, resourceFilter, onCreateFile, onCreateResource, onCreateMcpServer, canCreateOrgMcp, hasOrg, onCreated, showToast, mcpIntegrations, }) {
+function CreateMenu({ scope, resourceFilter, onCreateFile, onCreateResource, onCreateMcpServer, canCreateOrgMcp, hasOrg, onCreated, showToast, mcpIntegrations, triggerVariant = "icon", triggerLabel, initialView = "menu", }) {
     const t = useT();
     const [open, setOpen] = useState(false);
     const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
@@ -149,7 +181,7 @@ function CreateMenu({ scope, resourceFilter, onCreateFile, onCreateResource, onC
     const [skillUploadFileName, setSkillUploadFileName] = useState("");
     useEffect(() => {
         if (open) {
-            setView("menu");
+            setView(initialView);
             setValue("");
             setAgentName("");
             setAgentDescription("");
@@ -160,7 +192,7 @@ function CreateMenu({ scope, resourceFilter, onCreateFile, onCreateResource, onC
             setSkillUploadFileName("");
             setSkillFlyoutOpen(false);
         }
-    }, [open]);
+    }, [initialView, open]);
     useEffect(() => {
         if (view !== "menu" && view !== "agent-form") {
             setValue("");
@@ -439,7 +471,7 @@ The result should be a reusable agent profile, not a one-off task response.`,
     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"
+                        } }), triggerVariant === "outline" ? (_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-7 gap-1.5 px-2.5 text-xs", children: [_jsx(IconPlus, { className: "size-3.5" }), triggerLabel ?? "Add resource"] }) })) : (_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: visibleMenuItems.map((item) => {
                                     const isSkill = item.label === "Create Skill";
@@ -770,6 +802,23 @@ export function ResourcesPanel({ showMcpServers = true, scope: requestedScope, s
             return null;
         return (_jsx(CreateMenu, { scope: targetScope, resourceFilter: resourceFilter, onCreateFile: (name) => handleCreateFromToolbar(targetScope, name), onCreateResource: (path, content, mimeType, opts) => handleCreateResourceFromToolbar(targetScope, path, content, mimeType, opts), onCreateMcpServer: handleCreateMcpServer, canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrgForMcp, showToast: showToast, mcpIntegrations: mcpIntegrations }));
     };
+    const renderEmptyStateAction = (targetScope) => {
+        if (targetScope === "shared" && !canEditOrg)
+            return null;
+        const label = resourceFilter
+            ? EMPTY_RESOURCE_ACTION_LABELS[resourceFilter]
+            : "Add resource";
+        if (!resourceFilter ||
+            resourceFilter === "files" ||
+            resourceFilter === "agents" ||
+            resourceFilter === "skills") {
+            return (_jsx(CreateMenu, { scope: targetScope, resourceFilter: resourceFilter, onCreateFile: (name) => handleCreateFromToolbar(targetScope, name), onCreateResource: (path, content, mimeType, opts) => handleCreateResourceFromToolbar(targetScope, path, content, mimeType, opts), onCreateMcpServer: handleCreateMcpServer, canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrgForMcp, showToast: showToast, mcpIntegrations: mcpIntegrations, triggerVariant: "outline", triggerLabel: label, initialView: resourceFilter === "files" ? "file" : "menu" }));
+        }
+        const seed = EMPTY_RESOURCE_SEEDS[resourceFilter];
+        if (!seed)
+            return null;
+        return (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-7 gap-1.5 px-2.5 text-xs", disabled: createResource.isPending, onClick: () => handleCreateResourceFromToolbar(targetScope, seed.path, seed.content, seed.mimeType), children: [_jsx(IconPlus, { className: "size-3.5" }), label] }));
+    };
     return (_jsxs("div", { className: cn("relative flex h-full flex-col min-h-0", dragOver && "ring-2 ring-inset ring-accent"), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [isEditing ? (_jsxs("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-2 py-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { onClick: handleBack, "aria-label": "Back to workspace", className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconArrowLeft, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Back to workspace" })] }) }), selectedMcpServer ? (_jsx(PathBreadcrumb, { path: `mcp-servers/${selectedMcpServer.name}.json` })) : selectedBuiltinCapability ? (_jsx(PathBreadcrumb, { path: `mcp-servers/${selectedBuiltinCapability.capability.name}.json` })) : resourceQuery.data ? (_jsx(PathBreadcrumb, { path: resourceQuery.data.path })) : null] }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [!selectedMcpServer &&
                                 resourceQuery.data &&
                                 selectedResourceReadOnly && (_jsx("span", { "aria-live": "polite", className: "mr-1 w-16 text-right text-[11px] text-muted-foreground/60", children: "Read only" })), !selectedMcpServer &&
@@ -816,13 +865,13 @@ export function ResourcesPanel({ showMcpServers = true, scope: requestedScope, s
                                 ? deleteResource.variables
                                 : deleteMcpServer.isPending
                                     ? `mcp:${deleteMcpServer.variables.scope}:${deleteMcpServer.variables.id}`
-                                    : null, selectedId: selectedResourceId, onSelect: handleSelect, onCreateFile: (parentPath, name) => handleCreateFile(parentPath, name, "personal"), onCreateFolder: (parentPath, name) => handleCreateFolder(parentPath, name, "personal"), onDelete: handleDelete, onRename: handleRename, onDrop: (files) => handleUploadFiles(files, "personal"), title: "Personal", titleTooltip: "Files visible only to you", sectionAction: renderScopeCreateMenu("personal") })), showSharedTree && (_jsx(ResourceTree, { tree: displayedSharedTree, variant: resourceTreeVariant, isLoading: sharedTreeQuery.isLoading, deletingId: deleteResource.isPending
+                                    : null, selectedId: selectedResourceId, onSelect: handleSelect, onCreateFile: (parentPath, name) => handleCreateFile(parentPath, name, "personal"), onCreateFolder: (parentPath, name) => handleCreateFolder(parentPath, name, "personal"), onDelete: handleDelete, onRename: handleRename, onDrop: (files) => handleUploadFiles(files, "personal"), title: "Personal", titleTooltip: "Files visible only to you", sectionAction: renderScopeCreateMenu("personal"), emptyStateAction: renderEmptyStateAction("personal") })), showSharedTree && (_jsx(ResourceTree, { tree: displayedSharedTree, variant: resourceTreeVariant, isLoading: sharedTreeQuery.isLoading, deletingId: deleteResource.isPending
                                 ? deleteResource.variables
                                 : deleteMcpServer.isPending
                                     ? `mcp:${deleteMcpServer.variables.scope}:${deleteMcpServer.variables.id}`
                                     : null, selectedId: selectedResourceId, onSelect: handleSelect, onCreateFile: (parentPath, name) => handleCreateFile(parentPath, name, "shared"), onCreateFolder: (parentPath, name) => handleCreateFolder(parentPath, name, "shared"), onDelete: handleDelete, onRename: handleRename, onDrop: (files) => handleUploadFiles(files, "shared"), title: "Organization", titleTooltip: canEditOrg
                                 ? "Files visible to everyone in your organization"
-                                : "Files visible to everyone in your organization. Read-only — only admins can edit.", readOnly: !canEditOrg, headingHint: !canEditOrg ? "Read only" : undefined, sectionAction: renderScopeCreateMenu("shared") }))] })) }), toast && (_jsx("div", { className: "pointer-events-none absolute bottom-3 left-1/2 z-[300] -translate-x-1/2", children: _jsxs("div", { role: "status", className: cn("pointer-events-auto flex max-w-[320px] items-center gap-3 rounded-md border px-3 py-2 text-[12px] shadow-md", toast.kind === "ok"
+                                : "Files visible to everyone in your organization. Read-only — only admins can edit.", readOnly: !canEditOrg, headingHint: !canEditOrg ? "Read only" : undefined, sectionAction: renderScopeCreateMenu("shared"), emptyStateAction: renderEmptyStateAction("shared") }))] })) }), toast && (_jsx("div", { className: "pointer-events-none absolute bottom-3 left-1/2 z-[300] -translate-x-1/2", children: _jsxs("div", { role: "status", className: cn("pointer-events-auto flex max-w-[320px] items-center gap-3 rounded-md border px-3 py-2 text-[12px] shadow-md", toast.kind === "ok"
                         ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300"
                         : "border-red-500/40 bg-red-500/10 text-red-600 dark:text-red-300"), children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: toast.message }), toast.kind === "ok" && toast.resourceId && (_jsx("button", { type: "button", onClick: () => {
                                 setSelectedResourceId(toast.resourceId);