feat(chat): 将工具调用卡片状态化并嵌入消息流

重构工具消息的呈现与更新逻辑，使其与常规消息一同展示并通过视觉状态反映执行进展。

- 为工具消息新增状态指示（执行中/完成/出错）、图标标签及输入摘要
- 实现通过 toolName/toolStatus 字段定位并就地更新已有工具消息而非追加新项
- 从消息列表中移除对 tool 角色的过滤，使其以内联卡片形式嵌入聊天流
- 添加液体填充动画，在工具执行期间提供进度反馈
- 为视频资源预览增加播放按钮遮罩以提示可播放
- 为 .mp4 与 .webm 文件设置正确的 Content-Type 头

web/client/src/components/chat/ChatView.tsx

@@ -220,18 +220,16 @@ export function ChatView() {
           {/* Message list */}
           <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4">
             {messages.map((msg, i) => (
-              msg.role !== 'tool' && (
-                <ChatMessage
-                  key={msg.id}
-                  message={msg}
-                  isLast={i === messages.length - 1}
-                  isThinking={thinking}
-                  onRegenerate={msg.role === 'assistant' ? handleRegenerate : undefined}
-                  onContinue={msg.role === 'assistant' ? handleContinue : undefined}
-                  onQuote={handleQuote}
-                  onDelete={handleDeleteMsg}
-                />
-              )
+              <ChatMessage
+                key={msg.id}
+                message={msg}
+                isLast={i === messages.length - 1}
+                isThinking={thinking}
+                onRegenerate={msg.role === 'assistant' ? handleRegenerate : undefined}
+                onContinue={msg.role === 'assistant' ? handleContinue : undefined}
+                onQuote={handleQuote}
+                onDelete={handleDeleteMsg}
+              />
             ))}
 
             {pipeline && (
@@ -244,7 +242,7 @@ export function ChatView() {
               />
             )}
 
-            {thinking && !pipeline && (
+            {thinking && !pipeline && !messages.some(m => m.role === 'tool' && m.toolStatus === 'running') && (
               <div className="flex items-center gap-2 text-zinc-400 text-sm py-2">
                 <Loader2 size={14} className="animate-spin text-indigo-400" />
                 {toolStatus || '思考中...'}