@agent-native/toolkit 0.23.1 → 0.198.1

package/src/app/resources/ResourcesPanel.tsx

@@ -0,0 +1,2544 @@
+import {
+  CLAUDE_SONNET_MODEL_ID,
+  CLAUDE_SONNET_MODEL_LABEL,
+} from "@agent-native/core/agent/model-config";
+import { sendToAgentChat } from "@agent-native/core/client/agent-chat";
+import { agentNativePath } from "@agent-native/core/client/api-path";
+import { useT } from "@agent-native/core/client/i18n";
+import { useOrg } from "@agent-native/core/client/org/hooks";
+import {
+  isCustomMcpIntegrationEnabled,
+  type DefaultMcpIntegration,
+} from "@agent-native/core/client/resources/mcp-integration-catalog";
+import {
+  filterResourceTree,
+  type ResourceTreeVariant,
+  type ResourceView,
+} from "@agent-native/core/client/resources/resource-views";
+import {
+  parseMcpBuiltinVirtualId,
+  useBuiltinCapabilities,
+} from "@agent-native/core/client/resources/use-builtin-capabilities";
+import {
+  useMcpServers,
+  useCreateMcpServer,
+  useDeleteMcpServer,
+  parseMcpVirtualId,
+  type McpServerScope,
+} from "@agent-native/core/client/resources/use-mcp-servers";
+import {
+  useResourceTree,
+  useResource,
+  useCreateResource,
+  useUpdateResource,
+  useDeleteResource,
+  resourceDownloadUrl,
+  withMcpServersFolder,
+  withAgentScratchFolder,
+  useExportResourcePack,
+  useImportResourcePack,
+  downloadResourcePackJson,
+  resourcePackScopeFromPanel,
+  resourcePackDownloadFilename,
+  type ResourceScope,
+  type ResourceMeta,
+  type Resource,
+} from "@agent-native/core/client/resources/use-resources";
+import { useFileUploadStatus } from "@agent-native/core/client/uploads/use-file-upload-status";
+import { useUploadResource } from "@agent-native/core/client/uploads/use-upload-resource";
+import { actionErrorMessage } from "@agent-native/core/client/use-action";
+import type { OrgInfo } from "@agent-native/core/org/types";
+import { serializeFrontmatter } from "@agent-native/core/resources/metadata";
+import { RESOURCE_PACK_MAX_BODY_BYTES } from "@agent-native/core/resources/pack-constants";
+import { PromptComposer } from "@agent-native/toolkit/composer";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
+import { cn } from "@agent-native/toolkit/utils";
+import {
+  IconPlus,
+  IconUpload,
+  IconArrowLeft,
+  IconPencil,
+  IconBulb,
+  IconBolt,
+  IconTrash,
+  IconEye,
+  IconCode,
+  IconClock,
+  IconHierarchy2,
+  IconPlugConnected,
+  IconDownload,
+  IconPackageExport,
+  IconFileImport,
+} from "@tabler/icons-react";
+import React, {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useMemo,
+} from "react";
+
+import {
+  FileStorageSetupPopover,
+  type FileStorageSetupCloseReason,
+} from "../chat/FileStorageSetupPopover.js";
+import { BuiltinCapabilityDetail } from "./BuiltinCapabilityDetail.js";
+import { McpIntegrationDialog } from "./McpIntegrationDialog.js";
+import { McpServerDetail } from "./McpServerDetail.js";
+import { ResourceEditor } from "./ResourceEditor.js";
+import {
+  ResourceSettingsGroups,
+  type ResourceSettingsGroupConfig,
+} from "./ResourceSettingsGroups.js";
+import { ResourceTree } from "./ResourceTree.js";
+
+const LOCAL_WORKSPACE_RESOURCE_METADATA_SOURCE = "local-workspace-resource";
+
+type PendingResourceUpload = {
+  file: File;
+  targetScope: ResourceScope;
+  attemptId?: number;
+};
+
+type ResourceUploadStatusResult = {
+  isError: boolean;
+  data?: { configured?: unknown };
+};
+
+export function mergePendingResourceUploads(
+  pending: PendingResourceUpload[],
+  next: PendingResourceUpload[],
+): PendingResourceUpload[] {
+  const byResourcePath = new Map<string, PendingResourceUpload>();
+  for (const upload of [...pending, ...next]) {
+    byResourcePath.set(
+      JSON.stringify([upload.targetScope, upload.file.name]),
+      upload,
+    );
+  }
+  return [...byResourcePath.values()];
+}
+
+export function takePendingResourceUploads(
+  pending: PendingResourceUpload[],
+  result: ResourceUploadStatusResult,
+  throughAttemptId?: number,
+): { uploads: PendingResourceUpload[]; storageConfigured: boolean } | null {
+  if (result.isError || typeof result.data?.configured !== "boolean") {
+    return null;
+  }
+  const shouldTake = (upload: PendingResourceUpload) =>
+    throughAttemptId === undefined ||
+    upload.attemptId === undefined ||
+    upload.attemptId <= throughAttemptId;
+  const uploads = pending.filter(shouldTake);
+  const remaining = pending.filter((upload) => !shouldTake(upload));
+  pending.splice(0, pending.length, ...remaining);
+  return {
+    uploads,
+    storageConfigured: result.data.configured,
+  };
+}
+
+export function shouldClearPendingResourceUploads(
+  open: boolean,
+  reason?: FileStorageSetupCloseReason,
+): boolean {
+  return !open && reason === "dismiss";
+}
+
+export function normalizeResourceFileName(name: string): string {
+  const trimmed = name.trim();
+  if (!trimmed || trimmed.endsWith("/")) return "";
+  const finalSegment = trimmed.split("/").pop() ?? "";
+  return /\.[^/]+$/.test(finalSegment) ? trimmed : `${trimmed}.md`;
+}
+
+export function canUploadResourceFile(
+  mimeType: string,
+  fileStorageConfigured: boolean,
+): boolean {
+  const resolvedMimeType = mimeType || "application/octet-stream";
+  return (
+    fileStorageConfigured ||
+    resolvedMimeType.startsWith("text/") ||
+    resolvedMimeType === "application/json"
+  );
+}
+
+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",
+};
+
+export const MEMORY_RESOURCE_SEED = {
+  path: "memory/MEMORY.md",
+  content: "# Memory\n\n",
+  mimeType: "text/markdown",
+};
+
+export const LEARNINGS_RESOURCE_SEED = {
+  path: "LEARNINGS.md",
+  content: "# Learnings\n\n",
+  mimeType: "text/markdown",
+};
+
+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: MEMORY_RESOURCE_SEED,
+  learnings: LEARNINGS_RESOURCE_SEED,
+  "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 {
+  filterResourceTree,
+  type ResourceTreeVariant,
+  type ResourceView,
+} from "@agent-native/core/client/resources/resource-views";
+
+type CreateMenuView =
+  | "menu"
+  | "file"
+  | "skill"
+  | "skill-upload"
+  | "job"
+  | "agent-mode"
+  | "agent-prompt"
+  | "agent-form";
+
+const AGENT_MODEL_OPTIONS = [
+  { value: "inherit", label: "Default model" },
+  { value: "claude-fable-5", label: "Claude Fable 5" },
+  { value: "claude-opus-4-8", label: "Claude Opus 4.8" },
+  { value: CLAUDE_SONNET_MODEL_ID, label: CLAUDE_SONNET_MODEL_LABEL },
+  { value: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5" },
+] as const;
+
+export function slugifyName(value: string): string {
+  return (
+    value
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "") || "agent"
+  );
+}
+
+/** Ask the agent to draft a custom agent profile, saved at `scope`. */
+export function requestCustomAgentFromAgent(
+  description: string,
+  scope: ResourceScope,
+): void {
+  const trimmed = description.trim();
+  if (!trimmed) return;
+  sendToAgentChat({
+    message: `Create a custom agent: ${trimmed}`,
+    newTab: true,
+    context: `The user wants a reusable custom sub-agent profile for the workspace. Their description: "${trimmed}"
+
+Create it as a ${scope} resource under "agents/<name>.md" using the \`resources\` tool with \`action: "write"\`.
+
+Requirements:
+1. Derive a hyphen-case file name from the intent
+2. Use YAML frontmatter with:
+   - name
+   - description
+   - model (use "inherit" unless the request clearly needs a different model)
+   - tools (set to "inherit")
+   - delegate-default (set to false)
+3. Put the main operating instructions in the markdown body
+4. Keep it concise and directive, similar to a Claude Code-style custom agent
+
+Template:
+\`\`\`markdown
+---
+name: Design
+description: >-
+  Helps with product and interface design decisions.
+model: inherit
+tools: inherit
+delegate-default: false
+---
+
+# Role
+
+You are a focused design agent.
+
+## Responsibilities
+
+- ...
+
+## Approach
+
+- ...
+\`\`\`
+
+The result should be a reusable agent profile, not a one-off task response.`,
+    submit: true,
+  });
+}
+
+/** Ask the agent to draft a skill from a description, saved at `scope`. */
+export function requestSkillFromAgent(
+  description: string,
+  scope: ResourceScope,
+): void {
+  const trimmed = description.trim();
+  if (!trimmed) return;
+  sendToAgentChat({
+    message: `Create a skill: ${trimmed}`,
+    newTab: true,
+    context: `The user wants to create an agent skill. Their description: "${trimmed}"
+
+Follow the create-skill pattern to build this. Before writing:
+
+1. **Determine the skill name** — derive a hyphen-case name from the description (e.g. "code review" → "code-review")
+2. **Determine the skill type** — Pattern (architectural rule), Workflow (step-by-step), or Generator (scaffolding)
+3. **Write the skill** as a ${scope} resource at path "skills/<name>/SKILL.md" using the \`resources\` tool with \`action: "write"\`
+
+The skill file MUST have YAML frontmatter with name and description (under 40 words), then markdown with:
+- Clear rule/purpose statement
+- Why this skill exists
+- How to follow it (with code examples where helpful)
+- Common violations to avoid
+- Related skills
+
+Template for a Pattern skill:
+\`\`\`markdown
+---
+name: <hyphen-case-name>
+description: >-
+  <Under 40 words. When should this trigger?>
+---
+
+# <Skill Name>
+
+## Rule
+<One sentence: what must be true>
+
+## Why
+<Why this rule exists>
+
+## How
+<How to follow it, with code examples>
+
+## Don't
+<Common violations>
+\`\`\`
+
+Template for a Workflow skill:
+\`\`\`markdown
+---
+name: <hyphen-case-name>
+description: >-
+  <Under 40 words. When should this trigger?>
+---
+
+# <Workflow Name>
+
+## Prerequisites
+<What must be in place>
+
+## Steps
+<Numbered steps with code examples>
+
+## Verification
+<How to confirm it worked>
+\`\`\`
+
+After creating, update the shared AGENTS.md resource to reference the new skill in its skills table.
+
+Keep the skill concise (under 500 lines) and actionable.`,
+    submit: true,
+  });
+}
+
+function isLocalWorkspaceResource(resource: Resource | null | undefined) {
+  if (!resource?.metadata) return false;
+  try {
+    const metadata = JSON.parse(resource.metadata) as { source?: unknown };
+    return metadata.source === LOCAL_WORKSPACE_RESOURCE_METADATA_SOURCE;
+  } catch {
+    return false;
+  }
+}
+
+/** Starting body for a custom agent profile written by hand. */
+export const CUSTOM_AGENT_BODY_TEMPLATE = `# 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`;
+
+export function buildAgentResourceContent({
+  name,
+  description,
+  model,
+  tools,
+  body,
+}: {
+  name: string;
+  description: string;
+  model: string;
+  tools: string;
+  body: string;
+}): string {
+  const fields = [
+    { key: "name", value: name },
+    { key: "description", value: description },
+    { key: "model", value: model },
+    { key: "tools", value: tools },
+    { key: "delegate-default", value: "false" },
+  ];
+  return serializeFrontmatter(fields) + body.trim() + "\n";
+}
+
+function CreateMenu({
+  scope,
+  resourceFilter,
+  personalMcpOnly = false,
+  onCreateFile,
+  onCreateResource,
+  onCreateMcpServer,
+  canCreateOrgMcp,
+  hasOrg,
+  onCreated,
+  showToast,
+  mcpIntegrations,
+  triggerVariant = "icon",
+  triggerLabel,
+  initialView = "menu",
+}: {
+  scope: ResourceScope;
+  resourceFilter?: ResourceView;
+  personalMcpOnly?: boolean;
+  onCreateFile: (name: string) => void;
+  onCreateResource: (
+    path: string,
+    content: string,
+    mimeType?: string,
+    opts?: {
+      onSuccess?: (resource: ResourceMeta) => void;
+      onError?: (err: unknown) => void;
+    },
+  ) => void;
+  onCreateMcpServer: (args: {
+    scope: McpServerScope;
+    name: string;
+    url: string;
+    headers?: Record<string, string>;
+    description?: string;
+  }) => Promise<void>;
+  canCreateOrgMcp: boolean;
+  hasOrg: boolean;
+  onCreated?: () => void;
+  mcpIntegrations?: DefaultMcpIntegration[];
+  showToast?: (
+    kind: "ok" | "err",
+    message: string,
+    opts?: { resourceId?: string; durationMs?: number },
+  ) => void;
+  triggerVariant?: "icon" | "outline";
+  triggerLabel?: string;
+  initialView?: CreateMenuView;
+}) {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
+  const [view, setView] = useState<CreateMenuView>("menu");
+  const showMcpIntegrations = useMemo(
+    () => hasAvailableMcpIntegrations(mcpIntegrations),
+    [mcpIntegrations],
+  );
+  const [value, setValue] = useState("");
+  const [agentName, setAgentName] = useState("");
+  const [agentDescription, setAgentDescription] = useState("");
+  const [agentModel, setAgentModel] = useState<string>("inherit");
+  const [agentInstructions, setAgentInstructions] = useState(
+    CUSTOM_AGENT_BODY_TEMPLATE,
+  );
+  const defaultMcpScope: McpServerScope = personalMcpOnly
+    ? "user"
+    : scope === "shared" && canCreateOrgMcp
+      ? "org"
+      : "user";
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+  const skillFileInputRef = useRef<HTMLInputElement>(null);
+  const skillHoverTimerRef = useRef<number | null>(null);
+  const [skillFlyoutOpen, setSkillFlyoutOpen] = useState(false);
+  const [skillFlyoutSide, setSkillFlyoutSide] = useState<"right" | "left">(
+    "right",
+  );
+  const skillFlyoutCloseTimerRef = useRef<number | null>(null);
+  const openSkillFlyout = (rowEl?: HTMLElement | null) => {
+    if (skillFlyoutCloseTimerRef.current) {
+      window.clearTimeout(skillFlyoutCloseTimerRef.current);
+      skillFlyoutCloseTimerRef.current = null;
+    }
+    if (
+      rowEl &&
+      typeof window !== "undefined" &&
+      typeof rowEl.getBoundingClientRect === "function"
+    ) {
+      const rect = rowEl.getBoundingClientRect();
+      const FLYOUT_WIDTH = 248;
+      setSkillFlyoutSide(
+        window.innerWidth - rect.right < FLYOUT_WIDTH ? "left" : "right",
+      );
+    }
+    setSkillFlyoutOpen(true);
+  };
+  const scheduleSkillFlyoutClose = () => {
+    if (skillFlyoutCloseTimerRef.current)
+      window.clearTimeout(skillFlyoutCloseTimerRef.current);
+    skillFlyoutCloseTimerRef.current = window.setTimeout(() => {
+      setSkillFlyoutOpen(false);
+    }, 160);
+  };
+  const [skillUploadSlug, setSkillUploadSlug] = useState("");
+  const [skillUploadContent, setSkillUploadContent] = useState("");
+  const [skillUploadFileName, setSkillUploadFileName] = useState("");
+
+  useEffect(() => {
+    if (open) {
+      setView(personalMcpOnly ? "menu" : initialView);
+      setValue("");
+      setAgentName("");
+      setAgentDescription("");
+      setAgentModel("inherit");
+      setAgentInstructions(CUSTOM_AGENT_BODY_TEMPLATE);
+      setSkillUploadSlug("");
+      setSkillUploadContent("");
+      setSkillUploadFileName("");
+      setSkillFlyoutOpen(false);
+    }
+  }, [initialView, open, personalMcpOnly]);
+
+  useEffect(() => {
+    if (view !== "menu" && view !== "agent-form") {
+      setValue("");
+      const t = setTimeout(() => inputRef.current?.focus(), 50);
+      return () => clearTimeout(t);
+    }
+  }, [view]);
+
+  const submitFile = () => {
+    const normalizedName = normalizeResourceFileName(value);
+    if (normalizedName) {
+      onCreateFile(normalizedName);
+      setOpen(false);
+    }
+  };
+
+  const submitSkill = (text: string = value) => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+
+    requestSkillFromAgent(trimmed, scope);
+
+    setOpen(false);
+    onCreated?.();
+  };
+
+  const handleUploadSkillFiles = async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+    const file = files[0];
+    const text = await file.text();
+    const baseName = file.name.replace(/\.[^./]+$/, "");
+    const slug = slugifyName(
+      baseName.toLowerCase() === "skill" ? "uploaded-skill" : baseName,
+    );
+    setSkillUploadSlug(slug);
+    setSkillUploadContent(text);
+    setSkillUploadFileName(file.name);
+    setView("skill-upload");
+  };
+
+  const saveUploadedSkill = () => {
+    const slug = slugifyName(skillUploadSlug || "uploaded-skill");
+    const path = `skills/${slug}/SKILL.md`;
+    const fileLabel = skillUploadFileName || `${slug}/SKILL.md`;
+    onCreateResource(path, skillUploadContent, "text/markdown", {
+      onSuccess: (resource) => {
+        showToast?.("ok", `Skill "${fileLabel}" added`, {
+          resourceId: resource.id,
+        });
+      },
+      onError: (err) => {
+        const msg =
+          err instanceof Error && err.message
+            ? err.message
+            : "Failed to save skill file";
+        showToast?.("err", msg);
+      },
+    });
+    setOpen(false);
+    onCreated?.();
+  };
+
+  const submitJob = (text: string = value) => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+
+    sendToAgentChat({
+      message: `Create a recurring job: ${trimmed}`,
+      newTab: true,
+      context: `The user wants to create a recurring job. Their description: "${trimmed}"
+
+Use the manage-jobs tool with action "create" to create this. You need to:
+1. Derive a hyphen-case name from the description
+2. Convert the schedule to a cron expression (e.g., "every weekday at 9am" → "0 9 * * 1-5")
+3. Write clear, self-contained instructions for what the agent should do each time the job runs
+4. Create it in ${scope} scope
+
+The job will run automatically on the schedule. Make the instructions specific — include which actions to call and what to do with results.`,
+      submit: true,
+    });
+
+    setOpen(false);
+  };
+
+  const submitAgentPrompt = (text: string = value) => {
+    if (!text.trim()) return;
+    requestCustomAgentFromAgent(text, scope);
+    setOpen(false);
+    onCreated?.();
+  };
+
+  const submitAgentManual = () => {
+    const trimmedName = agentName.trim();
+    const trimmedDescription = agentDescription.trim();
+    const trimmedInstructions = agentInstructions.trim();
+    if (!trimmedName || !trimmedDescription || !trimmedInstructions) return;
+
+    const slug = slugifyName(trimmedName);
+    onCreateResource(
+      `agents/${slug}.md`,
+      buildAgentResourceContent({
+        name: trimmedName,
+        description: trimmedDescription,
+        model: agentModel,
+        tools: "inherit",
+        body: trimmedInstructions,
+      }),
+      "text/markdown",
+    );
+    setOpen(false);
+    onCreated?.();
+  };
+
+  const menuItems: {
+    icon: React.ReactNode;
+    label: string;
+    desc: string;
+    action: () => void;
+    hoverAction?: () => void;
+    personalMcp?: boolean;
+  }[] = [
+    {
+      icon: <IconPlus className="h-3.5 w-3.5" />,
+      label: "Create File",
+      desc: t("agentResources.createFile.menuDescription"),
+      action: () => setView("file"),
+    },
+    {
+      icon: <IconBulb className="h-3.5 w-3.5" />,
+      label: "Create Skill",
+      desc: "Teach the agent a new ability",
+      action: () => openSkillFlyout(),
+      hoverAction: openSkillFlyout,
+    },
+    {
+      icon: <IconClock className="h-3.5 w-3.5" />,
+      label: "Schedule Task",
+      desc: "Run something on a schedule",
+      action: () => setView("job"),
+    },
+    {
+      icon: <IconHierarchy2 className="h-3.5 w-3.5" />,
+      label: "Create Custom Agent",
+      desc: "Add a reusable sub-agent profile",
+      action: () => setView("agent-mode"),
+    },
+    {
+      icon: <IconBolt className="h-3.5 w-3.5" />,
+      label: "Create Automation",
+      desc: "Set up a when-X-do-Y rule",
+      action: () => {
+        setOpen(false);
+        window.dispatchEvent(
+          new CustomEvent("agent-panel:set-mode", {
+            detail: { mode: "chat" },
+          }),
+        );
+        sendToAgentChat({
+          message:
+            "Help me create a new automation. Ask me what I want to automate.",
+          context: `The user wants to create a new automation. Scope: personal. Use manage-automations with action=define to create it. Ask clarifying questions if needed about what event to trigger on, conditions, and what actions to take.`,
+          submit: true,
+          newTab: true,
+        });
+        onCreated?.();
+      },
+    },
+    ...(showMcpIntegrations
+      ? [
+          {
+            icon: <IconPlugConnected className="h-3.5 w-3.5" />,
+            label: t("mcpIntegrations.menuLabel"),
+            desc: t("mcpIntegrations.menuDescription"),
+            personalMcp: true,
+            action: () => {
+              setOpen(false);
+              setMcpDialogOpen(true);
+            },
+          },
+        ]
+      : []),
+  ];
+  const visibleMenuItems = menuItems.filter((item) => {
+    if (personalMcpOnly) return item.personalMcp;
+    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 (
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <input
+          ref={skillFileInputRef}
+          type="file"
+          accept=".md,text/markdown"
+          multiple
+          className="hidden"
+          onChange={(e) => {
+            void handleUploadSkillFiles(e.target.files);
+            e.target.value = "";
+          }}
+        />
+        {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}
+          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",
+          )}
+        >
+          {view === "menu" && (
+            <div className="py-1">
+              {visibleMenuItems.map((item) => {
+                const isSkill = item.label === "Create Skill";
+                return (
+                  <div
+                    key={item.label}
+                    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;
+                      }
+                    }}
+                  >
+                    <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",
+                      )}
+                    >
+                      <span className="text-muted-foreground">{item.icon}</span>
+                      <div className="min-w-0 flex-1">
+                        <div className="text-[12px] font-medium text-foreground">
+                          {item.label}
+                        </div>
+                        <div className="mt-0.5 text-[10px] text-muted-foreground/60">
+                          {item.desc}
+                        </div>
+                      </div>
+                      {isSkill && (
+                        <span className="ml-auto text-muted-foreground/60">
+                          ›
+                        </span>
+                      )}
+                    </button>
+                    {isSkill && skillFlyoutOpen && (
+                      <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",
+                        )}
+                      >
+                        <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"
+                        >
+                          <span className="text-muted-foreground">
+                            <IconBulb className="h-3.5 w-3.5" />
+                          </span>
+                          <div className="min-w-0">
+                            <div className="text-[12px] font-medium text-foreground">
+                              Create new skill
+                            </div>
+                            <div className="mt-0.5 text-[10px] text-muted-foreground/60">
+                              Describe a skill and let the agent draft it
+                            </div>
+                          </div>
+                        </button>
+                        <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"
+                        >
+                          <span className="text-muted-foreground">
+                            <IconUpload className="h-3.5 w-3.5" />
+                          </span>
+                          <div className="min-w-0">
+                            <div className="text-[12px] font-medium text-foreground">
+                              Upload skill file
+                            </div>
+                            <div className="mt-0.5 text-[10px] text-muted-foreground/60">
+                              Import an existing SKILL.md file
+                            </div>
+                          </div>
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {view === "file" && (
+            <div className="p-3">
+              <label className="mb-1.5 block text-[11px] font-medium text-muted-foreground">
+                {t("agentResources.createFile.nameLabel")}
+              </label>
+              <input
+                ref={inputRef as React.RefObject<HTMLInputElement>}
+                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={t("agentResources.createFile.namePlaceholder")}
+              />
+              <div className="mt-2.5 flex justify-end">
+                <button
+                  onClick={submitFile}
+                  disabled={!normalizeResourceFileName(value)}
+                  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"
+                >
+                  Create
+                </button>
+              </div>
+            </div>
+          )}
+
+          {view === "skill" && (
+            <div className="relative p-3">
+              <label className="mb-1 block text-[11px] font-semibold text-foreground">
+                Create Skill
+              </label>
+              <p className="mb-2 text-[10px] text-muted-foreground/60 leading-relaxed">
+                Describe what kind of skill you want and the agent will create
+                it.
+              </p>
+              <PromptComposer
+                autoFocus
+                placeholder="e.g. A skill that reviews PRs for security issues and OWASP top 10 vulnerabilities"
+                draftScope="resources:create-skill"
+                onSubmit={(text) => submitSkill(text)}
+              />
+            </div>
+          )}
+
+          {view === "skill-upload" && (
+            <div className="p-3">
+              <label className="mb-1 block text-[11px] font-semibold text-foreground">
+                Upload skill file
+              </label>
+              <p className="mb-2 text-[10px] text-muted-foreground/60 leading-relaxed">
+                Review the content from{" "}
+                <span className="font-mono">
+                  {skillUploadFileName || "the selected file"}
+                </span>{" "}
+                before saving.
+              </p>
+              <label className="mb-1 block text-[10px] font-medium text-muted-foreground">
+                Skill name
+              </label>
+              <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"
+              />
+              <p className="mb-2 text-[10px] text-muted-foreground/60">
+                Will be saved at{" "}
+                <span className="font-mono">
+                  skills/{slugifyName(skillUploadSlug || "uploaded-skill")}
+                  /SKILL.md
+                </span>
+              </p>
+              <label className="mb-1 block text-[10px] font-medium text-muted-foreground">
+                Content
+              </label>
+              <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"
+              />
+              <div className="mt-2.5 flex justify-end gap-2">
+                <button
+                  onClick={() => setView("menu")}
+                  className="rounded-md px-3 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-accent/40"
+                >
+                  Back
+                </button>
+                <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"
+                >
+                  Save
+                </button>
+              </div>
+            </div>
+          )}
+
+          {view === "job" && (
+            <div className="relative p-3">
+              <label className="mb-1 block text-[11px] font-semibold text-foreground">
+                Schedule Task
+              </label>
+              <p className="mb-2 text-[10px] text-muted-foreground/60 leading-relaxed">
+                Describe what should happen and when.
+              </p>
+              <PromptComposer
+                autoFocus
+                placeholder="e.g. Every weekday at 9am, check for overdue scorecards and send a Slack update"
+                draftScope="resources:create-job"
+                onSubmit={(text) => submitJob(text)}
+              />
+            </div>
+          )}
+
+          {view === "agent-mode" && (
+            <div className="p-3">
+              <label className="mb-1 block text-[11px] font-semibold text-foreground">
+                Create Agent
+              </label>
+              <p className="mb-2 text-[10px] leading-relaxed text-muted-foreground/60">
+                Build a reusable sub-agent profile for this workspace.
+              </p>
+              <div className="space-y-2">
+                <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"
+                >
+                  <IconPencil className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                  <div>
+                    <div className="text-[12px] font-medium text-foreground">
+                      Describe It
+                    </div>
+                    <div className="text-[10px] text-muted-foreground/60">
+                      Let the agent draft the profile from a prompt.
+                    </div>
+                  </div>
+                </button>
+                <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"
+                >
+                  <IconHierarchy2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                  <div>
+                    <div className="text-[12px] font-medium text-foreground">
+                      Fill Form
+                    </div>
+                    <div className="text-[10px] text-muted-foreground/60">
+                      Set the fields manually and start with a markdown
+                      template.
+                    </div>
+                  </div>
+                </button>
+              </div>
+            </div>
+          )}
+
+          {view === "agent-prompt" && (
+            <div className="relative p-3">
+              <label className="mb-1 block text-[11px] font-semibold text-foreground">
+                Create Agent From Prompt
+              </label>
+              <p className="mb-2 text-[10px] text-muted-foreground/60 leading-relaxed">
+                Describe the agent you want. It will be saved under{" "}
+                <code>agents/</code>.
+              </p>
+              <PromptComposer
+                autoFocus
+                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)}
+              />
+            </div>
+          )}
+
+          {view === "agent-form" && (
+            <div className="p-3">
+              <label className="mb-2 block text-[11px] font-semibold text-foreground">
+                Create Agent Manually
+              </label>
+              <div className="space-y-2">
+                <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"
+                />
+                <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"
+                />
+                <label className="block text-[11px] font-medium text-muted-foreground">
+                  Model
+                </label>
+                <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"
+                >
+                  {AGENT_MODEL_OPTIONS.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+                <label className="block text-[11px] font-medium text-muted-foreground">
+                  Instructions
+                </label>
+                <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,
+                  }}
+                />
+              </div>
+              <div className="mt-2.5 flex justify-end">
+                <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"
+                >
+                  Create
+                </button>
+              </div>
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+      <McpIntegrationDialog
+        open={mcpDialogOpen}
+        onOpenChange={setMcpDialogOpen}
+        defaultScope={defaultMcpScope}
+        canCreateOrgMcp={canCreateOrgMcp}
+        hasOrg={hasOrg}
+        onCreateMcpServer={onCreateMcpServer}
+        onCreated={onCreated}
+        integrations={mcpIntegrations}
+      />
+    </>
+  );
+}
+
+function PathBreadcrumb({ path }: { path: string }) {
+  const parts = path.split("/").filter(Boolean);
+  return (
+    <div className="flex items-center gap-0.5 text-[11px] text-muted-foreground/60 overflow-hidden">
+      {parts.map((part, i) => (
+        <React.Fragment key={i}>
+          {i > 0 && <span className="shrink-0">/</span>}
+          <span
+            className={cn(
+              "truncate",
+              i === parts.length - 1 && "text-muted-foreground",
+            )}
+          >
+            {part}
+          </span>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+const DEFAULT_AGENTS_MD_CLIENT = `# Agent Instructions
+
+This file customizes how the AI agent behaves in this app. Edit it to add your own instructions, preferences, and context.
+
+## What to put here
+
+- **Preferences** — Tone, style, verbosity, response format
+- **Context** — Domain knowledge, terminology, team conventions
+- **Rules** — Things the agent should always/never do
+- **Skills** — Reference skill files for specialized tasks (create them in the \`skills/\` folder)
+
+## Skills
+
+Create skill files under \`skills/<name>/SKILL.md\` to give the agent specialized knowledge. Reference them here:
+
+| Skill | Path | Description |
+|-------|------|-------------|
+| *(use the skill button to create one)* | \`skills/example/SKILL.md\` | |
+
+## Agent resource files
+
+Agent resources are files users intentionally add, edit, or manage. Agents may create hidden \`agent_scratch\` resources for temporary working notes, scripts, or intermediate results; only promote those files into the visible agent resources list when a user explicitly asks to keep them.
+`;
+
+const WORKSPACE_RESOURCE_OWNER = "__workspace__";
+const SHARED_RESOURCE_OWNER = "__shared__";
+const ORGANIZATION_RESOURCE_OWNER_PREFIX = "__organization__:";
+
+/** Legacy shared or organization owner; members only read these. */
+export function isOrganizationResourceOwner(owner: string): boolean {
+  return (
+    owner === SHARED_RESOURCE_OWNER ||
+    owner.startsWith(ORGANIZATION_RESOURCE_OWNER_PREFIX)
+  );
+}
+
+function isWorkspaceResourceOwner(owner: string): boolean {
+  return (
+    owner === WORKSPACE_RESOURCE_OWNER ||
+    owner.startsWith(`${WORKSPACE_RESOURCE_OWNER}:`)
+  );
+}
+
+export interface ResourcesPanelProps {
+  showMcpServers?: boolean;
+  scope?: ResourceScope;
+  showOnlyRequestedScope?: boolean;
+  resourceFilter?: ResourceView;
+  resourceTreeVariant?: ResourceTreeVariant;
+  mcpIntegrations?: DefaultMcpIntegration[];
+  /**
+   * Settings pages: list `resourceFilter` rows in these groups instead of
+   * the scope trees and floating toolbar.
+   */
+  settingsGroups?: readonly ResourceSettingsGroupConfig[];
+  /** Receives a function that opens a resource in this panel's editor. */
+  openResourceRef?: { current: ((id: string) => void) | null };
+  /** Called when the editor opens or closes, so a page can yield to it. */
+  onEditingChange?: (editing: boolean) => void;
+}
+
+/** Owners, admins, and solo deployments (no organization) edit org resources. */
+export function canEditOrganizationResources(
+  org: Pick<OrgInfo, "orgId" | "role"> | null | undefined,
+): boolean {
+  return !org?.orgId || org.role === "owner" || org.role === "admin";
+}
+
+export function resolveInitialResourceScope(
+  requestedScope: ResourceScope | undefined,
+  canEditOrg: boolean,
+): ResourceScope {
+  if (requestedScope === "shared") return "shared";
+  if (requestedScope === "personal") return "personal";
+  return canEditOrg ? "shared" : "personal";
+}
+
+export function hasAvailableMcpIntegrations(
+  integrations: readonly DefaultMcpIntegration[] | undefined,
+): boolean {
+  return (integrations?.length ?? 0) > 0 || isCustomMcpIntegrationEnabled();
+}
+
+export function resolveResourceCreateMenuMode(
+  scope: ResourceScope,
+  canEditOrg: boolean,
+  resourceFilter: ResourceView | undefined,
+  hasMcpIntegrations: boolean,
+): "full" | "personal-mcp" | "hidden" {
+  if (scope !== "shared" || canEditOrg) return "full";
+  if (hasMcpIntegrations && (!resourceFilter || resourceFilter === "files")) {
+    return "personal-mcp";
+  }
+  return "hidden";
+}
+
+export function shouldRenderResourceSectionCreateMenu(
+  mode: ReturnType<typeof resolveResourceCreateMenuMode>,
+  resourceFilter: ResourceView | undefined,
+): boolean {
+  return (
+    mode === "full" &&
+    (resourceFilter === "agents" || resourceFilter === "skills")
+  );
+}
+
+export function resourcePackPrefixForView(
+  view: ResourceView | undefined,
+): string | undefined {
+  switch (view) {
+    case "memory":
+      return "memory/";
+    case "skills":
+      return "skills/";
+    case "agents":
+      return "agents/";
+    case "remote-agents":
+      return "remote-agents/";
+    default:
+      return undefined;
+  }
+}
+
+const RESOURCE_PACK_IMPORT_ERROR_PREVIEW = 8;
+
+export function resourcePackImportToast(
+  outcome: {
+    imported?: number;
+    skipped?: number;
+    errors?: Array<{ path?: string; error?: string } | null> | null;
+  },
+  translate: (key: string, values?: Record<string, unknown>) => string,
+): { kind: "ok" | "err"; message: string } {
+  const imported = outcome.imported ?? 0;
+  const skipped = outcome.skipped ?? 0;
+  const summary = translate("agentResources.importPackSuccess", {
+    imported,
+    skipped,
+  });
+  const errors = (outcome.errors ?? []).flatMap((entry) => {
+    if (!entry || typeof entry !== "object") return [];
+    const path = typeof entry.path === "string" ? entry.path.trim() : "";
+    const error = typeof entry.error === "string" ? entry.error.trim() : "";
+    if (!path && !error) return [];
+    return [error ? `${path || "unknown"}: ${error}` : path];
+  });
+  if (errors.length === 0) return { kind: "ok", message: summary };
+  const preview = errors.slice(0, RESOURCE_PACK_IMPORT_ERROR_PREVIEW);
+  const hidden = errors.length - preview.length;
+  const details =
+    hidden > 0 ? `${preview.join("; ")}; +${hidden}` : preview.join("; ");
+  return {
+    kind: "err",
+    message: `${summary}. ${translate("agentResources.importPackFailed")} (${errors.length}): ${details}`,
+  };
+}
+
+export function ResourcesPanel({
+  showMcpServers = true,
+  scope: requestedScope,
+  showOnlyRequestedScope = false,
+  resourceFilter,
+  resourceTreeVariant = "tree",
+  mcpIntegrations,
+  settingsGroups,
+  openResourceRef,
+  onEditingChange,
+}: ResourcesPanelProps = {}) {
+  const t = useT();
+  const { data: org } = useOrg();
+  const canEditOrg = canEditOrganizationResources(org);
+
+  const [activeScope, setActiveScope] = useState<ResourceScope>(() =>
+    resolveInitialResourceScope(requestedScope, canEditOrg),
+  );
+  const [selectedResourceId, setSelectedResourceId] = useState<string | null>(
+    null,
+  );
+  const [toolbarDeleteConfirmId, setToolbarDeleteConfirmId] = useState<
+    string | null
+  >(null);
+  const [dragOver, setDragOver] = useState(false);
+  const [fileStorageSetupOpen, setFileStorageSetupOpen] = useState(false);
+  const pendingResourceUploadsRef = useRef<PendingResourceUpload[]>([]);
+  const uploadProbeEpochRef = useRef(0);
+  const uploadAttemptIdRef = useRef(0);
+  const handledUploadAttemptIdRef = useRef(0);
+  const resumePendingResourceUploadsRef = useRef(false);
+  const [toast, setToast] = useState<{
+    kind: "ok" | "err";
+    message: string;
+    resourceId?: string;
+  } | null>(null);
+  const toastTimerRef = useRef<number | null>(null);
+  const showToast = useCallback(
+    (
+      kind: "ok" | "err",
+      message: string,
+      opts?: { resourceId?: string; durationMs?: number },
+    ) => {
+      setToast({ kind, message, resourceId: opts?.resourceId });
+      if (toastTimerRef.current) window.clearTimeout(toastTimerRef.current);
+      toastTimerRef.current = window.setTimeout(
+        () => setToast(null),
+        opts?.durationMs ?? 5000,
+      );
+    },
+    [],
+  );
+  const [editorView, setEditorView] = useState<"visual" | "code">(() => {
+    try {
+      const v = localStorage.getItem("resource-editor-view");
+      if (v === "code") return "code";
+    } catch {}
+    return "visual";
+  });
+  const [showAgentScratch, setShowAgentScratch] = useState(false);
+
+  useEffect(() => {
+    setToolbarDeleteConfirmId(null);
+  }, [selectedResourceId]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const packFileInputRef = useRef<HTMLInputElement>(null);
+
+  const sharedTreeQuery = useResourceTree("shared", {
+    includeAgentScratch: showAgentScratch,
+  });
+  const personalTreeQuery = useResourceTree("personal", {
+    includeAgentScratch: showAgentScratch,
+  });
+  const workspaceTreeQuery = useResourceTree("workspace");
+  const mcpServersQuery = useMcpServers({ defer: true });
+  const builtinCapabilitiesQuery = useBuiltinCapabilities();
+  const createMcpServer = useCreateMcpServer();
+  const deleteMcpServer = useDeleteMcpServer();
+
+  const personalTree = withAgentScratchFolder(
+    showMcpServers
+      ? withMcpServersFolder(
+          personalTreeQuery.data ?? [],
+          mcpServersQuery.data?.user ?? [],
+          {
+            builtins: (builtinCapabilitiesQuery.data?.capabilities ?? []).map(
+              (capability) => ({ capability, scope: "user" as const }),
+            ),
+          },
+        )
+      : (personalTreeQuery.data ?? []),
+    { show: showAgentScratch },
+  );
+  const sharedTree = withAgentScratchFolder(
+    showMcpServers
+      ? withMcpServersFolder(
+          sharedTreeQuery.data ?? [],
+          mcpServersQuery.data?.org ?? [],
+          {
+            builtins: (builtinCapabilitiesQuery.data?.capabilities ?? []).map(
+              (capability) => ({ capability, scope: "org" as const }),
+            ),
+          },
+        )
+      : (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");
+  const hasMcpIntegrations = hasAvailableMcpIntegrations(mcpIntegrations);
+  const activeCreateMenuMode = resolveResourceCreateMenuMode(
+    activeScope,
+    canEditOrg,
+    resourceFilter,
+    hasMcpIntegrations,
+  );
+  const fileUploadStatus = useFileUploadStatus(activeCreateMenuMode === "full");
+  const fileStorageConfigured =
+    fileUploadStatus.data?.configured === true && !fileUploadStatus.isError;
+
+  const selectedMcpServer = React.useMemo(() => {
+    const parsed = selectedResourceId
+      ? parseMcpVirtualId(selectedResourceId)
+      : null;
+    if (!parsed) return null;
+    const list =
+      parsed.scope === "user"
+        ? (mcpServersQuery.data?.user ?? [])
+        : (mcpServersQuery.data?.org ?? []);
+    return list.find((s) => s.id === parsed.serverId) ?? null;
+  }, [selectedResourceId, mcpServersQuery.data]);
+
+  const selectedBuiltinCapability = React.useMemo(() => {
+    const parsed = selectedResourceId
+      ? parseMcpBuiltinVirtualId(selectedResourceId)
+      : null;
+    if (!parsed) return null;
+    const capability = (builtinCapabilitiesQuery.data?.capabilities ?? []).find(
+      (item) => item.id === parsed.capabilityId,
+    );
+    return capability ? { capability, scope: parsed.scope } : null;
+  }, [selectedResourceId, builtinCapabilitiesQuery.data]);
+
+  useEffect(() => {
+    if (!requestedScope && !canEditOrg && activeScope === "shared") {
+      setActiveScope("personal");
+    }
+  }, [canEditOrg, activeScope, requestedScope]);
+
+  useEffect(() => {
+    if (!requestedScope) return;
+    setActiveScope(requestedScope);
+  }, [requestedScope]);
+  const resourceQuery = useResource(
+    selectedResourceId &&
+      !parseMcpVirtualId(selectedResourceId) &&
+      !parseMcpBuiltinVirtualId(selectedResourceId)
+      ? selectedResourceId
+      : null,
+  );
+  const createResource = useCreateResource();
+  const updateResource = useUpdateResource();
+  const deleteResource = useDeleteResource();
+  const exportResourcePack = useExportResourcePack();
+  const importResourcePack = useImportResourcePack();
+  const { mutate: uploadResourceFile } = useUploadResource();
+  const processResourceUploads = useCallback(
+    (
+      uploads: PendingResourceUpload[],
+      storageConfigured: boolean,
+      showStoragePrompt: boolean,
+    ) => {
+      const needsStorage: PendingResourceUpload[] = [];
+      for (const upload of uploads) {
+        if (!canUploadResourceFile(upload.file.type, storageConfigured)) {
+          needsStorage.push(upload);
+          continue;
+        }
+        const formData = new FormData();
+        formData.append("file", upload.file);
+        formData.append(
+          "shared",
+          upload.targetScope === "shared" ? "true" : "false",
+        );
+        uploadResourceFile(formData);
+      }
+      if (needsStorage.length) {
+        pendingResourceUploadsRef.current = mergePendingResourceUploads(
+          pendingResourceUploadsRef.current,
+          needsStorage,
+        );
+        if (showStoragePrompt) setFileStorageSetupOpen(true);
+      }
+    },
+    [uploadResourceFile],
+  );
+  useEffect(() => {
+    const resumePendingUploads = () => {
+      resumePendingResourceUploadsRef.current = true;
+    };
+    window.addEventListener(
+      "agent-engine:configured-changed",
+      resumePendingUploads,
+    );
+    return () =>
+      window.removeEventListener(
+        "agent-engine:configured-changed",
+        resumePendingUploads,
+      );
+  }, []);
+  useEffect(() => {
+    if (
+      !fileUploadStatus.isSuccess ||
+      !resumePendingResourceUploadsRef.current
+    ) {
+      return;
+    }
+    resumePendingResourceUploadsRef.current = false;
+    setFileStorageSetupOpen(false);
+    const pending = takePendingResourceUploads(
+      pendingResourceUploadsRef.current,
+      fileUploadStatus,
+    );
+    if (pending) {
+      handledUploadAttemptIdRef.current = uploadAttemptIdRef.current;
+      processResourceUploads(pending.uploads, pending.storageConfigured, true);
+    }
+  }, [
+    fileStorageConfigured,
+    fileUploadStatus.data,
+    fileUploadStatus.isError,
+    fileUploadStatus.isSuccess,
+    processResourceUploads,
+  ]);
+  const selectedResourceReadOnly =
+    !!resourceQuery.data &&
+    ((isWorkspaceResourceOwner(resourceQuery.data.owner) &&
+      !isLocalWorkspaceResource(resourceQuery.data)) ||
+      (isOrganizationResourceOwner(resourceQuery.data.owner) && !canEditOrg));
+
+  const seededRef = useRef(false);
+  useEffect(() => {
+    if (seededRef.current || !canEditOrg) return;
+    seededRef.current = true;
+    fetch(agentNativePath("/_agent-native/resources"), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        path: "AGENTS.md",
+        content: DEFAULT_AGENTS_MD_CLIENT,
+        shared: true,
+        ifNotExists: true,
+      }),
+    }).catch(() => {});
+  }, [canEditOrg]);
+
+  const isEditing = selectedResourceId !== null;
+
+  const handleSelect = useCallback((resource: ResourceMeta) => {
+    setSelectedResourceId(resource.id);
+  }, []);
+
+  useEffect(() => {
+    if (!openResourceRef) return;
+    openResourceRef.current = (id: string) => setSelectedResourceId(id);
+    return () => {
+      openResourceRef.current = null;
+    };
+  }, [openResourceRef]);
+
+  useEffect(() => {
+    onEditingChange?.(isEditing);
+  }, [isEditing, onEditingChange]);
+
+  const handleBack = useCallback(() => {
+    setSelectedResourceId(null);
+  }, []);
+
+  const handleCreateFile = useCallback(
+    (parentPath: string, name: string, scope: ResourceScope) => {
+      const normalizedName = normalizeResourceFileName(name);
+      if (!normalizedName) return;
+      const path = parentPath
+        ? `${parentPath}/${normalizedName}`
+        : normalizedName;
+      createResource.mutate(
+        { path, content: "", shared: scope === "shared" },
+        {
+          onSuccess: (data) => {
+            setSelectedResourceId(data.id);
+          },
+        },
+      );
+    },
+    [createResource],
+  );
+
+  const handleCreateFolder = useCallback(
+    (parentPath: string, name: string, scope: ResourceScope) => {
+      const path = parentPath ? `${parentPath}/${name}/.keep` : `${name}/.keep`;
+      createResource.mutate({ path, content: "", shared: scope === "shared" });
+    },
+    [createResource],
+  );
+
+  const handleCreateFromToolbar = useCallback(
+    (targetScope: ResourceScope, name: string) => {
+      const normalizedName = normalizeResourceFileName(name);
+      if (!normalizedName) return;
+      createResource.mutate(
+        {
+          path: normalizedName,
+          content: "",
+          shared: targetScope === "shared",
+        },
+        {
+          onSuccess: (data) => {
+            setSelectedResourceId(data.id);
+          },
+        },
+      );
+    },
+    [createResource],
+  );
+
+  const handleCreateResourceFromToolbar = useCallback(
+    (
+      targetScope: ResourceScope,
+      path: string,
+      content: string,
+      mimeType?: string,
+      opts?: {
+        onSuccess?: (resource: ResourceMeta) => void;
+        onError?: (err: unknown) => void;
+      },
+    ) => {
+      createResource.mutate(
+        { path, content, mimeType, shared: targetScope === "shared" },
+        {
+          onSuccess: (data) => {
+            setSelectedResourceId(data.id);
+            opts?.onSuccess?.(data);
+          },
+          onError: (err) => {
+            opts?.onError?.(err);
+          },
+        },
+      );
+    },
+    [createResource],
+  );
+
+  const handleDelete = useCallback(
+    (id: string) => {
+      const mcp = parseMcpVirtualId(id);
+      if (mcp) {
+        deleteMcpServer.mutate(
+          { id: mcp.serverId, scope: mcp.scope },
+          {
+            onSuccess: () => {
+              if (selectedResourceId === id) setSelectedResourceId(null);
+            },
+          },
+        );
+        return;
+      }
+      if (parseMcpBuiltinVirtualId(id)) return;
+      deleteResource.mutate(id);
+      if (selectedResourceId === id) {
+        setSelectedResourceId(null);
+      }
+    },
+    [deleteResource, deleteMcpServer, selectedResourceId],
+  );
+
+  const handleCreateMcpServer = useCallback(
+    async (args: {
+      scope: McpServerScope;
+      name: string;
+      url: string;
+      headers?: Record<string, string>;
+      description?: string;
+    }) => {
+      const server = await createMcpServer.mutateAsync(args);
+      setSelectedResourceId(`mcp:${args.scope}:${server.id}`);
+    },
+    [createMcpServer],
+  );
+
+  const handleRename = useCallback(
+    (id: string, newPath: string) => {
+      updateResource.mutate({ id, path: newPath });
+    },
+    [updateResource],
+  );
+
+  const handleSave = useCallback(
+    (content: string) => {
+      if (!selectedResourceId) return;
+      if (selectedResourceReadOnly) return;
+      updateResource.mutate({ id: selectedResourceId, content });
+    },
+    [updateResource, selectedResourceId, selectedResourceReadOnly],
+  );
+
+  const handleUploadFiles = useCallback(
+    (files: FileList, targetScope: ResourceScope) => {
+      const attemptId = ++uploadAttemptIdRef.current;
+      const selected = Array.from(files, (file) => ({
+        file,
+        targetScope,
+        attemptId,
+      }));
+      pendingResourceUploadsRef.current = mergePendingResourceUploads(
+        pendingResourceUploadsRef.current,
+        selected,
+      );
+      const probeEpoch = uploadProbeEpochRef.current;
+      const processAttempt = (result: ResourceUploadStatusResult) => {
+        if (
+          probeEpoch !== uploadProbeEpochRef.current ||
+          attemptId <= handledUploadAttemptIdRef.current
+        ) {
+          return;
+        }
+        const pending = takePendingResourceUploads(
+          pendingResourceUploadsRef.current,
+          result,
+          attemptId,
+        );
+        if (!pending) {
+          setFileStorageSetupOpen(true);
+          return;
+        }
+        handledUploadAttemptIdRef.current = attemptId;
+        if (pending.storageConfigured) setFileStorageSetupOpen(false);
+        processResourceUploads(
+          pending.uploads,
+          pending.storageConfigured,
+          true,
+        );
+      };
+      if (fileUploadStatus.data && !fileUploadStatus.isError) {
+        processAttempt(fileUploadStatus);
+        return;
+      }
+      void fileUploadStatus
+        .refetch()
+        .then(processAttempt)
+        .catch(() => {
+          if (
+            probeEpoch !== uploadProbeEpochRef.current ||
+            attemptId <= handledUploadAttemptIdRef.current
+          ) {
+            return;
+          }
+          setFileStorageSetupOpen(true);
+        });
+    },
+    [fileUploadStatus, processResourceUploads],
+  );
+
+  const handleExportPack = useCallback(async () => {
+    try {
+      const prefix = resourcePackPrefixForView(resourceFilter);
+      const result = (await exportResourcePack.mutateAsync({
+        scope: resourcePackScopeFromPanel(activeScope),
+        ...(prefix ? { prefix } : {}),
+      })) as { pack?: { exportedAt?: number } };
+      downloadResourcePackJson(
+        result.pack,
+        resourcePackDownloadFilename(result.pack?.exportedAt),
+      );
+      showToast("ok", t("agentResources.exportPackSuccess"));
+    } catch (err) {
+      showToast(
+        "err",
+        actionErrorMessage(err) ?? t("agentResources.exportPackFailed"),
+      );
+    }
+  }, [activeScope, exportResourcePack, resourceFilter, showToast, t]);
+
+  const handleImportPackFile = useCallback(
+    async (file: File) => {
+      if (file.size > RESOURCE_PACK_MAX_BODY_BYTES) {
+        showToast("err", t("agentResources.importPackInvalid"));
+        return;
+      }
+      let pack: unknown;
+      try {
+        pack = JSON.parse(await file.text());
+      } catch {
+        showToast("err", t("agentResources.importPackInvalid"));
+        return;
+      }
+      try {
+        const result = (await importResourcePack.mutateAsync({ pack })) as {
+          imported?: number;
+          skipped?: number;
+          errors?: Array<{ path?: string; error?: string }>;
+        };
+        const toast = resourcePackImportToast(result, t);
+        showToast(
+          toast.kind,
+          toast.message,
+          toast.kind === "err" ? { durationMs: 12_000 } : undefined,
+        );
+      } catch (err) {
+        showToast(
+          "err",
+          actionErrorMessage(err) ?? t("agentResources.importPackFailed"),
+        );
+      }
+    },
+    [importResourcePack, showToast, t],
+  );
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragOver(false);
+      if (settingsGroups || activeCreateMenuMode !== "full") return;
+      if (e.dataTransfer.files.length > 0) {
+        handleUploadFiles(e.dataTransfer.files, activeScope);
+      }
+    },
+    [activeCreateMenuMode, activeScope, handleUploadFiles, settingsGroups],
+  );
+
+  const renderScopeCreateMenu = (targetScope: ResourceScope) => {
+    const mode = resolveResourceCreateMenuMode(
+      targetScope,
+      canEditOrg,
+      resourceFilter,
+      hasMcpIntegrations,
+    );
+    if (!shouldRenderResourceSectionCreateMenu(mode, resourceFilter)) {
+      return null;
+    }
+    return (
+      <CreateMenu
+        scope={targetScope}
+        resourceFilter={resourceFilter}
+        personalMcpOnly={mode === "personal-mcp"}
+        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: ResourceScope) => {
+    const mode = resolveResourceCreateMenuMode(
+      targetScope,
+      canEditOrg,
+      resourceFilter,
+      hasMcpIntegrations,
+    );
+    if (mode === "hidden") return null;
+
+    const label = resourceFilter
+      ? EMPTY_RESOURCE_ACTION_LABELS[resourceFilter]
+      : "Add resource";
+
+    if (
+      mode === "personal-mcp" ||
+      !resourceFilter ||
+      resourceFilter === "files" ||
+      resourceFilter === "agents" ||
+      resourceFilter === "skills"
+    ) {
+      return (
+        <CreateMenu
+          scope={targetScope}
+          resourceFilter={resourceFilter}
+          personalMcpOnly={mode === "personal-mcp"}
+          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={
+            mode === "personal-mcp" ? t("mcpIntegrations.menuLabel") : 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(
+        "relative flex h-full flex-col min-h-0",
+        dragOver && !settingsGroups && "ring-2 ring-inset ring-accent",
+      )}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <FileStorageSetupPopover
+        open={fileStorageSetupOpen}
+        onOpenChange={(open, reason) => {
+          setFileStorageSetupOpen(open);
+          if (!open && reason === "setup") {
+            uploadProbeEpochRef.current += 1;
+            resumePendingResourceUploadsRef.current = false;
+          }
+          if (shouldClearPendingResourceUploads(open, reason)) {
+            uploadProbeEpochRef.current += 1;
+            resumePendingResourceUploadsRef.current = false;
+            pendingResourceUploadsRef.current = [];
+          }
+        }}
+        onConnected={() => {
+          resumePendingResourceUploadsRef.current = true;
+          void fileUploadStatus.refetch();
+        }}
+        {...(!fileUploadStatus.isSuccess || fileUploadStatus.isError
+          ? {
+              status: "unavailable" as const,
+              onRetry: () => {
+                resumePendingResourceUploadsRef.current = true;
+                void fileUploadStatus.refetch();
+              },
+            }
+          : { status: "missing" as const })}
+      />
+      {/* Toolbar */}
+      {isEditing ? (
+        <div className="flex shrink-0 items-center justify-between border-b border-border px-2 py-1.5">
+          <div className="flex items-center gap-1.5 min-w-0">
+            <TooltipProvider delayDuration={200}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    onClick={handleBack}
+                    aria-label={t("agentResources.backToResources")}
+                    className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50"
+                  >
+                    <IconArrowLeft className="h-3.5 w-3.5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {t("agentResources.backToResources")}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            {selectedMcpServer ? (
+              <PathBreadcrumb
+                path={`mcp-servers/${selectedMcpServer.name}.json`}
+              />
+            ) : selectedBuiltinCapability ? (
+              <PathBreadcrumb
+                path={`mcp-servers/${selectedBuiltinCapability.capability.name}.json`}
+              />
+            ) : resourceQuery.data ? (
+              <PathBreadcrumb path={resourceQuery.data.path} />
+            ) : null}
+          </div>
+          <div className="flex items-center gap-1 shrink-0">
+            {!selectedMcpServer &&
+              resourceQuery.data &&
+              selectedResourceReadOnly && (
+                <span
+                  aria-live="polite"
+                  className="mr-1 w-16 text-right text-[11px] text-muted-foreground/60"
+                >
+                  Read only
+                </span>
+              )}
+            {!selectedMcpServer &&
+              resourceQuery.data &&
+              (resourceQuery.data.mimeType === "text/markdown" ||
+                resourceQuery.data.path.endsWith(".md")) && (
+                <div className="flex items-center gap-0.5 mr-1">
+                  <TooltipProvider delayDuration={200}>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          onClick={() => setEditorView("visual")}
+                          aria-label="Visual editor"
+                          className={cn(
+                            "flex h-6 w-6 items-center justify-center rounded-md",
+                            editorView === "visual"
+                              ? "bg-accent text-foreground"
+                              : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                          )}
+                        >
+                          <IconEye className="h-3.5 w-3.5" />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>Visual editor</TooltipContent>
+                    </Tooltip>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          onClick={() => setEditorView("code")}
+                          aria-label="Code editor"
+                          className={cn(
+                            "flex h-6 w-6 items-center justify-center rounded-md",
+                            editorView === "code"
+                              ? "bg-accent text-foreground"
+                              : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                          )}
+                        >
+                          <IconCode className="h-3.5 w-3.5" />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>Code editor</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+              )}
+            {!selectedMcpServer &&
+              resourceQuery.data &&
+              (resourceQuery.data.mimeType.startsWith("text/") ||
+                resourceQuery.data.mimeType === "application/json") && (
+                <TooltipProvider delayDuration={200}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <a
+                        href={resourceDownloadUrl(resourceQuery.data.id)}
+                        aria-label="Download resource"
+                        className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50"
+                      >
+                        <IconDownload className="h-3.5 w-3.5" />
+                      </a>
+                    </TooltipTrigger>
+                    <TooltipContent>Download resource</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+            {!selectedBuiltinCapability && !selectedResourceReadOnly && (
+              <TooltipProvider delayDuration={200}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      onClick={() => {
+                        if (!selectedResourceId) return;
+                        if (toolbarDeleteConfirmId === selectedResourceId) {
+                          handleDelete(selectedResourceId);
+                          setToolbarDeleteConfirmId(null);
+                        } else {
+                          setToolbarDeleteConfirmId(selectedResourceId);
+                        }
+                      }}
+                      aria-label={
+                        toolbarDeleteConfirmId === selectedResourceId
+                          ? "Confirm delete resource"
+                          : "Delete resource"
+                      }
+                      className={cn(
+                        "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-accent/50",
+                        toolbarDeleteConfirmId === selectedResourceId &&
+                          "bg-destructive/10 text-destructive",
+                      )}
+                    >
+                      <IconTrash className="h-3.5 w-3.5" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {toolbarDeleteConfirmId === selectedResourceId
+                      ? "Click again to delete"
+                      : "Delete resource"}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+          </div>
+        </div>
+      ) : settingsGroups ? null : (
+        <div className="absolute end-3 top-3 z-10 flex items-center gap-1">
+          <TooltipProvider delayDuration={200}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => void handleExportPack()}
+                  disabled={exportResourcePack.isPending}
+                  aria-label={t("agentResources.exportPack")}
+                  className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50"
+                >
+                  <IconPackageExport className="h-3.5 w-3.5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>{t("agentResources.exportPack")}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <TooltipProvider delayDuration={200}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => packFileInputRef.current?.click()}
+                  disabled={importResourcePack.isPending}
+                  aria-label={t("agentResources.importPack")}
+                  className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50"
+                >
+                  <IconFileImport className="h-3.5 w-3.5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>{t("agentResources.importPack")}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          {activeCreateMenuMode !== "hidden" &&
+            (!resourceFilter || resourceFilter === "files") && (
+              <CreateMenu
+                scope={activeScope}
+                resourceFilter={resourceFilter}
+                personalMcpOnly={activeCreateMenuMode === "personal-mcp"}
+                onCreateFile={(name) =>
+                  handleCreateFromToolbar(activeScope, name)
+                }
+                onCreateResource={(path, content, mimeType, opts) =>
+                  handleCreateResourceFromToolbar(
+                    activeScope,
+                    path,
+                    content,
+                    mimeType,
+                    opts,
+                  )
+                }
+                onCreateMcpServer={handleCreateMcpServer}
+                canCreateOrgMcp={canCreateOrgMcp}
+                hasOrg={hasOrgForMcp}
+                showToast={showToast}
+                mcpIntegrations={mcpIntegrations}
+              />
+            )}
+          {(!resourceFilter || resourceFilter === "files") && (
+            <>
+              {activeCreateMenuMode === "full" && (
+                <TooltipProvider delayDuration={200}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <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"
+                      >
+                        <IconUpload className="h-3.5 w-3.5" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>Upload file</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+              <TooltipProvider delayDuration={200}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <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",
+                      )}
+                    >
+                      <IconEye className="h-3.5 w-3.5" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {showAgentScratch
+                      ? "Hide agent scratch files"
+                      : "Show agent scratch files"}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </>
+          )}
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            className="hidden"
+            onChange={(e) => {
+              if (e.target.files && e.target.files.length > 0) {
+                handleUploadFiles(e.target.files, activeScope);
+                e.target.value = "";
+              }
+            }}
+          />
+          <input
+            ref={packFileInputRef}
+            type="file"
+            accept="application/json,.json"
+            className="hidden"
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              if (file) void handleImportPackFile(file);
+              e.target.value = "";
+            }}
+          />
+        </div>
+      )}
+
+      {/* Content: either tree OR editor (single view) */}
+      <div className="flex flex-1 flex-col min-h-0 overflow-hidden">
+        {isEditing ? (
+          selectedMcpServer ? (
+            <div className="flex-1 min-h-0 overflow-hidden">
+              <McpServerDetail server={selectedMcpServer} />
+            </div>
+          ) : selectedBuiltinCapability ? (
+            <div className="flex-1 min-h-0 overflow-hidden">
+              <BuiltinCapabilityDetail
+                capability={selectedBuiltinCapability.capability}
+                scope={selectedBuiltinCapability.scope}
+                canEditOrg={canEditOrg}
+              />
+            </div>
+          ) : selectedResourceId && resourceQuery.data ? (
+            <div className="flex flex-1 min-h-0 flex-col overflow-hidden">
+              <ResourceEditor
+                resource={resourceQuery.data}
+                onSave={handleSave}
+                view={editorView}
+                onViewChange={setEditorView}
+                hideToolbar
+                readOnly={selectedResourceReadOnly}
+              />
+            </div>
+          ) : resourceQuery.isError ? (
+            <div className="flex flex-1 items-center justify-center text-[12px] text-destructive/70">
+              Failed to load resource
+            </div>
+          ) : (
+            <div className="flex flex-1 items-center justify-center text-[12px] text-muted-foreground/50">
+              Loading...
+            </div>
+          )
+        ) : settingsGroups ? (
+          <ResourceSettingsGroups
+            groups={settingsGroups}
+            trees={{
+              personal: {
+                nodes: personalTree,
+                isLoading: personalTreeQuery.isLoading,
+                isError: personalTreeQuery.isError,
+                retry: () => void personalTreeQuery.refetch(),
+              },
+              shared: {
+                nodes: sharedTree,
+                isLoading: sharedTreeQuery.isLoading,
+                isError: sharedTreeQuery.isError,
+                retry: () => void sharedTreeQuery.refetch(),
+              },
+              workspace: {
+                nodes: workspaceTree,
+                isLoading: workspaceTreeQuery.isLoading,
+                isError: workspaceTreeQuery.isError,
+                retry: () => void workspaceTreeQuery.refetch(),
+              },
+            }}
+            canEditOrg={canEditOrg}
+            orgName={org?.orgName ?? null}
+            deletingId={
+              deleteResource.isPending
+                ? (deleteResource.variables as string)
+                : null
+            }
+            onOpen={handleSelect}
+            onRemove={(resource) => deleteResource.mutateAsync(resource.id)}
+          />
+        ) : (
+          <div className="flex-1 min-h-0 overflow-y-auto">
+            {visibleWorkspaceTree.length > 0 && (
+              <ResourceTree
+                tree={visibleWorkspaceTree}
+                variant={resourceTreeVariant}
+                isLoading={workspaceTreeQuery.isLoading}
+                deletingId={
+                  deleteResource.isPending
+                    ? (deleteResource.variables as string)
+                    : deleteMcpServer.isPending
+                      ? `mcp:${(deleteMcpServer.variables as { scope: string }).scope}:${(deleteMcpServer.variables as { id: string }).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
+                headingHint="Inherited"
+              />
+            )}
+            {showPersonalTree && (
+              <div className="pt-3">
+                <ResourceTree
+                  tree={displayedPersonalTree}
+                  variant={resourceTreeVariant}
+                  isLoading={personalTreeQuery.isLoading}
+                  deletingId={
+                    deleteResource.isPending
+                      ? (deleteResource.variables as string)
+                      : deleteMcpServer.isPending
+                        ? `mcp:${(deleteMcpServer.variables as { scope: string }).scope}:${(deleteMcpServer.variables as { id: string }).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")}
+                  emptyStateAction={renderEmptyStateAction("personal")}
+                  emptyStateTitle={
+                    resourceFilter === "files" ? "No files yet" : undefined
+                  }
+                  emptyStateDescription={
+                    resourceFilter === "files"
+                      ? "Add a file to give your agent more context."
+                      : undefined
+                  }
+                />
+              </div>
+            )}
+            {showSharedTree && (
+              <div className="pt-3">
+                <ResourceTree
+                  tree={displayedSharedTree}
+                  variant={resourceTreeVariant}
+                  isLoading={sharedTreeQuery.isLoading}
+                  deletingId={
+                    deleteResource.isPending
+                      ? (deleteResource.variables as string)
+                      : deleteMcpServer.isPending
+                        ? `mcp:${(deleteMcpServer.variables as { scope: string }).scope}:${(deleteMcpServer.variables as { id: string }).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")}
+                  emptyStateAction={renderEmptyStateAction("shared")}
+                  emptyStateTitle={
+                    resourceFilter === "files" ? "No files yet" : undefined
+                  }
+                  emptyStateDescription={
+                    resourceFilter === "files"
+                      ? "Add a file to give your agent more context."
+                      : undefined
+                  }
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+      {toast && (
+        <div className="pointer-events-none absolute bottom-3 left-1/2 z-[300] -translate-x-1/2">
+          <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",
+            )}
+          >
+            <span className="min-w-0 flex-1 truncate">{toast.message}</span>
+            {toast.kind === "ok" && toast.resourceId && (
+              <button
+                type="button"
+                onClick={() => {
+                  setSelectedResourceId(toast.resourceId!);
+                  setToast(null);
+                }}
+                className="shrink-0 rounded px-1.5 py-0.5 text-[11px] font-medium underline-offset-2 hover:underline"
+              >
+                View
+              </button>
+            )}
+            <button
+              type="button"
+              aria-label="Dismiss"
+              onClick={() => setToast(null)}
+              className="shrink-0 text-current/60 hover:text-current"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}