Add Network Quality Indicator component and integrate into Assistant and Mobile Call pages

- Introduce a new `NetworkQualityIndicator` component to visually represent network quality status during calls.
- Integrate the `NetworkQualityIndicator` into `AssistantPage` and `MobileCallPage`, enhancing user awareness of connection quality.
- Update `use-voice-preview` hook to manage network quality metrics, improving overall call experience and performance monitoring.

frontend/src/components/pages/AssistantPage.tsx

@@ -40,6 +40,7 @@ import {
 
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { NetworkQualityIndicator } from "@/components/network-quality-indicator";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Switch } from "@/components/ui/switch";
@@ -2037,6 +2038,10 @@ function DebugDrawer({
           <div className="shrink-0 text-sm font-medium text-foreground">
             调试与预览
           </div>
+          <NetworkQualityIndicator
+            quality={preview.networkQuality}
+            status={preview.status}
+          />
           <DebugConnectionStatus
             status={preview.status}
             micWarning={preview.micWarning}

frontend/src/components/pages/MobileCallPage.tsx

@@ -12,6 +12,7 @@ import {
   Video,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { NetworkQualityIndicator } from "@/components/network-quality-indicator";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -247,6 +248,7 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
     selectOutputDevice,
     supportsOutputSelection,
     messages,
+    networkQuality,
     connect,
     replaceVideoStream,
     disconnect,
@@ -325,6 +327,13 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
 
       {view === "chat" && <MobileCallTranscript messages={messages} />}
 
+      <NetworkQualityIndicator
+        quality={networkQuality}
+        status={status}
+        dark
+        className="absolute left-4 top-[max(1rem,env(safe-area-inset-top))] z-10 rounded-full border border-white/10 bg-black/30 px-3 py-1.5 backdrop-blur-md"
+      />
+
       <div className="absolute left-1/2 top-[max(1rem,env(safe-area-inset-top))] z-10 flex -translate-x-1/2 items-center gap-2 rounded-full border border-white/10 bg-black/30 px-3 py-1.5 text-xs text-white/85 backdrop-blur-md">
         <span
           className={[