@ai-matrx/chat 0.1.74 → 0.2.0

package/dist/agents/components/shared/AgentOptionsMenu.js

@@ -0,0 +1,826 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useAppDispatch, useAppSelector } from "../../../store/hooks.js";
+import { applyOrganizationContextHeader } from "../../../host/server/organization-context.js";
+import { getBuilderDoor, requireBuilderDoor } from "../../../host/builder-door.js";
+import { invalidateAgentCache } from "../../redux/agent-definition/invalidate-agent-cache.thunk.js";
+import { selectAgentById } from "../../redux/agent-definition/selectors.js";
+import { useOpenAgentSettingsWindow } from "../../../host/window-openers.js";
+import { useOpenAgentRunHistoryWindow } from "../../../host/window-openers.js";
+import { useOpenAgentContentWindow } from "../../../host/window-openers.js";
+import { useOpenAgentRunWindow } from "../../../host/window-openers.js";
+import { useOpenAgentOptimizerWindow } from "../../../host/window-openers.js";
+import { useOpenAgentFindUsagesWindow } from "../../../host/window-openers.js";
+import { useOpenAgentCreateAppWindow } from "../../../host/window-openers.js";
+import { useOpenAgentDataStorageWindow } from "../../../host/window-openers.js";
+import { useOpenAgentConvertSystemWindow } from "../../../host/window-openers.js";
+import { useOpenAgentShortcutQuickCreateWindow } from "../../../host/window-openers.js";
+import { useOpenAgentAdminFindUsagesWindow } from "../../../host/window-openers.js";
+import { useOpenAgentImportWindow } from "../../../host/window-openers.js";
+import { useOpenAgentInterfaceVariationsWindow } from "../../../host/window-openers.js";
+import { useOpenSaveTemplateDialog } from "../../../host/window-openers.js";
+const SAVE_AS_TEMPLATE_LABEL = "Save as template";
+import { useCallback, useState } from "react";
+import { usePathname, Link } from "../../../host/navigation.js";
+import {
+  MoreHorizontal,
+  FileText,
+  History,
+  GitBranch,
+  SlidersHorizontal,
+  Atom,
+  Maximize2,
+  Play,
+  Copy,
+  AppWindow,
+  Database,
+  Layers,
+  ChevronRight,
+  Shield,
+  RefreshCw,
+  Link2,
+  Search,
+  Upload,
+  ExternalLink,
+  FileChartColumn,
+  RotateCcw,
+  Archive,
+  ArchiveRestore,
+  Trash2,
+  PackagePlus
+} from "lucide-react";
+import { toast } from "../../../host/notify.js";
+import { cn } from "@ai-matrx/design-system";
+import { useIsMobile } from "@ai-matrx/kit/media-query";
+import { TapTargetButtonTransparent } from "@ai-matrx/tap-target";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuLabel
+} from "@ai-matrx/design-system";
+import { Drawer, DrawerContent, DrawerTitle } from "@ai-matrx/design-system";
+import { MenuTapButton } from "@ai-matrx/tap-target/buttons";
+import {
+  AgentDuplicateOutcomeDialog
+} from "./AgentDuplicateOutcomeDialog.js";
+import { ReferenceCopyMenuItem } from "../../../host/ui-slots.js";
+import {
+  isAdminSystemAgentsContext
+} from "./agent-route-context.js";
+import { useAgentLifecycleActions } from "../../lifecycle/useAgentLifecycleActions.js";
+import { getUserMessage } from "@ai-matrx/agents/matrx";
+import { selectIsSuperAdmin } from "../../../host/identity.js";
+import { selectOrganizationId, isOrganizationSelectionCancelled } from "../../../host/org.js";
+import { Button, Tile } from "@ai-matrx/design-system/controls";
+const INTERFACE_VARIATIONS = [
+  "Full Modal",
+  "Compact Modal",
+  "Inline",
+  "Sidebar",
+  "Flexible Panel",
+  "Background",
+  "Toast",
+  "Direct",
+  "Background Process"
+];
+const THIS_AGENT_ITEMS = [
+  { label: "Edit Agent Info", icon: FileText },
+  { label: "View Run History", icon: History },
+  { label: "Advanced Settings View", icon: SlidersHorizontal },
+  { label: "View All Versions", icon: GitBranch },
+  { label: "Open Run Modal", icon: Play },
+  { label: "Full Screen Editor", icon: Maximize2, soon: true },
+  { label: "Matrx Agent Optimizer", icon: Atom },
+  { label: "Find Usages", icon: Search },
+  { label: "Drift Report", icon: FileChartColumn },
+  { label: "Refresh Server Cache", icon: RotateCcw }
+];
+const AGENT_MANAGEMENT_ITEMS = [
+  { label: "Create Shortcut", icon: Link2 },
+  { label: "Duplicate", icon: Copy },
+  // Unified link surface (user agent ⇄ system agent): create/open my personal
+  // copy, pull system updates, push to system, or convert a user agent into a
+  // new system agent. Valid on both user and builtin agents — the window
+  // resolves the relationship and gates each action.
+  { label: "Linked Agent Sync", icon: RefreshCw },
+  { label: "Convert to Template", icon: Shield },
+  { label: "Create App", icon: AppWindow },
+  { label: "Add Data Storage Support", icon: Database },
+  // Share this agent + the tables its variables read (+ the agents that share
+  // them) as a template for the organization. The dialog says so plainly
+  // when the agent reads no tables yet.
+  { label: SAVE_AS_TEMPLATE_LABEL, icon: PackagePlus }
+];
+const GLOBAL_AGENT_ITEMS = [
+  { label: "Import Agent", icon: Upload }
+];
+const NEW_TAB_ITEMS = [
+  {
+    label: "Open in Chat",
+    icon: ExternalLink,
+    getHref: (id) => `/chat/a/${encodeURIComponent(id)}`
+  },
+  {
+    label: "View Agent",
+    icon: ExternalLink,
+    getHref: (id, base) => `${base}/${id}`
+  },
+  {
+    label: "Build Agent",
+    icon: ExternalLink,
+    getHref: (id, base) => `${base}/${id}/build`
+  },
+  {
+    label: "Run Agent",
+    icon: ExternalLink,
+    getHref: (id, base) => `${base}/${id}/run`
+  },
+  {
+    label: "View Versions",
+    icon: ExternalLink,
+    getHref: (id, base) => `${base}/${id}/latest`
+  }
+];
+const ADMIN_ITEMS = [
+  { label: "Find Usages (Admin)", icon: Search }
+];
+function comingSoon() {
+  toast.info("Coming Soon");
+}
+function SoonBadge() {
+  return /* @__PURE__ */ jsx("span", { className: "ml-2 text-[10px] font-medium text-muted-foreground/60 bg-muted rounded px-1 py-0.5 leading-none", children: "soon" });
+}
+async function convertToTemplate(agentId, organizationId) {
+  const response = await fetch(`/api/agents/${agentId}/convert-to-template`, {
+    method: "POST",
+    // The template is filed in the organization the person selected — the
+    // route refuses without it rather than filing in a own organization.
+    headers: applyOrganizationContextHeader({}, organizationId)
+  });
+  if (!response.ok) {
+    const data2 = await response.json().catch(() => ({ error: "Unknown error" }));
+    throw new Error(
+      data2.details ? `${data2.error}: ${data2.details}` : data2.error || "Failed"
+    );
+  }
+  const data = await response.json();
+  toast.success(data.message ?? "Saved as template!");
+}
+function AgentOptionsMenu({
+  agentId,
+  asTapTarget,
+  basePath = "/agents"
+}) {
+  const isMobile = useIsMobile();
+  const [open, setOpen] = useState(false);
+  const [isConverting, setIsConverting] = useState(false);
+  const [isRefreshingCache, setIsRefreshingCache] = useState(false);
+  const dispatch = useAppDispatch();
+  const pathname = usePathname();
+  const openSettings = useOpenAgentSettingsWindow();
+  const openRunHistory = useOpenAgentRunHistoryWindow();
+  const openAdvancedEditor = useOpenAgentContentWindow();
+  const openRun = useOpenAgentRunWindow();
+  const openOptimizer = useOpenAgentOptimizerWindow();
+  const openFindUsages = useOpenAgentFindUsagesWindow();
+  const openCreateApp = useOpenAgentCreateAppWindow();
+  const openDataStorage = useOpenAgentDataStorageWindow();
+  const openConvertSystem = useOpenAgentConvertSystemWindow();
+  const openShortcut = useOpenAgentShortcutQuickCreateWindow();
+  const openSaveTemplate = useOpenSaveTemplateDialog();
+  const openAdminFindUsages = useOpenAgentAdminFindUsagesWindow();
+  const openImport = useOpenAgentImportWindow();
+  const openInterfaceVariations = useOpenAgentInterfaceVariationsWindow();
+  const [duplicateOpen, setDuplicateOpen] = useState(false);
+  const [duplicateState, setDuplicateState] = useState("loading");
+  const [duplicatedAgentId, setDuplicatedAgentId] = useState(
+    null
+  );
+  const [duplicatedAgentName, setDuplicatedAgentName] = useState("");
+  const [duplicateError, setDuplicateError] = useState("");
+  const [duplicateAsSystem, setDuplicateAsSystem] = useState(false);
+  const agent = useAppSelector((state) => selectAgentById(state, agentId));
+  const isBuiltin = agent?.agentType === "builtin";
+  const isAdminContext = isAdminSystemAgentsContext(basePath);
+  const newAgentPath = duplicatedAgentId ? (() => {
+    const sourceSegment = `${basePath}/${agentId}`;
+    const suffix = pathname && pathname.startsWith(sourceSegment) ? pathname.slice(sourceSegment.length) : "";
+    return `${basePath}/${duplicatedAgentId}${suffix}`;
+  })() : null;
+  const runDuplicate = useCallback(async () => {
+    const asSystem = isAdminContext && isBuiltin;
+    setDuplicateAsSystem(asSystem);
+    setDuplicatedAgentId(null);
+    setDuplicatedAgentName(agent?.name ? `Copy of ${agent.name}` : "");
+    setDuplicateError("");
+    setDuplicateState("loading");
+    setDuplicateOpen(true);
+    try {
+      const newId = await dispatch(
+        requireBuilderDoor().duplicateAgent({ agentId, asSystem })
+      ).unwrap();
+      setDuplicatedAgentId(newId);
+      setDuplicateState("success");
+    } catch (err) {
+      if (isOrganizationSelectionCancelled(err)) {
+        setDuplicateOpen(false);
+        return;
+      }
+      setDuplicateError(getUserMessage(err));
+      setDuplicateState("error");
+    }
+  }, [agent?.name, agentId, dispatch, isAdminContext, isBuiltin]);
+  const hasBuilderDoor = getBuilderDoor() !== null;
+  const managementItems = AGENT_MANAGEMENT_ITEMS.filter(
+    (item) => (!isBuiltin || item.label !== "Convert to Template") && (hasBuilderDoor || item.label !== "Duplicate")
+  );
+  const isSuperAdmin = useAppSelector(selectIsSuperAdmin);
+  const lifecycle = useAgentLifecycleActions(agentId, basePath);
+  const selectedOrganizationId = useAppSelector(selectOrganizationId);
+  const adminItems = isSuperAdmin ? ADMIN_ITEMS : [];
+  const runRefreshServerCache = useCallback(async () => {
+    setIsRefreshingCache(true);
+    try {
+      const result = await dispatch(invalidateAgentCache({ agentId })).unwrap();
+      if (result.cleared) {
+        toast.success(
+          "Server cache cleared. The next run will load the latest agent definition."
+        );
+      } else {
+        toast.error("Server did not confirm cache clearance.");
+      }
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to refresh server cache."
+      );
+    } finally {
+      setIsRefreshingCache(false);
+    }
+  }, [agentId, dispatch]);
+  const handleDesktopItemClick = async (label) => {
+    console.log("[AGENT OPTIONS MENU] Clicked item:", label);
+    if (label === "Edit Agent Info") {
+      console.log(
+        "[AGENT OPTIONS MENU] Editing agent info, Agent ID:",
+        agentId
+      );
+      openSettings({ initialAgentId: agentId });
+      setOpen(false);
+    } else if (label === "View Run History") {
+      console.log(
+        "[AGENT OPTIONS MENU] Viewing run history, Agent ID:",
+        agentId
+      );
+      openRunHistory({
+        agentId: agentId ?? null,
+        initialSelectedConversationId: null
+      });
+      setOpen(false);
+    } else if (label === "Advanced Settings View") {
+      console.log(
+        "[AGENT OPTIONS MENU] Viewing advanced settings, Agent ID:",
+        agentId
+      );
+      openAdvancedEditor({
+        initialAgentId: agentId ?? null,
+        initialTab: void 0,
+        tabs: null
+      });
+      setOpen(false);
+    } else if (label === "Open Run Modal") {
+      console.log("[AGENT OPTIONS MENU] Opening run modal, Agent ID:", agentId);
+      openRun({
+        initialAgentId: agentId ?? null,
+        initialSelectedConversationId: null
+      });
+      setOpen(false);
+    } else if (label === "Matrx Agent Optimizer") {
+      console.log(
+        "[AGENT OPTIONS MENU] Opening matrx agent optimizer, Agent ID:",
+        agentId
+      );
+      openOptimizer({ agentId: agentId ?? null });
+      setOpen(false);
+    } else if (label === "Find Usages") {
+      console.log("[AGENT OPTIONS MENU] Finding usages, Agent ID:", agentId);
+      openFindUsages({ agentId: agentId ?? null });
+      setOpen(false);
+    } else if (label === "Create App") {
+      console.log("[AGENT OPTIONS MENU] Creating app, Agent ID:", agentId);
+      openCreateApp({ agentId: agentId ?? null });
+      setOpen(false);
+    } else if (label === "Add Data Storage Support") {
+      console.log(
+        "[AGENT OPTIONS MENU] Adding data storage support, Agent ID:",
+        agentId
+      );
+      openDataStorage({ agentId: agentId ?? null });
+      setOpen(false);
+    } else if (label === "Linked Agent Sync") {
+      console.log(
+        "[AGENT OPTIONS MENU] Opening linked agent sync, Agent ID:",
+        agentId
+      );
+      openConvertSystem({ agentId: agentId ?? null });
+      setOpen(false);
+    } else if (label === SAVE_AS_TEMPLATE_LABEL) {
+      openSaveTemplate({ initialAgentId: agentId ?? null });
+      setOpen(false);
+    } else if (label === "Create Shortcut") {
+      console.log("[AGENT OPTIONS MENU] Creating shortcut, Agent ID:", agentId);
+      openShortcut({ agentId: agentId ?? null });
+      setOpen(false);
+    } else if (label === "Find Usages (Admin)") {
+      console.log(
+        "[AGENT OPTIONS MENU] Finding usages (admin), Agent ID:",
+        agentId
+      );
+      openAdminFindUsages({ agentId: agentId ?? null });
+      setOpen(false);
+    } else if (label === "Import Agent") {
+      console.log("[AGENT OPTIONS MENU] Importing agent, Agent ID:", agentId);
+      openImport({});
+      setOpen(false);
+    } else if (label === "Duplicate") {
+      console.log("[AGENT OPTIONS MENU] Duplicating agent, Agent ID:", agentId);
+      setOpen(false);
+      void runDuplicate();
+    } else if (label === "Refresh Server Cache") {
+      setOpen(false);
+      void runRefreshServerCache();
+    } else if (label === "Convert to Template") {
+      console.log(
+        "[AGENT OPTIONS MENU] Converting to template, Agent ID:",
+        agentId
+      );
+      if (!selectedOrganizationId) {
+        toast.error(
+          "Select an organization from the avatar menu, then try again."
+        );
+        return;
+      }
+      setIsConverting(true);
+      try {
+        await convertToTemplate(agentId, selectedOrganizationId);
+      } catch (err) {
+        toast.error(
+          err instanceof Error ? err.message : "Failed to save as template"
+        );
+      } finally {
+        setIsConverting(false);
+        setOpen(false);
+      }
+    } else {
+      console.log(
+        "[AGENT OPTIONS MENU] Unknow Clicked Item: ",
+        label,
+        "Coming soon, Agent ID:",
+        agentId
+      );
+      comingSoon();
+    }
+  };
+  const handleInterfaceVariationClick = () => {
+    console.log(
+      "[AGENT OPTIONS MENU] Handling interface variation click, Agent ID:",
+      agentId
+    );
+    openInterfaceVariations({ agentId: agentId ?? null });
+    setOpen(false);
+  };
+  const trigger = /* @__PURE__ */ jsx(MenuTapButton, { variant: "transparent" });
+  const duplicateDialog = /* @__PURE__ */ jsx(
+    AgentDuplicateOutcomeDialog,
+    {
+      open: duplicateOpen,
+      onOpenChange: setDuplicateOpen,
+      state: duplicateState,
+      newAgentName: duplicatedAgentName,
+      newAgentPath,
+      errorMessage: duplicateError,
+      asSystem: duplicateAsSystem
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: setOpen, children: [
+        asTapTarget ? /* @__PURE__ */ jsx(
+          TapTargetButtonTransparent,
+          {
+            icon: /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-4 h-4" }),
+            ariaLabel: "Agent options",
+            onClick: () => setOpen(true)
+          }
+        ) : /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}), "aria-label": "Agent options", onClick: () => setOpen(true) }),
+        /* @__PURE__ */ jsxs(DrawerContent, { className: "max-h-[85dvh]", children: [
+          /* @__PURE__ */ jsx(DrawerTitle, { className: "sr-only", children: "Agent Options" }),
+          /* @__PURE__ */ jsx(
+            MobileMenuContent,
+            {
+              onClose: () => setOpen(false),
+              agentId,
+              basePath,
+              onTriggerDuplicate: runDuplicate,
+              onTriggerRefreshCache: runRefreshServerCache,
+              isRefreshingCache
+            }
+          )
+        ] })
+      ] }),
+      duplicateDialog
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-80", children: [
+        /* @__PURE__ */ jsx(
+          ReferenceCopyMenuItem,
+          {
+            referenceType: "agent",
+            id: agentId,
+            label: agent?.name ?? void 0,
+            toastLabel: agent?.name ?? "Agent",
+            onCopied: () => setOpen(false)
+          }
+        ),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        THIS_AGENT_ITEMS.map(({ label, icon: Icon, soon }) => {
+          if (label === "View All Versions" || label === "Drift Report") {
+            const href = label === "Drift Report" ? "/reports/agent-drift" : `${basePath}/${agentId}/latest?tab=history`;
+            return /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs(
+              Link,
+              {
+                href,
+                className: "flex items-center gap-2 cursor-pointer",
+                onClick: () => setOpen(false),
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 mr-2 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: label })
+                ]
+              }
+            ) }, label);
+          }
+          return /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              disabled: label === "Refresh Server Cache" && isRefreshingCache,
+              onClick: () => handleDesktopItemClick(label),
+              className: cn(soon && "text-muted-foreground"),
+              children: [
+                /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 mr-2 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1", children: label === "Refresh Server Cache" && isRefreshingCache ? "Refreshing..." : label }),
+                soon && /* @__PURE__ */ jsx(SoonBadge, {})
+              ]
+            },
+            label
+          );
+        }),
+        /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+            /* @__PURE__ */ jsx(Layers, { className: "w-4 h-4 mr-2 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Try Interface Variations" })
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuSubContent, { className: "w-48", children: INTERFACE_VARIATIONS.map((v) => /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onClick: handleInterfaceVariationClick,
+              children: v
+            },
+            v
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+            /* @__PURE__ */ jsx(ExternalLink, { className: "w-4 h-4 mr-2 text-muted-foreground" }),
+            "Open in New Tab"
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuSubContent, { className: "w-44", children: NEW_TAB_ITEMS.map(({ label, icon: Icon, getHref }) => /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: getHref(agentId, basePath),
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 text-muted-foreground" }),
+                label
+              ]
+            }
+          ) }, label)) })
+        ] }),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold", children: "Manage" }),
+        managementItems.map(({ label, icon: Icon, soon }) => {
+          const duplicateInFlight = duplicateOpen && duplicateState === "loading";
+          const isLoading = label === "Convert to Template" && isConverting || label === "Duplicate" && duplicateInFlight;
+          const displayLabel = label === "Convert to Template" && isConverting ? "Saving..." : label === "Duplicate" && duplicateInFlight ? "Duplicating..." : label;
+          return /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              disabled: isLoading,
+              onClick: () => handleDesktopItemClick(label),
+              className: cn(soon && "text-muted-foreground"),
+              children: [
+                /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 mr-2 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1", children: displayLabel }),
+                soon && /* @__PURE__ */ jsx(SoonBadge, {})
+              ]
+            },
+            label
+          );
+        }),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold", children: "Agents" }),
+        GLOBAL_AGENT_ITEMS.map(({ label, icon: Icon, soon }) => /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onClick: () => handleDesktopItemClick(label),
+            className: cn(soon && "text-muted-foreground"),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 mr-2 text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: label }),
+              soon && /* @__PURE__ */ jsx(SoonBadge, {})
+            ]
+          },
+          label
+        )),
+        adminItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold", children: "Admin" }),
+          adminItems.map(({ label, icon: Icon }) => /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: () => handleDesktopItemClick(label),
+              children: [
+                /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 mr-2 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1", children: label })
+              ]
+            },
+            label
+          ))
+        ] }),
+        lifecycle.available && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold", children: "Manage" }),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              disabled: lifecycle.isBusy,
+              onClick: () => {
+                setOpen(false);
+                void lifecycle.toggleArchived();
+              },
+              children: [
+                lifecycle.isArchived ? /* @__PURE__ */ jsx(ArchiveRestore, { className: "w-4 h-4 mr-2 text-muted-foreground" }) : /* @__PURE__ */ jsx(Archive, { className: "w-4 h-4 mr-2 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1", children: lifecycle.archiveLabel })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              disabled: lifecycle.isBusy,
+              onClick: () => {
+                setOpen(false);
+                void lifecycle.remove();
+              },
+              className: "text-destructive focus:text-destructive",
+              children: [
+                /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4 mr-2" }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Delete" })
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    duplicateDialog
+  ] });
+}
+function MobileMenuContent({
+  onClose,
+  agentId,
+  basePath,
+  onTriggerDuplicate,
+  onTriggerRefreshCache,
+  isRefreshingCache
+}) {
+  const [variationsOpen, setVariationsOpen] = useState(false);
+  const [isBusy, setIsBusy] = useState(false);
+  const openSettings = useOpenAgentSettingsWindow();
+  const openRunHistory = useOpenAgentRunHistoryWindow();
+  const openAdvancedEditor = useOpenAgentContentWindow();
+  const openRun = useOpenAgentRunWindow();
+  const openOptimizer = useOpenAgentOptimizerWindow();
+  const openFindUsages = useOpenAgentFindUsagesWindow();
+  const openCreateApp = useOpenAgentCreateAppWindow();
+  const openDataStorage = useOpenAgentDataStorageWindow();
+  const openConvertSystem = useOpenAgentConvertSystemWindow();
+  const openShortcut = useOpenAgentShortcutQuickCreateWindow();
+  const openSaveTemplate = useOpenSaveTemplateDialog();
+  const openAdminFindUsages = useOpenAgentAdminFindUsagesWindow();
+  const openImport = useOpenAgentImportWindow();
+  const openInterfaceVariations = useOpenAgentInterfaceVariationsWindow();
+  const agent = useAppSelector((state) => selectAgentById(state, agentId));
+  const isBuiltin = agent?.agentType === "builtin";
+  const hasBuilderDoor = getBuilderDoor() !== null;
+  const managementItems = AGENT_MANAGEMENT_ITEMS.filter(
+    (item) => (!isBuiltin || item.label !== "Convert to Template") && (hasBuilderDoor || item.label !== "Duplicate")
+  );
+  const isSuperAdmin = useAppSelector(selectIsSuperAdmin);
+  const lifecycle = useAgentLifecycleActions(agentId, basePath);
+  const selectedOrganizationId = useAppSelector(selectOrganizationId);
+  const adminItems = isSuperAdmin ? ADMIN_ITEMS : [];
+  const handleItem = async (label) => {
+    if (label === "Edit Agent Info") {
+      openSettings({ initialAgentId: agentId });
+      onClose();
+    } else if (label === "View Run History") {
+      openRunHistory({
+        agentId: agentId ?? null,
+        initialSelectedConversationId: null
+      });
+      onClose();
+    } else if (label === "Advanced Settings View") {
+      openAdvancedEditor({
+        initialAgentId: agentId ?? null,
+        initialTab: void 0,
+        tabs: null
+      });
+      onClose();
+    } else if (label === "Open Run Modal") {
+      openRun({
+        initialAgentId: agentId ?? null,
+        initialSelectedConversationId: null
+      });
+      onClose();
+    } else if (label === "Matrx Agent Optimizer") {
+      openOptimizer({ agentId: agentId ?? null });
+      onClose();
+    } else if (label === "Find Usages") {
+      openFindUsages({ agentId: agentId ?? null });
+      onClose();
+    } else if (label === "Create App") {
+      openCreateApp({ agentId: agentId ?? null });
+      onClose();
+    } else if (label === "Add Data Storage Support") {
+      openDataStorage({ agentId: agentId ?? null });
+      onClose();
+    } else if (label === "Linked Agent Sync") {
+      openConvertSystem({ agentId: agentId ?? null });
+      onClose();
+    } else if (label === SAVE_AS_TEMPLATE_LABEL) {
+      openSaveTemplate({ initialAgentId: agentId ?? null });
+      onClose();
+    } else if (label === "Create Shortcut") {
+      openShortcut({ agentId: agentId ?? null });
+      onClose();
+    } else if (label === "Find Usages (Admin)") {
+      openAdminFindUsages({ agentId: agentId ?? null });
+      onClose();
+    } else if (label === "Import Agent") {
+      openImport({});
+      onClose();
+    } else if (label === "Duplicate") {
+      onClose();
+      void onTriggerDuplicate();
+    } else if (label === "Refresh Server Cache") {
+      onClose();
+      void onTriggerRefreshCache();
+    } else if (label === "Convert to Template") {
+      if (!selectedOrganizationId) {
+        toast.error(
+          "Select an organization from the avatar menu, then try again."
+        );
+        return;
+      }
+      setIsBusy(true);
+      try {
+        await convertToTemplate(agentId, selectedOrganizationId);
+      } catch (err) {
+        toast.error(
+          err instanceof Error ? err.message : "Failed to save as template"
+        );
+      } finally {
+        setIsBusy(false);
+        onClose();
+      }
+    } else {
+      comingSoon();
+      onClose();
+    }
+  };
+  const handleVariationClick = () => {
+    openInterfaceVariations({ agentId: agentId ?? null });
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col overflow-y-auto max-h-[calc(85dvh-2rem)] pb-safe", children: [
+    /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+      THIS_AGENT_ITEMS.map(({ label, icon: Icon, soon }) => {
+        if (label === "View All Versions" || label === "Drift Report") {
+          const href = label === "Drift Report" ? "/reports/agent-drift" : `${basePath}/${agentId}/latest?tab=history`;
+          return /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href,
+              onClick: onClose,
+              className: "flex items-center gap-3 w-full px-4 py-2.5 text-sm text-foreground hover:bg-muted/50 active:bg-muted/70 transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 text-muted-foreground shrink-0" }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: label })
+              ]
+            },
+            label
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          Tile,
+          {
+            variant: "quiet",
+            onClick: () => handleItem(label),
+            disabled: label === "Refresh Server Cache" && isRefreshingCache,
+            icon: /* @__PURE__ */ jsx(Icon, {}),
+            title: label === "Refresh Server Cache" && isRefreshingCache ? "Refreshing..." : label,
+            end: soon ? /* @__PURE__ */ jsx(SoonBadge, {}) : void 0
+          },
+          label
+        );
+      }),
+      /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: /* @__PURE__ */ jsx(Layers, {}), title: "Try Interface Variations", end: /* @__PURE__ */ jsx(ChevronRight, {}), onClick: () => setVariationsOpen(!variationsOpen) }),
+      variationsOpen && /* @__PURE__ */ jsx("div", { className: "pl-6 bg-muted/20", children: INTERFACE_VARIATIONS.map((v) => /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: handleVariationClick, className: "w-full", children: v }, v)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-px bg-border mx-3 my-1" }),
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold", children: "Open in New Tab" }) }),
+    /* @__PURE__ */ jsx("div", { className: "py-1", children: NEW_TAB_ITEMS.map(({ label, icon: Icon, getHref }) => /* @__PURE__ */ jsxs(
+      Link,
+      {
+        href: getHref(agentId, basePath),
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: onClose,
+        className: "flex items-center gap-3 w-full px-4 py-2.5 text-sm text-foreground hover:bg-muted/50 active:bg-muted/70 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 text-muted-foreground shrink-0" }),
+          label
+        ]
+      },
+      label
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "h-px bg-border mx-3 my-1" }),
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold", children: "Manage" }) }),
+    /* @__PURE__ */ jsx("div", { className: "py-1", children: managementItems.map(({ label, icon: Icon, soon }) => /* @__PURE__ */ jsx(
+      Tile,
+      {
+        variant: "quiet",
+        onClick: () => handleItem(label),
+        disabled: isBusy && label === "Convert to Template",
+        icon: /* @__PURE__ */ jsx(Icon, {}),
+        title: label,
+        end: soon ? /* @__PURE__ */ jsx(SoonBadge, {}) : void 0
+      },
+      label
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "h-px bg-border mx-3 my-1" }),
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold", children: "Agents" }) }),
+    /* @__PURE__ */ jsx("div", { className: "py-1", children: GLOBAL_AGENT_ITEMS.map(({ label, icon: Icon, soon }) => /* @__PURE__ */ jsx(
+      Tile,
+      {
+        variant: "quiet",
+        onClick: () => handleItem(label),
+        icon: /* @__PURE__ */ jsx(Icon, {}),
+        title: label,
+        end: soon ? /* @__PURE__ */ jsx(SoonBadge, {}) : void 0
+      },
+      label
+    )) }),
+    adminItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-px bg-border mx-3 my-1" }),
+      /* @__PURE__ */ jsx("div", { className: "px-4 py-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold", children: "Admin" }) }),
+      /* @__PURE__ */ jsx("div", { className: "py-1", children: adminItems.map(({ label, icon: Icon }) => /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: /* @__PURE__ */ jsx(Icon, {}), title: label, onClick: () => handleItem(label) }, label)) })
+    ] }),
+    lifecycle.available && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-px bg-border mx-3 my-1" }),
+      /* @__PURE__ */ jsx("div", { className: "px-4 py-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold", children: "Manage" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+        /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: lifecycle.isArchived ? /* @__PURE__ */ jsx(ArchiveRestore, {}) : /* @__PURE__ */ jsx(Archive, {}), title: lifecycle.archiveLabel, disabled: lifecycle.isBusy, onClick: () => {
+          onClose();
+          void lifecycle.toggleArchived();
+        } }),
+        /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Trash2, {}), disabled: lifecycle.isBusy, onClick: () => {
+          onClose();
+          void lifecycle.remove();
+        }, className: "w-full", children: /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "Delete" }) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  AgentOptionsMenu
+};