@agent-native/toolkit 0.23.1 → 0.198.2

package/dist/composer/ComposerPlusMenu.js

@@ -1,14 +1,17 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useComposerRuntime } from "@assistant-ui/react";
-import { IconPlus, IconUpload, IconBulb, IconClock, IconBolt, IconTool, IconPlugConnected, IconPhotoPlus, IconLoader2, IconArrowLeft, IconX, IconHelpCircle, IconTerminal2, } from "@tabler/icons-react";
-import { useState, useRef, useEffect, useMemo, useCallback, } from "react";
+import { IconArrowLeft, IconLoader2, IconX } from "@tabler/icons-react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
 import { createPortal } from "react-dom";
-import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover.js";
-import { Switch } from "../ui/switch.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenuGroup, DropdownMenuItem } from "../ui/dropdown-menu.js";
+import { Input } from "../ui/input.js";
+import { Label } from "../ui/label.js";
+import { Textarea } from "../ui/textarea.js";
 import { cn } from "../utils.js";
 import { createAssetPickerHandoffId, isExternalAssetPickerUrl, standaloneAssetPickerUrl, } from "./asset-picker-url.js";
 import { formatAttachmentError } from "./attachment-accept.js";
+import { ComposerContextMenu, } from "./ComposerContextMenu.js";
 import { useComposerRuntimeAdapters } from "./runtime-adapters.js";
 const DEFAULT_ASSETS_PICKER_URL = "https://assets.agent-native.com/picker";
 const EMBED_PROTOCOL = "agent-native.embed";
@@ -111,151 +114,101 @@ function slugifyName(value) {
         .replace(/[^a-z0-9]+/g, "-")
         .replace(/^-+|-+$/g, "") || "uploaded-skill");
 }
-function MenuItemHelp({ label, description, }) {
-    const normalizedDescription = description?.trim();
-    if (!normalizedDescription)
-        return null;
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { role: "img", tabIndex: 0, "aria-label": `${label}: ${normalizedDescription}`, onClick: (event) => event.stopPropagation(), className: "flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", children: _jsx(IconHelpCircle, { "aria-hidden": "true", className: "size-3", strokeWidth: 1.8 }) }) }), _jsx(TooltipContent, { side: "right", className: "max-w-xs", children: normalizedDescription })] }));
-}
-function UploadOnlyAttachButton({ addAttachment, attachmentsEnabled, onAttachmentRequest, onAttachmentError, attachmentAccept, }) {
-    const composerRuntime = useComposerRuntime();
-    const t = useComposerRuntimeAdapters().translate;
-    const inputRef = useRef(null);
-    const handleFilesSelected = async (files) => {
-        if (!files || files.length === 0)
-            return;
-        try {
-            await Promise.all(Array.from(files).map((file) => (addAttachment ?? composerRuntime.addAttachment)(file)));
-        }
-        catch (error) {
-            onAttachmentError?.(formatAttachmentError(error, t("agentChat.composer.uploadFailed", {
-                defaultValue: "Could not upload the selected file.",
-            })));
-        }
-    };
-    return (_jsxs(_Fragment, { children: [attachmentsEnabled ? (_jsx("input", { ref: inputRef, type: "file", multiple: true, accept: attachmentAccept, className: "hidden", onChange: (event) => {
-                    void handleFilesSelected(event.target.files);
-                    event.target.value = "";
-                } })) : null, _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "inline-flex shrink-0", children: _jsx("button", { type: "button", className: "shrink-0 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50", "aria-label": t("agentChat.composer.upload", {
-                                    defaultValue: "Upload",
-                                }), onClick: () => {
-                                    if (attachmentsEnabled)
-                                        inputRef.current?.click();
-                                    else
-                                        onAttachmentRequest?.();
-                                }, children: _jsx(IconPlus, { className: "h-4 w-4" }) }) }) }), _jsx(TooltipContent, { children: t("agentChat.composer.upload", { defaultValue: "Upload" }) })] })] }));
-}
-export function ComposerPlusMenu({ onSelectMode, addAttachment, attachmentsEnabled = true, onAttachmentRequest, onAttachmentError, attachmentAccept, extensionTools = false, mode = "full", terminalModeControl, }) {
-    if (mode === "upload-only") {
-        if (!attachmentsEnabled && !onAttachmentRequest)
-            return null;
-        return (_jsx(UploadOnlyAttachButton, { addAttachment: addAttachment, attachmentsEnabled: attachmentsEnabled, onAttachmentRequest: onAttachmentRequest, onAttachmentError: onAttachmentError, attachmentAccept: attachmentAccept }));
-    }
-    if (mode === "terminal" && terminalModeControl) {
-        return (_jsx(ComposerPlusMenuTerminal, { terminalModeControl: terminalModeControl }));
-    }
-    return (_jsx(ComposerPlusMenuFull, { onSelectMode: onSelectMode, addAttachment: addAttachment, attachmentsEnabled: attachmentsEnabled, onAttachmentRequest: onAttachmentRequest, onAttachmentError: onAttachmentError, attachmentAccept: attachmentAccept, extensionTools: extensionTools }));
-}
-function ComposerPlusMenuTerminal({ terminalModeControl, }) {
-    const [open, setOpen] = useState(false);
-    if (!terminalModeControl)
-        return null;
-    const handlePrimaryAction = () => {
-        if (!terminalModeControl.enabled) {
-            terminalModeControl.onChange(true);
-            setOpen(false);
-            return;
+export function mergeComposerMenuItems(defaults, provided) {
+    const ids = new Set();
+    const visit = (items) => {
+        for (const item of items) {
+            ids.add(item.id);
+            if (item.children)
+                visit(item.children);
         }
-        terminalModeControl.onNewTerminal?.();
-        setOpen(false);
     };
-    return (_jsx(_Fragment, { children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/50 hover:text-foreground", "aria-label": "Terminal options" /* i18n-ignore -- portable toolkit label */, title: "Terminal options" /* i18n-ignore -- portable toolkit label */, children: _jsx(IconPlus, { className: "h-4 w-4" }) }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 8, className: "w-56 border-input bg-muted p-1 text-foreground", onOpenAutoFocus: (event) => event.preventDefault(), children: [_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-start text-[12px] font-medium text-foreground hover:bg-accent/60", onClick: handlePrimaryAction, children: [_jsx(IconTerminal2, { size: 14, className: "shrink-0 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { children: terminalModeControl.enabled ? "New terminal" : "Start terminal" })] }), _jsx("div", { className: "my-1 border-t border-border/70" }), _jsxs("div", { className: "flex items-center justify-between gap-3 px-2.5 py-2", children: [_jsx("span", { className: "text-[12px] font-medium text-foreground", children: "Terminal mode" /* i18n-ignore -- portable toolkit label */ }), _jsx(Switch, { checked: terminalModeControl.enabled, onCheckedChange: terminalModeControl.onChange, "aria-label": "Terminal mode" /* i18n-ignore -- portable toolkit label */ })] })] })] }) }));
+    visit(provided);
+    return [...provided, ...defaults.filter((item) => !ids.has(item.id))];
 }
-function ComposerPlusMenuFull({ onSelectMode, addAttachment, attachmentsEnabled, onAttachmentRequest, onAttachmentError, attachmentAccept, extensionTools, }) {
+export function useComposerDefaultActions({ onSelectMode, extensionTools = false, disabled, onRestoreFocus, }) {
     const adapters = useComposerRuntimeAdapters();
     const t = adapters.translate;
     const resources = adapters.resources;
-    const composerRuntime = useComposerRuntime();
-    const [open, setOpen] = useState(false);
     const [assetsPickerOpen, setAssetsPickerOpen] = useState(false);
     const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
-    const [view, setView] = useState("menu");
-    const showMcpIntegrations = useMemo(() => resources.isMcpIntegrationAvailable(), [resources]);
+    const overlayOpen = useRef(false);
+    const showMcpIntegrations = resources.isMcpIntegrationAvailable();
     const { data: org } = resources.useOrg();
     const canCreateOrgMcp = !org?.orgId || org.role === "owner" || org.role === "admin";
-    const hasOrg = !!org?.orgId;
-    const defaultMcpScope = "user";
     const createMcp = resources.useCreateMcpServer();
     const McpIntegrationDialog = resources.McpIntegrationDialog;
-    const fileUploadRef = useRef(null);
+    const [view, setView] = useState("menu");
     const skillFileInputRef = useRef(null);
-    const skillHoverTimerRef = useRef(null);
+    const skillControls = useRef(null);
+    const skillEpoch = useRef(0);
+    const skillRequest = useRef(null);
+    const skillCloseTimer = useRef(null);
     const [skillUploadSlug, setSkillUploadSlug] = useState("");
     const [skillUploadContent, setSkillUploadContent] = useState("");
     const [skillUploadFileName, setSkillUploadFileName] = useState("");
     const [skillUploadStatus, setSkillUploadStatus] = useState(null);
     const [skillUploadBusy, setSkillUploadBusy] = useState(false);
-    const [skillFlyoutOpen, setSkillFlyoutOpen] = useState(false);
-    const [skillFlyoutSide, setSkillFlyoutSide] = useState("right");
-    const skillFlyoutCloseTimerRef = useRef(null);
-    const openSkillFlyout = (rowEl) => {
-        if (skillFlyoutCloseTimerRef.current) {
-            window.clearTimeout(skillFlyoutCloseTimerRef.current);
-            skillFlyoutCloseTimerRef.current = null;
-        }
-        if (rowEl && typeof window !== "undefined") {
-            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 formId = useId();
+    const cancelSkillWork = useCallback(() => {
+        skillEpoch.current++;
+        skillRequest.current?.abort();
+        skillRequest.current = null;
+        if (skillCloseTimer.current !== null)
+            clearTimeout(skillCloseTimer.current);
+        skillCloseTimer.current = null;
+    }, []);
+    useEffect(() => cancelSkillWork, [cancelSkillWork, adapters.resolvePath]);
     useEffect(() => {
-        if (open) {
-            setView("menu");
-            setSkillUploadSlug("");
-            setSkillUploadContent("");
-            setSkillUploadFileName("");
-            setSkillUploadStatus(null);
-            setSkillUploadBusy(false);
-            setSkillFlyoutOpen(false);
-        }
-    }, [open]);
-    const handleSkillFileSelected = async (files) => {
-        if (!files || files.length === 0)
+        if (!disabled)
             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);
+        cancelSkillWork();
+        setAssetsPickerOpen(false);
+        setMcpDialogOpen(false);
+        overlayOpen.current = false;
+    }, [disabled, cancelSkillWork]);
+    const resetSkillUpload = () => {
+        cancelSkillWork();
+        setView("menu");
+        setSkillUploadSlug("");
+        setSkillUploadContent("");
+        setSkillUploadFileName("");
         setSkillUploadStatus(null);
-        setView("skill-upload");
+        setSkillUploadBusy(false);
     };
-    const handleFilesSelected = async (files) => {
-        if (!attachmentsEnabled || !files || files.length === 0)
-            return;
+    const handleSkillFileSelected = async (file) => {
+        cancelSkillWork();
+        const epoch = skillEpoch.current;
+        setSkillUploadStatus(null);
         try {
-            await Promise.all(Array.from(files).map((file) => (addAttachment ?? composerRuntime.addAttachment)(file)));
+            const content = await file.text();
+            if (skillEpoch.current !== epoch)
+                return;
+            const baseName = file.name.replace(/\.[^./]+$/, "");
+            setSkillUploadSlug(slugifyName(baseName.toLowerCase() === "skill" ? "uploaded-skill" : baseName));
+            setSkillUploadContent(content);
+            setSkillUploadFileName(file.name);
+            setView("skill-upload");
         }
         catch (error) {
-            onAttachmentError?.(formatAttachmentError(error, t("agentChat.composer.uploadFailed", {
-                defaultValue: "Could not upload the selected file.",
-            })));
+            if (skillEpoch.current !== epoch)
+                return;
+            setSkillUploadStatus({
+                kind: "err",
+                message: formatAttachmentError(error, t("agentChat.composer.skill.saveFailed", {
+                    defaultValue: "Failed to save skill file",
+                })),
+            });
         }
     };
     const submitSkillUpload = async () => {
-        if (skillUploadBusy)
+        if (skillRequest.current ||
+            !skillUploadSlug.trim() ||
+            !skillUploadContent.trim())
             return;
+        const epoch = skillEpoch.current;
+        const abort = new AbortController();
+        skillRequest.current = abort;
         const slug = slugifyName(skillUploadSlug || "uploaded-skill");
         const path = `skills/${slug}/SKILL.md`;
         setSkillUploadBusy(true);
@@ -263,6 +216,7 @@ function ComposerPlusMenuFull({ onSelectMode, addAttachment, attachmentsEnabled,
         try {
             const res = await fetch(adapters.resolvePath("/_agent-native/resources"), {
                 method: "POST",
+                signal: abort.signal,
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({
                     path,
@@ -272,13 +226,15 @@ function ComposerPlusMenuFull({ onSelectMode, addAttachment, attachmentsEnabled,
                 }),
             });
             if (!res.ok) {
-                const body = await res.text().catch(() => "");
+                const body = await res.text();
                 throw new Error(body ||
                     t("agentChat.composer.skill.uploadFailedStatus", {
                         status: res.status,
                         defaultValue: `Upload failed (${res.status})`,
                     }));
             }
+            if (skillEpoch.current !== epoch)
+                return;
             setSkillUploadStatus({
                 kind: "ok",
                 message: t("agentChat.composer.skill.added", {
@@ -286,208 +242,226 @@ function ComposerPlusMenuFull({ onSelectMode, addAttachment, attachmentsEnabled,
                     defaultValue: `Skill "${skillUploadFileName || `${slug}/SKILL.md`}" added`,
                 }),
             });
-            window.setTimeout(() => setOpen(false), 1200);
+            skillCloseTimer.current = setTimeout(() => {
+                if (skillEpoch.current === epoch)
+                    skillControls.current?.onClose();
+            }, 1200);
         }
-        catch (err) {
+        catch (error) {
+            if (skillEpoch.current !== epoch)
+                return;
             setSkillUploadStatus({
                 kind: "err",
-                message: err?.message ||
-                    t("agentChat.composer.skill.saveFailed", {
-                        defaultValue: "Failed to save skill file",
-                    }),
+                message: formatAttachmentError(error, t("agentChat.composer.skill.saveFailed", {
+                    defaultValue: "Failed to save skill file",
+                })),
             });
         }
         finally {
-            setSkillUploadBusy(false);
+            if (skillEpoch.current === epoch) {
+                skillRequest.current = null;
+                setSkillUploadBusy(false);
+            }
         }
     };
-    const menuItems = [
-        ...(attachmentsEnabled || onAttachmentRequest
-            ? [
-                {
-                    icon: _jsx(IconUpload, { className: "h-3.5 w-3.5" }),
-                    label: t("agentChat.composer.menu.uploadFile", {
-                        defaultValue: "Upload File",
-                    }),
-                    desc: t("agentChat.composer.menu.uploadFileDescription", {
-                        defaultValue: "Images, PDFs, text/code, JSON, CSV",
-                    }),
-                    action: () => {
-                        setOpen(false);
-                        if (attachmentsEnabled) {
-                            setTimeout(() => fileUploadRef.current?.click(), 0);
-                        }
-                        else {
-                            onAttachmentRequest?.();
-                        }
-                    },
-                },
-            ]
-            : []),
+    const items = [
         {
-            icon: _jsx(IconPhotoPlus, { className: "h-3.5 w-3.5" }),
+            id: "generate-image",
             label: t("agentChat.composer.menu.generateImage", {
                 defaultValue: "Generate Image",
             }),
-            desc: t("agentChat.composer.menu.generateImageDescription", {
-                defaultValue: "Open the Assets image picker",
-            }),
-            action: () => {
-                setOpen(false);
+            keywords: [
+                t("agentChat.composer.menu.generateImageDescription", {
+                    defaultValue: "Open the Assets image picker",
+                }),
+            ],
+            onSelect: () => {
+                overlayOpen.current = true;
                 setAssetsPickerOpen(true);
             },
         },
         {
-            icon: _jsx(IconClock, { className: "h-3.5 w-3.5" }),
+            id: "schedule-task",
             label: t("agentChat.composer.menu.scheduleTask", {
                 defaultValue: "Schedule Task",
             }),
-            desc: t("agentChat.composer.menu.scheduleTaskDescription", {
-                defaultValue: "Run something on a schedule",
-            }),
-            action: () => {
-                onSelectMode?.("job");
-                setOpen(false);
-            },
+            keywords: [
+                t("agentChat.composer.menu.scheduleTaskDescription", {
+                    defaultValue: "Run something on a schedule",
+                }),
+            ],
+            disabled: !onSelectMode,
+            onSelect: () => onSelectMode?.("job"),
         },
         {
-            icon: _jsx(IconBolt, { className: "h-3.5 w-3.5" }),
+            id: "create-automation",
             label: t("agentChat.composer.menu.createAutomation", {
                 defaultValue: "Create Automation",
             }),
-            desc: t("agentChat.composer.menu.createAutomationDescription", {
-                defaultValue: "Set up a when-X-do-Y rule",
-            }),
-            action: () => {
-                onSelectMode?.("automation");
-                setOpen(false);
-            },
+            keywords: [
+                t("agentChat.composer.menu.createAutomationDescription", {
+                    defaultValue: "Set up a when-X-do-Y rule",
+                }),
+            ],
+            disabled: !onSelectMode,
+            onSelect: () => onSelectMode?.("automation"),
         },
         ...(isExtensionComposerMenuEnabled(extensionTools)
             ? [
                 {
-                    icon: _jsx(IconTool, { className: "h-3.5 w-3.5" }),
+                    id: "create-extension",
                     label: t("agentChat.composer.menu.createExtension", {
                         defaultValue: "Create Extension",
                     }),
-                    desc: t("agentChat.composer.menu.createExtensionDescription", {
-                        defaultValue: "Build a mini app extension",
-                    }),
-                    action: () => {
-                        onSelectMode?.("extension");
-                        setOpen(false);
-                    },
+                    keywords: [
+                        t("agentChat.composer.menu.createExtensionDescription", {
+                            defaultValue: "Build a mini app extension",
+                        }),
+                    ],
+                    disabled: !onSelectMode,
+                    onSelect: () => onSelectMode?.("extension"),
                 },
             ]
             : []),
         ...(showMcpIntegrations
             ? [
                 {
-                    icon: _jsx(IconPlugConnected, { className: "h-3.5 w-3.5" }),
+                    id: "integrations",
                     label: t("agentChat.composer.menu.integrations", {
                         defaultValue: "Integrations",
                     }),
-                    desc: t("agentChat.composer.menu.integrationsDescription", {
-                        defaultValue: "Connect tools and services to the agent",
-                    }),
-                    action: () => {
-                        setOpen(false);
+                    keywords: [
+                        t("agentChat.composer.menu.integrationsDescription", {
+                            defaultValue: "Connect tools and services to the agent",
+                        }),
+                    ],
+                    onSelect: () => {
+                        overlayOpen.current = true;
                         setMcpDialogOpen(true);
                     },
                 },
             ]
             : []),
         {
-            icon: _jsx(IconBulb, { className: "h-3.5 w-3.5" }),
+            id: "create-skill",
             label: t("agentChat.composer.menu.createSkill", {
                 defaultValue: "Create Skill",
             }),
-            desc: t("agentChat.composer.menu.createSkillDescription", {
-                defaultValue: "Teach the agent a new ability",
-            }),
-            action: openSkillFlyout,
-            hoverAction: openSkillFlyout,
-            isSkill: true,
+            keywords: [
+                t("agentChat.composer.menu.createSkillDescription", {
+                    defaultValue: "Teach the agent a new ability",
+                }),
+                t("agentChat.composer.skill.uploadFile", {
+                    defaultValue: "Upload skill file",
+                }),
+            ],
+            onSelect: resetSkillUpload,
+            onDismiss: cancelSkillWork,
+            render: (controls) => {
+                skillControls.current = controls;
+                return view === "menu" ? (_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuItem, { disabled: !onSelectMode, onSelect: () => {
+                                controls.onClose();
+                                onSelectMode?.("skill");
+                            }, children: t("agentChat.composer.skill.createNew", {
+                                defaultValue: "Create new skill",
+                            }) }), _jsx(DropdownMenuItem, { onSelect: (event) => {
+                                event.preventDefault();
+                                skillFileInputRef.current?.click();
+                            }, children: t("agentChat.composer.skill.uploadFile", {
+                                defaultValue: "Upload skill file",
+                            }) }), skillUploadStatus && (_jsx("div", { role: "alert", className: "p-3 text-sm text-destructive", children: skillUploadStatus.message }))] })) : (_jsxs("form", { className: "grid min-w-0 gap-2 p-3", onSubmit: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        void submitSkillUpload();
+                    }, onKeyDown: (event) => {
+                        if (event.key !== "Escape" && event.key !== "Tab")
+                            event.stopPropagation();
+                    }, children: [_jsxs(Button, { type: "button", variant: "ghost", className: "justify-start", onClick: resetSkillUpload, children: [_jsx(IconArrowLeft, { className: "rtl:-scale-x-100" }), t("agentChat.composer.skill.back", { defaultValue: "Back" })] }), _jsx("p", { className: "break-words text-xs text-muted-foreground", children: t("agentChat.composer.skill.review", {
+                                name: skillUploadFileName ||
+                                    t("agentChat.composer.skill.selectedFile", {
+                                        defaultValue: "the selected file",
+                                    }),
+                                defaultValue: `Review the content from ${skillUploadFileName || "the selected file"} before saving.`,
+                            }) }), _jsx(Label, { htmlFor: `${formId}-name`, children: t("agentChat.composer.skill.name", {
+                                defaultValue: "Skill name",
+                            }) }), _jsx(Input, { id: `${formId}-name`, autoFocus: true, value: skillUploadSlug, disabled: skillUploadBusy, onChange: (event) => setSkillUploadSlug(event.target.value), placeholder: "my-skill" }), _jsxs("p", { className: "break-words text-xs text-muted-foreground", children: [t("agentChat.composer.skill.savedAt", {
+                                    defaultValue: "Saved at",
+                                }), " ", _jsxs("span", { className: "font-mono", children: ["skills/", slugifyName(skillUploadSlug || "uploaded-skill"), "/SKILL.md"] })] }), _jsx(Label, { htmlFor: `${formId}-content`, children: t("agentChat.composer.skill.content", {
+                                defaultValue: "Content",
+                            }) }), _jsx(Textarea, { id: `${formId}-content`, value: skillUploadContent, disabled: skillUploadBusy, onChange: (event) => setSkillUploadContent(event.target.value), rows: 10, className: "font-mono text-xs" }), skillUploadStatus && (_jsx("div", { role: skillUploadStatus.kind === "err" ? "alert" : "status", className: cn("break-words text-xs", skillUploadStatus.kind === "err"
+                                ? "text-destructive"
+                                : "text-muted-foreground"), children: skillUploadStatus.message })), _jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: resetSkillUpload, children: t("agentChat.common.cancel", { defaultValue: "Cancel" }) }), _jsx(Button, { type: "submit", disabled: skillUploadBusy ||
+                                        skillUploadStatus?.kind === "ok" ||
+                                        !skillUploadContent.trim() ||
+                                        !skillUploadSlug.trim(), children: skillUploadBusy ? (_jsx(IconLoader2, { className: "animate-spin" })) : (t("agentChat.common.save", { defaultValue: "Save" })) })] })] }));
+            },
         },
     ];
-    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileUploadRef, type: "file", multiple: true, accept: attachmentAccept, className: "hidden", disabled: !attachmentsEnabled, onChange: (event) => {
-                    void handleFilesSelected(event.target.files);
-                    event.target.value = "";
-                } }), _jsx("input", { ref: skillFileInputRef, type: "file", accept: ".md,text/markdown", className: "hidden", onChange: (e) => {
-                    void handleSkillFileSelected(e.target.files);
-                    e.target.value = "";
-                } }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "inline-flex shrink-0", children: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-agent-composer-slot": "plus-button", "aria-label": t("agentChat.composer.add", {
-                                                defaultValue: "Add...",
-                                            }), className: "shrink-0 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 disabled:opacity-30 disabled:cursor-not-allowed", children: _jsx(IconPlus, { className: "h-4 w-4" }) }) }) }) }), _jsx(TooltipContent, { children: t("agentChat.composer.add", { defaultValue: "Add..." }) })] }), _jsxs(PopoverContent, { side: "top", align: "start", sideOffset: 8, className: cn("rounded-lg border-input bg-muted p-0 text-foreground", view === "skill-upload"
-                            ? "max-h-[70vh] w-[calc(100vw-24px)] max-w-[380px] overflow-y-auto"
-                            : "w-[260px]"), style: { fontSize: 13, lineHeight: "normal" }, onOpenAutoFocus: (e) => e.preventDefault(), children: [view === "menu" && (_jsx("div", { className: "py-1", children: menuItems.map((item) => {
-                                    const isSkill = item.isSkill === true;
-                                    return (_jsxs("div", { className: cn("relative flex items-center hover:bg-accent/50", isSkill && "group/skill", isSkill && skillFlyoutOpen && "bg-accent/50"), 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;
-                                            }
-                                        }, children: [_jsxs("button", { type: "button", onClick: (event) => item.action(event.currentTarget), className: cn("flex min-w-0 flex-1 items-center gap-2.5 px-3 py-2 text-start"), children: [_jsx("span", { className: "text-muted-foreground", children: item.icon }), _jsxs("span", { className: "flex min-w-0 items-center gap-0.5", children: [_jsx("span", { className: "min-w-0 truncate text-[12px] font-medium text-foreground", children: item.label }), _jsx(MenuItemHelp, { label: item.label, description: item.desc })] })] }), isSkill && (_jsx("span", { className: "me-3 ms-auto text-muted-foreground/60", children: "\u203A" })), isSkill && skillFlyoutOpen && (_jsxs("div", { role: "menu", onMouseEnter: () => openSkillFlyout(), onMouseLeave: scheduleSkillFlyoutClose, className: cn("absolute top-0 z-20 w-[240px] rounded-lg border border-input bg-muted py-1 text-foreground shadow-md", skillFlyoutSide === "right"
-                                                    ? "left-full ml-1"
-                                                    : "right-full mr-1"), children: [_jsx("div", { className: "flex items-center hover:bg-accent/50", children: _jsxs("button", { type: "button", onClick: () => {
-                                                                onSelectMode?.("skill");
-                                                                setSkillFlyoutOpen(false);
-                                                                setOpen(false);
-                                                            }, className: "flex min-w-0 flex-1 items-center gap-2.5 px-3 py-2 text-start", children: [_jsx("span", { className: "text-muted-foreground", children: _jsx(IconBulb, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "flex min-w-0 items-center gap-0.5", children: [_jsx("span", { className: "min-w-0 truncate text-[12px] font-medium text-foreground", children: t("agentChat.composer.skill.createNew", {
-                                                                                defaultValue: "Create new skill",
-                                                                            }) }), _jsx(MenuItemHelp, { label: t("agentChat.composer.skill.createNew", {
-                                                                                defaultValue: "Create new skill",
-                                                                            }), description: t("agentChat.composer.skill.createDescription", {
-                                                                                defaultValue: "Describe a skill and let the agent draft it",
-                                                                            }) })] })] }) }), _jsx("div", { className: "flex items-center hover:bg-accent/50", children: _jsxs("button", { type: "button", onClick: () => {
-                                                                setSkillFlyoutOpen(false);
-                                                                skillFileInputRef.current?.click();
-                                                            }, className: "flex min-w-0 flex-1 items-center gap-2.5 px-3 py-2 text-start", children: [_jsx("span", { className: "text-muted-foreground", children: _jsx(IconUpload, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "flex min-w-0 items-center gap-0.5", children: [_jsx("span", { className: "min-w-0 truncate text-[12px] font-medium text-foreground", children: t("agentChat.composer.skill.uploadFile", {
-                                                                                defaultValue: "Upload skill file",
-                                                                            }) }), _jsx(MenuItemHelp, { label: t("agentChat.composer.skill.uploadFile", {
-                                                                                defaultValue: "Upload skill file",
-                                                                            }), description: t("agentChat.composer.skill.uploadDescription", {
-                                                                                defaultValue: "Import an existing SKILL.md file",
-                                                                            }) })] })] }) })] }))] }, item.label));
-                                }) })), view === "skill-upload" && (_jsxs("div", { className: "p-3", children: [_jsxs("button", { type: "button", onClick: () => setView("menu"), className: "mb-1.5 flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground", children: [_jsx(IconArrowLeft, { className: "h-3 w-3 rtl:-scale-x-100" }), t("agentChat.composer.skill.back", {
-                                                defaultValue: "Back",
-                                            })] }), _jsx("label", { className: "mb-1 block text-[11px] font-semibold text-foreground", children: t("agentChat.composer.skill.uploadFile", {
-                                            defaultValue: "Upload skill file",
-                                        }) }), _jsx("p", { className: "mb-2 text-[10px] leading-relaxed text-muted-foreground/60", children: t("agentChat.composer.skill.review", {
-                                            name: skillUploadFileName ||
-                                                t("agentChat.composer.skill.selectedFile", {
-                                                    defaultValue: "the selected file",
-                                                }),
-                                            defaultValue: `Review the content from ${skillUploadFileName || "the selected file"} before saving.`,
-                                        }) }), _jsx("label", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: t("agentChat.composer.skill.name", {
-                                            defaultValue: "Skill name",
-                                        }) }), _jsx("input", { value: skillUploadSlug, onChange: (e) => setSkillUploadSlug(e.target.value), className: "mb-2 w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "my-skill" }), _jsxs("p", { className: "mb-2 text-[10px] text-muted-foreground/60", children: [t("agentChat.composer.skill.savedAt", {
-                                                defaultValue: "Saved at",
-                                            }), " ", _jsxs("span", { className: "font-mono", children: ["skills/", slugifyName(skillUploadSlug || "uploaded-skill"), "/SKILL.md"] })] }), _jsx("label", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: t("agentChat.composer.skill.content", {
-                                            defaultValue: "Content",
-                                        }) }), _jsx("textarea", { value: skillUploadContent, onChange: (e) => setSkillUploadContent(e.target.value), rows: 10, 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" }), skillUploadStatus && (_jsx("div", { className: cn("mt-2 text-[11px] leading-snug", skillUploadStatus.kind === "ok"
-                                            ? "text-green-600 dark:text-green-400"
-                                            : "text-red-600 dark:text-red-400"), children: skillUploadStatus.message })), _jsxs("div", { className: "mt-2.5 flex justify-end gap-2", children: [_jsx("button", { type: "button", onClick: () => setView("menu"), className: "rounded-md px-3 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-accent/40", children: t("agentChat.common.cancel", {
-                                                    defaultValue: "Cancel",
-                                                }) }), _jsx("button", { type: "button", onClick: submitSkillUpload, disabled: skillUploadBusy ||
-                                                    !skillUploadContent.trim() ||
-                                                    !skillUploadSlug.trim(), className: "rounded-md bg-accent px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40 disabled:pointer-events-none", children: skillUploadBusy ? (_jsx(IconLoader2, { className: "h-3 w-3 animate-spin" })) : (t("agentChat.common.save", { defaultValue: "Save" })) })] })] }))] })] }), McpIntegrationDialog ? (_jsx(McpIntegrationDialog, { open: mcpDialogOpen, onOpenChange: setMcpDialogOpen, defaultScope: defaultMcpScope, canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: (args) => createMcp.mutateAsync(args) })) : null, _jsx(AssetsPickerModal, { open: assetsPickerOpen, onOpenChange: setAssetsPickerOpen })] }));
+    return {
+        items,
+        restoreFocus: () => {
+            if (!overlayOpen.current)
+                onRestoreFocus?.();
+        },
+        overlays: (_jsxs(_Fragment, { children: [_jsx("input", { ref: skillFileInputRef, type: "file", accept: ".md,text/markdown", hidden: true, onChange: (event) => {
+                        const file = event.target.files?.[0];
+                        event.target.value = "";
+                        if (file)
+                            void handleSkillFileSelected(file);
+                    } }), McpIntegrationDialog ? (_jsx(McpIntegrationDialog, { open: mcpDialogOpen, onOpenChange: (open) => {
+                        overlayOpen.current = open;
+                        setMcpDialogOpen(open);
+                        if (!open)
+                            onRestoreFocus?.();
+                    }, defaultScope: "user", canCreateOrgMcp: canCreateOrgMcp, hasOrg: Boolean(org?.orgId), onCreateMcpServer: (args) => createMcp.mutateAsync(args) })) : null, _jsx(AssetsPickerModal, { open: assetsPickerOpen, onOpenChange: (open) => {
+                        overlayOpen.current = open;
+                        setAssetsPickerOpen(open);
+                        if (!open)
+                            onRestoreFocus?.();
+                    } })] })),
+    };
+}
+function ComposerFullContextMenu(props) {
+    const defaults = useComposerDefaultActions(props);
+    const runtime = useComposerRuntime();
+    return (_jsxs(_Fragment, { children: [_jsx(ComposerContextMenu, { ...props, items: mergeComposerMenuItems(defaults.items, props.contextMenuItems ?? []), addAttachment: props.attachmentsEnabled === false
+                    ? undefined
+                    : (props.addAttachment ?? runtime.addAttachment), onRestoreFocus: props.onRestoreFocus ? defaults.restoreFocus : undefined }), defaults.overlays] }));
+}
+export function ComposerPlusMenu({ mode = "full", contextMenuItems = [], terminalModeControl, attachmentsEnabled = true, ...props }) {
+    const runtime = useComposerRuntime();
+    const t = useComposerRuntimeAdapters().translate;
+    if (mode === "full") {
+        return (_jsx(ComposerFullContextMenu, { ...props, attachmentsEnabled: attachmentsEnabled, contextMenuItems: contextMenuItems }));
+    }
+    const terminalItems = terminalModeControl
+        ? [
+            {
+                id: "terminal-primary",
+                label: t("agentPanel.newTerminal", { defaultValue: "New terminal" }),
+                disabled: terminalModeControl.enabled && !terminalModeControl.onNewTerminal,
+                onSelect: () => {
+                    if (terminalModeControl.enabled)
+                        terminalModeControl.onNewTerminal?.();
+                    else
+                        terminalModeControl.onChange(true);
+                },
+            },
+            {
+                id: "terminal-mode",
+                label: t("agentPanel.cliTerminalMode", {
+                    defaultValue: "CLI terminal mode",
+                }),
+                checked: terminalModeControl.enabled,
+                onSelect: () => terminalModeControl.onChange(!terminalModeControl.enabled),
+            },
+        ]
+        : [];
+    return (_jsx(ComposerContextMenu, { ...props, items: mode === "terminal"
+            ? mergeComposerMenuItems(terminalItems, contextMenuItems)
+            : contextMenuItems, addAttachment: mode === "upload-only" && attachmentsEnabled
+            ? (props.addAttachment ?? runtime.addAttachment)
+            : undefined, onAttachmentRequest: mode === "upload-only" ? props.onAttachmentRequest : undefined }));
 }
 function AssetsPickerModal({ open, onOpenChange, }) {
     const adapters = useComposerRuntimeAdapters();