@agent-native/toolkit 0.218.0 → 0.220.0-nightly-20261023183804

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

@@ -71,7 +71,10 @@ afterEach(() => {
 async function settle() {
   await new Promise((resolve) => setTimeout(resolve, 0));
 }
-async function mount(props: Partial<PromptComposerProps> = {}) {
+async function mount(
+  props: Partial<PromptComposerProps> = {},
+  settleAfterRender = true,
+) {
   const composerRef = React.createRef<TiptapComposerHandle>();
   const onSubmit = vi.fn();
   await act(async () => {
@@ -92,7 +95,7 @@ async function mount(props: Partial<PromptComposerProps> = {}) {
         />
       </ComposerRuntimeAdaptersProvider>,
     );
-    await settle();
+    if (settleAfterRender) await settle();
   });
   return { composerRef, onSubmit };
 }
@@ -722,4 +725,95 @@ describe("shared default action preservation", () => {
     expect(document.querySelector('[role="status"]')).toBeNull();
     expect(item("Upload skill file")).toBeDefined();
   });
+
+  it("resumes skill-file review after the native picker dismisses the menu", async () => {
+    await mount();
+    await open();
+    await choose("Create Skill");
+    await choose("Upload skill file");
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 120));
+    });
+
+    const input = container.querySelector<HTMLInputElement>(
+      'input[accept=".md,text/markdown"]',
+    )!;
+    const file = new File(["# Test skill\nDo the test."], "Test Skill.md", {
+      type: "text/markdown",
+    });
+    Object.defineProperty(input, "files", {
+      configurable: true,
+      value: [file],
+    });
+    await act(async () => {
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+      await settle();
+    });
+
+    const form = document.querySelector<HTMLFormElement>("[role=menu] form");
+    expect(form).not.toBeNull();
+    expect(form?.textContent).toContain(
+      "Review the content from Test Skill.md before saving.",
+    );
+    expect(form?.querySelector("textarea")?.value).toBe(
+      "# Test skill\nDo the test.",
+    );
+  });
+
+  it("restores the skill submenu when the native picker is canceled", async () => {
+    await mount();
+    await open();
+    await choose("Create Skill");
+    await choose("Upload skill file");
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 120));
+    });
+
+    const input = container.querySelector<HTMLInputElement>(
+      'input[accept=".md,text/markdown"]',
+    )!;
+    await act(async () => {
+      input.dispatchEvent(new Event("cancel"));
+      await settle();
+    });
+
+    expect(labels()).toContain("Upload skill file");
+  });
+
+  it("does not resume the skill page if the composer is disabled", async () => {
+    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();
+    }
+  });
 });

package/src/composer/ComposerPlusMenu.tsx

@@ -92,6 +92,9 @@ export function useComposerDefaultActions({
   const [view, setView] = useState<View>("menu");
   const skillFileInputRef = useRef<HTMLInputElement>(null);
   const skillControls = useRef<ComposerContextPageControls | null>(null);
+  const skillFilePickerOpen = useRef(false);
+  const skillPageDismissedWhilePickerOpen = useRef(false);
+  const skillResumeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const skillEpoch = useRef(0);
   const skillRequest = useRef<AbortController | null>(null);
   const skillCloseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -104,13 +107,48 @@ export function useComposerDefaultActions({
   } | null>(null);
   const [skillUploadBusy, setSkillUploadBusy] = useState(false);
   const formId = useId();
-  const cancelSkillWork = useCallback(() => {
+  const invalidateSkillWork = useCallback(() => {
     skillEpoch.current++;
     skillRequest.current?.abort();
     skillRequest.current = null;
     if (skillCloseTimer.current !== null) clearTimeout(skillCloseTimer.current);
     skillCloseTimer.current = null;
   }, []);
+  const cancelSkillWork = useCallback(() => {
+    skillFilePickerOpen.current = false;
+    skillPageDismissedWhilePickerOpen.current = false;
+    if (skillResumeTimer.current !== null)
+      clearTimeout(skillResumeTimer.current);
+    skillResumeTimer.current = null;
+    invalidateSkillWork();
+  }, [invalidateSkillWork]);
+  const finishSkillFilePicker = useCallback(() => {
+    skillFilePickerOpen.current = false;
+    if (!skillPageDismissedWhilePickerOpen.current) return;
+    skillPageDismissedWhilePickerOpen.current = false;
+    if (skillResumeTimer.current !== null)
+      clearTimeout(skillResumeTimer.current);
+    skillResumeTimer.current = setTimeout(() => {
+      skillResumeTimer.current = null;
+      skillControls.current?.onResume();
+    }, 0);
+  }, []);
+  const dismissSkillPage = useCallback(() => {
+    if (skillFilePickerOpen.current) {
+      skillPageDismissedWhilePickerOpen.current = true;
+      return;
+    }
+    cancelSkillWork();
+  }, [cancelSkillWork]);
+  useEffect(() => {
+    const input = skillFileInputRef.current;
+    input?.addEventListener("cancel", finishSkillFilePicker);
+    return () => {
+      input?.removeEventListener("cancel", finishSkillFilePicker);
+      if (skillResumeTimer.current !== null)
+        clearTimeout(skillResumeTimer.current);
+    };
+  }, [finishSkillFilePicker]);
   useEffect(() => cancelSkillWork, [cancelSkillWork, adapters.resolvePath]);
   useEffect(() => {
     if (!disabled) return;
@@ -128,7 +166,7 @@ export function useComposerDefaultActions({
     setSkillUploadBusy(false);
   };
   const handleSkillFileSelected = async (file: File) => {
-    cancelSkillWork();
+    invalidateSkillWork();
     const epoch = skillEpoch.current;
     setSkillUploadStatus(null);
     try {
@@ -298,7 +336,7 @@ export function useComposerDefaultActions({
         }),
       ],
       onSelect: resetSkillUpload,
-      onDismiss: cancelSkillWork,
+      onDismiss: dismissSkillPage,
       render: (controls) => {
         skillControls.current = controls;
         return view === "menu" ? (
@@ -317,7 +355,12 @@ export function useComposerDefaultActions({
             <DropdownMenuItem
               onSelect={(event) => {
                 event.preventDefault();
-                skillFileInputRef.current?.click();
+                const input = skillFileInputRef.current;
+                if (!input) return;
+                skillPageDismissedWhilePickerOpen.current = false;
+                skillFilePickerOpen.current = true;
+                controls.onClose({ restoreFocus: false });
+                input.click();
               }}
             >
               {t("agentChat.composer.skill.uploadFile", {
@@ -451,6 +494,7 @@ export function useComposerDefaultActions({
           onChange={(event) => {
             const file = event.target.files?.[0];
             event.target.value = "";
+            finishSkillFilePicker();
             if (file) void handleSkillFileSelected(file);
           }}
         />

package/src/composer/TiptapComposer.tsx

@@ -2207,7 +2207,7 @@ function ModelSelector({
               ? `. Agent: ${selectedAgentLabel}`
               : ""
           }`}
-          className="agent-composer-model-button flex min-w-0 max-w-none shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[12px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+          className="agent-composer-model-button flex min-w-0 max-w-none shrink items-center gap-1 overflow-hidden rounded-md px-2 py-1 text-[12px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground"
         >
           <span className="min-w-0 truncate">
             {selectedAgentOption?.icon ? (