@agent-native/core 0.103.1 → 0.104.0

package/dist/client/resources/ResourcesPanel.js

@@ -1,5 +1,5 @@
 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 { 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";
 import { serializeFrontmatter } from "../../resources/metadata.js";
@@ -22,6 +22,54 @@ import { useMcpServers, useCreateMcpServer, useDeleteMcpServer, parseMcpVirtualI
 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";
+const SPECIAL_RESOURCE_ROOTS = new Set([
+    "agents",
+    "agent-scratch",
+    "jobs",
+    "memory",
+    "remote-agents",
+    "skills",
+]);
+const SPECIAL_RESOURCE_FILES = new Set(["agents.md", "learnings.md"]);
+function normalizedResourcePath(path) {
+    return path.replace(/^\/+/, "").toLowerCase();
+}
+function resourceMatchesView(node, view) {
+    const path = normalizedResourcePath(node.path);
+    switch (view) {
+        case "files":
+            return (!SPECIAL_RESOURCE_ROOTS.has(path.split("/", 1)[0]) &&
+                !SPECIAL_RESOURCE_FILES.has(path.split("/").pop() ?? ""));
+        case "instructions":
+            return path.split("/").pop() === "agents.md";
+        case "agents":
+            return node.kind === "agent";
+        case "memory":
+            return path === "memory" || path.startsWith("memory/");
+        case "skills":
+            return node.kind === "skill";
+        case "learnings":
+            return path.split("/").pop() === "learnings.md";
+        case "remote-agents":
+            return node.kind === "remote-agent";
+    }
+}
+export function filterResourceTree(tree, view) {
+    if (!view)
+        return tree;
+    return tree.flatMap((node) => {
+        if (node.type === "folder") {
+            if (view === "files" &&
+                (SPECIAL_RESOURCE_ROOTS.has(normalizedResourcePath(node.path).split("/", 1)[0]) ||
+                    SPECIAL_RESOURCE_FILES.has(normalizedResourcePath(node.path).split("/").pop() ?? ""))) {
+                return [];
+            }
+            const children = filterResourceTree(node.children ?? [], view);
+            return children.length > 0 ? [{ ...node, children }] : [];
+        }
+        return resourceMatchesView(node, view) ? [node] : [];
+    });
+}
 const AGENT_MODEL_OPTIONS = [
     { value: "inherit", label: "Default model" },
     { value: "claude-fable-5", label: "Claude Fable 5" },
@@ -56,7 +104,7 @@ function buildAgentResourceContent({ name, description, model, tools, body, }) {
     ];
     return serializeFrontmatter(fields) + body.trim() + "\n";
 }
-function CreateMenu({ scope, onCreateFile, onCreateResource, onCreateMcpServer, canCreateOrgMcp, hasOrg, onCreated, showToast, }) {
+function CreateMenu({ scope, resourceFilter, onCreateFile, onCreateResource, onCreateMcpServer, canCreateOrgMcp, hasOrg, onCreated, showToast, }) {
     const t = useT();
     const [open, setOpen] = useState(false);
     const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
@@ -339,7 +387,7 @@ The result should be a reusable agent profile, not a one-off task response.`,
             action: () => setView("job"),
         },
         {
-            icon: _jsx(IconMessageChatbot, { className: "h-3.5 w-3.5" }),
+            icon: _jsx(IconHierarchy2, { className: "h-3.5 w-3.5" }),
             label: "Create Custom Agent",
             desc: "Add a reusable sub-agent profile",
             action: () => setView("agent-mode"),
@@ -376,12 +424,21 @@ The result should be a reusable agent profile, not a one-off task response.`,
             ]
             : []),
     ];
+    const visibleMenuItems = menuItems.filter((item) => {
+        if (!resourceFilter || resourceFilter === "files")
+            return true;
+        if (resourceFilter === "agents")
+            return item.label === "Create Custom Agent";
+        if (resourceFilter === "skills")
+            return item.label === "Create Skill";
+        return false;
+    });
     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) => {
+                            : "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";
                                     return (_jsxs("div", { className: "relative", onMouseEnter: (e) => {
                                             if (isSkill) {
@@ -420,7 +477,7 @@ The result should be a reusable agent profile, not a one-off task response.`,
                                                 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: {
+                                        }, 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(IconHierarchy2, { 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() ||
@@ -465,7 +522,7 @@ export function resolveInitialResourceScope(requestedScope, canEditOrg) {
         return "personal";
     return canEditOrg ? "shared" : "personal";
 }
-export function ResourcesPanel({ showMcpServers = true, scope: requestedScope, } = {}) {
+export function ResourcesPanel({ showMcpServers = true, scope: requestedScope, showOnlyRequestedScope = false, resourceFilter, resourceTreeVariant = "tree", } = {}) {
     const { data: org } = useOrg();
     // Non-admin org members get read-only access to organization resources.
     // Solo deployments (no orgId) behave as owner — users can edit their own.
@@ -523,6 +580,15 @@ export function ResourcesPanel({ showMcpServers = true, scope: requestedScope, }
         })
         : (sharedTreeQuery.data ?? []), { show: showAgentScratch });
     const workspaceTree = workspaceTreeQuery.data ?? [];
+    const visiblePersonalTree = useMemo(() => filterResourceTree(personalTree, resourceFilter), [personalTree, resourceFilter]);
+    const visibleSharedTree = useMemo(() => filterResourceTree(sharedTree, resourceFilter), [resourceFilter, sharedTree]);
+    const visibleWorkspaceTree = useMemo(() => filterResourceTree(workspaceTree, resourceFilter), [resourceFilter, workspaceTree]);
+    const displayedPersonalTree = showOnlyRequestedScope && activeScope !== "personal"
+        ? []
+        : visiblePersonalTree;
+    const displayedSharedTree = showOnlyRequestedScope && activeScope !== "shared" ? [] : visibleSharedTree;
+    const showSharedTree = !showOnlyRequestedScope || activeScope === "shared";
+    const showPersonalTree = !showOnlyRequestedScope || activeScope === "personal";
     const orgRole = mcpServersQuery.data?.role ?? org?.role ?? null;
     const hasOrgForMcp = !!(mcpServersQuery.data?.orgId ?? org?.orgId);
     const canCreateOrgMcp = hasOrgForMcp && (orgRole === "owner" || orgRole === "admin");
@@ -615,15 +681,15 @@ export function ResourcesPanel({ showMcpServers = true, scope: requestedScope, }
         const path = parentPath ? `${parentPath}/${name}/.keep` : `${name}/.keep`;
         createResource.mutate({ path, content: "", shared: scope === "shared" });
     }, [createResource]);
-    const handleCreateFromToolbar = useCallback((name) => {
-        createResource.mutate({ path: name, content: "", shared: activeScope === "shared" }, {
+    const handleCreateFromToolbar = useCallback((targetScope, name) => {
+        createResource.mutate({ path: name, content: "", shared: targetScope === "shared" }, {
             onSuccess: (data) => {
                 setSelectedResourceId(data.id);
             },
         });
-    }, [createResource, activeScope]);
-    const handleCreateResourceFromToolbar = useCallback((path, content, mimeType, opts) => {
-        createResource.mutate({ path, content, mimeType, shared: activeScope === "shared" }, {
+    }, [createResource]);
+    const handleCreateResourceFromToolbar = useCallback((targetScope, path, content, mimeType, opts) => {
+        createResource.mutate({ path, content, mimeType, shared: targetScope === "shared" }, {
             onSuccess: (data) => {
                 setSelectedResourceId(data.id);
                 opts?.onSuccess?.(data);
@@ -632,7 +698,7 @@ export function ResourcesPanel({ showMcpServers = true, scope: requestedScope, }
                 opts?.onError?.(err);
             },
         });
-    }, [activeScope, createResource]);
+    }, [createResource]);
     const handleDelete = useCallback((id) => {
         const mcp = parseMcpVirtualId(id);
         if (mcp) {
@@ -666,15 +732,15 @@ export function ResourcesPanel({ showMcpServers = true, scope: requestedScope, }
             return;
         updateResource.mutate({ id: selectedResourceId, content });
     }, [updateResource, selectedResourceId, selectedResourceReadOnly]);
-    const handleUploadFiles = useCallback((files) => {
+    const handleUploadFiles = useCallback((files, targetScope) => {
         for (let i = 0; i < files.length; i++) {
             const file = files[i];
             const formData = new FormData();
             formData.append("file", file);
-            formData.append("shared", activeScope === "shared" ? "true" : "false");
+            formData.append("shared", targetScope === "shared" ? "true" : "false");
             uploadResource.mutate(formData);
         }
-    }, [uploadResource, activeScope]);
+    }, [uploadResource]);
     const handleDragOver = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -690,9 +756,17 @@ export function ResourcesPanel({ showMcpServers = true, scope: requestedScope, }
         e.stopPropagation();
         setDragOver(false);
         if (e.dataTransfer.files.length > 0) {
-            handleUploadFiles(e.dataTransfer.files);
+            handleUploadFiles(e.dataTransfer.files, activeScope);
+        }
+    }, [activeScope, handleUploadFiles]);
+    const renderScopeCreateMenu = (targetScope) => {
+        if (resourceFilter !== "agents" && resourceFilter !== "skills") {
+            return null;
         }
-    }, [handleUploadFiles]);
+        if (targetScope === "shared" && !canEditOrg)
+            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 }));
+    };
     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 &&
@@ -717,35 +791,35 @@ export function ResourcesPanel({ showMcpServers = true, scope: requestedScope, }
                                                     : "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, showToast: showToast }), _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("button", { type: "button", onClick: () => setShowAgentScratch((value) => !value), "aria-label": showAgentScratch
-                                            ? "Hide agent scratch files"
-                                            : "Show agent scratch files", className: cn("flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50", showAgentScratch && "bg-accent/50 text-foreground"), children: _jsx(IconEye, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: showAgentScratch
-                                        ? "Hide agent scratch files"
-                                        : "Show agent scratch files" })] }) }), _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": "Open Workspace 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, { side: "left", sideOffset: 8, children: "Open Workspace docs" })] }) }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: (e) => {
+                                                : "Delete resource" })] }) }))] })] })) : (_jsxs("div", { className: "absolute top-1 right-1 z-10 flex items-center gap-1", children: [(!resourceFilter || resourceFilter === "files") && (_jsx(CreateMenu, { scope: activeScope, resourceFilter: resourceFilter, onCreateFile: (name) => handleCreateFromToolbar(activeScope, name), onCreateResource: (path, content, mimeType, opts) => handleCreateResourceFromToolbar(activeScope, path, content, mimeType, opts), onCreateMcpServer: handleCreateMcpServer, canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrgForMcp, showToast: showToast })), (!resourceFilter || resourceFilter === "files") && (_jsxs(_Fragment, { children: [_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("button", { type: "button", onClick: () => setShowAgentScratch((value) => !value), "aria-label": showAgentScratch
+                                                    ? "Hide agent scratch files"
+                                                    : "Show agent scratch files", className: cn("flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50", showAgentScratch && "bg-accent/50 text-foreground"), children: _jsx(IconEye, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: showAgentScratch
+                                                ? "Hide agent scratch files"
+                                                : "Show agent scratch files" })] }) }), _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": "Open Workspace 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, { side: "left", sideOffset: 8, children: "Open Workspace 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);
+                                handleUploadFiles(e.target.files, activeScope);
                                 e.target.value = "";
                             }
                         } })] })), _jsx("div", { className: "flex flex-1 flex-col min-h-0 overflow-hidden", children: isEditing ? (selectedMcpServer ? (_jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: _jsx(McpServerDetail, { server: selectedMcpServer }) })) : selectedBuiltinCapability ? (_jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: _jsx(BuiltinCapabilityDetail, { capability: selectedBuiltinCapability.capability, scope: selectedBuiltinCapability.scope, canEditOrg: canEditOrg }) })) : selectedResourceId && resourceQuery.data ? (_jsx("div", { className: "flex flex-1 min-h-0 flex-col overflow-hidden", children: _jsx(ResourceEditor, { resource: resourceQuery.data, onSave: handleSave, view: editorView, onViewChange: setEditorView, hideToolbar: true, readOnly: selectedResourceReadOnly }) })) : resourceQuery.isError ? (_jsx("div", { className: "flex flex-1 items-center justify-center text-[12px] text-destructive/70", children: "Failed to load resource" })) : (_jsx("div", { className: "flex flex-1 items-center justify-center text-[12px] text-muted-foreground/50", children: "Loading..." }))) : (_jsxs("div", { className: "flex-1 min-h-0 overflow-y-auto", children: [!personalTreeQuery.isLoading &&
                             !sharedTreeQuery.isLoading &&
                             !workspaceTreeQuery.isLoading &&
-                            workspaceTree.length === 0 &&
-                            (personalTreeQuery.data ?? []).length === 0 &&
-                            (sharedTreeQuery.data ?? []).length === 0 && (_jsxs("div", { className: "mx-2 mt-2 rounded-md border border-border bg-muted/30 p-2.5 text-[11px] text-muted-foreground", children: [_jsx("p", { className: "mb-1 font-medium text-foreground", children: "This is your Workspace" }), _jsx("p", { className: "mb-1.5 leading-snug", children: "Files the agent reads and writes \u2014 notes, instructions, skills, custom agents, scheduled jobs, and inherited workspace context. They live in the database or, in local file mode, in the attached repo." }), _jsxs("p", { className: "mb-2 leading-snug", children: [_jsx("span", { className: "text-foreground", children: "Workspace" }), " is inherited from Dispatch or local file mode.", " ", _jsx("span", { className: "text-foreground", children: "Organization" }), " is visible to everyone in your organization", org?.orgId ? " — only admins can edit. " : ". ", _jsx("span", { className: "text-foreground", children: "Personal" }), " is just for you."] }), _jsxs("a", { href: WORKSPACE_DOCS_URL, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-foreground hover:underline", children: ["Learn more", _jsx(IconExternalLink, { className: "h-3 w-3" })] })] })), workspaceTree.length > 0 && (_jsx(ResourceTree, { tree: workspaceTree, isLoading: workspaceTreeQuery.isLoading, deletingId: deleteResource.isPending
+                            visibleWorkspaceTree.length === 0 &&
+                            displayedPersonalTree.length === 0 &&
+                            displayedSharedTree.length === 0 && (_jsxs("div", { className: "mx-2 mt-2 rounded-md border border-border bg-muted/30 p-2.5 text-[11px] text-muted-foreground", children: [_jsx("p", { className: "mb-1 font-medium text-foreground", children: "This is your Workspace" }), _jsx("p", { className: "mb-1.5 leading-snug", children: "Files the agent reads and writes \u2014 notes, instructions, skills, custom agents, scheduled jobs, and inherited workspace context. They live in the database or, in local file mode, in the attached repo." }), _jsxs("p", { className: "mb-2 leading-snug", children: [_jsx("span", { className: "text-foreground", children: "Workspace" }), " is inherited from Dispatch or local file mode.", " ", _jsx("span", { className: "text-foreground", children: "Organization" }), " is visible to everyone in your organization", org?.orgId ? " — only admins can edit. " : ". ", _jsx("span", { className: "text-foreground", children: "Personal" }), " is just for you."] }), _jsxs("a", { href: WORKSPACE_DOCS_URL, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-foreground hover:underline", children: ["Learn more", _jsx(IconExternalLink, { className: "h-3 w-3" })] })] })), visibleWorkspaceTree.length > 0 && (_jsx(ResourceTree, { tree: visibleWorkspaceTree, variant: resourceTreeVariant, isLoading: workspaceTreeQuery.isLoading, deletingId: deleteResource.isPending
                                 ? deleteResource.variables
                                 : deleteMcpServer.isPending
                                     ? `mcp:${deleteMcpServer.variables.scope}:${deleteMcpServer.variables.id}`
-                                    : null, selectedId: selectedResourceId, onSelect: handleSelect, onCreateFile: () => { }, onCreateFolder: () => { }, onDelete: () => { }, onRename: () => { }, onDrop: () => { }, title: "Workspace", titleTooltip: "Global resources inherited by every app. Dispatch resources are read-only; local file mode resources can be edited here.", readOnly: true, headingHint: "Inherited" })), _jsx(ResourceTree, { tree: sharedTree, isLoading: sharedTreeQuery.isLoading, deletingId: deleteResource.isPending
+                                    : null, selectedId: selectedResourceId, onSelect: handleSelect, onCreateFile: () => { }, onCreateFolder: () => { }, onDelete: () => { }, onRename: () => { }, onDrop: () => { }, title: "Workspace", titleTooltip: "Global resources inherited by every app. Dispatch resources are read-only; local file mode resources can be edited here.", readOnly: true, headingHint: "Inherited" })), showPersonalTree && (_jsx(ResourceTree, { tree: displayedPersonalTree, variant: resourceTreeVariant, isLoading: personalTreeQuery.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: handleUploadFiles, 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 }), _jsx(ResourceTree, { tree: personalTree, isLoading: personalTreeQuery.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") })), 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, "personal"), onCreateFolder: (parentPath, name) => handleCreateFolder(parentPath, name, "personal"), onDelete: handleDelete, onRename: handleRename, onDrop: handleUploadFiles, title: "Personal", titleTooltip: "Files visible only to you" })] })) }), 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"
+                                    : 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"
                         ? "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);