fix: 修复 AI 回复无法送达发送者 + 重复消息 + action角色泄露 + OS环境支持

广播逻辑重构:
- AI 回复 (stream_start/response/stream_segments/multi_message/stream_end) 改用 broadcastToUser 发送给所有客户端
- 用户消息回显保持 broadcastToUserExcept 排除发送者

消息去重与角色修复:
- CacheMessage(user) 移至回复生成后，避免本轮 LLM 调用出现重复用户消息
- action 角色消息在 DB 存储时映射为 assistant，DeepSeek 等模型不支持自定义角色
- stream_end defer 机制确保错误路径也会终止客户端思考指示器

OS 完整环境支持:
- host 包重构为 HostBackend 接口 + Direct/WSL/Docker 三种后端
- 新增 os_exec/os_file/os_system 工具供 AI 在完整 Linux 环境中自由操作

其他:
- 视觉模型注入 + 图片预处理后清空 Images 避免传给 Chat 模型
- 图片 URL 相对路径→绝对 URL 转换
- DevTools 链路追踪页面 + 重启修复
- 记忆搜索模糊匹配增强
- 后台思考定时调度支持
- 管理后台页面 (模型配置/用户管理等)
- docs/api 更新广播机制说明

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/web/src/components/chat/MessageBubble.tsx

@@ -3,7 +3,7 @@ import { CyreneAvatar } from '@/components/persona/CyreneAvatar';
 import { useAuthStore } from '@/store/authStore';
 import { useChatStore } from '@/store/chatStore';
 import { useSpeechSynthesis } from '@/hooks/useSpeechSynthesis';
-import type { MessageAttachment, MultiMessageItem, StreamSegment, MessageDisplayType } from '@/types/chat';
+import type { MessageAttachment, MultiMessageItem, StreamSegment, MessageDisplayType, ToolProgressInfo, ToolCall } from '@/types/chat';
 import { ImageLightbox } from './ImageLightbox';
 import { MarkdownRenderer } from './MarkdownRenderer';
 
@@ -18,6 +18,7 @@ interface MessageBubbleProps {
   streamSegments?: StreamSegment[];
   msgType?: MessageDisplayType;
   metadata?: Record<string, unknown>;
+  audioUrl?: string;
 }
 
 /**
@@ -155,6 +156,7 @@ export function MessageBubble({
   streamSegments,
   msgType,
   metadata,
+  audioUrl,
 }: MessageBubbleProps) {
   const isUser = role === 'user';
   const isAction = role === 'action' || msgType === 'action';
@@ -179,12 +181,32 @@ export function MessageBubble({
     );
   }
 
-  // 工具进度 — 紧凑进度行
+  // 工具进度 — 带进度条的紧凑行
   if (isToolProgress) {
+    const tp: ToolProgressInfo | undefined = metadata?.tool_progress as ToolProgressInfo | undefined;
+    const progress = tp?.progress ?? 0;
+    const toolName = tp?.tool_name ?? '';
+    const status = tp?.status ?? 'running';
+    const statusColor =
+      status === 'completed' ? 'bg-green-400' :
+      status === 'failed' ? 'bg-red-400' :
+      status === 'started' ? 'bg-blue-400' :
+      'bg-blue-400 animate-pulse';
+    const progressText = status === 'completed' ? '完成' :
+      status === 'failed' ? '失败' :
+      `${Math.round(progress * 100)}%`;
+
     return (
-      <div className="flex items-center gap-2 mx-4 my-1 px-3 py-1 text-xs text-gray-400 dark:text-gray-500">
-        <span className="inline-block w-2 h-2 rounded-full bg-blue-400 animate-pulse" />
-        <span>{content}</span>
+      <div className="flex items-center gap-2 mx-4 my-1 px-3 py-1.5 text-xs text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-100 dark:border-gray-800">
+        {toolName && <span className="font-medium text-gray-600 dark:text-gray-300 flex-shrink-0">{toolName}</span>}
+        <div className="flex-1 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden min-w-[60px]">
+          <div
+            className={`h-full rounded-full transition-all duration-300 ${statusColor}`}
+            style={{ width: `${Math.max(progress * 100, 2)}%` }}
+          />
+        </div>
+        <span className="flex-shrink-0 text-[10px]">{progressText}</span>
+        {content && <span className="text-gray-400 truncate hidden sm:inline">{content}</span>}
       </div>
     );
   }
@@ -239,6 +261,7 @@ export function MessageBubble({
     );
   }
 
+  const toolCalls = (metadata?.tool_calls as ToolCall[] | undefined) ?? [];
   const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
   const time = new Date(timestamp).toLocaleTimeString('zh-CN', {
     hour: '2-digit',
@@ -330,6 +353,20 @@ export function MessageBubble({
           </p>
         )}
 
+        {/* 音频播放器 */}
+        {!isStreaming && audioUrl && (
+          <div className="mt-2">
+            <audio controls className="w-full max-w-[300px] h-8" src={audioUrl}>
+              您的浏览器不支持音频播放
+            </audio>
+          </div>
+        )}
+
+        {/* 工具调用信息 */}
+        {!isStreaming && toolCalls.length > 0 && (
+          <ToolCallsInfo toolCalls={toolCalls} />
+        )}
+
         {/* 图片附件网格 */}
         {!isStreaming && imageAttachments.length > 0 && (
           <div
@@ -452,6 +489,48 @@ function ImageThumbnail({
   );
 }
 
+/** 工具调用信息展示 */
+function ToolCallsInfo({ toolCalls }: { toolCalls: ToolCall[] }) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (!toolCalls || toolCalls.length === 0) return null;
+
+  return (
+    <div className="mt-2 pt-2 border-t border-pink-100 dark:border-pink-800">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-1 text-[10px] text-gray-400 hover:text-pink-500 transition-colors"
+      >
+        <span>{expanded ? '▼' : '▶'}</span>
+        <span>工具调用 ({toolCalls.length})</span>
+      </button>
+      {expanded && (
+        <div className="mt-1.5 space-y-1.5">
+          {toolCalls.map((tc, i) => (
+            <div key={i} className="bg-gray-50 dark:bg-gray-900 rounded-lg p-2 text-xs">
+              <div className="flex items-center gap-2">
+                <span className="font-medium text-pink-500">{tc.name}</span>
+                {tc.result !== undefined && (
+                  <span className="text-[10px] text-green-500">
+                    {typeof tc.result === 'string' && tc.result.length > 60
+                      ? tc.result.slice(0, 60) + '...'
+                      : JSON.stringify(tc.result).slice(0, 60)}
+                  </span>
+                )}
+              </div>
+              {tc.arguments && Object.keys(tc.arguments).length > 0 && (
+                <div className="mt-1 text-gray-400 font-mono break-all">
+                  {JSON.stringify(tc.arguments, null, 0).slice(0, 120)}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
 /** 用户头像组件：管理员使用 Admin_Avatar.jpg，普通用户使用 Default_Avatar.png */
 function UserAvatar() {
   const [imgError, setImgError] = useState(false);