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..87ac3140 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,29 @@ 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 &&
+                  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/index.tsx b/frontend/src/components/chat/index.tsx
index 05730c3e..f32aefb3 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,33 @@ export default function Chat() {
     skip: !isAuthorized || !chatId,
     onCompleted: (data) => {
       if (data?.getChatHistory) {
-        setMessages(data.getChatHistory);
+        const processedMessages = data.getChatHistory.map((msg) => {
+          try {
+            const content = JSON.parse(msg.content);
+            return {
+              id: msg.id,
+              role: msg.role,
+              content: content.final_response,
+              createdAt: msg.createdAt,
+              thinking_process: content.thinking_process,
+            };
+          } catch (e) {
+            return msg;
+          }
+        });
+
+        setMessages(processedMessages);
+
+        const tpMessages = processedMessages
+          .filter((msg) => msg.thinking_process)
+          .map((msg) => ({
+            id: msg.id,
+            role: msg.role,
+            content: msg.thinking_process,
+            createdAt: msg.createdAt,
+          }));
+
+        setThinkingProcess(tpMessages);
       }
     },
     onError: () => {
@@ -54,7 +82,9 @@ export default function Chat() {
       input,
       setInput,
       setMessages,
+      setThinkingProcess,
       selectedModel,
+      setIsTPUpdating,
     });
 
   // Callback to clear the chat ID
@@ -112,6 +142,7 @@ export default function Chat() {
             chatId={chatId}
             setSelectedModel={setSelectedModel}
             messages={messages}
+            thinkingProcess={thinkingProcess}
             input={input}
             handleInputChange={handleInputChange}
             handleSubmit={handleSubmit}
@@ -120,6 +151,8 @@ export default function Chat() {
             formRef={formRef}
             setInput={setInput}
             setMessages={setMessages}
+            setThinkingProcess={setThinkingProcess}
+            isTPUpdating={isTPUpdating}
           />
         </div>
       </ResizablePanel>
@@ -147,6 +180,7 @@ export default function Chat() {
         chatId={chatId}
         setSelectedModel={setSelectedModel}
         messages={messages}
+        thinkingProcess={thinkingProcess}
         input={input}
         handleInputChange={handleInputChange}
         handleSubmit={handleSubmit}
@@ -155,6 +189,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/hooks/multi-agent/agentPrompt.ts b/frontend/src/hooks/multi-agent/agentPrompt.ts
index 25c4a2a7..0da64ef6 100644
--- a/frontend/src/hooks/multi-agent/agentPrompt.ts
+++ b/frontend/src/hooks/multi-agent/agentPrompt.ts
@@ -7,6 +7,7 @@ export enum TaskType {
   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
@@ -23,6 +24,7 @@ export interface AgentContext {
   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?: {
@@ -34,6 +36,9 @@ export interface AgentContext {
   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
@@ -441,6 +446,27 @@ Make your decision based on the current context and ensure a logical progression
   );
 };
 
+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() +
diff --git a/frontend/src/hooks/multi-agent/managerAgent.ts b/frontend/src/hooks/multi-agent/managerAgent.ts
index a66a597e..5f10b157 100644
--- a/frontend/src/hooks/multi-agent/managerAgent.ts
+++ b/frontend/src/hooks/multi-agent/managerAgent.ts
@@ -35,6 +35,7 @@ function validateFiles(files: string[]): string[] {
  * 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,
@@ -42,11 +43,15 @@ export async function managerAgent(
   token: string,
   refreshProjects: () => Promise<void>,
   setFilePath: (path: string) => void,
-  editorRef: React.MutableRefObject<any>
-): Promise<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> {
   try {
     // Initialize context
     const context: AgentContext = {
+      tempId,
       task_type: undefined, // Will be set after task analysis
       request: input.message, // Store the original request
       projectPath,
@@ -65,6 +70,9 @@ export async function managerAgent(
       token,
       setFilePath,
       editorRef,
+      setThinkingProcess,
+      setIsTPUpdating,
+      setLoadingSubmit,
     };
 
     // Retrieve project file structure
@@ -121,14 +129,20 @@ export async function managerAgent(
         status: 'executing',
         description: decision.next_step.description,
       };
-
+      if (decision.next_step.files) {
+        context.requiredFiles = [
+          ...context.requiredFiles,
+          ...decision.next_step.files.filter(
+            (file) => !context.requiredFiles.includes(file)
+          ),
+        ];
+      }
       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) {
@@ -188,19 +202,35 @@ export async function managerAgent(
       await refreshProjects();
     }
 
-    // Save all accumulated thoughts
+    // Generate summary and save message
     if (context.accumulatedThoughts.length > 0) {
-      context.saveMessage({
-        variables: {
-          input: {
-            chatId: input.chatId,
-            message: context.accumulatedThoughts.join('\n\n'),
-            model: input.model,
-            role: `assistant`,
+      // 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',
+            },
           },
-        },
-      });
+        });
+      }
     }
+
+    return context.accumulatedThoughts.join('\n\n');
   } catch (error) {
     toast.error('Failed to complete task');
     throw error;
diff --git a/frontend/src/hooks/multi-agent/toolNodes.ts b/frontend/src/hooks/multi-agent/toolNodes.ts
index 4fe6be83..d2ccd6d1 100644
--- a/frontend/src/hooks/multi-agent/toolNodes.ts
+++ b/frontend/src/hooks/multi-agent/toolNodes.ts
@@ -7,6 +7,7 @@ import {
   codeReviewTool,
   commitChangesTool,
   editFileTool,
+  summaryTool,
 } from './tools';
 
 export interface ToolUsage {
@@ -26,6 +27,19 @@ export interface Tool {
 }
 
 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,
diff --git a/frontend/src/hooks/multi-agent/tools.ts b/frontend/src/hooks/multi-agent/tools.ts
index 081d5763..129063ee 100644
--- a/frontend/src/hooks/multi-agent/tools.ts
+++ b/frontend/src/hooks/multi-agent/tools.ts
@@ -7,6 +7,7 @@ import {
   editFilePrompt,
   codeReviewPrompt,
   commitChangesPrompt,
+  summaryPrompt,
   AgentContext,
   TaskType,
 } from './agentPrompt';
@@ -25,6 +26,22 @@ import { ChatInputType } from '@/graphql/type';
  * 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,
@@ -32,15 +49,63 @@ const saveThinkingProcess = async (
 ): Promise<void> => {
   if (!thinkingText) return;
 
-  // Accumulate the thinking process text for historical record.
-  context.accumulatedThoughts.push(thinkingText);
+  // 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();
+        }
+      };
 
-  // Function to break the text into small chunks for a smoother typewriter animation.
-  const breakText = (text: string): string[] => {
-    return text.match(/(\S{1,3}|\s+)/g) || [];
+      updateMessage();
+    });
   };
+  const brokenText = breakText(thinkingText);
+  await typewriterEffect(brokenText, 10);
+};
 
-  // Typewriter effect: gradually display the text chunks with a specified delay.
+const saveFinalResponse = async (
+  final_response: string,
+  input: ChatInputType,
+  context: AgentContext
+): Promise<void> => {
   const typewriterEffect = async (
     textArray: string[],
     delay: number
@@ -52,7 +117,10 @@ const saveThinkingProcess = async (
         if (index < textArray.length) {
           context.setMessages((prev) => {
             const lastMsg = prev[prev.length - 1];
-            if (lastMsg?.role === 'assistant' && lastMsg.id === input.chatId) {
+            if (
+              lastMsg?.role === 'assistant' &&
+              lastMsg.id === context.tempId
+            ) {
               return [
                 ...prev.slice(0, -1),
                 {
@@ -64,7 +132,7 @@ const saveThinkingProcess = async (
               return [
                 ...prev,
                 {
-                  id: input.chatId,
+                  id: context.tempId,
                   role: 'assistant',
                   content: textArray[index],
                   createdAt: new Date().toISOString(),
@@ -83,26 +151,15 @@ const saveThinkingProcess = async (
       updateMessage();
     });
   };
-
-  // Break the provided thinkingText into chunks and display them.
-  const brokenText = breakText(thinkingText);
+  context.final_response = final_response;
+  const brokenText = breakText(final_response);
   await typewriterEffect(brokenText, 10);
+};
 
-  // After displaying all chunks, append two newlines to the final message.
-  context.setMessages((prev) => {
-    const lastMsg = prev[prev.length - 1];
-    if (lastMsg?.role === 'assistant' && lastMsg.id === input.chatId) {
-      return [
-        ...prev.slice(0, -1),
-        {
-          ...lastMsg,
-          content: lastMsg.content + '\n\n',
-        },
-      ];
-    }
-    return prev;
-  });
+const breakText = (text: string): string[] => {
+  return text.match(/(\S{1,3}|\s+)/g) || [];
 };
+
 /**
  * Get the corresponding prompt based on the task type.
  */
@@ -178,7 +235,7 @@ export const taskTool = async (
     // Update context and display analysis
     context.task_type = taskType;
     await saveThinkingProcess(
-      `Task Analysis: This is a ${taskType} task.\n${result.description || ''}`,
+      `Task Analysis\n-------------\n\nType: ${taskType}\n\n${result.description ? `Description: ${result.description}\n` : ''}\n`,
       input,
       context
     );
@@ -239,7 +296,7 @@ export const taskTool = async (
 
     // Show analysis results
     await saveThinkingProcess(
-      `Found ${validFiles.length} relevant files:\n${validFiles.join('\n')}`,
+      `File Analysis\n-------------\n\nFound ${validFiles.length} relevant files:\n\n${validFiles.map((f) => `• ${f}`).join('\n\n')}`,
       input,
       context
     );
@@ -455,7 +512,7 @@ export async function codeReviewTool(
   // Parse review results using `parseXmlToJson`
   const result = parseXmlToJson(response);
   await saveThinkingProcess(
-    `Code Review:\n${result.review_result}\n\nComments:\n${result.comments?.join('\n')}`,
+    `Code Review\n-------------\n\nResult: ${result.review_result}\n\nComments:\n\n${result.comments?.map((c) => `• ${c}`).join('\n\n')}`,
     input,
     context
   );
@@ -504,7 +561,7 @@ export async function commitChangesTool(
   // Parse commit message using `parseXmlToJson`
   const result = parseXmlToJson(response);
   await saveThinkingProcess(
-    `Generated commit message:\n${result.commit_message}`,
+    `Generated Commit Message\n-------------\n\n${result.commit_message}`,
     input,
     context
   );
@@ -515,3 +572,110 @@ export async function commitChangesTool(
 
   context.commitMessage = 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> {
+  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);
+  } catch (error) {
+    toast.error('Failed to generate summary');
+    throw error;
+  }
+}
diff --git a/frontend/src/hooks/useChatStream.ts b/frontend/src/hooks/useChatStream.ts
index 96f06cef..85b2acbb 100644
--- a/frontend/src/hooks/useChatStream.ts
+++ b/frontend/src/hooks/useChatStream.ts
@@ -15,7 +15,9 @@ export interface UseChatStreamProps {
   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 = ({
@@ -23,7 +25,9 @@ export const useChatStream = ({
   input,
   setInput,
   setMessages,
+  setThinkingProcess,
   selectedModel,
+  setIsTPUpdating,
 }: UseChatStreamProps) => {
   const [loadingSubmit, setLoadingSubmit] = useState(false);
   const [currentChatId, setCurrentChatId] = useState<string>(chatId);
@@ -38,7 +42,6 @@ export const useChatStream = ({
     }
   }, [curProject]);
 
-  // Use useEffect to handle new chat event and cleanup
   useEffect(() => {
     const updateChatId = () => {
       setCurrentChatId('');
@@ -91,7 +94,11 @@ export const useChatStream = ({
           input: userInput as ChatInputType,
         },
       });
+
+      const tempId = `${targetChatId}-${Date.now()}`;
+
       await managerAgent(
+        tempId,
         userInput,
         setMessages,
         curProjectPath,
@@ -99,10 +106,11 @@ export const useChatStream = ({
         token,
         refreshProjects,
         setFilePath,
-        editorRef
+        editorRef,
+        setThinkingProcess,
+        setIsTPUpdating,
+        setLoadingSubmit
       );
-
-      setLoadingSubmit(false);
     } catch (err) {
       toast.error('Failed to get chat response' + err);
       setLoadingSubmit(false);