@agent-native/core 0.114.5 → 0.114.7

package/corpus/core/src/client/resources/ResourcesPanel.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   IconPlus,
   IconUpload,
@@ -82,6 +83,42 @@ import {
 const WORKSPACE_DOCS_URL = "https://agent-native.com/docs/workspace";
 const LOCAL_WORKSPACE_RESOURCE_METADATA_SOURCE = "local-workspace-resource";
 
+const EMPTY_RESOURCE_ACTION_LABELS: Record<ResourceView, string> = {
+  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: Partial<
+  Record<ResourceView, { path: string; content: string; mimeType?: string }>
+> = {
+  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",
+  },
+};
+
 export type ResourceView =
   | "files"
   | "instructions"
@@ -228,6 +265,9 @@ function CreateMenu({
   onCreated,
   showToast,
   mcpIntegrations,
+  triggerVariant = "icon",
+  triggerLabel,
+  initialView = "menu",
 }: {
   scope: ResourceScope;
   resourceFilter?: ResourceView;
@@ -257,6 +297,9 @@ function CreateMenu({
     message: string,
     opts?: { resourceId?: string; durationMs?: number },
   ) => void;
+  triggerVariant?: "icon" | "outline";
+  triggerLabel?: string;
+  initialView?: CreateMenuView;
 }) {
   const t = useT();
   const [open, setOpen] = useState(false);
@@ -313,7 +356,7 @@ function CreateMenu({
 
   useEffect(() => {
     if (open) {
-      setView("menu");
+      setView(initialView);
       setValue("");
       setAgentName("");
       setAgentDescription("");
@@ -326,7 +369,7 @@ function CreateMenu({
       setSkillUploadFileName("");
       setSkillFlyoutOpen(false);
     }
-  }, [open]);
+  }, [initialView, open]);
 
   useEffect(() => {
     if (view !== "menu" && view !== "agent-form") {
@@ -642,22 +685,36 @@ The result should be a reusable agent profile, not a one-off task response.`,
             e.target.value = "";
           }}
         />
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <PopoverTrigger asChild>
-              <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",
-                )}
-              >
-                <IconPlus className="h-3.5 w-3.5" />
-              </button>
-            </PopoverTrigger>
-          </TooltipTrigger>
-          <TooltipContent>Create new...</TooltipContent>
-        </Tooltip>
+        {triggerVariant === "outline" ? (
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-7 gap-1.5 px-2.5 text-xs"
+            >
+              <IconPlus className="size-3.5" />
+              {triggerLabel ?? "Add resource"}
+            </Button>
+          </PopoverTrigger>
+        ) : (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <PopoverTrigger asChild>
+                <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",
+                  )}
+                >
+                  <IconPlus className="h-3.5 w-3.5" />
+                </button>
+              </PopoverTrigger>
+            </TooltipTrigger>
+            <TooltipContent>Create new...</TooltipContent>
+          </Tooltip>
+        )}
         <PopoverContent
           align="end"
           sideOffset={6}
@@ -1522,6 +1579,70 @@ export function ResourcesPanel({
     );
   };
 
+  const renderEmptyStateAction = (targetScope: ResourceScope) => {
+    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 (
+        <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 (
+      <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,
+          )
+        }
+      >
+        <IconPlus className="size-3.5" />
+        {label}
+      </Button>
+    );
+  };
+
   return (
     <div
       className={cn(
@@ -1881,6 +2002,7 @@ export function ResourcesPanel({
                 title="Personal"
                 titleTooltip="Files visible only to you"
                 sectionAction={renderScopeCreateMenu("personal")}
+                emptyStateAction={renderEmptyStateAction("personal")}
               />
             )}
             {showSharedTree && (
@@ -1915,6 +2037,7 @@ export function ResourcesPanel({
                 readOnly={!canEditOrg}
                 headingHint={!canEditOrg ? "Read only" : undefined}
                 sectionAction={renderScopeCreateMenu("shared")}
+                emptyStateAction={renderEmptyStateAction("shared")}
               />
             )}
           </div>