refactor: 移除多余依赖，统一 MUI 为唯一 UI 库

- 移除 radix-ui、clsx、tailwind-merge、class-variance-authority、react-router-dom

- 前后端全面适配 MUI 组件，清理残留 Tailwind 工具类引用

- 优化 Agent Loop 引擎、IPC 处理器、Provider Adapter 等后端模块

- 新增 Agent 网络工具通用设计文档 v2

src/components/chat/MessageItem.tsx

@@ -4,19 +4,21 @@
  * 根据消息 role 路由到对应的子组件渲染。
  */
 
+import { Box, Typography, Stack } from '@mui/material';
+import { Terminal } from 'lucide-react';
 import type { ChatMessage } from '@renderer/stores/agent-store';
 import { UserMessage } from './UserMessage';
 import { AssistantMessage } from './AssistantMessage';
 import { SystemMessage } from './SystemMessage';
+import { formatTime } from '@renderer/lib/formatters';
 
 interface MessageItemProps {
   message: ChatMessage;
   isLast?: boolean;
   isStreaming?: boolean;
-  streamContent?: string;
 }
 
-export function MessageItem({ message, isLast, isStreaming, streamContent }: MessageItemProps): React.JSX.Element {
+export function MessageItem({ message, isLast, isStreaming }: MessageItemProps): React.JSX.Element {
   switch (message.role) {
     case 'user':
       return <UserMessage message={message} />;
@@ -26,16 +28,63 @@ export function MessageItem({ message, isLast, isStreaming, streamContent }: Mes
         <AssistantMessage
           message={message}
           isStreaming={isLast && isStreaming}
-          streamContent={streamContent}
         />
       );
 
     case 'tool':
-      // 工具消息渲染为系统消息样式
-      return <SystemMessage message={message} />;
+      // 工具消息渲染为独立的结果块
+      return <ToolMessage message={message} />;
 
     case 'system':
     default:
       return <SystemMessage message={message} />;
   }
 }
+
+/** ToolMessage — 独立的工具结果消息（role=tool） */
+function ToolMessage({ message }: { message: ChatMessage }): React.JSX.Element {
+  return (
+    <Box
+      sx={{
+        borderRadius: 1.5,
+        border: '1px solid',
+        borderColor: 'divider',
+        borderLeft: '3px solid',
+        borderLeftColor: '#22d3ee',
+        bgcolor: 'secondary.main',
+        px: 1.5,
+        py: 1,
+        mb: 2,
+        animation: 'fadeInUp 300ms ease-out',
+      }}
+    >
+      <Stack direction="row" spacing={1} sx={{ mb: 0.5, alignItems: 'center' }}>
+        <Terminal size={12} style={{ color: '#22d3ee' }} />
+        <Typography variant="caption" sx={{ fontWeight: 500, color: 'text.primary' }}>
+          工具输出
+        </Typography>
+        <Typography variant="caption" sx={{ ml: 'auto', color: 'text.disabled' }}>
+          {formatTime(message.timestamp)}
+        </Typography>
+      </Stack>
+      <Box
+        component="pre"
+        sx={{
+          fontSize: 11,
+          borderRadius: 1,
+          px: 1,
+          py: 0.75,
+          overflowX: 'auto',
+          bgcolor: 'background.default',
+          color: 'text.secondary',
+          fontFamily: "'SF Mono',monospace",
+          maxHeight: 120,
+          m: 0,
+          whiteSpace: 'pre-wrap',
+        }}
+      >
+        {message.content.length > 500 ? message.content.slice(0, 500) + '\n... [截断]' : message.content}
+      </Box>
+    </Box>
+  );
+}