fix: support photo client tool in debug preview

frontend/src/components/assistant-editor/debug-preview.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react
 import {
   AudioLines,
   Braces,
+  Camera,
   Check,
   Copy,
   ImageIcon,
@@ -13,7 +14,6 @@ import {
   Mic,
   Orbit,
   PhoneOff,
-  ScanLine,
   Send,
   Smartphone,
   Sparkles,
@@ -1674,7 +1674,10 @@ function DebugPhotoCaptureButton({
   onCapture: () => Promise<void>;
 }) {
   return (
-    <div className="absolute bottom-4 left-1/2 z-20 flex -translate-x-1/2 flex-col items-center gap-2">
+    <div className="absolute bottom-4 left-1/2 z-20 flex -translate-x-1/2 animate-in flex-col items-center gap-2 fade-in-0 slide-in-from-bottom-2 duration-200">
+      <span className="sr-only" role="status" aria-live="polite">
+        拍照按钮已开启
+      </span>
       {error && (
         <div className="max-w-xs rounded-full border border-destructive/20 bg-background/90 px-3 py-1 text-xs text-destructive shadow-sm backdrop-blur">
           {error}
@@ -1682,18 +1685,19 @@ function DebugPhotoCaptureButton({
       )}
       <Button
         type="button"
-        size="icon"
+        size="sm"
         onClick={() => void onCapture()}
         disabled={capturing || !enabled}
         aria-label={capturing ? "正在提交照片" : "拍照并发送"}
         title={capturing ? "正在提交照片" : "拍照并发送"}
-        className="size-12 rounded-full shadow-lg"
+        className="h-10 shrink-0 gap-2 rounded-full px-5 shadow-lg ring-1 ring-black/10"
       >
         {capturing ? (
           <Loader2 className="size-5 animate-spin" />
         ) : (
-          <ScanLine className="size-5" />
+          <Camera className="size-5" />
         )}
+        <span>{capturing ? "正在拍照" : "拍照"}</span>
       </Button>
     </div>
   );

frontend/src/hooks/use-voice-preview.ts

@@ -826,6 +826,10 @@ export function useVoicePreview(
       setVideoStream(localVideo ? new MediaStream([localVideo]) : null);
       void refreshDevices();
 
+      // SmallWebRTCTransport discards APIRequest.requestData when endpoint is a
+      // Request object. Keep capabilities in a header as the reliable path;
+      // requestData remains below for compatibility with other transports.
+      const clientToolNames = Array.from(clientToolHandlersRef.current.keys());
       const request = new Request(`${API_BASE}/api/webrtc/offer`, {
         method: "POST",
         headers: {
@@ -834,6 +838,7 @@ export function useVoicePreview(
           "X-Pipecat-Dynamic-Variables": encodeHeaderJson(
             options.dynamicVariables ?? {},
           ),
+          "X-Pipecat-Client-Tools": encodeHeaderJson(clientToolNames),
         },
         credentials: "include",
       });
@@ -844,9 +849,7 @@ export function useVoicePreview(
             assistant_id: assistantId,
             vision_enabled: Boolean(options.visionEnabled),
             dynamic_variables: options.dynamicVariables ?? {},
-            client_tool_names: Array.from(
-              clientToolHandlersRef.current.keys(),
-            ),
+            client_tool_names: clientToolNames,
           },
         },
       });