feat: 完善端到端对话闭环，增强消息渲染与错误处理

- ChatPanel：流式光标动画、token/延迟元数据、自动滚动、三种空状态
- Toast 组件：错误码映射为中文友好文案，3 秒自动消失
- useVisionSession：stt_result 流式更新、防重复发送、打断保存未完成内容、结束清理全部状态
- App：断线提示、视频 loading 遮罩、按钮连接中状态
- ChatMessage 增加 latencyMs、model 字段

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

frontend/src/App.tsx

@@ -5,6 +5,7 @@
 import { useVisionSession } from "./hooks/useVisionSession";
 import { VideoPreview } from "./components/VideoPreview";
 import { ChatPanel } from "./components/ChatPanel";
+import { ToastContainer } from "./components/Toast";
 import "./App.css";
 
 function App() {
@@ -52,23 +53,31 @@ function App() {
               ⚠️ {vadError}
             </div>
           )}
+          {isProcessing && (
+            <div className="video-overlay">
+              <div className="video-overlay__spinner" />
+            </div>
+          )}
         </div>
 
         <div className="chat-section">
-          <ChatPanel messages={messages} />
-          {currentReply && (
-            <div className="chat-message chat-message--assistant chat-message--streaming">
-              <div className="chat-message__role">AI</div>
-              <div className="chat-message__content">{currentReply}</div>
+          {connectionStatus === "disconnected" && messages.length > 0 && (
+            <div className="system-message system-message--warning">
+              连接已断开，正在重连...
             </div>
           )}
+          <ChatPanel
+            messages={messages}
+            currentReply={currentReply}
+            connectionStatus={connectionStatus}
+          />
         </div>
       </main>
 
       <footer className="app-footer">
         {!isConnected ? (
           <button className="btn btn--primary" onClick={startSession}>
-            开始对话
+            {connectionStatus === "connecting" ? "连接中..." : "开始对话"}
           </button>
         ) : (
           <>
@@ -83,6 +92,8 @@ function App() {
           </>
         )}
       </footer>
+
+      <ToastContainer />
     </div>
   );
 }