feat: implement hooks system for project configuration

- Add HooksEditor component for managing project hooks
- Add ProjectSettings component for project-specific configurations
- Create hooksManager utility for hook operations
- Add hooks type definitions
- Update backend commands to support hooks functionality
- Integrate hooks into main app, agent execution, and Claude sessions
- Update API and utilities to handle hooks data

src/components/CreateAgent.tsx

@@ -11,6 +11,7 @@ import MDEditor from "@uiw/react-md-editor";
 import { type AgentIconName } from "./CCAgents";
 import { IconPicker, ICON_MAP } from "./IconPicker";
 
+
 interface CreateAgentProps {
   /**
    * Optional agent to edit (if provided, component is in edit mode)
@@ -175,11 +176,11 @@ export const CreateAgent: React.FC<CreateAgentProps> = ({
             transition={{ duration: 0.3, delay: 0.1 }}
             className="space-y-6"
           >
-            {/* Basic Information */}
-            <div className="space-y-4">
-              <div>
-                <h3 className="text-sm font-medium mb-4">Basic Information</h3>
-              </div>
+                {/* Basic Information */}
+                <div className="space-y-4">
+                  <div>
+                    <h3 className="text-sm font-medium mb-4">Basic Information</h3>
+                  </div>
               
               {/* Name and Icon */}
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
@@ -292,8 +293,6 @@ export const CreateAgent: React.FC<CreateAgentProps> = ({
                 </p>
               </div>
 
-
-
               {/* System Prompt Editor */}
               <div className="space-y-2">
                 <Label>System Prompt</Label>
@@ -314,28 +313,28 @@ export const CreateAgent: React.FC<CreateAgentProps> = ({
           </motion.div>
         </div>
       </div>
-      
-      {/* Toast Notification */}
-      <ToastContainer>
-        {toast && (
-          <Toast
-            message={toast.message}
-            type={toast.type}
-            onDismiss={() => setToast(null)}
-          />
-        )}
-      </ToastContainer>
-
-      {/* Icon Picker Dialog */}
-      <IconPicker
-        value={selectedIcon}
-        onSelect={(iconName) => {
-          setSelectedIcon(iconName as AgentIconName);
-          setShowIconPicker(false);
-        }}
-        isOpen={showIconPicker}
-        onClose={() => setShowIconPicker(false)}
+  
+  {/* Toast Notification */}
+  <ToastContainer>
+    {toast && (
+      <Toast
+        message={toast.message}
+        type={toast.type}
+        onDismiss={() => setToast(null)}
       />
-    </div>
+    )}
+  </ToastContainer>
+
+  {/* Icon Picker Dialog */}
+  <IconPicker
+    value={selectedIcon}
+    onSelect={(iconName) => {
+      setSelectedIcon(iconName as AgentIconName);
+      setShowIconPicker(false);
+    }}
+    isOpen={showIconPicker}
+    onClose={() => setShowIconPicker(false)}
+  />
+</div>
   );
 };