@agent-native/toolkit 0.225.1 → 0.226.0-nightly-20261106182619

package/src/composer/ComposerPlusMenu.parity.spec.tsx

@@ -1,10 +1,12 @@
 // @vitest-environment happy-dom
 
 import { AssistantRuntimeProvider, useLocalRuntime } from "@assistant-ui/react";
+import { waitFor } from "@testing-library/react";
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import { Dialog, DialogContent, DialogTitle } from "../ui/dialog.js";
 import { TooltipProvider } from "../ui/tooltip.js";
 import { mergeComposerMenuItems } from "./ComposerPlusMenu.js";
 import { PromptComposer, type PromptComposerProps } from "./PromptComposer.js";
@@ -99,7 +101,7 @@ async function mount(
   });
   return { composerRef, onSubmit };
 }
-async function open(enterAddContext = false) {
+async function open(_enterAddContext = false) {
   const target = container.querySelector<HTMLElement>(
     'button[aria-label="Add context"]',
   );
@@ -115,13 +117,13 @@ async function open(enterAddContext = false) {
     );
     await settle();
   });
-  if (enterAddContext && labels().includes("Add context"))
-    await choose("Add context");
 }
 function item(label: string) {
   const row = Array.from(
     document.querySelectorAll<HTMLElement>('[role^="menuitem"]'),
-  ).find((row) => row.textContent?.trim() === label);
+  )
+    .reverse()
+    .find((row) => row.textContent?.trim() === label);
   expect(row, label).toBeDefined();
   return row!;
 }
@@ -159,7 +161,6 @@ function labels() {
   );
 }
 async function uploadSkill() {
-  await choose("Create Skill");
   await choose("Upload skill file");
   const input = container.querySelector<HTMLInputElement>(
     'input[accept=".md,text/markdown"]',
@@ -172,11 +173,11 @@ async function uploadSkill() {
     input.dispatchEvent(new Event("change", { bubbles: true }));
     await settle();
   });
-  return document.querySelector<HTMLFormElement>('[role="menu"] form')!;
+  return document.querySelector<HTMLFormElement>('[role="dialog"] form')!;
 }
 
 describe("shared default action preservation", () => {
-  it("preserves host action IDs and replaces defaults even inside a capability group", () => {
+  it("preserves overridden actions at the shared command slot without empty host groups", () => {
     const defaults = [
       { id: "integrations", label: "Setup", onSelect: vi.fn() },
       { id: "create-skill", label: "Skill", onSelect: vi.fn() },
@@ -191,8 +192,203 @@ describe("shared default action preservation", () => {
       },
     ];
     const merged = mergeComposerMenuItems(defaults, provided);
-    expect(merged).toEqual([provided[0], defaults[1]]);
-    expect(merged[0]).toBe(provided[0]);
+    expect(merged).toEqual([provided[0].children[0], defaults[1]]);
+  });
+
+  it("keeps host context at the root and keeps nested integration overrides in their labeled section", async () => {
+    const selectContext = vi.fn();
+    const selectIntegration = vi.fn();
+    await mount({
+      contextMenuItems: [
+        {
+          id: "host-group",
+          label: "Workspace",
+          children: [
+            {
+              id: "reference",
+              label: "Reference",
+              icon: <svg data-testid="reference-icon" />,
+              onSelect: selectContext,
+            },
+            {
+              id: "integrations",
+              label: "Use integration",
+              order: -100,
+              children: [
+                {
+                  id: "invoke",
+                  label: "Invoke service",
+                  intent: "invoke-integration",
+                  onSelect: selectIntegration,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+    await open();
+    expect(labels()).toEqual([
+      "Files and images",
+      "Workspace",
+      "Use integration",
+      "Schedule Task",
+      "Create Automation",
+      "Create Skill",
+      "Upload skill file",
+    ]);
+    await choose("Workspace");
+    expect(
+      item("Reference").querySelector('[data-testid="reference-icon"]'),
+    ).not.toBeNull();
+    expect(
+      Array.from(document.querySelectorAll('[role="menu"]')).at(-1)
+        ?.textContent,
+    ).not.toContain("Use integration");
+    await choose("Reference");
+    expect(selectContext).toHaveBeenCalledOnce();
+    await open();
+    expect(
+      document.querySelector('[role="group"][aria-labelledby]'),
+    ).not.toBeNull();
+    expect(labels()).toContain("Use integration");
+    expect(
+      labels().filter((label) => label === "Use integration"),
+    ).toHaveLength(1);
+    expect(labels()).not.toContain("Integrations");
+    await choose("Use integration");
+    await choose("Invoke service");
+    expect(selectIntegration).toHaveBeenCalledOnce();
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
+  });
+
+  it("preserves disabled ancestry when host commands replace defaults", async () => {
+    await mount({
+      contextMenuItems: [
+        {
+          id: "disabled",
+          label: "Unavailable",
+          disabled: true,
+          children: [
+            { id: "integrations", label: "Use integration", onSelect: vi.fn() },
+          ],
+        },
+      ],
+    });
+    await open();
+    expect(labels()).toEqual([
+      "Files and images",
+      "Use integration",
+      "Schedule Task",
+      "Create Automation",
+      "Create Skill",
+      "Upload skill file",
+    ]);
+    expect(item("Use integration").getAttribute("aria-disabled")).toBe("true");
+  });
+
+  it("routes nested integration commands separately from context siblings", async () => {
+    const invoke = vi.fn();
+    await mount({
+      contextMenuItems: [
+        {
+          id: "workspace",
+          label: "Workspace",
+          children: [
+            { id: "reference", label: "Reference", onSelect: vi.fn() },
+            {
+              id: "invoke",
+              label: "Use service",
+              intent: "invoke-integration",
+              onSelect: invoke,
+            },
+          ],
+        },
+      ],
+    });
+    await open();
+    await choose("Workspace");
+    expect(labels()).toContain("Reference");
+    expect(
+      Array.from(document.querySelectorAll('[role="menu"]')).at(-1)
+        ?.textContent,
+    ).not.toContain("Use service");
+    await act(async () =>
+      item("Reference").dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Escape",
+          bubbles: true,
+          cancelable: true,
+        }),
+      ),
+    );
+    await choose("Use service");
+    expect(invoke).toHaveBeenCalledOnce();
+  });
+
+  it("distinguishes file uploads from saved file references", async () => {
+    const { onSubmit, composerRef } = await mount({
+      mentionItems: [
+        {
+          id: "other",
+          label: "Other reference",
+          source: "resource",
+          refType: "custom",
+          section: "Other",
+        },
+        {
+          id: "connected",
+          label: "Connected agent",
+          source: "resource",
+          refType: "agent",
+          section: "Connected Agents",
+        },
+        {
+          id: "agent",
+          label: "Local agent",
+          source: "resource",
+          refType: "agent",
+          section: "Agents",
+        },
+        {
+          id: "brief",
+          label: "Launch brief",
+          source: "resource",
+          refType: "file",
+          refPath: "brief.md",
+          section: "Files",
+          icon: "file",
+        },
+      ],
+    });
+    await open();
+    expect(labels()).toEqual([
+      "Files and images",
+      "Search workspace…",
+      "Integrations",
+      "Schedule Task",
+      "Create Automation",
+      "Create Skill",
+      "Upload skill file",
+    ]);
+    await choose("Search workspace…");
+    expect(document.querySelector('[role="dialog"]')).not.toBeNull();
+    const option = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="option"]'),
+    ).find((element) => element.textContent === "Launch brief")!;
+    expect(option).toBeDefined();
+    await act(async () => option.click());
+    await act(async () => {
+      await composerRef.current?.submit?.();
+    });
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.any(Array),
+      expect.arrayContaining([
+        expect.objectContaining({ name: "Launch brief", path: "brief.md" }),
+      ]),
+      expect.anything(),
+    );
   });
 
   it.each(["full", "upload-only", "terminal", "hidden"] as const)(
@@ -212,15 +408,16 @@ describe("shared default action preservation", () => {
         const expected =
           mode === "full"
             ? [
-                "Upload File",
+                "Files and images",
+                "Integrations",
                 "Schedule Task",
                 "Create Automation",
-                "Integrations",
                 "Create Skill",
+                "Upload skill file",
               ]
             : mode === "terminal"
               ? ["New terminal", "CLI terminal mode"]
-              : ["Upload File"];
+              : ["Files and images"];
         expect(labels()).toEqual(expected);
       }
       if (mode === "full") {
@@ -234,11 +431,202 @@ describe("shared default action preservation", () => {
     },
   );
 
+  it("hands focus to a contributed dialog and restores the draft only after it closes", async () => {
+    adapters.resources!.useWorkspaceMenu = function useWorkspaceMenu({
+      onRestoreFocus,
+    }) {
+      const [visible, setVisible] = React.useState(false);
+      return {
+        scopeKey: "one",
+        items: [
+          {
+            id: "connect",
+            label: "Connect workspace",
+            section: "integrations",
+            opensDialog: true,
+            onSelect: () => setVisible(true),
+          },
+        ],
+        overlays: (
+          <Dialog open={visible} onOpenChange={setVisible}>
+            <DialogContent
+              aria-describedby={undefined}
+              onCloseAutoFocus={(event) => {
+                event.preventDefault();
+                onRestoreFocus?.();
+              }}
+            >
+              <DialogTitle>Connect workspace</DialogTitle>
+              <button onClick={() => setVisible(false)}>
+                Finish connection
+              </button>
+            </DialogContent>
+          </Dialog>
+        ),
+      };
+    };
+    await mount();
+    await open();
+    await choose("Connect workspace");
+    const dialog = document.querySelector('[role="dialog"]');
+    expect(dialog).not.toBeNull();
+    expect(dialog?.contains(document.activeElement)).toBe(true);
+    await act(async () => {
+      const done = Array.from(
+        document.querySelectorAll<HTMLButtonElement>('[role="dialog"] button'),
+      ).find((button) => button.textContent === "Finish connection");
+      if (!done) throw new Error("Missing connection control");
+      done.click();
+      await settle();
+    });
+    await act(async () => {
+      await new Promise(requestAnimationFrame);
+    });
+    await waitFor(() =>
+      expect(document.activeElement).toBe(
+        container.querySelector(".ProseMirror"),
+      ),
+    );
+  });
+
+  it.each(["full", "upload-only"] as const)(
+    "merges workspace contributions into labeled groups in %s and inserts their references",
+    async (mode) => {
+      const useWorkspaceMenu = vi.fn(
+        ({
+          onSelectIntegration,
+        }: {
+          enabled: boolean;
+          onSelectIntegration: (reference: {
+            label: string;
+            source: string;
+            refType: string;
+            refId: string;
+          }) => void;
+        }) => ({
+          scopeKey: "org:one",
+          items: [
+            {
+              id: "calendar",
+              label: "Use calendar",
+              section: "integrations" as const,
+              onSelect: () =>
+                onSelectIntegration({
+                  label: "Calendar",
+                  source: "workspace-integration",
+                  refType: "integration",
+                  refId: "calendar",
+                }),
+            },
+          ],
+        }),
+      );
+      adapters.resources!.useWorkspaceMenu = useWorkspaceMenu;
+      const { composerRef, onSubmit } = await mount({
+        plusMenuMode: mode,
+        contextMenuItems: [
+          {
+            id: "brief",
+            label: "Reference brief",
+            section: "context",
+            onSelect: vi.fn(),
+          },
+        ],
+      });
+      expect(useWorkspaceMenu).toHaveBeenLastCalledWith(
+        expect.objectContaining({ enabled: false }),
+      );
+      await open();
+      expect(useWorkspaceMenu).toHaveBeenLastCalledWith(
+        expect.objectContaining({ enabled: true }),
+      );
+      const groups = Array.from(
+        document.querySelectorAll<HTMLElement>(
+          '[role="group"][aria-labelledby]',
+        ),
+      );
+      expect(
+        groups.map(
+          (group) =>
+            document.getElementById(group.getAttribute("aria-labelledby")!)
+              ?.textContent,
+        ),
+      ).toEqual(
+        mode === "full"
+          ? ["Add context", "Integrations", "Commands"]
+          : ["Add context", "Integrations"],
+      );
+      expect(groups[1].textContent).toContain("Use calendar");
+      expect(groups[1].textContent).not.toContain("Reference brief");
+      expect(labels()).not.toContain("Integrations");
+      await choose("Use calendar");
+      await act(async () => composerRef.current!.submit());
+      expect(onSubmit.mock.calls[0][2]).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            refType: "integration",
+            refId: "calendar",
+          }),
+        ]),
+      );
+    },
+  );
+
+  it.each(["upload-only", "hidden"] as const)(
+    "keeps contributed integration commands separate in %s without adding default modes",
+    async (mode) => {
+      const attach = vi.fn();
+      const invoke = vi.fn();
+      await mount({
+        plusMenuMode: mode,
+        contextMenuItems: [
+          {
+            id: "source",
+            label: "Reference brief",
+            order: 20,
+            onSelect: attach,
+          },
+          {
+            id: "workspace-tools",
+            label: "Workspace tools",
+            intent: "invoke-integration",
+            children: [
+              { id: "provider", label: "Connected provider", onSelect: invoke },
+            ],
+          },
+        ],
+      });
+      await open();
+      expect(labels()).toEqual([
+        "Files and images",
+        "Reference brief",
+        "Workspace tools",
+      ]);
+      expect(labels()).toContain("Workspace tools");
+      for (const label of [
+        "Schedule Task",
+        "Create Automation",
+        "Create Skill",
+        "Upload skill file",
+        "Integrations",
+      ])
+        expect(labels()).not.toContain(label);
+      await choose("Workspace tools");
+      await choose("Connected provider");
+      expect(invoke).toHaveBeenCalledOnce();
+      expect(attach).not.toHaveBeenCalled();
+      expect(useOrg).not.toHaveBeenCalled();
+      await open();
+      await choose("Reference brief");
+      expect(attach).toHaveBeenCalledOnce();
+    },
+  );
+
   it.each([
     ["Schedule Task", "Create a recurring job: Draft", "manage-jobs"],
     ["Create Automation", "Create an automation: Draft", "manage-automations"],
     ["Create Extension", "Create an extension: Draft", "create-extension"],
-    ["Create new skill", "Create a skill: Draft", "resources"],
+    ["Create Skill", "Create a skill: Draft", "resources"],
   ])(
     "+ submits %s instructions through the accepted host path",
     async (action, message, context) => {
@@ -249,8 +637,7 @@ describe("shared default action preservation", () => {
         extensionTools: true,
       });
       await open();
-      expect(labels()).not.toContain("Host source");
-      if (action === "Create new skill") await choose("Create Skill");
+      expect(labels()).toContain("Host source");
       await choose(action);
       expect(
         container.querySelector('[data-agent-composer-slot="mode-row"]'),
@@ -331,14 +718,14 @@ describe("shared default action preservation", () => {
     await mount({ attachmentsEnabled: false, onAttachmentRequest });
     await open();
     expect(onAttachmentRequest).not.toHaveBeenCalled();
-    await choose("Upload File");
+    await choose("Files and images");
     await act(async () => {
       await new Promise(requestAnimationFrame);
     });
     expect(onAttachmentRequest).toHaveBeenCalledOnce();
     await mount({ attachmentsEnabled: false });
     await open();
-    expect(labels()).not.toContain("Upload File");
+    expect(labels()).not.toContain("Files and images");
     await close();
     await mount();
     const input = container.querySelector<HTMLInputElement>(
@@ -346,7 +733,7 @@ describe("shared default action preservation", () => {
     )!;
     const click = vi.spyOn(input, "click").mockImplementation(() => {});
     await open();
-    await choose("Upload File");
+    await choose("Files and images");
     expect(click).toHaveBeenCalledOnce();
   });
 
@@ -434,7 +821,7 @@ describe("shared default action preservation", () => {
       contextMenuItems: [{ id: "host", label: "Host source", onSelect }],
     });
     await open(true);
-    expect(labels()).toEqual(["Upload File", "Add context", "Host source"]);
+    expect(labels()).toEqual(["Files and images", "Host source"]);
     await choose("Host source");
     expect(onSelect).toHaveBeenCalledOnce();
     expect(useOrg).not.toHaveBeenCalled();
@@ -659,24 +1046,32 @@ describe("shared default action preservation", () => {
     );
   });
 
-  it("keeps chat actions at the root, nests context sources, and omits Generate Image", async () => {
+  it("labels chat actions as Commands and keeps context at the root", async () => {
     await mount({
       contextMenuItems: [
         { id: "host-source", label: "Host source", onSelect: vi.fn() },
       ],
     });
     await open();
+    expect(labels()).toEqual([
+      "Files and images",
+      "Host source",
+      "Integrations",
+      "Schedule Task",
+      "Create Automation",
+      "Create Skill",
+      "Upload skill file",
+    ]);
     expect(labels()).toContain("Schedule Task");
     expect(labels()).toContain("Create Automation");
     expect(labels()).toContain("Create Skill");
     expect(labels()).not.toContain("Generate Image");
-    expect(labels()).not.toContain("Host source");
-    await choose("Add context");
+    expect(labels()).toContain("Host source");
     expect(labels()).toContain("Host source");
     expect(labels()).toContain("Schedule Task");
   });
 
-  it("cancels a skill save when its submenu closes and retains retry after errors", async () => {
+  it("cancels a skill save when its dialog closes and retains retry after errors", async () => {
     let resolve!: (response: Response) => void;
     const fetch = vi
       .fn()
@@ -717,19 +1112,21 @@ describe("shared default action preservation", () => {
       await settle();
     });
     expect(request.signal?.aborted).toBe(true);
-    expect(document.querySelector('[role="menu"] form')).toBeNull();
+    expect(document.querySelector('[role="dialog"] form')).toBeNull();
     await act(async () => {
       resolve(new Response("{}"));
       await settle();
     });
-    expect(document.querySelector('[role="status"]')).toBeNull();
+    expect(
+      document.querySelector('[role="status"]')?.textContent,
+    ).not.toContain("added");
+    await open();
     expect(item("Upload skill file")).toBeDefined();
   });
 
-  it("resumes skill-file review after the native picker dismisses the menu", async () => {
+  it("opens skill-file review in a dialog after the native picker returns", async () => {
     await mount();
     await open();
-    await choose("Create Skill");
     await choose("Upload skill file");
 
     await act(async () => {
@@ -751,7 +1148,7 @@ describe("shared default action preservation", () => {
       await settle();
     });
 
-    const form = document.querySelector<HTMLFormElement>("[role=menu] form");
+    const form = document.querySelector<HTMLFormElement>("[role=dialog] form");
     expect(form).not.toBeNull();
     expect(form?.textContent).toContain(
       "Review the content from Test Skill.md before saving.",
@@ -761,10 +1158,9 @@ describe("shared default action preservation", () => {
     );
   });
 
-  it("restores the skill submenu when the native picker is canceled", async () => {
+  it("leaves the menu closed when the native picker is canceled", async () => {
     await mount();
     await open();
-    await choose("Create Skill");
     await choose("Upload skill file");
 
     await act(async () => {
@@ -779,41 +1175,25 @@ describe("shared default action preservation", () => {
       await settle();
     });
 
-    expect(labels()).toContain("Upload skill file");
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
+    expect(document.querySelector('[role="menu"]')).toBeNull();
   });
 
-  it("does not resume the skill page if the composer is disabled", async () => {
+  it("closes skill review and aborts its pending save when the composer is disabled", async () => {
+    const fetch = vi.fn(() => new Promise<Response>(() => {}));
+    vi.stubGlobal("fetch", fetch);
     await mount();
     await open();
-    await choose("Create Skill");
-    await choose("Upload skill file");
-
-    const input = container.querySelector<HTMLInputElement>(
-      'input[accept=".md,text/markdown"]',
-    )!;
-    vi.useFakeTimers();
-    try {
-      const scheduledTimeouts = vi.spyOn(globalThis, "setTimeout");
-      const clearedTimeouts = vi.spyOn(globalThis, "clearTimeout");
-      const timersBeforeCancel = vi.getTimerCount();
-      const timeoutCallIndex = scheduledTimeouts.mock.calls.length;
-      act(() => input.dispatchEvent(new Event("cancel")));
-      expect(vi.getTimerCount()).toBe(timersBeforeCancel + 1);
-      const resumeTimer =
-        scheduledTimeouts.mock.results[timeoutCallIndex]?.value;
-      expect(resumeTimer).toBeDefined();
-
-      await mount({ disabled: true }, false);
-      expect(clearedTimeouts).toHaveBeenCalledWith(resumeTimer);
-
-      await act(async () => {
-        await vi.advanceTimersByTimeAsync(0);
-      });
-
-      expect(document.querySelector("[role=menu] form")).toBeNull();
-      expect(labels()).not.toContain("Upload skill file");
-    } finally {
-      vi.useRealTimers();
-    }
+    const form = await uploadSkill();
+    await act(async () => {
+      form.dispatchEvent(
+        new Event("submit", { bubbles: true, cancelable: true }),
+      );
+      await settle();
+    });
+    const request = fetch.mock.calls[0][1] as RequestInit;
+    await mount({ disabled: true });
+    expect(request.signal?.aborted).toBe(true);
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
   });
 });