diff --git a/src/i18n/locales/en/chat.json b/src/i18n/locales/en/chat.json
index 7084a8e..bf656d9 100644
--- a/src/i18n/locales/en/chat.json
+++ b/src/i18n/locales/en/chat.json
@@ -5,12 +5,45 @@
     "title": "Agentry Chat",
     "subtitle": "Your AI assistant is ready. Start a conversation below.",
     "employeeSubtitle": "Feel free to ask me anything, I'll serve you with my professional skills.",
+    "startConversation": "Start a conversation with {{name}}",
+    "greeting": {
+      "goodMorning": "Good morning",
+      "goodAfternoon": "Good afternoon",
+      "goodEvening": "Good evening"
+    },
+    "suggestions": {
+      "askAnything": "Ask me anything you're curious about...",
+      "writeCode": "Help me write or debug code...",
+      "brainstorm": "Let's brainstorm ideas together...",
+      "analyzeData": "Analyze data or summarize content..."
+    },
     "askQuestions": "Ask Questions",
     "askQuestionsDesc": "Get answers on any topic",
     "creativeTasks": "Creative Tasks",
     "creativeTasksDesc": "Writing, brainstorming, ideas"
   },
+  "error": {
+    "title": "Error",
+    "showMore": "Show more",
+    "showLess": "Show less",
+    "notSaved": "This message was not saved. Please try again."
+  },
+  "typing": {
+    "thinking": "Thinking..."
+  },
   "noLogs": "(No logs available yet)",
+  "message": {
+    "copy": "Copy",
+    "edit": "Edit",
+    "delete": "Delete",
+    "regenerate": "Regenerate",
+    "showMore": "Show more",
+    "showLess": "Show less",
+    "thinking": "Thinking",
+    "editPlaceholder": "Edit your message...",
+    "saveEdit": "Save",
+    "cancelEdit": "Cancel"
+  },
   "toolbar": {
     "newSession": "New Chat",
     "refresh": "Refresh chat",
@@ -37,5 +70,28 @@
     "deleteConfirm": "Are you sure you want to delete this conversation?",
     "conversations": "conversations",
     "conversation": "conversation"
+  },
+  "tool": {
+    "input": "Input",
+    "output": "Output",
+    "copy": "Copy",
+    "copied": "Copied",
+    "noData": "No data",
+    "results": "Results",
+    "searchResults": "Search Results",
+    "searchingFor": "Searching for",
+    "searchError": "Search failed",
+    "noResults": "No results found",
+    "code": "Code",
+    "noOutput": "No output",
+    "summary": "Summary",
+    "rawOutput": "Raw Output",
+    "browserClick": "Click",
+    "browserType": "Type",
+    "browserNavigate": "Navigate",
+    "browserScreenshot": "Screenshot",
+    "browserScroll": "Scroll",
+    "browserObserve": "Observe",
+    "browserBrowse": "Browse"
   }
 }
diff --git a/src/i18n/locales/ja/chat.json b/src/i18n/locales/ja/chat.json
index 2f3096c..b629408 100644
--- a/src/i18n/locales/ja/chat.json
+++ b/src/i18n/locales/ja/chat.json
@@ -5,12 +5,45 @@
     "title": "Agentry チャット",
     "subtitle": "AI アシスタントの準備ができました。下の入力欄から会話を始めましょう。",
     "employeeSubtitle": "いつでもご質問ください。専門スキルでお手伝いします。",
+    "startConversation": "{{name}} と会話を始める",
+    "greeting": {
+      "goodMorning": "おはようございます",
+      "goodAfternoon": "こんにちは",
+      "goodEvening": "こんばんは"
+    },
+    "suggestions": {
+      "askAnything": "気になることを何でも聞いてください...",
+      "writeCode": "コードの作成やデバッグをお手伝い...",
+      "brainstorm": "一緒にアイデアをブレストしましょう...",
+      "analyzeData": "データ分析やコンテンツの要約..."
+    },
     "askQuestions": "質問する",
     "askQuestionsDesc": "あらゆるトピックについて回答を得る",
     "creativeTasks": "クリエイティブタスク",
     "creativeTasksDesc": "ライティング、ブレスト、アイデア"
   },
+  "error": {
+    "title": "エラー",
+    "showMore": "もっと見る",
+    "showLess": "折りたたむ",
+    "notSaved": "このメッセージは保存されませんでした。もう一度お試しください。"
+  },
+  "typing": {
+    "thinking": "考え中..."
+  },
   "noLogs": "（ログはまだありません）",
+  "message": {
+    "copy": "コピー",
+    "edit": "編集",
+    "delete": "削除",
+    "regenerate": "再生成",
+    "showMore": "もっと見る",
+    "showLess": "折りたたむ",
+    "thinking": "思考中",
+    "editPlaceholder": "メッセージを編集...",
+    "saveEdit": "保存",
+    "cancelEdit": "キャンセル"
+  },
   "toolbar": {
     "newSession": "新しい会話",
     "refresh": "チャットを更新",
@@ -37,5 +70,28 @@
     "deleteConfirm": "この会話を削除してもよろしいですか？",
     "conversations": "件の会話",
     "conversation": "件の会話"
+  },
+  "tool": {
+    "input": "入力",
+    "output": "出力",
+    "copy": "コピー",
+    "copied": "コピー済み",
+    "noData": "データなし",
+    "results": "結果",
+    "searchResults": "検索結果",
+    "searchingFor": "検索中",
+    "searchError": "検索に失敗しました",
+    "noResults": "結果が見つかりません",
+    "code": "コード",
+    "noOutput": "出力なし",
+    "summary": "概要",
+    "rawOutput": "生データ",
+    "browserClick": "クリック",
+    "browserType": "入力",
+    "browserNavigate": "ナビゲート",
+    "browserScreenshot": "スクリーンショット",
+    "browserScroll": "スクロール",
+    "browserObserve": "観察",
+    "browserBrowse": "ブラウズ"
   }
 }
diff --git a/src/i18n/locales/zh/chat.json b/src/i18n/locales/zh/chat.json
index 8068d34..b67f182 100644
--- a/src/i18n/locales/zh/chat.json
+++ b/src/i18n/locales/zh/chat.json
@@ -5,12 +5,45 @@
     "title": "Agentry 聊天",
     "subtitle": "您的 AI 助手已就绪。在下方开始对话。",
     "employeeSubtitle": "随时向我提问，我会用专业技能为你服务。",
+    "startConversation": "和 {{name}} 开始对话",
+    "greeting": {
+      "goodMorning": "早上好",
+      "goodAfternoon": "下午好",
+      "goodEvening": "晚上好"
+    },
+    "suggestions": {
+      "askAnything": "问我任何你好奇的事情...",
+      "writeCode": "帮我编写或调试代码...",
+      "brainstorm": "一起来头脑风暴...",
+      "analyzeData": "分析数据或总结内容..."
+    },
     "askQuestions": "提问",
     "askQuestionsDesc": "获取任何话题的答案",
     "creativeTasks": "创意任务",
     "creativeTasksDesc": "写作、头脑风暴、创意"
   },
+  "error": {
+    "title": "错误",
+    "showMore": "展开更多",
+    "showLess": "收起",
+    "notSaved": "此消息未保存，请重试。"
+  },
+  "typing": {
+    "thinking": "思考中..."
+  },
   "noLogs": "（暂无日志）",
+  "message": {
+    "copy": "复制",
+    "edit": "编辑",
+    "delete": "删除",
+    "regenerate": "重新生成",
+    "showMore": "展开更多",
+    "showLess": "收起",
+    "thinking": "思考中",
+    "editPlaceholder": "编辑消息...",
+    "saveEdit": "保存",
+    "cancelEdit": "取消"
+  },
   "toolbar": {
     "newSession": "新对话",
     "refresh": "刷新聊天",
@@ -37,5 +70,28 @@
     "deleteConfirm": "确定要删除这个对话吗？",
     "conversations": "个对话",
     "conversation": "个对话"
+  },
+  "tool": {
+    "input": "输入",
+    "output": "输出",
+    "copy": "复制",
+    "copied": "已复制",
+    "noData": "无数据",
+    "results": "结果",
+    "searchResults": "搜索结果",
+    "searchingFor": "正在搜索",
+    "searchError": "搜索失败",
+    "noResults": "未找到结果",
+    "code": "代码",
+    "noOutput": "无输出",
+    "summary": "摘要",
+    "rawOutput": "原始输出",
+    "browserClick": "点击",
+    "browserType": "输入",
+    "browserNavigate": "导航",
+    "browserScreenshot": "截图",
+    "browserScroll": "滚动",
+    "browserObserve": "观察",
+    "browserBrowse": "浏览"
   }
 }
diff --git a/src/pages/Chat/ChatInput.tsx b/src/pages/Chat/ChatInput.tsx
index fb4f3fc..0b74aeb 100644
--- a/src/pages/Chat/ChatInput.tsx
+++ b/src/pages/Chat/ChatInput.tsx
@@ -357,93 +357,118 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
       <div className="chat-glass-wrapper max-w-3xl mx-auto">
         <div
           className={cn(
-            'chat-glass-input overflow-hidden rounded-3xl',
+            'relative overflow-hidden rounded-3xl transition-all duration-200',
             dragOver && 'ring-2 ring-primary'
           )}
+          style={{
+            boxShadow: '0 6px 6px rgba(0, 0, 0, 0.15), 0 0 20px rgba(0, 0, 0, 0.08)',
+          }}
         >
-          {/* Attachment Previews */}
-          {attachments.length > 0 && (
-            <div className="flex gap-2 flex-wrap px-3 pt-3 pb-0">
-              {attachments.map((att) => (
-                <AttachmentPreview
-                  key={att.id}
-                  attachment={att}
-                  onRemove={() => removeAttachment(att.id)}
-                />
-              ))}
-            </div>
-          )}
-
-          {/* Textarea — compact, clean */}
-          <textarea
-            ref={textareaRef}
-            value={input}
-            onChange={(e) => {
-              setInput(e.target.value);
-              adjustHeight();
-            }}
-            onKeyDown={handleKeyDown}
-            onCompositionStart={() => {
-              isComposingRef.current = true;
+          {/* Layer 1: Backdrop blur */}
+          <div
+            className="absolute inset-0 z-0 overflow-hidden rounded-3xl"
+            style={{
+              backdropFilter: 'blur(12px) saturate(1.6)',
+              WebkitBackdropFilter: 'blur(12px) saturate(1.6)',
+              isolation: 'isolate',
             }}
-            onCompositionEnd={() => {
-              isComposingRef.current = false;
+          />
+          {/* Layer 2: Tint */}
+          <div className="absolute inset-0 z-[1] rounded-3xl bg-muted/60 transition-all duration-200" />
+          {/* Layer 3: Inner highlight */}
+          <div
+            className="absolute inset-0 z-[2] rounded-3xl overflow-hidden pointer-events-none"
+            style={{
+              boxShadow:
+                'inset 1px 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 1px 0 rgba(255, 255, 255, 0.2)',
             }}
-            onPaste={handlePaste}
-            placeholder={disabled ? 'Gateway not connected...' : 'Ask anything...'}
-            disabled={disabled}
-            className={cn(
-              'w-full resize-none border-0 bg-transparent px-4 pt-3 pb-1 text-[15px] leading-relaxed outline-none',
-              'text-foreground placeholder:text-muted-foreground/40',
-              'focus:ring-0 focus-visible:outline-none min-h-[36px] no-scrollbar',
-              'disabled:cursor-not-allowed disabled:opacity-50'
-            )}
-            rows={1}
           />
+          {/* Layer 4: Content */}
+          <div className="relative z-[3] flex w-full flex-col items-stretch focus-within:bg-muted/40 hover:bg-muted/40 rounded-3xl transition-all duration-200">
+            {/* Attachment Previews */}
+            {attachments.length > 0 && (
+              <div className="flex gap-2 flex-wrap px-3 pt-3 pb-0">
+                {attachments.map((att) => (
+                  <AttachmentPreview
+                    key={att.id}
+                    attachment={att}
+                    onRemove={() => removeAttachment(att.id)}
+                  />
+                ))}
+              </div>
+            )}
+
+            {/* Textarea — compact, clean */}
+            <textarea
+              ref={textareaRef}
+              value={input}
+              onChange={(e) => {
+                setInput(e.target.value);
+                adjustHeight();
+              }}
+              onKeyDown={handleKeyDown}
+              onCompositionStart={() => {
+                isComposingRef.current = true;
+              }}
+              onCompositionEnd={() => {
+                isComposingRef.current = false;
+              }}
+              onPaste={handlePaste}
+              placeholder={disabled ? 'Gateway not connected...' : 'Ask anything...'}
+              disabled={disabled}
+              className={cn(
+                'w-full resize-none border-0 bg-transparent px-4 pt-3 pb-1 text-[15px] leading-relaxed outline-none',
+                'text-foreground placeholder:text-muted-foreground/40',
+                'focus:ring-0 focus-visible:outline-none min-h-[36px] no-scrollbar',
+                'disabled:cursor-not-allowed disabled:opacity-50'
+              )}
+              rows={1}
+            />
+
+            {/* Bottom toolbar — attach left, send right */}
+            <div className="flex items-center justify-between px-2.5 pb-2 pt-0.5">
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  onClick={pickFiles}
+                  disabled={disabled || sending}
+                  className={cn(
+                    'flex h-8 w-8 items-center justify-center rounded-lg',
+                    'text-muted-foreground/60 transition-colors',
+                    'hover:bg-foreground/5 hover:text-foreground/80',
+                    'focus-visible:outline-none',
+                    'disabled:pointer-events-none disabled:opacity-30'
+                  )}
+                  title="Attach files"
+                >
+                  <Paperclip className="h-4 w-4" />
+                </button>
+              </div>
 
-          {/* Bottom toolbar — attach left, send right */}
-          <div className="flex items-center justify-between px-2.5 pb-2 pt-0.5">
-            <div className="flex items-center gap-1">
               <button
                 type="button"
-                onClick={pickFiles}
-                disabled={disabled || sending}
+                onClick={sending ? handleStop : handleSend}
+                disabled={sending ? !canStop : !canSend}
                 className={cn(
-                  'flex h-8 w-8 items-center justify-center rounded-lg',
-                  'text-muted-foreground/60 transition-colors',
-                  'hover:bg-foreground/5 hover:text-foreground/80',
-                  'focus-visible:outline-none',
-                  'disabled:pointer-events-none disabled:opacity-30'
+                  'flex h-8 w-8 items-center justify-center rounded-full transition-all duration-150',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  sending
+                    ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50'
+                    : cn(
+                        'bg-foreground text-background',
+                        'hover:opacity-85',
+                        'disabled:opacity-20 disabled:pointer-events-none'
+                      )
                 )}
-                title="Attach files"
+                title={sending ? 'Stop' : 'Send'}
               >
-                <Paperclip className="h-4 w-4" />
+                {sending ? (
+                  <Square className="h-3 w-3" fill="currentColor" />
+                ) : (
+                  <ArrowUp className="h-4 w-4" strokeWidth={2.5} />
+                )}
               </button>
             </div>
-
-            <button
-              type="button"
-              onClick={sending ? handleStop : handleSend}
-              disabled={sending ? !canStop : !canSend}
-              className={cn(
-                'flex h-8 w-8 items-center justify-center rounded-full transition-all duration-150',
-                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                sending
-                  ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50'
-                  : cn(
-                      'bg-foreground text-background',
-                      'hover:opacity-85',
-                      'disabled:opacity-20 disabled:pointer-events-none'
-                    )
-              )}
-              title={sending ? 'Stop' : 'Send'}
-            >
-              {sending ? (
-                <Square className="h-3 w-3" fill="currentColor" />
-              ) : (
-                <ArrowUp className="h-4 w-4" strokeWidth={2.5} />
-              )}
-            </button>
           </div>
         </div>
       </div>
diff --git a/src/pages/Chat/ChatMessage.tsx b/src/pages/Chat/ChatMessage.tsx
index ead26e0..e86ca9b 100644
--- a/src/pages/Chat/ChatMessage.tsx
+++ b/src/pages/Chat/ChatMessage.tsx
@@ -1,38 +1,23 @@
 /**
- * Chat Message Component
- * Renders user / assistant / system / toolresult messages
- * with markdown, thinking sections, images, and tool cards.
+ * Chat Message Component — Parts Dispatcher
+ *
+ * Thin orchestrator that inspects the message role/content and delegates
+ * rendering to the appropriate part component from `./message-parts/`.
+ *
+ * Props interface is backwards-compatible with the previous monolithic version
+ * so Chat/index.tsx does not need changes.
  */
-import { useState, useCallback, memo } from 'react';
-import {
-  User,
-  Sparkles,
-  Copy,
-  Check,
-  ChevronDown,
-  ChevronRight,
-  Wrench,
-  FileText,
-  Film,
-  Music,
-  FileArchive,
-  File,
-  AlertTriangle,
-} from 'lucide-react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import type { RawMessage, AttachedFileMeta, ToolStatus } from '@/stores/chat';
-import {
-  extractText,
-  extractThinking,
-  extractImages,
-  extractToolUse,
-  formatTimestamp,
-} from './message-utils';
+import { memo } from 'react';
+import type { RawMessage, ToolStatus } from '@/stores/chat';
+import { extractText, extractThinking, extractImages, extractToolUse } from './message-utils';
+import { UserMessagePart } from './message-parts/UserMessagePart';
+import { AssistMessagePart } from './message-parts/AssistMessagePart';
+import { ReasoningPart } from './message-parts/ReasoningPart';
+import { ToolStatusBar, ToolCard } from './message-parts/ToolMessagePart';
 
-interface ChatMessageProps {
+// ── Props (backwards-compatible) ─────────────────────────────────
+
+export interface ChatMessageProps {
   message: RawMessage;
   showThinking: boolean;
   isStreaming?: boolean;
@@ -44,466 +29,149 @@ interface ChatMessageProps {
     durationMs?: number;
     summary?: string;
   }>;
+  /** Map of toolCallId → tool result output, used by ToolCard renderers */
+  toolResultsMap?: Map<string, unknown>;
+  /** Callback when user edits a message (optional — wired in Phase B) */
+  onEditMessage?: (messageId: string, newText: string) => void;
+  /** Callback when user deletes a message (optional — wired in Phase B) */
+  onDeleteMessage?: (messageId: string) => void;
+  /** Callback when user requests regeneration (optional — wired in Phase B) */
+  onRegenerate?: () => void;
 }
 
-export const ChatMessage = memo(function ChatMessage({
-  message,
-  showThinking,
-  isStreaming = false,
-  streamingTools = [],
-}: ChatMessageProps) {
-  const isUser = message.role === 'user';
-  const role = typeof message.role === 'string' ? message.role.toLowerCase() : '';
-  const isToolResult = role === 'toolresult' || role === 'tool_result';
-  const text = extractText(message);
-  const hasText = text.trim().length > 0;
-  const thinking = extractThinking(message);
-  const images = extractImages(message);
-  const tools = extractToolUse(message);
-  const visibleThinking = showThinking ? thinking : null;
-  const visibleTools = showThinking ? tools : [];
-
-  const attachedFiles = message._attachedFiles || [];
-  const errorMessage = message.errorMessage;
-  const isErrorResponse = !isUser && (message.stopReason === 'error' || !!errorMessage);
-
-  // Tool statuses preserved from streaming phase — render on completed messages too
-  const savedToolStatuses: ToolStatus[] =
-    (showThinking && !isStreaming && message._toolStatuses) || [];
-
-  // Never render tool result messages in chat UI
-  if (isToolResult) return null;
-
-  // Don't render empty messages (also keep messages with streaming tool status or errors)
-  const hasStreamingToolStatus = showThinking && isStreaming && streamingTools.length > 0;
-  const hasSavedToolStatus = savedToolStatuses.length > 0;
-  if (
-    !hasText &&
-    !visibleThinking &&
-    images.length === 0 &&
-    visibleTools.length === 0 &&
-    attachedFiles.length === 0 &&
-    !hasStreamingToolStatus &&
-    !hasSavedToolStatus &&
-    !isErrorResponse
-  )
-    return null;
-
-  return (
-    <div className={cn('flex gap-3 group', isUser ? 'flex-row-reverse' : 'flex-row')}>
-      {/* Avatar */}
-      <div
-        className={cn(
-          'flex h-8 w-8 shrink-0 items-center justify-center rounded-full mt-1',
-          isUser
-            ? 'bg-primary text-primary-foreground'
-            : 'bg-gradient-to-br from-indigo-500 to-purple-600 text-white'
-        )}
-      >
-        {isUser ? <User className="h-4 w-4" /> : <Sparkles className="h-4 w-4" />}
-      </div>
-
-      {/* Content */}
-      <div
-        className={cn(
-          'flex flex-col w-full max-w-[80%] space-y-2',
-          isUser ? 'items-end' : 'items-start'
-        )}
-      >
+// ── Component ────────────────────────────────────────────────────
+
+export const ChatMessage = memo(
+  function ChatMessage({
+    message,
+    showThinking,
+    isStreaming = false,
+    streamingTools = [],
+    toolResultsMap,
+    onEditMessage,
+    onDeleteMessage,
+    onRegenerate,
+  }: ChatMessageProps) {
+    const isUser = message.role === 'user';
+    const role = typeof message.role === 'string' ? message.role.toLowerCase() : '';
+    const isToolResult = role === 'toolresult' || role === 'tool_result';
+    const text = extractText(message);
+    const hasText = text.trim().length > 0;
+    const thinking = extractThinking(message);
+    const images = extractImages(message);
+    const tools = extractToolUse(message);
+    const visibleThinking = showThinking ? thinking : null;
+    const visibleTools = tools;
+
+    const attachedFiles = message._attachedFiles || [];
+    const errorMessage = message.errorMessage;
+    const isErrorResponse = !isUser && (message.stopReason === 'error' || !!errorMessage);
+
+    // Tool statuses preserved from streaming phase
+    const savedToolStatuses: ToolStatus[] = (!isStreaming && message._toolStatuses) || [];
+
+    // Never render tool result messages in chat UI
+    if (isToolResult) return null;
+
+    // Don't render empty messages
+    const hasStreamingToolStatus = isStreaming && streamingTools.length > 0;
+    const hasSavedToolStatus = savedToolStatuses.length > 0;
+    if (
+      !hasText &&
+      !visibleThinking &&
+      images.length === 0 &&
+      visibleTools.length === 0 &&
+      attachedFiles.length === 0 &&
+      !hasStreamingToolStatus &&
+      !hasSavedToolStatus &&
+      !isErrorResponse
+    )
+      return null;
+
+    // ── User message → delegate to UserMessagePart ────────────
+    if (isUser) {
+      return (
+        <UserMessagePart message={message} onEdit={onEditMessage} onDelete={onDeleteMessage} />
+      );
+    }
+
+    // ── Assistant message — compose parts ─────────────────────
+    return (
+      <div className="flex flex-col gap-2">
         {/* Tool status bar — shown during streaming (live) or from saved snapshot (completed) */}
-        {showThinking && isStreaming && !isUser && streamingTools.length > 0 && (
-          <ToolStatusBar tools={streamingTools} />
-        )}
-        {!isUser && savedToolStatuses.length > 0 && <ToolStatusBar tools={savedToolStatuses} />}
-
-        {/* Thinking section */}
-        {visibleThinking && <ThinkingBlock content={visibleThinking} />}
-
-        {/* Tool use cards */}
-        {visibleTools.length > 0 && (
-          <div className="space-y-1">
-            {visibleTools.map((tool, i) => (
-              <ToolCard key={tool.id || i} name={tool.name} input={tool.input} />
-            ))}
+        {isStreaming && streamingTools.length > 0 && (
+          <div className="flex gap-3 flex-row">
+            <div className="w-8 shrink-0" /> {/* avatar spacer */}
+            <div className="flex flex-col w-full max-w-[80%] space-y-2 items-start">
+              <ToolStatusBar tools={streamingTools} />
+            </div>
           </div>
         )}
-
-        {/* Error response from LLM provider */}
-        {isErrorResponse && !hasText && (
-          <div className="w-full rounded-2xl border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
-            <div className="flex items-start gap-2">
-              <AlertTriangle className="h-4 w-4 mt-0.5 shrink-0" />
-              <span>{errorMessage || 'An error occurred while generating the response.'}</span>
+        {savedToolStatuses.length > 0 && (
+          <div className="flex gap-3 flex-row">
+            <div className="w-8 shrink-0" />
+            <div className="flex flex-col w-full max-w-[80%] space-y-2 items-start">
+              <ToolStatusBar tools={savedToolStatuses} />
             </div>
           </div>
         )}
 
-        {/* Images — rendered ABOVE text bubble for user messages */}
-        {/* Images from content blocks (Gateway session data) */}
-        {isUser && images.length > 0 && (
-          <div className="flex flex-wrap gap-2">
-            {images.map((img, i) => (
-              <div key={`content-${i}`} className="w-36 h-36 rounded-xl border overflow-hidden">
-                <img
-                  src={`data:${img.mimeType};base64,${img.data}`}
-                  alt="attachment"
-                  className="w-full h-full object-cover"
-                />
-              </div>
-            ))}
+        {/* Thinking / Reasoning section */}
+        {visibleThinking && (
+          <div className="flex gap-3 flex-row">
+            <div className="w-8 shrink-0" />
+            <div className="flex flex-col w-full max-w-[80%] space-y-2 items-start">
+              <ReasoningPart content={visibleThinking} isThinking={isStreaming} />
+            </div>
           </div>
         )}
 
-        {/* File attachments — images above text for user, file cards below */}
-        {isUser && attachedFiles.length > 0 && (
-          <div className="flex flex-wrap gap-2">
-            {attachedFiles.map((file, i) => {
-              const isImage = file.mimeType.startsWith('image/');
-              // Skip image attachments if we already have images from content blocks
-              if (isImage && images.length > 0) return null;
-              // Image files → always render as square crop (with preview or placeholder)
-              if (isImage) {
-                return (
-                  <div
-                    key={`local-${i}`}
-                    className="w-36 h-36 rounded-xl border overflow-hidden bg-muted"
-                  >
-                    {file.preview ? (
-                      <img
-                        src={file.preview}
-                        alt={file.fileName}
-                        className="w-full h-full object-cover"
-                      />
-                    ) : (
-                      <div className="w-full h-full flex items-center justify-center text-muted-foreground">
-                        <File className="h-8 w-8" />
-                      </div>
-                    )}
-                  </div>
-                );
-              }
-              // Non-image files → file card
-              return <FileCard key={`local-${i}`} file={file} />;
-            })}
+        {/* Tool use cards */}
+        {visibleTools.length > 0 && (
+          <div className="flex gap-3 flex-row">
+            <div className="w-8 shrink-0" />
+            <div className="flex flex-col w-full max-w-[80%] space-y-1 items-start">
+              {visibleTools.map((tool, i) => (
+                <ToolCard
+                  key={tool.id || i}
+                  name={tool.name}
+                  input={tool.input}
+                  output={tool.id ? toolResultsMap?.get(tool.id) : undefined}
+                />
+              ))}
+            </div>
           </div>
         )}
 
-        {/* Main text bubble */}
-        {hasText && (
-          <MessageBubble
-            text={text}
-            isUser={isUser}
+        {/* Main assistant text (with avatar, images, actions) */}
+        {(hasText || isErrorResponse || images.length > 0 || attachedFiles.length > 0) && (
+          <AssistMessagePart
+            message={message}
             isStreaming={isStreaming}
-            timestamp={message.timestamp}
+            streamingTools={streamingTools}
+            onRegenerate={onRegenerate}
           />
         )}
-
-        {/* Images from content blocks — assistant messages (below text) */}
-        {!isUser && images.length > 0 && (
-          <div className="flex flex-wrap gap-2">
-            {images.map((img, i) => (
-              <img
-                key={`content-${i}`}
-                src={`data:${img.mimeType};base64,${img.data}`}
-                alt="attachment"
-                className="max-w-xs rounded-lg border"
-              />
-            ))}
-          </div>
-        )}
-
-        {/* File attachments — assistant messages (below text) */}
-        {!isUser && attachedFiles.length > 0 && (
-          <div className="flex flex-wrap gap-2">
-            {attachedFiles.map((file, i) => {
-              const isImage = file.mimeType.startsWith('image/');
-              if (isImage && images.length > 0) return null;
-              if (isImage && file.preview) {
-                return (
-                  <img
-                    key={`local-${i}`}
-                    src={file.preview}
-                    alt={file.fileName}
-                    className="max-w-xs rounded-lg border"
-                  />
-                );
-              }
-              if (isImage && !file.preview) {
-                return (
-                  <div
-                    key={`local-${i}`}
-                    className="w-36 h-36 rounded-xl border overflow-hidden bg-muted flex items-center justify-center text-muted-foreground"
-                  >
-                    <File className="h-8 w-8" />
-                  </div>
-                );
-              }
-              return <FileCard key={`local-${i}`} file={file} />;
-            })}
-          </div>
-        )}
-
-        {/* Hover timestamp for user messages (shown below content on hover) */}
-        {isUser && message.timestamp && (
-          <span className="text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-200 select-none">
-            {formatTimestamp(message.timestamp)}
-          </span>
-        )}
       </div>
-    </div>
-  );
-});
-
-function formatDuration(durationMs?: number): string | null {
-  if (!durationMs || !Number.isFinite(durationMs)) return null;
-  if (durationMs < 1000) return `${Math.round(durationMs)}ms`;
-  return `${(durationMs / 1000).toFixed(1)}s`;
-}
-
-function ToolStatusBar({
-  tools,
-}: {
-  tools: Array<{
-    id?: string;
-    toolCallId?: string;
-    name: string;
-    status: 'running' | 'completed' | 'error';
-    durationMs?: number;
-    summary?: string;
-  }>;
-}) {
-  return (
-    <div className="w-full rounded-lg glass-block-subtle px-3 py-2 text-xs text-muted-foreground">
-      <div className="space-y-1">
-        {tools.map((tool) => {
-          const duration = formatDuration(tool.durationMs);
-          const statusLabel =
-            tool.status === 'running' ? 'running' : tool.status === 'error' ? 'error' : 'done';
-          return (
-            <div
-              key={tool.toolCallId || tool.id || tool.name}
-              className="flex flex-wrap items-center gap-2"
-            >
-              <span
-                className={cn(
-                  'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px]',
-                  tool.status === 'error'
-                    ? 'bg-destructive/10 text-destructive'
-                    : 'bg-foreground/5 text-muted-foreground'
-                )}
-              >
-                <span className="font-mono">{tool.name}</span>
-                <span className="opacity-70">{statusLabel}</span>
-              </span>
-              {duration && <span className="text-[11px] opacity-70">{duration}</span>}
-              {tool.summary && <span className="truncate text-[11px]">{tool.summary}</span>}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-// ── Message Bubble ──────────────────────────────────────────────
-
-function MessageBubble({
-  text,
-  isUser,
-  isStreaming,
-  timestamp,
-}: {
-  text: string;
-  isUser: boolean;
-  isStreaming: boolean;
-  timestamp?: number;
-}) {
-  const [copied, setCopied] = useState(false);
-
-  const copyContent = useCallback(() => {
-    navigator.clipboard.writeText(text);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }, [text]);
-
-  return (
-    <div
-      className={cn(
-        'relative rounded-2xl px-4 py-3',
-        !isUser && 'w-full',
-        isUser ? 'glass-bubble-user' : 'glass-bubble-assistant'
-      )}
-    >
-      {isUser ? (
-        <p className="whitespace-pre-wrap text-sm">{text}</p>
-      ) : (
-        <div className="prose prose-sm dark:prose-invert max-w-none">
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            components={{
-              code({ className, children, ...props }) {
-                const match = /language-(\w+)/.exec(className || '');
-                const isInline = !match && !className;
-                if (isInline) {
-                  return (
-                    <code
-                      className="bg-background/50 px-1.5 py-0.5 rounded text-sm font-mono"
-                      {...props}
-                    >
-                      {children}
-                    </code>
-                  );
-                }
-                return (
-                  <pre className="bg-background/50 rounded-lg p-4 overflow-x-auto">
-                    <code className={cn('text-sm font-mono', className)} {...props}>
-                      {children}
-                    </code>
-                  </pre>
-                );
-              },
-              a({ href, children }) {
-                return (
-                  <a
-                    href={href}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-primary hover:underline"
-                  >
-                    {children}
-                  </a>
-                );
-              },
-            }}
-          >
-            {text}
-          </ReactMarkdown>
-          {isStreaming && (
-            <span className="inline-block w-2 h-4 bg-foreground/50 animate-pulse ml-0.5" />
-          )}
-        </div>
-      )}
-
-      {/* Footer: copy button (assistant only; user timestamp is rendered outside the bubble) */}
-      {!isUser && (
-        <div className="flex items-center justify-between mt-2">
-          {timestamp ? (
-            <span className="text-xs text-muted-foreground">{formatTimestamp(timestamp)}</span>
-          ) : (
-            <span />
-          )}
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
-            onClick={copyContent}
-          >
-            {copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── Thinking Block ──────────────────────────────────────────────
-
-function ThinkingBlock({ content }: { content: string }) {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <div className="w-full rounded-lg glass-block-subtle text-sm">
-      <button
-        className="flex items-center gap-2 w-full px-3 py-2 text-muted-foreground hover:text-foreground transition-colors"
-        onClick={() => setExpanded(!expanded)}
-      >
-        {expanded ? (
-          <ChevronDown className="h-3.5 w-3.5" />
-        ) : (
-          <ChevronRight className="h-3.5 w-3.5" />
-        )}
-        <span className="font-medium">Thinking</span>
-      </button>
-      {expanded && (
-        <div className="px-3 pb-3 text-muted-foreground">
-          <div className="prose prose-sm dark:prose-invert max-w-none opacity-75">
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── File Card (for user-uploaded non-image files) ───────────────
-
-function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
-  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
-}
-
-function FileIcon({ mimeType, className }: { mimeType: string; className?: string }) {
-  if (mimeType.startsWith('video/')) return <Film className={className} />;
-  if (mimeType.startsWith('audio/')) return <Music className={className} />;
-  if (
-    mimeType.startsWith('text/') ||
-    mimeType === 'application/json' ||
-    mimeType === 'application/xml'
-  )
-    return <FileText className={className} />;
-  if (
-    mimeType.includes('zip') ||
-    mimeType.includes('compressed') ||
-    mimeType.includes('archive') ||
-    mimeType.includes('tar') ||
-    mimeType.includes('rar') ||
-    mimeType.includes('7z')
-  )
-    return <FileArchive className={className} />;
-  if (mimeType === 'application/pdf') return <FileText className={className} />;
-  return <File className={className} />;
-}
-
-function FileCard({ file }: { file: AttachedFileMeta }) {
-  return (
-    <div className="flex items-center gap-2 rounded-lg glass-block-subtle px-3 py-2 max-w-[220px]">
-      <FileIcon mimeType={file.mimeType} className="h-5 w-5 shrink-0 text-muted-foreground" />
-      <div className="min-w-0 overflow-hidden">
-        <p className="text-xs font-medium truncate">{file.fileName}</p>
-        <p className="text-[10px] text-muted-foreground">
-          {file.fileSize > 0 ? formatFileSize(file.fileSize) : 'File'}
-        </p>
-      </div>
-    </div>
-  );
-}
-
-// ── Tool Card ───────────────────────────────────────────────────
-
-function ToolCard({ name, input }: { name: string; input: unknown }) {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <div className="rounded-lg glass-block-subtle text-sm">
-      <button
-        className="flex items-center gap-2 w-full px-3 py-1.5 text-muted-foreground hover:text-foreground transition-colors"
-        onClick={() => setExpanded(!expanded)}
-      >
-        <Wrench className="h-3.5 w-3.5" />
-        <span className="font-mono text-xs">{name}</span>
-        {expanded ? (
-          <ChevronDown className="h-3 w-3 ml-auto" />
-        ) : (
-          <ChevronRight className="h-3 w-3 ml-auto" />
-        )}
-      </button>
-      {expanded && input != null && (
-        <pre className="px-3 pb-2 text-xs text-muted-foreground overflow-x-auto">
-          {typeof input === 'string' ? input : (JSON.stringify(input, null, 2) as string)}
-        </pre>
-      )}
-    </div>
-  );
-}
+    );
+  },
+  (prev, next) => {
+    // Custom memo comparison — only re-render when meaningful props change
+    if (prev.message.id !== next.message.id) return false;
+    if (prev.message.content !== next.message.content) return false;
+    if (prev.message.timestamp !== next.message.timestamp) return false;
+    if (prev.message.stopReason !== next.message.stopReason) return false;
+    if (prev.message.errorMessage !== next.message.errorMessage) return false;
+    if (prev.message._attachedFiles !== next.message._attachedFiles) return false;
+    if (prev.message._toolStatuses !== next.message._toolStatuses) return false;
+    if (prev.showThinking !== next.showThinking) return false;
+    if (prev.isStreaming !== next.isStreaming) return false;
+    if (prev.streamingTools !== next.streamingTools) return false;
+    if (prev.toolResultsMap !== next.toolResultsMap) return false;
+    if (prev.onEditMessage !== next.onEditMessage) return false;
+    if (prev.onDeleteMessage !== next.onDeleteMessage) return false;
+    if (prev.onRegenerate !== next.onRegenerate) return false;
+    return true;
+  }
+);
+ChatMessage.displayName = 'ChatMessage';
diff --git a/src/pages/Chat/ChatToolbar.tsx b/src/pages/Chat/ChatToolbar.tsx
index 254b2e3..d877b0a 100644
--- a/src/pages/Chat/ChatToolbar.tsx
+++ b/src/pages/Chat/ChatToolbar.tsx
@@ -102,8 +102,11 @@ export function ChatToolbar({ hideSessionSelector, hideSessionControls }: ChatTo
             <Brain className="h-4 w-4" />
           </Button>
         </TooltipTrigger>
-        <TooltipContent>
-          <p>{showThinking ? t('toolbar.hideThinking') : t('toolbar.showThinking')}</p>
+        <TooltipContent className="flex items-center gap-2">
+          <span>{showThinking ? t('toolbar.hideThinking') : t('toolbar.showThinking')}</span>
+          <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
+            <span className="text-xs">{navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}</span>E
+          </kbd>
         </TooltipContent>
       </Tooltip>
     </div>
diff --git a/src/pages/Chat/WelcomeScreen.tsx b/src/pages/Chat/WelcomeScreen.tsx
new file mode 100644
index 0000000..6b7b0da
--- /dev/null
+++ b/src/pages/Chat/WelcomeScreen.tsx
@@ -0,0 +1,200 @@
+/**
+ * WelcomeScreen — Time-based greeting with animated entrance
+ *
+ * Features:
+ * - Time-of-day greeting (morning / afternoon / evening)
+ * - framer-motion fadeIn + slideUp entrance animation
+ * - Employee mode: shows employee avatar + "Start a conversation with [name]"
+ * - Generic mode: rotating suggestion prompts with flip animation
+ */
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Bot, MessageSquare, Sparkles } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
+
+interface WelcomeScreenProps {
+  employeeName?: string;
+  employeeAvatar?: string;
+}
+
+function getGreetingKey(): string {
+  const hour = new Date().getHours();
+  if (hour < 12) return 'goodMorning';
+  if (hour < 18) return 'goodAfternoon';
+  return 'goodEvening';
+}
+
+export function WelcomeScreen({ employeeName, employeeAvatar }: WelcomeScreenProps) {
+  const { t } = useTranslation('chat');
+  const isEmployee = !!employeeName;
+
+  const greetingKey = useMemo(() => getGreetingKey(), []);
+
+  // Rotating suggestion index for generic mode
+  const suggestions = useMemo(
+    () => [
+      t('welcome.suggestions.askAnything'),
+      t('welcome.suggestions.writeCode'),
+      t('welcome.suggestions.brainstorm'),
+      t('welcome.suggestions.analyzeData'),
+    ],
+    [t]
+  );
+
+  const [activeSuggestion, setActiveSuggestion] = useState(0);
+
+  useEffect(() => {
+    if (isEmployee) return;
+    const interval = setInterval(() => {
+      setActiveSuggestion((prev) => (prev + 1) % suggestions.length);
+    }, 3000);
+    return () => clearInterval(interval);
+  }, [isEmployee, suggestions.length]);
+
+  // Typewriter state for the greeting text
+  const fullGreeting = isEmployee
+    ? t('welcome.startConversation', { name: employeeName })
+    : t(`welcome.greeting.${greetingKey}`);
+
+  const [displayedText, setDisplayedText] = useState('');
+  const [typewriterDone, setTypewriterDone] = useState(false);
+
+  const runTypewriter = useCallback(() => {
+    let i = 0;
+    setDisplayedText('');
+    setTypewriterDone(false);
+    const timer = setInterval(() => {
+      i++;
+      if (i <= fullGreeting.length) {
+        setDisplayedText(fullGreeting.slice(0, i));
+      } else {
+        setTypewriterDone(true);
+        clearInterval(timer);
+      }
+    }, 40);
+    return () => clearInterval(timer);
+  }, [fullGreeting]);
+
+  useEffect(() => {
+    // Delay typewriter start to sync with fade-in animation
+    const delay = setTimeout(runTypewriter, 400);
+    return () => {
+      clearTimeout(delay);
+    };
+  }, [runTypewriter]);
+
+  return (
+    <motion.div
+      className="flex flex-col items-center justify-center text-center py-20"
+      initial={{ opacity: 0, y: 24 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
+    >
+      {/* Avatar / Icon */}
+      <motion.div
+        initial={{ scale: 0.8, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.1, ease: 'easeOut' }}
+      >
+        {isEmployee ? (
+          <div className="w-16 h-16 rounded-2xl bg-card glass-border shadow-island flex items-center justify-center mb-6 text-4xl">
+            {employeeAvatar || '🤖'}
+          </div>
+        ) : (
+          <div className="w-16 h-16 rounded-2xl bg-card glass-border shadow-island flex items-center justify-center mb-6">
+            <Bot className="h-8 w-8 text-primary" />
+          </div>
+        )}
+      </motion.div>
+
+      {/* Greeting with typewriter */}
+      <motion.div
+        className="min-h-[2.5rem] mb-2"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.4, delay: 0.3 }}
+      >
+        <h2 className="text-2xl font-bold">
+          {displayedText}
+          {!typewriterDone && (
+            <span className="inline-block w-0.5 h-6 bg-primary ml-0.5 align-middle animate-pulse" />
+          )}
+        </h2>
+      </motion.div>
+
+      {/* Subtitle */}
+      <motion.p
+        className="text-muted-foreground mb-8 max-w-md"
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, delay: 0.6 }}
+      >
+        {isEmployee ? t('welcome.employeeSubtitle') : t('welcome.subtitle')}
+      </motion.p>
+
+      {/* Suggestion cards (generic mode only) */}
+      {!isEmployee && (
+        <motion.div
+          className="w-full max-w-lg"
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.8 }}
+        >
+          {/* Rotating suggestion prompt */}
+          <div className="mb-6 h-8 flex items-center justify-center overflow-hidden">
+            <AnimatePresence mode="wait">
+              <motion.p
+                key={activeSuggestion}
+                className="text-sm text-muted-foreground/70 italic"
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -12 }}
+                transition={{ duration: 0.3 }}
+              >
+                {suggestions[activeSuggestion]}
+              </motion.p>
+            </AnimatePresence>
+          </div>
+
+          {/* Feature cards */}
+          <div className="grid grid-cols-2 gap-4">
+            {[
+              {
+                icon: MessageSquare,
+                title: t('welcome.askQuestions'),
+                desc: t('welcome.askQuestionsDesc'),
+              },
+              {
+                icon: Sparkles,
+                title: t('welcome.creativeTasks'),
+                desc: t('welcome.creativeTasksDesc'),
+              },
+            ].map((item, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.4, delay: 0.9 + i * 0.1 }}
+              >
+                <Card
+                  className={cn(
+                    'text-left rounded-2xl glass-border shadow-island',
+                    'transition-all duration-200 hover:shadow-island-lg hover:scale-[1.02]'
+                  )}
+                >
+                  <CardContent className="p-4">
+                    <item.icon className="h-6 w-6 text-primary mb-2" />
+                    <h3 className="font-medium">{item.title}</h3>
+                    <p className="text-sm text-muted-foreground">{item.desc}</p>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      )}
+    </motion.div>
+  );
+}
diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx
index 137734f..afa7119 100644
--- a/src/pages/Chat/index.tsx
+++ b/src/pages/Chat/index.tsx
@@ -11,9 +11,17 @@
  * - Switch between conversations
  * - The first user message auto-titles the conversation
  */
-import { useEffect, useRef, useState, useCallback } from 'react';
-import { AlertCircle, Bot, MessageSquare, Sparkles } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
+import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import {
+  AlertCircle,
+  ArrowDown,
+  ChevronDown,
+  ChevronUp,
+  Sparkles,
+  TriangleAlert,
+} from 'lucide-react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { useChatStore, type RawMessage } from '@/stores/chat';
 import { useGatewayStore } from '@/stores/gateway';
@@ -22,6 +30,7 @@ import { LoadingSpinner } from '@/components/common/LoadingSpinner';
 import { ChatMessage } from './ChatMessage';
 import { ChatInput } from './ChatInput';
 import { ChatToolbar } from './ChatToolbar';
+import { WelcomeScreen } from './WelcomeScreen';
 import { ConversationList } from '@/components/chat/ConversationList';
 import { LightRays } from '@/components/chat/LightRays';
 import { extractImages, extractText, extractThinking, extractToolUse } from './message-utils';
@@ -83,9 +92,13 @@ export function Chat({
   const loadConversations = useConversationsStore((s) => s.loadConversations);
   const setActiveConversation = useConversationsStore((s) => s.setActiveConversation);
 
+  const toggleThinking = useChatStore((s) => s.toggleThinking);
+
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
   const [streamingTimestamp, setStreamingTimestamp] = useState<number>(0);
   const [historyCollapsed, setHistoryCollapsed] = useState(true);
+  const [isAtBottom, setIsAtBottom] = useState(true);
 
   // Track whether we've initialized the conversation for this session
   const initializedSessionRef = useRef<string | null>(null);
@@ -172,6 +185,90 @@ export function Chat({
     });
   }, [messages, streamingMessage, sending]);
 
+  // Track scroll position for "scroll to bottom" button
+  const handleScroll = useCallback(() => {
+    const container = messagesContainerRef.current;
+    if (!container) return;
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const scrolledToBottom = scrollHeight - scrollTop - clientHeight < 50;
+    setIsAtBottom(scrolledToBottom);
+  }, []);
+
+  const scrollToBottom = useCallback(() => {
+    messagesContainerRef.current?.scrollTo({
+      top: messagesContainerRef.current.scrollHeight,
+      behavior: 'smooth',
+    });
+  }, []);
+
+  // Build a map of toolCallId → tool result content from toolresult messages
+  // so ToolCard renderers can display the output of each tool invocation.
+  const toolResultsMap = useMemo(() => {
+    const map = new Map<string, unknown>();
+    for (const msg of messages) {
+      const role = typeof msg.role === 'string' ? msg.role.toLowerCase() : '';
+      if (role === 'toolresult' || role === 'tool_result') {
+        const id = msg.toolCallId;
+        if (id) {
+          map.set(id, msg.content);
+        }
+      }
+    }
+    return map;
+  }, [messages]);
+
+  // Cmd+E / Ctrl+E shortcut to toggle thinking
+  // Cmd+Shift+K: copy the last assistant message to clipboard
+  // Cmd+Shift+D: delete current session (with confirm dialog)
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const isMod = e.metaKey || e.ctrlKey;
+      if (!isMod) return;
+
+      // Cmd+E — toggle thinking
+      if (e.key.toLowerCase() === 'e' && !e.shiftKey) {
+        e.preventDefault();
+        toggleThinking();
+        return;
+      }
+
+      // Cmd+Shift+K — copy last assistant message
+      if (e.shiftKey && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        const lastAssistant = [...messages].reverse().find((m) => m.role === 'assistant');
+        if (lastAssistant) {
+          const text = extractText(lastAssistant);
+          if (text) {
+            navigator.clipboard.writeText(text).catch(() => {
+              // clipboard not available
+            });
+          }
+        }
+        return;
+      }
+
+      // Cmd+Shift+D — delete current conversation (with confirmation)
+      if (e.shiftKey && e.key.toLowerCase() === 'd') {
+        e.preventDefault();
+        const conv = findBySessionKey(currentSessionKey);
+        if (conv) {
+          const confirmed = window.confirm(t('history.deleteConfirm'));
+          if (confirmed) {
+            const deleteConversation = useConversationsStore.getState().deleteConversation;
+            deleteConversation(conv.id).catch(() => {
+              // ignore
+            });
+            // Start a fresh session
+            newSession();
+          }
+        }
+        return;
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [toggleThinking, messages, findBySessionKey, currentSessionKey, t, newSession]);
+
   // Update timestamp when sending starts
   useEffect(() => {
     if (sending && streamingTimestamp === 0) {
@@ -293,10 +390,10 @@ export function Chat({
   const streamThinking = streamMsg ? extractThinking(streamMsg) : null;
   const hasStreamThinking = showThinking && !!streamThinking && streamThinking.trim().length > 0;
   const streamTools = streamMsg ? extractToolUse(streamMsg) : [];
-  const hasStreamTools = showThinking && streamTools.length > 0;
+  const hasStreamTools = streamTools.length > 0;
   const streamImages = streamMsg ? extractImages(streamMsg) : [];
   const hasStreamImages = streamImages.length > 0;
-  const hasStreamToolStatus = showThinking && streamingTools.length > 0;
+  const hasStreamToolStatus = streamingTools.length > 0;
   const shouldRenderStreaming =
     sending &&
     (hasStreamText ||
@@ -347,7 +444,11 @@ export function Chat({
 
         {/* Messages Area */}
         <div className="relative flex-1 min-h-0 z-[2]">
-          <div className="absolute inset-0 overflow-y-auto no-scrollbar px-4 py-4">
+          <div
+            ref={messagesContainerRef}
+            onScroll={handleScroll}
+            className="absolute inset-0 overflow-y-auto no-scrollbar px-4 py-4"
+          >
             <div className="relative max-w-4xl mx-auto space-y-4">
               {loading ? (
                 <div className="flex h-full items-center justify-center py-20">
@@ -362,6 +463,7 @@ export function Chat({
                       key={msg.id || `msg-${idx}`}
                       message={msg}
                       showThinking={showThinking}
+                      toolResultsMap={toolResultsMap}
                     />
                   ))}
 
@@ -406,23 +508,18 @@ export function Chat({
           </div>
         </div>
 
-        {/* Error bar */}
-        {error && (
-          <div className="relative z-[2] px-4 py-2 bg-destructive/10 border-t border-destructive/20">
-            <div className="max-w-4xl mx-auto flex items-center justify-between">
-              <p className="text-sm text-destructive flex items-center gap-2">
-                <AlertCircle className="h-4 w-4" />
-                {error}
-              </p>
-              <button
-                onClick={clearError}
-                className="text-xs text-destructive/60 hover:text-destructive underline"
-              >
-                {t('common:actions.dismiss')}
-              </button>
-            </div>
-          </div>
-        )}
+        {/* Scroll to bottom button */}
+        <div className="relative z-[3] flex justify-center -mt-12 pointer-events-none">
+          <ScrollToBottomButton
+            show={!isAtBottom && messages.length > 0}
+            onClick={scrollToBottom}
+          />
+        </div>
+
+        {/* Expandable Error Bar */}
+        <AnimatePresence>
+          {error && <ErrorBar error={error} onDismiss={clearError} />}
+        </AnimatePresence>
 
         {/* Input Area — above LightRays */}
         <div className="relative z-[2]">
@@ -438,86 +535,135 @@ export function Chat({
   );
 }
 
-// ── Welcome Screen ──────────────────────────────────────────────
+// ── Expandable Error Bar ─────────────────────────────────────────
 
-function WelcomeScreen({
-  employeeName,
-  employeeAvatar,
-}: {
-  employeeName?: string;
-  employeeAvatar?: string;
-}) {
+const ERROR_TRUNCATE_LENGTH = 200;
+
+function ErrorBar({ error, onDismiss }: { error: string; onDismiss: () => void }) {
   const { t } = useTranslation('chat');
-  const isEmployee = !!employeeName;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const isTruncatable = error.length > ERROR_TRUNCATE_LENGTH;
+  const displayedError = isExpanded ? error : error.slice(0, ERROR_TRUNCATE_LENGTH);
 
   return (
-    <div className="flex flex-col items-center justify-center text-center py-20">
-      {isEmployee ? (
-        <div className="w-16 h-16 rounded-2xl bg-card glass-border shadow-island flex items-center justify-center mb-6 text-4xl">
-          {employeeAvatar || '🤖'}
-        </div>
-      ) : (
-        <div className="w-16 h-16 rounded-2xl bg-card glass-border shadow-island flex items-center justify-center mb-6">
-          <Bot className="h-8 w-8 text-primary" />
-        </div>
-      )}
-      <h2 className="text-2xl font-bold mb-2">{isEmployee ? employeeName : t('welcome.title')}</h2>
-      <p className="text-muted-foreground mb-8 max-w-md">
-        {isEmployee ? t('welcome.employeeSubtitle') : t('welcome.subtitle')}
-      </p>
-
-      {!isEmployee && (
-        <div className="grid grid-cols-2 gap-4 max-w-lg w-full">
-          {[
-            {
-              icon: MessageSquare,
-              title: t('welcome.askQuestions'),
-              desc: t('welcome.askQuestionsDesc'),
-            },
-            {
-              icon: Sparkles,
-              title: t('welcome.creativeTasks'),
-              desc: t('welcome.creativeTasksDesc'),
-            },
-          ].map((item, i) => (
-            <Card key={i} className="text-left rounded-2xl glass-border shadow-island">
-              <CardContent className="p-4">
-                <item.icon className="h-6 w-6 text-primary mb-2" />
-                <h3 className="font-medium">{item.title}</h3>
-                <p className="text-sm text-muted-foreground">{item.desc}</p>
-              </CardContent>
-            </Card>
-          ))}
+    <motion.div
+      className="relative z-[2] px-4 py-3 bg-destructive/10 border-t border-destructive/20"
+      initial={{ opacity: 0, height: 0 }}
+      animate={{ opacity: 1, height: 'auto' }}
+      exit={{ opacity: 0, height: 0 }}
+      transition={{ duration: 0.25, ease: 'easeInOut' }}
+    >
+      <div className="max-w-4xl mx-auto">
+        <div className="flex items-start gap-3">
+          <div className="p-1.5 bg-destructive/10 rounded-md shrink-0 mt-0.5">
+            <TriangleAlert className="h-3.5 w-3.5 text-destructive" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="font-medium text-sm text-destructive mb-1">{t('error.title')}</p>
+            <div className="text-sm text-muted-foreground">
+              <p className="whitespace-pre-wrap break-words">
+                {displayedError}
+                {isTruncatable && !isExpanded && '...'}
+              </p>
+              {isTruncatable && (
+                <Button
+                  onClick={() => setIsExpanded(!isExpanded)}
+                  variant="ghost"
+                  size="sm"
+                  className="h-auto p-1 text-xs mt-1"
+                >
+                  {isExpanded ? (
+                    <>
+                      <ChevronUp className="h-3 w-3 mr-1" />
+                      {t('error.showLess')}
+                    </>
+                  ) : (
+                    <>
+                      <ChevronDown className="h-3 w-3 mr-1" />
+                      {t('error.showMore')}
+                    </>
+                  )}
+                </Button>
+              )}
+              <p className="text-xs text-muted-foreground/60 mt-2 italic">{t('error.notSaved')}</p>
+            </div>
+          </div>
+          <button
+            onClick={onDismiss}
+            className="text-xs text-destructive/60 hover:text-destructive underline shrink-0 mt-1"
+          >
+            {t('common:actions.dismiss')}
+          </button>
         </div>
+      </div>
+    </motion.div>
+  );
+}
+
+// ── Scroll To Bottom Button ──────────────────────────────────────
+
+function ScrollToBottomButton({ show, onClick }: { show: boolean; onClick: () => void }) {
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.8 }}
+          transition={{ duration: 0.2, ease: 'easeInOut' }}
+          className="pointer-events-auto"
+        >
+          <Button
+            onClick={onClick}
+            className="shadow-lg backdrop-blur-sm border transition-colors"
+            size="icon"
+            variant="ghost"
+          >
+            <ArrowDown className="h-4 w-4" />
+          </Button>
+        </motion.div>
       )}
-    </div>
+    </AnimatePresence>
   );
 }
 
 // ── Typing Indicator ────────────────────────────────────────────
 
 function TypingIndicator() {
+  const { t } = useTranslation('chat');
+
   return (
-    <div className="flex gap-3">
+    <motion.div
+      className="flex gap-3"
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, ease: 'easeOut' }}
+    >
       <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500/20 to-purple-600/20 text-primary backdrop-blur-sm">
         <Sparkles className="h-4 w-4" />
       </div>
-      <div className="glass-typing rounded-2xl px-4 py-3">
-        <div className="flex gap-1">
-          <span
-            className="w-2 h-2 bg-muted-foreground/50 rounded-full animate-bounce"
-            style={{ animationDelay: '0ms' }}
-          />
-          <span
-            className="w-2 h-2 bg-muted-foreground/50 rounded-full animate-bounce"
-            style={{ animationDelay: '150ms' }}
-          />
-          <span
-            className="w-2 h-2 bg-muted-foreground/50 rounded-full animate-bounce"
-            style={{ animationDelay: '300ms' }}
-          />
+      <div className="glass-typing rounded-2xl px-4 py-3 backdrop-blur-md bg-card/50 glass-border shadow-island">
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground/70">{t('typing.thinking')}</span>
+          <div className="flex gap-1">
+            <motion.span
+              className="w-1.5 h-1.5 bg-primary/50 rounded-full"
+              animate={{ opacity: [0.3, 1, 0.3], scale: [0.8, 1, 0.8] }}
+              transition={{ duration: 1.4, repeat: Infinity, delay: 0 }}
+            />
+            <motion.span
+              className="w-1.5 h-1.5 bg-primary/50 rounded-full"
+              animate={{ opacity: [0.3, 1, 0.3], scale: [0.8, 1, 0.8] }}
+              transition={{ duration: 1.4, repeat: Infinity, delay: 0.2 }}
+            />
+            <motion.span
+              className="w-1.5 h-1.5 bg-primary/50 rounded-full"
+              animate={{ opacity: [0.3, 1, 0.3], scale: [0.8, 1, 0.8] }}
+              transition={{ duration: 1.4, repeat: Infinity, delay: 0.4 }}
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </motion.div>
   );
 }
diff --git a/src/pages/Chat/message-parts/AssistMessagePart.tsx b/src/pages/Chat/message-parts/AssistMessagePart.tsx
new file mode 100644
index 0000000..2170230
--- /dev/null
+++ b/src/pages/Chat/message-parts/AssistMessagePart.tsx
@@ -0,0 +1,361 @@
+/**
+ * Assistant Message Part
+ * Renders assistant text with Markdown, streaming cursor, word-by-word fade-in,
+ * and hover action buttons (copy / regenerate).
+ */
+import {
+  useState,
+  useCallback,
+  memo,
+  useMemo,
+  type PropsWithChildren,
+  type ReactNode,
+} from 'react';
+import { Copy, Check, RefreshCw, Sparkles, AlertTriangle, File } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import type { RawMessage, AttachedFileMeta } from '@/stores/chat';
+import { extractText, extractImages, formatTimestamp } from '../message-utils';
+import { WordByWordFadeIn } from './WordByWordFadeIn';
+
+// ── File helpers ─────────────────────────────────────────────────
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+
+function FileCard({ file }: { file: AttachedFileMeta }) {
+  return (
+    <div className="flex items-center gap-2 rounded-lg glass-block-subtle px-3 py-2 max-w-[220px]">
+      <File className="h-5 w-5 shrink-0 text-muted-foreground" />
+      <div className="min-w-0 overflow-hidden">
+        <p className="text-xs font-medium truncate">{file.fileName}</p>
+        <p className="text-[10px] text-muted-foreground">
+          {file.fileSize > 0 ? formatFileSize(file.fileSize) : 'File'}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ── Streaming Markdown components ────────────────────────────────
+
+/**
+ * Build markdown renderer components that optionally wrap text children
+ * in WordByWordFadeIn when streaming.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function makeStreamingComponents(isStreaming: boolean): any {
+  // When not streaming, use default rendering (no fade-in wrappers)
+  if (!isStreaming) {
+    return {
+      code({
+        className,
+        children,
+        ...props
+      }: {
+        className?: string;
+        children?: ReactNode;
+        [key: string]: unknown;
+      }) {
+        const match = /language-(\w+)/.exec(className || '');
+        const isInline = !match && !className;
+        if (isInline) {
+          return (
+            <code className="bg-background/50 px-1.5 py-0.5 rounded text-sm font-mono" {...props}>
+              {children}
+            </code>
+          );
+        }
+        return (
+          <pre className="bg-background/50 rounded-lg p-4 overflow-x-auto">
+            <code className={cn('text-sm font-mono', className)} {...props}>
+              {children}
+            </code>
+          </pre>
+        );
+      },
+      a({ href, children }: { href?: string; children?: ReactNode }) {
+        return (
+          <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary hover:underline"
+          >
+            {children}
+          </a>
+        );
+      },
+    };
+  }
+
+  // Streaming mode: wrap text in WordByWordFadeIn
+  const Wrap = ({ children }: PropsWithChildren) => <WordByWordFadeIn>{children}</WordByWordFadeIn>;
+
+  return {
+    p({ children }: { children?: ReactNode }) {
+      return (
+        <p className="leading-relaxed my-3 break-words">
+          <Wrap>{children}</Wrap>
+        </p>
+      );
+    },
+    li({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) {
+      return (
+        <li className="py-0.5 break-words" {...props}>
+          <Wrap>{children}</Wrap>
+        </li>
+      );
+    },
+    strong({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) {
+      return (
+        <span className="font-semibold" {...props}>
+          <Wrap>{children}</Wrap>
+        </span>
+      );
+    },
+    h1({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) {
+      return (
+        <h1 className="text-2xl font-semibold mt-6 mb-2" {...props}>
+          <Wrap>{children}</Wrap>
+        </h1>
+      );
+    },
+    h2({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) {
+      return (
+        <h2 className="text-xl font-semibold mt-5 mb-2" {...props}>
+          <Wrap>{children}</Wrap>
+        </h2>
+      );
+    },
+    h3({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) {
+      return (
+        <h3 className="text-lg font-semibold mt-4 mb-2" {...props}>
+          <Wrap>{children}</Wrap>
+        </h3>
+      );
+    },
+    code({
+      className,
+      children,
+      ...props
+    }: {
+      className?: string;
+      children?: ReactNode;
+      [key: string]: unknown;
+    }) {
+      const match = /language-(\w+)/.exec(className || '');
+      const isInline = !match && !className;
+      if (isInline) {
+        return (
+          <code className="bg-background/50 px-1.5 py-0.5 rounded text-sm font-mono" {...props}>
+            {children}
+          </code>
+        );
+      }
+      return (
+        <pre className="bg-background/50 rounded-lg p-4 overflow-x-auto">
+          <code className={cn('text-sm font-mono', className)} {...props}>
+            {children}
+          </code>
+        </pre>
+      );
+    },
+    a({ href, children }: { href?: string; children?: ReactNode }) {
+      return (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-primary hover:underline"
+        >
+          <Wrap>{children}</Wrap>
+        </a>
+      );
+    },
+  };
+}
+
+// ── Props ────────────────────────────────────────────────────────
+
+export interface AssistMessagePartProps {
+  message: RawMessage;
+  isStreaming?: boolean;
+  streamingTools?: Array<{
+    id?: string;
+    toolCallId?: string;
+    name: string;
+    status: 'running' | 'completed' | 'error';
+    durationMs?: number;
+    summary?: string;
+  }>;
+  onRegenerate?: () => void;
+}
+
+// ── Component ────────────────────────────────────────────────────
+
+export const AssistMessagePart = memo(
+  function AssistMessagePart({
+    message,
+    isStreaming = false,
+    onRegenerate,
+  }: AssistMessagePartProps) {
+    const { t } = useTranslation('chat');
+    const text = extractText(message);
+    const hasText = text.trim().length > 0;
+    const images = extractImages(message);
+    const attachedFiles = message._attachedFiles || [];
+    const isErrorResponse = message.stopReason === 'error' || !!message.errorMessage;
+
+    const [copied, setCopied] = useState(false);
+
+    const copyContent = useCallback(() => {
+      navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }, [text]);
+
+     
+    const mdComponents = useMemo(() => makeStreamingComponents(isStreaming), [isStreaming]);
+
+    return (
+      <div className="flex gap-3 group flex-row">
+        {/* Avatar */}
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full mt-1 bg-gradient-to-br from-indigo-500 to-purple-600 text-white">
+          <Sparkles className="h-4 w-4" />
+        </div>
+
+        {/* Content */}
+        <div className="flex flex-col w-full max-w-[80%] space-y-2 items-start">
+          {/* Error response from LLM provider */}
+          {isErrorResponse && !hasText && (
+            <div className="w-full rounded-2xl border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+              <div className="flex items-start gap-2">
+                <AlertTriangle className="h-4 w-4 mt-0.5 shrink-0" />
+                <span>
+                  {message.errorMessage || 'An error occurred while generating the response.'}
+                </span>
+              </div>
+            </div>
+          )}
+
+          {/* Main text bubble with Markdown */}
+          {hasText && (
+            <div className={cn('relative rounded-2xl px-4 py-3 w-full glass-bubble-assistant')}>
+              <div className="prose prose-sm dark:prose-invert max-w-none">
+                <ReactMarkdown remarkPlugins={[remarkGfm]} components={mdComponents}>
+                  {text}
+                </ReactMarkdown>
+                {isStreaming && (
+                  <span className="inline-block w-2 h-4 bg-foreground/50 animate-pulse ml-0.5" />
+                )}
+              </div>
+
+              {/* Footer: timestamp */}
+              {!isStreaming && message.timestamp && (
+                <div className="flex items-center mt-2">
+                  <span className="text-xs text-muted-foreground">
+                    {formatTimestamp(message.timestamp)}
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Images — assistant (below text) */}
+          {images.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {images.map((img, i) => (
+                <img
+                  key={`content-${i}`}
+                  src={`data:${img.mimeType};base64,${img.data}`}
+                  alt="attachment"
+                  className="max-w-xs rounded-lg border"
+                />
+              ))}
+            </div>
+          )}
+
+          {/* File attachments — assistant (below text) */}
+          {attachedFiles.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {attachedFiles.map((file, i) => {
+                const isImage = file.mimeType.startsWith('image/');
+                if (isImage && images.length > 0) return null;
+                if (isImage && file.preview) {
+                  return (
+                    <img
+                      key={`local-${i}`}
+                      src={file.preview}
+                      alt={file.fileName}
+                      className="max-w-xs rounded-lg border"
+                    />
+                  );
+                }
+                if (isImage && !file.preview) {
+                  return (
+                    <div
+                      key={`local-${i}`}
+                      className="w-36 h-36 rounded-xl border overflow-hidden bg-muted flex items-center justify-center text-muted-foreground"
+                    >
+                      <File className="h-8 w-8" />
+                    </div>
+                  );
+                }
+                return <FileCard key={`local-${i}`} file={file} />;
+              })}
+            </div>
+          )}
+
+          {/* Action buttons — visible on hover */}
+          {hasText && !isStreaming && (
+            <div className="flex opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" className="h-7 w-7" onClick={copyContent}>
+                    {copied ? (
+                      <Check className="h-3.5 w-3.5 text-green-500" />
+                    ) : (
+                      <Copy className="h-3.5 w-3.5" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">{t('message.copy')}</TooltipContent>
+              </Tooltip>
+              {onRegenerate && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onRegenerate}>
+                      <RefreshCw className="h-3.5 w-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">{t('message.regenerate')}</TooltipContent>
+                </Tooltip>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+  (prev, next) => {
+    if (prev.message.id !== next.message.id) return false;
+    if (prev.message.content !== next.message.content) return false;
+    if (prev.message.timestamp !== next.message.timestamp) return false;
+    if (prev.message.stopReason !== next.message.stopReason) return false;
+    if (prev.message.errorMessage !== next.message.errorMessage) return false;
+    if (prev.message._attachedFiles !== next.message._attachedFiles) return false;
+    if (prev.isStreaming !== next.isStreaming) return false;
+    if (prev.onRegenerate !== next.onRegenerate) return false;
+    return true;
+  }
+);
+AssistMessagePart.displayName = 'AssistMessagePart';
diff --git a/src/pages/Chat/message-parts/ReasoningPart.tsx b/src/pages/Chat/message-parts/ReasoningPart.tsx
new file mode 100644
index 0000000..51f8f9e
--- /dev/null
+++ b/src/pages/Chat/message-parts/ReasoningPart.tsx
@@ -0,0 +1,92 @@
+/**
+ * Reasoning / Thinking Part
+ * Collapsible block showing the model's chain-of-thought.
+ * Uses framer-motion for smooth expand/collapse animation.
+ */
+import { memo, useState, useEffect } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+
+const variants = {
+  collapsed: {
+    height: 0,
+    opacity: 0,
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  expanded: {
+    height: 'auto',
+    opacity: 1,
+    marginTop: '0.5rem',
+    marginBottom: '0.25rem',
+  },
+};
+
+export interface ReasoningPartProps {
+  content: string;
+  isThinking?: boolean;
+}
+
+export const ReasoningPart = memo(
+  function ReasoningPart({ content, isThinking = false }: ReasoningPartProps) {
+    const { t } = useTranslation('chat');
+    const [expanded, setExpanded] = useState(isThinking);
+
+    // Auto-collapse when thinking finishes
+    useEffect(() => {
+      if (!isThinking && expanded) {
+        setExpanded(false);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isThinking]);
+
+    return (
+      <div className="w-full rounded-lg glass-block-subtle text-sm">
+        <button
+          className="flex items-center gap-2 w-full px-3 py-2 text-muted-foreground hover:text-foreground transition-colors"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? (
+            <ChevronDown className="h-3.5 w-3.5" />
+          ) : (
+            <ChevronRight className="h-3.5 w-3.5" />
+          )}
+          <span className="font-medium">
+            {isThinking ? (
+              <span className="animate-pulse">{t('message.thinking')}</span>
+            ) : (
+              t('message.thinking')
+            )}
+          </span>
+        </button>
+        <AnimatePresence initial={false}>
+          {expanded && (
+            <motion.div
+              key="reasoning-content"
+              initial="collapsed"
+              animate="expanded"
+              exit="collapsed"
+              variants={variants}
+              transition={{ duration: 0.2, ease: 'easeInOut' }}
+              style={{ overflow: 'hidden' }}
+              className="px-3 pb-3 text-muted-foreground"
+            >
+              <div className="prose prose-sm dark:prose-invert max-w-none opacity-75 pl-4 border-l border-border/50">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    );
+  },
+  (prev, next) => {
+    if (prev.content !== next.content) return false;
+    if (prev.isThinking !== next.isThinking) return false;
+    return true;
+  }
+);
+ReasoningPart.displayName = 'ReasoningPart';
diff --git a/src/pages/Chat/message-parts/ToolMessagePart.tsx b/src/pages/Chat/message-parts/ToolMessagePart.tsx
new file mode 100644
index 0000000..46ef780
--- /dev/null
+++ b/src/pages/Chat/message-parts/ToolMessagePart.tsx
@@ -0,0 +1,172 @@
+/**
+ * Tool Message Part
+ * Renders tool status bars (running/completed/error) and tool-use cards
+ * with expandable request/response details.
+ *
+ * When expanded, delegates to a specialized renderer (WebSearch, CodeExecutor,
+ * Browser, or Default) based on the tool name — providing rich visualisation
+ * instead of raw JSON.
+ */
+import { useState, memo, type ReactNode } from 'react';
+import {
+  ChevronDown,
+  ChevronRight,
+  Search,
+  Globe,
+  Monitor,
+  Wrench,
+  Loader2,
+  CheckCircle2,
+  XCircle,
+  Code2,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import {
+  WebSearchRenderer,
+  CodeExecutorRenderer,
+  BrowserRenderer,
+  DefaultRenderer,
+} from '../tool-renderers';
+
+// ── Shared tool helpers ──────────────────────────────────────────
+
+function formatDuration(durationMs?: number): string | null {
+  if (!durationMs || !Number.isFinite(durationMs)) return null;
+  if (durationMs < 1000) return `${Math.round(durationMs)}ms`;
+  return `${(durationMs / 1000).toFixed(1)}s`;
+}
+
+function renderToolIcon(name: string, className: string): ReactNode {
+  const n = name.toLowerCase();
+  if (n.includes('search')) return <Search className={className} />;
+  if (n.includes('fetch')) return <Globe className={className} />;
+  if (n.includes('browser') || n.includes('navigate') || n.includes('playwright'))
+    return <Monitor className={className} />;
+  if (n.includes('code') || n.includes('execute') || n.includes('interpreter'))
+    return <Code2 className={className} />;
+  return <Wrench className={className} />;
+}
+
+function getToolLabel(name: string): string {
+  const n = name.toLowerCase();
+  if (n === 'web_search') return 'Web Search';
+  if (n === 'web_fetch') return 'Web Fetch';
+  if (n === 'browser') return 'Browser';
+  return name;
+}
+
+// ── Tool Status Bar ──────────────────────────────────────────────
+
+export interface ToolStatusItem {
+  id?: string;
+  toolCallId?: string;
+  name: string;
+  status: 'running' | 'completed' | 'error';
+  durationMs?: number;
+  summary?: string;
+}
+
+export const ToolStatusBar = memo(function ToolStatusBar({ tools }: { tools: ToolStatusItem[] }) {
+  return (
+    <div className="w-full rounded-xl border border-border/50 bg-card/50 backdrop-blur-sm px-3 py-2.5 text-xs">
+      <div className="space-y-1.5">
+        {tools.map((tool) => {
+          const duration = formatDuration(tool.durationMs);
+          const label = getToolLabel(tool.name);
+          return (
+            <div key={tool.toolCallId || tool.id || tool.name} className="flex items-center gap-2">
+              {/* Status indicator */}
+              {tool.status === 'running' ? (
+                <Loader2 className="h-3.5 w-3.5 text-primary animate-spin shrink-0" />
+              ) : tool.status === 'error' ? (
+                <XCircle className="h-3.5 w-3.5 text-destructive shrink-0" />
+              ) : (
+                <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500 shrink-0" />
+              )}
+
+              {/* Tool icon + name */}
+              <span
+                className={cn(
+                  'inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-[11px] font-medium',
+                  tool.status === 'error'
+                    ? 'bg-destructive/10 text-destructive'
+                    : tool.status === 'running'
+                      ? 'bg-primary/10 text-primary'
+                      : 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+                )}
+              >
+                {renderToolIcon(tool.name, 'h-3 w-3')}
+                {label}
+              </span>
+
+              {/* Duration */}
+              {duration && <span className="text-[11px] text-muted-foreground/70">{duration}</span>}
+
+              {/* Summary */}
+              {tool.summary && (
+                <span className="truncate text-[11px] text-muted-foreground">{tool.summary}</span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
+ToolStatusBar.displayName = 'ToolStatusBar';
+
+// ── Tool Card ────────────────────────────────────────────────────
+
+export interface ToolCardProps {
+  name: string;
+  input: unknown;
+  /** Tool execution output/result — displayed via specialised renderer */
+  output?: unknown;
+}
+
+export const ToolCard = memo(function ToolCard({ name, input, output }: ToolCardProps) {
+  const [expanded, setExpanded] = useState(false);
+  const label = getToolLabel(name);
+
+  // Select renderer inline to avoid "component created during render" lint error
+  const n = name.toLowerCase();
+  const isSearch = n.includes('search');
+  const isCode =
+    n.includes('code') ||
+    n.includes('execute') ||
+    n.includes('run_code') ||
+    n.includes('interpreter');
+  const isBrowser = n.includes('browser') || n.includes('navigate') || n.includes('playwright');
+
+  return (
+    <div className="rounded-xl border border-border/50 bg-card/50 backdrop-blur-sm text-sm">
+      <button
+        className="flex items-center gap-2 w-full px-3 py-1.5 text-muted-foreground hover:text-foreground transition-colors"
+        onClick={() => setExpanded(!expanded)}
+      >
+        {renderToolIcon(name, 'h-3.5 w-3.5 text-primary/70')}
+        <span className="text-xs font-medium">{label}</span>
+        {output != null && <CheckCircle2 className="h-3 w-3 text-emerald-500/70" />}
+        {expanded ? (
+          <ChevronDown className="h-3 w-3 ml-auto" />
+        ) : (
+          <ChevronRight className="h-3 w-3 ml-auto" />
+        )}
+      </button>
+      {expanded && (
+        <div className="px-3 pb-2.5">
+          {isSearch ? (
+            <WebSearchRenderer name={name} input={input} output={output} />
+          ) : isCode ? (
+            <CodeExecutorRenderer name={name} input={input} output={output} />
+          ) : isBrowser ? (
+            <BrowserRenderer name={name} input={input} output={output} />
+          ) : (
+            <DefaultRenderer name={name} input={input} output={output} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+ToolCard.displayName = 'ToolCard';
diff --git a/src/pages/Chat/message-parts/UserMessagePart.tsx b/src/pages/Chat/message-parts/UserMessagePart.tsx
new file mode 100644
index 0000000..0879cbc
--- /dev/null
+++ b/src/pages/Chat/message-parts/UserMessagePart.tsx
@@ -0,0 +1,281 @@
+/**
+ * User Message Part
+ * Renders user text bubble with long-text truncation, inline edit mode,
+ * and hover action buttons (copy / edit / delete).
+ */
+import { useState, useCallback, useRef, useEffect, memo } from 'react';
+import { Copy, Check, Pencil, Trash2, ChevronDown, ChevronUp, User, File } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
+import type { RawMessage, AttachedFileMeta } from '@/stores/chat';
+import { extractText, extractImages, formatTimestamp } from '../message-utils';
+
+const MAX_TEXT_LENGTH = 1000;
+
+// ── File helpers (moved from ChatMessage) ───────────────────────
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+
+function FileIcon({ className }: { mimeType: string; className?: string }) {
+  return <File className={className} />;
+}
+
+function FileCard({ file }: { file: AttachedFileMeta }) {
+  return (
+    <div className="flex items-center gap-2 rounded-lg glass-block-subtle px-3 py-2 max-w-[220px]">
+      <FileIcon mimeType={file.mimeType} className="h-5 w-5 shrink-0 text-muted-foreground" />
+      <div className="min-w-0 overflow-hidden">
+        <p className="text-xs font-medium truncate">{file.fileName}</p>
+        <p className="text-[10px] text-muted-foreground">
+          {file.fileSize > 0 ? formatFileSize(file.fileSize) : 'File'}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ── Props ────────────────────────────────────────────────────────
+
+export interface UserMessagePartProps {
+  message: RawMessage;
+  onEdit?: (messageId: string, newText: string) => void;
+  onDelete?: (messageId: string) => void;
+}
+
+// ── Component ────────────────────────────────────────────────────
+
+export const UserMessagePart = memo(
+  function UserMessagePart({ message, onEdit, onDelete }: UserMessagePartProps) {
+    const { t } = useTranslation('chat');
+    const text = extractText(message);
+    const images = extractImages(message);
+    const attachedFiles = message._attachedFiles || [];
+
+    const [copied, setCopied] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+    const [mode, setMode] = useState<'view' | 'edit'>('view');
+    const [editText, setEditText] = useState(text);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    const isLongText = text.length > MAX_TEXT_LENGTH;
+    const displayText = expanded || !isLongText ? text : text.slice(0, MAX_TEXT_LENGTH) + '...';
+
+    const copyContent = useCallback(() => {
+      navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }, [text]);
+
+    const handleEdit = () => {
+      setEditText(text);
+      setMode('edit');
+    };
+
+    const handleSaveEdit = () => {
+      if (onEdit && message.id && editText.trim()) {
+        onEdit(message.id, editText.trim());
+      }
+      setMode('view');
+    };
+
+    const handleCancelEdit = () => {
+      setMode('view');
+      setEditText(text);
+    };
+
+    const handleDelete = useCallback(() => {
+      if (onDelete && message.id) {
+        onDelete(message.id);
+      }
+    }, [onDelete, message.id]);
+
+    // Auto-focus textarea in edit mode
+    useEffect(() => {
+      if (mode === 'edit' && textareaRef.current) {
+        textareaRef.current.focus();
+        textareaRef.current.setSelectionRange(editText.length, editText.length);
+      }
+    }, [mode, editText.length]);
+
+    // Auto-resize textarea
+    useEffect(() => {
+      if (mode === 'edit' && textareaRef.current) {
+        const ta = textareaRef.current;
+        ta.style.height = 'auto';
+        ta.style.height = `${ta.scrollHeight}px`;
+      }
+    }, [mode, editText]);
+
+    return (
+      <div className="flex gap-3 group flex-row-reverse">
+        {/* Avatar */}
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full mt-1 bg-primary text-primary-foreground">
+          <User className="h-4 w-4" />
+        </div>
+
+        {/* Content */}
+        <div className="flex flex-col w-full max-w-[80%] space-y-2 items-end">
+          {/* Images from content blocks */}
+          {images.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {images.map((img, i) => (
+                <div key={`content-${i}`} className="w-36 h-36 rounded-xl border overflow-hidden">
+                  <img
+                    src={`data:${img.mimeType};base64,${img.data}`}
+                    alt="attachment"
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* File attachments */}
+          {attachedFiles.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {attachedFiles.map((file, i) => {
+                const isImage = file.mimeType.startsWith('image/');
+                if (isImage && images.length > 0) return null;
+                if (isImage) {
+                  return (
+                    <div
+                      key={`local-${i}`}
+                      className="w-36 h-36 rounded-xl border overflow-hidden bg-muted"
+                    >
+                      {file.preview ? (
+                        <img
+                          src={file.preview}
+                          alt={file.fileName}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="w-full h-full flex items-center justify-center text-muted-foreground">
+                          <File className="h-8 w-8" />
+                        </div>
+                      )}
+                    </div>
+                  );
+                }
+                return <FileCard key={`local-${i}`} file={file} />;
+              })}
+            </div>
+          )}
+
+          {/* Text bubble or edit mode */}
+          {mode === 'edit' ? (
+            <div className="w-full rounded-2xl glass-bubble-user px-4 py-3 space-y-2">
+              <textarea
+                ref={textareaRef}
+                value={editText}
+                onChange={(e) => setEditText(e.target.value)}
+                className="w-full bg-transparent text-sm resize-none outline-none min-h-[60px]"
+                placeholder={t('message.editPlaceholder')}
+              />
+              <div className="flex justify-end gap-2">
+                <Button variant="ghost" size="sm" onClick={handleCancelEdit}>
+                  {t('message.cancelEdit')}
+                </Button>
+                <Button size="sm" onClick={handleSaveEdit} disabled={!editText.trim()}>
+                  {t('message.saveEdit')}
+                </Button>
+              </div>
+            </div>
+          ) : (
+            text.trim().length > 0 && (
+              <div className="relative rounded-2xl px-4 py-3 glass-bubble-user overflow-hidden">
+                {/* Gradient fade for long truncated text */}
+                {isLongText && !expanded && (
+                  <div className="absolute pointer-events-none bg-gradient-to-t from-primary/10 to-transparent w-full h-24 bottom-0 left-0" />
+                )}
+                <p className="whitespace-pre-wrap text-sm break-words">{displayText}</p>
+                {isLongText && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setExpanded(!expanded)}
+                    className="h-auto p-1 text-xs z-10 text-muted-foreground hover:text-foreground self-start mt-1"
+                  >
+                    <span className="flex items-center gap-1">
+                      {t(expanded ? 'message.showLess' : 'message.showMore')}
+                      {expanded ? (
+                        <ChevronUp className="h-3 w-3" />
+                      ) : (
+                        <ChevronDown className="h-3 w-3" />
+                      )}
+                    </span>
+                  </Button>
+                )}
+              </div>
+            )
+          )}
+
+          {/* Action buttons — visible on hover */}
+          {mode === 'view' && text.trim().length > 0 && (
+            <div className="flex justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" className="h-7 w-7" onClick={copyContent}>
+                    {copied ? (
+                      <Check className="h-3.5 w-3.5 text-green-500" />
+                    ) : (
+                      <Copy className="h-3.5 w-3.5" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">{t('message.copy')}</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" className="h-7 w-7" onClick={handleEdit}>
+                    <Pencil className="h-3.5 w-3.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">{t('message.edit')}</TooltipContent>
+              </Tooltip>
+              {onDelete && message.id && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7 hover:text-destructive"
+                      onClick={handleDelete}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent className="text-destructive" side="bottom">
+                    {t('message.delete')}
+                  </TooltipContent>
+                </Tooltip>
+              )}
+            </div>
+          )}
+
+          {/* Timestamp on hover */}
+          {message.timestamp && (
+            <span className="text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-200 select-none">
+              {formatTimestamp(message.timestamp)}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  },
+  (prev, next) => {
+    if (prev.message.id !== next.message.id) return false;
+    if (prev.message.content !== next.message.content) return false;
+    if (prev.message.timestamp !== next.message.timestamp) return false;
+    if (prev.message._attachedFiles !== next.message._attachedFiles) return false;
+    if (prev.onEdit !== next.onEdit) return false;
+    if (prev.onDelete !== next.onDelete) return false;
+    return true;
+  }
+);
+UserMessagePart.displayName = 'UserMessagePart';
diff --git a/src/pages/Chat/message-parts/WordByWordFadeIn.tsx b/src/pages/Chat/message-parts/WordByWordFadeIn.tsx
new file mode 100644
index 0000000..d31a114
--- /dev/null
+++ b/src/pages/Chat/message-parts/WordByWordFadeIn.tsx
@@ -0,0 +1,43 @@
+/**
+ * Word-by-word fade-in animation for streaming markdown content.
+ * Inspired by better-chatbot's markdown.tsx FadeIn / WordByWordFadeIn.
+ * Uses CSS animations (Tailwind animate-in + fade-in) to avoid heavy framer-motion overhead per word.
+ */
+import { memo, type PropsWithChildren, type ReactNode } from 'react';
+
+const FadeIn = memo(function FadeIn({ children }: PropsWithChildren) {
+  return (
+    <span
+      className="inline animate-in fade-in duration-700"
+      style={{ animationFillMode: 'both' }}
+    >
+      {children}{' '}
+    </span>
+  );
+});
+
+/**
+ * Splits children into words and wraps each in a fade-in span.
+ * Non-string children (e.g. JSX elements) are passed through as-is.
+ * Should ONLY be used when streaming — static content should render plain.
+ */
+export const WordByWordFadeIn = memo(function WordByWordFadeIn({ children }: PropsWithChildren) {
+  const flat: ReactNode[] = Array.isArray(children) ? children : [children];
+  const result: ReactNode[] = [];
+
+  for (let i = 0; i < flat.length; i++) {
+    const child = flat[i];
+    if (typeof child === 'string') {
+      const words = child.split(' ');
+      for (let j = 0; j < words.length; j++) {
+        if (words[j]) {
+          result.push(<FadeIn key={`${i}-${j}`}>{words[j]}</FadeIn>);
+        }
+      }
+    } else {
+      result.push(child);
+    }
+  }
+
+  return <>{result}</>;
+});
diff --git a/src/pages/Chat/message-parts/index.ts b/src/pages/Chat/message-parts/index.ts
new file mode 100644
index 0000000..8496f81
--- /dev/null
+++ b/src/pages/Chat/message-parts/index.ts
@@ -0,0 +1,27 @@
+/**
+ * Message Parts — Modular message component exports
+ *
+ * This directory contains the refactored message part components,
+ * split from the monolithic ChatMessage.tsx.
+ *
+ * Structure:
+ * - WordByWordFadeIn.tsx: Streaming word-level fade-in animation
+ * - UserMessagePart.tsx:  User message with edit/copy/delete actions, long-text truncation
+ * - AssistMessagePart.tsx: Assistant message with Markdown, streaming cursor, copy/regenerate
+ * - ReasoningPart.tsx:    Collapsible thinking/reasoning block with framer-motion animation
+ * - ToolMessagePart.tsx:  Tool status bar + tool card components
+ */
+
+export { UserMessagePart } from './UserMessagePart';
+export type { UserMessagePartProps } from './UserMessagePart';
+
+export { AssistMessagePart } from './AssistMessagePart';
+export type { AssistMessagePartProps } from './AssistMessagePart';
+
+export { ReasoningPart } from './ReasoningPart';
+export type { ReasoningPartProps } from './ReasoningPart';
+
+export { ToolStatusBar, ToolCard } from './ToolMessagePart';
+export type { ToolStatusItem, ToolCardProps } from './ToolMessagePart';
+
+export { WordByWordFadeIn } from './WordByWordFadeIn';
diff --git a/src/pages/Chat/tool-renderers/BrowserRenderer.tsx b/src/pages/Chat/tool-renderers/BrowserRenderer.tsx
new file mode 100644
index 0000000..09d53d2
--- /dev/null
+++ b/src/pages/Chat/tool-renderers/BrowserRenderer.tsx
@@ -0,0 +1,217 @@
+/**
+ * Browser Tool Renderer
+ * Renders browser operation results with URL, status badge, and action summary.
+ * Triggered when tool name contains "browser".
+ */
+import { useState, useMemo, memo } from 'react';
+import {
+  Monitor,
+  ExternalLink,
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  MousePointer2,
+  Eye,
+  Type,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
+import type { ToolRendererProps } from './index';
+
+/** Extract URL from input or output */
+function extractUrl(data: unknown): string {
+  if (!data || typeof data !== 'object') return '';
+  const obj = data as Record<string, unknown>;
+  if (typeof obj.url === 'string') return obj.url;
+  if (typeof obj.href === 'string') return obj.href;
+  if (typeof obj.link === 'string') return obj.link;
+  if (typeof obj.page_url === 'string') return obj.page_url;
+  return '';
+}
+
+/** Detect browser action type from input */
+function extractAction(input: unknown): string {
+  if (!input || typeof input !== 'object') return 'browse';
+  const obj = input as Record<string, unknown>;
+  if (typeof obj.action === 'string') return obj.action.toLowerCase();
+  if (typeof obj.command === 'string') return obj.command.toLowerCase();
+  if (typeof obj.type === 'string') return obj.type.toLowerCase();
+  return 'browse';
+}
+
+/** Get appropriate icon for browser action */
+function ActionIcon({ action, className }: { action: string; className: string }) {
+  if (action.includes('click') || action.includes('press')) {
+    return <MousePointer2 className={className} />;
+  }
+  if (action.includes('type') || action.includes('fill') || action.includes('input')) {
+    return <Type className={className} />;
+  }
+  if (action.includes('screenshot') || action.includes('observe') || action.includes('look')) {
+    return <Eye className={className} />;
+  }
+  return <Monitor className={className} />;
+}
+
+/** Extract status from output */
+function extractStatus(output: unknown): 'success' | 'error' | 'running' {
+  if (!output) return 'running';
+  if (typeof output === 'object') {
+    const obj = output as Record<string, unknown>;
+    if (obj.error || obj.isError === true) return 'error';
+    if (typeof obj.status === 'string') {
+      const s = obj.status.toLowerCase();
+      if (s === 'error' || s === 'failed') return 'error';
+    }
+  }
+  return 'success';
+}
+
+/** Extract page title from output */
+function extractTitle(output: unknown): string {
+  if (!output || typeof output !== 'object') return '';
+  const obj = output as Record<string, unknown>;
+  if (typeof obj.title === 'string') return obj.title;
+  if (typeof obj.pageTitle === 'string') return obj.pageTitle;
+  return '';
+}
+
+export const BrowserRenderer = memo(function BrowserRenderer({
+  input,
+  output,
+}: ToolRendererProps) {
+  const { t } = useTranslation('chat');
+  const [activeTab, setActiveTab] = useState<'summary' | 'input' | 'output'>(
+    output != null ? 'summary' : 'input'
+  );
+
+  const url = useMemo(() => extractUrl(input) || extractUrl(output), [input, output]);
+  const action = useMemo(() => extractAction(input), [input]);
+  const status = useMemo(() => extractStatus(output), [output]);
+  const pageTitle = useMemo(() => extractTitle(output), [output]);
+
+  const domain = useMemo(() => {
+    if (!url) return '';
+    try {
+      return new URL(url).hostname.replace(/^www\./, '');
+    } catch {
+      return url;
+    }
+  }, [url]);
+
+  const actionLabel = useMemo(() => {
+    if (action.includes('click')) return t('tool.browserClick', 'Click');
+    if (action.includes('type') || action.includes('fill')) return t('tool.browserType', 'Type');
+    if (action.includes('navigate') || action.includes('goto')) return t('tool.browserNavigate', 'Navigate');
+    if (action.includes('screenshot')) return t('tool.browserScreenshot', 'Screenshot');
+    if (action.includes('scroll')) return t('tool.browserScroll', 'Scroll');
+    if (action.includes('observe') || action.includes('look')) return t('tool.browserObserve', 'Observe');
+    return t('tool.browserBrowse', 'Browse');
+  }, [action, t]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Header card with URL + status */}
+      <div className="flex items-center gap-2 rounded-lg bg-muted/50 px-3 py-2">
+        <ActionIcon action={action} className="h-4 w-4 text-muted-foreground shrink-0" />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-1.5">
+            <span className="text-xs font-medium">{actionLabel}</span>
+            {/* Status badge */}
+            {status === 'success' && (
+              <CheckCircle2 className="h-3 w-3 text-emerald-500 shrink-0" />
+            )}
+            {status === 'error' && <XCircle className="h-3 w-3 text-destructive shrink-0" />}
+            {status === 'running' && (
+              <Loader2 className="h-3 w-3 text-primary animate-spin shrink-0" />
+            )}
+          </div>
+
+          {/* URL */}
+          {url && (
+            <div className="flex items-center gap-1 mt-0.5">
+              <span className="text-[10px] text-muted-foreground/70 truncate">{domain}</span>
+              <a
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[10px] text-primary/60 hover:text-primary transition-colors"
+              >
+                <ExternalLink className="h-2.5 w-2.5" />
+              </a>
+            </div>
+          )}
+
+          {/* Page title */}
+          {pageTitle && (
+            <p className="text-[10px] text-muted-foreground truncate mt-0.5">{pageTitle}</p>
+          )}
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex items-center gap-1">
+        {output != null && (
+          <button
+            className={cn(
+              'rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors',
+              activeTab === 'summary'
+                ? 'bg-primary/10 text-primary'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+            )}
+            onClick={() => setActiveTab('summary')}
+          >
+            {t('tool.summary', 'Summary')}
+          </button>
+        )}
+        <button
+          className={cn(
+            'rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors',
+            activeTab === 'input'
+              ? 'bg-primary/10 text-primary'
+              : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+          )}
+          onClick={() => setActiveTab('input')}
+        >
+          {t('tool.input', 'Input')}
+        </button>
+        {output != null && (
+          <button
+            className={cn(
+              'rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors',
+              activeTab === 'output'
+                ? 'bg-primary/10 text-primary'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+            )}
+            onClick={() => setActiveTab('output')}
+          >
+            {t('tool.rawOutput', 'Raw Output')}
+          </button>
+        )}
+      </div>
+
+      {/* Content */}
+      {activeTab === 'input' && (
+        <pre className="rounded-lg bg-muted/50 px-3 py-2 text-xs text-muted-foreground overflow-x-auto max-h-[300px] overflow-y-auto leading-relaxed">
+          {typeof input === 'string' ? input : JSON.stringify(input, null, 2)}
+        </pre>
+      )}
+      {activeTab === 'output' && output != null && (
+        <pre className="rounded-lg bg-muted/50 px-3 py-2 text-xs text-muted-foreground overflow-x-auto max-h-[300px] overflow-y-auto leading-relaxed">
+          {typeof output === 'string' ? output : JSON.stringify(output, null, 2)}
+        </pre>
+      )}
+      {activeTab === 'summary' && output != null && (
+        <div className="rounded-lg bg-muted/50 px-3 py-2 text-xs text-muted-foreground overflow-x-auto max-h-[300px] overflow-y-auto leading-relaxed">
+          {typeof output === 'string' ? (
+            <p className="whitespace-pre-wrap">{output}</p>
+          ) : (
+            <pre>{JSON.stringify(output, null, 2)}</pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+BrowserRenderer.displayName = 'BrowserRenderer';
diff --git a/src/pages/Chat/tool-renderers/CodeExecutorRenderer.tsx b/src/pages/Chat/tool-renderers/CodeExecutorRenderer.tsx
new file mode 100644
index 0000000..0531a16
--- /dev/null
+++ b/src/pages/Chat/tool-renderers/CodeExecutorRenderer.tsx
@@ -0,0 +1,204 @@
+/**
+ * Code Executor Tool Renderer
+ * Renders code execution results with syntax-highlighted code block and output area.
+ * Triggered when tool name contains "code" or "execute".
+ */
+import { useState, useMemo, memo, useCallback } from 'react';
+import { Copy, Check, AlertTriangle, ChevronRight, Terminal, Code2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
+import type { ToolRendererProps } from './index';
+
+/** Try to extract code string from tool input */
+function extractCode(input: unknown): string {
+  if (typeof input === 'string') return input;
+  if (!input || typeof input !== 'object') return '';
+  const obj = input as Record<string, unknown>;
+  if (typeof obj.code === 'string') return obj.code;
+  if (typeof obj.script === 'string') return obj.script;
+  if (typeof obj.source === 'string') return obj.source;
+  if (typeof obj.content === 'string') return obj.content;
+  return JSON.stringify(input, null, 2);
+}
+
+/** Try to extract language from tool input or name */
+function extractLanguage(input: unknown, toolName: string): string {
+  if (input && typeof input === 'object') {
+    const obj = input as Record<string, unknown>;
+    if (typeof obj.language === 'string') return obj.language.toLowerCase();
+    if (typeof obj.lang === 'string') return obj.lang.toLowerCase();
+    if (typeof obj.type === 'string') return obj.type.toLowerCase();
+  }
+  const n = toolName.toLowerCase();
+  if (n.includes('python') || n.includes('py')) return 'python';
+  if (n.includes('javascript') || n.includes('js')) return 'javascript';
+  if (n.includes('typescript') || n.includes('ts')) return 'typescript';
+  if (n.includes('bash') || n.includes('shell') || n.includes('sh')) return 'bash';
+  return 'code';
+}
+
+/** Extract output logs or result text from tool output */
+function extractOutput(output: unknown): { logs: string[]; error?: string } {
+  if (!output) return { logs: [] };
+  if (typeof output === 'string') return { logs: [output] };
+
+  const obj = output as Record<string, unknown>;
+  const logs: string[] = [];
+  let error: string | undefined;
+
+  // Error
+  if (typeof obj.error === 'string' && obj.error) {
+    error = obj.error;
+  }
+
+  // Logs array
+  if (Array.isArray(obj.logs)) {
+    for (const log of obj.logs) {
+      if (typeof log === 'string') {
+        logs.push(log);
+      } else if (log && typeof log === 'object') {
+        const entry = log as Record<string, unknown>;
+        if (Array.isArray(entry.args)) {
+          const text = (entry.args as Array<Record<string, unknown>>)
+            .map((a) => (typeof a.value === 'string' ? a.value : JSON.stringify(a.value ?? a)))
+            .join(' ');
+          logs.push(text);
+        } else if (typeof entry.message === 'string') {
+          logs.push(entry.message);
+        }
+      }
+    }
+  }
+
+  // Result / output as string
+  if (typeof obj.result === 'string' && obj.result) logs.push(obj.result);
+  if (typeof obj.output === 'string' && obj.output) logs.push(obj.output);
+  if (typeof obj.stdout === 'string' && obj.stdout) logs.push(obj.stdout);
+  if (typeof obj.stderr === 'string' && obj.stderr) {
+    error = error || obj.stderr;
+  }
+
+  // If nothing extracted, try to stringify the entire output
+  if (logs.length === 0 && !error && typeof output === 'object') {
+    const str = JSON.stringify(output, null, 2);
+    if (str !== '{}' && str !== '[]') logs.push(str);
+  }
+
+  return { logs, error };
+}
+
+export const CodeExecutorRenderer = memo(function CodeExecutorRenderer({
+  input,
+  output,
+}: ToolRendererProps) {
+  const { t } = useTranslation('chat');
+  const [activeTab, setActiveTab] = useState<'code' | 'output'>(
+    output != null ? 'output' : 'code'
+  );
+  const [copied, setCopied] = useState(false);
+
+  const code = useMemo(() => extractCode(input), [input]);
+  const language = useMemo(() => extractLanguage(input, ''), [input]);
+  const { logs, error } = useMemo(() => extractOutput(output), [output]);
+
+  const handleCopyCode = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard may not be available
+    }
+  }, [code]);
+
+  const langLabel = language === 'javascript' ? 'JS' : language === 'python' ? 'PY' : language.toUpperCase();
+
+  return (
+    <div className="flex flex-col gap-1">
+      {/* Header with language badge */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1">
+          <button
+            className={cn(
+              'rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors flex items-center gap-1',
+              activeTab === 'code'
+                ? 'bg-primary/10 text-primary'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+            )}
+            onClick={() => setActiveTab('code')}
+          >
+            <Code2 className="h-3 w-3" />
+            {t('tool.code', 'Code')}
+          </button>
+          {output != null && (
+            <button
+              className={cn(
+                'rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors flex items-center gap-1',
+                activeTab === 'output'
+                  ? 'bg-primary/10 text-primary'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+              )}
+              onClick={() => setActiveTab('output')}
+            >
+              <Terminal className="h-3 w-3" />
+              {t('tool.output', 'Output')}
+            </button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] font-mono font-bold text-muted-foreground">
+            {langLabel}
+          </span>
+          <button
+            className="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
+            onClick={handleCopyCode}
+          >
+            {copied ? (
+              <Check className="h-3 w-3 text-emerald-500" />
+            ) : (
+              <Copy className="h-3 w-3" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      {activeTab === 'code' ? (
+        <pre className="rounded-lg bg-zinc-950 dark:bg-zinc-900/80 px-3 py-2.5 text-xs text-zinc-200 overflow-x-auto max-h-[400px] overflow-y-auto leading-relaxed font-mono">
+          {code || t('tool.noData', 'No data')}
+        </pre>
+      ) : (
+        <div className="rounded-lg bg-muted/50 overflow-hidden max-h-[300px] overflow-y-auto">
+          {/* Logs */}
+          {logs.length > 0 && (
+            <div className="px-3 py-2 space-y-0.5">
+              {logs.map((log, i) => (
+                <div key={i} className="flex items-start gap-1.5 text-xs text-muted-foreground">
+                  <ChevronRight className="h-3 w-3 mt-0.5 shrink-0 text-muted-foreground/50" />
+                  <span className="whitespace-pre-wrap break-all">{log}</span>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Error */}
+          {error && (
+            <div className="flex items-start gap-1.5 px-3 py-2 bg-destructive/10 text-destructive text-xs border-t border-destructive/20">
+              <AlertTriangle className="h-3 w-3 mt-0.5 shrink-0" />
+              <span className="whitespace-pre-wrap break-all">{error}</span>
+            </div>
+          )}
+
+          {/* No output */}
+          {logs.length === 0 && !error && (
+            <div className="px-3 py-4 text-center text-xs text-muted-foreground">
+              {t('tool.noOutput', 'No output')}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+CodeExecutorRenderer.displayName = 'CodeExecutorRenderer';
diff --git a/src/pages/Chat/tool-renderers/DefaultRenderer.tsx b/src/pages/Chat/tool-renderers/DefaultRenderer.tsx
new file mode 100644
index 0000000..5b9538b
--- /dev/null
+++ b/src/pages/Chat/tool-renderers/DefaultRenderer.tsx
@@ -0,0 +1,85 @@
+/**
+ * Default Tool Renderer
+ * Enhanced JSON view with formatted output, Copy button, and syntax highlighting.
+ * Used as fallback when no specialized renderer matches the tool name.
+ */
+import { useState, memo, useCallback } from 'react';
+import { Copy, Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
+import type { ToolRendererProps } from './index';
+
+export const DefaultRenderer = memo(function DefaultRenderer({
+  input,
+  output,
+}: ToolRendererProps) {
+  const { t } = useTranslation('chat');
+  const [activeTab, setActiveTab] = useState<'input' | 'output'>(output != null ? 'output' : 'input');
+  const [copied, setCopied] = useState(false);
+
+  const currentData = activeTab === 'input' ? input : output;
+  const formatted =
+    typeof currentData === 'string' ? currentData : JSON.stringify(currentData, null, 2);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(formatted ?? '');
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard may not be available
+    }
+  }, [formatted]);
+
+  return (
+    <div className="flex flex-col gap-1">
+      {/* Tab bar + copy button */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1">
+          <button
+            className={cn(
+              'rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors',
+              activeTab === 'input'
+                ? 'bg-primary/10 text-primary'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+            )}
+            onClick={() => setActiveTab('input')}
+          >
+            {t('tool.input', 'Input')}
+          </button>
+          {output != null && (
+            <button
+              className={cn(
+                'rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors',
+                activeTab === 'output'
+                  ? 'bg-primary/10 text-primary'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+              )}
+              onClick={() => setActiveTab('output')}
+            >
+              {t('tool.output', 'Output')}
+            </button>
+          )}
+        </div>
+
+        <button
+          className="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
+          onClick={handleCopy}
+        >
+          {copied ? (
+            <Check className="h-3 w-3 text-emerald-500" />
+          ) : (
+            <Copy className="h-3 w-3" />
+          )}
+          {copied ? t('tool.copied', 'Copied') : t('tool.copy', 'Copy')}
+        </button>
+      </div>
+
+      {/* Content */}
+      <pre className="rounded-lg bg-muted/50 px-3 py-2 text-xs text-muted-foreground overflow-x-auto max-h-[300px] overflow-y-auto leading-relaxed">
+        {formatted || t('tool.noData', 'No data')}
+      </pre>
+    </div>
+  );
+});
+DefaultRenderer.displayName = 'DefaultRenderer';
diff --git a/src/pages/Chat/tool-renderers/WebSearchRenderer.tsx b/src/pages/Chat/tool-renderers/WebSearchRenderer.tsx
new file mode 100644
index 0000000..3be1450
--- /dev/null
+++ b/src/pages/Chat/tool-renderers/WebSearchRenderer.tsx
@@ -0,0 +1,214 @@
+/**
+ * Web Search Tool Renderer
+ * Renders search results as a clean list with titles, URLs, and descriptions.
+ * Triggered when tool name contains "search".
+ */
+import { useState, useMemo, memo } from 'react';
+import { ExternalLink, Globe, Search, AlertTriangle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
+import type { ToolRendererProps } from './index';
+
+/** A generic search result shape — tolerant of different provider formats */
+interface SearchResult {
+  title?: string;
+  url?: string;
+  link?: string;
+  href?: string;
+  description?: string;
+  snippet?: string;
+  text?: string;
+  content?: string;
+}
+
+/** Try to extract an array of search results from tool output */
+function extractResults(data: unknown): SearchResult[] {
+  if (!data || typeof data !== 'object') return [];
+
+  // Direct array of results
+  if (Array.isArray(data)) return data as SearchResult[];
+
+  const obj = data as Record<string, unknown>;
+
+  // Common wrapper fields
+  if (Array.isArray(obj.results)) return obj.results as SearchResult[];
+  if (Array.isArray(obj.items)) return obj.items as SearchResult[];
+  if (Array.isArray(obj.data)) return obj.data as SearchResult[];
+  if (Array.isArray(obj.organic)) return obj.organic as SearchResult[];
+  if (Array.isArray(obj.web)) return obj.web as SearchResult[];
+
+  return [];
+}
+
+function getUrl(result: SearchResult): string {
+  return result.url || result.link || result.href || '';
+}
+
+function getDescription(result: SearchResult): string {
+  return result.description || result.snippet || result.text || result.content || '';
+}
+
+function getDomain(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return url;
+  }
+}
+
+export const WebSearchRenderer = memo(function WebSearchRenderer({
+  name,
+  input,
+  output,
+}: ToolRendererProps) {
+  const { t } = useTranslation('chat');
+  const [activeTab, setActiveTab] = useState<'results' | 'input'>(
+    output != null ? 'results' : 'input'
+  );
+
+  const query = useMemo(() => {
+    if (!input || typeof input !== 'object') return '';
+    const inp = input as Record<string, unknown>;
+    return (
+      (typeof inp.query === 'string' ? inp.query : '') ||
+      (typeof inp.q === 'string' ? inp.q : '') ||
+      (typeof inp.search === 'string' ? inp.search : '') ||
+      ''
+    );
+  }, [input]);
+
+  const results = useMemo(() => extractResults(output), [output]);
+
+  const isError = useMemo(() => {
+    if (!output || typeof output !== 'object') return false;
+    const obj = output as Record<string, unknown>;
+    return obj.isError === true || obj.error != null;
+  }, [output]);
+
+  const errorMessage = useMemo(() => {
+    if (!output || typeof output !== 'object') return '';
+    const obj = output as Record<string, unknown>;
+    return typeof obj.error === 'string' ? obj.error : '';
+  }, [output]);
+
+  // No output yet — show input
+  if (output == null) {
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <Search className="h-3.5 w-3.5 text-muted-foreground" />
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('tool.searchingFor', 'Searching for')}: &ldquo;{query}&rdquo;
+          </span>
+        </div>
+        <pre className="rounded-lg bg-muted/50 px-3 py-2 text-xs text-muted-foreground overflow-x-auto">
+          {typeof input === 'string' ? input : JSON.stringify(input, null, 2)}
+        </pre>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Header */}
+      <div className="flex items-center gap-2">
+        <Globe className="h-3.5 w-3.5 text-muted-foreground" />
+        <span className="text-xs font-medium">
+          {t('tool.searchResults', 'Search Results')}
+        </span>
+        {query && (
+          <span className="text-[11px] text-muted-foreground/70 truncate max-w-[200px]">
+            &ldquo;{query}&rdquo;
+          </span>
+        )}
+      </div>
+
+      {/* Tabs */}
+      <div className="flex items-center gap-1">
+        <button
+          className={cn(
+            'rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors',
+            activeTab === 'results'
+              ? 'bg-primary/10 text-primary'
+              : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+          )}
+          onClick={() => setActiveTab('results')}
+        >
+          {t('tool.results', 'Results')} ({results.length})
+        </button>
+        <button
+          className={cn(
+            'rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors',
+            activeTab === 'input'
+              ? 'bg-primary/10 text-primary'
+              : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+          )}
+          onClick={() => setActiveTab('input')}
+        >
+          {t('tool.input', 'Input')}
+        </button>
+      </div>
+
+      {/* Content */}
+      {activeTab === 'input' ? (
+        <pre className="rounded-lg bg-muted/50 px-3 py-2 text-xs text-muted-foreground overflow-x-auto max-h-[300px] overflow-y-auto leading-relaxed">
+          {typeof input === 'string' ? input : JSON.stringify(input, null, 2)}
+        </pre>
+      ) : isError ? (
+        <div className="flex items-center gap-2 rounded-lg bg-destructive/10 px-3 py-2 text-xs text-destructive">
+          <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
+          <span>{errorMessage || t('tool.searchError', 'Search failed')}</span>
+        </div>
+      ) : results.length === 0 ? (
+        <div className="rounded-lg bg-muted/50 px-3 py-4 text-center text-xs text-muted-foreground">
+          {t('tool.noResults', 'No results found')}
+        </div>
+      ) : (
+        <div className="flex flex-col gap-1 max-h-[400px] overflow-y-auto">
+          {results.map((result, i) => {
+            const url = getUrl(result);
+            const desc = getDescription(result);
+            return (
+              <div
+                key={i}
+                className="group flex flex-col gap-0.5 rounded-lg px-3 py-2 hover:bg-accent/50 transition-colors"
+              >
+                {/* Title + link */}
+                <div className="flex items-start gap-1.5">
+                  {url ? (
+                    <a
+                      href={url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-xs font-medium text-primary hover:underline flex items-center gap-1 min-w-0"
+                    >
+                      <span className="truncate">{result.title || url}</span>
+                      <ExternalLink className="h-2.5 w-2.5 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
+                    </a>
+                  ) : (
+                    <span className="text-xs font-medium">{result.title || `${name} #${i + 1}`}</span>
+                  )}
+                </div>
+
+                {/* Domain */}
+                {url && (
+                  <span className="text-[10px] text-muted-foreground/60 truncate">
+                    {getDomain(url)}
+                  </span>
+                )}
+
+                {/* Description */}
+                {desc && (
+                  <p className="text-[11px] text-muted-foreground leading-relaxed line-clamp-2">
+                    {desc}
+                  </p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+});
+WebSearchRenderer.displayName = 'WebSearchRenderer';
diff --git a/src/pages/Chat/tool-renderers/index.ts b/src/pages/Chat/tool-renderers/index.ts
new file mode 100644
index 0000000..da20e39
--- /dev/null
+++ b/src/pages/Chat/tool-renderers/index.ts
@@ -0,0 +1,39 @@
+/**
+ * Tool Renderer Router
+ * Selects the appropriate specialized renderer based on tool name.
+ * Falls back to DefaultRenderer for unknown tool types.
+ */
+import type { ComponentType } from 'react';
+import { WebSearchRenderer } from './WebSearchRenderer';
+import { CodeExecutorRenderer } from './CodeExecutorRenderer';
+import { BrowserRenderer } from './BrowserRenderer';
+import { DefaultRenderer } from './DefaultRenderer';
+
+/** Props shared by all tool renderers */
+export interface ToolRendererProps {
+  /** Tool name */
+  name: string;
+  /** Tool call input (arguments sent to the tool) */
+  input: unknown;
+  /** Tool execution output / result (undefined if not yet completed) */
+  output?: unknown;
+}
+
+/** Select the best renderer component based on tool name */
+export function getToolRenderer(toolName: string): ComponentType<ToolRendererProps> {
+  const n = toolName.toLowerCase();
+
+  if (n.includes('search')) {
+    return WebSearchRenderer;
+  }
+  if (n.includes('code') || n.includes('execute') || n.includes('run_code') || n.includes('interpreter')) {
+    return CodeExecutorRenderer;
+  }
+  if (n.includes('browser') || n.includes('navigate') || n.includes('playwright')) {
+    return BrowserRenderer;
+  }
+
+  return DefaultRenderer;
+}
+
+export { WebSearchRenderer, CodeExecutorRenderer, BrowserRenderer, DefaultRenderer };