agent-Specialization/doc/frontend/phase3_chat.md

前端组件化 Phase 3 – 聊天区实时化

阶段目标

1. 将 legacy static/app.js 中的聊天逻辑迁移到 Vue/Pinia，覆盖历史记录、实时消息、输入/工具/上传等能力。
2. 建立统一的状态/通知体系（用量、资源、toast/confirm），为后续样式统一和其它页面迁移打基础。

交付进度

Step 1 – 历史消息

• useChatStore 加载 /api/conversations/<id>/messages 并在 ChatArea 显示历史记录，支持错误提示/滚动。

Step 2 – 实时通信 + 输入区 + 快捷菜单

• useConnectionStore 接入 socket.io-client，useChatStore 监听 ai_message_start/thinking_*/text_*/ai_message_end/工具事件并渲染流式内容。
• ChatArea 输入区支持 Ctrl+Enter 发送、停止按钮、快捷菜单（上传 & 工具开关），操作成功/失败都通过 toast 提示。

Step 3 – Token/资源面板 + 工具卡片/Markdown

• useResourceStore + TokenDrawer 负责 Token/Quota/容器/存储可视化并定时轮询。
• MarkdownBlock 结合 marked + prismjs 渲染聊天内容/思考流，代码块支持高亮与复制。
• 工具事件在消息下方以卡片展示状态/提示/结果，彻底脱离 legacy DOM。
• useToolStore 管理 /api/tool-settings，QuickMenu UI 与上传入口迁至 Vue。
• 新的 useUiStore + ToastStack/ConfirmDialog 提供全局通知/确认，旧版 alert/confirm 正逐步替换。

下一阶段计划

1. 工具卡片增强：支持命令输出、文件 diff、错误详情等，匹配 legacy Tool UI。
2. 提示体系统一：将所有 pushToast/confirmAction 调用迁到 Pinia store，统一文案与样式。
3. 右侧聚焦/个性化面板：组件化 Focus Files 与 Personalization Drawer，与新聊天区联动。
4. 样式统一：整理 CSS/变量，让 Token Drawer、聊天气泡、工具卡片等跟 legacy 视觉一致，避免层级堆叠。
5. 其它交互：如滚动锁、终端入口、工具提示等，让新版 UI 完全覆盖旧版功能。

完成上述步骤后即可进入 Phase 4，重点处理聚焦面板、个性化设置、全局主题与其它页面。