diff --git a/package.json b/package.json
index 6a33b14d..9a97eb5a 100755
--- a/package.json
+++ b/package.json
@@ -18,8 +18,6 @@
     "@fullcalendar/daygrid": "^6.1.19",
     "@fullcalendar/interaction": "^6.1.19",
     "@fullcalendar/react": "^6.1.19",
-    "@heroui/react": "^3.0.0-beta.2",
-    "@heroui/styles": "^3.0.0-beta.2",
     "@reduxjs/toolkit": "^2.9.2",
     "@splidejs/react-splide": "^0.7.12",
     "@tanstack/react-virtual": "^3.13.12",
@@ -112,7 +110,6 @@
   },
   "devDependencies": {
     "@craco/craco": "^7.1.0",
-    "@tailwindcss/postcss": "next",
     "@types/node": "^20.19.25",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
@@ -133,7 +130,6 @@
     "prettier": "2.2.1",
     "react-error-overlay": "6.0.9",
     "sharp": "^0.34.4",
-    "tailwindcss": "next",
     "ts-node": "^10.9.2",
     "webpack-bundle-analyzer": "^4.10.2",
     "yn": "^5.1.0"
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index fa7d5e7d..00000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// PostCSS 配置 - Tailwind CSS v4
-module.exports = {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-}
diff --git a/src/index.js b/src/index.js
index 5c4d0027..0c8db5ae 100755
--- a/src/index.js
+++ b/src/index.js
@@ -3,9 +3,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 
-// 导入 HeroUI v3 样式（必须在最前面导入，包含 Tailwind CSS）
-import './styles/heroui.css';
-
 // 导入 Brainwave 样式（空文件，保留以避免错误）
 import './styles/brainwave.css';
 
diff --git a/src/styles/heroui.css b/src/styles/heroui.css
deleted file mode 100644
index b9acd7df..00000000
--- a/src/styles/heroui.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * HeroUI v3 + Tailwind CSS v4 配置
- * 参考文档: https://v3.heroui.com/docs/quick-start
- *
- * 重要：HeroUI v3 beta 需要 Tailwind v4
- * 导入顺序：先 tailwindcss，后 @heroui/styles
- */
-
-@import "tailwindcss";
-@import "@heroui/styles";
diff --git a/src/views/AgentChat/index.js b/src/views/AgentChat/index.js
index 468c504c..c79e70c6 100644
--- a/src/views/AgentChat/index.js
+++ b/src/views/AgentChat/index.js
@@ -1,30 +1,43 @@
 // src/views/AgentChat/index.js
-// 超炫酷的 AI 投研助手 - Hero UI 深色模式版本
+// 超炫酷的 AI 投研助手 - Chakra UI 深色模式版本
 // 使用 Framer Motion 物理动画引擎
 
 import React, { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
+  Box,
   Button,
-  Card,
   Input,
   Avatar,
-  Chip,
-  Separator,
+  Badge,
+  Divider,
   Spinner,
   Tooltip,
   Checkbox,
   CheckboxGroup,
   Kbd,
   Accordion,
-} from '@heroui/react';
-import {
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
   Tabs,
   TabList,
   TabPanels,
   Tab,
   TabPanel,
-  useToast
+  useToast,
+  VStack,
+  HStack,
+  Text,
+  Flex,
+  IconButton,
+  useColorMode,
+  Card,
+  CardBody,
+  Tag,
+  TagLabel,
+  TagCloseButton,
 } from '@chakra-ui/react';
 import { useAuth } from '@contexts/AuthContext';
 import { logger } from '@utils/logger';
@@ -165,23 +178,23 @@ const AVAILABLE_MODELS = [
   {
     id: 'kimi-k2-thinking',
     name: 'Kimi K2 Thinking',
-    description: '深度思考模型，适合复杂分析',
+    description: '深度思考模型,适合复杂分析',
     icon: <Brain className="w-5 h-5" />,
-    color: 'secondary',
+    color: 'purple',
   },
   {
     id: 'kimi-k2',
     name: 'Kimi K2',
-    description: '快速响应模型，适合简单查询',
+    description: '快速响应模型,适合简单查询',
     icon: <Zap className="w-5 h-5" />,
-    color: 'primary',
+    color: 'blue',
   },
   {
     id: 'deepmoney',
     name: 'DeepMoney',
     description: '金融专业模型',
     icon: <TrendingUp className="w-5 h-5" />,
-    color: 'success',
+    color: 'green',
   },
 ];
 
@@ -195,7 +208,7 @@ const MCP_TOOLS = [
     name: '全球新闻搜索',
     icon: <Globe className="w-4 h-4" />,
     category: '新闻资讯',
-    description: '搜索全球新闻，支持关键词和日期过滤'
+    description: '搜索全球新闻,支持关键词和日期过滤'
   },
   {
     id: 'search_china_news',
@@ -248,7 +261,7 @@ const MCP_TOOLS = [
     name: '涨停股票搜索',
     icon: <TrendingUp className="w-4 h-4" />,
     category: '涨停分析',
-    description: '搜索涨停股票，支持多条件筛选'
+    description: '搜索涨停股票,支持多条件筛选'
   },
   {
     id: 'get_daily_stock_analysis',
@@ -264,7 +277,7 @@ const MCP_TOOLS = [
     name: '研报搜索',
     icon: <BookOpen className="w-4 h-4" />,
     category: '研报路演',
-    description: '搜索研究报告，支持语义搜索'
+    description: '搜索研究报告,支持语义搜索'
   },
   {
     id: 'search_roadshows',
@@ -353,11 +366,12 @@ const TOOL_CATEGORIES = {
 };
 
 /**
- * Hero Agent Chat - 主组件（深色模式）
+ * Agent Chat - 主组件（深色模式）
  */
 const AgentChat = () => {
   const { user } = useAuth();
   const toast = useToast();
+  const { setColorMode } = useColorMode();
 
   // 会话管理
   const [sessions, setSessions] = useState([]);
@@ -393,13 +407,14 @@ const AgentChat = () => {
   // ==================== 启用深色模式 ====================
   useEffect(() => {
     // 为 AgentChat 页面强制启用深色模式
+    setColorMode('dark');
     document.documentElement.classList.add('dark');
 
     return () => {
-      // 组件卸载时不移除，让其他页面自己控制
+      // 组件卸载时不移除,让其他页面自己控制
       // document.documentElement.classList.remove('dark');
     };
-  }, []);
+  }, [setColorMode]);
 
   // ==================== API 调用函数 ====================
 
@@ -449,7 +464,7 @@ const AgentChat = () => {
       {
         id: Date.now(),
         type: MessageTypes.AGENT_RESPONSE,
-        content: `你好${user?.nickname || ''}！👋\n\n我是**价小前**，你的 AI 投研助手。\n\n**我能做什么？**\n• 📊 全面分析股票基本面和技术面\n• 🔥 追踪市场热点和涨停板块\n• 📈 研究行业趋势和投资机会\n• 📰 汇总最新财经新闻和研报\n\n直接输入你的问题开始探索！`,
+        content: `你好${user?.nickname || ''}！👋\n\n我是**价小前**,你的 AI 投研助手。\n\n**我能做什么？**\n• 📊 全面分析股票基本面和技术面\n• 🔥 追踪市场热点和涨停板块\n• 📈 研究行业趋势和投资机会\n• 📰 汇总最新财经新闻和研报\n\n直接输入你的问题开始探索！`,
         timestamp: new Date().toISOString(),
       },
     ]);
@@ -659,176 +674,200 @@ const AgentChat = () => {
   ];
 
   return (
-    <div className="flex h-[calc(100vh-80px)] bg-gradient-to-br from-gray-900 via-slate-900 to-gray-900 overflow-hidden">
+    <Flex h="calc(100vh - 80px)" overflow="hidden" bgGradient="linear(to-br, gray.900, gray.800, gray.900)">
       {/* 左侧栏 - 深色毛玻璃 */}
-      {isLeftSidebarOpen && (
-        <motion.div
-          className="w-80 flex flex-col bg-gray-900/95 backdrop-blur-xl border-r border-gray-800 shadow-2xl"
-          initial="initial"
-          animate="animate"
-          exit="exit"
-          variants={animations.slideInLeft}
-        >
-          <div className="p-4 border-b border-gray-800">
-            <div className="flex items-center justify-between mb-3">
-              <div className="flex items-center gap-2">
-                <MessageSquare className="w-5 h-5 text-blue-400" />
-                <span className="font-semibold text-gray-100">对话历史</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <Tooltip content="新建对话">
-                  <Button
-                    isIconOnly
+      <AnimatePresence>
+        {isLeftSidebarOpen && (
+          <motion.div
+            style={{ width: '320px', display: 'flex', flexDirection: 'column' }}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            variants={animations.slideInLeft}
+          >
+            <Box
+              w="320px"
+              display="flex"
+              flexDirection="column"
+              bg="rgba(17, 24, 39, 0.95)"
+              backdropFilter="blur(20px)"
+              borderRight="1px solid"
+              borderColor="gray.700"
+              boxShadow="2xl"
+            >
+              <Box p={4} borderBottom="1px solid" borderColor="gray.700">
+                <HStack justify="space-between" mb={3}>
+                  <HStack spacing={2}>
+                    <MessageSquare className="w-5 h-5" color="#60A5FA" />
+                    <Text fontWeight="semibold" color="gray.100">对话历史</Text>
+                  </HStack>
+                  <HStack spacing={2}>
+                    <Tooltip label="新建对话">
+                      <IconButton
+                        size="sm"
+                        variant="ghost"
+                        colorScheme="blue"
+                        icon={<Plus className="w-4 h-4" />}
+                        onClick={createNewSession}
+                      />
+                    </Tooltip>
+                    <Tooltip label="收起侧边栏">
+                      <IconButton
+                        size="sm"
+                        variant="ghost"
+                        icon={<ChevronLeft className="w-4 h-4" />}
+                        onClick={() => setIsLeftSidebarOpen(false)}
+                      />
+                    </Tooltip>
+                  </HStack>
+                </HStack>
+
+                <Box position="relative">
+                  <Box position="absolute" left={3} top="50%" transform="translateY(-50%)">
+                    <Search className="w-4 h-4" color="#9CA3AF" />
+                  </Box>
+                  <Input
+                    placeholder="搜索对话..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
                     size="sm"
-                    variant="flat"
-                    color="primary"
-                    onPress={createNewSession}
-                  >
-                    <Plus className="w-4 h-4" />
-                  </Button>
-                </Tooltip>
-                <Tooltip content="收起侧边栏">
-                  <Button
-                    isIconOnly
+                    variant="outline"
+                    pl={10}
+                    borderColor="gray.600"
+                    bg="rgba(31, 41, 55, 0.5)"
+                    color="gray.100"
+                    _hover={{ borderColor: 'gray.500' }}
+                    _focus={{ borderColor: 'blue.500', boxShadow: '0 0 0 1px var(--chakra-colors-blue-500)' }}
+                  />
+                </Box>
+              </Box>
+
+              <Box flex={1} p={3} overflowY="auto">
+                {/* 按日期分组显示会话 */}
+                {sessionGroups.today.length > 0 && (
+                  <Box mb={4}>
+                    <Text fontSize="xs" fontWeight="semibold" color="gray.400" mb={2} px={2}>今天</Text>
+                    <VStack spacing={2} align="stretch">
+                      {sessionGroups.today.map((session) => (
+                        <SessionCard
+                          key={session.session_id}
+                          session={session}
+                          isActive={currentSessionId === session.session_id}
+                          onPress={() => switchSession(session.session_id)}
+                        />
+                      ))}
+                    </VStack>
+                  </Box>
+                )}
+
+                {sessionGroups.yesterday.length > 0 && (
+                  <Box mb={4}>
+                    <Text fontSize="xs" fontWeight="semibold" color="gray.400" mb={2} px={2}>昨天</Text>
+                    <VStack spacing={2} align="stretch">
+                      {sessionGroups.yesterday.map((session) => (
+                        <SessionCard
+                          key={session.session_id}
+                          session={session}
+                          isActive={currentSessionId === session.session_id}
+                          onPress={() => switchSession(session.session_id)}
+                        />
+                      ))}
+                    </VStack>
+                  </Box>
+                )}
+
+                {sessionGroups.thisWeek.length > 0 && (
+                  <Box mb={4}>
+                    <Text fontSize="xs" fontWeight="semibold" color="gray.400" mb={2} px={2}>本周</Text>
+                    <VStack spacing={2} align="stretch">
+                      {sessionGroups.thisWeek.map((session) => (
+                        <SessionCard
+                          key={session.session_id}
+                          session={session}
+                          isActive={currentSessionId === session.session_id}
+                          onPress={() => switchSession(session.session_id)}
+                        />
+                      ))}
+                    </VStack>
+                  </Box>
+                )}
+
+                {sessionGroups.older.length > 0 && (
+                  <Box mb={4}>
+                    <Text fontSize="xs" fontWeight="semibold" color="gray.400" mb={2} px={2}>更早</Text>
+                    <VStack spacing={2} align="stretch">
+                      {sessionGroups.older.map((session) => (
+                        <SessionCard
+                          key={session.session_id}
+                          session={session}
+                          isActive={currentSessionId === session.session_id}
+                          onPress={() => switchSession(session.session_id)}
+                        />
+                      ))}
+                    </VStack>
+                  </Box>
+                )}
+
+                {isLoadingSessions && (
+                  <Flex justify="center" p={4}>
+                    <Spinner size="sm" color="blue.500" />
+                  </Flex>
+                )}
+
+                {sessions.length === 0 && !isLoadingSessions && (
+                  <VStack textAlign="center" py={8} color="gray.500" fontSize="sm" spacing={2}>
+                    <MessageSquare className="w-8 h-8" style={{ opacity: 0.5, margin: '0 auto' }} />
+                    <Text>还没有对话历史</Text>
+                    <Text fontSize="xs">开始一个新对话吧！</Text>
+                  </VStack>
+                )}
+              </Box>
+
+              <Box p={4} borderTop="1px solid" borderColor="gray.700">
+                <HStack spacing={3}>
+                  <Avatar
+                    src={user?.avatar}
+                    name={user?.nickname}
                     size="sm"
-                    variant="light"
-                    onPress={() => setIsLeftSidebarOpen(false)}
-                  >
-                    <ChevronLeft className="w-4 h-4" />
-                  </Button>
-                </Tooltip>
-              </div>
-            </div>
-
-            <Input
-              placeholder="搜索对话..."
-              value={searchQuery}
-              onValueChange={setSearchQuery}
-              startContent={<Search className="w-4 h-4 text-gray-500" />}
-              size="sm"
-              variant="bordered"
-              classNames={{
-                input: 'text-sm text-gray-100',
-                inputWrapper: 'border-gray-700 bg-gray-800/50 hover:border-gray-600',
-              }}
-            />
-          </div>
-
-          <div className="flex-1 p-3 overflow-y-auto">
-            {/* 按日期分组显示会话 */}
-            {sessionGroups.today.length > 0 && (
-              <div className="mb-4">
-                <p className="text-xs font-semibold text-gray-400 mb-2 px-2">今天</p>
-                <div className="space-y-2">
-                  {sessionGroups.today.map((session) => (
-                    <SessionCard
-                      key={session.session_id}
-                      session={session}
-                      isActive={currentSessionId === session.session_id}
-                      onPress={() => switchSession(session.session_id)}
-                    />
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {sessionGroups.yesterday.length > 0 && (
-              <div className="mb-4">
-                <p className="text-xs font-semibold text-gray-400 mb-2 px-2">昨天</p>
-                <div className="space-y-2">
-                  {sessionGroups.yesterday.map((session) => (
-                    <SessionCard
-                      key={session.session_id}
-                      session={session}
-                      isActive={currentSessionId === session.session_id}
-                      onPress={() => switchSession(session.session_id)}
-                    />
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {sessionGroups.thisWeek.length > 0 && (
-              <div className="mb-4">
-                <p className="text-xs font-semibold text-gray-400 mb-2 px-2">本周</p>
-                <div className="space-y-2">
-                  {sessionGroups.thisWeek.map((session) => (
-                    <SessionCard
-                      key={session.session_id}
-                      session={session}
-                      isActive={currentSessionId === session.session_id}
-                      onPress={() => switchSession(session.session_id)}
-                    />
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {sessionGroups.older.length > 0 && (
-              <div className="mb-4">
-                <p className="text-xs font-semibold text-gray-400 mb-2 px-2">更早</p>
-                <div className="space-y-2">
-                  {sessionGroups.older.map((session) => (
-                    <SessionCard
-                      key={session.session_id}
-                      session={session}
-                      isActive={currentSessionId === session.session_id}
-                      onPress={() => switchSession(session.session_id)}
-                    />
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {isLoadingSessions && (
-              <div className="flex justify-center p-4">
-                <Spinner size="sm" color="primary" />
-              </div>
-            )}
-
-            {sessions.length === 0 && !isLoadingSessions && (
-              <div className="text-center py-8 text-gray-500 text-sm">
-                <MessageSquare className="w-8 h-8 mx-auto mb-2 opacity-50" />
-                <p>还没有对话历史</p>
-                <p className="text-xs mt-1">开始一个新对话吧！</p>
-              </div>
-            )}
-          </div>
-
-          <div className="p-4 border-t border-gray-800">
-            <div className="flex items-center gap-3">
-              <Avatar
-                src={user?.avatar}
-                name={user?.nickname}
-                size="sm"
-                classNames={{
-                  base: 'bg-gradient-to-br from-blue-500 to-purple-600',
-                }}
-              />
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium truncate text-gray-100">{user?.nickname || '未登录'}</p>
-                <p className="text-xs text-gray-500 truncate">{user?.subscription_type || 'free'} 用户</p>
-              </div>
-            </div>
-          </div>
-        </motion.div>
-      )}
+                    bgGradient="linear(to-br, blue.500, purple.600)"
+                  />
+                  <Box flex={1} minW={0}>
+                    <Text fontSize="sm" fontWeight="medium" color="gray.100" noOfLines={1}>
+                      {user?.nickname || '未登录'}
+                    </Text>
+                    <Text fontSize="xs" color="gray.500" noOfLines={1}>
+                      {user?.subscription_type || 'free'} 用户
+                    </Text>
+                  </Box>
+                </HStack>
+              </Box>
+            </Box>
+          </motion.div>
+        )}
+      </AnimatePresence>
 
       {/* 中间主聊天区域 */}
-      <div className="flex-1 flex flex-col">
+      <Flex flex={1} direction="column">
         {/* 顶部标题栏 - 深色 */}
-        <div className="bg-gray-900/95 backdrop-blur-xl border-b border-gray-800 px-6 py-4 shadow-lg">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4">
+        <Box
+          bg="rgba(17, 24, 39, 0.95)"
+          backdropFilter="blur(20px)"
+          borderBottom="1px solid"
+          borderColor="gray.700"
+          px={6}
+          py={4}
+          boxShadow="lg"
+        >
+          <Flex align="center" justify="space-between">
+            <HStack spacing={4}>
               {!isLeftSidebarOpen && (
-                <Button
-                  isIconOnly
+                <IconButton
                   size="sm"
-                  variant="light"
-                  onPress={() => setIsLeftSidebarOpen(true)}
-                >
-                  <Menu className="w-4 h-4 text-gray-400" />
-                </Button>
+                  variant="ghost"
+                  icon={<Menu className="w-4 h-4" />}
+                  onClick={() => setIsLeftSidebarOpen(true)}
+                  color="gray.400"
+                />
               )}
 
               <motion.div
@@ -837,474 +876,513 @@ const AgentChat = () => {
               >
                 <Avatar
                   icon={<Cpu className="w-6 h-6" />}
-                  classNames={{
-                    base: 'bg-gradient-to-br from-purple-500 to-pink-500',
-                  }}
+                  bgGradient="linear(to-br, purple.500, pink.500)"
                 />
               </motion.div>
 
-              <div>
-                <h1 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+              <Box>
+                <Text
+                  fontSize="xl"
+                  fontWeight="bold"
+                  bgGradient="linear(to-r, blue.400, purple.400)"
+                  bgClip="text"
+                >
                   价小前投研 AI
-                </h1>
-                <div className="flex items-center gap-2 mt-1">
-                  <Chip
-                    size="sm"
-                    variant="flat"
-                    color="success"
-                    startContent={<Zap className="w-3 h-3" />}
-                    classNames={{
-                      base: 'bg-green-500/20',
-                      content: 'text-green-400',
-                    }}
+                </Text>
+                <HStack spacing={2} mt={1}>
+                  <Badge
+                    colorScheme="green"
+                    variant="subtle"
+                    px={2}
+                    py={1}
+                    borderRadius="md"
+                    display="flex"
+                    alignItems="center"
+                    gap={1}
                   >
+                    <Zap className="w-3 h-3" />
                     智能分析
-                  </Chip>
-                  <Chip
-                    size="sm"
-                    variant="flat"
-                    color="secondary"
-                    classNames={{
-                      base: 'bg-purple-500/20',
-                      content: 'text-purple-400',
-                    }}
+                  </Badge>
+                  <Badge
+                    colorScheme="purple"
+                    variant="subtle"
+                    px={2}
+                    py={1}
+                    borderRadius="md"
                   >
                     {AVAILABLE_MODELS.find((m) => m.id === selectedModel)?.name}
-                  </Chip>
-                </div>
-              </div>
-            </div>
+                  </Badge>
+                </HStack>
+              </Box>
+            </HStack>
 
-            <div className="flex items-center gap-2">
-              <Tooltip content="清空对话">
-                <Button
-                  isIconOnly
+            <HStack spacing={2}>
+              <Tooltip label="清空对话">
+                <IconButton
                   size="sm"
-                  variant="light"
-                  onPress={createNewSession}
-                  className="text-gray-400 hover:text-gray-200"
-                >
-                  <RefreshCw className="w-4 h-4" />
-                </Button>
+                  variant="ghost"
+                  icon={<RefreshCw className="w-4 h-4" />}
+                  onClick={createNewSession}
+                  color="gray.400"
+                  _hover={{ color: 'gray.200' }}
+                />
               </Tooltip>
               {!isRightSidebarOpen && (
-                <Button
-                  isIconOnly
+                <IconButton
                   size="sm"
-                  variant="light"
-                  onPress={() => setIsRightSidebarOpen(true)}
-                  className="text-gray-400 hover:text-gray-200"
-                >
-                  <Settings className="w-4 h-4" />
-                </Button>
+                  variant="ghost"
+                  icon={<Settings className="w-4 h-4" />}
+                  onClick={() => setIsRightSidebarOpen(true)}
+                  color="gray.400"
+                  _hover={{ color: 'gray.200' }}
+                />
               )}
-            </div>
-          </div>
-        </div>
+            </HStack>
+          </Flex>
+        </Box>
 
         {/* 消息列表 */}
-        <div className="flex-1 p-6 bg-gradient-to-b from-gray-900/50 to-gray-900/30 overflow-y-auto">
+        <Box
+          flex={1}
+          p={6}
+          bgGradient="linear(to-b, rgba(17, 24, 39, 0.5), rgba(17, 24, 39, 0.3))"
+          overflowY="auto"
+        >
           <motion.div
-            className="max-w-4xl mx-auto space-y-4"
+            style={{ maxWidth: '896px', margin: '0 auto' }}
             variants={animations.staggerContainer}
             initial="initial"
             animate="animate"
           >
-            <AnimatePresence mode="popLayout">
-              {messages.map((message, index) => (
-                <motion.div
-                  key={message.id}
-                  variants={animations.fadeInUp}
-                  initial="initial"
-                  animate="animate"
-                  exit={{ opacity: 0, y: -20 }}
-                  layout
-                >
-                  <MessageRenderer message={message} userAvatar={user?.avatar} />
-                </motion.div>
-              ))}
-            </AnimatePresence>
-            <div ref={messagesEndRef} />
+            <VStack spacing={4} align="stretch">
+              <AnimatePresence mode="popLayout">
+                {messages.map((message) => (
+                  <motion.div
+                    key={message.id}
+                    variants={animations.fadeInUp}
+                    initial="initial"
+                    animate="animate"
+                    exit={{ opacity: 0, y: -20 }}
+                    layout
+                  >
+                    <MessageRenderer message={message} userAvatar={user?.avatar} />
+                  </motion.div>
+                ))}
+              </AnimatePresence>
+              <div ref={messagesEndRef} />
+            </VStack>
           </motion.div>
-        </div>
+        </Box>
 
         {/* 快捷问题 */}
         <AnimatePresence>
           {messages.length <= 2 && !isProcessing && (
             <motion.div
-              className="px-6 py-3"
               variants={animations.fadeInUp}
               initial="initial"
               animate="animate"
               exit={{ opacity: 0, y: 20 }}
             >
-              <div className="max-w-4xl mx-auto">
-              <p className="text-xs text-gray-400 mb-2 font-medium flex items-center gap-1">
-                <Sparkles className="w-3 h-3" />
-                快速开始
-              </p>
-              <div className="grid grid-cols-2 gap-2">
-                {quickQuestions.map((question, idx) => (
-                  <motion.div key={idx} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-                    <Button
-                      variant="bordered"
-                      color="primary"
-                      className="w-full justify-start h-auto py-3 border-gray-700 hover:border-blue-500 hover:bg-blue-500/10"
-                      onPress={() => {
-                        setInputValue(question.text);
-                        inputRef.current?.focus();
-                      }}
-                    >
-                      <span className="mr-2">{question.emoji}</span>
-                      <span className="text-gray-200">{question.text}</span>
-                    </Button>
-                  </motion.div>
-                ))}
-              </div>
-            </div>
+              <Box px={6} py={3}>
+                <Box maxW="896px" mx="auto">
+                  <HStack fontSize="xs" color="gray.400" mb={2} fontWeight="medium" spacing={1}>
+                    <Sparkles className="w-3 h-3" />
+                    <Text>快速开始</Text>
+                  </HStack>
+                  <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={2}>
+                    {quickQuestions.map((question, idx) => (
+                      <motion.div key={idx} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+                        <Button
+                          variant="outline"
+                          colorScheme="blue"
+                          w="full"
+                          justifyContent="flex-start"
+                          h="auto"
+                          py={3}
+                          borderColor="gray.600"
+                          _hover={{ borderColor: 'blue.500', bg: 'rgba(59, 130, 246, 0.1)' }}
+                          onClick={() => {
+                            setInputValue(question.text);
+                            inputRef.current?.focus();
+                          }}
+                        >
+                          <Text mr={2}>{question.emoji}</Text>
+                          <Text color="gray.200">{question.text}</Text>
+                        </Button>
+                      </motion.div>
+                    ))}
+                  </Box>
+                </Box>
+              </Box>
             </motion.div>
           )}
         </AnimatePresence>
 
         {/* 输入栏 - 深色 */}
-        <div className="bg-gray-900/95 backdrop-blur-xl border-t border-gray-800 px-6 py-4 shadow-2xl">
-          <div className="max-w-4xl mx-auto">
+        <Box
+          bg="rgba(17, 24, 39, 0.95)"
+          backdropFilter="blur(20px)"
+          borderTop="1px solid"
+          borderColor="gray.700"
+          px={6}
+          py={4}
+          boxShadow="2xl"
+        >
+          <Box maxW="896px" mx="auto">
             {/* 已上传文件预览 */}
             {uploadedFiles.length > 0 && (
-              <div className="mb-3 flex gap-2 flex-wrap">
+              <HStack mb={3} flexWrap="wrap" spacing={2}>
                 {uploadedFiles.map((file, idx) => (
-                  <Chip
+                  <Tag
                     key={idx}
-                    onClose={() => removeFile(idx)}
-                    variant="flat"
-                    classNames={{
-                      base: 'bg-gray-800 border border-gray-700',
-                      content: 'text-gray-300',
-                    }}
+                    size="md"
+                    variant="subtle"
+                    bg="gray.700"
+                    borderColor="gray.600"
+                    borderWidth={1}
                   >
-                    {file.name}
-                  </Chip>
+                    <TagLabel color="gray.300">{file.name}</TagLabel>
+                    <TagCloseButton onClick={() => removeFile(idx)} />
+                  </Tag>
                 ))}
-              </div>
+              </HStack>
             )}
 
-            <div className="flex gap-2">
+            <HStack spacing={2}>
               <input
                 ref={fileInputRef}
                 type="file"
                 multiple
                 accept="image/*,.pdf,.doc,.docx,.txt"
                 onChange={handleFileSelect}
-                className="hidden"
+                style={{ display: 'none' }}
               />
 
-              <Tooltip content="上传文件">
-                <Button
-                  isIconOnly
-                  variant="flat"
+              <Tooltip label="上传文件">
+                <IconButton
+                  variant="ghost"
                   size="lg"
-                  onPress={() => fileInputRef.current?.click()}
-                  className="bg-gray-800 hover:bg-gray-700 text-gray-300"
-                >
-                  <Paperclip className="w-5 h-5" />
-                </Button>
+                  icon={<Paperclip className="w-5 h-5" />}
+                  onClick={() => fileInputRef.current?.click()}
+                  bg="gray.700"
+                  color="gray.300"
+                  _hover={{ bg: 'gray.600' }}
+                />
               </Tooltip>
 
-              <Tooltip content="上传图片">
-                <Button
-                  isIconOnly
-                  variant="flat"
+              <Tooltip label="上传图片">
+                <IconButton
+                  variant="ghost"
                   size="lg"
-                  onPress={() => {
+                  icon={<ImageIcon className="w-5 h-5" />}
+                  onClick={() => {
                     fileInputRef.current?.setAttribute('accept', 'image/*');
                     fileInputRef.current?.click();
                   }}
-                  className="bg-gray-800 hover:bg-gray-700 text-gray-300"
-                >
-                  <ImageIcon className="w-5 h-5" />
-                </Button>
+                  bg="gray.700"
+                  color="gray.300"
+                  _hover={{ bg: 'gray.600' }}
+                />
               </Tooltip>
 
               <Input
                 ref={inputRef}
                 value={inputValue}
-                onValueChange={setInputValue}
+                onChange={(e) => setInputValue(e.target.value)}
                 onKeyDown={handleKeyPress}
                 placeholder="输入你的问题... (Enter 发送, Shift+Enter 换行)"
-                disabled={isProcessing}
+                isDisabled={isProcessing}
                 size="lg"
-                variant="bordered"
-                classNames={{
-                  input: 'text-base text-gray-100',
-                  inputWrapper: 'border-2 border-gray-700 bg-gray-800/50 hover:border-blue-500 focus-within:border-blue-500',
-                }}
+                variant="outline"
+                borderWidth={2}
+                borderColor="gray.600"
+                bg="rgba(31, 41, 55, 0.5)"
+                color="gray.100"
+                _hover={{ borderColor: 'blue.500' }}
+                _focus={{ borderColor: 'blue.500', boxShadow: '0 0 0 1px var(--chakra-colors-blue-500)' }}
               />
 
               <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-                <Button
-                  isIconOnly
-                  color="primary"
-                  variant="shadow"
+                <IconButton
+                  colorScheme="blue"
+                  variant="solid"
                   size="lg"
-                  onPress={handleSendMessage}
+                  icon={!isProcessing && <Send className="w-5 h-5" />}
+                  onClick={handleSendMessage}
                   isLoading={isProcessing}
                   isDisabled={!inputValue.trim() || isProcessing}
-                  className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500"
-                >
-                  {!isProcessing && <Send className="w-5 h-5" />}
-                </Button>
+                  bgGradient="linear(to-r, blue.600, purple.600)"
+                  _hover={{ bgGradient: 'linear(to-r, blue.500, purple.500)' }}
+                />
               </motion.div>
-            </div>
+            </HStack>
 
-            <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
-              <div className="flex items-center gap-1">
-                <Kbd keys={['enter']} className="bg-gray-800 text-gray-400">Enter</Kbd>
-                <span>发送</span>
-              </div>
-              <div className="flex items-center gap-1">
-                <Kbd keys={['shift']} className="bg-gray-800 text-gray-400">Shift</Kbd>
-                <span>+</span>
-                <Kbd keys={['enter']} className="bg-gray-800 text-gray-400">Enter</Kbd>
-                <span>换行</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+            <HStack spacing={4} mt={2} fontSize="xs" color="gray.500">
+              <HStack spacing={1}>
+                <Kbd bg="gray.700" color="gray.400">Enter</Kbd>
+                <Text>发送</Text>
+              </HStack>
+              <HStack spacing={1}>
+                <Kbd bg="gray.700" color="gray.400">Shift</Kbd>
+                <Text>+</Text>
+                <Kbd bg="gray.700" color="gray.400">Enter</Kbd>
+                <Text>换行</Text>
+              </HStack>
+            </HStack>
+          </Box>
+        </Box>
+      </Flex>
 
       {/* 右侧栏 - 深色配置中心 */}
-      {isRightSidebarOpen && (
-        <motion.div
-          className="w-80 flex flex-col bg-gray-900/95 backdrop-blur-xl border-l border-gray-800 shadow-2xl"
-          initial="initial"
-          animate="animate"
-          exit="exit"
-          variants={animations.slideInRight}
-        >
-          <div className="p-4 border-b border-gray-800">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Settings className="w-5 h-5 text-purple-400" />
-                <span className="font-semibold text-gray-100">配置中心</span>
-              </div>
-              <Tooltip content="收起侧边栏">
-                <Button
-                  isIconOnly
-                  size="sm"
-                  variant="light"
-                  onPress={() => setIsRightSidebarOpen(false)}
-                  className="text-gray-400 hover:text-gray-200"
-                >
-                  <ChevronRight className="w-4 h-4" />
-                </Button>
-              </Tooltip>
-            </div>
-          </div>
-
-          <div className="flex-1 overflow-y-auto">
-            <Tabs
-              aria-label="配置选项"
-              color="primary"
-              variant="underlined"
-              classNames={{
-                tabList: 'gap-6 w-full px-4 border-b border-gray-800',
-                cursor: 'bg-blue-500',
-                tab: 'text-gray-400 data-[selected=true]:text-blue-400',
-                tabContent: 'group-data-[selected=true]:text-blue-400',
-              }}
+      <AnimatePresence>
+        {isRightSidebarOpen && (
+          <motion.div
+            style={{ width: '320px', display: 'flex', flexDirection: 'column' }}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            variants={animations.slideInRight}
+          >
+            <Box
+              w="320px"
+              display="flex"
+              flexDirection="column"
+              bg="rgba(17, 24, 39, 0.95)"
+              backdropFilter="blur(20px)"
+              borderLeft="1px solid"
+              borderColor="gray.700"
+              boxShadow="2xl"
             >
-              {/* 模型选择 */}
-              <Tab
-                key="model"
-                title={
-                  <div className="flex items-center gap-2">
-                    <Cpu className="w-4 h-4" />
-                    <span>模型</span>
-                  </div>
-                }
-              >
-                <div className="p-4 space-y-3">
-                  {AVAILABLE_MODELS.map((model) => (
-                    <Card
-                      key={model.id}
-                      isPressable
-                      isHoverable
-                      onPress={() => setSelectedModel(model.id)}
-                      className={`transition-all ${
-                        selectedModel === model.id
-                          ? 'bg-blue-500/20 border-2 border-blue-500'
-                          : 'bg-gray-800/50 border-2 border-gray-700 hover:border-gray-600'
-                      }`}
-                    >
-                      <Card.Content className="p-3">
-                        <div className="flex items-start gap-3">
-                          <div className="p-2 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-500/20">
-                            {model.icon}
-                          </div>
-                          <div className="flex-1">
-                            <p className="font-semibold text-sm text-gray-100">{model.name}</p>
-                            <p className="text-xs text-gray-400 mt-1">{model.description}</p>
-                          </div>
-                          {selectedModel === model.id && (
-                            <Check className="w-5 h-5 text-blue-400" />
-                          )}
-                        </div>
-                      </Card.Content>
-                    </Card>
-                  ))}
-                </div>
-              </Tab>
+              <Box p={4} borderBottom="1px solid" borderColor="gray.700">
+                <HStack justify="space-between">
+                  <HStack spacing={2}>
+                    <Settings className="w-5 h-5" color="#C084FC" />
+                    <Text fontWeight="semibold" color="gray.100">配置中心</Text>
+                  </HStack>
+                  <Tooltip label="收起侧边栏">
+                    <IconButton
+                      size="sm"
+                      variant="ghost"
+                      icon={<ChevronRight className="w-4 h-4" />}
+                      onClick={() => setIsRightSidebarOpen(false)}
+                      color="gray.400"
+                      _hover={{ color: 'gray.200' }}
+                    />
+                  </Tooltip>
+                </HStack>
+              </Box>
 
-              {/* 工具选择 - 按分类显示 */}
-              <Tab
-                key="tools"
-                title={
-                  <div className="flex items-center gap-2">
-                    <Code className="w-4 h-4" />
-                    <span>工具</span>
-                    {selectedTools.length > 0 && (
-                      <span className="inline-flex items-center justify-center w-5 h-5 text-xs font-semibold text-white bg-blue-500 rounded-full">
-                        {selectedTools.length}
-                      </span>
-                    )}
-                  </div>
-                }
-              >
-                <div className="p-4">
-                  <Accordion
-                    variant="splitted"
-                    classNames={{
-                      base: 'gap-2',
-                      trigger: 'bg-gray-800/50 hover:bg-gray-800 border border-gray-700 rounded-lg',
-                      title: 'text-gray-100 text-sm',
-                      content: 'text-gray-300',
-                    }}
-                  >
-                    {Object.entries(TOOL_CATEGORIES).map(([category, tools]) => (
-                      <Accordion.Item
-                        key={category}
-                        aria-label={category}
-                        title={
-                          <div className="flex items-center justify-between w-full pr-2">
-                            <span>{category}</span>
-                            <Chip
-                              size="sm"
-                              variant="flat"
-                              classNames={{
-                                base: 'bg-blue-500/20',
-                                content: 'text-blue-400',
-                              }}
-                            >
-                              {tools.filter(t => selectedTools.includes(t.id)).length}/{tools.length}
-                            </Chip>
-                          </div>
-                        }
-                      >
-                        <CheckboxGroup
-                          value={selectedTools}
-                          onValueChange={setSelectedTools}
-                          classNames={{
-                            base: 'gap-2',
-                          }}
+              <Box flex={1} overflowY="auto">
+                <Tabs colorScheme="blue" variant="line">
+                  <TabList px={4} borderBottom="1px solid" borderColor="gray.700">
+                    <Tab color="gray.400" _selected={{ color: 'blue.400', borderColor: 'blue.500' }}>
+                      <HStack spacing={2}>
+                        <Cpu className="w-4 h-4" />
+                        <Text>模型</Text>
+                      </HStack>
+                    </Tab>
+                    <Tab color="gray.400" _selected={{ color: 'blue.400', borderColor: 'blue.500' }}>
+                      <HStack spacing={2}>
+                        <Code className="w-4 h-4" />
+                        <Text>工具</Text>
+                        {selectedTools.length > 0 && (
+                          <Badge
+                            colorScheme="blue"
+                            borderRadius="full"
+                            fontSize="xs"
+                            px={2}
+                            py={0.5}
+                          >
+                            {selectedTools.length}
+                          </Badge>
+                        )}
+                      </HStack>
+                    </Tab>
+                    <Tab color="gray.400" _selected={{ color: 'blue.400', borderColor: 'blue.500' }}>
+                      <HStack spacing={2}>
+                        <BarChart3 className="w-4 h-4" />
+                        <Text>统计</Text>
+                      </HStack>
+                    </Tab>
+                  </TabList>
+
+                  <TabPanels>
+                    {/* 模型选择 */}
+                    <TabPanel p={4}>
+                      <VStack spacing={3} align="stretch">
+                        {AVAILABLE_MODELS.map((model) => (
+                          <Card
+                            key={model.id}
+                            cursor="pointer"
+                            onClick={() => setSelectedModel(model.id)}
+                            bg={selectedModel === model.id ? 'rgba(59, 130, 246, 0.2)' : 'rgba(31, 41, 55, 0.5)'}
+                            borderWidth={2}
+                            borderColor={selectedModel === model.id ? 'blue.500' : 'gray.600'}
+                            _hover={{ borderColor: selectedModel === model.id ? 'blue.500' : 'gray.500' }}
+                            transition="all 0.2s"
+                          >
+                            <CardBody p={3}>
+                              <HStack align="start" spacing={3}>
+                                <Box
+                                  p={2}
+                                  borderRadius="lg"
+                                  bgGradient="linear(to-br, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2))"
+                                >
+                                  {model.icon}
+                                </Box>
+                                <Box flex={1}>
+                                  <Text fontWeight="semibold" fontSize="sm" color="gray.100">
+                                    {model.name}
+                                  </Text>
+                                  <Text fontSize="xs" color="gray.400" mt={1}>
+                                    {model.description}
+                                  </Text>
+                                </Box>
+                                {selectedModel === model.id && (
+                                  <Check className="w-5 h-5" color="#60A5FA" />
+                                )}
+                              </HStack>
+                            </CardBody>
+                          </Card>
+                        ))}
+                      </VStack>
+                    </TabPanel>
+
+                    {/* 工具选择 */}
+                    <TabPanel p={4}>
+                      <Accordion allowMultiple>
+                        {Object.entries(TOOL_CATEGORIES).map(([category, tools]) => (
+                          <AccordionItem
+                            key={category}
+                            border="1px solid"
+                            borderColor="gray.600"
+                            borderRadius="lg"
+                            mb={2}
+                            bg="rgba(31, 41, 55, 0.5)"
+                            _hover={{ bg: 'gray.700' }}
+                          >
+                            <AccordionButton>
+                              <HStack flex={1} justify="space-between" pr={2}>
+                                <Text color="gray.100" fontSize="sm">{category}</Text>
+                                <Badge colorScheme="blue" variant="subtle">
+                                  {tools.filter(t => selectedTools.includes(t.id)).length}/{tools.length}
+                                </Badge>
+                              </HStack>
+                              <AccordionIcon color="gray.400" />
+                            </AccordionButton>
+                            <AccordionPanel pb={4}>
+                              <CheckboxGroup
+                                value={selectedTools}
+                                onChange={setSelectedTools}
+                              >
+                                <VStack align="stretch" spacing={2}>
+                                  {tools.map((tool) => (
+                                    <Checkbox
+                                      key={tool.id}
+                                      value={tool.id}
+                                      colorScheme="blue"
+                                      p={2}
+                                      borderRadius="lg"
+                                      _hover={{ bg: 'rgba(31, 41, 55, 0.5)' }}
+                                      transition="background 0.2s"
+                                    >
+                                      <HStack spacing={2} align="start">
+                                        <Box color="blue.400" mt={0.5}>{tool.icon}</Box>
+                                        <Box>
+                                          <Text fontSize="sm" color="gray.200">{tool.name}</Text>
+                                          <Text fontSize="xs" color="gray.500">{tool.description}</Text>
+                                        </Box>
+                                      </HStack>
+                                    </Checkbox>
+                                  ))}
+                                </VStack>
+                              </CheckboxGroup>
+                            </AccordionPanel>
+                          </AccordionItem>
+                        ))}
+                      </Accordion>
+
+                      <HStack mt={4} spacing={2}>
+                        <Button
+                          size="sm"
+                          flex={1}
+                          variant="ghost"
+                          colorScheme="blue"
+                          onClick={() => setSelectedTools(MCP_TOOLS.map(t => t.id))}
+                          bg="rgba(59, 130, 246, 0.2)"
+                          color="blue.400"
+                          _hover={{ bg: 'rgba(59, 130, 246, 0.3)' }}
                         >
-                          {tools.map((tool) => (
-                            <Checkbox
-                              key={tool.id}
-                              value={tool.id}
-                              classNames={{
-                                base: 'p-2 rounded-lg hover:bg-gray-800/50 transition-colors',
-                                label: 'text-gray-200 text-sm',
-                                wrapper: 'after:bg-blue-500',
-                              }}
-                            >
-                              <div className="flex items-center gap-2">
-                                <div className="text-blue-400">{tool.icon}</div>
-                                <div>
-                                  <p className="text-sm">{tool.name}</p>
-                                  <p className="text-xs text-gray-500">{tool.description}</p>
-                                </div>
-                              </div>
-                            </Checkbox>
-                          ))}
-                        </CheckboxGroup>
-                      </Accordion.Item>
-                    ))}
-                  </Accordion>
+                          全选
+                        </Button>
+                        <Button
+                          size="sm"
+                          flex={1}
+                          variant="ghost"
+                          onClick={() => setSelectedTools([])}
+                          bg="gray.700"
+                          color="gray.300"
+                          _hover={{ bg: 'gray.600' }}
+                        >
+                          清空
+                        </Button>
+                      </HStack>
+                    </TabPanel>
 
-                  <div className="mt-4 flex gap-2">
-                    <Button
-                      size="sm"
-                      variant="flat"
-                      onPress={() => setSelectedTools(MCP_TOOLS.map(t => t.id))}
-                      className="flex-1 bg-blue-500/20 text-blue-400 hover:bg-blue-500/30"
-                    >
-                      全选
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="flat"
-                      onPress={() => setSelectedTools([])}
-                      className="flex-1 bg-gray-800 text-gray-300 hover:bg-gray-700"
-                    >
-                      清空
-                    </Button>
-                  </div>
-                </div>
-              </Tab>
+                    {/* 统计信息 */}
+                    <TabPanel p={4}>
+                      <VStack spacing={4} align="stretch">
+                        <Card bg="rgba(31, 41, 55, 0.5)" borderColor="gray.600" borderWidth={1}>
+                          <CardBody p={4}>
+                            <Flex align="center" justify="space-between">
+                              <Box>
+                                <Text fontSize="xs" color="gray.400">对话数</Text>
+                                <Text fontSize="2xl" fontWeight="bold" color="gray.100">
+                                  {sessions.length}
+                                </Text>
+                              </Box>
+                              <MessageSquare className="w-8 h-8" color="#60A5FA" style={{ opacity: 0.5 }} />
+                            </Flex>
+                          </CardBody>
+                        </Card>
 
-              {/* 统计信息 */}
-              <Tab
-                key="stats"
-                title={
-                  <div className="flex items-center gap-2">
-                    <BarChart3 className="w-4 h-4" />
-                    <span>统计</span>
-                  </div>
-                }
-              >
-                <div className="p-4 space-y-4">
-                  <Card className="bg-gray-800/50 border border-gray-700">
-                    <Card.Content className="p-4">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <p className="text-xs text-gray-400">对话数</p>
-                          <p className="text-2xl font-bold text-gray-100">{sessions.length}</p>
-                        </div>
-                        <MessageSquare className="w-8 h-8 text-blue-400 opacity-50" />
-                      </div>
-                    </Card.Content>
-                  </Card>
+                        <Card bg="rgba(31, 41, 55, 0.5)" borderColor="gray.600" borderWidth={1}>
+                          <CardBody p={4}>
+                            <Flex align="center" justify="space-between">
+                              <Box>
+                                <Text fontSize="xs" color="gray.400">消息数</Text>
+                                <Text fontSize="2xl" fontWeight="bold" color="gray.100">
+                                  {messages.length}
+                                </Text>
+                              </Box>
+                              <Activity className="w-8 h-8" color="#C084FC" style={{ opacity: 0.5 }} />
+                            </Flex>
+                          </CardBody>
+                        </Card>
 
-                  <Card className="bg-gray-800/50 border border-gray-700">
-                    <Card.Content className="p-4">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <p className="text-xs text-gray-400">消息数</p>
-                          <p className="text-2xl font-bold text-gray-100">{messages.length}</p>
-                        </div>
-                        <Activity className="w-8 h-8 text-purple-400 opacity-50" />
-                      </div>
-                    </Card.Content>
-                  </Card>
-
-                  <Card className="bg-gray-800/50 border border-gray-700">
-                    <Card.Content className="p-4">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <p className="text-xs text-gray-400">已选工具</p>
-                          <p className="text-2xl font-bold text-gray-100">{selectedTools.length}</p>
-                        </div>
-                        <Code className="w-8 h-8 text-green-400 opacity-50" />
-                      </div>
-                    </Card.Content>
-                  </Card>
-                </div>
-              </Tab>
-            </Tabs>
-          </div>
-        </motion.div>
-      )}
-    </div>
+                        <Card bg="rgba(31, 41, 55, 0.5)" borderColor="gray.600" borderWidth={1}>
+                          <CardBody p={4}>
+                            <Flex align="center" justify="space-between">
+                              <Box>
+                                <Text fontSize="xs" color="gray.400">已选工具</Text>
+                                <Text fontSize="2xl" fontWeight="bold" color="gray.100">
+                                  {selectedTools.length}
+                                </Text>
+                              </Box>
+                              <Code className="w-8 h-8" color="#34D399" style={{ opacity: 0.5 }} />
+                            </Flex>
+                          </CardBody>
+                        </Card>
+                      </VStack>
+                    </TabPanel>
+                  </TabPanels>
+                </Tabs>
+              </Box>
+            </Box>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </Flex>
   );
 };
 
@@ -1316,44 +1394,44 @@ export default AgentChat;
 const SessionCard = ({ session, isActive, onPress }) => {
   return (
     <Card
-      isPressable
-      isHoverable
-      onPress={onPress}
-      className={`transition-all ${
-        isActive
-          ? 'bg-blue-500/20 border border-blue-500'
-          : 'bg-gray-800/30 border border-gray-800 hover:bg-gray-800/50 hover:border-gray-700'
-      }`}
+      cursor="pointer"
+      onClick={onPress}
+      bg={isActive ? 'rgba(59, 130, 246, 0.2)' : 'rgba(31, 41, 55, 0.3)'}
+      borderWidth={1}
+      borderColor={isActive ? 'blue.500' : 'gray.700'}
+      _hover={{
+        bg: isActive ? 'rgba(59, 130, 246, 0.2)' : 'rgba(31, 41, 55, 0.5)',
+        borderColor: isActive ? 'blue.500' : 'gray.600'
+      }}
+      transition="all 0.2s"
     >
-      <Card.Content className="p-3">
-        <div className="flex items-start justify-between gap-2">
-          <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium truncate text-gray-100">
+      <CardBody p={3}>
+        <Flex align="start" justify="space-between" gap={2}>
+          <Box flex={1} minW={0}>
+            <Text fontSize="sm" fontWeight="medium" color="gray.100" noOfLines={1}>
               {session.title || '新对话'}
-            </p>
-            <p className="text-xs text-gray-500 mt-1">
+            </Text>
+            <Text fontSize="xs" color="gray.500" mt={1}>
               {new Date(session.created_at || session.timestamp).toLocaleString('zh-CN', {
                 month: 'numeric',
                 day: 'numeric',
                 hour: '2-digit',
                 minute: '2-digit',
               })}
-            </p>
-          </div>
+            </Text>
+          </Box>
           {session.message_count && (
-            <Chip
-              size="sm"
-              variant="flat"
-              classNames={{
-                base: isActive ? 'bg-blue-500/30' : 'bg-gray-700/50',
-                content: isActive ? 'text-blue-300' : 'text-gray-400',
-              }}
+            <Badge
+              colorScheme={isActive ? 'blue' : 'gray'}
+              variant="subtle"
+              bg={isActive ? 'rgba(59, 130, 246, 0.3)' : 'rgba(55, 65, 81, 0.5)'}
+              color={isActive ? 'blue.300' : 'gray.400'}
             >
               {session.message_count}
-            </Chip>
+            </Badge>
           )}
-        </div>
-      </Card.Content>
+        </Flex>
+      </CardBody>
     </Card>
   );
 };
@@ -1365,133 +1443,134 @@ const MessageRenderer = ({ message, userAvatar }) => {
   switch (message.type) {
     case MessageTypes.USER:
       return (
-        <div className="flex justify-end">
-          <div className="flex items-start gap-3 max-w-[75%]">
-            <Card className="bg-gradient-to-br from-blue-600 to-purple-600 shadow-lg shadow-blue-500/20">
-              <Card.Content className="px-5 py-3">
-                <p className="text-sm text-white whitespace-pre-wrap">{message.content}</p>
+        <Flex justify="flex-end">
+          <HStack align="start" spacing={3} maxW="75%">
+            <Card bgGradient="linear(to-br, blue.600, purple.600)" boxShadow="0 0 20px rgba(59, 130, 246, 0.2)">
+              <CardBody px={5} py={3}>
+                <Text fontSize="sm" color="white" whiteSpace="pre-wrap">
+                  {message.content}
+                </Text>
                 {message.files && message.files.length > 0 && (
-                  <div className="mt-2 flex gap-2 flex-wrap">
+                  <HStack mt={2} flexWrap="wrap" spacing={2}>
                     {message.files.map((file, idx) => (
-                      <Chip key={idx} size="sm" variant="flat" className="bg-white/20 text-white">
-                        <File className="w-3 h-3 mr-1" />
+                      <Badge key={idx} colorScheme="whiteAlpha" display="flex" alignItems="center" gap={1}>
+                        <File className="w-3 h-3" />
                         {file.name}
-                      </Chip>
+                      </Badge>
                     ))}
-                  </div>
+                  </HStack>
                 )}
-              </Card.Content>
+              </CardBody>
             </Card>
             <Avatar
               src={userAvatar}
               icon={<User className="w-4 h-4" />}
               size="sm"
-              classNames={{
-                base: 'bg-gradient-to-br from-blue-500 to-purple-600',
-              }}
+              bgGradient="linear(to-br, blue.500, purple.600)"
             />
-          </div>
-        </div>
+          </HStack>
+        </Flex>
       );
 
     case MessageTypes.AGENT_THINKING:
       return (
-        <div className="flex justify-start">
-          <div className="flex items-start gap-3 max-w-[75%]">
+        <Flex justify="flex-start">
+          <HStack align="start" spacing={3} maxW="75%">
             <Avatar
               icon={<Cpu className="w-4 h-4" />}
               size="sm"
-              classNames={{
-                base: 'bg-gradient-to-br from-purple-500 to-pink-500',
-              }}
+              bgGradient="linear(to-br, purple.500, pink.500)"
             />
-            <Card className="bg-gray-800/50 border border-gray-700 backdrop-blur-sm">
-              <Card.Content className="px-5 py-3 flex items-center gap-2">
-                <Spinner size="sm" color="primary" />
-                <p className="text-sm text-gray-300">{message.content}</p>
-              </Card.Content>
+            <Card bg="rgba(31, 41, 55, 0.5)" borderColor="gray.600" borderWidth={1} backdropFilter="blur(4px)">
+              <CardBody px={5} py={3}>
+                <HStack spacing={2}>
+                  <Spinner size="sm" color="blue.500" />
+                  <Text fontSize="sm" color="gray.300">{message.content}</Text>
+                </HStack>
+              </CardBody>
             </Card>
-          </div>
-        </div>
+          </HStack>
+        </Flex>
       );
 
     case MessageTypes.AGENT_RESPONSE:
       return (
-        <div className="flex justify-start">
-          <div className="flex items-start gap-3 max-w-[75%]">
+        <Flex justify="flex-start">
+          <HStack align="start" spacing={3} maxW="75%">
             <Avatar
               icon={<Cpu className="w-4 h-4" />}
               size="sm"
-              classNames={{
-                base: 'bg-gradient-to-br from-purple-500 to-pink-500',
-              }}
+              bgGradient="linear(to-br, purple.500, pink.500)"
             />
-            <Card className="bg-gray-800/80 border border-gray-700 backdrop-blur-sm shadow-lg">
-              <Card.Content className="px-5 py-3">
-                <p className="text-sm text-gray-100 whitespace-pre-wrap leading-relaxed">
+            <Card
+              bg="rgba(31, 41, 55, 0.8)"
+              borderColor="gray.600"
+              borderWidth={1}
+              backdropFilter="blur(4px)"
+              boxShadow="lg"
+            >
+              <CardBody px={5} py={3}>
+                <Text fontSize="sm" color="gray.100" whiteSpace="pre-wrap" lineHeight="relaxed">
                   {message.content}
-                </p>
+                </Text>
 
                 {message.stepResults && message.stepResults.length > 0 && (
-                  <div className="mt-3">
+                  <Box mt={3}>
                     <ExecutionStepsDisplay steps={message.stepResults} plan={message.plan} />
-                  </div>
+                  </Box>
                 )}
 
-                <div className="flex items-center gap-2 mt-3 pt-3 border-t border-gray-700">
-                  <Tooltip content="复制">
-                    <Button
-                      isIconOnly
+                <Flex align="center" gap={2} mt={3} pt={3} borderTop="1px solid" borderColor="gray.600">
+                  <Tooltip label="复制">
+                    <IconButton
                       size="sm"
-                      variant="light"
-                      onPress={() => navigator.clipboard.writeText(message.content)}
-                      className="text-gray-400 hover:text-gray-200"
-                    >
-                      <Copy className="w-4 h-4" />
-                    </Button>
+                      variant="ghost"
+                      icon={<Copy className="w-4 h-4" />}
+                      onClick={() => navigator.clipboard.writeText(message.content)}
+                      color="gray.400"
+                      _hover={{ color: 'gray.200' }}
+                    />
                   </Tooltip>
-                  <Tooltip content="点赞">
-                    <Button
-                      isIconOnly
+                  <Tooltip label="点赞">
+                    <IconButton
                       size="sm"
-                      variant="light"
-                      className="text-gray-400 hover:text-green-400"
-                    >
-                      <ThumbsUp className="w-4 h-4" />
-                    </Button>
+                      variant="ghost"
+                      icon={<ThumbsUp className="w-4 h-4" />}
+                      color="gray.400"
+                      _hover={{ color: 'green.400' }}
+                    />
                   </Tooltip>
-                  <Tooltip content="点踩">
-                    <Button
-                      isIconOnly
+                  <Tooltip label="点踩">
+                    <IconButton
                       size="sm"
-                      variant="light"
-                      className="text-gray-400 hover:text-red-400"
-                    >
-                      <ThumbsDown className="w-4 h-4" />
-                    </Button>
+                      variant="ghost"
+                      icon={<ThumbsDown className="w-4 h-4" />}
+                      color="gray.400"
+                      _hover={{ color: 'red.400' }}
+                    />
                   </Tooltip>
-                  <span className="text-xs text-gray-500 ml-auto">
+                  <Text fontSize="xs" color="gray.500" ml="auto">
                     {new Date(message.timestamp).toLocaleTimeString('zh-CN', {
                       hour: '2-digit',
                       minute: '2-digit',
                     })}
-                  </span>
-                </div>
-              </Card.Content>
+                  </Text>
+                </Flex>
+              </CardBody>
             </Card>
-          </div>
-        </div>
+          </HStack>
+        </Flex>
       );
 
     case MessageTypes.ERROR:
       return (
-        <div className="flex justify-center">
-          <Card className="bg-red-500/10 border border-red-500/50 backdrop-blur-sm">
-            <Card.Content className="px-5 py-3">
-              <p className="text-sm text-red-400">{message.content}</p>
-            </Card.Content>
+        <Flex justify="center">
+          <Card bg="rgba(239, 68, 68, 0.1)" borderColor="rgba(239, 68, 68, 0.5)" borderWidth={1} backdropFilter="blur(4px)">
+            <CardBody px={5} py={3}>
+              <Text fontSize="sm" color="red.400">{message.content}</Text>
+            </CardBody>
           </Card>
-        </div>
+        </Flex>
       );
 
     default:
@@ -1504,62 +1583,52 @@ const MessageRenderer = ({ message, userAvatar }) => {
  */
 const ExecutionStepsDisplay = ({ steps, plan }) => {
   return (
-    <Accordion
-      variant="splitted"
-      classNames={{
-        base: 'px-0',
-        trigger: 'bg-gray-900/50 hover:bg-gray-900 border border-gray-700 rounded-lg px-4 py-2',
-        title: 'text-gray-300 text-sm',
-        content: 'text-gray-400',
-      }}
-    >
-      <Accordion.Item
-        key="1"
-        aria-label="执行详情"
-        title={
-          <div className="flex items-center gap-2">
-            <Activity className="w-4 h-4 text-purple-400" />
-            <span>执行详情</span>
-            <Chip
-              size="sm"
-              variant="flat"
-              classNames={{
-                base: 'bg-purple-500/20',
-                content: 'text-purple-400',
-              }}
-            >
-              {steps.length} 步骤
-            </Chip>
-          </div>
-        }
+    <Accordion allowToggle>
+      <AccordionItem
+        border="1px solid"
+        borderColor="gray.600"
+        borderRadius="lg"
+        bg="rgba(17, 24, 39, 0.5)"
+        _hover={{ bg: 'gray.800' }}
       >
-        <div className="space-y-2">
-          {steps.map((result, idx) => (
-            <Card key={idx} className="bg-gray-900/30 border border-gray-700">
-              <Card.Content className="p-3">
-                <div className="flex items-start justify-between gap-2">
-                  <p className="text-xs font-medium text-gray-300">
-                    步骤 {idx + 1}: {result.tool_name}
-                  </p>
-                  <Chip
-                    size="sm"
-                    color={result.status === 'success' ? 'success' : 'danger'}
-                    variant="flat"
-                    classNames={{
-                      base: result.status === 'success' ? 'bg-green-500/20' : 'bg-red-500/20',
-                      content: result.status === 'success' ? 'text-green-400' : 'text-red-400',
-                    }}
-                  >
-                    {result.status}
-                  </Chip>
-                </div>
-                <p className="text-xs text-gray-500 mt-1">{result.execution_time?.toFixed(2)}s</p>
-                {result.error && <p className="text-xs text-red-400 mt-1">⚠️ {result.error}</p>}
-              </Card.Content>
-            </Card>
-          ))}
-        </div>
-      </Accordion.Item>
+        <AccordionButton px={4} py={2}>
+          <HStack flex={1} spacing={2}>
+            <Activity className="w-4 h-4" color="#C084FC" />
+            <Text color="gray.300" fontSize="sm">执行详情</Text>
+            <Badge colorScheme="purple" variant="subtle">
+              {steps.length} 步骤
+            </Badge>
+          </HStack>
+          <AccordionIcon color="gray.400" />
+        </AccordionButton>
+        <AccordionPanel pb={4}>
+          <VStack spacing={2} align="stretch">
+            {steps.map((result, idx) => (
+              <Card key={idx} bg="rgba(17, 24, 39, 0.3)" borderColor="gray.600" borderWidth={1}>
+                <CardBody p={3}>
+                  <Flex align="start" justify="space-between" gap={2}>
+                    <Text fontSize="xs" fontWeight="medium" color="gray.300">
+                      步骤 {idx + 1}: {result.tool_name}
+                    </Text>
+                    <Badge
+                      colorScheme={result.status === 'success' ? 'green' : 'red'}
+                      variant="subtle"
+                    >
+                      {result.status}
+                    </Badge>
+                  </Flex>
+                  <Text fontSize="xs" color="gray.500" mt={1}>
+                    {result.execution_time?.toFixed(2)}s
+                  </Text>
+                  {result.error && (
+                    <Text fontSize="xs" color="red.400" mt={1}>⚠️ {result.error}</Text>
+                  )}
+                </CardBody>
+              </Card>
+            ))}
+          </VStack>
+        </AccordionPanel>
+      </AccordionItem>
     </Accordion>
   );
 };
diff --git a/src/views/AgentChat/index.js.heroui-backup b/src/views/AgentChat/index.js.heroui-backup
new file mode 100644
index 00000000..468c504c
--- /dev/null
+++ b/src/views/AgentChat/index.js.heroui-backup
@@ -0,0 +1,1565 @@
+// src/views/AgentChat/index.js
+// 超炫酷的 AI 投研助手 - Hero UI 深色模式版本
+// 使用 Framer Motion 物理动画引擎
+
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Button,
+  Card,
+  Input,
+  Avatar,
+  Chip,
+  Separator,
+  Spinner,
+  Tooltip,
+  Checkbox,
+  CheckboxGroup,
+  Kbd,
+  Accordion,
+} from '@heroui/react';
+import {
+  Tabs,
+  TabList,
+  TabPanels,
+  Tab,
+  TabPanel,
+  useToast
+} from '@chakra-ui/react';
+import { useAuth } from '@contexts/AuthContext';
+import { logger } from '@utils/logger';
+import axios from 'axios';
+
+// 图标 - 使用 Lucide Icons
+import {
+  Send,
+  Plus,
+  Search,
+  MessageSquare,
+  Trash2,
+  MoreVertical,
+  RefreshCw,
+  Download,
+  Cpu,
+  User,
+  Zap,
+  Clock,
+  Settings,
+  ChevronLeft,
+  ChevronRight,
+  Activity,
+  Code,
+  Database,
+  TrendingUp,
+  FileText,
+  BookOpen,
+  Menu,
+  X,
+  Check,
+  Circle,
+  Maximize2,
+  Minimize2,
+  Copy,
+  ThumbsUp,
+  ThumbsDown,
+  Sparkles,
+  Brain,
+  Rocket,
+  Paperclip,
+  Image as ImageIcon,
+  File,
+  Calendar,
+  Globe,
+  DollarSign,
+  Newspaper,
+  BarChart3,
+  PieChart,
+  LineChart,
+  Briefcase,
+  Users,
+} from 'lucide-react';
+
+/**
+ * Framer Motion 动画变体配置
+ */
+const animations = {
+  slideInLeft: {
+    initial: { x: -320, opacity: 0 },
+    animate: {
+      x: 0,
+      opacity: 1,
+      transition: {
+        type: 'spring',
+        stiffness: 300,
+        damping: 30,
+      },
+    },
+    exit: {
+      x: -320,
+      opacity: 0,
+      transition: { duration: 0.2 },
+    },
+  },
+  slideInRight: {
+    initial: { x: 320, opacity: 0 },
+    animate: {
+      x: 0,
+      opacity: 1,
+      transition: {
+        type: 'spring',
+        stiffness: 300,
+        damping: 30,
+      },
+    },
+    exit: {
+      x: 320,
+      opacity: 0,
+      transition: { duration: 0.2 },
+    },
+  },
+  fadeInUp: {
+    initial: { opacity: 0, y: 20 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        type: 'spring',
+        stiffness: 400,
+        damping: 25,
+      },
+    },
+  },
+  staggerItem: {
+    initial: { opacity: 0, y: 10 },
+    animate: { opacity: 1, y: 0 },
+  },
+  staggerContainer: {
+    animate: {
+      transition: {
+        staggerChildren: 0.05,
+      },
+    },
+  },
+  pressScale: {
+    whileTap: { scale: 0.95 },
+    whileHover: { scale: 1.05 },
+  },
+};
+
+/**
+ * 消息类型
+ */
+const MessageTypes = {
+  USER: 'user',
+  AGENT_THINKING: 'agent_thinking',
+  AGENT_PLAN: 'agent_plan',
+  AGENT_EXECUTING: 'agent_executing',
+  AGENT_RESPONSE: 'agent_response',
+  ERROR: 'error',
+};
+
+/**
+ * 可用模型配置
+ */
+const AVAILABLE_MODELS = [
+  {
+    id: 'kimi-k2-thinking',
+    name: 'Kimi K2 Thinking',
+    description: '深度思考模型，适合复杂分析',
+    icon: <Brain className="w-5 h-5" />,
+    color: 'secondary',
+  },
+  {
+    id: 'kimi-k2',
+    name: 'Kimi K2',
+    description: '快速响应模型，适合简单查询',
+    icon: <Zap className="w-5 h-5" />,
+    color: 'primary',
+  },
+  {
+    id: 'deepmoney',
+    name: 'DeepMoney',
+    description: '金融专业模型',
+    icon: <TrendingUp className="w-5 h-5" />,
+    color: 'success',
+  },
+];
+
+/**
+ * MCP 工具配置（完整列表）
+ */
+const MCP_TOOLS = [
+  // 新闻搜索类
+  {
+    id: 'search_news',
+    name: '全球新闻搜索',
+    icon: <Globe className="w-4 h-4" />,
+    category: '新闻资讯',
+    description: '搜索全球新闻，支持关键词和日期过滤'
+  },
+  {
+    id: 'search_china_news',
+    name: '中国新闻搜索',
+    icon: <Newspaper className="w-4 h-4" />,
+    category: '新闻资讯',
+    description: 'KNN语义搜索中国新闻'
+  },
+  {
+    id: 'search_medical_news',
+    name: '医疗健康新闻',
+    icon: <Activity className="w-4 h-4" />,
+    category: '新闻资讯',
+    description: '医药、医疗设备、生物技术新闻'
+  },
+
+  // 概念板块类
+  {
+    id: 'search_concepts',
+    name: '概念板块搜索',
+    icon: <PieChart className="w-4 h-4" />,
+    category: '概念板块',
+    description: '搜索股票概念板块及相关股票'
+  },
+  {
+    id: 'get_concept_details',
+    name: '概念详情',
+    icon: <FileText className="w-4 h-4" />,
+    category: '概念板块',
+    description: '获取概念板块详细信息'
+  },
+  {
+    id: 'get_stock_concepts',
+    name: '股票概念',
+    icon: <BarChart3 className="w-4 h-4" />,
+    category: '概念板块',
+    description: '查询股票相关概念板块'
+  },
+  {
+    id: 'get_concept_statistics',
+    name: '概念统计',
+    icon: <LineChart className="w-4 h-4" />,
+    category: '概念板块',
+    description: '涨幅榜、跌幅榜、活跃榜等'
+  },
+
+  // 涨停分析类
+  {
+    id: 'search_limit_up_stocks',
+    name: '涨停股票搜索',
+    icon: <TrendingUp className="w-4 h-4" />,
+    category: '涨停分析',
+    description: '搜索涨停股票，支持多条件筛选'
+  },
+  {
+    id: 'get_daily_stock_analysis',
+    name: '涨停日报',
+    icon: <Calendar className="w-4 h-4" />,
+    category: '涨停分析',
+    description: '每日涨停股票分析报告'
+  },
+
+  // 研报路演类
+  {
+    id: 'search_research_reports',
+    name: '研报搜索',
+    icon: <BookOpen className="w-4 h-4" />,
+    category: '研报路演',
+    description: '搜索研究报告，支持语义搜索'
+  },
+  {
+    id: 'search_roadshows',
+    name: '路演活动',
+    icon: <Briefcase className="w-4 h-4" />,
+    category: '研报路演',
+    description: '上市公司路演、投资者交流活动'
+  },
+
+  // 股票数据类
+  {
+    id: 'get_stock_basic_info',
+    name: '股票基本信息',
+    icon: <FileText className="w-4 h-4" />,
+    category: '股票数据',
+    description: '公司名称、行业、主营业务等'
+  },
+  {
+    id: 'get_stock_financial_index',
+    name: '财务指标',
+    icon: <DollarSign className="w-4 h-4" />,
+    category: '股票数据',
+    description: 'EPS、ROE、营收增长率等'
+  },
+  {
+    id: 'get_stock_trade_data',
+    name: '交易数据',
+    icon: <BarChart3 className="w-4 h-4" />,
+    category: '股票数据',
+    description: '价格、成交量、涨跌幅等'
+  },
+  {
+    id: 'get_stock_balance_sheet',
+    name: '资产负债表',
+    icon: <PieChart className="w-4 h-4" />,
+    category: '股票数据',
+    description: '资产、负债、所有者权益'
+  },
+  {
+    id: 'get_stock_cashflow',
+    name: '现金流量表',
+    icon: <LineChart className="w-4 h-4" />,
+    category: '股票数据',
+    description: '经营、投资、筹资现金流'
+  },
+  {
+    id: 'search_stocks_by_criteria',
+    name: '条件选股',
+    icon: <Search className="w-4 h-4" />,
+    category: '股票数据',
+    description: '按行业、地区、市值筛选'
+  },
+  {
+    id: 'get_stock_comparison',
+    name: '股票对比',
+    icon: <BarChart3 className="w-4 h-4" />,
+    category: '股票数据',
+    description: '多只股票财务指标对比'
+  },
+
+  // 用户数据类
+  {
+    id: 'get_user_watchlist',
+    name: '自选股列表',
+    icon: <Users className="w-4 h-4" />,
+    category: '用户数据',
+    description: '用户关注的股票及行情'
+  },
+  {
+    id: 'get_user_following_events',
+    name: '关注事件',
+    icon: <Activity className="w-4 h-4" />,
+    category: '用户数据',
+    description: '用户关注的重大事件'
+  },
+];
+
+// 按类别分组工具
+const TOOL_CATEGORIES = {
+  '新闻资讯': MCP_TOOLS.filter(t => t.category === '新闻资讯'),
+  '概念板块': MCP_TOOLS.filter(t => t.category === '概念板块'),
+  '涨停分析': MCP_TOOLS.filter(t => t.category === '涨停分析'),
+  '研报路演': MCP_TOOLS.filter(t => t.category === '研报路演'),
+  '股票数据': MCP_TOOLS.filter(t => t.category === '股票数据'),
+  '用户数据': MCP_TOOLS.filter(t => t.category === '用户数据'),
+};
+
+/**
+ * Hero Agent Chat - 主组件（深色模式）
+ */
+const AgentChat = () => {
+  const { user } = useAuth();
+  const toast = useToast();
+
+  // 会话管理
+  const [sessions, setSessions] = useState([]);
+  const [currentSessionId, setCurrentSessionId] = useState(null);
+  const [isLoadingSessions, setIsLoadingSessions] = useState(false);
+
+  // 消息管理
+  const [messages, setMessages] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  // UI 状态
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedModel, setSelectedModel] = useState('kimi-k2-thinking');
+  const [selectedTools, setSelectedTools] = useState([
+    'search_news',
+    'search_china_news',
+    'search_concepts',
+    'search_limit_up_stocks',
+    'search_research_reports',
+  ]);
+  const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(true);
+  const [isRightSidebarOpen, setIsRightSidebarOpen] = useState(true);
+
+  // 文件上传
+  const [uploadedFiles, setUploadedFiles] = useState([]);
+  const fileInputRef = useRef(null);
+
+  // Refs
+  const messagesEndRef = useRef(null);
+  const inputRef = useRef(null);
+
+  // ==================== 启用深色模式 ====================
+  useEffect(() => {
+    // 为 AgentChat 页面强制启用深色模式
+    document.documentElement.classList.add('dark');
+
+    return () => {
+      // 组件卸载时不移除，让其他页面自己控制
+      // document.documentElement.classList.remove('dark');
+    };
+  }, []);
+
+  // ==================== API 调用函数 ====================
+
+  const loadSessions = async () => {
+    if (!user?.id) return;
+    setIsLoadingSessions(true);
+    try {
+      const response = await axios.get('/mcp/agent/sessions', {
+        params: { user_id: user.id, limit: 50 },
+      });
+      if (response.data.success) {
+        setSessions(response.data.data);
+      }
+    } catch (error) {
+      logger.error('加载会话列表失败', error);
+    } finally {
+      setIsLoadingSessions(false);
+    }
+  };
+
+  const loadSessionHistory = async (sessionId) => {
+    if (!sessionId) return;
+    try {
+      const response = await axios.get(`/mcp/agent/history/${sessionId}`, {
+        params: { limit: 100 },
+      });
+      if (response.data.success) {
+        const history = response.data.data;
+        const formattedMessages = history.map((msg, idx) => ({
+          id: `${sessionId}-${idx}`,
+          type: msg.message_type === 'user' ? MessageTypes.USER : MessageTypes.AGENT_RESPONSE,
+          content: msg.message,
+          plan: msg.plan ? JSON.parse(msg.plan) : null,
+          stepResults: msg.steps ? JSON.parse(msg.steps) : null,
+          timestamp: msg.timestamp,
+        }));
+        setMessages(formattedMessages);
+      }
+    } catch (error) {
+      logger.error('加载会话历史失败', error);
+    }
+  };
+
+  const createNewSession = () => {
+    setCurrentSessionId(null);
+    setMessages([
+      {
+        id: Date.now(),
+        type: MessageTypes.AGENT_RESPONSE,
+        content: `你好${user?.nickname || ''}！👋\n\n我是**价小前**，你的 AI 投研助手。\n\n**我能做什么？**\n• 📊 全面分析股票基本面和技术面\n• 🔥 追踪市场热点和涨停板块\n• 📈 研究行业趋势和投资机会\n• 📰 汇总最新财经新闻和研报\n\n直接输入你的问题开始探索！`,
+        timestamp: new Date().toISOString(),
+      },
+    ]);
+  };
+
+  const switchSession = (sessionId) => {
+    setCurrentSessionId(sessionId);
+    loadSessionHistory(sessionId);
+  };
+
+  const handleSendMessage = async () => {
+    if (!inputValue.trim() || isProcessing) return;
+
+    const userMessage = {
+      type: MessageTypes.USER,
+      content: inputValue,
+      timestamp: new Date().toISOString(),
+      files: uploadedFiles.length > 0 ? uploadedFiles : undefined,
+    };
+
+    addMessage(userMessage);
+    const userInput = inputValue;
+    setInputValue('');
+    setUploadedFiles([]);
+    setIsProcessing(true);
+
+    try {
+      addMessage({
+        type: MessageTypes.AGENT_THINKING,
+        content: '正在分析你的问题...',
+        timestamp: new Date().toISOString(),
+      });
+
+      const response = await axios.post('/mcp/agent/chat', {
+        message: userInput,
+        conversation_history: messages
+          .filter((m) => m.type === MessageTypes.USER || m.type === MessageTypes.AGENT_RESPONSE)
+          .map((m) => ({
+            isUser: m.type === MessageTypes.USER,
+            content: m.content,
+          })),
+        user_id: user?.id || 'anonymous',
+        user_nickname: user?.nickname || '匿名用户',
+        user_avatar: user?.avatar || '',
+        subscription_type: user?.subscription_type || 'free',
+        session_id: currentSessionId,
+        model: selectedModel,
+        tools: selectedTools,
+        files: uploadedFiles.length > 0 ? uploadedFiles : undefined,
+      });
+
+      setMessages((prev) => prev.filter((m) => m.type !== MessageTypes.AGENT_THINKING));
+
+      if (response.data.success) {
+        const data = response.data;
+        if (data.session_id && !currentSessionId) {
+          setCurrentSessionId(data.session_id);
+        }
+
+        if (data.plan) {
+          addMessage({
+            type: MessageTypes.AGENT_PLAN,
+            content: '已制定执行计划',
+            plan: data.plan,
+            timestamp: new Date().toISOString(),
+          });
+        }
+
+        if (data.steps && data.steps.length > 0) {
+          addMessage({
+            type: MessageTypes.AGENT_EXECUTING,
+            content: '正在执行步骤...',
+            plan: data.plan,
+            stepResults: data.steps,
+            timestamp: new Date().toISOString(),
+          });
+        }
+
+        setMessages((prev) => prev.filter((m) => m.type !== MessageTypes.AGENT_EXECUTING));
+
+        addMessage({
+          type: MessageTypes.AGENT_RESPONSE,
+          content: data.final_answer || data.message || '处理完成',
+          plan: data.plan,
+          stepResults: data.steps,
+          metadata: data.metadata,
+          timestamp: new Date().toISOString(),
+        });
+
+        loadSessions();
+      }
+    } catch (error) {
+      logger.error('Agent chat error', error);
+      setMessages((prev) =>
+        prev.filter(
+          (m) => m.type !== MessageTypes.AGENT_THINKING && m.type !== MessageTypes.AGENT_EXECUTING
+        )
+      );
+
+      const errorMessage = error.response?.data?.error || error.message || '处理失败';
+      addMessage({
+        type: MessageTypes.ERROR,
+        content: `处理失败：${errorMessage}`,
+        timestamp: new Date().toISOString(),
+      });
+
+      toast({
+        title: '处理失败',
+        description: errorMessage,
+        status: 'error',
+        duration: 5000,
+      });
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  // 文件上传处理
+  const handleFileSelect = (event) => {
+    const files = Array.from(event.target.files || []);
+    const fileData = files.map(file => ({
+      name: file.name,
+      size: file.size,
+      type: file.type,
+      // 实际上传时需要转换为 base64 或上传到服务器
+      url: URL.createObjectURL(file),
+    }));
+    setUploadedFiles(prev => [...prev, ...fileData]);
+  };
+
+  const removeFile = (index) => {
+    setUploadedFiles(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const addMessage = (message) => {
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: Date.now() + Math.random(),
+        ...message,
+      },
+    ]);
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+
+  useEffect(() => {
+    loadSessions();
+    createNewSession();
+  }, [user]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // ==================== 按日期分组会话 ====================
+  const groupSessionsByDate = (sessions) => {
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const weekAgo = new Date(today);
+    weekAgo.setDate(weekAgo.getDate() - 7);
+
+    const groups = {
+      today: [],
+      yesterday: [],
+      thisWeek: [],
+      older: [],
+    };
+
+    sessions.forEach(session => {
+      const sessionDate = new Date(session.created_at || session.timestamp);
+      const daysDiff = Math.floor((today - sessionDate) / (1000 * 60 * 60 * 24));
+
+      if (daysDiff === 0) {
+        groups.today.push(session);
+      } else if (daysDiff === 1) {
+        groups.yesterday.push(session);
+      } else if (daysDiff <= 7) {
+        groups.thisWeek.push(session);
+      } else {
+        groups.older.push(session);
+      }
+    });
+
+    return groups;
+  };
+
+  const sessionGroups = groupSessionsByDate(sessions);
+  const filteredSessions = searchQuery
+    ? sessions.filter((s) =>
+        s.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        s.session_id?.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    : sessions;
+
+  const quickQuestions = [
+    { text: '今日涨停板块分析', emoji: '🔥' },
+    { text: '新能源概念机会', emoji: '⚡' },
+    { text: '半导体行业动态', emoji: '💾' },
+    { text: '本周热门研报', emoji: '📊' },
+  ];
+
+  return (
+    <div className="flex h-[calc(100vh-80px)] bg-gradient-to-br from-gray-900 via-slate-900 to-gray-900 overflow-hidden">
+      {/* 左侧栏 - 深色毛玻璃 */}
+      {isLeftSidebarOpen && (
+        <motion.div
+          className="w-80 flex flex-col bg-gray-900/95 backdrop-blur-xl border-r border-gray-800 shadow-2xl"
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          variants={animations.slideInLeft}
+        >
+          <div className="p-4 border-b border-gray-800">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <MessageSquare className="w-5 h-5 text-blue-400" />
+                <span className="font-semibold text-gray-100">对话历史</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Tooltip content="新建对话">
+                  <Button
+                    isIconOnly
+                    size="sm"
+                    variant="flat"
+                    color="primary"
+                    onPress={createNewSession}
+                  >
+                    <Plus className="w-4 h-4" />
+                  </Button>
+                </Tooltip>
+                <Tooltip content="收起侧边栏">
+                  <Button
+                    isIconOnly
+                    size="sm"
+                    variant="light"
+                    onPress={() => setIsLeftSidebarOpen(false)}
+                  >
+                    <ChevronLeft className="w-4 h-4" />
+                  </Button>
+                </Tooltip>
+              </div>
+            </div>
+
+            <Input
+              placeholder="搜索对话..."
+              value={searchQuery}
+              onValueChange={setSearchQuery}
+              startContent={<Search className="w-4 h-4 text-gray-500" />}
+              size="sm"
+              variant="bordered"
+              classNames={{
+                input: 'text-sm text-gray-100',
+                inputWrapper: 'border-gray-700 bg-gray-800/50 hover:border-gray-600',
+              }}
+            />
+          </div>
+
+          <div className="flex-1 p-3 overflow-y-auto">
+            {/* 按日期分组显示会话 */}
+            {sessionGroups.today.length > 0 && (
+              <div className="mb-4">
+                <p className="text-xs font-semibold text-gray-400 mb-2 px-2">今天</p>
+                <div className="space-y-2">
+                  {sessionGroups.today.map((session) => (
+                    <SessionCard
+                      key={session.session_id}
+                      session={session}
+                      isActive={currentSessionId === session.session_id}
+                      onPress={() => switchSession(session.session_id)}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {sessionGroups.yesterday.length > 0 && (
+              <div className="mb-4">
+                <p className="text-xs font-semibold text-gray-400 mb-2 px-2">昨天</p>
+                <div className="space-y-2">
+                  {sessionGroups.yesterday.map((session) => (
+                    <SessionCard
+                      key={session.session_id}
+                      session={session}
+                      isActive={currentSessionId === session.session_id}
+                      onPress={() => switchSession(session.session_id)}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {sessionGroups.thisWeek.length > 0 && (
+              <div className="mb-4">
+                <p className="text-xs font-semibold text-gray-400 mb-2 px-2">本周</p>
+                <div className="space-y-2">
+                  {sessionGroups.thisWeek.map((session) => (
+                    <SessionCard
+                      key={session.session_id}
+                      session={session}
+                      isActive={currentSessionId === session.session_id}
+                      onPress={() => switchSession(session.session_id)}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {sessionGroups.older.length > 0 && (
+              <div className="mb-4">
+                <p className="text-xs font-semibold text-gray-400 mb-2 px-2">更早</p>
+                <div className="space-y-2">
+                  {sessionGroups.older.map((session) => (
+                    <SessionCard
+                      key={session.session_id}
+                      session={session}
+                      isActive={currentSessionId === session.session_id}
+                      onPress={() => switchSession(session.session_id)}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {isLoadingSessions && (
+              <div className="flex justify-center p-4">
+                <Spinner size="sm" color="primary" />
+              </div>
+            )}
+
+            {sessions.length === 0 && !isLoadingSessions && (
+              <div className="text-center py-8 text-gray-500 text-sm">
+                <MessageSquare className="w-8 h-8 mx-auto mb-2 opacity-50" />
+                <p>还没有对话历史</p>
+                <p className="text-xs mt-1">开始一个新对话吧！</p>
+              </div>
+            )}
+          </div>
+
+          <div className="p-4 border-t border-gray-800">
+            <div className="flex items-center gap-3">
+              <Avatar
+                src={user?.avatar}
+                name={user?.nickname}
+                size="sm"
+                classNames={{
+                  base: 'bg-gradient-to-br from-blue-500 to-purple-600',
+                }}
+              />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium truncate text-gray-100">{user?.nickname || '未登录'}</p>
+                <p className="text-xs text-gray-500 truncate">{user?.subscription_type || 'free'} 用户</p>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      )}
+
+      {/* 中间主聊天区域 */}
+      <div className="flex-1 flex flex-col">
+        {/* 顶部标题栏 - 深色 */}
+        <div className="bg-gray-900/95 backdrop-blur-xl border-b border-gray-800 px-6 py-4 shadow-lg">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              {!isLeftSidebarOpen && (
+                <Button
+                  isIconOnly
+                  size="sm"
+                  variant="light"
+                  onPress={() => setIsLeftSidebarOpen(true)}
+                >
+                  <Menu className="w-4 h-4 text-gray-400" />
+                </Button>
+              )}
+
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 3, repeat: Infinity, ease: 'linear' }}
+              >
+                <Avatar
+                  icon={<Cpu className="w-6 h-6" />}
+                  classNames={{
+                    base: 'bg-gradient-to-br from-purple-500 to-pink-500',
+                  }}
+                />
+              </motion.div>
+
+              <div>
+                <h1 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                  价小前投研 AI
+                </h1>
+                <div className="flex items-center gap-2 mt-1">
+                  <Chip
+                    size="sm"
+                    variant="flat"
+                    color="success"
+                    startContent={<Zap className="w-3 h-3" />}
+                    classNames={{
+                      base: 'bg-green-500/20',
+                      content: 'text-green-400',
+                    }}
+                  >
+                    智能分析
+                  </Chip>
+                  <Chip
+                    size="sm"
+                    variant="flat"
+                    color="secondary"
+                    classNames={{
+                      base: 'bg-purple-500/20',
+                      content: 'text-purple-400',
+                    }}
+                  >
+                    {AVAILABLE_MODELS.find((m) => m.id === selectedModel)?.name}
+                  </Chip>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Tooltip content="清空对话">
+                <Button
+                  isIconOnly
+                  size="sm"
+                  variant="light"
+                  onPress={createNewSession}
+                  className="text-gray-400 hover:text-gray-200"
+                >
+                  <RefreshCw className="w-4 h-4" />
+                </Button>
+              </Tooltip>
+              {!isRightSidebarOpen && (
+                <Button
+                  isIconOnly
+                  size="sm"
+                  variant="light"
+                  onPress={() => setIsRightSidebarOpen(true)}
+                  className="text-gray-400 hover:text-gray-200"
+                >
+                  <Settings className="w-4 h-4" />
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* 消息列表 */}
+        <div className="flex-1 p-6 bg-gradient-to-b from-gray-900/50 to-gray-900/30 overflow-y-auto">
+          <motion.div
+            className="max-w-4xl mx-auto space-y-4"
+            variants={animations.staggerContainer}
+            initial="initial"
+            animate="animate"
+          >
+            <AnimatePresence mode="popLayout">
+              {messages.map((message, index) => (
+                <motion.div
+                  key={message.id}
+                  variants={animations.fadeInUp}
+                  initial="initial"
+                  animate="animate"
+                  exit={{ opacity: 0, y: -20 }}
+                  layout
+                >
+                  <MessageRenderer message={message} userAvatar={user?.avatar} />
+                </motion.div>
+              ))}
+            </AnimatePresence>
+            <div ref={messagesEndRef} />
+          </motion.div>
+        </div>
+
+        {/* 快捷问题 */}
+        <AnimatePresence>
+          {messages.length <= 2 && !isProcessing && (
+            <motion.div
+              className="px-6 py-3"
+              variants={animations.fadeInUp}
+              initial="initial"
+              animate="animate"
+              exit={{ opacity: 0, y: 20 }}
+            >
+              <div className="max-w-4xl mx-auto">
+              <p className="text-xs text-gray-400 mb-2 font-medium flex items-center gap-1">
+                <Sparkles className="w-3 h-3" />
+                快速开始
+              </p>
+              <div className="grid grid-cols-2 gap-2">
+                {quickQuestions.map((question, idx) => (
+                  <motion.div key={idx} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+                    <Button
+                      variant="bordered"
+                      color="primary"
+                      className="w-full justify-start h-auto py-3 border-gray-700 hover:border-blue-500 hover:bg-blue-500/10"
+                      onPress={() => {
+                        setInputValue(question.text);
+                        inputRef.current?.focus();
+                      }}
+                    >
+                      <span className="mr-2">{question.emoji}</span>
+                      <span className="text-gray-200">{question.text}</span>
+                    </Button>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* 输入栏 - 深色 */}
+        <div className="bg-gray-900/95 backdrop-blur-xl border-t border-gray-800 px-6 py-4 shadow-2xl">
+          <div className="max-w-4xl mx-auto">
+            {/* 已上传文件预览 */}
+            {uploadedFiles.length > 0 && (
+              <div className="mb-3 flex gap-2 flex-wrap">
+                {uploadedFiles.map((file, idx) => (
+                  <Chip
+                    key={idx}
+                    onClose={() => removeFile(idx)}
+                    variant="flat"
+                    classNames={{
+                      base: 'bg-gray-800 border border-gray-700',
+                      content: 'text-gray-300',
+                    }}
+                  >
+                    {file.name}
+                  </Chip>
+                ))}
+              </div>
+            )}
+
+            <div className="flex gap-2">
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                accept="image/*,.pdf,.doc,.docx,.txt"
+                onChange={handleFileSelect}
+                className="hidden"
+              />
+
+              <Tooltip content="上传文件">
+                <Button
+                  isIconOnly
+                  variant="flat"
+                  size="lg"
+                  onPress={() => fileInputRef.current?.click()}
+                  className="bg-gray-800 hover:bg-gray-700 text-gray-300"
+                >
+                  <Paperclip className="w-5 h-5" />
+                </Button>
+              </Tooltip>
+
+              <Tooltip content="上传图片">
+                <Button
+                  isIconOnly
+                  variant="flat"
+                  size="lg"
+                  onPress={() => {
+                    fileInputRef.current?.setAttribute('accept', 'image/*');
+                    fileInputRef.current?.click();
+                  }}
+                  className="bg-gray-800 hover:bg-gray-700 text-gray-300"
+                >
+                  <ImageIcon className="w-5 h-5" />
+                </Button>
+              </Tooltip>
+
+              <Input
+                ref={inputRef}
+                value={inputValue}
+                onValueChange={setInputValue}
+                onKeyDown={handleKeyPress}
+                placeholder="输入你的问题... (Enter 发送, Shift+Enter 换行)"
+                disabled={isProcessing}
+                size="lg"
+                variant="bordered"
+                classNames={{
+                  input: 'text-base text-gray-100',
+                  inputWrapper: 'border-2 border-gray-700 bg-gray-800/50 hover:border-blue-500 focus-within:border-blue-500',
+                }}
+              />
+
+              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+                <Button
+                  isIconOnly
+                  color="primary"
+                  variant="shadow"
+                  size="lg"
+                  onPress={handleSendMessage}
+                  isLoading={isProcessing}
+                  isDisabled={!inputValue.trim() || isProcessing}
+                  className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500"
+                >
+                  {!isProcessing && <Send className="w-5 h-5" />}
+                </Button>
+              </motion.div>
+            </div>
+
+            <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
+              <div className="flex items-center gap-1">
+                <Kbd keys={['enter']} className="bg-gray-800 text-gray-400">Enter</Kbd>
+                <span>发送</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <Kbd keys={['shift']} className="bg-gray-800 text-gray-400">Shift</Kbd>
+                <span>+</span>
+                <Kbd keys={['enter']} className="bg-gray-800 text-gray-400">Enter</Kbd>
+                <span>换行</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 右侧栏 - 深色配置中心 */}
+      {isRightSidebarOpen && (
+        <motion.div
+          className="w-80 flex flex-col bg-gray-900/95 backdrop-blur-xl border-l border-gray-800 shadow-2xl"
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          variants={animations.slideInRight}
+        >
+          <div className="p-4 border-b border-gray-800">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Settings className="w-5 h-5 text-purple-400" />
+                <span className="font-semibold text-gray-100">配置中心</span>
+              </div>
+              <Tooltip content="收起侧边栏">
+                <Button
+                  isIconOnly
+                  size="sm"
+                  variant="light"
+                  onPress={() => setIsRightSidebarOpen(false)}
+                  className="text-gray-400 hover:text-gray-200"
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </Button>
+              </Tooltip>
+            </div>
+          </div>
+
+          <div className="flex-1 overflow-y-auto">
+            <Tabs
+              aria-label="配置选项"
+              color="primary"
+              variant="underlined"
+              classNames={{
+                tabList: 'gap-6 w-full px-4 border-b border-gray-800',
+                cursor: 'bg-blue-500',
+                tab: 'text-gray-400 data-[selected=true]:text-blue-400',
+                tabContent: 'group-data-[selected=true]:text-blue-400',
+              }}
+            >
+              {/* 模型选择 */}
+              <Tab
+                key="model"
+                title={
+                  <div className="flex items-center gap-2">
+                    <Cpu className="w-4 h-4" />
+                    <span>模型</span>
+                  </div>
+                }
+              >
+                <div className="p-4 space-y-3">
+                  {AVAILABLE_MODELS.map((model) => (
+                    <Card
+                      key={model.id}
+                      isPressable
+                      isHoverable
+                      onPress={() => setSelectedModel(model.id)}
+                      className={`transition-all ${
+                        selectedModel === model.id
+                          ? 'bg-blue-500/20 border-2 border-blue-500'
+                          : 'bg-gray-800/50 border-2 border-gray-700 hover:border-gray-600'
+                      }`}
+                    >
+                      <Card.Content className="p-3">
+                        <div className="flex items-start gap-3">
+                          <div className="p-2 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-500/20">
+                            {model.icon}
+                          </div>
+                          <div className="flex-1">
+                            <p className="font-semibold text-sm text-gray-100">{model.name}</p>
+                            <p className="text-xs text-gray-400 mt-1">{model.description}</p>
+                          </div>
+                          {selectedModel === model.id && (
+                            <Check className="w-5 h-5 text-blue-400" />
+                          )}
+                        </div>
+                      </Card.Content>
+                    </Card>
+                  ))}
+                </div>
+              </Tab>
+
+              {/* 工具选择 - 按分类显示 */}
+              <Tab
+                key="tools"
+                title={
+                  <div className="flex items-center gap-2">
+                    <Code className="w-4 h-4" />
+                    <span>工具</span>
+                    {selectedTools.length > 0 && (
+                      <span className="inline-flex items-center justify-center w-5 h-5 text-xs font-semibold text-white bg-blue-500 rounded-full">
+                        {selectedTools.length}
+                      </span>
+                    )}
+                  </div>
+                }
+              >
+                <div className="p-4">
+                  <Accordion
+                    variant="splitted"
+                    classNames={{
+                      base: 'gap-2',
+                      trigger: 'bg-gray-800/50 hover:bg-gray-800 border border-gray-700 rounded-lg',
+                      title: 'text-gray-100 text-sm',
+                      content: 'text-gray-300',
+                    }}
+                  >
+                    {Object.entries(TOOL_CATEGORIES).map(([category, tools]) => (
+                      <Accordion.Item
+                        key={category}
+                        aria-label={category}
+                        title={
+                          <div className="flex items-center justify-between w-full pr-2">
+                            <span>{category}</span>
+                            <Chip
+                              size="sm"
+                              variant="flat"
+                              classNames={{
+                                base: 'bg-blue-500/20',
+                                content: 'text-blue-400',
+                              }}
+                            >
+                              {tools.filter(t => selectedTools.includes(t.id)).length}/{tools.length}
+                            </Chip>
+                          </div>
+                        }
+                      >
+                        <CheckboxGroup
+                          value={selectedTools}
+                          onValueChange={setSelectedTools}
+                          classNames={{
+                            base: 'gap-2',
+                          }}
+                        >
+                          {tools.map((tool) => (
+                            <Checkbox
+                              key={tool.id}
+                              value={tool.id}
+                              classNames={{
+                                base: 'p-2 rounded-lg hover:bg-gray-800/50 transition-colors',
+                                label: 'text-gray-200 text-sm',
+                                wrapper: 'after:bg-blue-500',
+                              }}
+                            >
+                              <div className="flex items-center gap-2">
+                                <div className="text-blue-400">{tool.icon}</div>
+                                <div>
+                                  <p className="text-sm">{tool.name}</p>
+                                  <p className="text-xs text-gray-500">{tool.description}</p>
+                                </div>
+                              </div>
+                            </Checkbox>
+                          ))}
+                        </CheckboxGroup>
+                      </Accordion.Item>
+                    ))}
+                  </Accordion>
+
+                  <div className="mt-4 flex gap-2">
+                    <Button
+                      size="sm"
+                      variant="flat"
+                      onPress={() => setSelectedTools(MCP_TOOLS.map(t => t.id))}
+                      className="flex-1 bg-blue-500/20 text-blue-400 hover:bg-blue-500/30"
+                    >
+                      全选
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="flat"
+                      onPress={() => setSelectedTools([])}
+                      className="flex-1 bg-gray-800 text-gray-300 hover:bg-gray-700"
+                    >
+                      清空
+                    </Button>
+                  </div>
+                </div>
+              </Tab>
+
+              {/* 统计信息 */}
+              <Tab
+                key="stats"
+                title={
+                  <div className="flex items-center gap-2">
+                    <BarChart3 className="w-4 h-4" />
+                    <span>统计</span>
+                  </div>
+                }
+              >
+                <div className="p-4 space-y-4">
+                  <Card className="bg-gray-800/50 border border-gray-700">
+                    <Card.Content className="p-4">
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <p className="text-xs text-gray-400">对话数</p>
+                          <p className="text-2xl font-bold text-gray-100">{sessions.length}</p>
+                        </div>
+                        <MessageSquare className="w-8 h-8 text-blue-400 opacity-50" />
+                      </div>
+                    </Card.Content>
+                  </Card>
+
+                  <Card className="bg-gray-800/50 border border-gray-700">
+                    <Card.Content className="p-4">
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <p className="text-xs text-gray-400">消息数</p>
+                          <p className="text-2xl font-bold text-gray-100">{messages.length}</p>
+                        </div>
+                        <Activity className="w-8 h-8 text-purple-400 opacity-50" />
+                      </div>
+                    </Card.Content>
+                  </Card>
+
+                  <Card className="bg-gray-800/50 border border-gray-700">
+                    <Card.Content className="p-4">
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <p className="text-xs text-gray-400">已选工具</p>
+                          <p className="text-2xl font-bold text-gray-100">{selectedTools.length}</p>
+                        </div>
+                        <Code className="w-8 h-8 text-green-400 opacity-50" />
+                      </div>
+                    </Card.Content>
+                  </Card>
+                </div>
+              </Tab>
+            </Tabs>
+          </div>
+        </motion.div>
+      )}
+    </div>
+  );
+};
+
+export default AgentChat;
+
+/**
+ * 会话卡片组件
+ */
+const SessionCard = ({ session, isActive, onPress }) => {
+  return (
+    <Card
+      isPressable
+      isHoverable
+      onPress={onPress}
+      className={`transition-all ${
+        isActive
+          ? 'bg-blue-500/20 border border-blue-500'
+          : 'bg-gray-800/30 border border-gray-800 hover:bg-gray-800/50 hover:border-gray-700'
+      }`}
+    >
+      <Card.Content className="p-3">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium truncate text-gray-100">
+              {session.title || '新对话'}
+            </p>
+            <p className="text-xs text-gray-500 mt-1">
+              {new Date(session.created_at || session.timestamp).toLocaleString('zh-CN', {
+                month: 'numeric',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+              })}
+            </p>
+          </div>
+          {session.message_count && (
+            <Chip
+              size="sm"
+              variant="flat"
+              classNames={{
+                base: isActive ? 'bg-blue-500/30' : 'bg-gray-700/50',
+                content: isActive ? 'text-blue-300' : 'text-gray-400',
+              }}
+            >
+              {session.message_count}
+            </Chip>
+          )}
+        </div>
+      </Card.Content>
+    </Card>
+  );
+};
+
+/**
+ * 消息渲染器
+ */
+const MessageRenderer = ({ message, userAvatar }) => {
+  switch (message.type) {
+    case MessageTypes.USER:
+      return (
+        <div className="flex justify-end">
+          <div className="flex items-start gap-3 max-w-[75%]">
+            <Card className="bg-gradient-to-br from-blue-600 to-purple-600 shadow-lg shadow-blue-500/20">
+              <Card.Content className="px-5 py-3">
+                <p className="text-sm text-white whitespace-pre-wrap">{message.content}</p>
+                {message.files && message.files.length > 0 && (
+                  <div className="mt-2 flex gap-2 flex-wrap">
+                    {message.files.map((file, idx) => (
+                      <Chip key={idx} size="sm" variant="flat" className="bg-white/20 text-white">
+                        <File className="w-3 h-3 mr-1" />
+                        {file.name}
+                      </Chip>
+                    ))}
+                  </div>
+                )}
+              </Card.Content>
+            </Card>
+            <Avatar
+              src={userAvatar}
+              icon={<User className="w-4 h-4" />}
+              size="sm"
+              classNames={{
+                base: 'bg-gradient-to-br from-blue-500 to-purple-600',
+              }}
+            />
+          </div>
+        </div>
+      );
+
+    case MessageTypes.AGENT_THINKING:
+      return (
+        <div className="flex justify-start">
+          <div className="flex items-start gap-3 max-w-[75%]">
+            <Avatar
+              icon={<Cpu className="w-4 h-4" />}
+              size="sm"
+              classNames={{
+                base: 'bg-gradient-to-br from-purple-500 to-pink-500',
+              }}
+            />
+            <Card className="bg-gray-800/50 border border-gray-700 backdrop-blur-sm">
+              <Card.Content className="px-5 py-3 flex items-center gap-2">
+                <Spinner size="sm" color="primary" />
+                <p className="text-sm text-gray-300">{message.content}</p>
+              </Card.Content>
+            </Card>
+          </div>
+        </div>
+      );
+
+    case MessageTypes.AGENT_RESPONSE:
+      return (
+        <div className="flex justify-start">
+          <div className="flex items-start gap-3 max-w-[75%]">
+            <Avatar
+              icon={<Cpu className="w-4 h-4" />}
+              size="sm"
+              classNames={{
+                base: 'bg-gradient-to-br from-purple-500 to-pink-500',
+              }}
+            />
+            <Card className="bg-gray-800/80 border border-gray-700 backdrop-blur-sm shadow-lg">
+              <Card.Content className="px-5 py-3">
+                <p className="text-sm text-gray-100 whitespace-pre-wrap leading-relaxed">
+                  {message.content}
+                </p>
+
+                {message.stepResults && message.stepResults.length > 0 && (
+                  <div className="mt-3">
+                    <ExecutionStepsDisplay steps={message.stepResults} plan={message.plan} />
+                  </div>
+                )}
+
+                <div className="flex items-center gap-2 mt-3 pt-3 border-t border-gray-700">
+                  <Tooltip content="复制">
+                    <Button
+                      isIconOnly
+                      size="sm"
+                      variant="light"
+                      onPress={() => navigator.clipboard.writeText(message.content)}
+                      className="text-gray-400 hover:text-gray-200"
+                    >
+                      <Copy className="w-4 h-4" />
+                    </Button>
+                  </Tooltip>
+                  <Tooltip content="点赞">
+                    <Button
+                      isIconOnly
+                      size="sm"
+                      variant="light"
+                      className="text-gray-400 hover:text-green-400"
+                    >
+                      <ThumbsUp className="w-4 h-4" />
+                    </Button>
+                  </Tooltip>
+                  <Tooltip content="点踩">
+                    <Button
+                      isIconOnly
+                      size="sm"
+                      variant="light"
+                      className="text-gray-400 hover:text-red-400"
+                    >
+                      <ThumbsDown className="w-4 h-4" />
+                    </Button>
+                  </Tooltip>
+                  <span className="text-xs text-gray-500 ml-auto">
+                    {new Date(message.timestamp).toLocaleTimeString('zh-CN', {
+                      hour: '2-digit',
+                      minute: '2-digit',
+                    })}
+                  </span>
+                </div>
+              </Card.Content>
+            </Card>
+          </div>
+        </div>
+      );
+
+    case MessageTypes.ERROR:
+      return (
+        <div className="flex justify-center">
+          <Card className="bg-red-500/10 border border-red-500/50 backdrop-blur-sm">
+            <Card.Content className="px-5 py-3">
+              <p className="text-sm text-red-400">{message.content}</p>
+            </Card.Content>
+          </Card>
+        </div>
+      );
+
+    default:
+      return null;
+  }
+};
+
+/**
+ * 执行步骤显示组件
+ */
+const ExecutionStepsDisplay = ({ steps, plan }) => {
+  return (
+    <Accordion
+      variant="splitted"
+      classNames={{
+        base: 'px-0',
+        trigger: 'bg-gray-900/50 hover:bg-gray-900 border border-gray-700 rounded-lg px-4 py-2',
+        title: 'text-gray-300 text-sm',
+        content: 'text-gray-400',
+      }}
+    >
+      <Accordion.Item
+        key="1"
+        aria-label="执行详情"
+        title={
+          <div className="flex items-center gap-2">
+            <Activity className="w-4 h-4 text-purple-400" />
+            <span>执行详情</span>
+            <Chip
+              size="sm"
+              variant="flat"
+              classNames={{
+                base: 'bg-purple-500/20',
+                content: 'text-purple-400',
+              }}
+            >
+              {steps.length} 步骤
+            </Chip>
+          </div>
+        }
+      >
+        <div className="space-y-2">
+          {steps.map((result, idx) => (
+            <Card key={idx} className="bg-gray-900/30 border border-gray-700">
+              <Card.Content className="p-3">
+                <div className="flex items-start justify-between gap-2">
+                  <p className="text-xs font-medium text-gray-300">
+                    步骤 {idx + 1}: {result.tool_name}
+                  </p>
+                  <Chip
+                    size="sm"
+                    color={result.status === 'success' ? 'success' : 'danger'}
+                    variant="flat"
+                    classNames={{
+                      base: result.status === 'success' ? 'bg-green-500/20' : 'bg-red-500/20',
+                      content: result.status === 'success' ? 'text-green-400' : 'text-red-400',
+                    }}
+                  >
+                    {result.status}
+                  </Chip>
+                </div>
+                <p className="text-xs text-gray-500 mt-1">{result.execution_time?.toFixed(2)}s</p>
+                {result.error && <p className="text-xs text-red-400 mt-1">⚠️ {result.error}</p>}
+              </Card.Content>
+            </Card>
+          ))}
+        </div>
+      </Accordion.Item>
+    </Accordion>
+  );
+};