diff --git a/backend/src/chat/chat.controller.ts b/backend/src/chat/chat.controller.ts
index c1a5e6ef..e9e67ee1 100644
--- a/backend/src/chat/chat.controller.ts
+++ b/backend/src/chat/chat.controller.ts
@@ -22,13 +22,6 @@ export class ChatController {
     @GetAuthToken() userId: string,
   ) {
     try {
-      // Save user's message first
-      await this.chatService.saveMessage(
-        chatDto.chatId,
-        chatDto.message,
-        MessageRole.User,
-      );
-
       if (chatDto.stream) {
         // Streaming response
         res.setHeader('Content-Type', 'text/event-stream');
@@ -39,6 +32,7 @@ export class ChatController {
           chatId: chatDto.chatId,
           message: chatDto.message,
           model: chatDto.model,
+          role: MessageRole.User,
         });
 
         let fullResponse = '';
@@ -51,13 +45,6 @@ export class ChatController {
           }
         }
 
-        // Save the complete message
-        await this.chatService.saveMessage(
-          chatDto.chatId,
-          fullResponse,
-          MessageRole.Assistant,
-        );
-
         res.write('data: [DONE]\n\n');
         res.end();
       } else {
@@ -66,15 +53,8 @@ export class ChatController {
           chatId: chatDto.chatId,
           message: chatDto.message,
           model: chatDto.model,
+          role: MessageRole.User,
         });
-
-        // Save the complete message
-        await this.chatService.saveMessage(
-          chatDto.chatId,
-          response,
-          MessageRole.Assistant,
-        );
-
         res.json({ content: response });
       }
     } catch (error) {
diff --git a/backend/src/chat/chat.model.ts b/backend/src/chat/chat.model.ts
index d734ac5c..4ecac50c 100644
--- a/backend/src/chat/chat.model.ts
+++ b/backend/src/chat/chat.model.ts
@@ -75,11 +75,11 @@ class ChatCompletionDelta {
 
 @ObjectType('ChatCompletionChoiceType')
 class ChatCompletionChoice {
-  @Field()
-  index: number;
+  @Field({ nullable: true })
+  index: number | null;
 
-  @Field(() => ChatCompletionDelta)
-  delta: ChatCompletionDelta;
+  @Field(() => ChatCompletionDelta, { nullable: true })
+  delta: ChatCompletionDelta | null;
 
   @Field({ nullable: true })
   finishReason: string | null;
@@ -90,14 +90,14 @@ export class ChatCompletionChunk {
   @Field()
   id: string;
 
-  @Field()
-  object: string;
+  @Field({ nullable: true })
+  object: string | null;
 
-  @Field()
-  created: number;
+  @Field({ nullable: true })
+  created: number | null;
 
-  @Field()
-  model: string;
+  @Field({ nullable: true })
+  model: string | null;
 
   @Field({ nullable: true })
   systemFingerprint: string | null;
diff --git a/backend/src/chat/chat.resolver.ts b/backend/src/chat/chat.resolver.ts
index 991ad6f7..d26526e5 100644
--- a/backend/src/chat/chat.resolver.ts
+++ b/backend/src/chat/chat.resolver.ts
@@ -1,8 +1,8 @@
 import { Resolver, Subscription, Args, Query, Mutation } from '@nestjs/graphql';
-import { Chat, ChatCompletionChunk } from './chat.model';
+import { Chat, ChatCompletionChunk, StreamStatus } from './chat.model';
 import { ChatProxyService, ChatService } from './chat.service';
 import { UserService } from 'src/user/user.service';
-import { Message, MessageRole } from './message.model';
+import { Message } from './message.model';
 import {
   ChatInput,
   NewChatInput,
@@ -12,6 +12,7 @@ import { GetUserIdFromToken } from 'src/decorator/get-auth-token.decorator';
 import { Inject, Logger } from '@nestjs/common';
 import { JWTAuth } from 'src/decorator/jwt-auth.decorator';
 import { PubSubEngine } from 'graphql-subscriptions';
+import { Project } from 'src/project/project.model';
 @Resolver('Chat')
 export class ChatResolver {
   private readonly logger = new Logger('ChatResolver');
@@ -31,45 +32,65 @@ export class ChatResolver {
     resolve: (payload) => payload.chatStream,
   })
   async chatStream(@Args('input') input: ChatInput) {
-    return this.pubSub.asyncIterator(`chat_stream_${input.chatId}`);
+    const asyncIterator = this.pubSub.asyncIterator(
+      `chat_stream_${input.chatId}`,
+    );
+    return asyncIterator;
   }
-
   @Mutation(() => Boolean)
   @JWTAuth()
-  async triggerChatStream(@Args('input') input: ChatInput): Promise<boolean> {
+  async saveMessage(@Args('input') input: ChatInput): Promise<boolean> {
     try {
       await this.chatService.saveMessage(
         input.chatId,
         input.message,
-        MessageRole.User,
+        input.role,
       );
-
+      return true;
+    } catch (error) {
+      this.logger.error('Error in saveMessage:', error);
+      throw error;
+    }
+  }
+  @Mutation(() => Boolean)
+  @JWTAuth()
+  async triggerChatStream(@Args('input') input: ChatInput): Promise<boolean> {
+    try {
       const iterator = this.chatProxyService.streamChat(input);
       let accumulatedContent = '';
 
-      for await (const chunk of iterator) {
-        if (chunk) {
-          const enhancedChunk = {
-            ...chunk,
-            chatId: input.chatId,
-          };
+      try {
+        for await (const chunk of iterator) {
+          console.log('received chunk:', chunk);
+          if (chunk) {
+            const enhancedChunk = {
+              ...chunk,
+              chatId: input.chatId,
+            };
+
+            await this.pubSub.publish(`chat_stream_${input.chatId}`, {
+              chatStream: enhancedChunk,
+            });
+
+            if (chunk.choices?.[0]?.delta?.content) {
+              accumulatedContent += chunk.choices[0].delta.content;
+            }
+          }
+        }
+      } finally {
+        const finalChunk = await iterator.return();
+        console.log('finalChunk:', finalChunk);
 
+        if (finalChunk.value?.status === StreamStatus.DONE) {
           await this.pubSub.publish(`chat_stream_${input.chatId}`, {
-            chatStream: enhancedChunk,
+            chatStream: {
+              ...finalChunk.value,
+              chatId: input.chatId,
+            },
           });
-
-          if (chunk.choices[0]?.delta?.content) {
-            accumulatedContent += chunk.choices[0].delta.content;
-          }
         }
       }
 
-      await this.chatService.saveMessage(
-        input.chatId,
-        accumulatedContent,
-        MessageRole.Assistant,
-      );
-
       return true;
     } catch (error) {
       this.logger.error('Error in triggerChatStream:', error);
@@ -108,6 +129,19 @@ export class ChatResolver {
     return this.chatService.getChatDetails(chatId);
   }
 
+  @JWTAuth()
+  @Query(() => Project, { nullable: true })
+  async getCurProject(@Args('chatId') chatId: string): Promise<Project> {
+    try {
+      const response = await this.chatService.getProjectByChatId(chatId);
+      this.logger.log('Loaded project:', response);
+      return response;
+    } catch (error) {
+      this.logger.error('Failed to fetch project:', error);
+      throw new Error('Failed to fetch project');
+    }
+  }
+
   @Mutation(() => Chat)
   @JWTAuth()
   async createChat(
diff --git a/backend/src/chat/chat.service.ts b/backend/src/chat/chat.service.ts
index 366b4e20..5078f1a7 100644
--- a/backend/src/chat/chat.service.ts
+++ b/backend/src/chat/chat.service.ts
@@ -11,6 +11,7 @@ import {
 } from 'src/chat/dto/chat.input';
 import { CustomAsyncIterableIterator } from 'src/common/model-provider/types';
 import { OpenAIModelProvider } from 'src/common/model-provider/openai-model-provider';
+import { Project } from 'src/project/project.model';
 
 @Injectable()
 export class ChatProxyService {
@@ -98,6 +99,15 @@ export class ChatService {
     return chat;
   }
 
+  async getProjectByChatId(chatId: string): Promise<Project> {
+    const chat = await this.chatRepository.findOne({
+      where: { id: chatId, isDeleted: false },
+      relations: ['project'],
+    });
+
+    return chat ? chat.project : null;
+  }
+
   async createChat(userId: string, newChatInput: NewChatInput): Promise<Chat> {
     const user = await this.userRepository.findOne({ where: { id: userId } });
     if (!user) {
diff --git a/backend/src/chat/dto/chat.input.ts b/backend/src/chat/dto/chat.input.ts
index feeb738c..617bc23f 100644
--- a/backend/src/chat/dto/chat.input.ts
+++ b/backend/src/chat/dto/chat.input.ts
@@ -1,5 +1,6 @@
 // DTOs for Project APIs
 import { InputType, Field } from '@nestjs/graphql';
+import { MessageRole } from '../message.model';
 
 @InputType()
 export class NewChatInput {
@@ -26,4 +27,6 @@ export class ChatInput {
 
   @Field()
   model: string;
+  @Field()
+  role: MessageRole;
 }
diff --git a/backend/src/common/model-provider/openai-model-provider.ts b/backend/src/common/model-provider/openai-model-provider.ts
index f5991cc6..1e92dbaf 100644
--- a/backend/src/common/model-provider/openai-model-provider.ts
+++ b/backend/src/common/model-provider/openai-model-provider.ts
@@ -118,7 +118,7 @@ export class OpenAIModelProvider implements IModelProvider {
     let streamIterator: AsyncIterator<OpenAIChatCompletionChunk> | null = null;
     const modelName = model || input.model;
     const queue = this.getQueueForModel(modelName);
-
+    let oldStreamValue: OpenAIChatCompletionChunk | null = null;
     const createStream = async () => {
       if (!stream) {
         const result = await queue.add(async () => {
@@ -145,6 +145,9 @@ export class OpenAIModelProvider implements IModelProvider {
           const currentIterator = await createStream();
           const chunk = await currentIterator.next();
           const chunkValue = chunk.value as OpenAIChatCompletionChunk;
+          console.log('isDone:', chunk.done);
+          console.log('chunk:', chunk);
+          if (!chunk.done) oldStreamValue = chunkValue;
           return {
             done: chunk.done,
             value: {
@@ -159,9 +162,23 @@ export class OpenAIModelProvider implements IModelProvider {
         }
       },
       async return() {
+        console.log(stream);
+        console.log(streamIterator);
+        console.log('return() called');
         stream = null;
         streamIterator = null;
-        return { done: true, value: undefined };
+        return {
+          done: true,
+          value: {
+            ...oldStreamValue,
+            status: StreamStatus.DONE,
+            choices: [
+              {
+                finishReason: 'stop',
+              },
+            ],
+          },
+        };
       },
       async throw(error) {
         stream = null;
diff --git a/frontend/src/api/ChatStreamAPI.ts b/frontend/src/api/ChatStreamAPI.ts
new file mode 100644
index 00000000..1caff4c9
--- /dev/null
+++ b/frontend/src/api/ChatStreamAPI.ts
@@ -0,0 +1,71 @@
+import { ChatInputType } from '@/graphql/type';
+
+export const startChatStream = async (
+  input: ChatInputType,
+  token: string,
+  stream: boolean = false // Default to non-streaming for better performance
+): Promise<string> => {
+  if (!token) {
+    throw new Error('Not authenticated');
+  }
+  const { chatId, message, model } = input;
+  const response = await fetch('/api/chat', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({
+      chatId,
+      message,
+      model,
+      stream,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Network response was not ok: ${response.status} ${response.statusText}`
+    );
+  }
+  // TODO: Handle streaming responses properly
+  // if (stream) {
+  //   // For streaming responses, aggregate the streamed content
+  //   let fullContent = '';
+  //   const reader = response.body?.getReader();
+  //   if (!reader) {
+  //     throw new Error('No reader available');
+  //   }
+
+  //   while (true) {
+  //     const { done, value } = await reader.read();
+  //     if (done) break;
+
+  //     const text = new TextDecoder().decode(value);
+  //     const lines = text.split('\n\n');
+
+  //     for (const line of lines) {
+  //       if (line.startsWith('data: ')) {
+  //         const data = line.slice(5);
+  //         if (data === '[DONE]') break;
+  //         try {
+  //           const { content } = JSON.parse(data);
+  //           if (content) {
+  //             fullContent += content;
+  //           }
+  //         } catch (e) {
+  //           console.error('Error parsing SSE data:', e);
+  //         }
+  //       }
+  //     }
+  //   }
+  //   return fullContent;
+  // } else {
+  //   // For non-streaming responses, return the content directly
+  //   const data = await response.json();
+  //   return data.content;
+  // }
+
+  const data = await response.json();
+  return data.content;
+};
diff --git a/frontend/src/app/api/filestructure/route.ts b/frontend/src/app/api/filestructure/route.ts
new file mode 100644
index 00000000..49c23a72
--- /dev/null
+++ b/frontend/src/app/api/filestructure/route.ts
@@ -0,0 +1,31 @@
+// app/api/filestructure/route.ts
+import { NextResponse } from 'next/server';
+import { FileReader } from '@/utils/file-reader';
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const projectId = searchParams.get('path');
+
+  if (!projectId) {
+    return NextResponse.json({ error: 'Missing projectId' }, { status: 400 });
+  }
+
+  try {
+    const res = await fetchFileStructure(projectId);
+    return NextResponse.json({ res });
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to read project files' },
+      { status: 500 }
+    );
+  }
+}
+
+async function fetchFileStructure(projectId) {
+  const reader = FileReader.getInstance();
+  const res = await reader.getAllPaths(projectId);
+  if (!res || res.length === 0) {
+    return '';
+  }
+  return res;
+}
diff --git a/frontend/src/components/chat/chat-bottombar.tsx b/frontend/src/components/chat/chat-bottombar.tsx
index 7435e9cd..213876e5 100644
--- a/frontend/src/components/chat/chat-bottombar.tsx
+++ b/frontend/src/components/chat/chat-bottombar.tsx
@@ -4,7 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import TextareaAutosize from 'react-textarea-autosize';
 import { PaperclipIcon, Send, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { ChatProps } from './chat-panel';
+import { Message } from '../../const/MessageType';
 import Image from 'next/image';
 import {
   Tooltip,
@@ -13,6 +13,18 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 
+interface ChatBottombarProps {
+  messages: Message[];
+  input: string;
+  handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  stop: () => void;
+  formRef: React.RefObject<HTMLFormElement>;
+  setInput?: React.Dispatch<React.SetStateAction<string>>;
+  setMessages: (messages: Message[]) => void;
+  setSelectedModel: React.Dispatch<React.SetStateAction<string>>;
+}
+
 export default function ChatBottombar({
   messages,
   input,
@@ -20,7 +32,9 @@ export default function ChatBottombar({
   handleSubmit,
   formRef,
   setInput,
-}: ChatProps) {
+  setMessages,
+  setSelectedModel,
+}: ChatBottombarProps) {
   const [isMobile, setIsMobile] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const [attachments, setAttachments] = useState<File[]>([]);
diff --git a/frontend/src/components/chat/chat-list.tsx b/frontend/src/components/chat/chat-list.tsx
index e620538a..8c3e5b4f 100644
--- a/frontend/src/components/chat/chat-list.tsx
+++ b/frontend/src/components/chat/chat-list.tsx
@@ -9,24 +9,40 @@ import remarkGfm from 'remark-gfm';
 import CodeDisplayBlock from '../code-display-block';
 import { Message } from '../../const/MessageType';
 import { Button } from '../ui/button';
-import { Check, Pencil, X, Code, Terminal } from 'lucide-react';
+import {
+  Check,
+  Pencil,
+  X,
+  Code,
+  Copy,
+  Trash2,
+  RotateCcw,
+  ThumbsUp,
+  ThumbsDown,
+} from 'lucide-react';
 import { useAuthContext } from '@/providers/AuthProvider';
+import ThinkingProcessBlock from './thinking-process-block';
 
 interface ChatListProps {
   messages: Message[];
   loadingSubmit?: boolean;
   onMessageEdit?: (messageId: string, newContent: string) => void;
+  thinkingProcess?: Message[];
+
+  isTPUpdating: boolean;
 }
 
 const isUserMessage = (role: string) => role.toLowerCase() === 'user';
-const isToolCall = (content: string) =>
-  content.includes('```') || content.includes('executing');
 
 export default function ChatList({
   messages,
   loadingSubmit,
   onMessageEdit,
+  thinkingProcess,
+
+  isTPUpdating,
 }: ChatListProps) {
+  console.log(thinkingProcess);
   const bottomRef = useRef<HTMLDivElement>(null);
   const { user } = useAuthContext();
 
@@ -65,20 +81,26 @@ export default function ChatList({
   };
 
   const renderMessageContent = (content: string) => {
-    return content.split('```').map((part, index) => {
-      if (index % 2 === 0) {
-        return (
-          <Markdown key={index} remarkPlugins={[remarkGfm]}>
-            {part}
-          </Markdown>
-        );
-      }
-      return (
-        <div className="my-2 w-full" key={index}>
-          <CodeDisplayBlock code={part} lang="" />
-        </div>
-      );
-    });
+    return (
+      <Markdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          code(props) {
+            const { children, className, node, ...rest } = props;
+            const match = /language-(\w+)/.exec(className || '');
+            return match ? (
+              <CodeDisplayBlock code={String(children)} lang={match[1]} />
+            ) : (
+              <code className={className} {...rest}>
+                {children}
+              </code>
+            );
+          },
+        }}
+      >
+        {content}
+      </Markdown>
+    );
   };
 
   if (messages.length === 0) {
@@ -112,7 +134,6 @@ export default function ChatList({
           {messages.map((message, index) => {
             const isUser = isUserMessage(message.role);
             const isEditing = message.id === editingMessageId;
-            const isTool = !isUser && isToolCall(message.content);
 
             return (
               <motion.div
@@ -124,10 +145,9 @@ export default function ChatList({
                   opacity: { duration: 0.15 },
                   y: { duration: 0.15 },
                 }}
-                className="flex flex-col gap-1 w-full group"
+                className="flex gap-3 items-start"
               >
-                {/* Sender info - always on the left */}
-                <div className="flex items-center gap-2 ml-1">
+                <div className="flex-shrink-0 mt-1">
                   <Avatar
                     className={cn(
                       'h-6 w-6',
@@ -154,34 +174,52 @@ export default function ChatList({
                       </>
                     )}
                   </Avatar>
-                  <span className="text-xs text-muted-foreground">
-                    {isUser ? user.username || 'You' : 'CodeFox'}
-                  </span>
                 </div>
 
-                {/* Message content */}
-                <div className="flex flex-col gap-1 pl-8 relative">
-                  {/* Edit buttons for user messages */}
-                  {isUser && !isEditing && onMessageEdit && (
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      className="absolute -left-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6"
-                      onClick={() => handleEditStart(message)}
-                    >
-                      <Pencil className="h-3 w-3" />
-                    </Button>
-                  )}
-
-                  {/* Message bubble */}
+                <div className="flex-grow flex flex-col gap-2">
                   {isEditing ? (
-                    <div className="flex flex-col gap-2 w-full pl-0">
-                      <textarea
-                        value={editContent}
-                        onChange={(e) => setEditContent(e.target.value)}
-                        className="min-h-[100px] w-full p-2 rounded bg-background border resize-none text-foreground"
-                        autoFocus
-                      />
+                    <div className="flex flex-col gap-4">
+                      <div className="grid grid-cols-2 gap-4">
+                        <div className="flex flex-col gap-2">
+                          <div className="text-xs text-muted-foreground">
+                            Edit
+                          </div>
+                          <textarea
+                            value={editContent}
+                            onChange={(e) => setEditContent(e.target.value)}
+                            className="min-h-[200px] w-full p-2 rounded bg-background border resize-none text-foreground font-mono"
+                            autoFocus
+                            placeholder="Support Markdown formatting..."
+                            onKeyDown={(e) => {
+                              if (e.key === 'Tab') {
+                                e.preventDefault();
+                                const start = e.currentTarget.selectionStart;
+                                const end = e.currentTarget.selectionEnd;
+                                setEditContent(
+                                  editContent.substring(0, start) +
+                                    '  ' +
+                                    editContent.substring(end)
+                                );
+                                // Set cursor position after timeout to ensure state is updated
+                                setTimeout(() => {
+                                  e.currentTarget.selectionStart =
+                                    e.currentTarget.selectionEnd = start + 2;
+                                }, 0);
+                              }
+                            }}
+                          />
+                        </div>
+                        <div className="flex flex-col gap-2">
+                          <div className="text-xs text-muted-foreground">
+                            Preview
+                          </div>
+                          <div className="min-h-[200px] w-full p-2 rounded bg-muted prose dark:prose-invert prose-sm max-w-none overflow-auto">
+                            <Markdown remarkPlugins={[remarkGfm]}>
+                              {editContent}
+                            </Markdown>
+                          </div>
+                        </div>
+                      </div>
                       <div className="flex justify-end gap-2">
                         <Button
                           size="sm"
@@ -203,40 +241,106 @@ export default function ChatList({
                       </div>
                     </div>
                   ) : (
-                    <div
-                      className={cn(
-                        'px-4 py-3 rounded-lg w-auto max-w-full',
-                        isUser
-                          ? 'bg-muted text-foreground border border-border/50'
-                          : isTool
-                            ? 'bg-slate-50 dark:bg-slate-900 border border-border/50'
-                            : 'bg-card text-card-foreground border border-border/50'
-                      )}
-                    >
-                      <div className="whitespace-pre-wrap">
+                    <div className="flex flex-col gap-2">
+                      <div
+                        className={cn(
+                          'px-4 py-1 rounded-lg break-words',
+                          !isUser
+                            ? 'bg-card text-card-foreground'
+                            : 'text-foreground'
+                        )}
+                      >
                         {isUser ? (
-                          message.content
-                        ) : isTool ? (
                           <div className="prose dark:prose-invert prose-sm max-w-none">
-                            <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-1.5">
-                              <Terminal className="h-3.5 w-3.5" />
-                              <span>Tool Execution</span>
+                            <div className="mt-4 prose dark:prose-invert prose-sm max-w-none">
+                              {renderMessageContent(message.content)}
                             </div>
-                            {renderMessageContent(message.content)}
                           </div>
                         ) : (
-                          <div className="prose dark:prose-invert prose-sm max-w-none">
-                            {renderMessageContent(message.content)}
-                          </div>
+                          <>
+                            {(() => {
+                              const tpMsg = thinkingProcess.find(
+                                (tp) => tp.id === message.id
+                              );
+                              if (tpMsg) {
+                                return (
+                                  <ThinkingProcessBlock
+                                    key={message.id}
+                                    thinking={tpMsg}
+                                  />
+                                );
+                              }
+                              return null;
+                            })()}
+
+                            <div className="mt-4 prose dark:prose-invert prose-sm max-w-none">
+                              {renderMessageContent(message.content)}
+                            </div>
+                          </>
+                        )}
+                      </div>
+                      {/* Action buttons */}
+                      <div className="px-2 flex gap-2">
+                        {isUser ? (
+                          <>
+                            {onMessageEdit && (
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                className="h-7 px-2"
+                                onClick={() => handleEditStart(message)}
+                              >
+                                <Pencil className="h-3 w-3 mr-1" />
+                              </Button>
+                            )}
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              className="h-7 px-2"
+                            >
+                              <Copy className="h-3 w-3 mr-1" />
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              className="h-7 px-2 text-destructive hover:text-destructive"
+                            >
+                              <Trash2 className="h-3 w-3 mr-1" />
+                            </Button>
+                          </>
+                        ) : (
+                          <>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              className="h-7 px-2"
+                            >
+                              <Copy className="h-3 w-3" />
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              className="h-7 px-2"
+                            >
+                              <RotateCcw className="h-3 w-3" />
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              className="h-7 px-2"
+                            >
+                              <ThumbsUp className="h-3 w-3" />
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              className="h-7 px-2"
+                            >
+                              <ThumbsDown className="h-3 w-3" />
+                            </Button>
+                          </>
                         )}
                       </div>
-                    </div>
-                  )}
-
-                  {/* Tool result or additional info could be added here */}
-                  {isTool && (
-                    <div className="text-xs text-muted-foreground mt-1 ml-2">
-                      <span>Tool output</span>
                     </div>
                   )}
                 </div>
@@ -249,9 +353,9 @@ export default function ChatList({
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
-            className="flex flex-col gap-1 w-full"
+            className="flex gap-3 items-start"
           >
-            <div className="flex items-center gap-2 ml-1">
+            <div className="flex-shrink-0 mt-1">
               <Avatar className="h-6 w-6 bg-secondary/10">
                 <AvatarImage
                   src="/codefox.svg"
@@ -260,21 +364,31 @@ export default function ChatList({
                 />
                 <AvatarFallback>AI</AvatarFallback>
               </Avatar>
-              <span className="text-xs text-muted-foreground">CodeFox</span>
             </div>
-
-            <div className="flex pl-8">
-              <div className="px-3 py-2 flex items-center">
-                <div className="flex gap-1.5">
-                  <span className="size-2 rounded-full bg-foreground/30 animate-bounce"></span>
-                  <span
-                    className="size-2 rounded-full bg-foreground/30 animate-bounce"
-                    style={{ animationDelay: '0.2s' }}
-                  ></span>
-                  <span
-                    className="size-2 rounded-full bg-foreground/30 animate-bounce"
-                    style={{ animationDelay: '0.4s' }}
-                  ></span>
+            <div className="flex-grow">
+              <div className="px-4 py-2 flex flex-col">
+                {/* 仅当 isTPUpdating 为 true 时显示最新的 ThinkingProcessBlock */}
+                {isTPUpdating &&
+                  thinkingProcess &&
+                  thinkingProcess.length > 0 && (
+                    <ThinkingProcessBlock
+                      key="loading-tp"
+                      thinking={thinkingProcess[thinkingProcess.length - 1]}
+                    />
+                  )}
+                {/* 始终显示加载动画 */}
+                <div className="flex items-center mt-2">
+                  <div className="flex gap-1.5">
+                    <span className="size-2 rounded-full bg-foreground/30 animate-bounce"></span>
+                    <span
+                      className="size-2 rounded-full bg-foreground/30 animate-bounce"
+                      style={{ animationDelay: '0.2s' }}
+                    ></span>
+                    <span
+                      className="size-2 rounded-full bg-foreground/30 animate-bounce"
+                      style={{ animationDelay: '0.4s' }}
+                    ></span>
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/frontend/src/components/chat/chat-panel.tsx b/frontend/src/components/chat/chat-panel.tsx
index f194929c..47797c6d 100644
--- a/frontend/src/components/chat/chat-panel.tsx
+++ b/frontend/src/components/chat/chat-panel.tsx
@@ -11,6 +11,7 @@ export interface ChatProps {
   chatId?: string;
   setSelectedModel: React.Dispatch<React.SetStateAction<string>>;
   messages: Message[];
+  thinkingProcess: Message[];
   input: string;
   handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   handleSubmit: (
@@ -23,6 +24,8 @@ export interface ChatProps {
   isMobile?: boolean;
   setInput?: React.Dispatch<React.SetStateAction<string>>;
   setMessages: (messages: Message[]) => void;
+  setThinkingProcess: React.Dispatch<React.SetStateAction<string[]>>;
+  isTPUpdating: boolean;
 }
 
 export default function ChatContent({
@@ -38,13 +41,16 @@ export default function ChatContent({
   isMobile,
   setInput,
   setMessages,
+  thinkingProcess,
+  setThinkingProcess,
+  isTPUpdating,
 }: ChatProps) {
   return (
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.3 }}
-      className="flex flex-col justify-between w-full h-full p-2 rounded-lg shadow-sm  border"
+      className="flex flex-col justify-between w-full h-full p-2 rounded-lg shadow-sm border"
     >
       <div className="sticky top-0 z-10">
         <ChatTopbar />
@@ -60,12 +66,13 @@ export default function ChatContent({
             );
             setMessages(updatedMessages);
           }}
+          thinkingProcess={thinkingProcess}
+          isTPUpdating={isTPUpdating}
         />
       </div>
 
       <div className="sticky bottom-0 z-10 bg-gradient-to-t from-background to-transparent pt-2">
         <ChatBottombar
-          setSelectedModel={setSelectedModel}
           messages={messages}
           input={input}
           handleInputChange={handleInputChange}
@@ -74,6 +81,7 @@ export default function ChatContent({
           formRef={formRef}
           setInput={setInput}
           setMessages={setMessages}
+          setSelectedModel={setSelectedModel}
         />
       </div>
     </motion.div>
diff --git a/frontend/src/components/chat/code-engine/code-engine.tsx b/frontend/src/components/chat/code-engine/code-engine.tsx
index 8ac6da93..03bc65de 100644
--- a/frontend/src/components/chat/code-engine/code-engine.tsx
+++ b/frontend/src/components/chat/code-engine/code-engine.tsx
@@ -20,7 +20,7 @@ export function CodeEngine({
   isProjectReady?: boolean;
   projectId?: string;
 }) {
-  const { curProject, projectLoading, pollChatProject } =
+  const { curProject, projectLoading, pollChatProject, editorRef } =
     useContext(ProjectContext);
   const [localProject, setLocalProject] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -35,8 +35,6 @@ export function CodeEngine({
   const [fileStructureData, setFileStructureData] = useState<
     Record<TreeItemIndex, TreeItem<any>>
   >({});
-
-  const editorRef = useRef(null);
   const projectPathRef = useRef(null);
 
   // Poll for project if needed using chatId
@@ -198,7 +196,7 @@ export function CodeEngine({
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           filePath: `${projectPath}/${filePath}`,
-          newContent: JSON.stringify(value),
+          newContent: value,
         }),
       });
 
diff --git a/frontend/src/components/chat/code-engine/project-context.tsx b/frontend/src/components/chat/code-engine/project-context.tsx
index dbc6d25e..f1bcbf2f 100644
--- a/frontend/src/components/chat/code-engine/project-context.tsx
+++ b/frontend/src/components/chat/code-engine/project-context.tsx
@@ -49,6 +49,7 @@ export interface ProjectContextType {
   ) => Promise<{ domain: string; containerId: string }>;
   takeProjectScreenshot: (projectId: string, url: string) => Promise<void>;
   refreshProjects: () => Promise<void>;
+  editorRef?: React.MutableRefObject<any>;
 }
 
 export const ProjectContext = createContext<ProjectContextType | undefined>(
@@ -103,6 +104,7 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
   const [projectLoading, setProjectLoading] = useState<boolean>(true);
   const [filePath, setFilePath] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const editorRef = useRef<any>(null);
 
   interface ChatProjectCacheEntry {
     project: Project | null;
@@ -325,7 +327,7 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
     onCompleted: (data) => {
       if (!isMounted.current) return;
 
-      setProjects(data.getUserProjects);
+      setProjects([...data.getUserProjects]);
 
       // Trigger state sync after data update
       const now = Date.now();
@@ -911,6 +913,7 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
       getWebUrl,
       takeProjectScreenshot,
       refreshProjects,
+      editorRef,
     }),
     [
       projects,
@@ -926,6 +929,7 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
       getWebUrl,
       takeProjectScreenshot,
       refreshProjects,
+      editorRef,
     ]
   );
 
diff --git a/frontend/src/components/chat/index.tsx b/frontend/src/components/chat/index.tsx
index 05730c3e..3afdd9d4 100644
--- a/frontend/src/components/chat/index.tsx
+++ b/frontend/src/components/chat/index.tsx
@@ -23,12 +23,14 @@ export default function Chat() {
   const urlParams = new URLSearchParams(window.location.search);
   const [chatId, setChatId] = useState('');
   const [messages, setMessages] = useState([]);
+  const [thinkingProcess, setThinkingProcess] = useState([]);
   const [input, setInput] = useState('');
   const formRef = useRef<HTMLFormElement>(null);
   const { models } = useModels();
   const [selectedModel, setSelectedModel] = useState(models[0] || 'gpt-4o');
   const { refetchChats } = useChatList();
 
+  const [isTPUpdating, setIsTPUpdating] = useState(false);
   // Project status monitoring for the current chat
   const { isReady, projectId, projectName, error } =
     useProjectStatusMonitor(chatId);
@@ -39,7 +41,42 @@ export default function Chat() {
     skip: !isAuthorized || !chatId,
     onCompleted: (data) => {
       if (data?.getChatHistory) {
-        setMessages(data.getChatHistory);
+        // 解析 chatHistory 中的每条消息
+        const processedMessages = data.getChatHistory.map((msg) => {
+          try {
+            // 这里假设 msg.content 是 JSON 字符串
+            const content = JSON.parse(msg.content);
+            return {
+              id: msg.id,
+              role: msg.role,
+              // Message 内容为 final_response
+              content: content.final_response,
+              createdAt: msg.createdAt,
+              // 附加字段，后续用来提取 thinking process
+              thinking_process: content.thinking_process,
+            };
+          } catch (e) {
+            // 如果解析失败，则原样返回（注意：这种情况可能无法展示 tp）
+            return msg;
+          }
+        });
+
+        // 设置 messages，消息的 content 为最终消息
+        setMessages(processedMessages);
+
+        // 从 processedMessages 中筛选出含有 thinking_process 的消息
+        // 构造新的数组，Message 的 content 为 thinking_process
+        const tpMessages = processedMessages
+          .filter((msg) => msg.thinking_process)
+          .map((msg) => ({
+            id: msg.id,
+            role: msg.role,
+            content: msg.thinking_process,
+            createdAt: msg.createdAt,
+          }));
+
+        // 设置 thinking process 数组
+        setThinkingProcess(tpMessages);
       }
     },
     onError: () => {
@@ -54,7 +91,9 @@ export default function Chat() {
       input,
       setInput,
       setMessages,
+      setThinkingProcess,
       selectedModel,
+      setIsTPUpdating,
     });
 
   // Callback to clear the chat ID
@@ -112,6 +151,7 @@ export default function Chat() {
             chatId={chatId}
             setSelectedModel={setSelectedModel}
             messages={messages}
+            thinkingProcess={thinkingProcess}
             input={input}
             handleInputChange={handleInputChange}
             handleSubmit={handleSubmit}
@@ -120,6 +160,8 @@ export default function Chat() {
             formRef={formRef}
             setInput={setInput}
             setMessages={setMessages}
+            setThinkingProcess={setThinkingProcess}
+            isTPUpdating={isTPUpdating}
           />
         </div>
       </ResizablePanel>
@@ -147,6 +189,7 @@ export default function Chat() {
         chatId={chatId}
         setSelectedModel={setSelectedModel}
         messages={messages}
+        thinkingProcess={thinkingProcess}
         input={input}
         handleInputChange={handleInputChange}
         handleSubmit={handleSubmit}
@@ -155,6 +198,8 @@ export default function Chat() {
         formRef={formRef}
         setInput={setInput}
         setMessages={setMessages}
+        setThinkingProcess={setThinkingProcess}
+        isTPUpdating={isTPUpdating}
       />
     </div>
   );
diff --git a/frontend/src/components/chat/thinking-process-block.tsx b/frontend/src/components/chat/thinking-process-block.tsx
new file mode 100644
index 00000000..64dacd24
--- /dev/null
+++ b/frontend/src/components/chat/thinking-process-block.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import React from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Message } from '@/const/MessageType';
+
+interface ThinkingProcessBlockProps {
+  thinking: Message;
+}
+
+export default function ThinkingProcessBlock({
+  thinking,
+}: ThinkingProcessBlockProps) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  return (
+    <>
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex items-center gap-1 text-xs text-muted-foreground hover:text-muted-foreground/80 transition-colors"
+      >
+        {isExpanded ? (
+          <ChevronDown className="h-3 w-3" />
+        ) : (
+          <ChevronRight className="h-3 w-3" />
+        )}
+        Thinking Process
+      </button>
+      {isExpanded && (
+        <div className="mt-2 mb-4 pl-4 text-sm text-muted-foreground border-l-2 border-muted/20">
+          <Markdown remarkPlugins={[remarkGfm]}>{thinking.content}</Markdown>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/frontend/src/components/code-display-block.tsx b/frontend/src/components/code-display-block.tsx
index 452ab4d6..9f1fe464 100644
--- a/frontend/src/components/code-display-block.tsx
+++ b/frontend/src/components/code-display-block.tsx
@@ -25,12 +25,12 @@ export default function CodeDisplayBlock({ code, lang }: ButtonCodeblockProps) {
   };
 
   return (
-    <div className="relative my-4 overflow-scroll overflow-x-scroll  flex flex-col   text-start  ">
+    <div className="relative my-4 overflow-scroll overflow-x-scroll flex flex-col text-start rounded-lg border bg-muted">
       <Button
         onClick={copyToClipboard}
-        variant="ghost"
+        variant="secondary"
         size="icon"
-        className="h-5 w-5 absolute top-2 right-2"
+        className="h-6 w-6 absolute top-3 right-3 opacity-50 hover:opacity-100 transition-opacity"
       >
         {isCopied ? (
           <CheckIcon className="w-4 h-4 scale-100 transition-all" />
@@ -39,11 +39,10 @@ export default function CodeDisplayBlock({ code, lang }: ButtonCodeblockProps) {
         )}
       </Button>
       <CodeBlock
-        customStyle={
-          theme === 'dark'
-            ? { background: '#303033' }
-            : { background: '#fcfcfc' }
-        }
+        customStyle={{
+          background: 'transparent',
+          padding: '1rem',
+        }}
         text={code}
         language="tsx"
         showLineNumbers={false}
diff --git a/frontend/src/graphql/request.ts b/frontend/src/graphql/request.ts
index e794e7dd..c6f82297 100644
--- a/frontend/src/graphql/request.ts
+++ b/frontend/src/graphql/request.ts
@@ -173,7 +173,20 @@ export const GET_CHAT_DETAILS = gql`
     }
   }
 `;
-
+export const GET_CUR_PROJECT = gql`
+  query GetCurProject($chatId: String!) {
+    getCurProject(chatId: $chatId) {
+      id
+      projectName
+      projectPath
+    }
+  }
+`;
+export const SAVE_MESSAGE = gql`
+  mutation SaveMessage($input: ChatInputType!) {
+    saveMessage(input: $input)
+  }
+`;
 // Mutation to create a new project
 export const CREATE_PROJECT = gql`
   mutation CreateProject($createProjectInput: CreateProjectInput!) {
@@ -221,7 +234,11 @@ export const UPDATE_PROJECT_PUBLIC_STATUS = gql`
     updateProjectPublicStatus(projectId: $projectId, isPublic: $isPublic) {
       id
       projectName
-      isPublic
+      path
+      projectPackages {
+        id
+        content
+      }
     }
   }
 `;
diff --git a/frontend/src/graphql/schema.gql b/frontend/src/graphql/schema.gql
index 6c419a01..28ee099d 100644
--- a/frontend/src/graphql/schema.gql
+++ b/frontend/src/graphql/schema.gql
@@ -21,17 +21,17 @@ type Chat {
 }
 
 type ChatCompletionChoiceType {
-  delta: ChatCompletionDeltaType!
+  delta: ChatCompletionDeltaType
   finishReason: String
-  index: Float!
+  index: Float
 }
 
 type ChatCompletionChunkType {
   choices: [ChatCompletionChoiceType!]!
-  created: Float!
+  created: Float
   id: String!
-  model: String!
-  object: String!
+  model: String
+  object: String
   status: StreamStatus!
   systemFingerprint: String
 }
@@ -44,6 +44,7 @@ input ChatInputType {
   chatId: String!
   message: String!
   model: String!
+  role: String!
 }
 
 input CheckTokenInput {
@@ -122,6 +123,7 @@ type Mutation {
   regenerateDescription(input: String!): String!
   registerUser(input: RegisterUserInput!): User!
   resendConfirmationEmail(input: ResendEmailInput!): EmailConfirmationResponse!
+  saveMessage(input: ChatInputType!): Boolean!
   subscribeToProject(projectId: ID!): Project!
   triggerChatStream(input: ChatInputType!): Boolean!
   updateChatTitle(updateChatTitleInput: UpdateChatTitleInput!): Chat
@@ -180,6 +182,7 @@ type Query {
   getAvailableModelTags: [String!]
   getChatDetails(chatId: String!): Chat
   getChatHistory(chatId: String!): [Message!]!
+  getCurProject(chatId: String!): Project
   getHello: String!
   getProject(projectId: String!): Project!
   getRemainingProjectLimit: Int!
@@ -198,6 +201,7 @@ type RefreshTokenResponse {
 }
 
 input RegisterUserInput {
+  confirmPassword: String!
   email: String!
   password: String!
   username: String!
diff --git a/frontend/src/graphql/type.tsx b/frontend/src/graphql/type.tsx
index 3def174b..edcc54d4 100644
--- a/frontend/src/graphql/type.tsx
+++ b/frontend/src/graphql/type.tsx
@@ -62,18 +62,18 @@ export type Chat = {
 
 export type ChatCompletionChoiceType = {
   __typename: 'ChatCompletionChoiceType';
-  delta: ChatCompletionDeltaType;
+  delta?: Maybe<ChatCompletionDeltaType>;
   finishReason?: Maybe<Scalars['String']['output']>;
-  index: Scalars['Float']['output'];
+  index?: Maybe<Scalars['Float']['output']>;
 };
 
 export type ChatCompletionChunkType = {
   __typename: 'ChatCompletionChunkType';
   choices: Array<ChatCompletionChoiceType>;
-  created: Scalars['Float']['output'];
+  created?: Maybe<Scalars['Float']['output']>;
   id: Scalars['String']['output'];
-  model: Scalars['String']['output'];
-  object: Scalars['String']['output'];
+  model?: Maybe<Scalars['String']['output']>;
+  object?: Maybe<Scalars['String']['output']>;
   status: StreamStatus;
   systemFingerprint?: Maybe<Scalars['String']['output']>;
 };
@@ -87,6 +87,7 @@ export type ChatInputType = {
   chatId: Scalars['String']['input'];
   message: Scalars['String']['input'];
   model: Scalars['String']['input'];
+  role: Scalars['String']['input'];
 };
 
 export type CheckTokenInput = {
@@ -167,6 +168,7 @@ export type Mutation = {
   regenerateDescription: Scalars['String']['output'];
   registerUser: User;
   resendConfirmationEmail: EmailConfirmationResponse;
+  saveMessage: Scalars['Boolean']['output'];
   subscribeToProject: Project;
   triggerChatStream: Scalars['Boolean']['output'];
   updateChatTitle?: Maybe<Chat>;
@@ -223,6 +225,10 @@ export type MutationResendConfirmationEmailArgs = {
   input: ResendEmailInput;
 };
 
+export type MutationSaveMessageArgs = {
+  input: ChatInputType;
+};
+
 export type MutationSubscribeToProjectArgs = {
   projectId: Scalars['ID']['input'];
 };
@@ -300,6 +306,7 @@ export type Query = {
   getAvailableModelTags?: Maybe<Array<Scalars['String']['output']>>;
   getChatDetails?: Maybe<Chat>;
   getChatHistory: Array<Message>;
+  getCurProject?: Maybe<Project>;
   getHello: Scalars['String']['output'];
   getProject: Project;
   getRemainingProjectLimit: Scalars['Int']['output'];
@@ -328,6 +335,10 @@ export type QueryGetChatHistoryArgs = {
   chatId: Scalars['String']['input'];
 };
 
+export type QueryGetCurProjectArgs = {
+  chatId: Scalars['String']['input'];
+};
+
 export type QueryGetProjectArgs = {
   projectId: Scalars['String']['input'];
 };
@@ -347,6 +358,7 @@ export type RefreshTokenResponse = {
 };
 
 export type RegisterUserInput = {
+  confirmPassword: Scalars['String']['input'];
   email: Scalars['String']['input'];
   password: Scalars['String']['input'];
   username: Scalars['String']['input'];
@@ -623,7 +635,7 @@ export type ChatCompletionChoiceTypeResolvers<
     ResolversParentTypes['ChatCompletionChoiceType'] = ResolversParentTypes['ChatCompletionChoiceType'],
 > = ResolversObject<{
   delta?: Resolver<
-    ResolversTypes['ChatCompletionDeltaType'],
+    Maybe<ResolversTypes['ChatCompletionDeltaType']>,
     ParentType,
     ContextType
   >;
@@ -632,7 +644,7 @@ export type ChatCompletionChoiceTypeResolvers<
     ParentType,
     ContextType
   >;
-  index?: Resolver<ResolversTypes['Float'], ParentType, ContextType>;
+  index?: Resolver<Maybe<ResolversTypes['Float']>, ParentType, ContextType>;
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 }>;
 
@@ -646,10 +658,10 @@ export type ChatCompletionChunkTypeResolvers<
     ParentType,
     ContextType
   >;
-  created?: Resolver<ResolversTypes['Float'], ParentType, ContextType>;
+  created?: Resolver<Maybe<ResolversTypes['Float']>, ParentType, ContextType>;
   id?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
-  model?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
-  object?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  model?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  object?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   status?: Resolver<ResolversTypes['StreamStatus'], ParentType, ContextType>;
   systemFingerprint?: Resolver<
     Maybe<ResolversTypes['String']>,
@@ -802,6 +814,12 @@ export type MutationResolvers<
     ContextType,
     RequireFields<MutationResendConfirmationEmailArgs, 'input'>
   >;
+  saveMessage?: Resolver<
+    ResolversTypes['Boolean'],
+    ParentType,
+    ContextType,
+    RequireFields<MutationSaveMessageArgs, 'input'>
+  >;
   subscribeToProject?: Resolver<
     ResolversTypes['Project'],
     ParentType,
@@ -940,6 +958,12 @@ export type QueryResolvers<
     ContextType,
     RequireFields<QueryGetChatHistoryArgs, 'chatId'>
   >;
+  getCurProject?: Resolver<
+    Maybe<ResolversTypes['Project']>,
+    ParentType,
+    ContextType,
+    RequireFields<QueryGetCurProjectArgs, 'chatId'>
+  >;
   getHello?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   getProject?: Resolver<
     ResolversTypes['Project'],
diff --git a/frontend/src/hooks/multi-agent/agentPrompt.ts b/frontend/src/hooks/multi-agent/agentPrompt.ts
new file mode 100644
index 00000000..895f6b30
--- /dev/null
+++ b/frontend/src/hooks/multi-agent/agentPrompt.ts
@@ -0,0 +1,500 @@
+export enum TaskType {
+  DEBUG = 'debug',
+  REFACTOR = 'refactor',
+  OPTIMIZE = 'optimize',
+  UNRELATED = 'unrelated',
+}
+export interface AgentContext {
+  tempId?: string; // Temporary ID for the conversation
+  task_type: TaskType | null; // Current task type
+  request: string; // Original request
+  projectPath: string; // Project ID
+  fileStructure: string[]; // Project file structure
+  fileContents: {
+    // File content mapping
+    [key: string]: string;
+  };
+  modifiedFiles: {
+    // Modified files
+    [key: string]: string;
+  };
+  requiredFiles: string[]; // Files that need to be read/modified
+  reviewComments?: string[]; // Code review comments
+  commitMessage?: string; // Commit message
+  accumulatedThoughts: string[]; // Accumulated thinking processes
+  final_response?: string; // Final summarized response
+  setFilePath: (path: string) => void; // Set current file path in editor
+  editorRef: React.MutableRefObject<any>; // Monaco editor reference for direct updates
+  currentStep?: {
+    // Current execution step
+    tool?: string; // Tool being used
+    status?: string; // Execution status
+    description?: string; // Step description
+  };
+  setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+  saveMessage: any;
+  token?: string;
+  setThinkingProcess: React.Dispatch<React.SetStateAction<Message[]>>;
+  setIsTPUpdating: React.Dispatch<React.SetStateAction<boolean>>;
+  setLoadingSubmit: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export const systemPrompt = (): string => {
+  return `# System Instructions
+You are an AI assistant. When responding, you **must** adhere to the following rules:
+
+1. **Strictly Follow Output Format**  
+   - Every response **must be wrapped inside** an XML element named \`<jsonResponse>\`.
+   - The content inside \`<jsonResponse>\` must be **a valid JSON object**.
+   - The JSON structure must exactly match the expected format.
+
+2. **Do Not Add Extra Information**  
+   - **Do not return explanations**, introductory text, or markdown formatting.
+   - **Do not return JSON outside of the <jsonResponse> wrapper.**
+
+3. **Example of Expected Output Format**
+<jsonResponse>{
+    "files": ["frontend/src/hooks/useChatStream.ts", "frontend/src/components/ChatInput.tsx"],
+    "thinking_process": "The bug description suggests an issue with state updates in the chat stream. Since 'useChatStream.ts' handles chat messages, it is the primary suspect, along with 'ChatInput.tsx', which interacts with the message state."
+}</jsonResponse>
+   - The JSON must contain **only the relevant fields**.
+   - The **"thinking_process"** field must provide an analysis of why the chosen files are relevant.
+
+4. **If Asked to Modify Code**
+   - The output must be formatted as follows:
+   - IMPORTANT: Code content must be RAW, not JSON-encoded strings!
+<jsonResponse>{
+    "modified_files": {
+        "frontend/src/hooks/useChatStream.ts": "import React from 'react';\n\nexport function Component() {\n  return <div>Content</div>;\n}",
+        "frontend/src/components/ChatInput.tsx": "import { useState } from 'react';\n\nexport function Input() {\n  // Code content...\n}"
+    },
+    "thinking_process": "After reviewing the bug description, I identified that the issue is caused by an incomplete dependency array in useEffect, preventing state updates. I have modified the code accordingly."
+}</jsonResponse>
+   - The **"modified_files"** field must contain a dictionary where the keys are file paths and the values are the updated code content.
+
+5. **If Asked to Commit Changes**
+   - The response must follow this format:
+<jsonResponse>{
+    "commit_message": "Fix issue where messages were not being saved due to missing state update in useChatStream.ts",
+    "thinking_process": "The primary fix addresses a missing state update in useChatStream.ts, which was preventing messages from being saved. The commit message reflects this fix concisely."
+}</jsonResponse>
+   - The **"commit_message"** must be clear and descriptive.
+   - The **"thinking_process"** must explain the reasoning behind the commit message.
+
+# **IMPORTANT1:**
+Failure to strictly follow these rules will result in an invalid response. **Your response must be a well-formed JSON object wrapped inside \`<jsonResponse>\` with the required fields.**\
+PLEASE DO NOT RETURN RAW JSON OBJECTS WITHOUT WRAPPING THEM IN \`<jsonResponse>\` like \`\`\`json
+{xxxxx}
+\`\`\` THIS IS PROHIBITED!!!!!!!!!.
+# **IMPORTANT2:**
+ONLY IF U NEED TO READ FILES OR ANY RESPONSE RELATED TO PROJECT PATH: Do not contain project id like that:"files": [
+        "2025-03-07-19-42-56-518-d6b7469c-1269-4380-973d-fcd62d55b787/backend/index.js",
+        "2025-03-07-19-42-56-518-d6b7469c-1269-4380-973d-fcd62d55b787/backend/schema.sql",
+        "2025-03-07-19-42-56-518-d6b7469c-1269-4380-973d-fcd62d55b787/frontend/src/index.tsx"
+    ],
+    please return files you need like "files": [
+        "backend/index.js",
+        "backend/schema.sql",
+        "frontend/src/index.tsx"
+    ],
+`;
+};
+
+export const leaderPrompt = (message: string): string => {
+  return (
+    systemPrompt() +
+    `You are a professional requirements analyst responsible for analyzing a mafia user's requirements for a CS project. If you fail to conduct a proper analysis, they will take action against your family.
+
+The user's request is as follows:
+${message}
+
+Please categorize the user's task into one of the following types:
+
+debug: Fixing errors in the code (such as compilation errors, runtime errors, or type errors).
+optimize: Improving the performance, structure, or readability of the code (without fixing a bug).
+unrelated: If the request is unrelated to code or the CS project.
+
+After the analysis is complete, strictly follow the mafia's instructions and return the JSON structure wrapped inside a single XML element. The XML element must be named <jsonResponse>, and its content should be a valid JSON object.
+
+When generating the JSON response, **ensure that the description in JSON is as detailed as possible** by specifying:  
+1. **The affected module, file, or function**  
+2. **The operation the user wants to perform**  
+3. **The specific issue or error they encountered**  
+4. **How they expect the problem to be resolved**  
+
+### **AI Thought Process:**
+First, I will determine if the request is code-related by checking:
+
+1. Is this about development/programming?
+   - Contains technical terms (function, code, error, component, etc.)
+   - Mentions file paths or code elements
+   - Discusses software functionality
+
+2. Is this a general question?
+   - About weather, time, or general knowledge
+   - Personal inquiries or casual conversation
+   - Questions unrelated to development
+
+For code-related tasks:
+- If about errors/bugs -> DEBUG
+- If about improvements -> OPTIMIZE
+- If about code structure -> REFACTOR
+
+For non-code tasks:
+- Mark as UNRELATED
+- Explain why it's not a development task
+- Suggest using a general assistant instead
+
+### **Output Format**
+<jsonResponse>{
+    "task_type": "debug" | "optimize" | "unrelated",
+    "description": "Examples:\n\n1. Code task: In 'src/project/utils.ts', the user encountered a TypeScript module error that needs debugging.\n\n2. Unrelated task: The user asked about weather in Madison. This is not a code or development related question, but rather a general weather inquiry that should be handled by a general assistant.",
+    "thinking_process": "After analyzing the request, I identified that the issue involves a missing module import, which prevents compilation. This falls under debugging since it requires fixing a dependency resolution problem."
+}</jsonResponse>
+
+Otherwise, I cannot guarantee the safety of your family. :(`
+  );
+};
+export const refactorPrompt = (message: string, file_structure: string[]) => {
+  return (
+    systemPrompt() +
+    `You are a seasoned software engineer known for your expertise in code refactoring. Your mission is to refactor the codebase to improve its structure, readability, and maintainability.
+    and also provide a detailed refactoring description.
+---
+### **Mission Objective:**  
+- The user has requested a **Code Refactor** and provided a description along with the project's file structure.  
+- Your task is to analyze the code and provide a detailed refactoring plan.
+
+---
+
+### **User-Provided Information:**  
+- **Refactor Description:** 
+  ${message}
+Project File Structure:
+${file_structure}
+
+Task Requirements:
+Identify the parts of the code that need refactoring.
+Provide a detailed plan on how to refactor the code.
+Ensure that the refactored code is more efficient, readable, and maintainable.
+
+### **AI Thought Process:**
+To determine how best to refactor the code, I will analyze the request to identify **redundant logic, overly complex structures, or repetitive code** that should be modularized.  
+If multiple components are using similar logic, I will suggest extracting that logic into **utility functions or custom hooks**. If a function or component is too large, I will propose **breaking it down into smaller, reusable parts**.  
+Finally, I will ensure that the refactoring plan maintains the same functionality while improving readability and maintainability.
+
+### **Output Format**
+<jsonResponse>{
+    "files": ["frontend/src/hooks/useChatStream.ts", "frontend/src/utils/chatUtils.ts"],
+    "description": "The user requested refactoring of message handling logic. Since chat state management is handled in 'useChatStream.ts', I suggest extracting reusable logic into a new utility file, 'chatUtils.ts'.",
+    "thinking_process": "The user requested refactoring of message handling logic. Since chat state management is handled in 'useChatStream.ts', I suggest extracting reusable logic into a new utility file, 'chatUtils.ts'."
+}</jsonResponse>
+
+Failure is Not an Option!`
+  );
+};
+export const optimizePrompt = (message: string, file_structure: string[]) => {
+  return (
+    systemPrompt() +
+    `You are a code performance optimization expert. Your mission is to analyze the codebase and identify performance bottlenecks.
+    and also provide a detailed optimization desciption.
+---
+
+### **Mission Objective:**  
+- The user has requested a **Code Optimization** and provided a description along with the project's file structure.  
+- Your task is to analyze the code and provide a detailed optimization plan.
+
+---
+
+### **User-Provided Information:**  
+- **Optimization Description:**  
+  ${message}
+- **Project File Structure:**  
+  ${file_structure}
+
+### **AI Thought Process:**
+To optimize the code effectively, I will first analyze the provided description to identify **potential performance bottlenecks**.  
+I will look for keywords related to **unnecessary re-renders, expensive computations, API inefficiencies, or memory leaks**.  
+If the issue involves **React components**, I will check for optimizations using **React.memo, useMemo, or useCallback** to reduce re-renders.  
+If the issue is related to **API calls**, I will explore caching strategies, **batching requests, or reducing redundant fetch calls**.  
+Once I determine the likely causes of inefficiency, I will propose specific solutions for optimizing the affected areas.
+
+---
+
+### **Output Format**
+<jsonResponse>{
+    "files": ["frontend/src/components/index.tsx", "frontend/src/utils/chat.ts"],
+    "description" : "The user's optimization request suggests that the ChatList component is re-rendering too frequently. Since ChatList.tsx is responsible for displaying messages, applying React.memo to prevent unnecessary updates will likely improve performance. Additionally, optimizing state updates in useChatStream.ts will help reduce redundant renders.",
+    "thinking_process": "The user's optimization request suggests that the ChatList component is re-rendering too frequently. Since ChatList.tsx is responsible for displaying messages, applying React.memo to prevent unnecessary updates will likely improve performance. Additionally, optimizing state updates in useChatStream.ts will help reduce redundant renders."
+}</jsonResponse>
+
+Failure is Not an Option! If you fail, the codebase will remain inefficient and slow.`
+  );
+};
+export const editFilePrompt = (
+  description: string,
+  file_content: { [key: string]: string }
+) => {
+  return (
+    systemPrompt() +
+    `You are a senior software engineer with extensive experience in React and TypeScript. Your mission is to edit the code files while preserving all existing functionality and structure.
+
+---
+
+### **Mission Objective:**
+- The user has provided a description of the issue and the relevant code files.
+- Your task is to edit the code files to fix the issue while maintaining all existing code functionality.
+- You must preserve all existing imports, components, functions, and features unless explicitly told to remove them.
+- Any modifications should be surgical and focused only on the specific issue being fixed.
+
+---
+
+### **User-Provided Information:**
+- **Description:**
+  ${description}
+- **Code Content:**
+  ${JSON.stringify(file_content, null, 2)}
+
+### **AI Thought Process:**
+1. First, I will carefully analyze the provided description to understand **the specific issue that needs to be fixed**.
+2. I will examine the code files while noting all existing:
+   - Imports and dependencies
+   - Component structures and hierarchies
+   - State management and hooks
+   - Props and type definitions
+   - Existing functionality and features
+3. I will identify the minimal set of changes needed to fix the issue.
+4. When making modifications, I will:
+   - Preserve all existing imports
+   - Maintain component structure and naming
+   - Keep all existing functionality intact
+   - Only modify code directly related to the issue
+5. Before finalizing, I will verify that:
+   - All original features are preserved
+   - The fix addresses the specific issue
+   - Code style and standards are maintained
+   - No unintended side effects are introduced
+
+---
+
+### **Strict Requirements:**
+1. NEVER remove existing imports unless explicitly told to
+2. NEVER remove existing components or functions unless explicitly told to
+3. NEVER simplify or reduce existing code unless explicitly told to
+4. ALL changes must be surgical and focused only on the specific issue
+5. Return the COMPLETE updated code with ALL original functionality preserved
+
+---
+
+### **Output Format**
+<jsonResponse>{
+    "modified_files": {
+        "frontend/src/components/file.tsx": "import React from 'react';\nimport { useState } from 'react';\n\nexport function Component() {\n  const [state, setState] = useState(null);\n  return <div>Content</div>;\n}",
+        "frontend/src/utils/file.ts": "export function helperFunction() {\n  // Complete implementation\n  return true;\n}"
+    },
+    "thinking_process": "After analyzing the code, I identified the specific issue. The fix has been implemented while preserving all existing functionality, including [list specific preserved features]. The changes only affect [describe specific changes], and all other code remains intact."
+}</jsonResponse>
+
+Failure is Not an Option! The code must be fixed while preserving ALL existing functionality.`
+  );
+};
+export const codeReviewPrompt = (message: string) => {
+  return (
+    systemPrompt() +
+    `You are a senior code reviewer. Your mission is to review the code changes made by the user.
+
+---
+
+### **Mission Objective:**  
+- The user has provided the code changes.  
+- Your task is to review the code changes and ensure they are correct.
+
+---
+
+### **User-Provided Information:**  
+- **Code Changes:**  
+  ${message}
+
+### **AI Thought Process:**
+To conduct a thorough code review, I will first analyze the provided changes to understand **the intended functionality** and ensure they align with best practices.  
+I will check for **correctness** by verifying whether the modifications actually fix the described issue or implement the expected feature.  
+If the changes involve **state management**, I will ensure updates are handled correctly to prevent **stale state issues or unnecessary re-renders**.  
+For **API-related modifications**, I will confirm that error handling is in place to prevent unexpected failures.  
+Additionally, I will assess **code readability, maintainability, and adherence to project conventions**.  
+If any issues are found, I will provide actionable feedback on how to improve the code.
+
+---
+
+### **Output Format**
+<jsonResponse>{
+    "review_result": "Correct Fix" | "Still has issues",
+    "comments": [
+        "Ensure error handling is in place for failed API requests.",
+        "Consider using React.memo to prevent unnecessary re-renders in ChatList."
+    ],
+    "thinking_process": "The code correctly fixes the issue by adding a new mutation, but it lacks proper error handling for failed API responses. I suggest adding a try-catch block to improve robustness."
+}</jsonResponse>
+
+Failure is Not an Option! If you fail, the code changes will not be reviewed.`
+  );
+};
+export const commitChangesPrompt = (message: string) => {
+  return (
+    systemPrompt() +
+    `You are a Git version control assistant. Your mission is to commit the code changes to the repository.
+
+---
+
+### **Mission Objective:**  
+- The user has provided code changes that need to be committed.  
+- Your task is to analyze the changes and generate a clear, descriptive commit message.
+
+---
+
+### **User-Provided Information:**  
+- **Code Changes:**  
+  ${message}
+
+### **AI Thought Process:**
+To generate an effective commit message, I will first analyze the provided code changes to determine **the primary functionality being modified**.  
+If the changes involve **bug fixes**, I will craft a message that clearly describes the issue being resolved.  
+If the changes add **new features**, I will ensure the commit message concisely explains the functionality introduced.  
+For **refactoring or optimizations**, I will highlight the improvements made, such as **performance enhancements or code restructuring**.  
+The final commit message will follow **conventional commit standards** to ensure clarity and maintainability in version control.
+
+---
+
+### **Output Format**
+<jsonResponse>{
+    "commit_message": "Fix issue where messages were not being saved due to missing state update in useChatStream.ts",
+    "thinking_process": "After analyzing the code changes, I determined that the primary fix addresses a missing state update in useChatStream.ts, which was preventing messages from being saved. The commit message reflects this fix concisely."
+}</jsonResponse>
+
+Failure is Not an Option! If you fail, the changes will not be committed.`
+  );
+};
+import { Message } from '@/const/MessageType';
+import { getToolUsageMap } from './toolNodes';
+
+export const confirmationPrompt = (
+  taskType: string,
+  context: AgentContext
+): string => {
+  const toolUsageMap = getToolUsageMap();
+  const toolsDescription = Object.entries(toolUsageMap)
+    .map(([toolName, usage], index) => {
+      return `${index + 1}. ${toolName}:
+   - Use for: ${usage.useFor}
+   - Input: ${usage.input}
+   - Output: ${usage.output}
+   - When to use: ${usage.whenToUse}
+   - Next step: ${usage.nextStep || 'Task completion'}`;
+    })
+    .join('\n\n');
+
+  return (
+    systemPrompt() +
+    `You are a task manager AI responsible for coordinating the development workflow. Your job is to analyze the current state and decide the next action.
+
+### Current Context:
+1. Original Request: ${context.request}
+2. Task Type: ${context.task_type}
+3. Current Step: ${JSON.stringify(context.currentStep, null, 2)}
+4. Project Files: ${JSON.stringify(context.fileStructure, null, 2)}
+5. Modified Files: ${JSON.stringify(context.modifiedFiles, null, 2)}
+6. File Contents: ${JSON.stringify(context.fileContents, null, 2)}
+${context.reviewComments ? `6. Review Comments: ${JSON.stringify(context.reviewComments, null, 2)}` : ''}
+${context.commitMessage ? `7. Commit Message: ${context.commitMessage}` : ''}
+
+### Available Tools:
+${toolsDescription}
+
+### Decision Making Process:
+IMPORTANT: If task_type is already specified (${context.task_type}), DO NOT use taskTool - skip directly to file handling!
+
+1. Start here:
+   - If task_type is NOT specified: use taskTool first
+   - If task_type IS specified: skip to step 2
+2. Before any file modifications:
+   - If context.fileContents is empty, MUST use readFileTool first
+   - NEVER proceed to editFileTool without file contents
+   - Always check Object.keys(context.fileContents).length before editing
+3. Once file contents are ready:
+   - Use editFileTool to make necessary changes
+   - Use codeReviewTool to verify changes
+4. After successful review:
+   - Use applyChangesTool to apply changes
+   - Use commitChangesTool to prepare commit
+5. Critical Rules (In Order of Priority):
+   - FIRST: If task_type is specified (current: ${context.task_type}), NEVER use taskTool
+   - SECOND: NEVER edit files without contents (check context.fileContents)
+   - THIRD: If fileContents empty but needed, use readFileTool next
+   - FOURTH: Only proceed to editFileTool when file contents are available
+   - LAST: If any step fails, return to appropriate previous step
+
+### Output Format:
+<jsonResponse>{
+    "completed": boolean,
+    "next_step": {
+        "tool": "taskTool" | "editFileTool" | "codeReviewTool" | "applyChangesTool" | "commitChangesTool",
+        "description": "Detailed description of what needs to be done",
+        "files": ["file/paths/if/needed"]
+    },
+    "thinking_process": "Explanation of why this step is needed and how it helps progress the task"
+}</jsonResponse>
+
+Make your decision based on the current context and ensure a logical progression through the development workflow.`
+  );
+};
+
+export const summaryPrompt = (message: string) => {
+  return (
+    systemPrompt() +
+    `You are a conversation summarizer. Your mission is to provide a clear, concise summary of the code changes made during this interaction.
+
+### **Mission Objective:**
+- Create a clear summary of code changes and technical decisions
+- Include before/after code comparisons where relevant
+- Highlight key modifications and their purposes
+
+### **User-Provided Information:**
+${message}
+
+### **Output Format**
+<jsonResponse>{
+    "final_response": "Here is a summary of the changes made:\\n\\n1. Purpose: [describe purpose]\\n2. Modified files: [list files]\\n3. Changes accomplished: [describe changes]\\n4. Technical details: [list important details]"
+}</jsonResponse>
+
+Remember to include ALL code changes made during the conversation, formatted with proper markdown code blocks.`
+  );
+};
+
+export const findbugPrompt = (message: string, file_structure: string[]) => {
+  return (
+    systemPrompt() +
+    `You are an elite Apex Legends player, but hackers have hijacked your account! They demand that you find the root cause of a critical bug in your project before they wipe all your skins and reset your rank.
+
+---
+
+### **Mission Objective:**  
+The user has encountered a **Bug** and provided a description along with the project's file structure.  
+Your task is to analyze the potential source of the Bug and return a **list of affected file paths** where the issue might be occurring and also provide detailed description about that bug.
+
+---
+
+### **User-Provided Information:**  
+- **Bug Description:**  
+  ${message}
+- **Project File Structure:**  
+  ${file_structure}
+
+
+### **Output Format**
+<jsonResponse>{
+    "files": ["frontend/src/components/chat/ChatList.tsx", "frontend/src/utils/chat.ts"],
+    "description": "The bug occurs when the chat messages are not updating in real-time. The user expects the messages to be displayed instantly after sending a message, but there is a delay in the update.",
+    "thinking_process": "Based on the bug description, the issue involves React's state updates not propagating correctly. This suggests that the problem is likely in the useChatStream.ts hook or the context provider managing state."
+}</jsonResponse>
+
+Failure is Not an Option! If you fail, the hackers will report you to EA.`
+  );
+};
diff --git a/frontend/src/hooks/multi-agent/managerAgent.ts b/frontend/src/hooks/multi-agent/managerAgent.ts
new file mode 100644
index 00000000..15134a2d
--- /dev/null
+++ b/frontend/src/hooks/multi-agent/managerAgent.ts
@@ -0,0 +1,247 @@
+import { ChatInputType } from '@/graphql/type';
+import { startChatStream } from '@/api/ChatStreamAPI';
+import { findToolNode } from './toolNodes';
+import { confirmationPrompt, AgentContext, TaskType } from './agentPrompt';
+import path from 'path';
+import { parseXmlToJson } from '@/utils/parser';
+import { Message } from '@/const/MessageType';
+import { m } from 'framer-motion';
+
+/**
+ * Normalize file paths.
+ */
+function normalizePath(filePath: string): string {
+  return path.normalize(filePath).replace(/\\/g, '/');
+}
+
+/**
+ * Validate and normalize file list.
+ */
+function validateFiles(files: string[]): string[] {
+  return files.map((file) => {
+    const normalized = normalizePath(file);
+    if (!normalized || normalized.includes('..')) {
+      throw new Error(`Invalid file path: ${file}`);
+    }
+    return normalized;
+  });
+}
+
+/**
+ * The Manager Agent is responsible for:
+ * 1. Initializing the context.
+ * 2. Letting AI determine each step of the process.
+ * 3. Executing the tool selected by AI.
+ * 4. Repeating until AI determines the task is complete.
+ */
+export async function managerAgent(
+  tempId: string,
+  input: ChatInputType,
+  setMessages: React.Dispatch<React.SetStateAction<Message[]>>,
+  projectPath: string,
+  saveMessage: any,
+  token: string,
+  refreshProjects: () => Promise<void>,
+  setFilePath: (path: string) => void,
+  editorRef: React.MutableRefObject<any>,
+  setThinkingProcess: React.Dispatch<React.SetStateAction<Message[]>>,
+  setIsTPUpdating: React.Dispatch<React.SetStateAction<boolean>>,
+  setLoadingSubmit: React.Dispatch<React.SetStateAction<boolean>>
+): Promise<string> {
+  console.log('managerAgent called with input:', input);
+
+  try {
+    // Initialize context
+    const context: AgentContext = {
+      tempId,
+      task_type: undefined, // Will be set after task analysis
+      request: input.message, // Store the original request
+      projectPath,
+      fileStructure: [],
+      fileContents: {},
+      modifiedFiles: {},
+      requiredFiles: [], // Initialize empty array for required files
+      accumulatedThoughts: [], // Initialize empty array for thoughts
+      currentStep: {
+        tool: undefined,
+        status: 'initializing',
+        description: 'Starting task analysis',
+      },
+      setMessages,
+      saveMessage,
+      token,
+      setFilePath,
+      editorRef,
+      setThinkingProcess,
+      setIsTPUpdating,
+      setLoadingSubmit,
+    };
+
+    // Retrieve project file structure
+    try {
+      const response = await fetch(
+        `/api/filestructure?path=${encodeURIComponent(projectPath)}`,
+        {
+          method: 'GET',
+          credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+        }
+      );
+      const data = await response.json();
+      context.fileStructure = validateFiles(data.res);
+      console.log('Initialized file structure:', context.fileStructure);
+    } catch (error) {
+      console.error('Error fetching file structure:', error);
+      throw error;
+    }
+
+    const MAX_ITERATIONS = 60;
+    const TIMEOUT = 30 * 60 * 1000; // 30-minute timeout
+    const startTime = Date.now();
+    let iteration = 0;
+
+    // Main loop: let AI determine each step
+    while (iteration < MAX_ITERATIONS && Date.now() - startTime < TIMEOUT) {
+      // Get AI's decision
+      const confirmationPromptStr = confirmationPrompt(
+        context.task_type,
+        context
+      );
+      const response = await startChatStream(
+        {
+          chatId: input.chatId,
+          message: confirmationPromptStr,
+          model: input.model,
+          role: `assistant`,
+        },
+        token
+      );
+
+      // Parse AI's response using `parseXmlToJson`
+      let decision;
+      try {
+        decision = parseXmlToJson(response);
+        console.log('Parsed AI Decision:', decision);
+      } catch (error) {
+        console.error('Error parsing AI response:', error);
+        throw error;
+      }
+
+      // If task is complete, exit loop
+      if (decision.completed) {
+        break;
+      }
+
+      // Update the current step in context
+      context.currentStep = {
+        tool: decision.next_step.tool,
+        status: 'executing',
+        description: decision.next_step.description,
+      };
+
+      console.log('required Files:', decision.next_step.files);
+      if (decision.next_step.files) {
+        context.requiredFiles = [
+          ...context.requiredFiles,
+          ...decision.next_step.files.filter(
+            (file) => !context.requiredFiles.includes(file)
+          ),
+        ];
+      }
+
+      // Find and execute the tool
+      const toolNode = findToolNode(decision.next_step.tool);
+      if (!toolNode) {
+        throw new Error(`Tool not found: ${decision.next_step.tool}`);
+      }
+
+      // Execute the tool
+      const toolInput = {
+        ...input,
+        role: `assistant`,
+        message: decision.next_step.description,
+      };
+
+      await toolNode.behavior(toolInput, context);
+
+      // Update step status
+      context.currentStep.status = 'completed';
+
+      iteration++;
+      console.log(`Task iteration ${iteration}/${MAX_ITERATIONS}`);
+      if (context.task_type == TaskType.UNRELATED) {
+        break;
+      }
+    }
+
+    // Check if task exceeded limits
+    if (iteration >= MAX_ITERATIONS) {
+      throw new Error('Task exceeded maximum iterations');
+    }
+    if (Date.now() - startTime >= TIMEOUT) {
+      throw new Error('Task timed out');
+    }
+
+    // Handle final file modifications
+    if (Object.keys(context.modifiedFiles).length > 0) {
+      await Promise.all(
+        Object.entries(context.modifiedFiles).map(
+          async ([filePath, content]) => {
+            try {
+              await fetch('/api/file', {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                  filePath: normalizePath(`${context.projectPath}/${filePath}`),
+                  newContent: content,
+                }),
+              });
+              console.log(`File updated: ${filePath}`);
+            } catch (error) {
+              console.error(`Error updating file ${filePath}:`, error);
+              throw error;
+            }
+          }
+        )
+      );
+
+      // Refresh projects to update the code display
+      await refreshProjects();
+    }
+
+    // Generate summary and save message
+    if (context.accumulatedThoughts.length > 0) {
+      // Create summary using summaryTool
+      const toolNode = findToolNode('summaryTool');
+      if (!toolNode) {
+        throw new Error('Summary tool not found');
+      }
+
+      await toolNode.behavior(input, context);
+
+      // Save the final summary message
+      if (context.final_response) {
+        context.saveMessage({
+          variables: {
+            input: {
+              chatId: input.chatId,
+              message: JSON.stringify({
+                final_response: context.final_response,
+                thinking_process: context.accumulatedThoughts.join('\n\n'),
+              }),
+              model: input.model,
+              role: 'assistant',
+            },
+          },
+        });
+      }
+    }
+
+    console.log('Task completed successfully with updated files');
+    return context.accumulatedThoughts.join('\n\n');
+  } catch (error) {
+    console.error('Error in managerAgent:', error);
+    throw error;
+  }
+}
diff --git a/frontend/src/hooks/multi-agent/toolNodes.ts b/frontend/src/hooks/multi-agent/toolNodes.ts
new file mode 100644
index 00000000..d2ccd6d1
--- /dev/null
+++ b/frontend/src/hooks/multi-agent/toolNodes.ts
@@ -0,0 +1,144 @@
+import { ChatInputType } from '@/graphql/type';
+import { AgentContext } from './agentPrompt';
+import {
+  taskTool,
+  readFileTool,
+  applyChangesTool,
+  codeReviewTool,
+  commitChangesTool,
+  editFileTool,
+  summaryTool,
+} from './tools';
+
+export interface ToolUsage {
+  useFor: string; // Purpose of the tool
+  input: string; // Input description
+  output: string; // Output description
+  whenToUse: string; // When to use the tool
+  nextStep?: string; // Typical next step
+}
+
+// Modify the Tool interface to include usage instructions
+export interface Tool {
+  toolName: string;
+  behavior: (input: ChatInputType, context: AgentContext) => Promise<void>;
+  description: string;
+  usage: ToolUsage;
+}
+
+export const managerTools: Tool[] = [
+  {
+    toolName: 'summaryTool',
+    behavior: summaryTool,
+    description:
+      'Generates a final response summary and thinking process summary of the conversation.',
+    usage: {
+      useFor: 'Summarizing conversation and generating final response',
+      input: 'Accumulated thoughts and conversation history',
+      output: 'Final response and thinking process summary',
+      whenToUse: 'After all task steps are completed',
+      nextStep: 'Task completed',
+    },
+  },
+  {
+    toolName: 'taskTool',
+    behavior: taskTool,
+    description:
+      'Analyzes task requirements, identifies relevant files, and generates a processing plan.',
+    usage: {
+      useFor:
+        'Understanding the task requirements and identifying relevant files',
+      input: 'Task description and current status',
+      output: 'List of files that need to be checked or modified',
+      whenToUse: 'At the beginning of a task or when new files are required',
+      nextStep: 'readFileTool',
+    },
+  },
+  {
+    toolName: 'readFileTool',
+    behavior: readFileTool,
+    description: 'Reads the content of identified files.',
+    usage: {
+      useFor: 'Retrieving file content for analysis and modification',
+      input: 'List of file paths',
+      output: 'File content',
+      whenToUse: 'After identifying the files to be processed',
+      nextStep: 'editFileTool',
+    },
+  },
+  {
+    toolName: 'editFileTool',
+    behavior: editFileTool,
+    description:
+      'Generates editing prompts based on the file content stored in the context.',
+    usage: {
+      useFor: 'Implementing the required code changes',
+      input: 'File content and modification plan',
+      output: 'Modified code',
+      whenToUse: 'After analysis is complete or when fixes are needed',
+      nextStep: 'codeReviewTool',
+    },
+  },
+  {
+    toolName: 'codeReviewTool',
+    behavior: codeReviewTool,
+    description:
+      'Generates a code review report based on the modified file content in the context.',
+    usage: {
+      useFor: 'Ensuring code quality and correctness',
+      input: 'Modified file content',
+      output: 'Review comments and suggestions',
+      whenToUse: 'After code modifications',
+      nextStep:
+        'If issues exist, return to editFileTool; if passed, proceed to applyChangesTool',
+    },
+  },
+  {
+    toolName: 'applyChangesTool',
+    behavior: applyChangesTool,
+    description:
+      'Synchronizes modifications to the file content in the context.',
+    usage: {
+      useFor: 'Confirming and applying verified changes',
+      input: 'Reviewed and approved modifications',
+      output: 'Updated file content',
+      whenToUse: 'After code review is completed',
+      nextStep: 'commitChangesTool',
+    },
+  },
+  {
+    toolName: 'commitChangesTool',
+    behavior: commitChangesTool,
+    description:
+      'Generates commit messages based on modifications stored in the context.',
+    usage: {
+      useFor: 'Generating descriptive commit messages',
+      input: 'All applied changes',
+      output: 'Commit message',
+      whenToUse: 'After changes have been applied',
+      nextStep: 'Task completed',
+    },
+  },
+];
+
+export function findToolNode(toolName: string): Tool | undefined {
+  return managerTools.find((tool) => tool.toolName === toolName);
+}
+
+// Helper function: Retrieve tool usage instructions
+export function getToolUsageMap(): Record<string, ToolUsage> {
+  const usageMap: Record<string, ToolUsage> = {};
+  managerTools.forEach((tool) => {
+    usageMap[tool.toolName] = tool.usage;
+  });
+  return usageMap;
+}
+
+// Helper function: Retrieve tool descriptions
+export function getToolDescriptionMap(): Record<string, string> {
+  const descMap: Record<string, string> = {};
+  managerTools.forEach((tool) => {
+    descMap[tool.toolName] = tool.description;
+  });
+  return descMap;
+}
diff --git a/frontend/src/hooks/multi-agent/tools.ts b/frontend/src/hooks/multi-agent/tools.ts
new file mode 100644
index 00000000..cb736215
--- /dev/null
+++ b/frontend/src/hooks/multi-agent/tools.ts
@@ -0,0 +1,710 @@
+import { toast } from 'sonner';
+import {
+  leaderPrompt,
+  findbugPrompt,
+  refactorPrompt,
+  optimizePrompt,
+  editFilePrompt,
+  codeReviewPrompt,
+  commitChangesPrompt,
+  summaryPrompt,
+  AgentContext,
+  TaskType,
+} from './agentPrompt';
+import { startChatStream } from '@/api/ChatStreamAPI';
+import { parseXmlToJson } from '@/utils/parser';
+import { ChatInputType } from '@/graphql/type';
+
+/**
+ * Helper function to save and display a thinking process (or any provided text)
+ * with a typewriter effect.
+ *
+ * Usage:
+ *   await saveThinkingProcess("The thinking process text", input, context);
+ *
+ * This function stores the text in context.accumulatedThoughts and then gradually
+ * displays it using a typewriter effect. After the entire text is shown, it appends
+ * two newline characters.
+ */
+const formatThinkingText = (text: string): string => {
+  // Format headers with simple separator
+  text = text.replace(
+    /^([A-Z][^:\n]+):$/gm,
+    (match) => `${match}\n-------------`
+  );
+
+  // Format bullet points
+  text = text.replace(/^[•-]\s/gm, '• ');
+
+  // Add extra newlines between sections
+  text = text.replace(/\n\n(?=[A-Z])/g, '\n\n\n');
+
+  return text;
+};
+
+const saveThinkingProcess = async (
+  thinkingText: string,
+  input: ChatInputType,
+  context: AgentContext
+): Promise<void> => {
+  if (!thinkingText) return;
+
+  // Format and accumulate the thinking process text for historical record.
+  context.accumulatedThoughts.push(formatThinkingText(thinkingText));
+  const typewriterEffect = async (
+    textArray: string[],
+    delay: number
+  ): Promise<void> => {
+    return new Promise((resolve) => {
+      let index = 0;
+
+      const updateMessage = () => {
+        if (index < textArray.length) {
+          context.setIsTPUpdating(true);
+          context.setThinkingProcess((prev) => {
+            const lastMsg = prev[prev.length - 1];
+            if (
+              lastMsg?.role === 'assistant' &&
+              lastMsg.id === context.tempId
+            ) {
+              return [
+                ...prev.slice(0, -1),
+                {
+                  ...lastMsg,
+                  content: lastMsg.content + textArray[index],
+                },
+              ];
+            } else {
+              return [
+                ...prev,
+                {
+                  id: context.tempId,
+                  role: 'assistant',
+                  content: textArray[index],
+                  createdAt: new Date().toISOString(),
+                },
+              ];
+            }
+          });
+
+          index++;
+          setTimeout(updateMessage, delay);
+        } else {
+          resolve();
+        }
+      };
+
+      updateMessage();
+    });
+  };
+  const brokenText = breakText(thinkingText);
+  await typewriterEffect(brokenText, 10);
+};
+
+const saveFinalResponse = async (
+  final_response: string,
+  input: ChatInputType,
+  context: AgentContext
+): Promise<void> => {
+  const typewriterEffect = async (
+    textArray: string[],
+    delay: number
+  ): Promise<void> => {
+    return new Promise((resolve) => {
+      let index = 0;
+
+      const updateMessage = () => {
+        if (index < textArray.length) {
+          context.setMessages((prev) => {
+            const lastMsg = prev[prev.length - 1];
+            if (
+              lastMsg?.role === 'assistant' &&
+              lastMsg.id === context.tempId
+            ) {
+              return [
+                ...prev.slice(0, -1),
+                {
+                  ...lastMsg,
+                  content: lastMsg.content + textArray[index],
+                },
+              ];
+            } else {
+              return [
+                ...prev,
+                {
+                  id: context.tempId,
+                  role: 'assistant',
+                  content: textArray[index],
+                  createdAt: new Date().toISOString(),
+                },
+              ];
+            }
+          });
+
+          index++;
+          setTimeout(updateMessage, delay);
+        } else {
+          resolve();
+        }
+      };
+
+      updateMessage();
+    });
+  };
+  context.final_response = final_response;
+  const brokenText = breakText(final_response);
+  await typewriterEffect(brokenText, 10);
+};
+
+const breakText = (text: string): string[] => {
+  return text.match(/(\S{1,3}|\s+)/g) || [];
+};
+
+/**
+ * Get the corresponding prompt based on the task type.
+ */
+function getPromptByTaskType(
+  task_type: TaskType | null,
+  message: string,
+  fileStructure: string[]
+): string {
+  // Validate inputs
+  if (!task_type) {
+    throw new Error('Task type is required');
+  }
+  if (!message || typeof message !== 'string') {
+    throw new Error('Message is required and must be a string');
+  }
+  if (!Array.isArray(fileStructure)) {
+    throw new Error('File structure must be an array');
+  }
+
+  // Handle task types
+  switch (task_type) {
+    case TaskType.DEBUG:
+      return findbugPrompt(message, fileStructure);
+    case TaskType.REFACTOR:
+      return refactorPrompt(message, fileStructure);
+    case TaskType.OPTIMIZE:
+      return optimizePrompt(message, fileStructure);
+    case TaskType.UNRELATED:
+      throw new Error('Cannot generate prompt for unrelated tasks');
+    default:
+      throw new Error(`Unsupported task type: ${task_type}`);
+  }
+}
+
+/**
+ * Task analysis tool:
+ * Analyzes requirements and identifies relevant files.
+ */
+export const taskTool = async (
+  input: ChatInputType,
+  context: AgentContext
+): Promise<void> => {
+  if (!input || !context) {
+    throw new Error('Invalid input or context');
+  }
+
+  try {
+    console.log('Starting task analysis...');
+    console.log('Current input.message:', input.message);
+    const prompt = leaderPrompt(input.message);
+
+    // Get task analysis response
+    const taskResponse = await startChatStream(
+      {
+        chatId: input.chatId,
+        message: prompt,
+        model: input.model,
+        role: input.role,
+      },
+      context.token
+    );
+
+    // Parse task analysis response
+    const result = parseXmlToJson(taskResponse);
+    if (!result || typeof result !== 'object') {
+      throw new Error('Invalid task analysis response format');
+    }
+
+    // Validate task type
+    const taskType = result.task_type;
+    if (!taskType || !Object.values(TaskType).includes(taskType)) {
+      throw new Error(`Invalid task type: ${taskType || 'undefined'}`);
+    }
+
+    // Update context and display analysis
+    context.task_type = taskType;
+    await saveThinkingProcess(
+      `Task Analysis\n-------------\n\nType: ${taskType}\n\n${result.description ? `Description: ${result.description}\n` : ''}\n`,
+      input,
+      context
+    );
+
+    // Handle unrelated tasks with early return
+    if (taskType === TaskType.UNRELATED) {
+      await saveThinkingProcess(
+        "This question isn't related to code or development. Please ask coding-related questions.",
+        input,
+        context
+      );
+      return;
+    }
+
+    // Get and validate file analysis prompt
+    const fileAnalysisPrompt = getPromptByTaskType(
+      taskType,
+      input.message,
+      context.fileStructure
+    );
+    if (!fileAnalysisPrompt) {
+      throw new Error(
+        `Failed to generate analysis prompt for task type: ${taskType}`
+      );
+    }
+
+    // Get file analysis from AI
+    await saveThinkingProcess('Analyzing project files...', input, context);
+    const fileResponse = await startChatStream(
+      {
+        chatId: input.chatId,
+        message: fileAnalysisPrompt,
+        model: input.model,
+        role: input.role,
+      },
+      context.token
+    );
+
+    // Parse and validate file analysis response
+    const fileResult = parseXmlToJson(fileResponse);
+    if (!fileResult || typeof fileResult !== 'object') {
+      throw new Error('Invalid file analysis response format');
+    }
+
+    // Validate and process identified files
+    const files = fileResult.files;
+    if (!Array.isArray(files)) {
+      throw new Error('Invalid file analysis: missing files array');
+    }
+
+    // Filter and validate file paths
+    const validFiles = files.filter(
+      (path) => typeof path === 'string' && path.length > 0
+    );
+    if (validFiles.length === 0) {
+      throw new Error('No valid files identified in the analysis');
+    }
+
+    // Show analysis results
+    await saveThinkingProcess(
+      `File Analysis\n-------------\n\nFound ${validFiles.length} relevant files:\n\n${validFiles.map((f) => `• ${f}`).join('\n\n')}`,
+      input,
+      context
+    );
+
+    // Update context with next steps
+    context.requiredFiles = validFiles;
+    context.currentStep = {
+      tool: 'readFileTool',
+      status: 'pending',
+      description: `Reading ${validFiles.length} identified files`,
+    };
+  } catch (error) {
+    console.error('Task analysis error:', error);
+    await saveThinkingProcess(
+      `Error during task analysis: ${error.message}`,
+      input,
+      context
+    );
+    throw error;
+  }
+};
+
+/**
+ * Read file tool:
+ * Reads the content of identified files.
+ */
+export async function readFileTool(
+  input: ChatInputType,
+  context: AgentContext
+): Promise<void> {
+  console.log('readFileTool called with input:', input);
+
+  if (!context.requiredFiles || context.requiredFiles.length === 0) {
+    throw new Error(
+      'No files specified to read. Make sure requiredFiles is set.'
+    );
+  }
+
+  // Read file content for each required file
+  console.log('Reading files:', context.requiredFiles);
+  await Promise.all(
+    context.requiredFiles.map(async (filePath: string) => {
+      try {
+        const response = await fetch(
+          `/api/file?path=${encodeURIComponent(`${context.projectPath}/${filePath}`)}`,
+          {
+            method: 'GET',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+          }
+        );
+        const data = await response.json();
+        context.fileContents[filePath] = data.content;
+      } catch (error) {
+        console.error(`Error reading file ${filePath}:`, error);
+        throw error;
+      }
+    })
+  );
+
+  console.log('Files read:', context.requiredFiles);
+  console.log('File contents loaded:', context.fileContents);
+  toast.success(`${context.requiredFiles.length} files loaded successfully`);
+}
+
+/**
+ * Edit file tool:
+ * Modifies file content based on requirements.
+ */
+export async function editFileTool(
+  input: ChatInputType,
+  context: AgentContext
+): Promise<void> {
+  console.log('editFileTool called with input:', input);
+  console.log('Current file contents:', context.fileContents);
+
+  if (Object.keys(context.fileContents).length === 0) {
+    throw new Error(
+      'No file contents available. Make sure readFileTool was called first.'
+    );
+  }
+
+  // Generate edit prompt
+  const prompt = editFilePrompt(input.message, context.fileContents);
+  console.log('Generated prompt with file contents for editing');
+
+  // Get AI response
+  const response = await startChatStream(
+    {
+      chatId: input.chatId,
+      message: prompt,
+      model: input.model,
+      role: input.role,
+    },
+    context.token
+  );
+
+  // Parse response using `parseXmlToJson`
+  const result = parseXmlToJson(response);
+  await saveThinkingProcess(
+    `Analyzing file changes...\nFiles to modify: ${Object.keys(result.modified_files || {}).join(', ')}`,
+    input,
+    context
+  );
+
+  // Check for files that need to be read or modified
+  if (result.files && Array.isArray(result.files)) {
+    context.requiredFiles = result.files;
+    console.log('New files identified:', result.files);
+  }
+
+  if (!result.modified_files || typeof result.modified_files !== 'object') {
+    throw new Error('Invalid response format: missing modified_files object');
+  }
+
+  // Update required files and content in context
+  const modifiedPaths = Object.keys(result.modified_files);
+  const validPaths = modifiedPaths.filter((path) => !!path);
+  console.log('Adding new paths to required files:', validPaths);
+  context.requiredFiles = Array.from(
+    new Set([...context.requiredFiles, ...validPaths])
+  );
+
+  // Update file content in context with typewriter effect
+  for (const [filePath, content] of Object.entries(result.modified_files)) {
+    // Set current file in code-engine
+    context.setFilePath(filePath);
+    await new Promise((resolve) => setTimeout(resolve, 500)); // Wait for file to load
+
+    // Parse content if it's a JSON string
+    let realContent = content as string;
+    try {
+      if (realContent.startsWith('"') && realContent.endsWith('"')) {
+        realContent = JSON.parse(realContent);
+      }
+    } catch (error) {
+      console.error('Error parsing code content:', error);
+    }
+
+    console.log(`Starting line-by-line changes for ${filePath}`);
+    const lines = realContent.split('\n');
+    let accumulatedContent = '';
+
+    if (context.editorRef?.current) {
+      // Get current editor content as baseline
+      accumulatedContent = context.editorRef.current.getValue();
+
+      // Wait for file path change to take effect
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      // Show each line with animation
+      try {
+        for (let i = 0; i < lines.length; i++) {
+          accumulatedContent = lines.slice(0, i + 1).join('\n');
+          context.editorRef.current.setValue(accumulatedContent);
+          console.log(`Updated line ${i + 1}/${lines.length} in ${filePath}`);
+          await new Promise((resolve) => setTimeout(resolve, 100));
+        }
+      } catch (error) {
+        console.error('Error updating editor content:', error);
+      }
+
+      // Sync final content
+      context.fileContents[filePath] = content as string;
+    }
+
+    // Store final unescaped content
+    context.modifiedFiles[filePath] = realContent;
+    context.fileContents[filePath] = realContent;
+  }
+
+  console.log('Updated files with line-by-line animation of changes');
+}
+
+/**
+ * Apply changes tool:
+ * Confirms and applies file modifications.
+ */
+export async function applyChangesTool(
+  input: ChatInputType,
+  context: AgentContext
+): Promise<void> {
+  console.log('applyChangesTool called with input:', input);
+
+  // Validate modification content
+  Object.entries(context.modifiedFiles).forEach(([filePath, content]) => {
+    if (!content || typeof content !== 'string') {
+      throw new Error(`Invalid content for file: ${filePath}`);
+    }
+  });
+
+  // Update file content in context
+  Object.entries(context.modifiedFiles).forEach(([filePath, content]) => {
+    context.fileContents[filePath] = content;
+  });
+
+  console.log('Updated context with confirmed changes');
+  toast.success('Changes applied successfully');
+}
+
+/**
+ * Code review tool:
+ * Checks whether modifications meet the requirements.
+ */
+export async function codeReviewTool(
+  input: ChatInputType,
+  context: AgentContext
+): Promise<void> {
+  console.log('codeReviewTool called with input:', input);
+
+  // Generate review prompt
+  const formattedMessage = Object.entries(context.modifiedFiles)
+    .map(
+      ([filePath, content]) =>
+        `### File: ${filePath}\n\`\`\`\n${content}\n\`\`\``
+    )
+    .join('\n\n');
+
+  const prompt = codeReviewPrompt(formattedMessage);
+
+  // Get AI response
+  const response = await startChatStream(
+    {
+      chatId: input.chatId,
+      message: prompt,
+      model: input.model,
+      role: input.role,
+    },
+    context.token
+  );
+
+  // Parse review results using `parseXmlToJson`
+  const result = parseXmlToJson(response);
+  await saveThinkingProcess(
+    `Code Review\n-------------\n\nResult: ${result.review_result}\n\nComments:\n\n${result.comments?.map((c) => `• ${c}`).join('\n\n')}`,
+    input,
+    context
+  );
+
+  if (!result.review_result || !result.comments) {
+    throw new Error('Invalid response format: missing review details');
+  }
+
+  // Update review results in context
+  context.reviewComments = result.comments;
+  if (result.review_result === 'Still has issues') {
+    context.currentStep = {
+      tool: 'editFileTool',
+      status: 'pending',
+      description: 'Address review comments',
+    };
+  }
+
+  console.log('Code review completed');
+}
+
+/**
+ * Commit changes tool:
+ * Generates commit messages.
+ */
+export async function commitChangesTool(
+  input: ChatInputType,
+  context: AgentContext
+): Promise<void> {
+  console.log('commitChangesTool called with input:', input);
+
+  // Generate commit message prompt
+  const formattedChanges = Object.entries(context.modifiedFiles)
+    .map(([filePath, content]) => `Modified file: ${filePath}: ${content}`)
+    .join('\n');
+
+  const prompt = commitChangesPrompt(formattedChanges);
+
+  // Get AI response
+  const response = await startChatStream(
+    {
+      chatId: input.chatId,
+      message: prompt,
+      model: input.model,
+      role: input.role,
+    },
+    context.token
+  );
+
+  // Parse commit message using `parseXmlToJson`
+  const result = parseXmlToJson(response);
+  await saveThinkingProcess(
+    `Generated Commit Message\n-------------\n\n${result.commit_message}`,
+    input,
+    context
+  );
+
+  if (!result.commit_message) {
+    throw new Error('Invalid response format: missing commit message');
+  }
+
+  context.commitMessage = result.commit_message;
+  console.log('Generated commit message:', result.commit_message);
+}
+
+/**
+ * Summary tool:
+ * Generates a final response and thinking process summary for the conversation.
+ */
+export async function summaryTool(
+  input: ChatInputType,
+  context: AgentContext
+): Promise<void> {
+  console.log('summaryTool called');
+
+  try {
+    // Prepare code changes analysis
+    const codeAnalysis = Object.entries(context.modifiedFiles)
+      .map(([filePath, newContent]) => {
+        const originalContent = context.fileContents[filePath] || '';
+        const fileExtension = filePath.split('.').pop() || '';
+
+        return `
+File: ${filePath}
+-------------
+
+[Original Code]
+\`\`\`${fileExtension}
+${originalContent}
+\`\`\`
+
+[Modified Code]
+\`\`\`${fileExtension}
+${newContent}
+\`\`\`
+`;
+      })
+      .join('\n\n');
+
+    // Generate summary prompt with both thoughts and code changes
+    const promptContent = `
+${context.accumulatedThoughts.map((thought, i) => `Step ${i + 1}:\n${thought}`).join('\n\n')}
+
+Code Changes Analysis
+-------------
+${codeAnalysis || 'No code changes were made.'}
+
+Analysis Requirements
+-------------
+1. File-specific Changes:
+   • What modifications were made to each file
+   • Impact of each change
+
+2. Change Justification:
+   • Why these changes were necessary
+   • Problems being solved
+
+3. Integration Analysis:
+   • How changes work together
+   • System-wide impact
+
+4. Technical Details:
+   • Implementation specifics
+   • Framework/library usage
+   • Performance considerations
+`;
+
+    const prompt = summaryPrompt(promptContent);
+    const response = await startChatStream(
+      {
+        chatId: input.chatId,
+        message: prompt,
+        model: input.model,
+        role: input.role,
+      },
+      context.token
+    );
+
+    // Parse response
+    const result = parseXmlToJson(response);
+    if (!result.final_response) {
+      throw new Error('Invalid summary response format');
+    }
+
+    // Store both the AI's analysis and the code diffs
+
+    context.setLoadingSubmit(false);
+    context.setIsTPUpdating(false);
+    // Format the final response with clear sections
+    const formattedResponse = `
+Changes Summary
+-------------
+
+${result.final_response
+  .split('\n\n')
+  .map((section) => {
+    // Add bullet points to list items and extra line breaks
+    if (section.match(/^\d\./m)) {
+      return section
+        .replace(/^(\d\.)/gm, '•')
+        .split('\n')
+        .join('\n\n');
+    }
+    return section;
+  })
+  .join('\n\n\n')}
+`;
+    await saveFinalResponse(formattedResponse, input, context);
+    console.log('Summary generated successfully');
+  } catch (error) {
+    console.error('Error in summaryTool:', error);
+    throw error;
+  }
+}
diff --git a/frontend/src/hooks/useChatStream.ts b/frontend/src/hooks/useChatStream.ts
index eb67ad3e..b3e41216 100644
--- a/frontend/src/hooks/useChatStream.ts
+++ b/frontend/src/hooks/useChatStream.ts
@@ -1,17 +1,23 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useContext } from 'react';
 import { useMutation } from '@apollo/client';
-import { CREATE_CHAT } from '@/graphql/request';
+import { CREATE_CHAT, SAVE_MESSAGE } from '@/graphql/request';
 import { Message } from '@/const/MessageType';
 import { toast } from 'sonner';
 import { logger } from '@/app/log/logger';
 import { useAuthContext } from '@/providers/AuthProvider';
+import { startChatStream } from '@/api/ChatStreamAPI';
+import { ProjectContext } from '@/components/chat/code-engine/project-context';
+import { ChatInputType } from '@/graphql/type';
+import { managerAgent } from './multi-agent/managerAgent';
 
-interface UseChatStreamProps {
+export interface UseChatStreamProps {
   chatId: string;
   input: string;
   setInput: (input: string) => void;
   setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+  setThinkingProcess: React.Dispatch<React.SetStateAction<Message[]>>;
   selectedModel: string;
+  setIsTPUpdating: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const useChatStream = ({
@@ -19,13 +25,24 @@ export const useChatStream = ({
   input,
   setInput,
   setMessages,
+  setThinkingProcess,
   selectedModel,
+  setIsTPUpdating,
 }: UseChatStreamProps) => {
   const [loadingSubmit, setLoadingSubmit] = useState(false);
   const [currentChatId, setCurrentChatId] = useState<string>(chatId);
   const { token } = useAuthContext();
+  const { curProject, refreshProjects, setFilePath, editorRef } =
+    useContext(ProjectContext);
+  const [curProjectPath, setCurProjectPath] = useState('');
+
+  useEffect(() => {
+    console.log('curProject:', curProject);
+    if (curProject) {
+      setCurProjectPath(curProject.projectPath);
+    }
+  }, [curProject]);
 
-  // Use useEffect to handle new chat event and cleanup
   useEffect(() => {
     const updateChatId = () => {
       setCurrentChatId('');
@@ -48,6 +65,8 @@ export const useChatStream = ({
     setCurrentChatId(chatId);
   }, [chatId]);
 
+  const [saveMessage] = useMutation(SAVE_MESSAGE);
+
   const [createChat] = useMutation(CREATE_CHAT, {
     onCompleted: async (data) => {
       const newChatId = data.createChat.id;
@@ -62,97 +81,37 @@ export const useChatStream = ({
     },
   });
 
-  const startChatStream = async (
-    targetChatId: string,
-    message: string,
-    model: string,
-    stream: boolean = false // Default to non-streaming for better performance
-  ): Promise<string> => {
-    if (!token) {
-      throw new Error('Not authenticated');
-    }
-
-    const response = await fetch('/api/chat', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${token}`,
-      },
-      body: JSON.stringify({
-        chatId: targetChatId,
-        message,
-        model,
-        stream,
-      }),
-    });
-
-    if (!response.ok) {
-      throw new Error(
-        `Network response was not ok: ${response.status} ${response.statusText}`
-      );
-    }
-    // TODO: Handle streaming responses properly
-    // if (stream) {
-    //   // For streaming responses, aggregate the streamed content
-    //   let fullContent = '';
-    //   const reader = response.body?.getReader();
-    //   if (!reader) {
-    //     throw new Error('No reader available');
-    //   }
-
-    //   while (true) {
-    //     const { done, value } = await reader.read();
-    //     if (done) break;
-
-    //     const text = new TextDecoder().decode(value);
-    //     const lines = text.split('\n\n');
-
-    //     for (const line of lines) {
-    //       if (line.startsWith('data: ')) {
-    //         const data = line.slice(5);
-    //         if (data === '[DONE]') break;
-    //         try {
-    //           const { content } = JSON.parse(data);
-    //           if (content) {
-    //             fullContent += content;
-    //           }
-    //         } catch (e) {
-    //           console.error('Error parsing SSE data:', e);
-    //         }
-    //       }
-    //     }
-    //   }
-    //   return fullContent;
-    // } else {
-    //   // For non-streaming responses, return the content directly
-    //   const data = await response.json();
-    //   return data.content;
-    // }
-
-    const data = await response.json();
-    return data.content;
-  };
-
   const handleChatResponse = async (targetChatId: string, message: string) => {
     try {
       setInput('');
-      const response = await startChatStream(
-        targetChatId,
+      const userInput: ChatInputType = {
+        chatId: targetChatId,
         message,
-        selectedModel
-      );
-
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: `${targetChatId}/${prev.length}`,
-          role: 'assistant',
-          content: response,
-          createdAt: new Date().toISOString(),
+        model: selectedModel,
+        role: 'user',
+      };
+      saveMessage({
+        variables: {
+          input: userInput as ChatInputType,
         },
-      ]);
-
-      setLoadingSubmit(false);
+      });
+
+      const tempId = `${targetChatId}-${Date.now()}`;
+
+      await managerAgent(
+        tempId,
+        userInput,
+        setMessages,
+        curProjectPath,
+        saveMessage,
+        token,
+        refreshProjects,
+        setFilePath,
+        editorRef,
+        setThinkingProcess,
+        setIsTPUpdating,
+        setLoadingSubmit
+      );
     } catch (err) {
       toast.error('Failed to get chat response' + err);
       setLoadingSubmit(false);
@@ -178,6 +137,7 @@ export const useChatStream = ({
     setMessages((prev) => [...prev, newMessage]);
 
     if (!currentChatId) {
+      console.log('Creating new chat...');
       try {
         await createChat({
           variables: {
diff --git a/frontend/src/utils/file-reader.ts b/frontend/src/utils/file-reader.ts
index 7c1a803a..b0c92797 100644
--- a/frontend/src/utils/file-reader.ts
+++ b/frontend/src/utils/file-reader.ts
@@ -44,7 +44,6 @@ export class FileReader {
 
     try {
       const items = await fs.readdir(dir, { withFileTypes: true });
-
       for (const item of items) {
         if (item.name.includes('node_modules')) continue;
         const fullPath = path.join(dir, item.name);
@@ -88,7 +87,9 @@ export class FileReader {
     logger.info(`📝 [FileReader] Updating file: ${fullPath}`);
 
     try {
-      const content = JSON.parse(newContent);
+      const content = newContent.trim();
+      console.log(content);
+      console.log('log content');
       await fs.writeFile(fullPath, content, 'utf-8');
 
       logger.info('[FileReader] File updated successfully');
diff --git a/frontend/src/utils/parser.ts b/frontend/src/utils/parser.ts
new file mode 100644
index 00000000..3c111fe3
--- /dev/null
+++ b/frontend/src/utils/parser.ts
@@ -0,0 +1,23 @@
+/**
+ * Parses AI response wrapped inside <jsonResponse> tags into a JSON object.
+ */
+export const parseXmlToJson = (xmlString: string) => {
+  console.log(xmlString);
+  const match = xmlString.match(/<jsonResponse>([\s\S]*?)<\/jsonResponse>/);
+  console.log(match);
+  console.log(match[1]);
+  if (!match || !match[1]) {
+    throw new Error('Invalid XML: No <jsonResponse> element found');
+  }
+
+  const jsonText = match[1].trim();
+  console.log(jsonText);
+
+  try {
+    return JSON.parse(jsonText);
+  } catch (error) {
+    throw new Error(
+      'Invalid JSON: Failed to parse content inside <jsonResponse>' + error
+    );
+  }
+};