@agent-native/toolkit 0.23.1 → 0.198.1

package/src/composer/ComposerPlusMenu.tsx

@@ -1,31 +1,20 @@
 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 { IconArrowLeft, IconLoader2, IconX } from "@tabler/icons-react";
 import React, {
-  useState,
-  useRef,
+  useCallback,
   useEffect,
+  useId,
   useMemo,
-  useCallback,
+  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,
@@ -33,6 +22,12 @@ import {
   standaloneAssetPickerUrl,
 } from "./asset-picker-url.js";
 import { formatAttachmentError } from "./attachment-accept.js";
+import {
+  ComposerContextMenu,
+  type ComposerContextMenuItem,
+  type ComposerContextMenuProps,
+  type ComposerContextPageControls,
+} from "./ComposerContextMenu.js";
 import { useComposerRuntimeAdapters } from "./runtime-adapters.js";
 import type { ComposerMode } from "./types.js";
 
@@ -42,16 +37,16 @@ export interface ComposerTerminalModeControl {
   onNewTerminal?: () => void;
 }
 
-interface ComposerPlusMenuProps {
+interface ComposerPlusMenuProps extends Omit<
+  ComposerContextMenuProps,
+  "items"
+> {
   onSelectMode?: (mode: ComposerMode) => void;
-  addAttachment?: (file: File) => Promise<unknown>;
   attachmentsEnabled?: boolean;
-  onAttachmentRequest?: () => void;
-  onAttachmentError?: (message: string) => void;
-  attachmentAccept?: string;
   extensionTools?: boolean;
   mode?: "full" | "upload-only" | "terminal";
   terminalModeControl?: ComposerTerminalModeControl;
+  contextMenuItems?: readonly ComposerContextMenuItem[];
 }
 
 type View = "menu" | "skill-upload";
@@ -196,267 +191,48 @@ function slugifyName(value: string): string {
   );
 }
 
-function MenuItemHelp({
-  label,
-  description,
-}: {
-  label: string;
-  description?: string;
-}) {
-  const normalizedDescription = description?.trim();
-  if (!normalizedDescription) return null;
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <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"
-        >
-          <IconHelpCircle
-            aria-hidden="true"
-            className="size-3"
-            strokeWidth={1.8}
-          />
-        </span>
-      </TooltipTrigger>
-      <TooltipContent side="right" className="max-w-xs">
-        {normalizedDescription}
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
-function UploadOnlyAttachButton({
-  addAttachment,
-  attachmentsEnabled,
-  onAttachmentRequest,
-  onAttachmentError,
-  attachmentAccept,
-}: Pick<
-  ComposerPlusMenuProps,
-  | "addAttachment"
-  | "attachmentsEnabled"
-  | "onAttachmentRequest"
-  | "onAttachmentError"
-  | "attachmentAccept"
->) {
-  const composerRuntime = useComposerRuntime();
-  const t = useComposerRuntimeAdapters().translate!;
-  const inputRef = useRef<HTMLInputElement>(null);
-  const handleFilesSelected = async (files: FileList | null) => {
-    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.",
-          }),
-        ),
-      );
+export function mergeComposerMenuItems(
+  defaults: readonly ComposerContextMenuItem[],
+  provided: readonly ComposerContextMenuItem[],
+): ComposerContextMenuItem[] {
+  const ids = new Set<string>();
+  const visit = (items: readonly ComposerContextMenuItem[]) => {
+    for (const item of items) {
+      ids.add(item.id);
+      if (item.children) visit(item.children);
     }
   };
-
-  return (
-    <>
-      {attachmentsEnabled ? (
-        <input
-          ref={inputRef}
-          type="file"
-          multiple
-          accept={attachmentAccept}
-          className="hidden"
-          onChange={(event) => {
-            void handleFilesSelected(event.target.files);
-            event.target.value = "";
-          }}
-        />
-      ) : null}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <span className="inline-flex shrink-0">
-            <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?.();
-              }}
-            >
-              <IconPlus className="h-4 w-4" />
-            </button>
-          </span>
-        </TooltipTrigger>
-        <TooltipContent>
-          {t("agentChat.composer.upload", { defaultValue: "Upload" })}
-        </TooltipContent>
-      </Tooltip>
-    </>
-  );
+  visit(provided);
+  return [...provided, ...defaults.filter((item) => !ids.has(item.id))];
 }
 
-export function ComposerPlusMenu({
+export function useComposerDefaultActions({
   onSelectMode,
-  addAttachment,
-  attachmentsEnabled = true,
-  onAttachmentRequest,
-  onAttachmentError,
-  attachmentAccept,
   extensionTools = false,
-  mode = "full",
-  terminalModeControl,
-}: ComposerPlusMenuProps) {
-  if (mode === "upload-only") {
-    if (!attachmentsEnabled && !onAttachmentRequest) return null;
-    return (
-      <UploadOnlyAttachButton
-        addAttachment={addAttachment}
-        attachmentsEnabled={attachmentsEnabled}
-        onAttachmentRequest={onAttachmentRequest}
-        onAttachmentError={onAttachmentError}
-        attachmentAccept={attachmentAccept}
-      />
-    );
-  }
-  if (mode === "terminal" && terminalModeControl) {
-    return (
-      <ComposerPlusMenuTerminal terminalModeControl={terminalModeControl} />
-    );
-  }
-  return (
-    <ComposerPlusMenuFull
-      onSelectMode={onSelectMode}
-      addAttachment={addAttachment}
-      attachmentsEnabled={attachmentsEnabled}
-      onAttachmentRequest={onAttachmentRequest}
-      onAttachmentError={onAttachmentError}
-      attachmentAccept={attachmentAccept}
-      extensionTools={extensionTools}
-    />
-  );
-}
-
-function ComposerPlusMenuTerminal({
-  terminalModeControl,
-}: Pick<ComposerPlusMenuProps, "terminalModeControl">) {
-  const [open, setOpen] = useState(false);
-
-  if (!terminalModeControl) return null;
-
-  const handlePrimaryAction = () => {
-    if (!terminalModeControl.enabled) {
-      terminalModeControl.onChange(true);
-      setOpen(false);
-      return;
-    }
-    terminalModeControl.onNewTerminal?.();
-    setOpen(false);
-  };
-
-  return (
-    <>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <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 */
-          >
-            <IconPlus className="h-4 w-4" />
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          align="start"
-          sideOffset={8}
-          className="w-56 border-input bg-muted p-1 text-foreground"
-          onOpenAutoFocus={(event) => event.preventDefault()}
-        >
-          <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}
-          >
-            <IconTerminal2
-              size={14}
-              className="shrink-0 text-muted-foreground"
-              aria-hidden="true"
-            />
-            <span>
-              {terminalModeControl.enabled ? "New terminal" : "Start terminal"}
-            </span>
-          </button>
-          <div className="my-1 border-t border-border/70" />
-          <div className="flex items-center justify-between gap-3 px-2.5 py-2">
-            <span className="text-[12px] font-medium text-foreground">
-              {"Terminal mode" /* i18n-ignore -- portable toolkit label */}
-            </span>
-            <Switch
-              checked={terminalModeControl.enabled}
-              onCheckedChange={terminalModeControl.onChange}
-              aria-label="Terminal mode" /* i18n-ignore -- portable toolkit label */
-            />
-          </div>
-        </PopoverContent>
-      </Popover>
-    </>
-  );
-}
-
-function ComposerPlusMenuFull({
-  onSelectMode,
-  addAttachment,
-  attachmentsEnabled,
-  onAttachmentRequest,
-  onAttachmentError,
-  attachmentAccept,
-  extensionTools,
+  disabled,
+  onRestoreFocus,
 }: Pick<
   ComposerPlusMenuProps,
-  | "addAttachment"
-  | "attachmentsEnabled"
-  | "onAttachmentRequest"
-  | "onSelectMode"
-  | "onAttachmentError"
-  | "attachmentAccept"
-  | "extensionTools"
+  "onSelectMode" | "extensionTools" | "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<View>("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" as const;
   const createMcp = resources.useCreateMcpServer!();
   const McpIntegrationDialog = resources.McpIntegrationDialog;
-
-  const fileUploadRef = useRef<HTMLInputElement>(null);
+  const [view, setView] = useState<View>("menu");
   const skillFileInputRef = useRef<HTMLInputElement>(null);
-  const skillHoverTimerRef = useRef<number | null>(null);
+  const skillControls = useRef<ComposerContextPageControls | null>(null);
+  const skillEpoch = useRef(0);
+  const skillRequest = useRef<AbortController | null>(null);
+  const skillCloseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [skillUploadSlug, setSkillUploadSlug] = useState("");
   const [skillUploadContent, setSkillUploadContent] = useState("");
   const [skillUploadFileName, setSkillUploadFileName] = useState("");
@@ -465,82 +241,70 @@ function ComposerPlusMenuFull({
     message: string;
   } | null>(null);
   const [skillUploadBusy, setSkillUploadBusy] = useState(false);
-  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") {
-      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: 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);
+    if (!disabled) return;
+    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: FileList | null) => {
-    if (!attachmentsEnabled || !files || files.length === 0) return;
+  const handleSkillFileSelected = async (file: 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(
+      if (skillEpoch.current !== epoch) return;
+      setSkillUploadStatus({
+        kind: "err",
+        message: formatAttachmentError(
           error,
-          t("agentChat.composer.uploadFailed", {
-            defaultValue: "Could not upload the selected file.",
+          t("agentChat.composer.skill.saveFailed", {
+            defaultValue: "Failed to save skill file",
           }),
         ),
-      );
+      });
     }
   };
-
   const submitSkillUpload = async () => {
-    if (skillUploadBusy) return;
+    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);
@@ -550,6 +314,7 @@ function ComposerPlusMenuFull({
         adapters.resolvePath!("/_agent-native/resources"),
         {
           method: "POST",
+          signal: abort.signal,
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             path,
@@ -560,7 +325,7 @@ function ComposerPlusMenuFull({
         },
       );
       if (!res.ok) {
-        const body = await res.text().catch(() => "");
+        const body = await res.text();
         throw new Error(
           body ||
             t("agentChat.composer.skill.uploadFailedStatus", {
@@ -569,6 +334,7 @@ function ComposerPlusMenuFull({
             }),
         );
       }
+      if (skillEpoch.current !== epoch) return;
       setSkillUploadStatus({
         kind: "ok",
         message: t("agentChat.composer.skill.added", {
@@ -576,462 +342,387 @@ function ComposerPlusMenuFull({
           defaultValue: `Skill "${skillUploadFileName || `${slug}/SKILL.md`}" added`,
         }),
       });
-      window.setTimeout(() => setOpen(false), 1200);
-    } catch (err: any) {
+      skillCloseTimer.current = setTimeout(() => {
+        if (skillEpoch.current === epoch) skillControls.current?.onClose();
+      }, 1200);
+    } catch (error) {
+      if (skillEpoch.current !== epoch) return;
       setSkillUploadStatus({
         kind: "err",
-        message:
-          err?.message ||
+        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: {
-    icon: React.ReactNode;
-    label: string;
-    desc: string;
-    action: (anchor?: HTMLElement) => void;
-    hoverAction?: () => void;
-    isSkill?: boolean;
-  }[] = [
-    ...(attachmentsEnabled || onAttachmentRequest
-      ? [
-          {
-            icon: <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: ComposerContextMenuItem[] = [
     {
-      icon: <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: <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: <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: <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: <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: <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" ? (
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              disabled={!onSelectMode}
+              onSelect={() => {
+                controls.onClose();
+                onSelectMode?.("skill");
+              }}
+            >
+              {t("agentChat.composer.skill.createNew", {
+                defaultValue: "Create new skill",
+              })}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={(event) => {
+                event.preventDefault();
+                skillFileInputRef.current?.click();
+              }}
+            >
+              {t("agentChat.composer.skill.uploadFile", {
+                defaultValue: "Upload skill file",
+              })}
+            </DropdownMenuItem>
+            {skillUploadStatus && (
+              <div role="alert" className="p-3 text-sm text-destructive">
+                {skillUploadStatus.message}
+              </div>
+            )}
+          </DropdownMenuGroup>
+        ) : (
+          <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();
+            }}
+          >
+            <Button
+              type="button"
+              variant="ghost"
+              className="justify-start"
+              onClick={resetSkillUpload}
+            >
+              <IconArrowLeft className="rtl:-scale-x-100" />
+              {t("agentChat.composer.skill.back", { defaultValue: "Back" })}
+            </Button>
+            <p className="break-words text-xs text-muted-foreground">
+              {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.`,
+              })}
+            </p>
+            <Label htmlFor={`${formId}-name`}>
+              {t("agentChat.composer.skill.name", {
+                defaultValue: "Skill name",
+              })}
+            </Label>
+            <Input
+              id={`${formId}-name`}
+              autoFocus
+              value={skillUploadSlug}
+              disabled={skillUploadBusy}
+              onChange={(event) => setSkillUploadSlug(event.target.value)}
+              placeholder="my-skill"
+            />
+            <p className="break-words text-xs text-muted-foreground">
+              {t("agentChat.composer.skill.savedAt", {
+                defaultValue: "Saved at",
+              })}{" "}
+              <span className="font-mono">
+                skills/{slugifyName(skillUploadSlug || "uploaded-skill")}
+                /SKILL.md
+              </span>
+            </p>
+            <Label htmlFor={`${formId}-content`}>
+              {t("agentChat.composer.skill.content", {
+                defaultValue: "Content",
+              })}
+            </Label>
+            <Textarea
+              id={`${formId}-content`}
+              value={skillUploadContent}
+              disabled={skillUploadBusy}
+              onChange={(event) => setSkillUploadContent(event.target.value)}
+              rows={10}
+              className="font-mono text-xs"
+            />
+            {skillUploadStatus && (
+              <div
+                role={skillUploadStatus.kind === "err" ? "alert" : "status"}
+                className={cn(
+                  "break-words text-xs",
+                  skillUploadStatus.kind === "err"
+                    ? "text-destructive"
+                    : "text-muted-foreground",
+                )}
+              >
+                {skillUploadStatus.message}
+              </div>
+            )}
+            <div className="flex flex-wrap justify-end gap-2">
+              <Button type="button" variant="ghost" onClick={resetSkillUpload}>
+                {t("agentChat.common.cancel", { defaultValue: "Cancel" })}
+              </Button>
+              <Button
+                type="submit"
+                disabled={
+                  skillUploadBusy ||
+                  skillUploadStatus?.kind === "ok" ||
+                  !skillUploadContent.trim() ||
+                  !skillUploadSlug.trim()
+                }
+              >
+                {skillUploadBusy ? (
+                  <IconLoader2 className="animate-spin" />
+                ) : (
+                  t("agentChat.common.save", { defaultValue: "Save" })
+                )}
+              </Button>
+            </div>
+          </form>
+        );
+      },
     },
   ];
 
+  return {
+    items,
+    restoreFocus: () => {
+      if (!overlayOpen.current) onRestoreFocus?.();
+    },
+    overlays: (
+      <>
+        <input
+          ref={skillFileInputRef}
+          type="file"
+          accept=".md,text/markdown"
+          hidden
+          onChange={(event) => {
+            const file = event.target.files?.[0];
+            event.target.value = "";
+            if (file) void handleSkillFileSelected(file);
+          }}
+        />
+        {McpIntegrationDialog ? (
+          <McpIntegrationDialog
+            open={mcpDialogOpen}
+            onOpenChange={(open: boolean) => {
+              overlayOpen.current = open;
+              setMcpDialogOpen(open);
+              if (!open) onRestoreFocus?.();
+            }}
+            defaultScope="user"
+            canCreateOrgMcp={canCreateOrgMcp}
+            hasOrg={Boolean(org?.orgId)}
+            onCreateMcpServer={(args: unknown) => createMcp.mutateAsync(args)}
+          />
+        ) : null}
+        <AssetsPickerModal
+          open={assetsPickerOpen}
+          onOpenChange={(open) => {
+            overlayOpen.current = open;
+            setAssetsPickerOpen(open);
+            if (!open) onRestoreFocus?.();
+          }}
+        />
+      </>
+    ),
+  };
+}
+
+function ComposerFullContextMenu(props: ComposerPlusMenuProps) {
+  const defaults = useComposerDefaultActions(props);
+  const runtime = useComposerRuntime();
   return (
     <>
-      {/* Hidden input to trigger the native file upload with explicit errors. */}
-      <input
-        ref={fileUploadRef}
-        type="file"
-        multiple
-        accept={attachmentAccept}
-        className="hidden"
-        disabled={!attachmentsEnabled}
-        onChange={(event) => {
-          void handleFilesSelected(event.target.files);
-          event.target.value = "";
-        }}
-      />
-      <input
-        ref={skillFileInputRef}
-        type="file"
-        accept=".md,text/markdown"
-        className="hidden"
-        onChange={(e) => {
-          void handleSkillFileSelected(e.target.files);
-          e.target.value = "";
-        }}
+      <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}
+    </>
+  );
+}
 
-      <Popover open={open} onOpenChange={setOpen}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span className="inline-flex shrink-0">
-              <PopoverTrigger asChild>
-                <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"
-                >
-                  <IconPlus className="h-4 w-4" />
-                </button>
-              </PopoverTrigger>
-            </span>
-          </TooltipTrigger>
-          <TooltipContent>
-            {t("agentChat.composer.add", { defaultValue: "Add..." })}
-          </TooltipContent>
-        </Tooltip>
-        <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()}
-        >
-          {view === "menu" && (
-            <div className="py-1">
-              {menuItems.map((item) => {
-                const isSkill = item.isSkill === true;
-                return (
-                  <div
-                    key={item.label}
-                    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;
-                      }
-                    }}
-                  >
-                    <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",
-                      )}
-                    >
-                      <span className="text-muted-foreground">{item.icon}</span>
-                      <span className="flex min-w-0 items-center gap-0.5">
-                        <span className="min-w-0 truncate text-[12px] font-medium text-foreground">
-                          {item.label}
-                        </span>
-                        <MenuItemHelp
-                          label={item.label}
-                          description={item.desc}
-                        />
-                      </span>
-                    </button>
-                    {isSkill && (
-                      <span className="me-3 ms-auto text-muted-foreground/60">
-                        ›
-                      </span>
-                    )}
-                    {isSkill && skillFlyoutOpen && (
-                      <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",
-                        )}
-                      >
-                        <div className="flex items-center hover:bg-accent/50">
-                          <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"
-                          >
-                            <span className="text-muted-foreground">
-                              <IconBulb className="h-3.5 w-3.5" />
-                            </span>
-                            <span className="flex min-w-0 items-center gap-0.5">
-                              <span className="min-w-0 truncate text-[12px] font-medium text-foreground">
-                                {t("agentChat.composer.skill.createNew", {
-                                  defaultValue: "Create new skill",
-                                })}
-                              </span>
-                              <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",
-                                  },
-                                )}
-                              />
-                            </span>
-                          </button>
-                        </div>
-                        <div className="flex items-center hover:bg-accent/50">
-                          <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"
-                          >
-                            <span className="text-muted-foreground">
-                              <IconUpload className="h-3.5 w-3.5" />
-                            </span>
-                            <span className="flex min-w-0 items-center gap-0.5">
-                              <span className="min-w-0 truncate text-[12px] font-medium text-foreground">
-                                {t("agentChat.composer.skill.uploadFile", {
-                                  defaultValue: "Upload skill file",
-                                })}
-                              </span>
-                              <MenuItemHelp
-                                label={t(
-                                  "agentChat.composer.skill.uploadFile",
-                                  {
-                                    defaultValue: "Upload skill file",
-                                  },
-                                )}
-                                description={t(
-                                  "agentChat.composer.skill.uploadDescription",
-                                  {
-                                    defaultValue:
-                                      "Import an existing SKILL.md file",
-                                  },
-                                )}
-                              />
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          )}
-
-          {view === "skill-upload" && (
-            <div className="p-3">
-              <button
-                type="button"
-                onClick={() => setView("menu")}
-                className="mb-1.5 flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground"
-              >
-                <IconArrowLeft className="h-3 w-3 rtl:-scale-x-100" />
-                {t("agentChat.composer.skill.back", {
-                  defaultValue: "Back",
-                })}
-              </button>
-              <label className="mb-1 block text-[11px] font-semibold text-foreground">
-                {t("agentChat.composer.skill.uploadFile", {
-                  defaultValue: "Upload skill file",
-                })}
-              </label>
-              <p className="mb-2 text-[10px] leading-relaxed text-muted-foreground/60">
-                {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.`,
-                })}
-              </p>
-              <label className="mb-1 block text-[10px] font-medium text-muted-foreground">
-                {t("agentChat.composer.skill.name", {
-                  defaultValue: "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">
-                {t("agentChat.composer.skill.savedAt", {
-                  defaultValue: "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">
-                {t("agentChat.composer.skill.content", {
-                  defaultValue: "Content",
-                })}
-              </label>
-              <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 && (
-                <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",
-                  )}
-                >
-                  {skillUploadStatus.message}
-                </div>
-              )}
-              <div className="mt-2.5 flex justify-end gap-2">
-                <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"
-                >
-                  {t("agentChat.common.cancel", {
-                    defaultValue: "Cancel",
-                  })}
-                </button>
-                <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"
-                >
-                  {skillUploadBusy ? (
-                    <IconLoader2 className="h-3 w-3 animate-spin" />
-                  ) : (
-                    t("agentChat.common.save", { defaultValue: "Save" })
-                  )}
-                </button>
-              </div>
-            </div>
-          )}
-        </PopoverContent>
-      </Popover>
-      {McpIntegrationDialog ? (
-        <McpIntegrationDialog
-          open={mcpDialogOpen}
-          onOpenChange={setMcpDialogOpen}
-          defaultScope={defaultMcpScope}
-          canCreateOrgMcp={canCreateOrgMcp}
-          hasOrg={hasOrg}
-          onCreateMcpServer={(args: unknown) => createMcp.mutateAsync(args)}
-        />
-      ) : null}
-      <AssetsPickerModal
-        open={assetsPickerOpen}
-        onOpenChange={setAssetsPickerOpen}
+export function ComposerPlusMenu({
+  mode = "full",
+  contextMenuItems = [],
+  terminalModeControl,
+  attachmentsEnabled = true,
+  ...props
+}: ComposerPlusMenuProps) {
+  const runtime = useComposerRuntime();
+  const t = useComposerRuntimeAdapters().translate!;
+  if (mode === "full") {
+    return (
+      <ComposerFullContextMenu
+        {...props}
+        attachmentsEnabled={attachmentsEnabled}
+        contextMenuItems={contextMenuItems}
       />
-    </>
+    );
+  }
+  const terminalItems: ComposerContextMenuItem[] = 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 (
+    <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
+      }
+    />
   );
 }