refactor: AI 回复卡片渲染 UX 优化

问题:
- 思考过程默认折叠，流式时看不到实时思考
- StreamingIndicator 独立展示，与卡片内容脱节
- 思考和回复在同一卡片无阶段分隔
- 加载态只有光秃秃闪烁块
- 流式中的卡片和无流式的卡片看不出区别

优化:
- 思考过程: 流式时自动展开(defaultExpanded)，完成后可手动折叠
- 三阶段标签: 💭思考 / 🔧工具 / ✏️回复，带颜色和脉冲动画
- 流式无内容时显示「正在思考.../正在生成回复...」带打字光标
- 有内容时末尾添加闪烁光标指示持续输出中
- 卡片流式时边框高亮(borderColor + boxShadow)
- StreamingIndicator 仅在没有可见内容时显示「正在连接 AI...」

src/components/chat/StreamingIndicator.tsx

@@ -1,24 +1,31 @@
 /**
  * StreamingIndicator — 流式加载指示器
+ *
+ * 仅在流式开始、尚无任何内容输出时显示初始加载状态。
+ * 一旦有思考内容或文本输出，AssistantMessage 卡片内部自行展示进度。
  */
 
-import { Box, Typography, CircularProgress } from '@mui/material';
-import { Brain, Loader2 } from 'lucide-react';
+import { Box, Typography } from '@mui/material';
+import { Loader2 } from 'lucide-react';
 import { useAgentStore } from '@renderer/stores/agent-store';
 
 export function StreamingIndicator(): React.JSX.Element | null {
   const isStreaming = useAgentStore((s) => s.isStreaming);
-  const agentStatus = useAgentStore((s) => s.agentStatus);
+  const streamingContent = useAgentStore((s) => s.streamingContent);
+  const messages = useAgentStore((s) => s.messages);
+
+  // 已有内容输出时隐藏（AssistantMessage 内部展示）
   if (!isStreaming) return null;
 
+  const lastMsg = messages[messages.length - 1];
+  const hasVisibleContent = !!streamingContent || !!lastMsg?.reasoningContent || !!lastMsg?.toolCalls?.length;
+  if (hasVisibleContent) return null;
+
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1.5, animation: 'fadeIn 200ms ease-out' }}>
-      <Box sx={{ width: 32, height: 32, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: 'secondary.main', color: 'primary.main' }}>
-        <Brain size={16} style={{ animation: 'pulse 2s infinite' }} />
-      </Box>
-      <Loader2 size={14} style={{ animation: 'spin 1s linear infinite', color: '#818cf8' }} />
-      <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-        {agentStatus === 'thinking' ? '思考中...' : agentStatus === 'executing' ? '执行中...' : '处理中...'}
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, py: 2, pl: 5, animation: 'fadeIn 200ms ease-out' }}>
+      <Loader2 size={16} style={{ animation: 'spin 1s linear infinite', color: '#818cf8' }} />
+      <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: 12 }}>
+        正在连接 AI...
       </Typography>
     </Box>
   );