feat: cloud save-state icons for profile auto-save indicator

src/app/(agent)/agent/edit/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useRef, useEffect, useCallback } from 'react';
+import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { QuickLinks } from './components';
 import DynamicSection from './components/DynamicSection';
@@ -635,17 +636,21 @@ export default function EditProfilePage() {
         {/* Auto-save status */}
         {(autoSaveStatus !== 'idle' || lastSavedAt) && (
           <div className="flex items-center justify-end gap-2 px-1">
-            <span
-              className={`inline-block w-2 h-2 rounded-full ${
+            <Image
+              src={
                 autoSaveStatus === 'saving'
-                  ? 'bg-[#E58625] animate-pulse'
-                  : autoSaveStatus === 'saved' || (autoSaveStatus === 'idle' && lastSavedAt)
-                  ? 'bg-green-500'
+                  ? '/assets/icons/cloud-saving-icon.svg'
                   : autoSaveStatus === 'error'
-                  ? 'bg-red-500'
-                  : 'bg-gray-400'
-              }`}
-            ></span>
+                  ? '/assets/icons/caution-icon.svg'
+                  : autoSaveStatus === 'dirty'
+                  ? '/assets/icons/cloud-pending-icon.svg'
+                  : '/assets/icons/cloud-saved-icon.svg'
+              }
+              alt={autoSaveStatus === 'saving' ? 'Saving' : autoSaveStatus === 'dirty' ? 'Unsaved changes' : autoSaveStatus === 'error' ? 'Save failed' : 'Saved'}
+              width={16}
+              height={16}
+              className={autoSaveStatus === 'saving' ? 'animate-pulse' : ''}
+            />
             <span className="text-[12px] font-serif text-[#00293D]/60">
               {autoSaveStatus === 'saving' && 'Saving…'}
               {autoSaveStatus === 'saved' && lastSavedAt && `All changes saved at ${formatTime(lastSavedAt)}`}