diff --git a/src/components/chat/utils/chatMessageParser.ts b/src/components/chat/utils/chatMessageParser.ts
new file mode 100644
index 000000000..340e72bfd
--- /dev/null
+++ b/src/components/chat/utils/chatMessageParser.ts
@@ -0,0 +1,456 @@
+import type { ChatMessage } from '../types/types';
+
+export type UiMessageKind =
+  | 'thinking'
+  | 'bash'
+  | 'file-read'
+  | 'code-diff'
+  | 'file-write'
+  | 'web-search'
+  | 'file-tree'
+  | 'error-warning'
+  | 'tool-invocation'
+  | 'image-generation'
+  | 'streaming-prose'
+  | 'summary-completion';
+
+export interface SearchResultItem {
+  title: string;
+  url?: string;
+  snippet?: string;
+}
+
+export interface TreeItem {
+  name: string;
+  type: 'file' | 'folder';
+  size?: string;
+}
+
+export interface ParsedUiMessage {
+  kind: UiMessageKind;
+  collapsible: boolean;
+  defaultOpen: boolean;
+  title?: string;
+  details?: string;
+  path?: string;
+  filename?: string;
+  language?: string;
+  lineCount?: number;
+  command?: string;
+  output?: string;
+  exitCode?: number | null;
+  query?: string;
+  resultCount?: number;
+  searchResults?: SearchResultItem[];
+  treeItems?: TreeItem[];
+  content?: string;
+  status?: 'running' | 'done' | 'error' | 'created' | 'saved' | 'generating';
+  isStreaming?: boolean;
+  additions?: number;
+  deletions?: number;
+  toolName?: string;
+  toolId?: string;
+  toolInputRaw?: string;
+  listItems?: string[];
+  outputs?: string[];
+  generated?: unknown;
+  permissionRequest?: boolean;
+}
+
+const LANGUAGE_BY_EXT: Record<string, string> = {
+  js: 'JS',
+  jsx: 'JSX',
+  ts: 'TS',
+  tsx: 'TSX',
+  py: 'PY',
+  md: 'MD',
+  json: 'JSON',
+  yml: 'YAML',
+  yaml: 'YAML',
+  sh: 'SH',
+  css: 'CSS',
+  html: 'HTML',
+  go: 'GO',
+  rs: 'RS',
+  java: 'JAVA',
+  c: 'C',
+  cpp: 'CPP',
+  cs: 'CS',
+  rb: 'RB',
+  php: 'PHP',
+  sql: 'SQL',
+};
+
+const toObject = (value: unknown): Record<string, unknown> | null => {
+  if (!value) return null;
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    return value as Record<string, unknown>;
+  }
+  if (typeof value === 'string') {
+    try {
+      const parsed = JSON.parse(value);
+      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+        return parsed as Record<string, unknown>;
+      }
+    } catch {
+      return null;
+    }
+  }
+  return null;
+};
+
+const toArray = (value: unknown): unknown[] => {
+  if (Array.isArray(value)) return value;
+  if (typeof value === 'string') {
+    try {
+      const parsed = JSON.parse(value);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }
+  return [];
+};
+
+const toText = (value: unknown): string => {
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+};
+
+const getFileExtension = (filePath?: string): string => {
+  if (!filePath) return '';
+  const last = filePath.split('/').pop() || '';
+  const dot = last.lastIndexOf('.');
+  if (dot < 0) return '';
+  return last.slice(dot + 1).toLowerCase();
+};
+
+const getLanguageTag = (filePath?: string): string => {
+  const ext = getFileExtension(filePath);
+  return LANGUAGE_BY_EXT[ext] || (ext ? ext.toUpperCase() : 'TXT');
+};
+
+const extractExitCode = (message: ChatMessage): number | null => {
+  const topLevel = Number(message.exitCode);
+  if (Number.isFinite(topLevel)) return topLevel;
+  const resultObject = toObject(message.toolResult);
+  if (!resultObject) return null;
+  const fields = ['exitCode', 'exit_code', 'code', 'statusCode'];
+  for (const field of fields) {
+    const value = Number(resultObject[field]);
+    if (Number.isFinite(value)) return value;
+  }
+  return null;
+};
+
+const extractResultText = (toolResult: unknown): string => {
+  const obj = toObject(toolResult);
+  if (!obj) return toText(toolResult);
+
+  const candidate =
+    obj.content ??
+    obj.output ??
+    obj.stdout ??
+    obj.text ??
+    obj.message ??
+    obj.result;
+
+  return toText(candidate);
+};
+
+const extractSearchResults = (toolResult: unknown): SearchResultItem[] => {
+  const obj = toObject(toolResult);
+  if (!obj) return [];
+
+  const list = [obj.results, obj.items, obj.data, obj.content]
+    .map((source) => toArray(source))
+    .find((source) => source.length > 0) || [];
+
+  if (!Array.isArray(list) || list.length === 0) return [];
+
+  return list
+    .map((entry): SearchResultItem | null => {
+      const row = toObject(entry);
+      if (!row) return null;
+      return {
+        title: toText(row.title || row.name || row.heading).trim(),
+        url: toText(row.url || row.link || row.href).trim() || undefined,
+        snippet: toText(row.snippet || row.description || row.summary).trim() || undefined,
+      };
+    })
+    .filter((entry): entry is SearchResultItem => Boolean(entry && entry.title));
+};
+
+const extractTreeItems = (toolInput: unknown, toolResult: unknown): TreeItem[] => {
+  const fromResult = toArray(toObject(toolResult)?.items);
+  const fromFilenames = toArray(toObject(toolResult)?.filenames);
+  const inputObj = toObject(toolInput);
+  const fromInput = toArray(inputObj?.items);
+  const candidate = fromResult.length ? fromResult : fromFilenames.length ? fromFilenames : fromInput;
+
+  if (!candidate.length) {
+    const text = extractResultText(toolResult);
+    return text
+      .split('\n')
+      .map((line) => line.trim())
+      .filter(Boolean)
+      .slice(0, 200)
+      .map((line) => ({
+        name: line.replace(/^[\-*]\s*/, ''),
+        type: line.endsWith('/') ? 'folder' : 'file',
+      }));
+  }
+
+  return candidate
+    .map((entry) => {
+      if (typeof entry === 'string') {
+        return { name: entry, type: entry.endsWith('/') ? 'folder' : 'file' } as TreeItem;
+      }
+      const row = toObject(entry);
+      if (!row) return null;
+      const normalizedType = toText(row.type || row.kind).trim().toLowerCase();
+      const isFolder = ['dir', 'directory', 'folder'].includes(normalizedType);
+      return {
+        name: toText(row.name || row.path || row.file || ''),
+        type: isFolder ? 'folder' : 'file',
+        size: toText(row.size || '').trim() || undefined,
+      } as TreeItem;
+    })
+    .filter((item): item is TreeItem => Boolean(item?.name));
+};
+
+const extractSummaryItems = (content: string): string[] => {
+  return content
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => /^[-*•]\s+/.test(line))
+    .map((line) => line.replace(/^[-*•]\s+/, ''))
+    .filter(Boolean);
+};
+
+export function parseChatMessageForUi(message: ChatMessage): ParsedUiMessage {
+  const content = toText(message.content || '');
+  const toolName = String(message.toolName || 'UnknownTool');
+
+  if (message.isThinking) {
+    return {
+      kind: 'thinking',
+      collapsible: true,
+      defaultOpen: false,
+      title: 'Thinking',
+      isStreaming: Boolean(message.isStreaming),
+      content,
+    };
+  }
+
+  if (message.type === 'error' || message.toolResult?.isError) {
+    return {
+      kind: 'error-warning',
+      collapsible: false,
+      defaultOpen: true,
+      title: 'Error',
+      content: content || extractResultText(message.toolResult),
+      details: message.toolResult?.isError ? extractResultText(message.toolResult) : undefined,
+      status: 'error',
+      toolName,
+      toolId: toText(message.toolId || message.toolCallId).trim() || undefined,
+      toolInputRaw: toText(message.toolInput),
+      permissionRequest: Boolean(message.toolResult?.isError && message.toolName),
+    };
+  }
+
+  if (!message.isToolUse) {
+    const summaryItems = extractSummaryItems(content);
+    const firstLine = (content.split('\n')[0] || '').trim();
+    const explicitSummary = Boolean((message as any).isSummary);
+    const summaryHeading = /^summary\s*[:\-]\s*/i.test(firstLine);
+    const completionHeading = /\b(refactoring\s+)?complete(?:d)?[.!]?$/i.test(firstLine);
+    const looksLikeSummary =
+      explicitSummary ||
+      summaryItems.length > 1 ||
+      summaryHeading ||
+      completionHeading;
+
+    if (looksLikeSummary && content.length < 2500) {
+      const title = (firstLine || 'Summary').replace(/^[-*•]\s+/, '').trim();
+      return {
+        kind: 'summary-completion',
+        collapsible: false,
+        defaultOpen: true,
+        title,
+        listItems: summaryItems.length > 0 ? summaryItems : content.split('\n').slice(1).filter(Boolean),
+      };
+    }
+
+    return {
+      kind: 'streaming-prose',
+      collapsible: false,
+      defaultOpen: true,
+      isStreaming: Boolean(message.isStreaming),
+      content,
+    };
+  }
+
+  const toolNameLower = toolName.toLowerCase();
+  const toolInputObj = toObject(message.toolInput);
+  const toolResultText = extractResultText(message.toolResult);
+
+  if (toolNameLower === 'bash' || toolNameLower.includes('command')) {
+    const command = toText(
+      toolInputObj?.command ??
+      toolInputObj?.cmd ??
+      toolInputObj?.script ??
+      message.toolInput,
+    ).trim();
+    const exitCode = extractExitCode(message);
+    const isRunning = !message.toolResult;
+    return {
+      kind: 'bash',
+      collapsible: true,
+      defaultOpen: true,
+      title: 'Command',
+      command,
+      output: toolResultText,
+      exitCode,
+      status: isRunning ? 'running' : exitCode && exitCode > 0 ? 'error' : 'done',
+      toolName,
+    };
+  }
+
+  if (toolNameLower === 'read') {
+    const path = toText(toolInputObj?.file_path ?? toolInputObj?.path).trim();
+    const fileBody = toolResultText || content;
+    return {
+      kind: 'file-read',
+      collapsible: true,
+      defaultOpen: false,
+      path,
+      filename: path.split('/').pop() || path,
+      language: getLanguageTag(path),
+      lineCount: fileBody ? fileBody.split('\n').length : 0,
+      content: fileBody,
+      toolName,
+    };
+  }
+
+  if (toolNameLower === 'edit') {
+    const path = toText(toolInputObj?.file_path ?? toolInputObj?.path).trim();
+    const oldContent = toText(toolInputObj?.old_string || '');
+    const newContent = toText(toolInputObj?.new_string || '');
+    return {
+      kind: 'code-diff',
+      collapsible: true,
+      defaultOpen: true,
+      path,
+      filename: path.split('/').pop() || path,
+      content: JSON.stringify({ oldContent, newContent }),
+      toolName,
+    };
+  }
+
+  if (toolNameLower === 'write' || toolNameLower.includes('create_file') || toolNameLower.includes('createfile')) {
+    const path = toText(toolInputObj?.file_path ?? toolInputObj?.path).trim();
+    const fileContent = toText(toolInputObj?.content || '');
+    const status = fileContent ? 'created' : 'saved';
+    return {
+      kind: 'file-write',
+      collapsible: false,
+      defaultOpen: true,
+      path,
+      filename: path.split('/').pop() || path,
+      status,
+      toolName,
+    };
+  }
+
+  const isImageTool = toolNameLower.includes('image') || toolNameLower.includes('dall') || toolNameLower.includes('vision');
+  if (isImageTool) {
+    const status = message.toolResult ? 'done' : 'generating';
+    const resultObj = toObject(message.toolResult);
+    const candidateOutputs = [
+      resultObj?.outputs,
+      resultObj?.images,
+      resultObj?.generated,
+      resultObj?.result,
+      resultObj?.output,
+      resultObj?.content,
+      resultObj?.data,
+    ];
+    const outputs = candidateOutputs
+      .flatMap((candidate) => {
+        if (Array.isArray(candidate)) return candidate.map((item) => toText(item).trim()).filter(Boolean);
+        const single = toText(candidate).trim();
+        return single ? [single] : [];
+      });
+    return {
+      kind: 'image-generation',
+      collapsible: true,
+      defaultOpen: false,
+      title: 'Image Generation',
+      status,
+      content: toolResultText,
+      output: outputs[0] || undefined,
+      outputs: outputs.length ? outputs : undefined,
+      generated: resultObj?.generated ?? resultObj?.output ?? resultObj?.outputs,
+      toolName,
+      toolId: toText(message.toolId || message.toolCallId).trim() || undefined,
+    };
+  }
+
+  const isSearchTool =
+    toolNameLower.includes('search') ||
+    toolNameLower.includes('web_fetch') ||
+    toolNameLower.includes('websearch') ||
+    toolNameLower.includes('web-search');
+  if (isSearchTool) {
+    const results = extractSearchResults(message.toolResult);
+    const query = toText(toolInputObj?.query || toolInputObj?.q || toolInputObj?.search_query || message.toolInput).trim();
+    return {
+      kind: 'web-search',
+      collapsible: true,
+      defaultOpen: false,
+      query,
+      resultCount: results.length,
+      searchResults: results,
+      status: message.toolResult ? 'done' : 'running',
+      toolName,
+    };
+  }
+
+  const isTreeTool =
+    toolNameLower === 'ls' ||
+    toolNameLower.includes('listdir') ||
+    toolNameLower.includes('readdir') ||
+    toolNameLower.includes('directory') ||
+    toolNameLower === 'glob';
+  if (isTreeTool) {
+    const path = toText(toolInputObj?.path || toolInputObj?.directory || toolInputObj?.cwd || '').trim();
+    const treeItems = extractTreeItems(message.toolInput, message.toolResult);
+    return {
+      kind: 'file-tree',
+      collapsible: true,
+      defaultOpen: false,
+      path,
+      treeItems,
+      toolName,
+    };
+  }
+
+  // Fallback for any remaining tool-use message that does not match a known tool kind.
+  return {
+    kind: 'tool-invocation',
+    collapsible: true,
+    defaultOpen: false,
+    toolName,
+    toolId: toText(message.toolId || message.toolCallId).trim() || undefined,
+    status: message.toolResult ? 'done' : 'running',
+    toolInputRaw: toText(message.toolInput),
+    content: toolResultText,
+  };
+}
diff --git a/src/components/chat/utils/messageTransforms.ts b/src/components/chat/utils/messageTransforms.ts
index b4a52508e..02e97636e 100644
--- a/src/components/chat/utils/messageTransforms.ts
+++ b/src/components/chat/utils/messageTransforms.ts
@@ -1,5 +1,6 @@
 import type { ChatMessage } from '../types/types';
 import { decodeHtmlEntities, unescapeWithMathProtection } from './chatFormatting';
+import { parseUiMessageContent } from './uiParser';
 
 export interface DiffLine {
   type: 'added' | 'removed';
@@ -391,38 +392,22 @@ export const convertSessionMessages = (rawMessages: any[]): ChatMessage[] => {
         content = decodeHtmlEntities(String(message.message.content));
       }
 
-      const shouldSkip =
-        !content ||
-        content.startsWith('<command-name>') ||
-        content.startsWith('<command-message>') ||
-        content.startsWith('<command-args>') ||
-        content.startsWith('<local-command-stdout>') ||
-        content.startsWith('<system-reminder>') ||
-        content.startsWith('Caveat:') ||
-        content.startsWith('This session is being continued from a previous') ||
-        content.startsWith('[Request interrupted');
-
-      if (!shouldSkip) {
-        // Parse <task-notification> blocks into compact system messages
-        const taskNotifRegex = /<task-notification>\s*<task-id>[^<]*<\/task-id>\s*<output-file>[^<]*<\/output-file>\s*<status>([^<]*)<\/status>\s*<summary>([^<]*)<\/summary>\s*<\/task-notification>/g;
-        const taskNotifMatch = taskNotifRegex.exec(content);
-        if (taskNotifMatch) {
-          const status = taskNotifMatch[1]?.trim() || 'completed';
-          const summary = taskNotifMatch[2]?.trim() || 'Background task finished';
-          converted.push({
-            type: 'assistant',
-            content: summary,
-            timestamp: message.timestamp || new Date().toISOString(),
-            isTaskNotification: true,
-            taskStatus: status,
-          });
-        } else {
-          converted.push({
-            type: 'user',
-            content: unescapeWithMathProtection(content),
-            timestamp: message.timestamp || new Date().toISOString(),
-          });
-        }
+      const parsedContent = parseUiMessageContent(content);
+
+      if (parsedContent.kind === 'taskNotification') {
+        converted.push({
+          type: 'assistant',
+          content: parsedContent.summary,
+          timestamp: message.timestamp || new Date().toISOString(),
+          isTaskNotification: true,
+          taskStatus: parsedContent.status,
+        });
+      } else if (parsedContent.kind === 'text') {
+        converted.push({
+          type: 'user',
+          content: unescapeWithMathProtection(parsedContent.content),
+          timestamp: message.timestamp || new Date().toISOString(),
+        });
       }
       return;
     }
diff --git a/src/components/chat/utils/uiParser.ts b/src/components/chat/utils/uiParser.ts
new file mode 100644
index 000000000..42d6b2d9e
--- /dev/null
+++ b/src/components/chat/utils/uiParser.ts
@@ -0,0 +1,58 @@
+export type UiParsedMessage =
+  | { kind: 'skip' }
+  | { kind: 'taskNotification'; summary: string; status: string }
+  | { kind: 'text'; content: string };
+
+const SKIP_PREFIXES = [
+  '<command-name>',
+  '<command-message>',
+  '<command-args>',
+  '<local-command-stdout>',
+  '<system-reminder>',
+  'Caveat:',
+  'This session is being continued from a previous',
+  '[Request interrupted',
+];
+
+const TASK_NOTIFICATION_REGEX =
+  /<task-notification>\s*<task-id>[^<]*<\/task-id>\s*<output-file>[^<]*<\/output-file>\s*<status>([^<]*)<\/status>\s*<summary>([^<]*)<\/summary>\s*<\/task-notification>/;
+
+const normalizeTaskStatus = (rawStatus: string | undefined): string => {
+  const status = (rawStatus || '').trim().toLowerCase();
+  if (!status) return 'completed';
+
+  if (['done', 'success', 'ok', 'completed', 'complete'].includes(status)) {
+    return 'completed';
+  }
+  if (['failed', 'failure', 'error', 'errored'].includes(status)) {
+    return 'failed';
+  }
+  if (['running', 'in_progress', 'in progress', 'processing'].includes(status)) {
+    return 'running';
+  }
+  return status;
+};
+
+export function parseUiMessageContent(rawContent: string): UiParsedMessage {
+  const content = rawContent.trim();
+  if (!content) {
+    return { kind: 'skip' };
+  }
+
+  for (const prefix of SKIP_PREFIXES) {
+    if (content.startsWith(prefix)) {
+      return { kind: 'skip' };
+    }
+  }
+
+  const taskMatch = content.match(TASK_NOTIFICATION_REGEX);
+  if (taskMatch) {
+    return {
+      kind: 'taskNotification',
+      status: normalizeTaskStatus(taskMatch[1]),
+      summary: taskMatch[2]?.trim() || 'Background task finished',
+    };
+  }
+
+  return { kind: 'text', content };
+}
diff --git a/src/components/chat/view/subcomponents/MessageComponent.tsx b/src/components/chat/view/subcomponents/MessageComponent.tsx
index fe12f4273..ade794355 100644
--- a/src/components/chat/view/subcomponents/MessageComponent.tsx
+++ b/src/components/chat/view/subcomponents/MessageComponent.tsx
@@ -1,5 +1,20 @@
 import React, { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import {
+  AlertTriangle,
+  Brain,
+  Check,
+  CheckCircle2,
+  Download,
+  FileCode2,
+  FileText,
+  Folder,
+  Globe,
+  Image as ImageIcon,
+  Loader2,
+  Terminal,
+  Wrench,
+} from 'lucide-react';
 import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
 import type {
   ChatMessage,
@@ -9,10 +24,10 @@ import type {
 } from '../../types/types';
 import { Markdown } from './Markdown';
 import { formatUsageLimitText } from '../../utils/chatFormatting';
-import { getClaudePermissionSuggestion } from '../../utils/chatPermissions';
 import { copyTextToClipboard } from '../../../../utils/clipboard';
 import type { Project } from '../../../../types/app';
-import { ToolRenderer, shouldHideToolResult } from '../../tools';
+import { parseChatMessageForUi } from '../../utils/chatMessageParser';
+import { getClaudePermissionSuggestion } from '../../utils/chatPermissions';
 
 type DiffLine = {
   type: string;
@@ -41,8 +56,6 @@ type InteractiveOption = {
   isSelected: boolean;
 };
 
-type PermissionGrantState = 'idle' | 'granted' | 'error';
-
 const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFileOpen, onShowSettings, onGrantToolPermission, autoExpandTools, showRawParameters, showThinking, selectedProject, provider }: MessageComponentProps) => {
   const { t } = useTranslation('chat');
   const isGrouped = prevMessage && prevMessage.type === message.type &&
@@ -51,15 +64,11 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
       (prevMessage.type === 'tool') ||
       (prevMessage.type === 'error'));
   const messageRef = React.useRef<HTMLDivElement | null>(null);
+  const previousToolIdRef = React.useRef<string | undefined>(undefined);
+  const previousPermissionEntryRef = React.useRef<string | undefined>(undefined);
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const permissionSuggestion = getClaudePermissionSuggestion(message, provider);
-  const [permissionGrantState, setPermissionGrantState] = React.useState<PermissionGrantState>('idle');
   const [messageCopied, setMessageCopied] = React.useState(false);
-
-
-  React.useEffect(() => {
-    setPermissionGrantState('idle');
-  }, [permissionSuggestion?.entry, message.toolId]);
+  const [permissionGrantState, setPermissionGrantState] = React.useState<'idle' | 'granted' | 'error'>('idle');
 
   React.useEffect(() => {
     const node = messageRef.current;
@@ -89,6 +98,25 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
 
   const formattedTime = useMemo(() => new Date(message.timestamp).toLocaleTimeString(), [message.timestamp]);
   const shouldHideThinkingMessage = Boolean(message.isThinking && !showThinking);
+  const parsedUiMessage = useMemo(() => parseChatMessageForUi(message), [message]);
+  const permissionSuggestion = useMemo(
+    () => getClaudePermissionSuggestion(message, String(provider)),
+    [message, provider],
+  );
+
+  React.useEffect(() => {
+    const currentToolId = parsedUiMessage.toolId;
+    const currentEntry = permissionSuggestion?.entry;
+    if (
+      previousToolIdRef.current === currentToolId &&
+      previousPermissionEntryRef.current === currentEntry
+    ) {
+      return;
+    }
+    setPermissionGrantState('idle');
+    previousToolIdRef.current = currentToolId;
+    previousPermissionEntryRef.current = currentEntry;
+  }, [parsedUiMessage.toolId, permissionSuggestion?.entry]);
 
   if (shouldHideThinkingMessage) {
     return null;
@@ -97,12 +125,12 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
   return (
     <div
       ref={messageRef}
-      className={`chat-message ${message.type} ${isGrouped ? 'grouped' : ''} ${message.type === 'user' ? 'flex justify-end px-3 sm:px-0' : 'px-3 sm:px-0'}`}
+      className={`chat-message ${message.type} ${isGrouped ? 'grouped' : ''} ${message.type === 'user' ? 'flex justify-end px-2 sm:px-0' : 'px-2 sm:px-0'}`}
     >
       {message.type === 'user' ? (
         /* User message bubble on the right */
         <div className="flex items-end space-x-0 sm:space-x-3 w-full sm:w-auto sm:max-w-[85%] md:max-w-md lg:max-w-lg xl:max-w-xl">
-          <div className="bg-blue-600 text-white rounded-2xl rounded-br-md px-3 sm:px-4 py-2 shadow-sm flex-1 sm:flex-initial group">
+          <div className="bg-gradient-to-br from-primary to-primary/90 text-primary-foreground rounded-2xl rounded-br-md px-3 sm:px-4 py-2.5 shadow-[0_14px_32px_hsl(var(--primary)/0.28)] border border-primary/20 flex-1 sm:flex-initial group">
             <div className="text-sm whitespace-pre-wrap break-words">
               {message.content}
             </div>
@@ -119,7 +147,7 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
                 ))}
               </div>
             )}
-            <div className="flex items-center justify-end gap-1 mt-1 text-xs text-blue-100">
+            <div className="flex items-center justify-end gap-1 mt-1.5 text-xs text-primary-foreground/80">
               <button
                 type="button"
                 onClick={() => {
@@ -161,7 +189,7 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
             </div>
           </div>
           {!isGrouped && (
-            <div className="hidden sm:flex w-8 h-8 bg-blue-600 rounded-full items-center justify-center text-white text-sm flex-shrink-0">
+            <div className="hidden sm:flex w-8 h-8 bg-gradient-to-br from-primary to-primary/90 rounded-full items-center justify-center text-white text-sm flex-shrink-0 shadow-sm">
               U
             </div>
           )}
@@ -198,124 +226,8 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
             </div>
           )}
 
-          <div className="w-full">
-
-            {message.isToolUse ? (
-              <>
-                <div className="flex flex-col">
-                  <div className="flex flex-col">
-                    <Markdown className="prose prose-sm max-w-none dark:prose-invert">
-                      {String(message.displayText || '')}
-                    </Markdown>
-                  </div>
-                </div>
-
-                {message.toolInput && (
-                  <ToolRenderer
-                    toolName={message.toolName || 'UnknownTool'}
-                    toolInput={message.toolInput}
-                    toolResult={message.toolResult}
-                    toolId={message.toolId}
-                    mode="input"
-                    onFileOpen={onFileOpen}
-                    createDiff={createDiff}
-                    selectedProject={selectedProject}
-                    autoExpandTools={autoExpandTools}
-                    showRawParameters={showRawParameters}
-                    rawToolInput={typeof message.toolInput === 'string' ? message.toolInput : undefined}
-                    isSubagentContainer={message.isSubagentContainer}
-                    subagentState={message.subagentState}
-                  />
-                )}
-
-                {/* Tool Result Section */}
-                {message.toolResult && !shouldHideToolResult(message.toolName || 'UnknownTool', message.toolResult) && (
-                  message.toolResult.isError ? (
-                    // Error results - red error box with content
-                    <div
-                      id={`tool-result-${message.toolId}`}
-                      className="relative mt-2 p-3 rounded border scroll-mt-4 bg-red-50/50 dark:bg-red-950/10 border-red-200/60 dark:border-red-800/40"
-                    >
-                      <div className="relative flex items-center gap-1.5 mb-2">
-                        <svg className="w-4 h-4 text-red-500 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                        <span className="text-xs font-medium text-red-700 dark:text-red-300">{t('messageTypes.error')}</span>
-                      </div>
-                      <div className="relative text-sm text-red-900 dark:text-red-100">
-                        <Markdown className="prose prose-sm max-w-none prose-red dark:prose-invert">
-                          {String(message.toolResult.content || '')}
-                        </Markdown>
-                        {permissionSuggestion && (
-                          <div className="mt-4 border-t border-red-200/60 dark:border-red-800/60 pt-3">
-                            <div className="flex flex-wrap items-center gap-2">
-                              <button
-                                type="button"
-                                onClick={() => {
-                                  if (!onGrantToolPermission) return;
-                                  const result = onGrantToolPermission(permissionSuggestion);
-                                  if (result?.success) {
-                                    setPermissionGrantState('granted');
-                                  } else {
-                                    setPermissionGrantState('error');
-                                  }
-                                }}
-                                disabled={permissionSuggestion.isAllowed || permissionGrantState === 'granted'}
-                                className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-medium border transition-colors ${permissionSuggestion.isAllowed || permissionGrantState === 'granted'
-                                  ? 'bg-green-100 dark:bg-green-900/30 border-green-300/70 dark:border-green-800/60 text-green-800 dark:text-green-200 cursor-default'
-                                  : 'bg-white/80 dark:bg-gray-900/40 border-red-300/70 dark:border-red-800/60 text-red-700 dark:text-red-200 hover:bg-white dark:hover:bg-gray-900/70'
-                                  }`}
-                              >
-                                {permissionSuggestion.isAllowed || permissionGrantState === 'granted'
-                                  ? t('permissions.added')
-                                  : t('permissions.grant', { tool: permissionSuggestion.toolName })}
-                              </button>
-                              {onShowSettings && (
-                                <button
-                                  type="button"
-                                  onClick={(e) => { e.stopPropagation(); onShowSettings(); }}
-                                  className="text-xs text-red-700 dark:text-red-200 underline hover:text-red-800 dark:hover:text-red-100"
-                                >
-                                  {t('permissions.openSettings')}
-                                </button>
-                              )}
-                            </div>
-                            <div className="mt-2 text-xs text-red-700/90 dark:text-red-200/80">
-                              {t('permissions.addTo', { entry: permissionSuggestion.entry })}
-                            </div>
-                            {permissionGrantState === 'error' && (
-                              <div className="mt-2 text-xs text-red-700 dark:text-red-200">
-                                {t('permissions.error')}
-                              </div>
-                            )}
-                            {(permissionSuggestion.isAllowed || permissionGrantState === 'granted') && (
-                              <div className="mt-2 text-xs text-green-700 dark:text-green-200">
-                                {t('permissions.retry')}
-                              </div>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  ) : (
-                    // Non-error results - route through ToolRenderer (single source of truth)
-                    <div id={`tool-result-${message.toolId}`} className="scroll-mt-4">
-                      <ToolRenderer
-                        toolName={message.toolName || 'UnknownTool'}
-                        toolInput={message.toolInput}
-                        toolResult={message.toolResult}
-                        toolId={message.toolId}
-                        mode="result"
-                        onFileOpen={onFileOpen}
-                        createDiff={createDiff}
-                        selectedProject={selectedProject}
-                        autoExpandTools={autoExpandTools}
-                      />
-                    </div>
-                  )
-                )}
-              </>
-            ) : message.isInteractivePrompt ? (
+          <div className="w-full rounded-2xl border border-border/55 bg-card/85 backdrop-blur-sm px-3 py-3 sm:px-4 sm:py-3.5 shadow-[0_10px_30px_rgba(15,23,42,0.07)]">
+            {message.isInteractivePrompt ? (
               // Special handling for interactive prompts
               <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
                 <div className="flex items-start gap-3">
@@ -396,88 +308,322 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
                   </div>
                 </div>
               </div>
-            ) : message.isThinking ? (
-              /* Thinking messages - collapsible by default */
-              <div className="text-sm text-gray-700 dark:text-gray-300">
-                <details className="group">
-                  <summary className="cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 font-medium flex items-center gap-2">
-                    <svg className="w-3 h-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                    </svg>
-                    <span>{t('thinking.emoji')}</span>
-                  </summary>
-                  <div className="mt-2 pl-4 border-l-2 border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 text-sm">
-                    <Markdown className="prose prose-sm max-w-none dark:prose-invert prose-gray">
-                      {message.content}
-                    </Markdown>
-                  </div>
-                </details>
-              </div>
             ) : (
-              <div className="text-sm text-gray-700 dark:text-gray-300">
-                {/* Thinking accordion for reasoning */}
-                {showThinking && message.reasoning && (
-                  <details className="mb-3">
-                    <summary className="cursor-pointer text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium">
-                      {t('thinking.emoji')}
+              <>
+                {parsedUiMessage.kind === 'thinking' && (
+                  <details className="group rounded-xl border border-[rgba(168,130,255,0.22)] dark:border-[rgba(168,130,255,0.15)] bg-[linear-gradient(135deg,rgba(168,130,255,0.10),rgba(168,130,255,0.05))] dark:bg-[linear-gradient(135deg,rgba(168,130,255,0.08),rgba(168,130,255,0.04))] p-3" open={false}>
+                    <summary className="flex cursor-pointer items-center gap-2 text-sm font-semibold text-violet-700 dark:text-violet-300 list-none">
+                      <Brain className="h-4 w-4 text-violet-700 dark:text-violet-300" />
+                      <span className={parsedUiMessage.isStreaming ? 'animate-pulse' : ''}>Thinking</span>
+                      {parsedUiMessage.isStreaming && (
+                        <span className="inline-flex gap-0.5 text-violet-700/80 dark:text-violet-300/80">
+                          <span className="animate-bounce [animation-delay:0ms]">.</span>
+                          <span className="animate-bounce [animation-delay:120ms]">.</span>
+                          <span className="animate-bounce [animation-delay:240ms]">.</span>
+                        </span>
+                      )}
                     </summary>
-                    <div className="mt-2 pl-4 border-l-2 border-gray-300 dark:border-gray-600 italic text-gray-600 dark:text-gray-400 text-sm">
-                      <div className="whitespace-pre-wrap">
-                        {message.reasoning}
-                      </div>
+                    <div className="mt-2 max-h-[260px] overflow-auto whitespace-pre-wrap font-mono text-xs leading-6 text-[#5F4B8B] dark:text-[#A198C4]">
+                      {parsedUiMessage.content}
                     </div>
                   </details>
                 )}
 
-                {(() => {
-                  const content = formatUsageLimitText(String(message.content || ''));
-
-                  // Detect if content is pure JSON (starts with { or [)
-                  const trimmedContent = content.trim();
-                  if ((trimmedContent.startsWith('{') || trimmedContent.startsWith('[')) &&
-                    (trimmedContent.endsWith('}') || trimmedContent.endsWith(']'))) {
-                    try {
-                      const parsed = JSON.parse(trimmedContent);
-                      const formatted = JSON.stringify(parsed, null, 2);
+                {parsedUiMessage.kind === 'bash' && (
+                  <details className={`group rounded-xl border p-3 bg-slate-900 dark:bg-[#0C0C0C] ${parsedUiMessage.status === 'running' ? 'border-yellow-500/40' : parsedUiMessage.status === 'error' ? 'border-red-500/40' : 'border-green-500/40'}`} open>
+                    <summary className="flex cursor-pointer items-center gap-2 list-none">
+                      {parsedUiMessage.status === 'running' ? (
+                        <Loader2 className="h-4 w-4 animate-spin text-yellow-400" />
+                      ) : (
+                        <Terminal className={`h-4 w-4 ${parsedUiMessage.status === 'error' ? 'text-red-400' : 'text-green-400'}`} />
+                      )}
+                      <span className="font-mono text-green-400">$</span>
+                      <span className="truncate text-sm text-slate-200">{parsedUiMessage.command}</span>
+                      {Number(parsedUiMessage.exitCode) > 0 && (
+                        <span className="ml-auto rounded-full border border-red-400/40 bg-red-500/20 px-2 py-0.5 text-2xs font-semibold uppercase tracking-wide text-red-300">
+                          exit {parsedUiMessage.exitCode}
+                        </span>
+                      )}
+                    </summary>
+                    {parsedUiMessage.output && (
+                      <pre className="mt-2 max-h-[240px] overflow-auto whitespace-pre-wrap break-words text-xs leading-5 text-slate-300 font-mono">
+                        {parsedUiMessage.output}
+                      </pre>
+                    )}
+                  </details>
+                )}
 
-                      return (
-                        <div className="my-2">
-                          <div className="flex items-center gap-2 mb-2 text-sm text-gray-600 dark:text-gray-400">
-                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                            </svg>
-                            <span className="font-medium">{t('json.response')}</span>
-                          </div>
-                          <div className="bg-gray-800 dark:bg-gray-900 border border-gray-600/30 dark:border-gray-700 rounded-lg overflow-hidden">
-                            <pre className="p-4 overflow-x-auto">
-                              <code className="text-gray-100 dark:text-gray-200 text-sm font-mono block whitespace-pre">
-                                {formatted}
-                              </code>
-                            </pre>
-                          </div>
+                {parsedUiMessage.kind === 'file-read' && (
+                    <details className="group rounded-xl border border-blue-300/50 dark:border-slate-500/40 bg-blue-500/5 dark:bg-[rgba(30,41,59,0.5)] p-3">
+                    <summary className="flex cursor-pointer items-center gap-2 list-none">
+                      <FileText className="h-4 w-4 text-blue-600 dark:text-blue-300" />
+                      <span className="truncate text-sm font-medium text-blue-700 dark:text-[#93C5FD]">{parsedUiMessage.filename || parsedUiMessage.path}</span>
+                      <span className="ml-auto text-2xs text-slate-500 dark:text-slate-400">{parsedUiMessage.lineCount || 0} lines</span>
+                      <span className="rounded-full bg-slate-200 dark:bg-slate-700/60 px-2 py-0.5 text-2xs font-semibold text-slate-700 dark:text-slate-300">
+                        {parsedUiMessage.language}
+                      </span>
+                    </summary>
+                    <div className="mt-2 max-h-[260px] overflow-auto rounded-lg border border-slate-300 dark:border-slate-700/60 bg-slate-100 dark:bg-slate-950/50 p-2 font-mono text-xs">
+                      {(parsedUiMessage.content || '').split('\n').map((line, lineIndex) => (
+                        <div key={`${parsedUiMessage.path}-${lineIndex}`} className="grid grid-cols-[46px_1fr] gap-3">
+                          <div className="text-right text-slate-500 dark:text-slate-500">{lineIndex + 1}</div>
+                          <div className="whitespace-pre-wrap break-words text-slate-700 dark:text-slate-300">{line}</div>
                         </div>
-                      );
-                    } catch {
-                      // Not valid JSON, fall through to normal rendering
-                    }
+                      ))}
+                    </div>
+                  </details>
+                )}
+
+                {parsedUiMessage.kind === 'code-diff' && (() => {
+                  let oldText = '';
+                  let newText = '';
+                  try {
+                    const payload = JSON.parse(parsedUiMessage.content || '{}');
+                    oldText = String(payload.oldContent || '');
+                    newText = String(payload.newContent || '');
+                  } catch {
+                    oldText = '';
+                    newText = '';
                   }
+                  const diffLines = createDiff(oldText, newText);
+                  const additions = diffLines.filter((line) => line.type === 'added').length;
+                  const deletions = diffLines.filter((line) => line.type === 'removed').length;
 
-                  // Normal rendering for non-JSON content
-                  return message.type === 'assistant' ? (
-                    <Markdown className="prose prose-sm max-w-none dark:prose-invert prose-gray">
-                      {content}
-                    </Markdown>
-                  ) : (
-                    <div className="whitespace-pre-wrap">
-                      {content}
-                    </div>
+                  return (
+                    <details className="group rounded-xl border border-slate-300 dark:border-slate-600/50 bg-slate-100/80 dark:bg-[rgba(15,23,42,0.7)] p-3" open>
+                      <summary className="flex cursor-pointer items-center gap-2 list-none">
+                        <FileCode2 className="h-4 w-4 text-amber-700 dark:text-amber-300" />
+                        <span className="truncate text-sm font-semibold text-amber-700 dark:text-amber-300">{parsedUiMessage.filename || parsedUiMessage.path}</span>
+                        <span className="ml-auto inline-flex items-center gap-1 text-xs font-semibold">
+                          <span className="text-emerald-700 dark:text-emerald-300">+{additions}</span>
+                          <span className="text-rose-700 dark:text-rose-300">-{deletions}</span>
+                        </span>
+                      </summary>
+                      <div className="mt-2 max-h-[320px] overflow-auto rounded-lg border border-slate-300 dark:border-slate-700/60 bg-white/90 dark:bg-slate-950/40">
+                        <div className="px-3 py-1.5 text-2xs font-mono text-blue-700 dark:text-blue-300 bg-blue-500/10 border-b border-blue-500/20">
+                          @@ diff @@
+                        </div>
+                        {diffLines.map((line, diffIndex) => (
+                          <div
+                            key={`${parsedUiMessage.path}-diff-${diffIndex}`}
+                            className={`grid grid-cols-[18px_1fr] gap-2 px-3 py-0.5 font-mono text-xs ${
+                              line.type === 'added'
+                                ? 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
+                                : line.type === 'removed'
+                                  ? 'bg-rose-500/10 text-rose-700 dark:text-rose-300'
+                                  : 'text-slate-700 dark:text-slate-300'
+                            }`}
+                          >
+                            <span>{line.type === 'added' ? '+' : line.type === 'removed' ? '-' : ' '}</span>
+                            <span className="whitespace-pre-wrap break-words">{line.content}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </details>
                   );
                 })()}
-              </div>
+
+                {parsedUiMessage.kind === 'file-write' && (
+                  <div className="flex items-center gap-2 rounded-xl border border-emerald-500/30 bg-emerald-500/8 dark:bg-emerald-500/5 px-3 py-2">
+                    <Download className="h-4 w-4 text-emerald-700 dark:text-emerald-300" />
+                    <span className="text-sm font-medium text-emerald-700 dark:text-emerald-300">Wrote</span>
+                    <span className="min-w-0 break-all text-sm text-blue-700 dark:text-[#93C5FD]">{parsedUiMessage.path}</span>
+                    <span className="ml-auto inline-flex items-center gap-1 rounded-full border border-emerald-500/30 dark:border-emerald-400/40 bg-emerald-500/15 dark:bg-emerald-500/20 px-2 py-0.5 text-2xs font-semibold text-emerald-700 dark:text-emerald-300">
+                      <Check className="h-3 w-3" />
+                      {parsedUiMessage.status === 'created' ? 'created' : 'saved'}
+                    </span>
+                  </div>
+                )}
+
+                {parsedUiMessage.kind === 'web-search' && (
+                  <details className="group rounded-xl border border-blue-500/30 bg-blue-500/8 dark:bg-blue-500/5 p-3">
+                    <summary className="flex cursor-pointer items-center gap-2 list-none">
+                      {parsedUiMessage.status === 'running' ? (
+                        <Loader2 className="h-4 w-4 animate-spin text-blue-600 dark:text-blue-300" />
+                      ) : (
+                        <Globe className="h-4 w-4 text-blue-600 dark:text-blue-300" />
+                      )}
+                      <span className="text-sm font-semibold text-blue-700 dark:text-blue-300">Search:</span>
+                      <span className="truncate text-sm italic text-slate-700 dark:text-slate-300">"{parsedUiMessage.query}"</span>
+                      <span className="ml-auto text-2xs text-slate-500 dark:text-slate-400">{parsedUiMessage.resultCount || 0} results</span>
+                    </summary>
+                    <div className="mt-2 space-y-2">
+                      {(parsedUiMessage.searchResults || []).map((result, resultIndex) => (
+                        <div key={`${result.url || result.title}-${resultIndex}`} className="rounded-lg border border-blue-300/50 dark:border-blue-500/20 px-3 py-2">
+                          <div className="text-sm font-semibold text-blue-700 dark:text-blue-300">{result.title}</div>
+                          {result.url && <div className="text-xs text-slate-500 dark:text-slate-400 break-all">{result.url}</div>}
+                          {result.snippet && <div className="mt-1 text-xs leading-5 text-slate-700 dark:text-slate-300">{result.snippet}</div>}
+                        </div>
+                      ))}
+                    </div>
+                  </details>
+                )}
+
+                {parsedUiMessage.kind === 'file-tree' && (
+                  <details className="group rounded-xl border border-slate-300 dark:border-slate-600/50 bg-slate-100/70 dark:bg-slate-500/5 p-3">
+                    <summary className="flex cursor-pointer items-center gap-2 list-none">
+                      <Folder className="h-4 w-4 text-amber-600 dark:text-amber-300" />
+                      <span className="truncate text-sm font-medium text-amber-700 dark:text-[#FCD34D]">{parsedUiMessage.path || 'Directory'}</span>
+                      <span className="ml-auto text-2xs text-slate-500 dark:text-slate-400">{parsedUiMessage.treeItems?.length || 0} items</span>
+                    </summary>
+                    <div className="mt-2 space-y-1">
+                      {(parsedUiMessage.treeItems || []).map((item, itemIndex) => (
+                        <div key={`${item.name}-${itemIndex}`} className="flex items-center gap-2 text-xs">
+                          {item.type === 'folder' ? (
+                            <Folder className="h-3.5 w-3.5 text-amber-600 dark:text-amber-300" />
+                          ) : (
+                            <FileText className="h-3.5 w-3.5 text-blue-600 dark:text-blue-300" />
+                          )}
+                          <span className="truncate text-slate-700 dark:text-slate-300">{item.name}</span>
+                          {item.size && <span className="ml-auto text-slate-500 dark:text-slate-500">{item.size}</span>}
+                        </div>
+                      ))}
+                    </div>
+                  </details>
+                )}
+
+                {parsedUiMessage.kind === 'error-warning' && (
+                  <div className="rounded-xl border border-[rgba(248,113,113,0.28)] dark:border-[rgba(248,113,113,0.2)] bg-red-500/10 p-3">
+                    <div className="flex items-center gap-2 text-red-700 dark:text-red-300">
+                      <AlertTriangle className="h-4 w-4" />
+                      <span className="text-sm font-semibold">Error</span>
+                    </div>
+                    <div className="mt-1 text-sm leading-6 text-red-700 dark:text-[#FCA5A5] whitespace-pre-wrap">{parsedUiMessage.content}</div>
+                    {parsedUiMessage.details && (
+                      <div className="mt-2 text-xs leading-5 text-slate-600 dark:text-slate-400 whitespace-pre-wrap">{parsedUiMessage.details}</div>
+                    )}
+                    {onGrantToolPermission && permissionSuggestion && parsedUiMessage.permissionRequest && (
+                      <div className="mt-3 flex items-center gap-2">
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const result = onGrantToolPermission(permissionSuggestion);
+                            if (result?.success) {
+                              setPermissionGrantState('granted');
+                            } else {
+                              setPermissionGrantState('error');
+                            }
+                          }}
+                          disabled={permissionSuggestion.isAllowed || permissionGrantState === 'granted'}
+                          className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors ${
+                            permissionSuggestion.isAllowed || permissionGrantState === 'granted'
+                              ? 'border-emerald-500/40 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300'
+                              : 'border-red-400/40 bg-red-500/10 text-red-700 dark:text-red-200 hover:bg-red-500/20'
+                          }`}
+                        >
+                          {permissionSuggestion.isAllowed || permissionGrantState === 'granted' ? 'Permission added' : `Allow ${permissionSuggestion.toolName}`}
+                        </button>
+                        {permissionGrantState === 'error' && (
+                          <span className="text-xs text-red-800 dark:text-red-300">Could not update permission rule</span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {parsedUiMessage.kind === 'tool-invocation' && (
+                  <details className="group rounded-xl border border-violet-500/30 bg-violet-500/8 dark:bg-violet-500/5 p-3">
+                    <summary className="flex cursor-pointer items-center gap-2 list-none">
+                      {parsedUiMessage.status === 'running' ? (
+                        <Loader2 className="h-4 w-4 animate-spin text-violet-700 dark:text-violet-300" />
+                      ) : (
+                        <Wrench className="h-4 w-4 text-violet-700 dark:text-violet-300" />
+                      )}
+                      <span className="text-sm text-violet-700 dark:text-[#C4B5FD] font-medium">{parsedUiMessage.toolName}</span>
+                    </summary>
+                    <pre className="mt-2 max-h-[260px] overflow-auto whitespace-pre-wrap break-words text-xs leading-5 text-slate-700 dark:text-slate-300 font-mono">
+                      {parsedUiMessage.toolInputRaw}
+                    </pre>
+                    {parsedUiMessage.content && (
+                      <pre className="mt-2 max-h-[280px] overflow-auto whitespace-pre-wrap break-words rounded-lg border border-violet-400/20 dark:border-violet-300/20 bg-violet-500/10 dark:bg-violet-500/5 p-2 text-xs leading-5 text-slate-700 dark:text-slate-200 font-mono">
+                        {parsedUiMessage.content}
+                      </pre>
+                    )}
+                  </details>
+                )}
+
+                {parsedUiMessage.kind === 'image-generation' && (
+                  <div className="rounded-xl border border-pink-500/30 bg-pink-500/8 dark:bg-pink-500/5 p-3">
+                    <div className="flex items-center gap-2">
+                      {parsedUiMessage.status === 'generating' ? (
+                        <Loader2 className="h-4 w-4 animate-spin text-pink-700 dark:text-pink-300" />
+                      ) : (
+                        <ImageIcon className="h-4 w-4 text-pink-700 dark:text-pink-300" />
+                      )}
+                      <span className="text-sm font-semibold text-pink-700 dark:text-[#F9A8D4]">Image Generation</span>
+                      <span className={`ml-auto rounded-full px-2 py-0.5 text-2xs font-semibold ${parsedUiMessage.status === 'generating' ? 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-300' : 'bg-emerald-500/20 text-emerald-700 dark:text-emerald-300'}`}>
+                        {parsedUiMessage.status === 'generating' ? 'Generating...' : 'Complete'}
+                      </span>
+                    </div>
+                    {parsedUiMessage.status === 'done' && (
+                      <div className="mt-2">
+                        {(() => {
+                          const outputs = parsedUiMessage.outputs || [];
+                          const imageUrls = outputs.filter((value) => /^(https?:\/\/|data:image\/)/i.test(value));
+                          if (imageUrls.length > 0) {
+                            return (
+                              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                                {imageUrls.map((imageUrl, imageIndex) => (
+                                  <img
+                                    key={`${imageUrl}-${imageIndex}`}
+                                    src={imageUrl}
+                                    alt={`Generated ${imageIndex + 1}`}
+                                    className="w-full h-auto rounded-lg border border-pink-400/20 dark:border-pink-300/20"
+                                  />
+                                ))}
+                              </div>
+                            );
+                          }
+
+                          const textOutput = outputs.find((value) => value.trim().length > 0) || String(parsedUiMessage.content || '');
+                          if (textOutput.trim()) {
+                            return (
+                              <pre className="max-h-[240px] overflow-auto whitespace-pre-wrap break-words rounded-lg border border-pink-400/20 dark:border-pink-300/20 bg-white/50 dark:bg-slate-900/40 p-2 text-xs leading-5 text-slate-700 dark:text-slate-200">
+                                {textOutput}
+                              </pre>
+                            );
+                          }
+
+                          return (
+                            <div className="h-20 rounded-lg border border-dashed border-pink-400/30 dark:border-pink-300/30 flex items-center justify-center text-xs text-slate-600 dark:text-slate-300">
+                              No generated output available
+                            </div>
+                          );
+                        })()}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {parsedUiMessage.kind === 'summary-completion' && (
+                  <div className="rounded-xl border border-[rgba(52,211,153,0.24)] dark:border-[rgba(52,211,153,0.12)] bg-emerald-500/8 dark:bg-emerald-500/5 p-3">
+                    <div className="flex items-center gap-2 text-emerald-700 dark:text-emerald-300">
+                      <CheckCircle2 className="h-4 w-4" />
+                      <span className="text-sm font-semibold">{parsedUiMessage.title || 'Complete'}</span>
+                    </div>
+                    <div className="mt-2 space-y-1 text-xs font-mono text-slate-700 dark:text-slate-300">
+                      {(parsedUiMessage.listItems || []).map((item, itemIndex) => (
+                        <div key={`${item}-${itemIndex}`}>• {item}</div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {parsedUiMessage.kind === 'streaming-prose' && (
+                  <div className="text-sm leading-[1.75] text-slate-700 dark:text-slate-200 [font-family:'Source_Serif_4','ui-serif',Georgia,serif]">
+                    <Markdown className="prose prose-sm max-w-none dark:prose-invert prose-slate dark:prose-invert prose-headings:text-slate-800 dark:prose-headings:text-slate-100 prose-p:text-slate-700 dark:prose-p:text-slate-200 prose-strong:text-slate-900 dark:prose-strong:text-slate-100 prose-code:text-sky-700 dark:prose-code:text-sky-300 prose-pre:bg-slate-100 dark:prose-pre:bg-slate-900 prose-pre:border prose-pre:border-slate-300 dark:prose-pre:border-slate-700 prose-a:text-blue-700 dark:prose-a:text-blue-300">
+                      {formatUsageLimitText(String(parsedUiMessage.content || ''))}
+                    </Markdown>
+                    {parsedUiMessage.isStreaming && (
+                      <span className="inline-block ml-1 align-middle h-[18px] w-[2px] bg-[#60A5FA] animate-pulse" />
+                    )}
+                  </div>
+                )}
+              </>
             )}
 
             {!isGrouped && (
-              <div className="text-[11px] text-gray-400 dark:text-gray-500 mt-1">
+              <div className="text-2xs text-gray-400 dark:text-gray-500 mt-1">
                 {formattedTime}
               </div>
             )}
@@ -489,4 +635,3 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
 });
 
 export default MessageComponent;
-