fix(web): prevent duplicate skill autosaves

web/features/skills/__tests__/detail-page.spec.tsx

@@ -438,6 +438,45 @@ describe('SkillDetailPage', () => {
     })
   })
 
+  it('sends only one autosave request while the first save is pending', async () => {
+    const user = userEvent.setup()
+    mocks.saveDraftFileMutationFn.mockImplementation(() => new Promise(() => undefined))
+    renderSkillDetailPage()
+
+    await user.click(
+      await screen.findByRole('button', {
+        name: 'agentV2.skillManagement.detail.markdownSourceMode',
+      }),
+    )
+    await user.type(getSourceEditor(), '\nNew instructions')
+
+    await waitFor(
+      () => {
+        expect(mocks.saveDraftFileMutationFn).toHaveBeenCalled()
+      },
+      { timeout: 2500 },
+    )
+
+    expect(mocks.saveDraftFileMutationFn).toHaveBeenCalledTimes(1)
+  })
+
+  it('saves dirty content once when the editor unmounts before autosave', async () => {
+    const user = userEvent.setup()
+    const { unmount } = renderSkillDetailPage()
+
+    await user.click(
+      await screen.findByRole('button', {
+        name: 'agentV2.skillManagement.detail.markdownSourceMode',
+      }),
+    )
+    await user.type(getSourceEditor(), '\nNew instructions')
+    unmount()
+
+    await waitFor(() => {
+      expect(mocks.saveDraftFileMutationFn).toHaveBeenCalledTimes(1)
+    })
+  })
+
   it('saves the live display name into SKILL.md before publishing', async () => {
     const user = userEvent.setup()
     renderSkillDetailPage()

web/features/skills/detail-page.tsx

@@ -3873,8 +3873,11 @@ function FileEditor({
       updateSkillMetadata,
     ],
   )
+  const canEditRef = useRef(canEdit)
+  const saveDraftContentRef = useRef(saveDraftContent)
 
   fileRef.current = file
+  canEditRef.current = canEdit
 
   useEffect(() => {
     const currentFile = fileRef.current
@@ -3911,14 +3914,18 @@ function FileEditor({
     return () => window.clearTimeout(timer)
   }, [canEdit, draftContent, saveDraftContent, saveStatus])
 
+  useEffect(() => {
+    saveDraftContentRef.current = saveDraftContent
+  }, [saveDraftContent])
+
   useEffect(() => {
     return () => {
-      if (!canEdit) return
+      if (!canEditRef.current) return
       if (draftContentRef.current === lastSavedContentRef.current) return
 
-      void saveDraftContent(draftContentRef.current)
+      void saveDraftContentRef.current(draftContentRef.current)
     }
-  }, [canEdit, saveDraftContent])
+  }, [])
 
   useEffect(() => {
     return () => {